/* =======================================================================
   FILE: /static/css/tweaks.css
   DRAFT STANDARD — Sitewide “knobs” + menu stacking/position overrides
   PURPOSE
     • Keep your existing type-scale utilities.
     • Add variable-driven controls so the hamburger + flyout
       is ALWAYS top-center on every page, above the banner,
       without !important or DOM changes.

   HOW TO TUNE (no code edits elsewhere)
     • Vertical hamburger offset:  --hamburger-top
     • Flyout gap below hamburger: --flyout-gap
     • Hamburger box size:         --hamburger-box  (matches header.css)
     • Z-index scale:              --z-scale (all layers derive from it)

   LOAD ORDER
     • This file must load LAST (you already do this in layout.html).
   ======================================================================= */

/* 1) GLOBAL TYPE KNOBS -------------------------------------------------- */
:root{
    /* Base body type scale (1 = 100%). Example: 1.06 (+6%), 0.94 (−6%). */
    --type-scale: 1;

    /* Headings multipliers relative to the base body size above. */
    --h1-mult: 1.75;
    --h2-mult: 1.50;
    --h3-mult: 1.25;
    --h4-mult: 1.125;
    --h5-mult: 1.05;
    --h6-mult: 1.00;

    /* Optional line-heights */
    --lh-body: 1.6;
    --lh-head: 1.25;

    /* 2) VERTICAL NUDGES FOR GALLERY ARROWS ------------------------------- */
    --gallery-hero-vshift: 0px;  /* On-page hero arrows: +down / −up */
    --lb-arrow-vshift:     0px;  /* GLightbox prev/next arrows: +down / −up */

    /* 3) MENU (HAMBURGER + FLYOUT) — VARIABLE CONTROLS -------------------- */
    /* z-index scale: change one number to raise/lower the whole stack */
    --z-scale:   1000;
    --z-banner:  calc(1 * var(--z-scale));   /* maintenance banner layer   */
    --z-header:  calc(2 * var(--z-scale));   /* header base                */
    --z-menu:    calc(4 * var(--z-scale));   /* hamburger + flyout         */

    /* geometry knobs (match header.css defaults but adjustable here) */
    --hamburger-box: 36px;       /* button box size (width/height)   */
    --hamburger-top: 0.75rem;    /* distance from top of viewport    */
    --flyout-gap:    0.75rem;    /* space between button and flyout  */
}

/* Apply the global scale + body line-height */
html { font-size: calc(100% * var(--type-scale)); }
body { line-height: var(--lh-body); }

/* Scaled headings (stay in step with base scale) */
h1{ font-size: calc(1rem * var(--h1-mult)); line-height: var(--lh-head); }
h2{ font-size: calc(1rem * var(--h2-mult)); line-height: var(--lh-head); }
h3{ font-size: calc(1rem * var(--h3-mult)); line-height: var(--lh-head); }
h4{ font-size: calc(1rem * var(--h4-mult)); line-height: var(--lh-head); }
h5{ font-size: calc(1rem * var(--h5-mult)); line-height: var(--lh-head); }
h6{ font-size: calc(1rem * var(--h6-mult)); line-height: var(--lh-head); }

/* 3) UTILITY CLASSES (legacy; kept as-is to avoid regressions) ---------- */
/* These use !important by design so you can drop them anywhere. */
.fs-90  { font-size: 0.90rem !important; }
.fs-100 { font-size: 1.00rem !important; }
.fs-110 { font-size: 1.10rem !important; }
.fs-125 { font-size: 1.25rem !important; }
.fs-150 { font-size: 1.50rem !important; }
.fs-200 { font-size: 2.00rem !important; }
.fw-600   { font-weight: 600 !important; }
.lh-tight { line-height: 1.15 !important; }
.lh-normal{ line-height: 1.50 !important; }
.lh-loose { line-height: 1.80 !important; }

/* Fluid size that grows with viewport (nice for hero text) */
.fs-fluid-lg{ font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem) !important; }

