/* ============================================================================
   Fast Tracking — Shared Masthead Styles  (v2.1 — display-flex fix)
   ----------------------------------------------------------------------------
   File location:  wp-content/themes/astra-child/assets/shared/style-masthead.css
   Loaded by:      functions.php for all 11 custom page templates (home,
                   melbourne, sydney, brisbane, perth, adelaide, hobart,
                   about, how-to-bill, pricing, contact).

   v2.1 changes (this file):
     - Added `display: flex !important` to the mobile drawer rule. Some
       page-specific stylesheets (style-pricing.css, possibly others) had
       legacy `body.ft-{page} .masthead-nav { display: none !important; }`
       rules that were hiding the drawer entirely. The shared CSS previously
       didn't claim `display`, so any page-specific rule could win silently.
       Now `display: flex !important` is part of the shared drawer block.
     - Added explicit `flex-direction: column` for clarity (was already
       implicit via the inner .masthead-menu rule, now explicit on the
       container too).

   v2 changes (carried forward):
     - Every selector inside both mobile @media blocks (≤1080px and ≤720px)
       is prefixed with `html .masthead` to win specificity battles
       against page-specific stylesheets that scope masthead rules to
       body.ft-{page} with !important.
     - Critical positioning rules (display, position, transform) carry
       !important to be doubly resilient against future page CSS drift.
     - Active-page indicator selectors (top-level link, parent submenu
       trigger, submenu link) also use the html .masthead prefix.

   Verification this file is v2.1 (not v1 or v2): Ctrl+F for `display: flex !important`
   inside the mobile @media block — that property exists in v2.1 only.

   This file replaces the duplicated masthead block previously embedded in
   each style-{page}.css. The page-specific stylesheets continue to provide
   design tokens (--ink, --brass, --paper, --rule, --text-soft, --sans, etc.)
   so this file inherits them via the cascade.

   Active-page indicator:
     - Top-level menu items use [aria-current="page"] (set by the partial
       when 'active' arg matches).
     - Parent items whose submenu contains the current page receive
       .is-current-section on the <li>. Both render with bolder weight and
       darker ink colour.
     - Submenu items can also receive [aria-current="page"] — adds a
       brass left-border accent.

   The brass "Contact us" CTA pill (.masthead-cta) and the plain "Contact"
   menu link are intentionally distinct in style and intent. The CTA is
   visually a high-contrast action button; the menu link is a neutral
   browse-mode wayfinder. Do not converge their styles.
   ============================================================================ */

