/* ============================================================
   SPECTRUM BRAND SYSTEM 2026 — GLOBAL DESIGN TOKENS (LOCKED)
   Single source of truth: spectrum-modernisation-master-guide-2026.md
   Do not change these values without leadership sign-off.
   ============================================================ */

:root {
  /* ---- Colour palette (locked) ---- */
  --spectrum-ink: #0E1B1A;        /* Primary dark background — near-black charcoal, teal undertone */
  --spectrum-ink-lift: #122220;   /* Slightly lifted panel/section variant of Spectrum Ink */
  --spectrum-card: #1A2726;       /* Card surface on dark */
  --spectrum-teal: #0D9488;       /* Refined teal — accents, CTAs, links (dark mode) */
  --spectrum-teal-hover: #0F766E; /* Teal hover/active state */
  --spectrum-teal-bright: #14B8A6;/* Teal for small text links on dark (higher contrast) */
  --spectrum-white: #FFFFFF;      /* Headlines on dark */
  --spectrum-body-on-dark: rgba(255, 255, 255, 0.87); /* High-contrast off-white body text */
  --spectrum-charcoal: #1F2A2A;   /* Text on light master (premium neutral, teal undertone) */

  /* ---- Prism gradient (derived from the authentic logo rainbow) ----
     Used SPARINGLY as an accent: section-heading underlines, card hover
     top-bars, portrait rings. Never as a background wash — the brand
     rule is that Spectrum Ink stays chromatically quiet so the prism
     in the logo remains the hero. */
  --prism: linear-gradient(90deg, #f6eb16 0%, #f0681e 16%, #ed1c24 34%,
                                  #d6219c 52%, #7b5bd6 70%, #2f9de2 86%, #35b56a 100%);

  /* ---- Logo sizing hierarchy (locked — July 2026) ---- */
  --logo-hero-desktop: 220px;     /* Homepage hero logo — dominant brand statement */
  --logo-hero-mobile: 170px;      /* Within the locked 160–180px mobile range */
  --logo-nav-desktop: 56px;       /* Header logo — confident but secondary to hero */
  --logo-nav-mobile: 44px;
}

/* ---- Typography (locked — decision July 2026) ----
   Wordmark: Frutiger — lives ONLY inside the logo SVGs (converted to
   outlines). No Frutiger webfont is used on the site.
   All display, headline and body type: Inter — pairs cleanly with the
   outlined wordmark and reads beautifully on screen. */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  background-color: var(--spectrum-ink);
  color: var(--spectrum-body-on-dark);
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* ---- Logo sizing helpers (use these classes, never inline sizes) ---- */
.logo-nav  { height: var(--logo-nav-mobile); width: auto; }
.logo-hero {
  height: var(--logo-hero-mobile);
  width: auto;
  /* Guard for very narrow screens: never overflow, never distort */
  max-width: 100%;
  object-fit: contain;
}


/* Standalone width-capped figures centre in their column — a single
   left-hugging photo above full-width content reads as a formatting
   mistake (Dr Schlaphoff, July 2026). Grid/flex-cell figures are
   unaffected (auto margins centre within the cell). */
figure[class*="max-w-"] { margin-left: auto; margin-right: auto; }

@media (min-width: 768px) {
  .logo-nav  { height: var(--logo-nav-desktop); }
  .logo-hero { height: var(--logo-hero-desktop); }
}

/* ---- Shared component styles ---- */

/* Prism underline flourish beneath section headings — a quiet splash of
   the logo rainbow that ties every page back to the brand mark */
.section-heading::after {
  content: '';
  display: block;
  margin-top: 12px;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--prism);
}

/* Elevated card hover — used on news/procedure/location/team cards.
   On hover, a thin prism bar glows across the top edge. */
.premium-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}
.premium-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--prism);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.premium-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.35), 0 8px 10px -6px rgb(0 0 0 / 0.3);
  border-color: rgba(13, 148, 136, 0.35);
}
.premium-card:hover::after { opacity: 1; }

/* Team portraits — subtle prism ring appears on hover */
.portrait-frame {
  position: relative;
  border-radius: 1.25rem;
  padding: 3px;
  background: transparent;
  transition: background 0.25s ease;
}
.premium-card:hover .portrait-frame, .portrait-frame:hover { background: var(--prism); }
.portrait-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 1.1rem;
}

