/* ==========================================================================
   HAUS OF LESS
   Header
   Version: 3.2
   Last Updated: August 2026

   Changes
   - Improved accessibility
   - Cleaner transitions
   - Better logo handling
   - Improved mobile toggle
   - Production-ready architecture
   - Unified 92px header across all pages
   - Refined logo sizing for better balance
   - Final vertical alignment for logo, navigation, and CTA
   ========================================================================== */


/* ==========================================================
   Header
========================================================== */

.site-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:var(--z-header);

    height:92px;
    padding:0;

    transition:
        background-color var(--transition),
        backdrop-filter var(--transition),
        -webkit-backdrop-filter var(--transition),
        padding var(--transition),
        box-shadow var(--transition);

}


/* ==========================================================
   Transparent Header
========================================================== */

.site-header--transparent{

    background:transparent;

}


/* ==========================================================
   Homepage Scrolled
========================================================== */

.site-header--transparent.scrolled{

    height:92px;
    padding:0;

    background:rgba(247,245,241,.96);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 8px 30px rgba(0,0,0,.05);

}


/* ==========================================================
   Solid Header
========================================================== */

.site-header--solid{

    background:rgba(247,245,241,.96);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 8px 30px rgba(0,0,0,.05);

}


/* ==========================================================
   Header Grid
========================================================== */

.header-grid{

    position:relative;
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
    height:100%;
    width:100%;

}

.header-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:1rem;
}

.main-navigation{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

.navigation-list{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
    margin:0;
    padding:0;
    list-style:none;
}


/* ==========================================================
   Logo
========================================================== */

.site-logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo{

    width:auto;

    max-height:62px;

    transition:transform var(--transition);

}

.site-logo:hover .logo{

    transform:scale(1.03);

}

/* ==========================================================
   Logo States
========================================================== */

.logo-light{

    display:block;

}

.logo-dark{

    display:none;

}


/* Homepage Scroll */

.site-header--transparent.scrolled .logo-light{

    display:none;

}

.site-header--transparent.scrolled .logo-dark{

    display:block;

}


/* Inner Pages */

.site-header--solid .logo-light{

    display:none;

}

.site-header--solid .logo-dark{

    display:block;

}




/* ==========================================================
   Navigation Links
========================================================== */

.nav-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    color:var(--color-white);

    text-decoration:none;

    font-size:1.15rem;

    font-weight:500;

    letter-spacing:.03em;

    line-height:1;

    transition:
        color var(--transition),
        opacity var(--transition);

}


.site-header--transparent.scrolled .nav-link,

.site-header--solid .nav-link{

    color:var(--color-charcoal);

}


.nav-link.active{

    color:var(--color-brass);

    font-weight:600;

}


/* ==========================================================
   Underline
========================================================== */

.nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:calc(100% - 2px);
    height:2px;

    background:var(--color-brass);

    transform:scaleX(0);

    transform-origin:center;

    transition:transform var(--transition);

}


.nav-link:hover::after,

.nav-link.active::after{

    transform:scaleX(1);

}


/* ==========================================================
   Focus
========================================================== */

.nav-link:focus-visible{

    outline:2px solid var(--color-brass);

    outline-offset:6px;

}


/* ==========================================================
   Header CTA
========================================================== */

.header-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:58px;

    padding:1rem 2.2rem;

    border-radius:999px;

    text-decoration:none;

    font-size:1.02rem;

    font-weight:600;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        color var(--transition);

}


/* Homepage */

.site-header--transparent .header-cta{

    color:var(--color-forest);

    background:var(--color-white);

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}


/* Homepage Scroll */

.site-header--transparent.scrolled .header-cta{

    color:var(--color-white);

    background:var(--color-forest);

}


/* Inner Pages */

.site-header--solid .header-cta{

    color:var(--color-white);

    background:var(--color-forest);

}


/* Hover */

.header-cta:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 40px rgba(0,0,0,.16);

}


/* ==========================================================
   Mobile Toggle
========================================================== */

.mobile-toggle{

    display:none;

    width:52px;
    height:52px;

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

    gap:6px;

    padding:0;

    border:0;
    border-radius:999px;

    background:none;

    cursor:pointer;

}


.mobile-toggle span{

    width:28px;
    height:2px;

    background:var(--color-white);

    transition:
        transform var(--transition),
        opacity var(--transition),
        background-color var(--transition);

}


/* Homepage Scroll */

.site-header--transparent.scrolled .mobile-toggle span{

    background:var(--color-forest);

}


/* Inner Pages */

