/* common-sense-banner-2026-09-16
   KEEP DRAFT · HOLD LIVE until Clay preview+GO
   Phone ~390px: full crest+wordmark; stacked brand-sub; compact Login/Sign up (±Schedule);
   no orphan second white bar; hide search / Patient education / Donate on phone banner.
   Desktop: leave nav intact.
   Supersedes/extends header-orphan-punch phone clip (do NOT overflow:hidden the brand).
*/

:root {
  --cs-orange: #F05424;
  --cs-navy: #243090;
}

/* --- Brand stack: primary wordmark + secondary line --- */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible; /* NEVER clip CureRays wordmark */
  text-decoration: none;
}
.site-header .brand .logo-mark {
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}
.site-header .brand .brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  line-height: 1.05;
}
.site-header .brand .wordmark {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  line-height: 1;
}
.site-header .brand .brand-sub {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-navy, #243090);
  opacity: .78;
  margin-top: 3px;
  white-space: nowrap;
  line-height: 1.1;
}

/* CSS-only fallback when HTML brand-sub not yet remounted:
   Institute → "Institute"; clinic www → "Radiation Medicine" */
.site-header:has(.site-ribbon--institute) .brand .wordmark:not(:has(+ .brand-sub))::after,
.site-header:has(.site-ribbon--institute) .brand .brand-text .wordmark:not(:has(+ .brand-sub))::after {
  content: "Institute";
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-navy, #243090);
  opacity: .78;
  margin-top: 3px;
  line-height: 1.1;
}
.site-header:has(.site-ribbon--clinic) .brand .wordmark:not(:has(+ .brand-sub))::after,
.site-header:has(.site-ribbon--clinic) .brand .brand-text .wordmark:not(:has(+ .brand-sub))::after {
  content: "Radiation Medicine";
  display: block;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cs-navy, #243090);
  opacity: .78;
  margin-top: 3px;
  line-height: 1.1;
}
/* If HTML brand-sub present, suppress ::after duplicate */
.site-header .brand .wordmark:has(+ .brand-sub)::after {
  content: none !important;
  display: none !important;
}

/* ========== PHONE (~390px / up to 760) ========== */
@media (max-width: 760px) {
  .site-header .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 56px;
    height: auto !important;
    max-height: none; /* allow stacked brand; still ONE nav row of CTAs */
    overflow: visible !important;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Crest + wordmark fully visible; ≥8px clear from CTAs — brand never shrinks away */
  .site-header .brand {
    flex: 0 0 auto;
    min-width: 0;
    max-width: calc(100% - 168px); /* reserve ~Login+Signup+hamburger */
    overflow: visible !important;
    margin-right: 8px; /* ≥8px clear */
    gap: 6px;
  }
  .site-header .brand .brand-sub {
    font-size: .55rem;
    letter-spacing: .04em;
    max-width: 11.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header .brand .logo-mark {
    width: 34px !important;
    height: 34px !important;
  }
  .site-header .brand {
    font-size: 1.05rem !important;
  }
  .site-header .brand .wordmark {
    font-size: 1.05rem;
    max-width: none;
    text-overflow: clip;
  }

  .site-header .nav-toggle {
    order: 2;
    flex: 0 0 auto;
    font-size: 1.35rem !important;
    padding: 4px 2px;
    min-width: 36px;
    min-height: 44px;
  }

  .site-header .nav-cta {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto;
    margin-left: auto;
    order: 3;
    overflow: visible !important;
  }

  /* Kill orphan wrap row: search / patient-ed / donate leave phone banner.
     Donate remains on-page (Support the mission). Search stays in menu. */
  .site-header .nav-cta .nav-search,
  .site-header .nav-cta a[href="/teach-me"],
  .site-header .nav-cta a[href="/philanthropy"],
  .site-header .nav-cta a[href*="teach-me"],
  .site-header .nav-cta a[href*="philanthropy"],
  .site-header .nav-cta a[href="#signup"],
  .site-header .nav-cta .nav-social,
  .site-header .nav-cta .social-icons {
    display: none !important;
  }

  /* Compact Login / Sign up — height ≥44px, narrow width */
  .site-header .nav-cta #header-login,
  .site-header .nav-cta a#header-login,
  .site-header .nav-cta .btn--outline#header-login {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    white-space: nowrap;
    width: auto !important;
    max-width: none;
  }
  .site-header .nav-cta #header-signup,
  .site-header .nav-cta a#header-signup,
  .site-header .nav-cta .btn--primary#header-signup {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    white-space: nowrap;
    width: auto !important;
  }

  /* www Schedule — compact when space allows; hide on ~390 phone so logo never clips.
     Schedule remains on-page (hero / booking CTAs) and in hamburger nav. */
  .site-header .nav-cta a[href="/booking"],
  .site-header .nav-cta a.btn[href*="booking"] {
    display: none !important;
  }

  @media (min-width: 431px) and (max-width: 760px) {
    .site-header .nav-cta a[href="/booking"],
    .site-header .nav-cta a.btn[href*="booking"] {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-height: 44px !important;
      height: 44px !important;
      padding: 0 8px !important;
      font-size: .72rem !important;
      white-space: nowrap;
    }
  }

  @media (max-width: 400px) {
    .site-header .brand .logo-mark {
      width: 30px !important;
      height: 30px !important;
    }
    .site-header .brand { font-size: .98rem !important; }
    .site-header .nav-cta #header-login,
    .site-header .nav-cta #header-signup,
    .site-header .nav-cta a#header-login,
    .site-header .nav-cta a#header-signup {
      padding: 0 8px !important;
      font-size: .74rem !important;
    }
  }
}

/* ========== DESKTOP — do not break nav ========== */
@media (min-width: 761px) {
  .site-header .brand .brand-sub {
    font-size: .68rem;
  }
  /* ::after secondary only needed on phone crowding; keep subtle on desktop OK */
  .site-header .nav {
    overflow: visible;
  }
  .site-header .brand {
    overflow: visible;
  }
}

/* ---- COMMON-SENSE-001 ~07:13 PT: hide duplicate ---- */
.site-header .nav-cta:has(#header-signup) a.btn[href="#signup"],
.site-header .nav-cta:has(a#header-signup) a[href="#signup"] {
  display: none !important;
}