/*==================================================
GLOBAL STYLE
Jessica Feldman — Dating & Marriage Coach
==================================================*/

/*==================================================
BRAND VARIABLES
==================================================*/

:root{
    --cream:#f8f8ee;
    --teal:#16cfbf;
    --deep-teal:#13605e;
    --magenta:#a22282;
    --brown:#4d3b34;

    --dating-accent:var(--teal);
    --preparing-accent:var(--magenta);
    --marriage-accent:var(--deep-teal);

    --heading-font:"Lora", serif;
    --body-font:"Inter", sans-serif;

    --shadow:0 18px 40px rgba(0,0,0,.08);
    --shadow-strong:0 20px 45px rgba(0,0,0,.14);
    --radius:18px;
    --transition:.3s ease;
}

/*==================================================
BASE
==================================================*/

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--cream);
    color:var(--brown);
    font-family:var(--body-font);
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin-top:0;
    font-family:var(--heading-font);
    line-height:1.25;
}

p{
    margin-top:0;
}

::selection{
    background:var(--teal);
    color:var(--deep-teal);
}

/*==================================================
CONTAINER + SECTIONS
==================================================*/

.container{
    width:min(1180px,92%);
    margin:auto;
    padding-inline:18px;
}

.narrow{
    width:min(760px,92%);
    margin:auto;
}

.section{
    padding:80px 0;
}

.section-heading{
    max-width:800px;
    margin:0 auto 55px;
    text-align:center;
}

.section-heading h2{
    margin:0 0 16px;
    color:var(--deep-teal);
    font-size:clamp(2rem,4vw,3rem);
}

.section-heading p{
    max-width:760px;
    margin:0 auto;
    color:var(--brown);
    line-height:1.8;
}

/*==================================================
HEADER
==================================================*/

.site-header{
    position:sticky;
    top:0;
    width:100%;
    z-index:1000;
    background:rgba(248,248,238,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(19,96,94,.10);
}

.nav{
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
    flex-shrink:0;
    color:var(--deep-teal);
    text-decoration:none;
    font-family:var(--heading-font);
    font-size:1.4rem;
}

.logo img{
    width:65px;
    height:auto;
}

.logo div{
    display:flex;
    flex-direction:column;
}

.logo span{
    display:block;
    margin-top:2px;
    color:var(--brown);
    font-family:var(--body-font);
    font-size:.85rem;
}

/*==================================================
NAVIGATION
==================================================*/

nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:1.5rem;
}

nav a{
    position:relative;
    color:var(--brown);
    text-decoration:none;
    transition:var(--transition);
}

nav a:hover{
    color:var(--magenta);
}

nav a:not(.button)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    border-radius:999px;
    background:var(--teal);
    transition:width var(--transition);
}

nav a:not(.button):hover::after{
    width:100%;
}

/*==================================================
BUTTONS
==================================================*/

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:.8rem 1.4rem;
    border:0;
    border-radius:999px;
    background:var(--magenta);
    color:var(--cream);
    font-family:var(--body-font);
    font-size:1rem;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:var(--transition);
}

.button:hover{
    transform:translateY(-2px);
    background:var(--deep-teal);
    color:var(--cream);
    box-shadow:0 8px 20px rgba(19,96,94,.18);
}

.button.teal{
    background:var(--teal);
    color:var(--deep-teal);
}

.button.teal:hover{
    background:var(--deep-teal);
    color:var(--cream);
}

.button.deep-teal{
    background:var(--deep-teal);
    color:var(--cream);
}

.button-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:.75rem 1.35rem;
    border:2px solid var(--teal);
    border-radius:999px;
    background:transparent;
    color:var(--deep-teal);
    text-decoration:none;
    transition:var(--transition);
}

.button-outline:hover{
    background:var(--teal);
    transform:translateY(-2px);
}

/*==================================================
HOMEPAGE HERO
Only the homepage uses these generic .hero classes.
Inner pages control their own room hero in page CSS.
==================================================*/

.hero{
    padding:80px 0;
}

.hero-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.hero .hero-content{
    flex:1;
}

