/*==============================================================================
  DR. MELLISSA LINTON-VILLAFRANCO WEBSITE
==============================================================================*/

/*-----------------------
  Google Fonts
-----------------------*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500;600&display=swap');


/*-----------------------
  Color Palette
-----------------------*/

:root{

  --bg1: #fff7fa;
  --bg2: #ffe8ef;
  --bg3: #ffdce7;

  --text: #232323;
  --text-light: #555555;

  --accent: #8f3557;
  --accent-dark: #672540;
  --accent-light: #d97ea4;

  --white: #ffffff;

  --shadow: rgba(0,0,0,.08);

}


/*-----------------------
  Page Background
-----------------------*/

body {

    font-family: "Inter", sans-serif;

    color: var(--text);

    background: linear-gradient(
        90deg,
        var(--bg1) 0%,
        var(--bg2) 50%,
        var(--bg3) 100%
    );

    background-attachment: fixed;
    background-size: 100%;
    line-height: 1.8;

    font-size:clamp(16px, 1.2vw, 18px);
}


/*-----------------------
  Main Content Width
-----------------------*/

main{
    max-width:1150px;
    margin:auto;
    padding:60px clamp(20px, 5vw, 40px);
}


/*-----------------------
  Headings
-----------------------*/

h1,h2,h3,h4{

    font-family:"Playfair Display", serif;

    color:var(--text);

    font-weight:700;

    line-height:1.15;

}

h1{

    font-size:clamp(2.2rem, 6vw, 4rem);

    margin-bottom:.3em;

}

h2{

    font-size:2.2rem;

    margin-top:2.5rem;

    color:var(--accent);

}

h3{

    font-size:1.5rem;

}


/*-----------------------
  Paragraphs
-----------------------*/

p{

    max-width:800px;

    color:var(--text-light);

}


/*-----------------------
  Links
-----------------------*/

a{

    color:var(--accent);

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:var(--accent-dark);

}


/*-----------------------
  Navigation
-----------------------*/

#quarto-header .navbar {
    background: var(--accent-dark) !important;
    border-bottom: none;
    box-shadow: 0 5px 25px rgba(0,0,0,.15);
}

#quarto-header .navbar-brand,
#quarto-header .nav-link {
    color: white !important;
    font-weight: 600;
}

#quarto-header .nav-link:hover,
#quarto-header .navbar-brand:hover {
    color: #ffdce7 !important;
}


/*-----------------------
  About Card
-----------------------*/

.about{

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(20px);

    border-radius:24px;

    padding:45px;

    box-shadow:0 12px 40px var(--shadow);

}


/*-----------------------
  Profile Photo
-----------------------*/

.about-image img{

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}


/*-----------------------
  Buttons
-----------------------*/

.btn,
button{

    background:var(--accent);

    color:white;

    border:none;

    border-radius:8px;

    padding:12px 24px;

    transition:.3s;

}

.btn:hover,
button:hover{

    background:var(--accent-dark);

}


/*-----------------------
  Lists
-----------------------*/

li{

    margin-bottom:.5rem;

}


/*-----------------------
  Horizontal Rule
-----------------------*/

hr{

    border:none;

    height:1px;

    background:#e9c8d6;

    margin:3rem 0;

}


/*-----------------------
  Footer
-----------------------*/

footer{

    margin-top:80px;

    padding:40px;

    color:#666;

    text-align:center;

}


/*-----------------------
  Responsive
-----------------------*/

@media (max-width:900px){

    main{

        padding:30px;

    }

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:1.8rem;

    }

}



/*==============================================================================
LANDING PAGE
==============================================================================*/

/* Hide navigation only on landing page */

body.landing #quarto-header{
    display:none;
}

/* Remove spacing only on landing page */

body.landing,
body.landing #quarto-content,
body.landing main.content,
body.landing .content{

    margin:0;
    padding:0;
    max-width:none;
}

/* Full screen hero */

body.landing .landing-page{

    position:relative;

    width:100vw;
    height:100vh;

    background-image:url("images/portrait_1.jpg");
    background-size:cover;
    background-position: center top;
    background-repeat:no-repeat;
    overflow:hidden;

}

/* Slight darkening for readability */

