/* =====================================================================
   header.css — GoMoto HEADER (hamburger, fly-out, hero bars, labels)
   DRAFT STANDARD (viewport-anchored menu; variable-driven; no !important)
   HOW TO TUNE (anywhere, e.g., in tweaks.css or per-page body class):
     --hamburger-position: fixed | absolute           (default: fixed)
     --hamburger-top:      0.75rem                    (Y offset from viewport top)
     --hamburger-box:      36px                       (button size)
     --flyout-gap:         0.75rem                    (space between button & flyout)
     --z-scale:            1000                       (base for stacking)
   ===================================================================== */

/* 0) FONT-FACE — keep yours here (unchanged) */

/* 1) :root — master knobs (safe fallbacks live here) */
:root {
    /* Header layout */
    --header-padding-top: 15rem;
    --hero-padding-y:     0.99rem;

    /* Badge + titles */
    --badge-min:   6rem;
    --badge-fluid: 20vw;
    --badge-max:   12rem;
    --title-gap-above: -8rem;
    --title-size:      clamp(2.5rem, 8vw, 6rem);
    --llc-size:        0.10em;

    /* Labels + bars */
    --label-font:  'bellissima-script-pro', cursive;
    --label-size:  3.5rem;
    --label-offset-y: 0.3rem;
    --bar-stripe-height: 8px;
    --bar-stripe-gap:   7px;
    --bar-gap-x:        6rem;
    --bar-gap-y:        2rem;
    --bar-width-percent: 100%;

    /* Colors */
    --red:   #c1141c;
    --white: #ffffff;
    --blue:  #0047b3;
    --body-bg:    #000;
    --text-light: #faf9f0;

    /* NEW — menu geometry & stacking (overridable in tweaks.css) */
    --hamburger-position: fixed;   /* 'fixed' keeps it anchored to viewport */
    --hamburger-top:      0.75rem; /* distance from viewport top */
    --hamburger-box:      36px;    /* button width/height */
    --flyout-gap:         0.75rem; /* vertical space before flyout */

    --z-scale:   1000;                         /* change once, all layers move */
    --z-header:  calc(2 * var(--z-scale));     /* header base */
    --z-banner:  calc(3 * var(--z-scale));     /* maintenance banner */
    --z-menu:    calc(5 * var(--z-scale));     /* hamburger + flyout */
}

/* 2) Base page preview (unchanged) */
body {
    margin: 0;
    background: var(--body-bg);
    color: var(--text-light);
    font-family: system-ui, sans-serif;
    text-align: center;
}

/* 3) Header wrapper */
.gomoto-header {
    position: relative;
    padding-top: var(--header-padding-top);
    z-index: var(--z-header);   /* establishes a stacking context below the menu */
    isolation: isolate;
}

/* 4) Hamburger — NOW viewport-anchored, above everything relevant */
.hamburger {
    /* POSITION
       • var(--hamburger-position) defaults to 'fixed' (viewport anchored).
       • You can switch to 'absolute' by overriding the var (not recommended). */
    position: var(--hamburger-position);
    top: var(--hamburger-top);
    left: 50%;
    transform: translateX(-50%);

    /* GEOMETRY */
    width: var(--hamburger-box);
    height: var(--hamburger-box);

    /* RESET / LAYOUT */
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;

    /* STACKING */
    z-index: var(--z-menu);

    /* ANIM */
    transition: transform .25s ease;
}
.hamburger.active { transform: translateX(-50%) rotate(90deg); }

.ham-stripe {
    width: 100%;
    height: 4px;
    display: block;
    transition: 0.25s;
}
.ham-stripe.red   { background: var(--red); }
.ham-stripe.white { background: var(--white); }
.ham-stripe.blue  { background: var(--blue); }

.hamburger.active .ham-stripe:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.hamburger.active .ham-stripe:nth-child(2){ opacity: 0; }
.hamburger.active .ham-stripe:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* 5) Fly-out menu — ALSO viewport-anchored under the button */
.flyout-menu {
    /* POSITION — tied to the button geometry via variables */
    position: var(--hamburger-position);
    top: calc(var(--hamburger-top) + var(--hamburger-box) + var(--flyout-gap));
    left: 50%;
    transform: translateX(-50%);

    /* BOX */
    display: none;               /* toggled via .active */
    padding: 1.75rem 2rem;
    width: 90vw; max-width: 22rem;
    background: rgba(0,0,0,0.93);
    border: none;
    max-height: 80vh; overflow-y: auto;

    /* STACKING — same layer as the button */
    z-index: var(--z-menu);
}
.flyout-menu.active { display: block; }

.menu-section {
    list-style: none;
    margin: 0 0 1rem; padding: 0;
}
.menu-section a {
    color: var(--text-light);
    text-decoration: none;
    font-family: 'EB Garamond', serif;
    display: block;
    padding: 0.25rem 0;
    transition: color .15s;
}

/* 6) HERO row (unchanged) */
.gomoto-hero {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--hero-padding-y) 0;
    margin: 0 auto; max-width: 1800px; gap: 1rem;
}
.hero-half { flex: 1; display: flex; flex-direction: column; align-items: center; }

/* Bars */
.triple-bar {
    margin-top: var(--bar-gap-y);
    width: var(--bar-width-percent);
    max-width: none;
    height: calc(3 * var(--bar-stripe-height) + 2 * var(--bar-stripe-gap));
    background:
            linear-gradient(var(--red),   var(--red))   0 0 / 100% var(--bar-stripe-height),
            linear-gradient(var(--white), var(--white)) 0 calc(var(--bar-stripe-height) + var(--bar-stripe-gap)) / 100% var(--bar-stripe-height),
            linear-gradient(var(--blue),  var(--blue))  0 calc(2 * (var(--bar-stripe-height) + var(--bar-stripe-gap))) / 100% var(--bar-stripe-height);
    background-repeat: no-repeat;
}
.hero-left  .triple-bar { margin: 0 var(--bar-gap-x) 0 0; }
.hero-right .triple-bar { margin: 0 0 0 var(--bar-gap-x); }

/* Labels */
.hero-label {
    font-family: var(--label-font);
    font-size: var(--label-size);
    color: var(--text-light);
    margin-top: var(--label-offset-y);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Badge + titles */
.hero-logo-wrap { position: relative; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; }
.hero-logo      { width: clamp(var(--badge-min), var(--badge-fluid), var(--badge-max)); display: block; height: auto; }

.hero-title {
    position: absolute; top: var(--title-gap-above); left: 50%; transform: translateX(-50%);
    white-space: nowrap; pointer-events: none;
    font-family: 'engravers-lh-bold', serif; font-size: var(--title-size); color: var(--text-light);
}
.hero-title .hero-name { font-family: 'engravers-lh-bold', serif; font-size: var(--title-size); color: var(--text-light); }
.hero-title .hero-llc  { font-size: var(--llc-size); margin-left: 0.5rem; vertical-align: super; }

/* 7) Accessibility/stacking for the maintenance banner */
aside[role="status"].alert { position: relative; z-index: var(--z-banner); }

/* 8) Responsive (kept as comments to avoid accidental shifts)
@media (max-width: 992px) { }
@media (max-width: 768px) { }
@media (max-width: 480px){ }
*/