/* ============================================
   CABANA-HF placeholder site — overrides
   Loaded AFTER styles.css so the base stylesheet
   stays byte-identical to the full site.
   ============================================ */

/* --- Nav: two links only, never a hamburger ---
   The base stylesheet hides .nav-links below 768px and reveals them
   through .nav-toggle. With only Home and Contact there is nothing to
   collapse, so the toggle is removed and the links stay inline at every
   width. */
.nav-toggle {
  display: none !important;
}

@media (max-width: 768px) {
  .nav-links {
    display: flex !important;
    position: static;
    inset: auto;
    flex-direction: row;
    background: none;
    gap: 0.25rem;
    z-index: auto;
  }

  .nav-links a {
    font-size: 0.9rem;
    padding: 6px 14px;
  }

  /* The base sets `.nav-links a { color: rgba(255,255,255,.85) !important }`
     at this width, for the full-screen overlay menu that no longer exists.
     That !important outranks the per-state colors above, so the pills lost
     their light/dark values on narrow screens. Re-assert the same states
     here at matching weight rather than flattening them to `inherit`. */
  .nav-links a:not(.nav-cta),
  .nav-links a:not(.nav-cta).active {
    color: #fff !important;
  }

  .navbar.scrolled .nav-links a:not(.nav-cta),
  .navbar.scrolled .nav-links a:not(.nav-cta).active {
    color: var(--blue-700) !important;
  }

  [data-theme="dark"] .navbar.scrolled .nav-links a:not(.nav-cta),
  [data-theme="dark"] .navbar.scrolled .nav-links a:not(.nav-cta).active {
    color: #e2e8f0 !important;
  }

  .nav-links a.nav-cta {
    color: #fff !important;
  }

  /* The base bar was built for logo + hamburger only. With the links now
     inline, the 32px gaps and 32px side padding overflow the bar and the
     controls collide with them — tighten everything to fit one row. */
  .navbar .container {
    gap: 10px;
    padding: 0 16px;
  }

  .nav-logo span {
    font-size: 1.05rem;
  }

  /* The base stylesheet pins .nav-controls with position:fixed at this
     breakpoint so it sits beside the hamburger. No hamburger here, so the
     fixed controls landed on top of the Contact pill — return them to flow. */
  .nav-controls {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin-left: 4px;
    gap: 4px;
    flex-shrink: 0;
  }

  .font-btn {
    width: 26px;
    height: 26px;
  }

  .theme-toggle {
    width: 30px;
    height: 30px;
  }
}

/* Narrowest phones cannot fit the three-step font sizer. Collapse it to a
   single "A" that cycles small → default → large (see nav.js) rather than
   dropping the control altogether. */
@media (max-width: 560px) {
  .font-btn-sm,
  .font-btn-lg {
    display: none;
  }

  .font-btn-md {
    font-size: 0.95rem;
  }

  .navbar .container {
    gap: 8px;
    padding: 0 12px;
  }

  .nav-links a {
    font-size: 0.85rem;
    padding: 6px 8px;
  }
}

/* --- Nav links: one shared pill shape ---
   The base stylesheet gives Home a small-radius rectangle (8px 16px,
   weight 500) and Contact a full pill (8px 20px, weight 600), so the two
   read as different components. Match the geometry and make Home the
   outline variant of the filled Contact pill. Home also carried
   rgba(255,255,255,0.85) over the light contact-page hero, which was too
   low-contrast to read — every state below sets an explicit color. */
.nav-links a {
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 600;
  border: 1px solid transparent;
}

/* Home — outline pill over a dark/photographic header */
.nav-links a:not(.nav-cta),
.nav-links a:not(.nav-cta).active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.nav-links a:not(.nav-cta):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.75);
}

/* Home — outline pill once the navbar turns solid on scroll (light mode) */
.navbar.scrolled .nav-links a:not(.nav-cta),
.navbar.scrolled .nav-links a:not(.nav-cta).active {
  color: var(--blue-700);
  background: transparent;
  border-color: var(--blue-500);
  text-shadow: none;
}

.navbar.scrolled .nav-links a:not(.nav-cta):hover {
  color: var(--blue-700);
  background: var(--blue-50);
  border-color: var(--blue-600);
}

/* Home — dark mode. The base turns the scrolled bar dark navy
   (rgba(15,23,41,0.97)), so the navy text above would be invisible there. */
[data-theme="dark"] .navbar.scrolled .nav-links a:not(.nav-cta),
[data-theme="dark"] .navbar.scrolled .nav-links a:not(.nav-cta).active {
  color: #e2e8f0;
  background: transparent;
  border-color: var(--blue-300);
  text-shadow: none;
}

[data-theme="dark"] .navbar.scrolled .nav-links a:not(.nav-cta):hover {
  color: #fff;
  background: rgba(93, 173, 226, 0.18);
  border-color: var(--blue-300);
}

/* --- Hero: "Full Site Coming Soon" badge replaces the two CTA buttons --- */
.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.coming-soon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(93, 173, 226, 0.7);
  animation: coming-soon-pulse 2.4s ease-out infinite;
}

@keyframes coming-soon-pulse {
  70% { box-shadow: 0 0 0 10px rgba(93, 173, 226, 0); }
  100% { box-shadow: 0 0 0 0 rgba(93, 173, 226, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon::before { animation: none; }
}

/* --- CTA banner button: same treatment as the hero "Full Site Coming
       Soon" pill (translucent fill, hairline border, blur), minus the dot. --- */
.cta-banner .btn.btn-primary {
  padding: 0.85rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow: none;
}

.cta-banner .btn.btn-primary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
  box-shadow: none;
}

/* --- Sponsors: single funder, logo on a white card so the NHLBI
       wordmark reads in both light and dark themes --- */
.funder {
  display: flex;
  justify-content: center;
  padding: 1rem 0 0;
}

.funder a {
  display: block;
  padding: 2rem 2.75rem;
  border: 1px solid var(--gray-200, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.funder a:hover,
.funder a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.funder img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

.funder-caption {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--gray-500, #6b7280);
}

@media (max-width: 480px) {
  .funder a { padding: 1.5rem 1.75rem; }
  .funder img { max-width: 240px; }
}

/* --- Contact form status message --- */
.form-status {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-status-pending {
  border-left-color: var(--gray-400, #9ca3af);
  background: rgba(128, 128, 128, 0.08);
}

.form-status-ok {
  border-left-color: #2f855a;
  background: rgba(47, 133, 90, 0.1);
}

.form-status-error {
  border-left-color: #c53030;
  background: rgba(197, 48, 48, 0.1);
}

/* --- Footer: brand blurb + Get in Touch only --- */
.footer .footer-grid {
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
}

@media (max-width: 768px) {
  .footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}