/* 4) PAGE-SPECIFIC OVERRIDES (opt-in via body class) -------------------- */
body.home{
    --type-scale: 1.10;
    /* These variables already exist in style.css; we safely override here. */
    --hero-logo-size:     160px;
    --garage-title-size:  7.5rem;
    --curators-size:      4.5rem;
    --timeless-size:      4.5rem;
}
body.inventory .inv-title{ font-size: 1.125rem; }
body.vehicle-detail{ --gallery-hero-vshift: 12px; }

/* 5) GALLERY ARROW VERTICAL NUDGES (non-lightbox + GLightbox) ----------- */
.v-nav{ top: calc(50% + var(--gallery-hero-vshift)); } /* on-page “hero” arrows */
.glightbox .gprev,
.glightbox .gnext{ top: calc(50% + var(--lb-arrow-vshift)); } /* overlay */

/* =======================================================================
   6) HEADER + MENU STACKING / POSITION (NO !important, NO DOM CHANGES)
   GOAL
     • Keep hamburger visually fixed at top-center on ALL pages.
     • Keep flyout centered under it, ABOVE the maintenance banner.
     • Achieve via variables + cascade; header.css stays intact.
   ======================================================================= */

/* ensure header establishes a stacking context but stays below menu */
.gomoto-header{
    position: relative;
    z-index: var(--z-header);
    isolation: isolate;
}

/* make hamburger fixed to viewport top-center (wins because tweaks.css loads last) */
.hamburger{
    position: fixed;                  /* viewport-anchored; independent of page flow */
    top: var(--hamburger-top);
    left: 50%;
    transform: translateX(-50%);      /* keeps center regardless of width */
    width: var(--hamburger-box);
    height: var(--hamburger-box);
    z-index: var(--z-menu);           /* above banner/content */
}

/* flyout menu — fixed, centered under the button; hidden by default */
.flyout-menu{
    position: fixed;
    top: calc(var(--hamburger-top) + var(--hamburger-box) + var(--flyout-gap));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-menu);
    display: none;
}

/* open state toggled by JS in layout.html */
.flyout-menu.active{ display: block; }

/* keep the maintenance banner beneath the menu via the banner layer */
aside[role="status"].alert{
    position: relative;
    z-index: var(--z-banner);
}

/* 7) MOBILE REFINEMENTS (optional) ------------------------------------- */
@media (max-width: 576px){
    :root{ --type-scale: calc(var(--type-scale) * 1.04); }
    .fs-fluid-lg{ font-size: clamp(1.05rem, 0.9rem + 1.6vw, 1.5rem) !important; }
}

/* =======================================================================
   8) VEHICLE NOTES — PRESERVE MARKDOWN LINE BREAKS + LISTS
   Renders each newline in narrative.md as a visible break.
   Place AFTER everything else so it wins in the cascade.
   ======================================================================= */
.vehicle-detail .vehicle-notes p{
    white-space: pre-line;   /* \n becomes line breaks */
    text-align: left;
}

/* Optional: if you include bullets in narrative.md */
.vehicle-detail .vehicle-notes ul{
    list-style: disc;
    margin-left: 1.25rem;
    text-align: left;
}
.vehicle-detail .vehicle-notes li{
    margin: 0.25rem 0;
}
/* Vehicle Notes: show newlines from narrative.md */
body.vehicle-detail section.vehicle-notes p {
    white-space: pre-line !important; /* keep !important just to win once; you can remove later */
}

/* keep only ONE of these in the file */
body.vehicle-detail section.vehicle-notes.container.my-4 > p.mb-0 {
    white-space: pre-line !important;
}

/* Vehicle detail notes: preserve newlines from narrative.md */
body.vehicle-detail main p,
body.vehicle-detail .vehicle-notes p,
body.vehicle-detail p.mb-0 {
    white-space: pre-line !important;
}

/* === Narrative formatting: show line breaks on vehicle-detail pages === */
/* Scope by body[data-page~="vehicle-detail"] which you already set in layout.html */
body[data-page~="vehicle-detail"] main p,
body[data-page~="vehicle-detail"] main .mb-0,
body[data-page~="vehicle-detail"] main li,
body[data-page~="vehicle-detail"] main div.narrative,
body[data-page~="vehicle-detail"] main .vehicle-notes * {
    white-space: pre-line !important;
}