/* ==========================================================================
   HEADER.CSS — DAP site header only.
   Extracted from the design-system components.css so the theme header ships
   ONLY the rules it uses (navbar, mobile drawer, the buttons + badge it
   renders, and the flex helper the drawer uses).

   Consumes variables from the shared layer:
     primitives.css  (raw values + fonts)
     tokens.css      (semantic variables)
   Load order:  primitives.css -> tokens.css -> header.css

   Do NOT paste full component/page styles in here. Page and other component
   styles are owned by the homepage blocks plugin, not the header.

   Zero hex values, zero arbitrary px (except the few the navbar/toggle/drawer
   already used). No em-dashes anywhere in this codebase, per brand guardrails.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Flex helper (drawer header row)
   -------------------------------------------------------------------------- */
.flex-between { display: flex; align-items: center; justify-content: space-between; }


/* --------------------------------------------------------------------------
   Buttons (header CTA + drawer CTA/phone). Only the variants the header uses:
   --primary, --outline, --sm, --md, --full, plus base + states.
   -------------------------------------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--t-font-body);
  font-weight:     var(--weight-bold);
  line-height:     1;
  white-space:     nowrap;
  border-radius:   var(--btn-radius);
  border:          2px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--transition-base),
                   color       var(--transition-base),
                   border-color var(--transition-base),
                   transform   var(--transition-fast),
                   box-shadow  var(--transition-base);
  -webkit-user-select: none;
  user-select:         none;
}

.btn:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.97);
}

/* Sizes */
.btn--md {
  height:    48px;
  padding:   0 var(--space-12);
  font-size: var(--t-body);
  min-width: 120px;
}

.btn--sm {
  height:    36px;
  padding:   0 var(--space-8);
  font-size: var(--t-small);
}

/* Primary (orange solid) */
.btn--primary {
  background:   var(--accent-main);
  color:        var(--text-inverse);
  border-color: var(--accent-main);
}

.btn--primary:hover {
  background:   var(--accent-hover);
  border-color: var(--accent-hover);
  color:        var(--text-inverse);
  box-shadow:   0 4px 14px rgba(215,119,87,0.35);
  transform:    translateY(-1px);
}

.btn--primary:active {
  background:   var(--accent-active);
  border-color: var(--accent-active);
  transform:    scale(0.97);
}

/* Outline (navy border) */
.btn--outline {
  background:   transparent;
  color:        var(--text-heading);
  border-color: var(--border-strong);
}

.btn--outline:hover {
  background:   var(--bg-section-alt);
  border-color: var(--text-heading);
  color:        var(--text-heading);
}

/* Full width */
.btn--full {
  width:           100%;
  justify-content: center;
}

/* Disabled */
.btn:disabled,
.btn--disabled {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.navbar {
  position:       sticky;
  top:            0;
  z-index:        var(--z-sticky);
  background:     var(--bg-section-dark);     /* always dark navy */
  border-bottom:  1px solid var(--border-on-dark);
  display:        flex;
  align-items:    center;
  transition:     background var(--transition-base),
                  box-shadow  var(--transition-base);
}

.navbar.is-scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.navbar__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  max-width:       var(--container-max);
  margin:          0 auto;
  padding:         0 var(--container-padding-x);
  gap:             var(--space-8);
}

.navbar__logo {
  flex-shrink:  0;
  max-height:   32px;
  display:      flex;
  align-items:  center;
}

.navbar__nav {
  display:    none;
  align-items: center;
  gap:         var(--space-2);
  list-style:  none;
}

@media (min-width: 1024px) {
  .navbar__nav { display: flex; }
}

.navbar__link {
  font-size:       var(--t-small);
  font-weight:     var(--t-weight-ui);
  color:           var(--white-70);
  padding:         var(--space-3) var(--space-4);
  border-radius:   var(--radius-md);
  text-decoration: none;
  transition:      color var(--transition-fast), background var(--transition-fast);
}

.navbar__link:hover {
  color:      var(--white-100);
  background: var(--white-5);
}

.navbar__link.is-active {
  color:       var(--accent-main);
  font-weight: var(--weight-semibold);
}

.navbar__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  flex-shrink: 0;
}

/* Hamburger toggle */
.navbar__toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  color:           var(--white-90);
  border-radius:   var(--radius-md);
  transition:      background var(--transition-fast);
}

.navbar__toggle:hover { background: var(--white-10); }

.navbar__toggle:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .navbar__toggle { display: none; }
}


/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.nav-drawer {
  position:   fixed;
  inset:      0;
  z-index:    var(--z-modal);
  display:    flex;
  visibility: hidden;
  opacity:    0;
  transition: opacity var(--transition-enter), visibility var(--transition-enter);
}

.nav-drawer.is-open {
  visibility: visible;
  opacity:    1;
}

.nav-drawer__overlay {
  position:   absolute;
  inset:      0;
  background: var(--bg-overlay);
}

.nav-drawer__panel {
  position:    relative;
  margin-left: auto;
  width:       min(320px, 85vw);
  height:      100%;
  background:  var(--bg-surface);
  padding:     var(--space-8);
  overflow-y:  auto;
  transform:   translateX(100%);
  transition:  transform var(--transition-spring);
}

