/**
 * Flamingo Marine — Hamburger Drawer Menu.
 *
 * Off-canvas primary navigation that slides in from the LEFT (hamburger is
 * top-left). Open/close is JS-driven (assets/js/header-menu.js) via the
 * `.is-open` class; the core navigation block runs with overlayMenu:never so it
 * never injects its own mobile hamburger/overlay — this drawer owns open/close.
 *
 * 2-line hamburger icon: top stroke white (currentColor), bottom stroke muted
 * grey (#949CAD / text-muted), authored in the SVG itself (parts/header.html).
 */

/* --- Hamburger icon ----------------------------------------------------- */
/* The SVG strokes carry their own colors (top=currentColor white, bottom=
   #949CAD). currentColor follows the button's white text color. */
.flm-header .flm-hamburger {
    color: #FFFFFF;
}

.flm-header .flm-hamburger__icon {
    display: block;
    width: 24px;
    height: 14px;
}

/* --- Drawer root -------------------------------------------------------- */
/* The wrapper is layout-only; it adds no box of its own. */
.flm-drawer-root {
    margin: 0;
}

/* --- Scrim (dims the page below the panel; click-to-close via JS) -------- */
.flm-drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 200; /* below the panel (210), above the sticky header (100) */
    background: rgba(3, 9, 16, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.flm-drawer__scrim[hidden] { display: none; }
.flm-drawer__scrim.is-open { opacity: 1; }

/* --- Top overlay panel — sized to its content (stops after the social row) */
.flm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: auto; /* anchored top-left under the hamburger */
    /* ~half width instead of full-bleed; floored so phones stay usable and
       capped so it doesn't sprawl on large monitors. */
    width: clamp(300px, 50%, 600px);
    max-width: 100vw;
    max-height: 100dvh; /* cap to viewport; scroll if content is taller */
    z-index: 210; /* above the scrim (200) and sticky header (100) */
    margin: 0;
    /* Top padding reserves room for the absolutely-pinned bar (header top
       offset + 40px bar) plus the old bar margin. */
    padding: calc(0.825rem + 40px + clamp(1.25rem, 4vw, 2.5rem))
        clamp(1.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.75rem);
    background: var(--wp--preset--color--surface-deep);
    color: var(--wp--preset--color--text-primary);
    box-shadow: 10px 18px 44px rgba(3, 9, 16, 0.5); /* separate the right + bottom edges */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Off-canvas to the left; slides in left-to-right on open. The panel is
       anchored at left:0, so translateX(-100%) parks it just past the left edge
       and .is-open brings it to translateX(0). header-menu.js un-hides + forces
       a reflow before adding .is-open, so this transform always animates. */
    transform: translateX(-100%);
    transition: transform 0.28s ease;
}

/* The `hidden` attribute (toggled by header-menu.js) must beat the flex
   display above — the attribute selector is more specific, so display:none
   wins while closed. */
.flm-drawer[hidden] {
    display: none;
}

.flm-drawer.is-open {
    transform: translateX(0);
}

/* --- Top bar: boxed close (left) + wordmark ----------------------------- */
/* Pinned to the panel's top-left with the header's own spacing presets and
   flex gap, so the close box lands exactly over the hamburger and the
   wordmark over the header logo — opening the drawer reads as "no movement"
   (BugHerd #103). The panel is fixed at the viewport origin like the header,
   so identical offsets produce identical positions. */
.flm-drawer__bar {
    position: absolute;
    top: 0.825rem; /* header.css trims the header's md padding to 0.825rem */
    left: var(--wp--preset--spacing--xl);
    display: flex;
    align-items: center;
    gap: 20px; /* header left-group flex gap */
    margin: 0;
}

.flm-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Same footprint as the hamburger button, so the boxes overlay. */
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    color: var(--wp--preset--color--text-primary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease;
}

.flm-drawer__close:hover,
.flm-drawer__close:focus-visible {
    color: var(--wp--preset--color--accent-pink);
    border-color: #FFFFFF;
    outline: none;
}

.flm-drawer__close:focus-visible {
    box-shadow: 0 0 0 2px var(--wp--preset--color--focus);
}

.flm-drawer__logo {
    display: inline-flex;
    align-items: center;
    color: var(--wp--preset--color--text-primary); /* white letters via currentColor */
}

.flm-drawer__logo .flm-drawer__wordmark {
    display: block;
    height: 22px; /* header logo's exact size (18px ≤640, below) */
    width: auto;
}

/* --- Lists: shared reset ----------------------------------------------- */
.flm-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Primary rows: large, chevron, hairline dividers ------------------- */
.flm-drawer__main {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.flm-drawer__main li {
    width: 100%;
}

.flm-drawer__main a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: clamp(0.8rem, 2.2vw, 1.15rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--wp--preset--font-family--plex);
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.15s ease;
}

