/* ============================================================================
 * Soil Depot, S-tier navigation (sitewide).
 * Enhances Astra's header in place (no markup rebuild): a frosted sticky header
 * that condenses on scroll, a center-growing gradient underline, premium
 * dropdown cards, an elevated CTA, and a polished mobile drawer.
 * Brand-scoped variables; everything targets header selectors only.
 *
 * SINGLE SOURCE OF TRUTH for header behaviour. style.css intentionally no longer
 * declares header position/background (that split, plus a 12px no-hysteresis
 * threshold, caused the scroll-up flicker). Sticky is (re)declared here so it
 * beats style.css's "#masthead{position:relative!important}" by load order
 * (nav.css is enqueued after style.css). `top` is left non-important so the
 * admin-bar offset (.admin-bar #masthead{top:32px}) still wins.
 * ========================================================================== */
:root{
  --sdn-ink:#241B0F; --sdn-ink-70:rgba(36,27,15,.72);
  --sdn-green:#2E7D32; --sdn-green-d:#23601f; --sdn-green-l:#E4F0E2;
  --sdn-gold:#E0A94B; --sdn-cream:#F5F1E6; --sdn-paper:#FBF8F0;
  --sdn-line:rgba(36,27,15,.12);
  --sdn-ease:cubic-bezier(.16,.84,.44,1);
}

/* ---- sticky, transition-ready header (sticky restored here) ---- */
#masthead{position:sticky !important;top:0;z-index:1000}
/* Scroll-up glitch fix: the sticky header changes its own in-flow height when it
   expands near the top (logo 46->64, padding 7->11). The browser's scroll
   anchoring then compensates for that shift by nudging scrollY back up, so an
   upward flick "halts" just short of the top and needs a second scroll. Disabling
   anchoring on the root scroller lets the flick reach y=0 in one motion. Safe here:
   fonts are preloaded and the hero is fixed-height video, so there are no late
   content jumps that anchoring would otherwise smooth over. */
html{overflow-anchor:none}
.site-header{
  position:relative;
  transition:box-shadow .32s var(--sdn-ease),border-color .32s var(--sdn-ease);
  border-bottom:1px solid transparent;will-change:box-shadow}

/* High-specificity (#masthead + matching Astra's transparent-logo chain, + !important)
 * so these beat Astra's ID-level dynamic CSS. */
#masthead .ast-primary-header-bar.main-header-bar{
  padding-top:11px!important;padding-bottom:11px!important;  /* was 14px; ~30% shorter header, logo size unchanged */
  background:var(--sdn-paper)!important;            /* warm, not stark white, at the top */
  transition:padding-top .3s var(--sdn-ease),padding-bottom .3s var(--sdn-ease),background .32s var(--sdn-ease)}
#masthead .site-logo-img .custom-logo-link img.custom-logo,
#masthead .site-logo-img .transparent-custom-logo img.custom-logo{
  width:auto!important;max-width:none!important;height:64px!important;
  transition:height .3s var(--sdn-ease)}
/* Astra renders TWO logo anchors (standard + transparent-header) inside .site-logo-img.
 * Astra hides the inactive one with display:none, but style.css's `.custom-logo-link
 * {display:flex!important}` reset un-hides it, so a bare ~24px duplicate stacked under
 * the real logo (height 64+24=88) and pushed the visible logo off-center. Keep only the
 * canonical animated logo (the one our soil_depot_crisp_logo filter wrapped in .sd-logo-anim). */
#masthead .site-logo-img .custom-logo-link:not(:has(.sd-logo-anim)){display:none!important}

/* calculator pages: start a touch more compact (the page is the focus) */
body.sd-calc-page #masthead .site-logo-img img.custom-logo{height:54px!important}
body.sd-calc-page #masthead .ast-primary-header-bar.main-header-bar{padding-top:10px!important;padding-bottom:10px!important}

/* ---- condensed (scrolled) state: frosted glass + shrink ----
 * Declared LAST so it wins over the calc-page rules at equal specificity. */
