/* =====================================================================
   header.css — GoMoto HEADER (hamburger, flyout, hero bars, labels)
   ---------------------------------------------------------------------
   PURPOSE
     • Styles the GoMoto header: hamburger icon, flyout menu, hero row.
     • Uses CSS custom properties (variables) for easy global tuning.

   QUICK CHEAT SHEET — FLYOUT MENU TEXT
   ------------------------------------------------------------------
   • Section titles (HOME / INVENTORY / SERVICE / CONTACT):
       :root { --menu-title-size: 1.6rem; }
       - Smaller: 1.4rem
       - Larger:  1.8rem or 2.0rem

   • Links (About Us, Today’s Inventory, etc.):
       :root { --menu-link-size: 1.15rem; }
       - Smaller: 1.0rem
       - Larger:  1.25rem or 1.35rem

   • Vertical space between groups (HOME vs INVENTORY):
       :root { --menu-gap-y: 1.4rem; }
       - Tighter: 1.0rem
       - Looser:  1.8rem or 2.0rem

   • Padding inside the flyout panel:
       .flyout-menu { padding: 2rem; }
       - More padding:  2.5rem or 3rem
       - Less padding:  1.5rem

   ORIENTATION (VERTICAL vs HORIZONTAL) — FOR LATER
   ------------------------------------------------------------------
   Current: sections are stacked vertically in one column.

   If you ever want a horizontal, multi-column layout, you can:
     • Add this to .flyout-menu:
         display:flex; flex-wrap:wrap; gap:2rem;
     • Add this to .menu-section:
         flex:1 1 180px; min-width:180px;

   Remove those added lines again to go back to the vertical stack.

   OTHER COMMON KNOBS
   ------------------------------------------------------------------
   • Hamburger icon size:
       :root { --ham-size: 36px; --ham-stripe-h: 3px; }

   • “Foreign / Domestic” label size:
       :root { --label-size: 3rem; }

   • Distance between header hero row and content:
       :root { --hero-padding-y: 1.75rem; }

   ===================================================================== */


/* ──────────────────────────────────────────────────────────────────
   0) FONT-FACE DECLARATIONS
   ------------------------------------------------------------------ */
@font-face {
    font-family: 'bellissima-script-pro';
    src:
            url('../fonts/bellissima/bellissima-script-pro-webfont.woff2') format('woff2'),
            url('../fonts/bellissima/bellissima-script-pro-webfont.woff')  format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/eb-garamond/eb-garamond-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/eb-garamond/eb-garamond-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ──────────────────────────────────────────────────────────────────
   1) ROOT VARIABLES — master knobs
   ------------------------------------------------------------------ */
:root {
    /* Hamburger icon */
    --ham-size: 36px;
    --ham-stripe-h: 3px;
    --ham-stripe-gap: 2px;

    /* Hero (bars + logo row) */
    --hero-padding-y: 1.75rem;
    --logo-size: 145px;

    /* R/W/B bars */
    --stripe-height: 6px;
    --stripe-gap: 2px;
    --bar-nudge-y: 3rem;

    /* Labels (“Foreign” / “Domestic”) */
    --label-font: 'bellissima-script-pro', cursive;
    --label-size: 3rem;
    --label-color: #ffffff;
    --label-stroke: 3px;
    --label-offset-y: 0.2rem;
    --label-nudge-x: 0rem;

    /* Flyout menu text & layout */
    --flyout-bg: rgba(0,0,0,0.92);
    --menu-max-width: 760px;
    --menu-title-size: 2.0rem;  /* MAIN knob for flyout section titles */
    --menu-link-size: 1.45rem;  /* MAIN knob for flyout links         */
    --menu-gap-y: 1.4rem;       /* space between HOME / INVENTORY etc */

    /* Brand colors */
    --red: #c1141c;
    --white: #ffffff;
    --blue: #0047b3;

    /* General page colors */
    --body-bg: #000000;
    --text-light: #f5f5f5;
}

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

/* ──────────────────────────────────────────────────────────────────
   3) Header wrapper
   ------------------------------------------------------------------
   CHANGE: Added z-index so the header + hamburger sit above any
           page content (gallery, grids, etc.) and remain clickable
           on detail pages.

   TWEAK:
     • If some future overlay should sit above the header, lower this:
         z-index: 30;
     • If something STILL covers the header, you can bump higher:
         z-index: 80;
   ------------------------------------------------------------------ */
.gomoto-header {
    position: relative;
    padding: 1rem 0;
    z-index: 50; /* ensure header/flyout are above page content for clicks */
}

/* ──────────────────────────────────────────────────────────────────
   4) Hamburger button
   ------------------------------------------------------------------ */
