/* ============================================================================
   SIMPLY ARI — HEADER STYLESHEET   (v1.4.7)
   ----------------------------------------------------------------------------
   v1.4.7 changes vs v1.4.6:
     - Section 8 simplified to padding-top: 0 on all pages. The previous
       per-page scoping was unnecessary — pages with full-bleed heroes need
       0 padding, and pages with cream/plain backgrounds are unaffected
       because the pod background matches the page background anyway.
       Removing the padding eliminates the gap on about, contact, and any
       other page that opens with a hero image.
     - Removed `display: flex !important` from .ast-builder-grid-row. Astra's
       native row layout already produces the correct horizontal section
       distribution; forcing flex collapsed the columns.
     - Removed `margin-left: auto` from the Right section. Astra's native
       placement is already correct; the explicit margin-auto over-pushed
       the icons and created an imbalanced look.
     - Result: the bar lays out exactly as the mockup shows — pod centered,
       Home/Shop hugging the pod from the left, About/Contact hugging from
       the right, account + cart icons at the far right edge.
   ----------------------------------------------------------------------------
   v1.4.3 changes vs v1.4.2:
     - Revert the v1.4.2 flex-order reshuffling. The actual Header Builder
       config is: LEFT-CENTER=Primary Menu, RIGHT-CENTER=Secondary Menu,
       RIGHT=Account+Cart — Astra was already rendering the visual order
       correctly. The gap between the pod and "About" was caused by
       justify-content:flex-end on the menu's section column, not by section
       order. Right-center now uses justify-content:flex-start so About and
       Contact sit close to the pod.
   ----------------------------------------------------------------------------
   v1.4.2 (superseded by v1.4.3): incorrectly assumed Secondary Menu was in
   section-right; it's actually in section-right-center.
   ----------------------------------------------------------------------------
   v1.4.1 changes vs v1.4.0:
     - Pod now positioned against the BAR (.ast-primary-header-bar), not the
       center column. v1.4.0's absolute-positioning was anchored to the
       center grid column, which collapsed to zero width when the pod left
       it — so the pod drifted off-center. Anchoring against the bar gives
       true geometric centering regardless of underlying column layout.
     - Removed the now-unnecessary 3-column grid forcing on the row.
     - Added horizontal padding to left/right sections so menu links can't
       slide under the absolute-positioned pod.
   ----------------------------------------------------------------------------
   v1.4.0 changes vs v1.3.0:
     - Logo pod is now position:absolute so it does NOT contribute to the
       bar's height calculation. Previously the pod sat inside the center
       column and dragged the bar height up with the logo size. Now the
       bar stays at min-height: 64px regardless of logo size — adjust the
       logo's height freely without affecting the bar.
     - Default logo size increased from 60px to 78px.
   ----------------------------------------------------------------------------
   v1.3.0 changes vs v1.2.0:
     - True-center the logo pod by forcing the header row into a 3-column
       grid (1fr auto 1fr). Previously the center drifted left because the
       right section held more elements than the left in a plain flex row.
       (NOTE: this grid was removed in v1.4.1 — pod is now absolute.)
     - Make the mobile hamburger trigger visible: Astra's inline SVG uses
       fill='currentColor' but no explicit color was inherited, so the icon
       was the same near-white as the bar background. Mobile section now
       styles the trigger as a chip with an explicit text colour.
   ----------------------------------------------------------------------------

   STRUCTURAL PREREQS (in Astra Customizer)
     - Header Builder primary row: Primary Menu LEFT, Logo CENTER,
       Secondary Menu + Account + Cart RIGHT.
     - Transparent Header: OFF.
     - Search: removed from header.
     - "Header Left" menu  (Home, Shop)    assigned to Primary Menu.
     - "Header Right" menu (About, Contact) assigned to Secondary Menu.

   FILE LOCATION
     wp-content/themes/<child>/assets/css/simply-ari-header.css
   ============================================================================ */

:root {
  --hd-blue:    #004890;
  --hd-blue-dk: #003a73;
  --hd-green:   #a8d8a8;
  --hd-text:    #1a2440;
  --hd-surface: #fffefc;
  --hd-line:    rgba(0, 72, 144, 0.08);
  --hd-chip:    #eef3f8;
  --hd-bar-h:   64px;
}

