/*
 * Sticky footer — site-wide.
 *
 * Hello Elementor wraps content in <main id="content" class="site-main"> between
 * <header id="site-header"> and <footer id="site-footer">. Elementor-template
 * pages (built in Theme Builder) use <div class="elementor" data-elementor-type="page">
 * as their content wrapper instead. We grow whichever content wrapper exists so
 * the footer pins to the viewport bottom on short pages.
 */

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.fowler-site-layout__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* When logged in, the WP admin bar sits above the viewport and steals 32px (46px
   on mobile). Subtract it so the footer still pins to the visible bottom. */
body.admin-bar {
    min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        min-height: calc(100vh - 46px);
    }
}

/* Direct-child header / footer / fixed-position overlays don't grow. */
body > #site-header,
body > #site-footer,
body > .fowler-consent-banner,
body > .fowler-consent-footer-link,
body > .fowler-ag {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Whichever content wrapper exists fills the remaining vertical space. */
body > main#content,
body > main.site-main,
body > .elementor[data-elementor-type="page"],
body > .elementor[data-elementor-type="single-page"] {
    flex: 1 0 auto;
}

/* Round 5 Cycle 28 — opaque background on the Fowler site header.
 *
 * Hello Elementor's Theme-Builder header has no fill of its own, so on
 * pages where the configurator's sticky topbar pins at viewport-top
 * (product pages, post-Cycle-27) the still-in-flow site header above it
 * lets the page background bleed through. On the Vanta 9 mobile layout
 * the fixed sticky-hero pistol image was visible through the
 * transparent header band at scrollY=0.
 *
 * `header.elementor-location-header` is the body-level wrapper Elementor
 * Pro emits for the Theme-Builder header location; setting its bg to
 * the surface white gives the header a discrete band that reads as
 * its own surface above whatever sits below it.
 *
 * Round 7 — explicit divider hairline + the landscape-desktop sticky
 * behavior live in the @media block below. Mobile/portrait keep the
 * header static (the configurator-topbar sticky is killed in those
 * orientations by the mobile worker, so stacking two sticky bars is
 * a landscape-only need).
 */
header.elementor-location-header {
    background-color: #FFFFFF;
}

/* ============================================================
 * Round 7 — desktop chrome: 64px global-nav row stacked on top
 * of a 56px configurator-actions row, both sticky at top, but
 * ONLY at @media (min-width: 1024px) and (orientation: landscape).
 *
 * Row-1 lives here (the Elementor Theme-Builder header). The
 * Row-2 height + sticky offset live alongside the topbar rules
 * in fowler-product-options/assets/css/frontend.css so they stay
 * with the topbar's own selectors.
 *
 * --fowler-site-header-h is the token Row-2 reads to know where
 * to pin below us. Default 64px; the configurator-options column
 * also reads it for its scroll-margin offset (out of scope here,
 * but the variable belongs to this row so we own it).
 * ============================================================ */
:root {
    --fowler-site-header-h: 64px;
    --fowler-admin-bar-h: 0px;
}

/* WP admin bar height — fixed-positioned at top, so any sticky element
   below needs to offset by it to stay visible. 32px desktop, 46px mobile. */
body.admin-bar {
    --fowler-admin-bar-h: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --fowler-admin-bar-h: 46px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    /* Default behavior on landscape desktop (preserved from the original
     * Round-7 header worker): the Elementor site-header is sticky as a
     * single global-nav row, 64px tall, pinned below the WP admin bar.
     * Scoped to `:not(.single-product)` so the consolidation rule for
     * the configurator page (below) wins on `.single-product`.
     *
     * Elementor Pro's inner-container "sticky" widget double-renders the
     * .e-con-full (one fixed clone + one hidden placeholder). With our
     * outer header doing the pinning we don't need either trick: force
     * both back into flow so the row is exactly one 64px band. */
    body:not(.single-product) header.elementor-location-header {
        position: sticky !important;
        top: var(--fowler-admin-bar-h, 0px);
        z-index: 120;
    }

    body:not(.single-product) header.elementor-location-header > .e-con-full,
    body:not(.single-product) header.elementor-location-header > .elementor-section,
    body:not(.single-product) header.elementor-location-header .elementor-sticky {
        min-height: var(--fowler-site-header-h, 64px) !important;
        height: var(--fowler-site-header-h, 64px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center !important;
    }

    body:not(.single-product) header.elementor-location-header > .elementor-sticky--active {
        position: static !important;
        top: auto !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body:not(.single-product) header.elementor-location-header > [style*="visibility: hidden"]:not(.elementor-sticky--active) {
        display: none !important;
    }

    /* R7 v3 Item C — RESTORE the Fowler site-header on the configurator
     * page (logo + CONTACT + SHOP). Operator wants BOTH headers visible
     * at landscape desktop: Fowler brand header on top, configurator
     * topbar below. On scroll the Fowler header scrolls away NATURALLY
     * (non-sticky), while `.fowler-po-topbar` pins at viewport top
     * (controlled in fowler-product-options/assets/css/frontend.css).
     *
     * The previous "consolidate chrome on .single-product" cycle hid
     * the Fowler header at landscape to avoid a "header sandwich"
     * caused by Elementor Pro's sticky-widget transitioning the inner
     * `.e-con-full` from transparent to white over the first few pixels
     * of scroll. We solve it differently now: force the Fowler header
     * INTO normal flow (non-sticky) and disable Elementor's sticky
     * widget on the inner `.e-con-full`. Result: header is visible at
     * scroll-0, scrolls off normally, no fade transition, no stacked
     * white bands. */
    body.single-product header.elementor-location-header {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
    }

    /* Kill the inner Elementor sticky widget on .single-product. The
     * `elementor-sticky` element is the inner band that Elementor Pro
     * uses to fake a fixed-on-scroll behavior (with its own fade-in
     * transition). Force it back into flow so it scrolls with the
     * outer header.
     *
     * NOTE: Don't cap height — Fowler header is two-row (logo + SHOP
     * nav). Capping to 64px causes the nav row to overflow and get
     * visually covered by .fowler-po-topbar below. Keep the minimum
     * height so short content still has the expected header band, but
     * let the element grow to its natural content height. */
    body.single-product header.elementor-location-header > .e-con-full,
    body.single-product header.elementor-location-header > .elementor-section,
    body.single-product header.elementor-location-header .elementor-sticky {
        position: static !important;
        top: auto !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: 64px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center !important;
    }

    /* Hide the duplicate Elementor sticky ghost (the placeholder div
     * Elementor inserts when sticky--active fires). With sticky disabled
     * above the ghost shouldn't appear, but defensive: if Elementor adds
     * the visibility-hidden placeholder anyway, kill it. */
    body.single-product header.elementor-location-header > [style*="visibility: hidden"]:not(.elementor-sticky--active) {
        display: none !important;
    }

    /* Configurator topbar's sticky offset reads `--fowler-site-header-h`.
     * Because the Fowler header is NON-sticky on .single-product, it
     * scrolls away with the page — so once the user scrolls past it,
     * the topbar should pin flush at the WP admin-bar baseline (or
     * viewport top for logged-out visitors). Setting the token to 0
     * achieves that: the topbar's `top: calc(var(--fowler-admin-bar-h)
     * + var(--fowler-site-header-h))` resolves to just admin-bar-h,
     * which is the desired pin point. The Fowler header occupies its
     * 64px of normal flow above the topbar at scrollY=0; once scrolled,
     * it leaves the viewport and the topbar takes over. */
    body.single-product {
        --fowler-site-header-h: 0px;
    }
}

/* ============================================================
   Header nav breakpoint — hamburger ONLY below mobile (<768).
   ============================================================
   Elementor's nav widget defaults its dropdown breakpoint to
   "tablet" which fires at `(max-width: 1023px), (orientation: portrait)`,
   so the hamburger appears alongside the inline SHOP menu on any
   portrait viewport (e.g. iPad Pro 1024w). At 768+ the header has
   plenty of room for the inline nav — keep the toggle reserved
   for true mobile widths only. */
@media (min-width: 768px) {
    /* `body` prefix raises specificity above the (max-width: 1023px),
       (orientation: portrait) sizing rule further down this same file,
       which would otherwise win on source order at portrait viewports
       between 768 and 1023px wide. */
    body header.elementor-location-header .elementor-menu-toggle {
        display: none !important;
    }
    body header.elementor-location-header .elementor-nav-menu--main,
    body header.elementor-location-header nav.elementor-nav-menu--main,
    body header.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu {
        display: flex !important;
    }
}

/* Home hero VANTA 9 heading — extend Elementor's tablet font-size
   (45px) up to 1084px wide.
   Elementor 4 emits its responsive font-sizes at hardcoded media
   queries (`max-width:1024px` for tablet, `max-width:767px` for
   mobile), so the desktop 74px kicks in at 1025+ where the title
   column on the home (~492px wide) is still too narrow to fit
   "VANTA 9" on one line. Bumping the kit's `viewport_lg` setting
   doesn't change the emitted CSS in this version, so the breakpoint
   gets extended here. Mirror it for any other heading widgets on the
   home if they hit the same wrap. */
@media (min-width: 1025px) and (max-width: 1084px) {
    .elementor-element.elementor-element-35303e0 .elementor-heading-title {
        font-size: 45px !important;
    }
}

/* SHOP ▾ chevron flush with the SHOP letters.
 *
 * Elementor Pro Nav Menu items get tracking via `letter-spacing: 3px`
 * (Theme-Builder default for uppercase nav). The trailing space is
 * applied AFTER every glyph including the last "P" before the chevron
 * <span class="sub-arrow">, so the dropdown caret sits 3px detached.
 * Scoped to .menu-item-has-children only — non-dropdown items keep
 * their tracking. */
/* SmartMenus adds `.has-submenu` after first paint, so this must also
 * match the pre-enhanced dropdown link to avoid a visible re-track. */
.menu-item-has-children > a.elementor-item,
.menu-item-has-children > a.has-submenu {
    letter-spacing: 0 !important;
}

/* ============================================================
   Neutralize Hello Elementor reset.css's #CC3366 placeholders
   ============================================================
   Hello Elementor ships its reset.css with all <a> and <button>
   elements colored fuchsia (#CC3366) as a "supposed to be
   overridden" placeholder. Plugin-specific class rules with
   higher specificity win cleanly, but raw links inherit the pink.
   Our enqueue declares 'hello-elementor' as a dep so this loads
   AFTER reset.css — same-specificity selectors then win on source
   order. Class-defined plugin styles still beat us via specificity.

   We only override the link color reset here. Buttons are left for
   plugin/widget classes to define — any unstyled <button> that
   leaks through gets handled in its own plugin via .ancestor
   .class selectors (see fowler-age-gate's .fowler-ag .fowler-ag__btn). */

a {
    color: #2D2D2D;
}

a:hover,
a:focus-visible {
    color: #6A6A6A;
}

/* ============================================================
   Design audit polish — desktop Fowler header rhythm
   ============================================================
   The Theme Builder header is a two-row composition: CONTACT/logo/cart on
   row one, SHOP nav on row two. Older sticky-header constraints capped the
   whole wrapper at 64px, which clipped the logo, pushed SHOP below the
   divider, and left the cart/control row on mismatched baselines. Restore
   the wrapper to the full two-row height and center each control inside the
   64px utility row.
   ============================================================ */

@media (min-width: 1024px) and (orientation: landscape) {
    body:not(.single-product) {
        --fowler-site-header-h: 104px;
    }

    body header.elementor-location-header > .elementor-element-2decec60 {
        min-height: var(--fowler-site-header-h, 104px) !important;
        height: var(--fowler-site-header-h, 104px) !important;
        padding-inline: clamp(24px, 3vw, 48px) !important;
        gap: 0 !important;
        justify-content: flex-start !important;
    }

    body header.elementor-location-header .elementor-element-405820b {
        min-height: 64px !important;
        height: 64px !important;
        margin-bottom: 0 !important;
        align-items: center !important;
    }

    body header.elementor-location-header .elementor-element-77b7176,
    body header.elementor-location-header .elementor-element-14b7bd1,
    body header.elementor-location-header .elementor-element-37716d0 {
        min-height: 64px !important;
        height: 64px !important;
        justify-content: center !important;
    }

    body header.elementor-location-header .elementor-element-77b7176 {
        align-items: flex-start !important;
    }

    body header.elementor-location-header .elementor-element-14b7bd1 {
        align-items: center !important;
    }

    body header.elementor-location-header .elementor-element-37716d0 {
        align-items: center !important;
        justify-content: flex-end !important;
    }

    body header.elementor-location-header .elementor-widget-image img {
        display: block !important;
        width: auto !important;
        height: 40px !important;
        max-height: 40px !important;
        object-fit: contain !important;
    }

    body header.elementor-location-header .elementor-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body header.elementor-location-header .elementor-menu-cart__toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 44px !important;
    }

    body header.elementor-location-header .elementor-widget-woocommerce-menu-cart,
    body header.elementor-location-header .elementor-menu-cart__toggle_button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    body header.elementor-location-header .elementor-menu-cart__toggle_button {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    body header.elementor-location-header .elementor-element-574662b {
        width: 100% !important;
        min-height: 34px !important;
        height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.single-product header.elementor-location-header > .elementor-element-2decec60.e-con-full.elementor-sticky,
    body.single-product header.elementor-location-header > .elementor-element-2decec60.e-con-full.elementor-sticky--active {
        min-height: 104px !important;
        height: 104px !important;
    }
}

@media (max-width: 1023px), (orientation: portrait) {
    header.elementor-location-header .elementor-menu-toggle,
    header.elementor-location-header .elementor-menu-cart__toggle_button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    header.elementor-location-header .elementor-menu-cart__toggle {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
}

/* Header SHOP link: Elementor's nav-menu widget can add text/pointer hover
   motion. Keep the menu behavior, but make the SHOP trigger itself static. */
header.elementor-location-header .elementor-nav-menu--main a[href$="/shop/"],
header.elementor-location-header .elementor-nav-menu--main a[href$="/shop/"]::before,
header.elementor-location-header .elementor-nav-menu--main a[href$="/shop/"]::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* SmartMenus injects the SHOP dropdown chevron shortly after load. Reserve
   its final width up front so the label does not twitch when the SVG appears. */
header.elementor-location-header .elementor-nav-menu--main a[href$="/shop/"] {
    min-width: 4.46rem !important;
}

header.elementor-location-header .elementor-nav-menu--main .menu-item-has-children > a[href$="/shop/"].elementor-item:not(.has-submenu)::before {
    content: "";
    order: 2;
    flex: 0 0 26px;
    width: 26px;
    height: 36px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-block: 0.75rem !important;
    line-height: 1.2 !important;
}

.single-product .woocommerce-product-gallery__trigger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   Round 7 v5 — portrait header non-sticky + footer nav visible
   ============================================================
   Bug 1 (footer): Elementor's nav-menu widget swaps the inline
   horizontal menu for a hamburger toggle at its mobile breakpoint,
   leaving the footer nav (`Shop / Gallery / Contact / Terms &
   Privacy`) as zero-height invisible rows at portrait widths.
   Force the inline nav back on at portrait + small widths.
   Bug 2 (header): defensive override so the Fowler site-header
   stays static at portrait + small widths even if a future widget
   refactor re-introduces sticky positioning. */

@media (max-width: 1023px), (orientation: portrait) {
    /* Bug 2 — site-header non-sticky on portrait + small widths.
       Overrides the body:not(.single-product) sticky rule above
       (line ~106) AND any Elementor-injected sticky behavior. */
    header.elementor-location-header,
    body header.elementor-location-header,
    body:not(.single-product) header.elementor-location-header,
    .site-header,
    #site-header {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
    }

    /* Bug 1 — footer must be visible at portrait + small widths.
       Defensive only: no current rule hides it, but lock it in so
       a future cascade can't regress. */
    footer.elementor-location-footer,
    #site-footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Bug 1 — restore the inline horizontal nav. Elementor's mobile
       breakpoint sets `<nav class="elementor-nav-menu--main">` to
       `display: none` and swaps in a `.elementor-menu-toggle`
       hamburger; the footer has plenty of horizontal room at 768+
       portrait, so render the inline nav and hide the toggle. */
    footer.elementor-location-footer .elementor-nav-menu--main,
    footer.elementor-location-footer nav.elementor-nav-menu--main {
        display: flex !important;
    }
    footer.elementor-location-footer .elementor-nav-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem 2rem !important;
    }
    footer.elementor-location-footer .elementor-nav-menu li {
        display: inline-flex !important;
    }
    footer.elementor-location-footer .elementor-menu-toggle {
        display: none !important;
    }

    /* Footer outer padding per codex polish #16. */
    footer.elementor-location-footer {
        padding: 40px 24px 24px !important;
    }

    /* Elementor's sticky widget paints a 2px 8px rgba(0,0,0,0.06) shadow
       under the inner header band when it activates on scroll. Strip it
       at portrait/<1024 where the inner sticky is the one doing the
       pinning. Desktop landscape pins via the outer header so this is
       a no-op there. */
    header.elementor-location-header .elementor-sticky,
    header.elementor-location-header .elementor-sticky--active,
    header.elementor-location-header > .e-con {
        box-shadow: none !important;
    }

    /* Fowler "F" logo — cap at 40px so it matches the desktop landscape
       sizing. Elementor's tablet-tier responsive setting grows the image
       to ~59px otherwise, which makes the header bar feel oversized at
       portrait widths. */
    header.elementor-location-header .elementor-widget-image img {
        height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* Round 7 v7 — trim mobile and portrait footer whitespace. */
@media (max-width: 1023px), (orientation: portrait) {
    footer.elementor-location-footer,
    #site-footer {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
        min-height: auto !important;
    }

    /* Stack the brand mark above the footer nav on narrow/portrait layouts. */
    footer.elementor-location-footer .elementor-element-90bfec6 {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin-top: 28px !important;
    }

    footer.elementor-location-footer .elementor-element-019e03a,
    footer.elementor-location-footer .elementor-element-b4a8d18 {
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    footer.elementor-location-footer .elementor-element-019e03a .elementor-widget-theme-site-logo {
        width: auto !important;
        max-width: 96px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /* Logo column — clamp height so it doesn't pad the band out. */
    footer.elementor-location-footer .elementor-widget-image img,
    footer.elementor-location-footer img[src*="logo"],
    footer.elementor-location-footer .elementor-widget-theme-site-logo img {
        max-height: 72px !important;
        max-width: 96px !important;
        width: auto !important;
        height: auto !important;
        margin-right: auto !important;
        margin-left: auto !important;
        object-fit: contain !important;
    }
    /* Tighten the inner stacked rows so nothing reintroduces the band. */
    footer.elementor-location-footer .elementor-element.e-con,
    footer.elementor-location-footer .e-con-inner {
        min-height: auto !important;
    }
}