/* ─── Header shell ───────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,246,241,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 48px;
  gap: 32px;
  max-width: 1440px; margin: 0 auto;
}

/* ─── Brand / logo ───────────────────────────────────────────────────────── */
.masthead-brand {
  display: flex; align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.masthead-brand:hover { opacity: 0.85; }
.masthead-logo {
  display: block;
  height: 48px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* ─── Hamburger toggle (mobile) ──────────────────────────────────────────── */
.masthead-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-right: -10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}
.masthead-toggle-bar {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.masthead-toggle[aria-expanded="true"] .masthead-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.masthead-toggle[aria-expanded="true"] .masthead-toggle-bar:nth-child(2) {
  opacity: 0;
}
.masthead-toggle[aria-expanded="true"] .masthead-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── Primary nav ────────────────────────────────────────────────────────── */
.masthead-nav {
  flex: 1;
}
.masthead-menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.masthead-menu-item {
  position: relative;
}
.masthead-menu-item > a,
.masthead-submenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-soft);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 100px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.masthead-menu-item > a:hover,
.masthead-submenu-trigger:hover,
.masthead-menu-item.is-open .masthead-submenu-trigger {
  color: var(--ink);
  background: rgba(11, 34, 56, 0.04);
}

/* Active page indicator — top-level items.
   Uses font-weight + ink colour rather than an underline so it doesn't
   conflict with the chevron icon on submenu triggers.

   The selector chains html + .masthead at the front to win specificity
   battles against page-specific stylesheets that scope masthead rules to
   body.ft-{page} and use !important (e.g. style-about.css). Specificity:
   html .masthead .masthead-menu-item > a[aria-current="page"]  → 0,0,3,2
   body.ft-about .masthead-menu-item > a                        → 0,0,2,2
   The 3 > 2 in the third column wins; if any page CSS ever raises to
   0,0,3,2, our rule still wins on cascade order (style-masthead.css loads
   after page CSS in functions.php enqueue order). */
html .masthead .masthead-menu-item > a[aria-current="page"],
html .masthead .masthead-menu-item.is-current-section > .masthead-submenu-trigger {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.masthead-chevron {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  margin-left: 2px;
}
.masthead-menu-item.is-open .masthead-chevron {
  transform: rotate(-135deg) translate(-1px, -1px);
}

/* ─── Submenu (dropdown card) ────────────────────────────────────────────── */
.masthead-submenu {
  list-style: none;
  margin: 0; padding: 8px 0;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  background: var(--white, #fff);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(11,34,56,0.04), 0 18px 40px -12px rgba(11,34,56,0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
}
.masthead-submenu::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 2px;
  background: var(--brass);
  border-radius: 0 0 2px 2px;
}
.masthead-menu-item.is-open .masthead-submenu,
.masthead-menu-item:hover .masthead-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.masthead-submenu li { margin: 0; }
.masthead-submenu a {
  display: block;
  padding: 10px 22px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-soft);
  text-decoration: none;
  letter-spacing: -0.003em;
  transition: color 0.15s ease, background 0.15s ease;
}
.masthead-submenu a:hover {
  color: var(--ink);
  background: var(--paper-warm);
}

/* Active page indicator — submenu items */
html .masthead .masthead-submenu a[aria-current="page"] {
  color: var(--ink) !important;
  font-weight: 500 !important;
  background: var(--paper-warm) !important;
  box-shadow: inset 3px 0 0 0 var(--brass) !important;
}

/* ─── Brass CTA pill ─────────────────────────────────────────────────────── */
.masthead-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--white, #fff);
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.masthead-cta:hover { background: var(--ink-deep, #061827); transform: translateY(-1px); }
.masthead-cta::after { content: '→'; font-size: 1.05em; }

/* Defensive overrides — beat any parent-theme anchor styling that fights
   our white text on the dark CTA pill. */
.masthead a.masthead-cta,
.masthead a.masthead-cta:link,
.masthead a.masthead-cta:visited,
.masthead a.masthead-cta:hover,
.masthead a.masthead-cta:focus {
  color: var(--white, #fff) !important;
}

/* ─── Tablet & mobile ≤1080px — drawer mode ─────────────────────────────── */
/* Every selector below is prefixed with `html .masthead` to win specificity
   battles against page-specific stylesheets that scope masthead rules to
   `body.ft-{page}` with !important (style-about.css, style-pricing.css,
   style-contact.css, style-how-to-bill.css all do this). Without the prefix,
   their 0,0,2,1 scoping beats our unscoped 0,0,1,X mobile rules and the
   drawer never slides in when the hamburger is tapped.

   Critical positioning props (display, transform, position) also carry
   !important to be doubly resilient. */
@media (max-width: 1080px) {
  html .masthead {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html .masthead .masthead-toggle { display: flex !important; order: 3; }
  html .masthead .masthead-cta { order: 2; }

  html .masthead .masthead-nav {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: var(--masthead-h, 73px);
    left: 0; right: 0; bottom: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 99;
    padding: 24px 0;
  }
  html .masthead .masthead-nav.is-open {
    transform: translateX(0) !important;
  }
  html .masthead .masthead-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 24px;
  }
  html .masthead .masthead-menu-item {
    border-bottom: 1px solid var(--rule);
  }
  html .masthead .masthead-menu-item:last-child {
    border-bottom: none;
  }
  html .masthead .masthead-menu-item > a,
  html .masthead .masthead-submenu-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 18px 0;
    font-size: 1.05rem;
    border-radius: 0;
    color: var(--ink);
  }
  html .masthead .masthead-menu-item > a:hover,
  html .masthead .masthead-submenu-trigger:hover,
  html .masthead .masthead-menu-item.is-open .masthead-submenu-trigger {
    background: transparent;
  }

  /* Active state on mobile — left brass border for clearer affordance */
  html .masthead .masthead-menu-item > a[aria-current="page"],
  html .masthead .masthead-menu-item.is-current-section > .masthead-submenu-trigger {
    box-shadow: inset 3px 0 0 0 var(--brass) !important;
    padding-left: 12px !important;
  }

  html .masthead .masthead-submenu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    opacity: 1;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  html .masthead .masthead-submenu::before { display: none; }
  html .masthead .masthead-menu-item.is-open .masthead-submenu,
  html .masthead .masthead-menu-item:hover .masthead-submenu {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  html .masthead .masthead-menu-item.is-open .masthead-submenu {
    max-height: 600px;
    padding: 0 0 16px 16px;
    transition: max-height 0.4s ease, padding 0.3s ease;
  }
  html .masthead .masthead-menu-item:hover .masthead-submenu {
    max-height: 0;
    padding: 0;
  }
  html .masthead .masthead-menu-item.is-open:hover .masthead-submenu {
    max-height: 600px;
    padding: 0 0 16px 16px;
  }
  html .masthead .masthead-submenu a {
    padding: 10px 0;
    font-size: 0.96rem;
  }
}

/* ─── Mobile ≤720px — drawer height token, hide CTA ─────────────────────── */
@media (max-width: 720px) {
  html .masthead .masthead-inner { padding: 14px 24px; gap: 12px; }
  html .masthead .masthead-logo { height: 40px; }
  html .masthead .masthead-cta {
    /* Hidden on mobile — the hamburger menu provides full navigation including
       the new top-level Contact link. Keeping the CTA visible at this viewport
       caused horizontal overflow that pushed the hamburger toggle off-screen. */
    display: none !important;
  }
  html .masthead .masthead-nav { top: var(--masthead-h, 64px); }
}