/* Monogram placeholder for team members awaiting photography */
.portrait-initials {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(160deg, #1A2726 0%, #14211f 60%, #16302c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hero background — Spectrum Ink with a barely-perceptible lift toward the fold */
.hero-bg {
  background: linear-gradient(180deg, var(--spectrum-ink) 0%, var(--spectrum-ink-lift) 100%);
}

/* Gentle entrance reveal (progressive enhancement).
   Hidden state only applies when the <html class="js"> flag is set by
   JavaScript — so content is always visible if JS is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .premium-card, .premium-card:hover { transition: none; transform: none; }
}

/* Visible keyboard focus for accessibility (WCAG AA) */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--spectrum-teal-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Site search (Pagefind UI) — dark theme on brand tokens ---- */
#search-ui {
  --pagefind-ui-scale: 0.92;
  --pagefind-ui-primary: #14B8A6;
  --pagefind-ui-text: rgba(255, 255, 255, 0.85);
  --pagefind-ui-background: #0E1B1A;
  --pagefind-ui-border: rgba(255, 255, 255, 0.12);
  --pagefind-ui-tag: #1A2726;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 12px;
  --pagefind-ui-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
#search-ui .pagefind-ui__result-link { color: #14B8A6; }
#search-ui .pagefind-ui__result-link:hover { color: #ffffff; }
#search-ui .pagefind-ui__message,
#search-ui .pagefind-ui__result-excerpt { color: rgba(255, 255, 255, 0.7); }
#search-ui mark { background: rgba(20, 184, 166, 0.28); color: #ffffff; border-radius: 3px; padding: 0 2px; }
#search-ui .pagefind-ui__search-clear { color: rgba(255, 255, 255, 0.6); }

/* ---- Weekly Focus spotlight (rotating homepage feature) ----
   Prism gradient border + a gentle float that invites the click. */
.focus-card {
  border: 1px solid transparent;
  background: linear-gradient(#122220, #122220) padding-box, var(--prism) border-box;
  animation: focus-float 7s ease-in-out infinite;
  transition: box-shadow 0.3s ease;
}
.focus-card:hover { box-shadow: 0 14px 44px rgba(20, 184, 166, 0.16); }
@keyframes focus-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .focus-card { animation: none; }
}

/* ═══════════ DAYLIGHT MODE (html.light) ═══════════
   Content sections switch to light reading surfaces; the nav, hero
   sections (.hero-bg), footers and the search overlay stay Spectrum Ink
   ("dark sandwich") — so logos, hero videos and clinical imagery are
   untouched. Activated automatically from the visitor's device setting,
   or manually via the sun/moon toggle (remembered in localStorage). */

html { color-scheme: dark; }
html.light { color-scheme: light; }
html.light body { background-color: #F5F8F7; color: #12211F; } /* body carries text-white — headings inherit */
html.light footer { background-color: #0E1B1A; color: #FFFFFF; } /* footer stays Ink (white logo, light text classes) */
html.light header { color: #FFFFFF; } /* nav stays Ink — text lockups keep white inherited text */
html.light .hero-bg, html.light #search-overlay { color: #FFFFFF; } /* dark islands keep white inherited text */

/* toggle icons */
.icon-moon { display: none; }
html.light .icon-sun { display: none; }
html.light .icon-moon { display: block; }

/* ---- light content scope: direct children of <main> except heroes ---- */
html.light main > .bg-\[\#122220\],
html.light main > :not(.hero-bg) .bg-\[\#122220\] { background-color: #E8EFED; }
html.light main > :not(.hero-bg) .bg-\[\#0E1B1A\] { background-color: #F5F8F7; }
html.light main > :not(.hero-bg) .bg-\[\#1A2726\] { background-color: #FFFFFF; }
html.light main > :not(.hero-bg) .bg-\[\#1A2726\]\/80 { background-color: rgba(255,255,255,0.88); }
html.light main > :not(.hero-bg) .bg-white\/5,
html.light main > :not(.hero-bg) .bg-white\/\[0\.03\],
html.light main > :not(.hero-bg) .bg-white\/\[0\.06\] { background-color: rgba(18,33,31,0.05); }

html.light main > :not(.hero-bg) .text-white { color: #12211F; }
html.light main > :not(.hero-bg) .text-white\/95 { color: rgba(18,33,31,0.95); }
html.light main > :not(.hero-bg) .text-white\/90 { color: rgba(18,33,31,0.88); }
html.light main > :not(.hero-bg) .text-white\/85 { color: rgba(18,33,31,0.82); }
html.light main > :not(.hero-bg) .text-white\/80 { color: rgba(18,33,31,0.78); }
html.light main > :not(.hero-bg) .text-white\/75 { color: rgba(18,33,31,0.72); }
html.light main > :not(.hero-bg) .text-white\/70 { color: rgba(18,33,31,0.66); }
html.light main > :not(.hero-bg) .text-white\/65 { color: rgba(18,33,31,0.62); }
html.light main > :not(.hero-bg) .text-white\/60 { color: rgba(18,33,31,0.58); }
html.light main > :not(.hero-bg) .text-white\/55 { color: rgba(18,33,31,0.55); }
html.light main > :not(.hero-bg) .text-white\/50 { color: rgba(18,33,31,0.52); }
html.light main > :not(.hero-bg) .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(18,33,31,0.12); }
html.light main > :not(.hero-bg) .text-white\/40 { color: rgba(18,33,31,0.45); }

html.light main > :not(.hero-bg) .border-white\/5 { border-color: rgba(18,33,31,0.08); }
html.light main > :not(.hero-bg) .border-white\/10 { border-color: rgba(18,33,31,0.12); }
html.light main > :not(.hero-bg) .border-white\/15 { border-color: rgba(18,33,31,0.16); }
html.light main > :not(.hero-bg) .border-white\/20 { border-color: rgba(18,33,31,0.22); }
html.light main > :not(.hero-bg) .border-white\/25 { border-color: rgba(18,33,31,0.28); }
html.light main > :not(.hero-bg) .decoration-white\/20 { text-decoration-color: rgba(18,33,31,0.25); }

/* accents deepen for contrast on paper */
html.light main > :not(.hero-bg) .text-\[\#14B8A6\] { color: #0B7A6E; }
html.light main > :not(.hero-bg) .text-\[\#FF8A4C\] { color: #C2410C; }
html.light main > :not(.hero-bg) .hover\:text-white:hover { color: #0E1B1A; }
html.light main > :not(.hero-bg) .hover\:text-\[\#14B8A6\]:hover { color: #0B7A6E; }
html.light main > :not(.hero-bg) .hover\:text-\[\#FF8A4C\]:hover { color: #C2410C; }
html.light main > :not(.hero-bg) .border-\[\#14B8A6\] { border-color: #0F766E; }
html.light main > :not(.hero-bg) .border-\[\#14B8A6\]\/50 { border-color: rgba(15,118,110,0.55); }
html.light main > :not(.hero-bg) .border-\[\#14B8A6\]\/40 { border-color: rgba(15,118,110,0.45); }
html.light main > :not(.hero-bg) .border-\[\#FF8A4C\] { border-color: #EA580C; }
html.light main > :not(.hero-bg) .border-\[\#FF8A4C\]\/60 { border-color: rgba(234,88,12,0.60); }
html.light main > :not(.hero-bg) .border-\[\#FF8A4C\]\/40 { border-color: rgba(234,88,12,0.45); }
html.light main > :not(.hero-bg) .border-\[\#FF8A4C\]\/30 { border-color: rgba(234,88,12,0.35); }
html.light main > :not(.hero-bg) .hover\:border-\[\#14B8A6\]:hover { border-color: #0F766E; }
html.light main > :not(.hero-bg) .hover\:border-\[\#14B8A6\]\/60:hover { border-color: rgba(15,118,110,0.6); }
html.light main > :not(.hero-bg) .hover\:border-\[\#FF8A4C\]:hover { border-color: #EA580C; }
html.light main > :not(.hero-bg) .hover\:border-\[\#FF8A4C\]\/60:hover { border-color: rgba(234,88,12,0.6); }
html.light main > :not(.hero-bg) .decoration-\[\#14B8A6\]\/40 { text-decoration-color: rgba(15,118,110,0.5); }
html.light main > :not(.hero-bg) .decoration-\[\#14B8A6\]\/50 { text-decoration-color: rgba(15,118,110,0.55); }
html.light main > :not(.hero-bg) .decoration-\[\#FF8A4C\]\/40 { text-decoration-color: rgba(234,88,12,0.5); }

/* soften big dark shadows on light surfaces */
html.light main > :not(.hero-bg) [class*="shadow-black"] { box-shadow: 0 12px 32px rgba(14,27,26,0.12); }
html.light main > :not(.hero-bg) .premium-card { box-shadow: 0 8px 26px rgba(14,27,26,0.08); }

/* focus spotlight: white face, prism ring preserved */
html.light main > :not(.hero-bg) .focus-card,
html.light .focus-card {
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--prism) border-box;
}

/* Audience bar adds ~36px to the sticky header — push anchor targets down */
.scroll-mt-28 { scroll-margin-top: 9.5rem !important; }