/* ---- AVA FINAL OVERRIDES (loads last) ---- */
:root{
  --ava-navy:#003366;
  --ava-teal:#0099cc;
  --ava-bg:#f4f9fa;
  --ava-ring:#00a6da;
  --fs-body:17px;
}

/* Header layout */
.ava-header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand-area{ display:flex; align-items:center; gap:10px; }
.brand-area img{ height:28px; }

/* Wordmark MUST match nav size/weight and never underline */
.brand-wordmark{
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:var(--fs-body);
  font-weight:500;
  letter-spacing:.03em;
  line-height:1;
  color:var(--ava-navy);
  text-decoration:none !important;
}
.brand-wordmark:hover{ color:var(--ava-teal); text-decoration:none !important; }
.brand-wordmark:focus-visible{ outline:2px solid var(--ava-ring); outline-offset:2px; }

/* Right-aligned nav + no underlines anywhere in header/buttons */
.nav{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav a{ color:var(--ava-navy) !important; padding:10px 12px; font-weight:500; letter-spacing:.03em; border-radius:6px; text-decoration:none !important; }
.nav a:hover{ color:var(--ava-teal) !important; text-decoration:none !important; }
.nav a:focus-visible{ outline:2px solid var(--ava-ring); outline-offset:2px; }

.btn,.btn-primary,.btn-secondary{ text-decoration:none !important; }
.btn:hover{ filter:brightness(.96); }
.btn:focus-visible{ outline:2px solid var(--ava-navy); outline-offset:2px; }

/* Kill any yellow-ish hero/band tints; keep brand BG */
.ava-hero{ background:var(--ava-bg) !important; }
.hero,.banner,.cover,.strip,.band,.page-hero,.hero--light{
  background:var(--ava-bg) !important;
  background-image:none !important;
  filter:none !important; opacity:1 !important; mix-blend-mode:normal !important;
}

/* Keep DEI hero gradient if that class exists */
.ava-hero.ava-hero-gradient{
  background:linear-gradient(135deg, var(--ava-navy) 0%, #03417d 40%, var(--ava-teal) 100%) !important;
  color:#fff;
}
.ava-hero.ava-hero-gradient h1,
.ava-hero.ava-hero-gradient p{ color:#fff !important; }

/* Hide header CTA on Home only to prevent duplicate */
.page-home .header-actions{ display:none !important; }

/* ===== Mobile fixes: header, margins, nav wrap, CTA ribbon (2025-10-09) ===== */
*, *::before, *::after { box-sizing: border-box; }

/* Use a CSS var for header height on small screens */
@media (max-width: 768px) {
  :root { --ava-header-h: 60px; }
}

/* Keep header above content on mobile without changing desktop behavior */
@media (max-width: 768px) {
  header, .ava-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
}

/* Push page content below the sticky header only on mobile */
@media (max-width: 768px) {
  main, .page, .content, body > div:first-child {
    margin-top: var(--ava-header-h, 60px);
  }
}

/* Logo and nav sizing; prevent nav wrapping over logo; allow gentle horizontal scroll */
@media (max-width: 768px) {
  header img, .logo img, .brand img { max-height: 28px; height: 28px; width: auto; }

  header nav, .nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  header nav a, .nav a {
    font-size: 14px;
    line-height: 1;
    padding: 10px 6px;
    white-space: nowrap;
  }
}

/* Comfortable horizontal padding on phones */
@media (max-width: 768px) {
  .container, .wrap, .section, .hero, body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Responsive heading so it never collides with header */
@media (max-width: 768px) {
  h1 { font-size: clamp(22px, 6vw, 32px); line-height: 1.2; margin: 16px 0 8px; }
  h1 + p { margin-top: 8px; }
}

/* Ensure long words/buttons never overflow on tiny widths */
@media (max-width: 768px) {
  h1, h2, h3, .btn, .button { overflow-wrap: anywhere; word-wrap: break-word; }
}

/* Reposition the visible "Join Waitlist" button in the header on small screens.
   Based on inspection, it uses <a class="btn btn-primary"> inside .ava-header. */
@media (max-width: 768px) {
  header .btn-primary, .ava-header .btn-primary {
    position: fixed;
    right: 8px;
    top: calc(var(--ava-header-h, 60px) + 8px);
    z-index: 999;
    font-size: 14px;
    padding: 8px 14px;
  }
}

/* Ultra-small devices: slightly smaller type */
@media (max-width: 390px) {
  header nav a, .nav a { font-size: 13px; padding: 10px 4px; }
}
/* ===== End mobile fixes ===== */