/* =========================================================================
   DRAFT STANDARD — HEADER + STACK + FIXED MENU + OVERLAY
   File: static/css/header.css
   Revision Date: 2026-04-14

   PURPOSE
   - Center crest + search vertically and horizontally
   - Fix hamburger menu to top (always visible on scroll)
   - Create clean overlay for mega menu (no background clutter)
   - Make crest scale fluid like a pro site
   - Align everything on ONE vertical axis

   IMPORTANT FUTURE ADJUSTMENT AREAS
   - .header-stage  → controls overall vertical breathing room
   - .header-stack  → controls space between crest and search
   - .header-crest  → controls crest size
   - .search-icon   → controls search image size

   QUICK SUMMARY
   - Make crest bigger     → adjust .header-crest max-width clamp(...)
   - Make search bigger    → adjust .search-icon max-width clamp(...)
   - Move whole stack down → increase .header-stage padding-top
   - Move whole stack up   → decrease .header-stage padding-top
   - More space between    → increase .header-stack gap
   - Less space between    → decrease .header-stack gap
   ========================================================================= */


/* =========================
   1) HEADER CONTAINER
   ========================= */

.site-header{
    position:relative;
    width:100%;
}


/* =========================
   2) CENTER STAGE
   ========================= */

/* -------------------------------------------------------------------------
   HEADER STAGE — OVERALL VERTICAL POSITIONING
   PURPOSE
   - Gives the crest/search stack breathing room inside the header
   - Does NOT directly scale the crest graphic itself
   - Controls where the full stack sits vertically on the page

   HOW TO MOVE THE WHOLE CREST + SEARCH STACK DOWN
   - Increase padding-top
   Example:
       padding-top: 100px;

   HOW TO MOVE THE WHOLE CREST + SEARCH STACK UP
   - Decrease padding-top
   Example:
       padding-top: 60px;

   HOW TO ADD MORE SPACE UNDER THE STACK
   - Increase padding-bottom

   HOW TO REDUCE SPACE UNDER THE STACK
   - Decrease padding-bottom
   ------------------------------------------------------------------------- */
.header-stage{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

    /* controls vertical breathing space */
    padding-top:80px;
    padding-bottom:40px;
}


/* =========================
   3) STACK (CREST + SEARCH)
   ========================= */

/* -------------------------------------------------------------------------
   HEADER STACK — SPACING BETWEEN CREST AND SEARCH
   PURPOSE
   - Keeps crest and search vertically stacked
   - Keeps both perfectly centered
   - gap controls the space BETWEEN the crest and the search graphic

   HOW TO PUT MORE SPACE BETWEEN CREST AND SEARCH
   - Increase gap
   Example:
       gap: 24px;

   HOW TO PUT LESS SPACE BETWEEN CREST AND SEARCH
   - Decrease gap
   Example:
       gap: 10px;
   ------------------------------------------------------------------------- */
.header-stack{
    display:flex;
    flex-direction:column;

    /* PERFECT CENTERING */
    align-items:center;
    justify-content:center;

    /* spacing between crest + search */
    gap:18px;
}


/* =========================
   4) CREST (MAIN BRAND)
   ========================= */

/* -------------------------------------------------------------------------
   CREST — MAIN BRAND IMAGE
   PURPOSE
   - Controls the size of the main crest above the search graphic
   - Uses width: clamp(...) so the crest visibly grows and shrinks with
     screen size
   - This is the primary branding element, so its numbers are larger than
     the search image below it

   HOW clamp() WORKS
   - clamp(360px, 42vw, 980px)

     360px = smallest size allowed
     42vw  = preferred responsive size based on screen width
     980px = largest size allowed

   HOW TO MAKE THE CREST BIGGER
   - Raise the first number slightly
   - Raise the middle vw number
   - Raise the last px number

   SAFE BIGGER EXAMPLES
   - width:clamp(400px, 46vw, 1100px);
   - width:clamp(440px, 50vw, 1200px);

   HOW TO MAKE THE CREST SMALLER
   - Lower those same three numbers

   SAFE SMALLER EXAMPLES
   - width:clamp(320px, 38vw, 860px);
   - width:clamp(300px, 34vw, 780px);

   IMPORTANT
   - width controls visible size directly
   - max-width:none prevents old caps from limiting the SVG
   - Keep height:auto so proportions stay correct
   ------------------------------------------------------------------------- */
.header-crest{
    width:clamp(360px, 42vw, 980px);
    max-width:none;
    height:auto;
    display:block;
}


/* =========================
   5) SEARCH ICON (CLICKABLE)
   ========================= */

.search-link{
    display:block;
}