.hero .hero-content h1{
    margin:0 0 20px;
    color:var(--deep-teal);
    font-size:clamp(2.3rem,4vw,3.8rem);
    line-height:1.15;
}

.hero .hero-content p{
    margin:0;
    color:var(--brown);
    font-size:1.1rem;
    line-height:1.8;
}

.hero-image{
    flex:1;
    width:100%;
    max-width:1100px;
    height:550px;
    overflow:hidden;
    border-radius:24px;
    box-shadow:var(--shadow);
}

.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*==================================================
HOMEPAGE DOORS
==================================================*/

.doors{
    padding:80px 0;
}

.door-title{
    margin:0 auto 15px;
    color:var(--deep-teal);
    font-family:var(--heading-font);
    font-size:2.4rem;
    font-weight:500;
    text-align:center;
}

.section-subtitle{
    max-width:750px;
    margin:0 auto 50px;
    color:var(--brown);
    font-family:var(--heading-font);
    font-size:1.5rem;
    line-height:1.6;
    text-align:center;
}

.door-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem;
}

.door{
    display:block;
    color:inherit;
    text-align:center;
    text-decoration:none;
}

.door:visited,
.door:hover,
.door:active{
    color:inherit;
    text-decoration:none;
}

.door img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:16px;
    box-shadow:var(--shadow);
    transition:transform var(--transition);
}

.door:hover img{
    transform:translateY(-5px);
}

.door h3{
    margin:18px 0 6px;
    color:var(--deep-teal);
}

.door p{
    margin:0;
    color:var(--brown);
    font-size:.95rem;
}

/*==================================================
SHARED CONTINUE / NEXT CARDS
==================================================*/

.continue-grid{
    display:grid;
    grid-template-columns:repeat(3,180px);
    justify-content:center;
    gap:28px;
    margin-top:40px;
}

.continue-card{
    width:180px;
    overflow:hidden;
    border-radius:22px;
    background:var(--cream);
    color:inherit;
    text-align:center;
    text-decoration:none;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.continue-card:visited{
    color:inherit;
}

.continue-card:hover{
    transform:translateY(-8px);
}

.continue-card img{
    width:100%;
    height:110px;
    object-fit:cover;
}

.continue-card-content{
    padding:18px 14px 20px;
}

.continue-card h3{
    margin:0 0 8px;
    color:var(--deep-teal);
    font-size:1.15rem;
}

.continue-card p{
    margin:0;
    color:var(--brown);
    font-size:.9rem;
    line-height:1.55;
}

.continue-card:hover h3{
    color:var(--magenta);
}

/*==================================================
BRAND COLOR UTILITIES
==================================================*/

.color-section{
    padding:90px 0;
    color:var(--cream);
}

.color-section h2,
.color-section h3,
.color-section p{
    color:var(--cream);
}

.color-section.teal,
.bg-teal{
    background:var(--teal);
}

.color-section.magenta,
.bg-magenta{
    background:var(--magenta);
}

.color-section.deep-teal,
.bg-deep-teal{
    background:var(--deep-teal);
}

.soft-teal,
.tint-teal,
.color-wash-teal{
    background:rgba(22,207,191,.10);
}

.soft-magenta,
.tint-magenta,
.color-wash-magenta{
    background:rgba(162,34,130,.08);
}

.soft-deep-teal,
.tint-deep-teal,
.color-wash-deep-teal{
    background:rgba(19,96,94,.08);
}

.text-teal,
.heading-teal{
    color:var(--teal);
}

.text-magenta,
.heading-magenta{
    color:var(--magenta);
}

.text-deep-teal,
.heading-deep-teal{
    color:var(--deep-teal);
}

.text-center{
    text-align:center;
}

.bg-cream{
    background:var(--cream);
}

/*==================================================
BRAND DETAILS
==================================================*/

.brand-divider{
    width:70px;
    height:4px;
    margin:30px auto;
    border-radius:999px;
    background:var(--teal);
}

.brand-divider.magenta{
    background:var(--magenta);
}

.brand-divider.deep-teal{
    background:var(--deep-teal);
}

.brand-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    width:100%;
    height:7px;
}

.brand-strip .teal{ background:var(--teal); }
.brand-strip .magenta{ background:var(--magenta); }
.brand-strip .deep-teal{ background:var(--deep-teal); }