body.sd-nav-scrolled #masthead .ast-primary-header-bar.main-header-bar{
  padding-top:7px!important;padding-bottom:7px!important;
  background:rgba(251,248,240,.82)!important;
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}
body.sd-nav-scrolled .site-header{box-shadow:0 10px 34px rgba(36,27,15,.13);border-bottom-color:var(--sdn-line)}
body.sd-nav-scrolled #masthead .site-logo-img img.custom-logo{height:46px!important}
/* condensed row floor follows the shrunk 46px logo so it stays centered (the 64px
 * unscrolled floor would otherwise leave the small logo floating). Desktop only. */
@media (min-width:922px){
  body.sd-nav-scrolled #masthead .ast-builder-grid-row,
  body.sd-nav-scrolled #masthead .ast-builder-grid-row-container{min-height:58px!important}
}
/* signature brand hairline under the condensed header */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(46,125,50,.55),rgba(224,169,75,.6),transparent);
  opacity:0;transition:opacity .32s var(--sdn-ease)}
body.sd-nav-scrolled .site-header::after{opacity:1}

/* ---- top-level menu typography + spacing ---- */
.main-header-menu > .menu-item > .menu-link{
  font-weight:700;letter-spacing:.015em;color:var(--sdn-ink);
  padding-left:16px;padding-right:16px;transition:color .2s var(--sdn-ease)}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link{color:var(--sdn-green-d)}

/* center-growing gradient underline (replaces Astra's flat underline) */
.main-header-menu.ast-menu-hover-style-underline > .menu-item > .menu-link::before{display:none!important}
.main-header-menu > .menu-item{position:relative}
.main-header-menu > .menu-item > .menu-link::after{
  content:"";position:absolute;left:16px;right:16px;bottom:8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sdn-green),var(--sdn-gold));
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--sdn-ease);opacity:.95}
.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .menu-item:focus-within > .menu-link::after,
.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after{transform:scaleX(1)}
/* dropdown caret nudges down on open */
.main-header-menu > .menu-item-has-children > .menu-link .ast-header-navigation-arrow,
.main-header-menu > .menu-item-has-children > .menu-link::marker{transition:transform .25s var(--sdn-ease)}