body.landing .landing-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:linear-gradient(
        rgba(0,0,0,.10),
        rgba(0,0,0,.18)
    );

}

/* Name */

body.landing .landing-title{

    font-family:"Playfair Display", serif;

    color:white;

    font-size:clamp(2.4rem, 8vw, 4.6rem);

    font-weight:600;

    text-shadow:
        0 5px 18px rgba(0,0,0,.45);

    letter-spacing:.02em;

}

.landing-image{
    transform:scale(.50);
}

/* About button */

body.landing .landing-button{

    position:absolute;

    bottom:70px;

    left:50%;

    transform:translateX(-50%);

    padding:18px 54px;

    border:2px solid white;

    border-radius:999px;

    color:white;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(8px);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.95rem;

    font-weight:600;

    transition:.35s;
}

body.landing .landing-button:hover{

    background:white;

    color:var(--accent-dark);

    border-color:white;

}

/* Mobile */

@media (max-width:900px){

    body.landing .landing-title{

        font-size:2.6rem;

        text-align:center;

        padding:0 25px;

    }

    body.landing .landing-button{

        bottom:45px;

    }

}

/*==============================================================================
LANDING PAGE
==============================================================================*/

/* Remove everything Quarto normally adds */

body.landing,
body.landing #quarto-content,
body.landing main,
body.landing .content,
body.landing .page-columns,
body.landing .page-full{

    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
    width:100% !important;
    background:none !important;

}

/* Hide navbar */

body.landing #quarto-header{
    display:none;
}

/* Hide footer */

body.landing footer{
    display:none;
}

/* Hero image */

body.landing .landing-page{

    position:fixed;

    inset:0;

    min-height:100dvh;

    background-image:url("images/portrait_1.jpg");

    background-size:cover;

}

/* About button */

body.landing .landing-button{

    position:absolute;

    left:50%;

    bottom:60px;

    transform:translateX(-50%);

    padding:18px 54px;

    color:white;

    border:2px solid white;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(8px);

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-weight:600;

    transition:.3s;

}

body.landing .landing-button:hover{

    background:white;

    color:#8f3557;

}

/*==============================================================================
ABOUT PAGE LAYOUT
==============================================================================*/

/* Main row */
.about-page .columns {

    display:flex;

    flex-wrap:nowrap;

    gap:30px;

    align-items:flex-start;

}


/* Equal column sizing */
.about-page .column {

    flex:1;

    min-width:0;

}


/*==============================================================================
PORTRAIT
==============================================================================*/

.profile-card {

    background:none;

    padding:0;

    box-shadow:none;

    text-align:center;

}


.profile-card img {

    width:100%;

    max-width:600px;

    height:auto;

    border-radius:18px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}


/*==============================================================================
BIO CONTAINER
==============================================================================*/

.bio-card {

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(15px);

    border-radius:24px;

    padding:50px;

    box-shadow:0 15px 40px rgba(0,0,0,.10);
    
    width: 400px;
    
    max-width: 600px;

    min-height:500px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/* Bio heading */

.bio-card h2 {

    margin-top:0;

    font-size:2.4rem;

}


/* Bio text */

.bio-card p {

    font-size:1.15rem;

    line-height:1.9;

    max-width:100%;

}


/*==============================================================================
PAGE MARGINS
==============================================================================*/

body.about-page main.content {

    max-width:1600px;

    margin:auto;

    padding-left:80px;

    padding-right:80px;

}



/*==============================================================================
RESPONSIVE
==============================================================================*/

@media(max-width:1100px){

    .about-page .columns {

        display:block;

    }


    .bio-card {

        margin-top:40px;

    }

}

.about-page .profile-card {
    flex: 0 0 35%;
}

.about-page .bio-card {
    flex: 0 0 65%;
}

.bio-card h2 {

    font-size:1.8rem;

}


/*-----------------------
 Mobile Safety
-----------------------*/

img,
video,
iframe {

    max-width:100%;
    height:auto;

}

html,
body {

    overflow-x:hidden;

}

* {

    box-sizing:border-box;

}

@media(max-width:600px){

    main {

        padding-top:35px;
        padding-bottom:35px;

    }


    .about,
    .bio-card {

        padding:25px;

        border-radius:18px;

    }


    footer {

        padding:25px;

    }

}