/**
 * Flamingo Marine — Site Header (V4 strip-1 top band).
 *
 * Layout: sticky dark-navy band; hamburger + wordmark left, two CTAs right.
 * No JS in P3.1; the hamburger button is a static affordance (toggle deferred).
 */

/* Stickiness lives on the template-part WRAPPER, not .flm-header: a sticky
   element only sticks within its parent's box, and .flm-header's parent
   (header.wp-block-template-part) is only header-height, so it scrolled away.
   The wrapper's parent is the full-height page, so this actually pins. */
.wp-site-blocks > header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Kill the root block-gap margin between the sticky header and the first
   section — it otherwise leaves a ~32px band of navy body background under the
   bar, which reads as a too-tall header with the content shoved to the top.
   (Only the first margin; inter-section spacing inside <main> is untouched.) */
.wp-site-blocks > main {
    margin-top: 0;
}

.flm-header {
    position: relative;
    min-height: 58px;
    /* Trim the tall inline md padding from the block markup (+50% breathing
       room over the original 0.55rem, before-scroll only). */
    padding-top: 0.825rem !important;
    padding-bottom: 0.825rem !important;
    background-color: var(--wp--preset--color--surface-deep);
    color: var(--wp--preset--color--text-primary);
    /* !important so WP's flex-layout container (same specificity, can win on
       source order) can't top-align the row — keeps the short logo centered. */
    align-items: center !important;
    transition: min-height 0.25s ease, padding 0.25s ease,
        background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Once the page scrolls, the sticky band shrinks further and turns into a
   slightly translucent, blurred bar so content reads through it. Toggled by
   assets/js/header-menu.js adding .is-scrolled. */
.flm-header.is-scrolled {
    min-height: 48px;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    background-color: rgba(24, 28, 37, 0.8); /* surface-deep #181C25 @ 80% */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(3, 9, 16, 0.35);
}

/* Our Story is a full-page slideshow — the header floats translucent over it (the
   deck is tucked up under it), so the slideshow reads through the bar. */
body.page-our-story .flm-header {
    background-color: rgba(24, 28, 37, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(3, 9, 16, 0.3);
}

/* Left cluster: hamburger + wordmark sit together with a small gap. */
.flm-header .flm-header__left {
    gap: var(--wp--preset--spacing--lg);
    align-items: center !important;
    margin: 0;
}

/* Hamburger button: bare button, white lines, square hit target. */
.flm-header .flm-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--wp--preset--color--text-primary);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.flm-header .flm-hamburger:hover,
.flm-header .flm-hamburger:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    outline: none;
}

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

.flm-header .flm-hamburger__icon {
    display: block;
}
/* Match the brand menu icon (short solid top/bottom bars + a wider, faded
   middle bar). Little animation: the middle bar goes full-strength flamingo
   pink on hover/focus (BugHerd #102/#115). */
.flm-header .flm-hamburger__bar--mid { transition: fill-opacity 0.2s ease, fill 0.2s ease; }
.flm-header .flm-hamburger:hover .flm-hamburger__bar--mid,
.flm-header .flm-hamburger:focus-visible .flm-hamburger__bar--mid {
    fill: var(--wp--preset--color--accent-pink);
    fill-opacity: 1;
}

/* Wordmark — keep crisp at native dimensions. */
.flm-header .flm-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.flm-header .flm-logo img {
    display: block;
    height: 22px;
    width: auto;
    transition: height 0.25s ease;
}
.flm-header.is-scrolled .flm-logo img { height: 19px; }

/* CTA cluster — right side, no wrap, tight gap. */
.flm-header .flm-header__ctas {
    gap: var(--wp--preset--spacing--sm);
    align-items: center !important;
    margin: 0;
}

/* Button variations — scoped to header for now; can be promoted later. */

/* Outlined White — transparent fill, white border, white text. */
.flm-header .is-style-outlined-white .wp-block-button__link,
.is-style-outlined-white > .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--text-primary);
    border: 1px solid var(--wp--preset--color--text-primary);
    border-radius: 4px;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.flm-header .is-style-outlined-white .wp-block-button__link:hover,
.flm-header .is-style-outlined-white .wp-block-button__link:focus-visible,
.is-style-outlined-white > .wp-block-button__link:hover,
.is-style-outlined-white > .wp-block-button__link:focus-visible {
    color: var(--wp--preset--color--accent-pink);
    border-color: var(--wp--preset--color--accent-pink);
    outline: none;
}

/* Filled White — solid white fill, dark text. */
.flm-header .is-style-filled-white .wp-block-button__link,
.is-style-filled-white > .wp-block-button__link {
    background-color: var(--wp--preset--color--text-primary);
    color: var(--wp--preset--color--surface-deep);
    border: 1px solid var(--wp--preset--color--text-primary);
    border-radius: 4px;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.flm-header .is-style-filled-white .wp-block-button__link:hover,
.flm-header .is-style-filled-white .wp-block-button__link:focus-visible,
.is-style-filled-white > .wp-block-button__link:hover,
.is-style-filled-white > .wp-block-button__link:focus-visible {
    color: var(--wp--preset--color--accent-pink);
    outline: none;
}

/* Header CTAs — sized to the trimmed band (was ~48px tall). Header-scoped so
   body CTAs keep their own size. */
.flm-header .is-style-outlined-white .wp-block-button__link,
.flm-header .is-style-filled-white .wp-block-button__link {
    padding: 0.6rem 1.4rem;
    font-size: 1.0625rem;
    transition: padding 0.25s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Scrolled: trim the buttons' vertical padding only (keeps horizontal padding
   from the desktop/mobile rules, so phones stay compact). */
.flm-header.is-scrolled .is-style-outlined-white .wp-block-button__link,
.flm-header.is-scrolled .is-style-filled-white .wp-block-button__link {
    padding-block: 0.45rem;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 640px) {
    .flm-header {
        padding-left: var(--wp--preset--spacing--md) !important;
        padding-right: var(--wp--preset--spacing--md) !important;
    }

    /* Hide the FIND A DEALER button on narrow screens — keep the primary CTA. */
    .flm-header .is-style-outlined-white {
        display: none;
    }

    /* Halve the BUILD YOUR ROVE CTA on phones (it otherwise dominates the bar
       and wraps mid-word) — kept readable at ~12px uppercase. The label is a
       flex row (text + masked ROVE wordmark); on phones the pair doesn't fit
       one line, so let the two items wrap as units and center — "BUILD YOUR"
       over the wordmark — instead of squeezing the text letter-by-letter
       (BugHerd #146). */
    .flm-header .is-style-filled-white .wp-block-button__link {
        padding: 0.45rem 0.85rem;
        font-size: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.2em;
    }

    .flm-header .flm-logo img {
        height: 18px;
    }
}