/* ---- premium dropdown cards ---- */
.main-header-menu .sub-menu{
  border:1px solid var(--sdn-line)!important;border-radius:16px!important;
  padding:8px!important;min-width:248px;
  background:linear-gradient(180deg,#fff,var(--sdn-paper))!important;
  box-shadow:0 26px 56px rgba(36,27,15,.18),0 2px 6px rgba(36,27,15,.06)!important;
  margin-top:10px!important}
/* subtle reveal on open (Astra toggles opacity/visibility on hover/focus) */
.main-header-menu .menu-item-has-children > .sub-menu{
  transform:translateY(6px);transition:opacity .22s var(--sdn-ease),transform .22s var(--sdn-ease)}
.main-header-menu .menu-item-has-children:hover > .sub-menu,
.main-header-menu .menu-item-has-children:focus-within > .sub-menu{transform:translateY(0)}
.main-header-menu .sub-menu .menu-link{
  border-radius:10px;padding:11px 14px!important;font-weight:600;color:var(--sdn-ink);
  white-space:nowrap;
  transition:background .18s var(--sdn-ease),color .18s var(--sdn-ease),transform .18s var(--sdn-ease)}
.main-header-menu .sub-menu .menu-item > .menu-link:hover,
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link{
  background:var(--sdn-green-l);color:var(--sdn-green-d);transform:translateX(4px)}
/* ES: Spanish child labels run long ("Calculadora de Movimiento de Tierra", "Constructor de
   plataformas y lotes"), which clipped inside the 248px nowrap panel. Widen the panel, let the
   labels wrap, and right-align the dropdown so a wider panel never overflows the viewport at
   tighter desktop widths (the Calculadoras item sits well right of center). */
body.sd-lang-es .main-header-menu .sub-menu{min-width:300px}
body.sd-lang-es .main-header-menu .menu-item-has-children > .sub-menu{left:auto;right:0}
body.sd-lang-es .main-header-menu .sub-menu .menu-link{white-space:normal;line-height:1.32}

/* ---- elevated CTA button (header "Contact Us") ---- */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-1 a.ast-custom-button-link,
.ast-header-button-1 .menu-link{
  border-radius:999px!important;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(180deg,#3a9b3f,var(--sdn-green-d))!important;
  box-shadow:0 6px 16px rgba(35,96,31,.28),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .2s var(--sdn-ease),box-shadow .2s var(--sdn-ease),filter .2s var(--sdn-ease)}
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-1 a.ast-custom-button-link:hover,
.ast-header-button-1 .menu-link:hover{
  transform:translateY(-1px);box-shadow:0 12px 26px rgba(35,96,31,.36),inset 0 1px 0 rgba(255,255,255,.28);filter:brightness(1.05)}

/* hide a duplicate "Contact Us" nav item (JS tags it; the CTA button remains) */
.sd-nav-hidden{display:none!important}

/* ---- polished mobile drawer ---- */
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:var(--sdn-paper)!important}
.ast-mobile-popup-drawer .main-header-menu{background:transparent!important}
.ast-mobile-popup-drawer .menu-item{border-bottom:1px solid var(--sdn-line)}
.ast-mobile-popup-drawer .menu-link{font-weight:700;font-size:17px;color:var(--sdn-ink);padding:15px 4px!important}
.ast-mobile-popup-drawer .sub-menu .menu-link{font-weight:500;font-size:15px;color:var(--sdn-ink-70)}
.ast-mobile-popup-drawer .sub-menu{box-shadow:none!important;border:0!important;background:transparent!important;padding:0 0 6px 10px!important}
/* hamburger / toggle accent */
.ast-mobile-header-wrap .ast-button-wrap .ast-mobile-svg{transition:transform .25s var(--sdn-ease)}
.ast-header-navigation-arrow,.ast-menu-toggle{color:var(--sdn-green-d)}
/* drawer items fade-and-rise in */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner .menu-item{animation:sdnDrawerIn .42s var(--sdn-ease) both}
.ast-mobile-popup-drawer.active .menu-item:nth-child(1){animation-delay:.04s}
.ast-mobile-popup-drawer.active .menu-item:nth-child(2){animation-delay:.08s}
.ast-mobile-popup-drawer.active .menu-item:nth-child(3){animation-delay:.12s}
.ast-mobile-popup-drawer.active .menu-item:nth-child(4){animation-delay:.16s}
.ast-mobile-popup-drawer.active .menu-item:nth-child(5){animation-delay:.20s}
.ast-mobile-popup-drawer.active .menu-item:nth-child(6){animation-delay:.24s}
@keyframes sdnDrawerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .site-header,.site-header::after,.ast-primary-header-bar,.custom-logo,
  .main-header-menu .menu-link,.main-header-menu .menu-link::after,.main-header-menu .sub-menu,
  .ast-header-button-1 .ast-custom-button,
  .ast-mobile-popup-drawer.active .menu-item{transition:none!important;animation:none!important}
}

/* ============================================================
   Logo: crisp retina render + refined on-brand micro-animation.
   A gold "sheen" sweep masked to the mark, a one-time settle-in
   (the truck eases in), and a gentle hover lift. Motion-safe.
   ============================================================ */
