/* ============================================================
   GLOBAL HEADER — product row seated on the menu bar
   ============================================================

   Replaces the OceanWP Customizer "Header Media" image, which was removed
   (header_image = remove-header). The Customizer only offers cover / auto for
   background-size, and neither can seat a product cutout flush on the nav bar:
   - cover blows a square source up to viewport width and shows a thin slice
   - auto/contain still leaves a gap, because the source WebP carries 136px of
     transparent padding below the products

   So the image is handled here instead. assets/header-safes.webp is the
   uploaded 600x600 WebP cropped to its content box (504x355) — with the
   padding gone, "background-position: left bottom" puts the products' baseline
   exactly on the header's bottom edge, which is the top of the menu bar. No
   gap, no magic offset number to keep in sync.

   Height is set in vh-independent px so the row scales with the header band,
   not the viewport. If ocean_header_height changes in the Customizer, only
   --sb2u-header-art-h below needs revisiting.
   ============================================================ */

:root {
    /* Rendered height of the product row. The baseline is pinned to the bottom
       of the 280px header band, so raising this number is what lifts the top of
       the row higher up the header — the safes stay flush on the menu bar
       either way. At 268px the tall cabinet nearly fills the band. */
    --sb2u-header-art-h: 268px;
}

/* The header is the positioning context; OceanWP already sets it to
   position: relative. Painting on a pseudo-element rather than the header's
   own background keeps the Customizer background-color untouched and avoids
   fighting OceanWP's inline .has-header-media rules. */
#site-header.top-header::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--sb2u-header-art-h);
    background-image: url("assets/header-safes.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 100%;
    pointer-events: none;
    z-index: 0;
}

/* Keep the logo, tagline, nav and search above the artwork. */
#site-header.top-header #site-logo,
#site-header.top-header #site-navigation-wrap,
#site-header.top-header .oceanwp-social-menu,
#site-header.top-header #search-toggle,
#site-header.top-header .header-top {
    position: relative;
    z-index: 1;
}

/* ---- Tablet and mobile: no artwork ----
   Below 1024px the row has to shrink far enough that it stops reading as
   products on a shelf, and by phone widths it spans most of the screen and
   crowds the centred logo. Decorative, so it goes rather than degrades. */
@media (max-width: 1024px) {
    #site-header.top-header::before {
        display: none;
    }
}

/* ============================================================
   MENU BAR — keep it on one line down to the mobile burger
   ============================================================

   The Customizer sets ocean_menu_items_padding = 50, i.e. 50px on *each* side
   of every item. Measured on the live menu: the six items total 1088px, of
   which 600px is padding — the labels themselves are only 488px. OceanWP's
   `li`s are floated, so as soon as the container is narrower than the row they
   wrap and the bar becomes two lines (three, once the social/search block is
   pushed down too).

   Rather than change the desktop spacing, the padding is stepped down over the
   tablet range so the labels always fit. Figures below are the label width
   (488px) plus 6 x padding, against the container at that breakpoint.

   !important is required here, not laziness. OceanWP prints the Customizer's
   `padding: 0 50px` from wp_head at around line 494 of the document, while this
   stylesheet is linked at line 124. The two selectors have identical
   specificity, so without !important the later inline rule always wins and
   nothing below takes effect.

   The cart and search sit in `button` elements rather than links, so all three
   of OceanWP's selectors have to be matched or those items keep the 50px and
   wrap on their own.
   ============================================================ */

/* 1280-1439px — container is 1200px and the untouched row is 1180px, only 20px
   of slack. 488 + 6*80 = 968px (1060px with cart, social, search). */
@media (max-width: 1439px) and (min-width: 1280px) {
    #site-navigation-wrap .dropdown-menu > li > a,
    #site-navigation-wrap .dropdown-menu > li > button.dropdown-toggle,
    #site-navigation-wrap .dropdown-menu > li > button.site-search-toggle {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* 1025-1279px — 488 + 6*52 = 800px (892px with the cart, social and search). */
@media (max-width: 1279px) and (min-width: 1025px) {
    #site-navigation-wrap .dropdown-menu > li > a,
    #site-navigation-wrap .dropdown-menu > li > button.dropdown-toggle,
    #site-navigation-wrap .dropdown-menu > li > button.site-search-toggle {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
}

/* 769-1024px — the tablet layout that was wrapping. 488 + 6*32 = 680px, which
   clears a 768px container with room for the cart, social and search. */
@media (max-width: 1024px) and (min-width: 769px) {
    #site-navigation-wrap .dropdown-menu > li > a,
    #site-navigation-wrap .dropdown-menu > li > button.dropdown-toggle,
    #site-navigation-wrap .dropdown-menu > li > button.site-search-toggle {
        padding-left: 16px !important;
        padding-right: 16px !important;
        letter-spacing: 1px !important;
    }
}

/* Labels must never break mid-phrase — "Safe Categories" splitting over two
   lines re-introduces the same problem at a smaller scale. */
#site-navigation-wrap .dropdown-menu > li > a {
    white-space: nowrap;
}