.brand-callout{
    max-width:850px;
    margin:60px auto;
    padding:45px;
    border-radius:var(--radius);
    background:var(--teal);
    color:var(--cream);
    box-shadow:var(--shadow);
}

.brand-callout.magenta{ background:var(--magenta); }
.brand-callout.deep-teal{ background:var(--deep-teal); }

.brand-callout h2,
.brand-callout h3,
.brand-callout p{
    color:var(--cream);
}

/*==================================================
STANDARD CONTENT HELPERS
These classes are safe because they do not collide
with the conversation deck's .card class.
==================================================*/

.content-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:50px;
    align-items:center;
}

.three-column-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.image-text{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.image-text img,
.content-image{
    width:100%;
    border-radius:24px;
    box-shadow:var(--shadow);
}

/*==================================================
FORMS
==================================================*/

input,
textarea,
select{
    width:100%;
    padding:13px 15px;
    border:1px solid rgba(19,96,94,.20);
    border-radius:12px;
    background:var(--cream);
    color:var(--brown);
    font-family:var(--body-font);
    font-size:1rem;
    transition:var(--transition);
}

input:focus,
textarea:focus,
select:focus{
    outline:none;
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(22,207,191,.14);
}

textarea{
    min-height:150px;
    resize:vertical;
}

label{
    display:block;
    margin-bottom:7px;
    color:var(--deep-teal);
    font-weight:600;
}

input[type="checkbox"],
input[type="radio"]{
    width:auto;
    accent-color:var(--teal);
}

::placeholder{
    color:rgba(77,59,52,.58);
}

/*==================================================
FOOTER
==================================================*/

.site-footer{
    margin-top:70px;
    padding:50px 0 20px;
    background:var(--deep-teal);
    color:var(--cream);
    text-align:center;
}

.site-footer p{
    color:var(--cream);
}

.site-footer .footer-name{
    margin:0 0 6px;
    color:var(--cream);
    font-family:var(--heading-font);
    font-size:2.3rem;
    font-weight:500;
    line-height:1.3;
}

.site-footer .footer-tagline{
    margin:0 0 8px;
    color:var(--cream);
    font-family:var(--body-font);
    font-size:1rem;
    font-weight:400;
    line-height:1.5;
}

.site-footer .footer-message{
    margin:0 0 22px;
    color:var(--cream);
    font-family:var(--body-font);
    font-size:.95rem;
    font-style:italic;
    line-height:1.6;
}

.site-footer .copyright{
    padding-top:18px;
    border-top:1px solid rgba(248,248,238,.18);
    color:rgba(248,248,238,.65);
    font-family:var(--body-font);
    font-size:.82rem;
    line-height:1.5;
}

/*==================================================
ACCESSIBILITY
==================================================*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:3px solid var(--teal);
    outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}

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

@media(max-width:900px){
    .nav{
        flex-direction:column;
        justify-content:center;
        padding:18px 0;
        gap:14px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:.7rem 1rem;
    }

    nav a{
        font-size:.95rem;
    }

    .content-grid,
    .image-text{
        grid-template-columns:1fr;
        gap:45px;
    }

    .three-column-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){
    .section,
    .doors{
        padding:60px 0;
    }

    .section-heading{
        margin-bottom:40px;
    }

    .section-heading h2{
        font-size:2rem;
    }

    .hero{
        padding:60px 0;
    }

    .hero-container{
        flex-direction:column;
        gap:35px;
    }

    .hero .hero-content{
        order:1;
        width:100%;
    }

    .hero-image{
        order:2;
        width:100%;
        height:420px;
    }

    .hero .hero-content h1{
        font-size:2rem;
    }

    .hero .hero-content p{
        font-size:1rem;
    }

    .door-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .door img{
        height:220px;
        aspect-ratio:auto;
    }

    .continue-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .continue-card{
        width:min(280px,100%);
        margin:auto;
    }

    .color-section{
        padding:65px 0;
    }
}

@media(max-width:700px){
    .site-footer{
        margin-top:55px;
        padding:40px 0 18px;
    }

    .site-footer .footer-name{
        font-size:1.8rem;
    }

    .site-footer .footer-message{
        font-size:.9rem;
    }

    .site-footer .copyright{
        font-size:.78rem;
    }
}

@media(max-width:600px){
    .container{
        width:94%;
        padding-inline:10px;
    }

    .site-header{
        position:relative;
    }

    .logo{
        gap:10px;
    }

    .logo img{
        width:55px;
    }

    nav{
        gap:.55rem .8rem;
    }

    nav a{
        font-size:.88rem;
    }

    .section-heading h2{
        font-size:1.8rem;
    }
}

/*==================================================
CONNECT DROPDOWN
==================================================*/

.nav-dropdown{

    position:relative;

}


/* BUTTON */

.nav-dropdown-toggle{

    min-height:44px;

    padding:.8rem 1.3rem;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:0;

    border-radius:999px;

    background:var(--magenta);

    color:var(--cream);

    font-family:var(--body-font);

    font-size:1rem;

    cursor:pointer;

    transition:var(--transition);

}

.nav-dropdown-toggle:hover{

    background:var(--deep-teal);

    transform:translateY(-2px);

}


/* ARROW */

.dropdown-arrow{

    font-size:.8rem;

    transition:transform .25s ease;

}


/* DROPDOWN */

.nav-dropdown-menu{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    z-index:1100;

    min-width:190px;

    padding:8px;

    border-radius:16px;

    background:var(--cream);

    box-shadow:0 16px 36px rgba(0,0,0,.14);

    border:1px solid rgba(19,96,94,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(-6px);

    transition:.25s ease;

}


/* LINKS */

.nav-dropdown-menu a{

    display:block;

    padding:11px 14px;

    border-radius:10px;

    color:var(--brown);

    text-decoration:none;

    white-space:nowrap;

}

.nav-dropdown-menu a:hover{

    background:rgba(22,207,191,.10);

    color:var(--deep-teal);

}


/* OPEN */

.nav-dropdown.open .nav-dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.nav-dropdown.open .dropdown-arrow{

    transform:rotate(180deg);

}

@media(max-width:900px){

    .nav-dropdown{

        width:auto;

    }

    .nav-dropdown-menu{

        left:50%;
        right:auto;

        transform:
            translate(-50%,-6px);

    }

    .nav-dropdown.open .nav-dropdown-menu{

        transform:
            translate(-50%,0);

    }

}

/*==================================================
CONNECT DROPDOWN
==================================================*/

.nav-dropdown{

    position:relative;

}

.nav-dropdown-toggle{

    min-height:44px;

    padding:.8rem 1.3rem;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:0;

    border-radius:999px;

    background:var(--magenta);

    color:var(--cream);

    font-family:var(--body-font);

    font-size:1rem;

    cursor:pointer;

    transition:var(--transition);

}

.nav-dropdown-toggle:hover{

    background:var(--deep-teal);

    transform:translateY(-2px);

}

.dropdown-arrow{

    font-size:.8rem;

    transition:transform .25s ease;

}

.nav-dropdown-menu{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    z-index:1100;

    min-width:190px;

    padding:8px;

    border-radius:16px;

    background:var(--cream);

    border:1px solid rgba(19,96,94,.08);

    box-shadow:0 16px 36px rgba(0,0,0,.14);

    opacity:0;

    visibility:hidden;

    transform:translateY(-6px);

    transition:.25s ease;

}

.nav-dropdown-menu a{

    display:block;

    padding:11px 14px;

    border-radius:10px;

    color:var(--brown);

    text-decoration:none;

    white-space:nowrap;

}

.nav-dropdown-menu a:hover{

    background:rgba(22,207,191,.10);

    color:var(--deep-teal);

}

.nav-dropdown.open .nav-dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.nav-dropdown.open .dropdown-arrow{

    transform:rotate(180deg);

}


/*==================================================
CONNECT DROPDOWN — MOBILE
==================================================*/

@media(max-width:900px){

    .nav-dropdown-menu{

        left:50%;

        right:auto;

        transform:
            translate(-50%,-6px);

    }

    .nav-dropdown.open .nav-dropdown-menu{

        transform:
            translate(-50%,0);

    }

}