.sd-logo-anim{
  position:relative;display:inline-block;line-height:0;
  transform-origin:left center;
  animation:sdLogoIn .7s cubic-bezier(.2,.7,.2,1) both;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.sd-logo-anim .sd-logo-img{display:block;height:auto;width:100%}
.sd-logo-sheen{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 38%,
    rgba(255,253,242,.55) 47%,
    rgba(255,255,255,.95) 50%,
    rgba(255,253,242,.55) 53%,
    rgba(255,255,255,0) 62%);
  background-repeat:no-repeat;background-size:300% 100%;background-position:200% 0;
  mix-blend-mode:screen;opacity:1;
  animation:sdSheen 7s ease-in-out 1.6s infinite;
}
@keyframes sdLogoIn{
  from{opacity:0;transform:translateX(-12px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes sdSheen{
  0%,100%{background-position:200% 0}
  26%{background-position:-110% 0}
}
/* Dust kick at the rear wheels as the truck settles in (once on load; re-puffs on hover). */
.sd-logo-anim::after{
  content:"";position:absolute;left:4%;bottom:2%;width:38%;height:36%;pointer-events:none;
  background:
    radial-gradient(circle at 34% 74%, rgba(150,121,84,.55), transparent 58%),
    radial-gradient(circle at 60% 82%, rgba(176,146,106,.42), transparent 52%),
    radial-gradient(circle at 15% 88%, rgba(138,110,78,.5), transparent 52%);
  filter:blur(3.5px);transform-origin:left bottom;opacity:0;
  animation:sdDust 1.5s ease-out 1.5s 1 both;
}
@keyframes sdDust{
  0%{opacity:0;transform:translateX(3%) scale(.4)}
  28%{opacity:.7;transform:translateX(-2%) scale(.82)}
  100%{opacity:0;transform:translateX(-15%) scale(1.3)}
}
.site-header .sd-logo-anim:hover,
#masthead .sd-logo-anim:hover{transform:translateY(-1px) rotate(-.6deg) scale(1.018)}
.site-header .sd-logo-anim:hover::after,
#masthead .sd-logo-anim:hover::after{animation:sdDust 1.2s ease-out 1}
@media (prefers-reduced-motion: reduce){
  .sd-logo-anim{animation:none}
  .sd-logo-sheen{animation:none;opacity:0}
  .sd-logo-anim::after{animation:none;opacity:0}
  .site-header .sd-logo-anim:hover,#masthead .sd-logo-anim:hover{transform:none}
}

/* Mobile drawer close (X): keep it off the very edge so the button + focus ring are not clipped */
.ast-mobile-popup-drawer .ast-mobile-popup-header{padding-right:12px!important;box-sizing:border-box}
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle,
.ast-mobile-popup-drawer .ast-mobile-popup-header [class*="close"]{margin-right:6px}

/* Spanish labels are ~400px wider than English and overflowed the desktop nav.
   Compact the Spanish desktop header so it fits laptop widths. */
@media (min-width:922px){
  body.sd-lang-es .main-header-menu > .menu-item > .menu-link{font-size:14px;letter-spacing:0;padding-left:8px;padding-right:8px}
  body.sd-lang-es .sd-lang-toggle--d{margin:0 6px}
  body.sd-lang-es .ast-header-button-1 .ast-custom-button,
  body.sd-lang-es .ast-header-button-1 a.ast-custom-button-link,
  body.sd-lang-es .ast-header-button-1 .menu-link{padding-left:13px!important;padding-right:13px!important;font-size:14px!important}
}

/* Stronger ES compaction (beats Astra's #masthead dynamic CSS). */
@media (min-width:922px){
  body.sd-lang-es #masthead .main-header-menu > .menu-item > .menu-link{font-size:13px!important;letter-spacing:0!important;padding-left:7px!important;padding-right:7px!important}
  body.sd-lang-es #masthead .sd-lang-btn{padding:6px 9px!important;font-size:13px!important}
  body.sd-lang-es #masthead .ast-header-button-1 .ast-custom-button,
  body.sd-lang-es #masthead .ast-header-button-1 a.ast-custom-button-link,
  body.sd-lang-es #masthead .ast-header-button-1 .menu-link{padding-left:12px!important;padding-right:12px!important;font-size:13px!important}
}

/* ============================================================
   RAISED collapse breakpoint (1240, set in functions.php via
   astra_header_break_point) + the rules that make it clean. Four
   top-level items (FAQ folded under Our Company). Below 1240 the
   off-canvas drawer is used; at/above 1240 the horizontal row.
   ============================================================ */
/* Astra pins the desktop/mobile header SHOW-HIDE to its 921 tablet media query,
   but the filter moved the JS flip to 1240, so 922-1240 showed BOTH headers.
   Astra's JS adds body.ast-header-break-point below the raised breakpoint;
   key the desktop-header hide to that class so the two move in lockstep. */
body.ast-header-break-point #ast-desktop-header{display:none!important}

/* In the newly-exposed drawer band (922-1240) Astra's mobile-header grid adds a
   phantom trailing track that drifts the hamburger to center; pin it right. */
@media (min-width:922px) and (max-width:1240px){
  #ast-mobile-header .ast-builder-grid-row{grid-template-columns:1fr auto!important}
}

/* Off-canvas drawer menu fix (THE regression that reverted the first attempt).
   Astra's vertical mobile-menu layout is gated to <=921, so now that the drawer
   can appear up to 1240 the in-drawer menu kept the DESKTOP horizontal flex row
   (top-level items 900px wide, visibility:hidden, laid out off-screen) and the
   panel looked empty. Force the in-drawer menu to a visible vertical stack at
   EVERY width it appears (class-scoped, not width-gated), expand sub-menus
   inline, and keep the content to a comfortable column. */
/* The drawer holds TWO menu copies (#ast-hf-mobile-menu + #ast-desktop-toggle-menu);
   Astra hides the desktop-toggle copy only <=921, so it duplicated at 922-1240.
   Keep the canonical mobile menu, drop the duplicate at all widths. */
.ast-mobile-popup-drawer #ast-desktop-toggle-menu{display:none!important}
.ast-mobile-popup-drawer .main-header-menu{display:block!important;width:100%!important}
.ast-mobile-popup-drawer .main-header-menu > .menu-item{
  display:block!important;visibility:visible!important;width:100%!important;
  left:auto!important;right:auto!important;position:relative!important;transform:none!important}
.ast-mobile-popup-drawer .main-header-menu .menu-link{visibility:visible!important}
.ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link::after{display:none!important}
.ast-mobile-popup-drawer .sub-menu{
  position:static!important;visibility:visible!important;opacity:1!important;transform:none!important;
  min-width:0!important;width:auto!important;margin:0!important}
.ast-mobile-popup-drawer .ast-mobile-popup-content{max-width:600px}
/* At the raised band (>=922) Astra's accordion toggle is also gated to <=921, so
   the caret wouldn't expand sub-items. Show them inline and drop the caret;
   phones (<=921) keep Astra's native accordion. */
@media (min-width:922px){
  .ast-mobile-popup-drawer .menu-item-has-children > .sub-menu{display:block!important}
  .ast-mobile-popup-drawer .ast-header-navigation-arrow{display:none!important}
}
/* Slide the panel on-screen when active. Astra parks the drawer at
   left:-2000000 and the inner at translateX(900), and only slides it in via
   .active rules gated to <=921; with the raised breakpoint the drawer opens at
   922-1240 but stayed parked off-screen. Force the active slide-in + overlay at
   all widths, as a right-hand panel. */
.ast-mobile-popup-drawer.active{left:0!important;right:0!important;visibility:visible!important;opacity:1!important}
.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay{visibility:visible!important;opacity:1!important}
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner{
  transform:none!important;left:auto!important;right:0!important;margin-left:auto!important;width:min(440px,94vw)!important}

/* English horizontal nav (four items) fits from 1240 up. Tighten the 1240-1360
   band so the row clears the breakpoint without clipping; roomy spacing >=1360.
   Spanish keeps its own compaction (above) plus a small extra nudge at 1240. */
@media (min-width:1240px) and (max-width:1360px){
  body:not(.sd-lang-es) #masthead .main-header-menu > .menu-item > .menu-link{
    padding-left:7px!important;padding-right:7px!important;font-size:13.5px;letter-spacing:0}
  body:not(.sd-lang-es) #masthead .main-header-menu > .menu-item > .menu-link::after{left:7px;right:7px}
  body:not(.sd-lang-es) #masthead .sd-lang-toggle--d{margin:0 4px}
  body:not(.sd-lang-es) #masthead .ast-header-button-1 .ast-custom-button,
  body:not(.sd-lang-es) #masthead .ast-header-button-1 a.ast-custom-button-link,
  body:not(.sd-lang-es) #masthead .ast-header-button-1 .menu-link{
    padding-left:14px!important;padding-right:14px!important;font-size:13.5px!important}
}
@media (min-width:1240px) and (max-width:1300px){
  body.sd-lang-es #masthead .main-header-menu > .menu-item > .menu-link{
    padding-left:5px!important;padding-right:5px!important;font-size:12.5px!important}
}