.site-header--solid .mobile-toggle span{

    background:var(--color-forest);

}


@media (max-width:1200px) and (min-width:1101px){

    .navigation-list{
        gap:2.2rem;
    }

    .nav-link{
        font-size:1.05rem;
    }

    .header-cta{
        padding-inline:1.7rem;
        font-size:.98rem;
    }
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width:1100px){

    .header-grid{

        grid-template-columns:auto auto;

    }

    .main-navigation{

        display:none;

    }

    .header-actions{

        display:none;

    }

    .mobile-toggle{

        display:flex;

        justify-self:end;

    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .site-header{

        height:72px;
    padding:0;

    }

    .logo{

        max-height:52px;

    }

}

.mobile-toggle{

    transition:
        background-color var(--transition),
        transform var(--transition);

}

.mobile-toggle:hover{

    background:rgba(176,138,78,.08);

}

.mobile-toggle:focus-visible{

    outline:2px solid var(--color-brass);

    outline-offset:4px;

}





/* ==========================================================
   Unified Logo State
   The header now uses one transparent logo asset across all
   pages. Both legacy logo images may remain in the HTML, but
   only the light/transparent asset is displayed.
========================================================== */
.site-logo .logo-light{
    display:block !important;
}

.site-logo .logo-dark{
    display:none !important;
}

/* ==========================================================
   Unified Logo Sizing
========================================================== */
.site-logo .logo{
    display:block;
    width:190px;
    max-width:100%;
    height:auto;
    max-height:62px;
    object-fit:contain;
}

@media (max-width:768px){
    .site-header{
        height:72px;
        padding:0;
    }

    .site-logo .logo{
        width:155px;
        max-height:52px;
    }
}

/* ==========================================================
   Final Header Vertical Alignment
   Keep every header element centered inside the full header
   height, regardless of logo/CTA height.
========================================================== */
.site-header > .container{
    height:100%;
}

.header-grid{
    height:100%;
    min-height:92px;
    align-items:center;
}

.site-logo,
.header-actions,
.main-navigation{
    align-self:center;
}

@media (max-width:768px){
    .header-grid{
        min-height:72px;
    }
}

/* Final navigation: no header CTA; keep the primary navigation centered. */
.header-grid{grid-template-columns:1fr;}
.header-grid .site-logo{justify-self:start;}
.main-navigation{left:50%;transform:translate(-50%,-50%);}
@media(max-width:1100px){.navigation-list{gap:1.75rem;}}
@media(max-width:900px){.main-navigation{display:none;}.header-grid{grid-template-columns:auto;}.site-logo{justify-self:start;}}


/* Final sitewide header: full navigation + consultation CTA */
@media(min-width:1101px){
    .navigation-list{gap:2.1rem;}
}
@media(min-width:901px) and (max-width:1100px){
    .navigation-list{gap:1.25rem;}
    .header-cta{min-height:54px;padding:.85rem 1.45rem;font-size:.92rem;}
    .site-logo .logo{max-width:190px;}
}


/* ==========================================================
   STEP 1 — Unified Header Layout
========================================================== */

@media (min-width:1101px){
    .header-grid{
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        position:relative;
        height:92px;
        min-height:92px;
    }

    .site-logo{justify-self:start;}

    .main-navigation{
        position:absolute;
        inset:0;
        display:flex;
        align-items:center;
        justify-content:center;
        transform:none;
        pointer-events:none;
    }

    .main-navigation .navigation-list{pointer-events:auto;}

    .header-actions{
        position:relative;
        z-index:2;
        justify-self:end;
    }

    .navigation-list{gap:2rem;}

    .nav-link{font-size:1.08rem;}
}

@media (min-width:1101px) and (max-width:1250px){
    .navigation-list{gap:1.35rem;}
    .nav-link{font-size:1rem;}
    .header-cta{padding-inline:1.55rem;font-size:.94rem;}
    .site-logo .logo{width:175px;}
}

@media (max-width:1100px){
    .header-grid{grid-template-columns:1fr auto;}
    .site-logo{justify-self:start;}
}


/* ==========================================================
   HEADER — ONE LINE ALIGNMENT
========================================================== */

@media (min-width: 1000px) {

    .header-grid {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: 2.5rem;
    }

    .main-navigation {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .navigation-list {
        display: flex;
        align-items: center;
        gap: 2rem;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
    }

    .header-phone {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

}

@media (min-width: 1000px) {

    .header-grid {
        column-gap: 1.5rem;
    }

    .navigation-list {
        gap: 1.5rem;
    }

    .header-phone {
        margin-left: 1rem;
    }

}