/* Header — black bar (matches prod savvysecurity.co.nz). The active logo is
   the white-wordmark-on-black PNG supplied by Hardeep (Week 2 deliverable),
   so it reads directly on the dark header — no white card needed. The card
   styling was previously required when we had a dark-on-white logo. */

/* Black header — scoped tightly to the visible header bar so adjacent
   chrome (sub-bars, search drawers) isn't painted by accident. */
.main-header-bar,
.main-header-wrap .main-header-bar,
.main-header-bar-wrap .main-header-bar,
.ast-mobile-header-wrap .main-header-bar,
.ast-header-break-point .main-header-bar-wrap .main-header-bar {
  background-color: var(--brand-primary);
}

/* Nav links + builder menu items on dark */
.main-header-bar .menu-link,
.ast-builder-menu .menu-link,
.main-header-bar a:not(.custom-logo-link):not(.btn) {
  color: var(--text-on-dark);
}
/* !important so the accent hover beats Astra's dynamically-printed menu colour
   (it loads after the child CSS at equal specificity and would otherwise win,
   turning the link near-black on the dark bar). */
.main-header-bar .menu-link:hover,
.ast-builder-menu .menu-link:hover,
.main-header-bar a:not(.custom-logo-link):not(.btn):hover {
  color: var(--brand-emphasis) !important;
}

/* Active / current page: Astra dynamically prints a near-black colour for the
   current menu item, which disappears on the dark bar. Keep it white and mark
   it with weight instead of colour. current-menu-ancestor covers the parent
   (e.g. Services) when a child spoke is open. !important beats Astra's
   late-loading dynamic CSS at equal specificity. */
.main-header-bar .current-menu-item > .menu-link,
.main-header-bar .current-menu-ancestor > .menu-link,
.main-header-bar .current_page_item > .menu-link,
.ast-builder-menu .current-menu-item > .menu-link,
.ast-builder-menu .current-menu-ancestor > .menu-link {
  color: var(--text-on-dark) !important;
  font-weight: var(--fw-bold);
}

/* Dropdown arrows on dark */
.main-header-bar .ast-arrow-svg { fill: var(--text-on-dark); }

/* Sub-menus stay dark for consistency */
.main-header-bar .sub-menu,
.ast-builder-menu .sub-menu {
  background-color: var(--brand-primary);
  border-color: var(--border-on-dark);
}
.main-header-bar .sub-menu .menu-link,
.ast-builder-menu .sub-menu .menu-link { color: var(--text-on-dark); }

/* Mobile menu toggle on dark */
.main-header-bar .ast-builder-menu-toggle-icon,
.main-header-bar .menu-toggle,
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle { color: var(--text-on-dark); }

/* Hamburger icon: Astra prints the SVG fill near-black, which is invisible on
   the black header (the "three bars not showing" bug). Force it white. */
.main-header-bar .menu-toggle svg,
.ast-mobile-header-wrap .menu-toggle svg,
.ast-mobile-header-wrap .menu-toggle .ast-mobile-svg {
  fill: var(--text-on-dark) !important;
}

/* Mobile off-canvas menu sits on a LIGHT panel (Astra ~#f9f9f9). The dark-bar
   rules above force the current-page item and hover to white/accent, which
   vanish on the light panel. Restore dark, readable text for the top-level
   mobile links (submenus keep their own dark styling). Scoped to the mobile
   wrap so the desktop dark bar is untouched. */
.ast-mobile-header-wrap .main-header-menu > .menu-item > .menu-link,
.ast-mobile-header-wrap .main-header-menu > .current-menu-item > .menu-link,
.ast-mobile-header-wrap .main-header-menu > .current-menu-ancestor > .menu-link,
.ast-mobile-header-wrap .main-header-menu > .current_page_item > .menu-link {
  color: var(--text-default) !important;
}
.ast-mobile-header-wrap .main-header-menu > .menu-item > .menu-link:hover {
  color: var(--brand-primary) !important;
}

/* Logo wrapper — inline-flex keeps the link a well-behaved flex item in
   Astra's header row. The active logo PNG is white-on-black so it sits
   directly on the dark header bar — background must be transparent so
   nothing paints behind it. */
.site-header .custom-logo-link {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  padding: 0;
  line-height: 1;
}

/* Logo size — height-constrained so the header bar can't balloon vertically as
   the wordmark scales. The logo PNG now has a genuinely transparent background
   (black background painted out via Imagick), so it sits cleanly on the dark
   header with no blend hack and no "pasted-on" box. */
.custom-logo,
.site-logo-img img,
.custom-logo-link img {
  display: block;
  width: auto;
  height: 100px;
  max-width: none;
}
@media (max-width: 921px) {
  .custom-logo,
  .site-logo-img img,
  .custom-logo-link img { height: 84px; }
}
@media (max-width: 543px) {
  .custom-logo,
  .site-logo-img img,
  .custom-logo-link img { height: 62px; }
}

/* The hand-rolled Savvy header (.savvy-header) below is unused — Astra Header
   Builder owns the actual header rendering. Kept as a reference / future
   option in case we replace Astra's header. */

.savvy-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-default);
}

.savvy-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.savvy-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.savvy-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.savvy-header__nav a {
  color: var(--text-default);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}
.savvy-header__nav a:hover { color: var(--brand-accent-hover); }

.savvy-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--brand-accent);
  color: var(--text-on-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
}
.savvy-header__cta:hover {
  background: var(--brand-accent-hover);
  color: var(--text-on-dark);
}

@media (max-width: 768px) {
  .savvy-header__nav { display: none; }
  .savvy-header__cta span { display: none; }
}

/* Header phone + "Get a Quote Now" CTA appended to the primary nav (2026-06-11,
   feedback pts 3 + 16 — replaces the removed top-bar). The CTA uses .btn--primary,
   which header.css already excludes from menu-link recolouring. */
.main-header-bar .savvy-nav-phone > a {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; white-space: nowrap;
}
.savvy-nav-phone__icon { display: inline-flex; }
.savvy-nav-phone__icon svg { width: 17px; height: 17px; display: block; }
/* Push the phone + CTA to the right end of the nav row, with breathing room
   between the phone number and the button (they were cramped together). */
.main-header-bar .savvy-nav-phone { margin-left: auto; padding-right: 0.5rem; }
.main-header-bar .savvy-nav-phone > a { text-decoration: none; }
.main-header-bar .savvy-nav-cta { display: flex; align-items: center; margin-left: 1.5rem; }
/* On the dark header a #111 button is invisible — give the CTA a light fill
   with a yellow-accent hover so it reads as the primary action. */
.main-header-bar .savvy-nav-cta > a.btn--primary {
  white-space: nowrap; line-height: 1;
  background: #fff; color: #111; border: 1px solid #fff;
}
.main-header-bar .savvy-nav-cta > a.btn--primary:hover {
  background: var(--accent, #ffd500); color: #111; border-color: var(--accent, #ffd500);
}