/* Site header refresh (enqueued sitewide by wwa-core-fixes.php).
   - Micro utility bar above the nav (scrolls away on desktop, compact on mobile).
   - Frosted header: the blur lives on a ::before layer, NOT on the header box,
     because backdrop-filter on an ancestor would trap the mobile hamburger
     overlay (position:fixed) inside the header's box.
   - "Free Calculator" CTA at the far right. */

:root { --wwa-topbar-h: 32px; --wwa-nav-h: 76px; }

/* ---- Micro utility bar ---- */
.wwa-topbar { height: var(--wwa-topbar-h); box-sizing: border-box; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
.wwa-topbar__inner { height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  font-size: 12px; font-weight: 600; line-height: 1; color: #475569; letter-spacing: .01em; white-space: nowrap; }
.wwa-topbar__inner svg { width: 14px; height: 14px; flex-shrink: 0; color: #16a34a; }
.wwa-topbar__sep { color: #cbd5e1; }
.wwa-topbar a.wwa-topbar__link { color: #0052CC; font-weight: 600; text-decoration: none; }
.wwa-topbar a.wwa-topbar__link:hover { text-decoration: underline; }

/* ---- Frosted header (white/95 + blur + slate-100 border) ---- */
.site-header .hostinger-ai-menu { position: relative; isolation: isolate; background-color: transparent !important;
  box-shadow: none !important; border-bottom: 1px solid #f1f5f9 !important; }
.site-header .hostinger-ai-menu::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Desktop: the whole header is sticky, offset by the bar height, so the bar
   scrolls off and the nav row stays pinned. */
@media (min-width: 769px) {
  .wp-site-blocks > .site-header.wp-block-template-part { position: sticky !important; top: calc(var(--wwa-topbar-h) * -1) !important; z-index: 9999; box-shadow: none !important; }
  .admin-bar .wp-site-blocks > .site-header.wp-block-template-part { top: calc(32px - var(--wwa-topbar-h)) !important; }
}

/* ---- "Free Calculator" CTA ---- */
.wwa-header-cta { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; box-sizing: border-box;
  border-radius: 999px; background: #0052CC; color: #ffffff !important; font-size: .9rem; font-weight: 700; line-height: 1;
  text-decoration: none !important; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 82, 204, .25);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.wwa-header-cta:hover { background: #003D99; box-shadow: 0 6px 16px -6px rgba(0, 82, 204, .55); transform: translateY(-1px); }
.wwa-header-cta:focus-visible { outline: 2px solid #0052CC; outline-offset: 3px; }
.wwa-header-cta svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Mobile (<=768px): header is position:fixed (Additional CSS) ---- */
@media (max-width: 768px) {
  :root { --wwa-topbar-h: 28px; }
  .wwa-topbar__inner { font-size: 11px; gap: .35rem; }
  .wwa-topbar__sep, .wwa-topbar a.wwa-topbar__link { display: none; }
  /* Content clears the taller fixed header (was 90px for a 76px header). */
  html body { padding-top: calc(var(--wwa-topbar-h) + 90px); }
  /* Compact CTA ("Calculator") just left of the hamburger. The hamburger never
     shrinks or gets pushed off-screen; the logo side gives way first. */
  .hostinger-ai-menu-wrapper > .wp-block-group:first-child { min-width: 0; flex-shrink: 1; }
  .hostinger-ai-site-navigation-wrapper { align-items: center; gap: .5rem; flex-shrink: 0; }
  .hostinger-ai-site-navigation { flex-shrink: 0; }
  .hostinger-ai-site-navigation-wrapper .wwa-header-cta { order: -1; min-height: 36px; padding: 0 .8rem; font-size: .8rem; }
  .hostinger-ai-site-navigation-wrapper .wwa-header-cta svg,
  .wwa-header-cta__free { display: none; }
}
/* Below 640px the header is logo + hamburger only: the calculator CTA moves
   to the bottom of the navigation drawer (.wwa-drawer-cta below), so the hero
   CTA is the single focal point on the page. */
@media (max-width: 640px) {
  .hostinger-ai-site-navigation-wrapper .wwa-header-cta,
  body.home .hostinger-ai-menu .hostinger-ai-site-navigation-wrapper a.wwa-header-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wwa-header-cta { transition: none; }
  .wwa-header-cta:hover { transform: none; }
}

/* ---- Mobile navigation drawer (core hamburger overlay, .is-menu-open) ----
   Markup additions (toggle buttons, CTA) come from assets/js/wwa-nav-drawer.js.
   Everything is scoped to the open overlay, so the desktop menu is untouched. */
.wwa-drawer-toggle, .wwa-drawer-cta { display: none; }

.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch !important; padding-bottom: 24px; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__container {
  width: 100%; align-items: stretch !important; gap: 0 !important; }

/* Top-level rows: 52px tap targets, hairline separators. */
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%; flex-direction: row !important; flex-wrap: wrap; align-items: center !important;
  border-bottom: 1px solid #F1F5F9; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  flex: 1; display: flex; align-items: center; min-height: 52px; padding: 0 !important;
  font-size: 18px; font-weight: 600; color: #0F172A !important; text-decoration: none; }

/* +/- accordion toggle (two CSS bars; the vertical one folds away when open). */
.hostinger-ai-site-navigation .is-menu-open .wwa-drawer-toggle {
  display: inline-flex; position: relative; flex-shrink: 0; width: 44px; height: 44px; margin: 0 -10px 0 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: #0369A1; cursor: pointer; }
.hostinger-ai-site-navigation .is-menu-open .wwa-drawer-toggle:hover { background: #F0F9FF; }
.hostinger-ai-site-navigation .is-menu-open .wwa-drawer-toggle:focus-visible { outline: 2px solid #0052CC; outline-offset: 2px; }
.wwa-drawer-toggle::before, .wwa-drawer-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 2px; background: currentColor; transition: transform .2s ease; }
.wwa-drawer-toggle::after { transform: rotate(90deg); }
.wwa-drawer-toggle[aria-expanded="true"]::after { transform: rotate(0deg); }

/* Submenu = softly tinted card with a left accent line anchoring the children. */
.hostinger-ai-site-navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container {
  position: relative !important; flex-basis: 100%; width: 100%; min-width: 0 !important; box-sizing: border-box;
  margin: 0 0 14px !important; padding: 6px 6px 6px 16px !important; gap: 0 !important;
  background: #F0F9FF !important; border: 1px solid #E0F2FE !important; border-radius: 14px !important; }
.hostinger-ai-site-navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container::before {
  content: ""; position: absolute; left: 16px; top: 16px; bottom: 16px; border-left: 2px solid #BAE6FD; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex !important; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 10px 12px 10px 18px !important; font-size: 15px !important; font-weight: 500 !important; color: #1E293B !important; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background: #ffffff !important; color: #0369A1 !important; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container [aria-current="page"] {
  color: #0369A1 !important; font-weight: 600 !important; }

/* Collapsed groups (only once the JS toggles exist, so no-JS keeps them open). */
.wwa-drawer-ready .hostinger-ai-site-navigation .is-menu-open .wwa-drawer-toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
  display: none !important; }

/* Primary CTA pinned to the bottom of the drawer. #0369A1 = 5.9:1 with white. */
.hostinger-ai-site-navigation .is-menu-open .wwa-drawer-cta {
  order: 99; /* core gives the menu list order:3 */ position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: 54px; margin-top: 28px; padding: 0 1.25rem; box-sizing: border-box;
  border-radius: 12px; background: #0369A1; color: #ffffff !important; font-size: 17px; font-weight: 700; line-height: 1.2;
  text-decoration: none !important; box-shadow: 0 10px 24px -10px rgba(3, 105, 161, .6); }
.hostinger-ai-site-navigation .is-menu-open .wwa-drawer-cta:hover { background: #075985; }
.hostinger-ai-site-navigation .is-menu-open .wwa-drawer-cta:focus-visible { outline: 2px solid #0052CC; outline-offset: 3px; }
.wwa-drawer-cta svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 360px) {
  .hostinger-ai-site-navigation .is-menu-open .wwa-drawer-cta { font-size: 16px; padding: 0 .75rem; white-space: nowrap; }
  .wwa-drawer-cta svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wwa-drawer-toggle::before, .wwa-drawer-toggle::after { transition: none; }
}

/* "Water Myths And Guides" (nav post 4, className wwa-nav-guides) in the Treatment
   Guides submenu: hairline above it, micro amber "MYTHS" pill matching the guide
   hero badge, bolder label and an amber hover. The pill is decorative, so its alt
   text is empty for screen readers (the label already says "Myths"). */
.wp-block-navigation .wp-block-navigation-item.wwa-nav-guides { border-top: 1px solid #E2E8F0; margin-top: 4px; padding-top: 4px; }
.wp-block-navigation .wwa-nav-guides > .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; font-weight: 600 !important; }
.wp-block-navigation .wwa-nav-guides .wp-block-navigation-item__label::after {
  content: "Myths"; content: "Myths" / "";
  display: inline-block; margin-left: 8px; padding: 2px 7px; vertical-align: 1px;
  border-radius: 999px; background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; }
.wp-block-navigation .wwa-nav-guides > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wwa-nav-guides > .wp-block-navigation-item__content:focus-visible { background: #FFFBEB !important; color: #92400E !important; border-bottom-color: #FCD34D !important; }

/* Mobile drawer: same treatment inside the tinted submenu card (44px rows kept). */
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item.wwa-nav-guides { border-top: 1px solid #BAE6FD; margin-top: 6px; padding-top: 6px; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wwa-nav-guides > .wp-block-navigation-item__content { font-weight: 600 !important; }
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wwa-nav-guides > .wp-block-navigation-item__content:hover,
.hostinger-ai-site-navigation .is-menu-open .wp-block-navigation__submenu-container .wwa-nav-guides > .wp-block-navigation-item__content:focus { background: #FFFBEB !important; color: #92400E !important; }