.flm-drawer__main a:hover,
.flm-drawer__main a:focus-visible {
    color: var(--wp--preset--color--accent-pink, #FF4E77);
    outline: none;
}

.flm-drawer__main a:focus-visible {
    box-shadow: 0 0 0 2px var(--wp--preset--color--focus);
    border-radius: 2px;
}

.flm-drawer__chev {
    flex: 0 0 auto;
    color: var(--wp--preset--color--text-muted);
    transition: transform 0.18s ease, color 0.15s ease;
}

.flm-drawer__main a:hover .flm-drawer__chev,
.flm-drawer__main a:focus-visible .flm-drawer__chev {
    color: var(--wp--preset--color--accent-pink, #FF4E77);
    transform: translateX(4px);
}

/* ROVE row: the brand wordmark in place of the text label. The PNG is white-on-
   transparent, so masking it over currentColor reproduces the logotype and lets
   it inherit the row's color — white at rest, accent-pink on hover/focus, exactly
   like the text rows. Sized a touch under the cap height of its siblings. */
.flm-drawer__rove {
    display: inline-block;
    aspect-ratio: 576 / 148;
    height: 0.78em;
    background-color: currentColor;
    -webkit-mask: url(../images/rove-wordmark-white.png) left center / contain no-repeat;
    mask: url(../images/rove-wordmark-white.png) left center / contain no-repeat;
}

/* --- Secondary muted links --------------------------------------------- */
.flm-drawer__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 2.5rem;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.flm-drawer__secondary a,
.flm-drawer__secondary a:visited {
    font-family: var(--wp--preset--font-family--plex);
    font-size: 1rem;
    color: var(--wp--preset--color--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.flm-drawer__secondary a:hover,
.flm-drawer__secondary a:focus-visible {
    color: var(--wp--preset--color--accent-pink);
    outline: none;
}

.flm-drawer__secondary a:focus-visible {
    box-shadow: 0 0 0 2px var(--wp--preset--color--focus);
    border-radius: 2px;
}

/* --- CTA buttons (outlined + filled, side by side) --------------------- */
.flm-drawer__cta {
    display: grid;
    /* Side-by-side when each button has room for its label on one line;
       stacks to full-width in the narrow (half-width / phone) drawer instead
       of wrapping "BUILD YOUR ROVE" onto three lines. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.75rem;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.flm-drawer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.9rem 1.1rem;
    min-width: 0;
    white-space: nowrap; /* keep each label on a single line */
    font-family: var(--wp--preset--font-family--plex);
    font-size: var(--wp--preset--font-size--caption, 0.875rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease,
        border-color 0.15s ease;
}

.flm-drawer__btn--outline {
    color: #FFFFFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Same hover as the header Find A Dealer: pink font + pink border
   (BugHerd #162 — consistent hover states across the site). */
.flm-drawer__btn--outline:hover,
.flm-drawer__btn--outline:focus-visible {
    color: var(--wp--preset--color--accent-pink);
    border-color: var(--wp--preset--color--accent-pink);
    outline: none;
}

.flm-drawer__btn--fill {
    color: var(--wp--preset--color--surface-deep);
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.flm-drawer__btn--fill:hover,
.flm-drawer__btn--fill:focus-visible {
    color: var(--wp--preset--color--accent-pink);
    border-color: var(--wp--preset--color--accent-pink);
    outline: none;
}

.flm-drawer__btn:focus-visible {
    box-shadow: 0 0 0 2px var(--wp--preset--color--focus);
}

/* --- Social row, under a full-width divider ----------------------------- */
/* Scoped under .flm-drawer to out-specify footer.css's `.flm-social`. */
.flm-drawer .flm-drawer__social {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    width: 100%;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Plain icons in the drawer — neutralize the footer's circular bordered box.
   Scoped under .flm-drawer to out-specify footer.css's `.flm-social a`. */
.flm-drawer .flm-drawer__social a {
    display: inline-flex;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--wp--preset--color--text-primary);
    transition: color 0.15s ease;
}

.flm-drawer .flm-drawer__social a:hover,
.flm-drawer .flm-drawer__social a:focus-visible {
    color: var(--wp--preset--color--accent-pink);
    background: none; /* keep plain — footer.css gives .flm-social a a hover fill */
    transform: none;
    outline: none;
}

.flm-drawer .flm-drawer__social a:focus-visible {
    box-shadow: 0 0 0 2px var(--wp--preset--color--focus);
    border-radius: 3px;
}

.flm-drawer__social .flm-social__icon {
    display: block;
    width: 26px;
    height: 26px;
}

/* --- Narrow screens: track the header's tighter inset + smaller logo ----- */
@media (max-width: 640px) {
    .flm-drawer__bar {
        left: var(--wp--preset--spacing--md); /* header drops to md padding */
        /* The two-line mobile CTA makes the header taller and flex-centers the
           hamburger lower; 16px matches its measured resting position. */
        top: 16px;
    }

    .flm-drawer__logo .flm-drawer__wordmark {
        height: 18px; /* header logo's mobile size */
    }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .flm-drawer,
    .flm-drawer__chev {
        transition: none;
    }
}