/* -------------------------------------------------------------------------
   SEARCH ICON / IMAGE UNDER CREST
   PURPOSE
   - Controls the size of the image directly under the crest
   - Uses width: clamp(...) so the SVG grows and shrinks visibly
   - This version is one step larger than the current test

   HOW clamp() WORKS
   - clamp(240px, 26vw, 520px)

     240px = smallest size allowed
     26vw  = preferred responsive size based on screen width
     520px = largest size allowed

   HOW TO MAKE IT EVEN BIGGER LATER
   - Try:
       width:clamp(260px, 28vw, 560px);

   HOW TO MAKE IT SMALLER AGAIN
   - Go back to:
       width:clamp(220px, 24vw, 480px);

   IMPORTANT
   - width controls visible size directly
   - max-width:none prevents older caps from limiting growth
   ------------------------------------------------------------------------- */
.search-icon{
    width:clamp(240px, 26vw, 520px);
    max-width:none;
    height:auto;
    transition:transform 0.2s ease;
}

/* hover effect */
.search-link:hover .search-icon{
    transform:scale(1.05);
}


/* =========================
   6) HAMBURGER — FIXED
   ========================= */

/* -------------------------------------------------------------------------
   HAMBURGER — FIXED + OPTICAL CENTER CORRECTION
   PURPOSE
   - Keeps hamburger fixed while scrolling
   - Adds a tiny horizontal optical correction so it lines up more closely
     with the crown tip as seen by the eye

   WHY THIS IS NEEDED
   - SVG artwork can be visually off-center even when CSS is mathematically
     centered
   - A tiny nudge is a normal professional adjustment

   HOW TO ADJUST LEFT / RIGHT
   - Current:
       transform:translateX(calc(-50% - 2px));
   - Move hamburger MORE LEFT:
       - 3px, -4px, -5px
   - Move hamburger MORE RIGHT:
       + 1px, + 2px
       Example:
       transform:translateX(calc(-50% + 2px));

   SAFE TEST RANGE
   - Usually between -4px and +4px
   ------------------------------------------------------------------------- */
.menu-toggle{
    position:fixed;
    top:20px;
    left:50%;

    /* OPTICAL CENTER NUDGE (below adjustment)
   - This corrects slight visual mismatch between the hamburger and the crown tip
   - More left  = use -4px, -5px
   - More right = use -2px, -1px, or +1px
   - Current test:
       transform:translateX(calc(-50% - 3px));
*/

    transform:translateX(calc(-50% - 11px));

    z-index:5000;

    background:none;
    border:none;
    cursor:pointer;
}


/* hamburger lines (if styled via spans) */
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
    display:block;
    width:26px;
    height:2px;
    background:#222;
    position:relative;
}

.menu-toggle span::before,
.menu-toggle span::after{
    content:"";
    position:absolute;
    left:0;
}

.menu-toggle span::before{
    top:-7px;
}

.menu-toggle span::after{
    top:7px;
}


/* =========================
   7) MEGA MENU — OVERLAY FIX
   ========================= */

.mega-menu{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100vh;

    /* 🔥 CLEAN PROFESSIONAL OVERLAY */
    background:rgba(245, 243, 235, 0.96);

    z-index:4000;

    overflow-y:auto;

    padding-top:120px;
}


/* =========================
   8) TOP LINKS
   ========================= */

.mega-top-links{
    text-align:center;
    margin-bottom:30px;
}

.mega-top-item{
    margin:0 18px;
    font-weight:500;
    text-decoration:none;
}


/* =========================
   9) MOBILE TUNING
   ========================= */

/* -------------------------------------------------------------------------
   MOBILE TUNING
   PURPOSE
   - Separate crest/search sizing for smaller screens
   - Lets you keep desktop and mobile balanced independently

   MOBILE CREST
   - Current:
       max-width:clamp(220px, 70vw, 500px);
   - Bigger mobile example:
       max-width:clamp(240px, 74vw, 560px);
   - Smaller mobile example:
       max-width:clamp(200px, 64vw, 460px);

   MOBILE SEARCH
   - Current:
       max-width:clamp(120px, 45vw, 260px);
   - Bigger mobile example:
       max-width:clamp(135px, 50vw, 300px);
   - Smaller mobile example:
       max-width:clamp(105px, 40vw, 220px);
   ------------------------------------------------------------------------- */
@media (max-width:768px){

    .header-stage{
        padding-top:70px;
        padding-bottom:30px;
    }

    .header-crest{
        max-width:clamp(220px, 70vw, 500px);
    }

    .search-icon{
        max-width:clamp(120px, 45vw, 260px);
    }
}