/* ============================================================================
   DESKTOP ONLY — everything below applies above the Astra header-break.
   Astra's default break is 921px; if you've changed it in Customize →
   Header Builder → Mobile Header → Breakpoint, update 922px below to match.
   ============================================================================ */
@media (min-width: 922px) {

  /* ---- 1. OVERFLOW CHAIN (pod must hang below the bar) ---- */
  .ast-desktop .ast-main-header-wrap,
  .ast-desktop .main-header-bar-wrap,
  .ast-desktop .ast-primary-header-bar,
  .ast-desktop .ast-primary-header-bar .site-primary-header-wrap,
  .ast-desktop .ast-primary-header-bar .ast-builder-grid-row,
  .ast-desktop .ast-primary-header-bar .ast-builder-grid-row-container,
  .ast-desktop .ast-primary-header-bar .ast-grid-center-col-layout {
    overflow: visible !important;
  }

  /* ---- 2. THE BAR ---- */
  .ast-desktop .ast-primary-header-bar {
    min-height: var(--hd-bar-h) !important;
    background: var(--hd-surface) !important;
    box-shadow: 0 4px 16px rgba(26, 36, 64, 0.06);
    border-bottom: 1px solid var(--hd-line);
    position: relative;
    margin-bottom: 0 !important; /* Astra Customizer injects margin-bottom:24px which
                                     creates a white gap above full-bleed sections. */
  }

  /* The row: vertically center its sections, hold the bar's min-height.
     We deliberately do NOT force display:flex here — Astra's native row
     layout already produces the correct horizontal distribution. Forcing
     flex collapsed the columns and broke the spacing (confirmed by live
     DevTools testing on 2026-05-28). */
  .ast-desktop .ast-primary-header-bar .ast-builder-grid-row {
    align-items: center;
    min-height: var(--hd-bar-h);
  }

  /* ---- 3. LEFT / RIGHT SECTIONS ----
     Astra's primary row has FIVE sections. Per the Header Builder config:
       LEFT          : (empty)
       LEFT-CENTER   : Primary Menu  (Home, Shop)
       CENTER        : Site Title & Logo  (rendered as absolute pod, sect.4)
       RIGHT-CENTER  : Secondary Menu (About, Contact)
       RIGHT         : Account + Cart

     We do NOT reorder these sections — that's how they're configured in
     the Customizer, and Astra's native rendering produces the correct
     visual order: pod → About → Contact → 👤 → 🛍️.

     We only adjust intra-column alignment so menus hug the pod:
       - LEFT-CENTER  : content hugs RIGHT (Home/Shop sit near the pod)
       - RIGHT-CENTER : content hugs LEFT  (About/Contact sit near the pod)
       - RIGHT        : content hugs RIGHT (icons at far edge)
  */

  /* Left-center: Home/Shop sit near the pod (right-aligned within column) */
  .ast-desktop .ast-primary-header-bar .site-header-primary-section-left-center,
  .ast-desktop .ast-primary-header-bar .ast-grid-left-center-section {
    justify-content: flex-end !important;
    align-items: center;
  }

  /* Right-center: About/Contact sit near the pod (left-aligned within column) */
  .ast-desktop .ast-primary-header-bar .site-header-primary-section-right-center,
  .ast-desktop .ast-primary-header-bar .ast-grid-right-center-section {
    justify-content: flex-start !important;
    align-items: center;
  }

  /* Right: Account + Cart cluster at the right side.
     We deliberately do NOT use margin-left:auto here — Astra's native row
     already places this section correctly. Forcing it with margin-left:auto
     created an imbalanced layout (confirmed by live DevTools testing on
     2026-05-28). */
  .ast-desktop .ast-primary-header-bar .site-header-primary-section-right,
  .ast-desktop .ast-primary-header-bar .ast-grid-right-section {
    justify-content: flex-end !important;
    align-items: center;
  }

  /* ---- 4. THE LOGO POD ----
     One simple rule: position the pod absolutely against the bar itself.
     - position:absolute removes the pod from the bar's height calculation,
       so the bar stays at min-height: 64px no matter how tall the logo is.
     - left:50% + translateX(-50%) centers the pod horizontally relative to
       the BAR (not relative to a grid column), so it sits at the true
       geometric center of the bar regardless of how the left/right
       sections lay out underneath.

     The bar already has position:relative (section 2 above), which makes
     it the containing block for this absolute child.
  */
  .ast-desktop .ast-primary-header-bar .site-branding.ast-site-identity {
    position: absolute !important;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 6;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }

  .ast-desktop .ast-primary-header-bar .site-branding.ast-site-identity .site-logo-img {
    display: inline-block;
    background: var(--hd-surface);
    border-radius: 0 0 22px 22px;
    padding: 12px 30px 16px;
    box-shadow: 0 9px 20px rgba(26, 36, 64, 0.14);
    line-height: 0;
    position: relative;
    z-index: 6;
  }

  .ast-desktop .ast-primary-header-bar .site-branding .custom-logo-link {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* LOGO IMAGE — size driven purely by height. Adjust the two 78px values
     below to taste; the bar height stays fixed regardless. */
  .ast-desktop .ast-primary-header-bar .site-branding img.custom-logo {
    display: block !important;
    height: 78px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 78px !important;
    min-width: 0 !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* The pod's chip is roughly 200px wide; the absolutely-positioned pod
     would overlap the nav links underneath it. Reserve a horizontal gap
     in each inner column away from the center by half the chip width
     plus breathing room. */
  .ast-desktop .ast-primary-header-bar .site-header-primary-section-left {
    padding-right: 120px;
  }
  .ast-desktop .ast-primary-header-bar .site-header-primary-section-right {
    padding-left: 120px;
  }

  /* ---- 5. THE MENUS — gap targeted at the UL with high specificity ---- */
  .ast-desktop .ast-primary-header-bar .main-header-menu {
    background: transparent !important;
    border: none !important;
  }

  /* the actual <ul> — increase gap between top-level items */
  .ast-desktop .ast-primary-header-bar .main-header-menu.ast-flex,
  .ast-desktop .ast-primary-header-bar ul.main-header-menu {
    align-items: center;
    gap: 36px !important;
    column-gap: 36px !important;
  }

  /* belt-and-braces: also add margin between menu-items in case gap is
     killed by some inline style */
  .ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item + .menu-item {
    margin-left: 0;             /* let gap do the work */
  }

  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item > a {
    position: relative;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hd-text);
    padding: 8px 4px;
    transition: color 0.25s ease;
    text-transform: none;
  }

  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item > a::after {
    content: "";
    position: absolute;
    left: 4px;
    right: calc(100% - 4px);
    bottom: -2px;
    height: 2px;
    background: var(--hd-blue);
    border-radius: 2px;
    transition: right 0.28s ease;
  }

  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item > a:hover,
  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item.current-menu-item > a,
  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item.current_page_item > a {
    color: var(--hd-blue);
  }

  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item > a:hover::after,
  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item.current-menu-item > a::after,
  .ast-desktop .ast-primary-header-bar .main-header-menu .menu-item.current_page_item > a::after {
    right: 4px;
  }

  /* spacing between the two builder-menu elements and the icon block */
  .ast-desktop .ast-primary-header-bar .ast-builder-menu-1,
  .ast-desktop .ast-primary-header-bar .ast-builder-menu-2 {
    margin: 0 18px;
  }

  /* ---- 6. ACCOUNT + CART CHIPS ---- */

  /* ACCOUNT */
  .ast-desktop .ast-primary-header-bar .ast-header-account-wrap .ast-header-account-link {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--hd-chip) !important;
    color: var(--hd-text) !important;
    padding: 0 !important;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }

  .ast-desktop .ast-primary-header-bar .ast-header-account-wrap .ast-header-account-link:hover {
    background: var(--hd-blue) !important;
    color: #fff !important;
    transform: translateY(-2px);
  }

  .ast-desktop .ast-primary-header-bar .ast-header-account-link svg,
  .ast-desktop .ast-primary-header-bar .ast-header-account-link i,
  .ast-desktop .ast-primary-header-bar .ast-header-account-link .ahfb-svg-iconset {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: inherit;
  }

  /* CART */
  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .cart-container {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--hd-chip) !important;
    color: var(--hd-text) !important;
    padding: 0 !important;
    border: none !important;
    position: relative;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }

  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .cart-container:hover {
    background: var(--hd-blue) !important;
    color: #fff !important;
    transform: translateY(-2px);
  }

  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .cart-container svg,
  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .cart-container i,
  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .cart-container .ahfb-svg-iconset {
    width: 18px;
    height: 18px;
    fill: currentColor;
    color: inherit;
  }

  /* Hide running cart-total text ("$1.00"). Comment out to restore. */
  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .ast-woo-header-cart-info-wrap {
    display: none !important;
  }

  /* CART COUNT bubble */
  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .cart-container .count,
  .ast-desktop .ast-primary-header-bar .ast-site-header-cart .ast-cart-menu-wrap .count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--hd-blue) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 17px !important;
    text-align: center;
    border: 2px solid var(--hd-surface);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* gap between account chip and cart chip and the menu */
  .ast-desktop .ast-primary-header-bar .ast-header-account {
    margin-left: 8px;
  }
  .ast-desktop .ast-primary-header-bar .ast-site-header-cart {
    margin-left: 12px;
    margin-right: 4px;
  }

  /* ---- 7. HIDE SEARCH (defence in depth) ---- */
  .ast-desktop .ast-primary-header-bar .ast-search-icon,
  .ast-desktop .ast-primary-header-bar .ast-search-menu-icon,
  .ast-desktop .ast-primary-header-bar [class*="ast-header-search"] {
    display: none !important;
  }

  /* ---- 8. CONTENT CLEARANCE for the overhanging pod
     The pod overhangs the bar by ~42px (78px logo + 28px padding - 64px bar).

     DECISION: padding-top is set to 0 globally. Pages that open with a
     full-bleed hero (homepage, about, any page with a Spectra cover block)
     look correct — the pod overlaps the hero image intentionally, and the
     hero's own internal padding provides enough clearance for headline text.

     Pages that open with cream/plain backgrounds (shop, product, checkout,
     contact) also look correct — the cream background matches the pod's
     white background so the overhang is invisible regardless of padding.

     Adding padding-top on those plain pages would just create an
     inconsistent gap that's visible on scroll, so 0 is correct everywhere. */
  #content > .ast-container,
  #content .site-content-contain {
    padding-top: 0 !important;
  }

}  /* end @media (min-width: 922px) */