.nav-drawer.is-open .nav-drawer__panel {
  transform: translateX(0);
}

.nav-drawer__links {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-top:     var(--space-8);
}

.nav-drawer__link {
  display:       block;
  padding:       var(--space-4) var(--space-6);
  font-size:     var(--t-body-lg);
  font-weight:   var(--t-weight-ui);
  color:         var(--text-main);
  border-radius: var(--radius-lg);
  transition:    background var(--transition-fast), color var(--transition-fast);
}

.nav-drawer__link:hover,
.nav-drawer__link.is-active {
  background: var(--bg-section-alt);
  color:      var(--text-heading);
}


/* --------------------------------------------------------------------------
   Badge (optional per-link tag, e.g. "Free")
   -------------------------------------------------------------------------- */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  line-height:   1;
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space:   nowrap;
}

.badge--neutral { background: var(--bg-section-alt); color: var(--text-muted); }
.badge--accent  { background: var(--accent-main);     color: var(--text-inverse); }


/* ==========================================================================
   PRODUCTION REFINEMENTS (migrated out of the homepage blocks plugin's
   homepage.css so the header is styled the same way site-wide and the rules
   live in one place only). These were #navbar overrides; kept as #navbar +
   !important so they continue to win over the base .navbar rules above and any
   leftover plugin styles. The header markup uses id="navbar".
   ========================================================================== */

/* CTA breathe animation */
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215,119,87,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(215,119,87,0); }
}

/* Condensed vertical padding (taller on desktop) */
#navbar .navbar__inner {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  height:         auto !important;
  min-height:     0 !important;
}
#navbar {
  height:         auto !important;
  padding-top:    12px !important;
  padding-bottom: 12px !important;
}
@media (min-width: 1024px) {
  #navbar {
    padding-top:    27px !important;
    padding-bottom: 27px !important;
  }
}

/* Primary CTA (note: original font-size used an undefined --t-btn token, which
   browsers dropped, so it is intentionally omitted here). */
#navbar .btn--primary {
  color:     #fff !important;
  height:    48px !important;
  padding:   0 var(--space-12) !important;
  animation: btn-breathe 2.4s ease-in-out infinite;
}
#navbar .btn--primary:hover {
  animation:  none !important;
  box-shadow: 0 0 0 4px rgba(215,119,87,.3), 0 4px 20px rgba(215,119,87,.5) !important;
  transform:  translateY(-1px);
}

/* Always-dark navbar surface */
#navbar {
  background:    var(--secondary-900) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:    none !important;
}
#navbar.is-scrolled {
  background:    var(--secondary-800) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow:    0 2px 24px rgba(0,0,0,.3) !important;
}

/* Navbar is always dark, so always show the white logo */
#navbar .navbar__logo-dark  { display: none  !important; }
#navbar .navbar__logo-white { display: block !important; }

/* Links: white, bold, with an animated underline on hover */
#navbar .navbar__link {
  color:       #ffffff !important;
  position:    relative;
  font-size:   15px !important;
  font-weight: 700 !important;
}
#navbar .navbar__actions .navbar__link {
  font-weight: 400 !important;
  font-size:   14px !important;
  color:       rgba(255,255,255,.4) !important;
}
#navbar .navbar__link::after {
  content:       '';
  position:      absolute;
  bottom:        0; left: 14px; right: 14px;
  height:        2px;
  background:    var(--accent-main);
  border-radius: 2px;
  opacity:       0;
  transition:    opacity .18s;
}
#navbar .navbar__link:hover {
  color:      #fff !important;
  background: transparent !important;
}
#navbar .navbar__link:hover::after { opacity: 1; }
#navbar .navbar__actions .navbar__link::after { display: none; }

/* Badge on a dark navbar */
#navbar .badge {
  background: var(--accent-main) !important;
  color:      #fff !important;
}

/* Sticky support: overflow-x:clip (not hidden) keeps position:sticky working. */
html, body { overflow-x: clip; max-width: 100%; }
#navbar { position: sticky !important; top: 0 !important; z-index: 1000 !important; }

/* Mobile layout: logo / nav / actions order + condensed CTA, hide phone */
@media (max-width: 1023px) {
  #navbar .navbar__inner {
    max-width:       100%;
    justify-content: space-between;
    align-items:     center;
    gap:             0;
  }
  #navbar .navbar__actions {
    display:     flex !important;
    align-items: center;
    gap:         var(--space-2);
    order:       3;
  }
  #navbar .navbar__logo {
    order:       1;
    margin:      0;
    flex-shrink: 0;
  }
  #navbar nav[aria-label="Main navigation"] { order: 2; }
  #navbar .navbar__actions a[href^="tel"] { display: none !important; }
  #navbar .navbar__actions .btn--primary {
    display:     inline-flex !important;
    font-size:   11px !important;
    padding:     6px 12px !important;
    white-space: nowrap;
  }
}
#navbar .navbar__toggle { color: #fff !important; }
#navbar .navbar__toggle:hover { background: rgba(255,255,255,.1) !important; }