.hamburger {
    width: var(--ham-size);
    height: var(--ham-size);
    margin: 0 auto 1rem auto;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

/* Colored stripes for preview markup */
.ham-stripe {
    height: var(--ham-stripe-h);
    width: 100%;
    display: block;
}
.ham-stripe.red   { background: var(--red); }
.ham-stripe.white { background: var(--white); }
.ham-stripe.blue  { background: var(--blue); }

/* Colored stripes for fragment markup (<span class="bar red">…) */
.hamburger .bar {
    height: var(--ham-stripe-h);
    width: 100%;
    display: block;
}
.hamburger .bar.red   { background: var(--red); }
.hamburger .bar.white { background: var(--white); }
.hamburger .bar.blue  { background: var(--blue); }

/* ──────────────────────────────────────────────────────────────────
   5) Flyout menu
   ------------------------------------------------------------------ */
.flyout-menu {
    position: absolute;
    top: calc(100% + 0.5rem);  /* distance below hamburger */
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: var(--flyout-bg);
    padding: 2rem;             /* inner padding knob */
    width: 90vw;
    max-width: var(--menu-max-width);
    text-align: left;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 999;
}

.flyout-menu.active {
    display: block;
}

/* Section blocks inside the flyout */
.menu-section {
    list-style: none;
    margin: 0 0 var(--menu-gap-y) 0;
    padding: 0;
}

/* Section titles: HOME, INVENTORY, SERVICE, CONTACT */
.menu-title {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: var(--menu-title-size);
    letter-spacing: 0.05em;
    color: var(--white);
    margin-bottom: 0.5rem;
}

/* Links inside each group */
.menu-section a {
    font-family: 'EB Garamond', serif;
    font-size: var(--menu-link-size);
    color: #ccc;
    text-decoration: none;
    display: block;
    margin: 0.3rem 0;
    transition: color 0.15s ease;
}

.menu-section a:hover {
    color: var(--white);
}

/* ──────────────────────────────────────────────────────────────────
   6) Hero row (bars + logo + labels)
   ------------------------------------------------------------------ */
.gomoto-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hero-padding-y) 0;
    gap: 1rem;
    max-width: 1800px;
    margin: 0 auto;
}

/* Left/Right bar+label columns */
.hero-half {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transform: translateY(var(--bar-nudge-y));
}

/* Triple color bars */
.triple-bar {
    width: 100%;
    max-width: none;
    height: calc(3 * var(--stripe-height) + 2 * var(--stripe-gap));
    margin-top: 0;
    background:
            linear-gradient(var(--red),   var(--red))   0 0 / 100% var(--stripe-height),
            linear-gradient(var(--white), var(--white)) 0 calc(var(--stripe-height) + var(--stripe-gap)) / 100% var(--stripe-height),
            linear-gradient(var(--blue),  var(--blue))  0 calc(2 * (var(--stripe-height) + var(--stripe-gap))) / 100% var(--stripe-height);
    background-repeat: no-repeat;
}

/* Script labels ("Foreign" / "Domestic") */
.hero-label {
    font-family: var(--label-font);
    font-size: var(--label-size);
    color: var(--label-color);
    margin-top: var(--label-offset-y);
    transform: translateX(var(--label-nudge-x));
    text-shadow:
            calc(var(--label-stroke) * -1) 0 #000,
            calc(var(--label-stroke) *  1) 0 #000,
            0 calc(var(--label-stroke) * -1) #000,
            0 calc(var(--label-stroke) *  1) #000;
}

/* Logo wrapper */
.hero-logo-wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logo sizing — clamp keeps it from exploding */
.hero-logo {
    width: clamp(129px, 21vw, 232px);
    height: auto;
    display: block;
}

/* ──────────────────────────────────────────────────────────────────
   7) RESPONSIVE TWEAKS
   ------------------------------------------------------------------ */

/* Medium screens */
@media (max-width: 992px) {
    :root {
        --label-size: 1.7rem;
        --logo-size: 110px;
        /* Optionally also shrink flyout text on tablets:
           --menu-title-size: 1.45rem;
           --menu-link-size: 1.05rem;
        */
    }
}

/* Small screens */
@media (max-width: 768px) {
    .gomoto-hero {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .hero-half {
        width: 100%;
    }
    .triple-bar {
        width: 100vw;
        max-width: none;
    }
    .flyout-menu {
        width: 95vw;
    }
}

/* Extra small */
@media (max-width: 480px) {
    :root {
        --ham-size: 32px;
        --ham-stripe-h: 3px;
        --stripe-height: 5px;
        --label-size: 1.4rem;
        /* Optional: slightly smaller flyout text on very small phones:
           --menu-title-size: 1.35rem;
           --menu-link-size: 1.0rem;
        */
    }
}