/* ============================================================================
   STICKY HEADER (Astra Pro — desktop only; inert if module disabled)
   Pod is still position:absolute on sticky; just shrink the logo a notch.
   ============================================================================ */
@media (min-width: 922px) {
  .ast-header-sticked-active .ast-primary-header-bar .site-branding.ast-site-identity .site-logo-img {
    padding: 9px 24px 12px;
    transition: padding 0.25s ease;
  }

  .ast-header-sticked-active .ast-primary-header-bar .site-branding img.custom-logo {
    height: 56px !important;
    max-height: 56px !important;
    transition: height 0.25s ease;
  }
}


/* ============================================================================
   MOBILE — Astra renders its native mobile header (logo + hamburger + cart).
   We touch only what's needed: bar background, logo colour, and the
   hamburger trigger so its SVG icon is actually visible. The trigger's
   <svg fill='currentColor'> defaults to invisible on a near-white bar
   because Astra doesn't set an explicit color on the button.
   ============================================================================ */
@media (max-width: 921px) {
  .ast-primary-header-bar {
    background: var(--hd-surface);
  }

  .ast-primary-header-bar .site-branding img.custom-logo {
    filter: none !important;
    opacity: 1 !important;
  }

  /* HAMBURGER TRIGGER — make its inline SVG visible */
  .ast-primary-header-bar .menu-toggle.main-header-menu-toggle,
  .ast-primary-header-bar .ast-mobile-menu-trigger-minimal,
  .ast-primary-header-bar .ast-button-wrap .menu-toggle {
    color: var(--hd-text) !important;
    background: var(--hd-chip) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .ast-primary-header-bar .menu-toggle .ast-mobile-svg,
  .ast-primary-header-bar .menu-toggle svg {
    fill: currentColor !important;
    color: var(--hd-text) !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .ast-primary-header-bar .menu-toggle .mobile-menu-toggle-icon {
    color: var(--hd-text) !important;
    opacity: 1 !important;
  }

  .ast-primary-header-bar .menu-toggle[aria-expanded="true"] {
    background: var(--hd-blue) !important;
    color: #fff !important;
  }

  /* Mobile cart chip — match the hamburger so the two icons look related */
  .ast-primary-header-bar .ast-site-header-cart .cart-container {
    background: var(--hd-chip) !important;
    color: var(--hd-text) !important;
    border-radius: 50% !important;
  }
}

/* END OF SIMPLY ARI HEADER STYLESHEET v1.4.7 */