/* =============================================================================
   ConfiDental Education Center — Shared Theme
   -----------------------------------------------------------------------------
   Loaded by every page. Holds the component classes that the Stitch variants
   defined in their inline <style> blocks, de-duplicated into one vocabulary.

   Elevation scale comes from DESIGN.md:
     low  (resting cards)  0 4px 20px  rgba(51,51,51,.05)
     high (modals/hover)   0 12px 32px rgba(51,51,51,.12)
   ========================================================================== */

/* --- Design tokens as CSS custom properties ------------------------------
   Mirrors assets/js/tailwind.config.js so plain CSS (and any future build
   that drops the Tailwind CDN) can reach the same values.                   */
:root {
  /* ===== LIGHT THEME (generated by tools/gen-theme.py) ===== */
  --cec-brand-accent: 240 90 31;  /* logo orange — decorative / large text only, same in both themes */
  --cec-brand-charcoal: 51 51 51;  /* logo wordmark ink */
  --cec-whatsapp: 37 211 102;  /* WhatsApp brand green — same in both themes */
  --cec-on-whatsapp: 11 61 54;  /* label ON the green: 6.10:1. White was 1.98:1 and failed in BOTH themes. */
  --cec-whatsapp-ink: 11 61 54;  /* WhatsApp TEXT LINKS on a page background. The raw brand green is 1.98:1 on white. */
  --cec-primary: 167 52 0;  /* light: 6.70:1 on white. dark: 10.92:1 on the dark surface. */
  --cec-on-primary: 255 255 255;
  --cec-primary-container: 208 68 3;
  --cec-on-primary-container: 255 251 255;
  --cec-primary-fixed: 255 219 208;  /* M3 "fixed" tones are identical in both schemes by definition */
  --cec-primary-fixed-dim: 255 181 156;
  --cec-on-primary-fixed: 57 12 0;
  --cec-on-primary-fixed-variant: 131 39 0;
  --cec-inverse-primary: 255 181 156;
  --cec-surface-tint: 171 53 0;
  --cec-secondary: 95 94 94;  /* body-secondary text: 9.43:1 on the dark surface */
  --cec-on-secondary: 255 255 255;
  --cec-secondary-container: 228 226 225;
  --cec-on-secondary-container: 101 100 100;
  --cec-secondary-fixed: 228 226 225;
  --cec-secondary-fixed-dim: 200 198 198;
  --cec-on-secondary-fixed: 27 28 28;
  --cec-on-secondary-fixed-variant: 71 71 71;
  --cec-tertiary: 92 92 92;
  --cec-on-tertiary: 255 255 255;
  --cec-tertiary-container: 116 116 116;
  --cec-on-tertiary-container: 254 252 252;
  --cec-tertiary-fixed: 227 226 226;
  --cec-tertiary-fixed-dim: 199 198 198;
  --cec-on-tertiary-fixed: 27 28 28;
  --cec-on-tertiary-fixed-variant: 70 71 71;
  --cec-background: 250 249 248;  /* page */
  --cec-on-background: 26 28 28;
  --cec-surface: 250 249 248;
  --cec-on-surface: 26 28 28;  /* body text: 14.41:1 on the dark surface */
  --cec-on-surface-variant: 90 65 57;
  --cec-surface-variant: 227 226 225;
  --cec-surface-dim: 218 218 217;
  --cec-surface-bright: 250 249 248;
  --cec-surface-container-lowest: 255 255 255;  /* raised cards — kept lighter than the page, see note */
  --cec-surface-container-low: 244 243 242;  /* alternating section bands */
  --cec-surface-container: 238 238 237;
  --cec-surface-container-high: 233 232 231;
  --cec-surface-container-highest: 227 226 225;
  --cec-inverse-surface: 47 49 48;
  --cec-inverse-on-surface: 241 240 239;
  --cec-outline: 142 112 103;
  --cec-outline-variant: 226 191 180;
  --cec-error: 186 26 26;
  --cec-on-error: 255 255 255;
  --cec-error-container: 255 218 214;
  --cec-on-error-container: 147 0 10;

  /* --- elevation ------------------------------------------------------ */
  --cec-shadow-low: 0 4px 20px rgba(51, 51, 51, 0.05);
  --cec-shadow-high: 0 12px 32px rgba(51, 51, 51, 0.12);

  /* --- glass / overlays ----------------------------------------------- */
  --cec-glass-bg: rgba(255, 255, 255, 0.7);
  --cec-glass-border: rgba(255, 255, 255, 0.3);
  --cec-underline-opacity: 0.2;

  --cec-header-h: 80px; /* fixed header height — anchor scroll offset */
}

/* ===== DARK THEME ========================================================
   Applied by adding .dark to <html>. The inline script in the page <head>
   does that before first paint so there is no flash of the wrong theme.

   Contrast measured against the dark surface (#17120F):
     body text  #EDE0DA  14.41:1      secondary  #C0B7B2   9.43:1
     primary    #FFB59C  10.92:1      CTA label  #5F1600   7.71:1 on primary
   ====================================================================== */
.dark {
  --cec-brand-accent: 240 90 31;
  --cec-brand-charcoal: 237 224 218;
  --cec-whatsapp: 37 211 102;
  --cec-on-whatsapp: 11 61 54;
  --cec-whatsapp-ink: 93 228 155;
  --cec-primary: 255 181 156;
  --cec-on-primary: 95 22 0;
  --cec-primary-container: 178 58 0;
  --cec-on-primary-container: 255 219 208;
  --cec-primary-fixed: 255 219 208;
  --cec-primary-fixed-dim: 255 181 156;
  --cec-on-primary-fixed: 57 12 0;
  --cec-on-primary-fixed-variant: 131 39 0;
  --cec-inverse-primary: 167 52 0;
  --cec-surface-tint: 255 181 156;
  --cec-secondary: 192 183 178;
  --cec-on-secondary: 47 44 42;
  --cec-secondary-container: 74 68 65;
  --cec-on-secondary-container: 216 207 202;
  --cec-secondary-fixed: 228 226 225;
  --cec-secondary-fixed-dim: 200 198 198;
  --cec-on-secondary-fixed: 27 28 28;
  --cec-on-secondary-fixed-variant: 71 71 71;
  --cec-tertiary: 191 184 180;
  --cec-on-tertiary: 46 42 40;
  --cec-tertiary-container: 74 68 65;
  --cec-on-tertiary-container: 229 220 215;
  --cec-tertiary-fixed: 227 226 226;
  --cec-tertiary-fixed-dim: 199 198 198;
  --cec-on-tertiary-fixed: 27 28 28;
  --cec-on-tertiary-fixed-variant: 70 71 71;
  --cec-background: 23 18 15;
  --cec-on-background: 237 224 218;
  --cec-surface: 23 18 15;
  --cec-on-surface: 237 224 218;
  --cec-on-surface-variant: 216 194 184;
  --cec-surface-variant: 59 50 44;
  --cec-surface-dim: 23 18 15;
  --cec-surface-bright: 62 51 46;
  --cec-surface-container-lowest: 32 26 22;
  --cec-surface-container-low: 30 24 20;
  --cec-surface-container: 38 32 25;
  --cec-surface-container-high: 48 41 35;
  --cec-surface-container-highest: 59 51 44;
  --cec-inverse-surface: 237 224 218;
  --cec-inverse-on-surface: 56 46 41;
  --cec-outline: 160 140 132;
  --cec-outline-variant: 79 66 60;
  --cec-error: 255 180 171;
  --cec-on-error: 105 0 5;
  --cec-error-container: 147 0 10;
  --cec-on-error-container: 255 218 214;

  /* Shadows are near-invisible on a dark ground — depth comes from the
     lighter container tone and the border instead. Kept only as a subtle
     ambient darkening so cards do not look pasted on. */
  --cec-shadow-low: 0 4px 20px rgba(0, 0, 0, 0.35);
  --cec-shadow-high: 0 12px 32px rgba(0, 0, 0, 0.5);

  --cec-glass-bg: rgba(38, 32, 25, 0.72);
  --cec-glass-border: rgba(255, 255, 255, 0.12);
  --cec-underline-opacity: 0.3;
}

/* --- Base ---------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* Stop the fixed header covering anchored section headings */
  scroll-padding-top: calc(var(--cec-header-h) + 24px);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols baseline. `vertical-align` keeps icons aligned with the
   Work Sans x-height when inlined next to label text. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.is-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Accessibility ------------------------------------------------------- */

/* Visible keyboard focus everywhere. The Stitch variants had none. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid rgb(var(--cec-primary));
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 24px;
  background: rgb(var(--cec-primary));
  color: rgb(var(--cec-on-primary));
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Elevation ----------------------------------------------------------- */
.soft-shadow,
.card-shadow {
  box-shadow: var(--cec-shadow-low);
}

.high-shadow {
  box-shadow: var(--cec-shadow-high);
}

.card-shadow-hover {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-shadow-hover:hover {
  box-shadow: var(--cec-shadow-high);
  transform: translateY(-4px);
}

/* --- Surfaces ------------------------------------------------------------ */

/* Light glassmorphism — Editorial hero card, Modern & Bold overlays. */
.glass-card {
  background: var(--cec-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--cec-glass-border);
}

/* Subtle radial wash behind the hero — from Modern & Bold. */
.hero-mesh {
  background-color: rgb(var(--cec-surface));
  background-image:
    radial-gradient(at 0% 0%, rgba(240, 90, 31, 0.05) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(167, 52, 0, 0.05) 0, transparent 50%);
}

/* --- Typographic accents ------------------------------------------------- */

/* Editorial's highlighter swipe under a headline word.
   `isolation` creates a stacking context so the -1 z-index pseudo-element
   sits behind the text but still in front of the section background. */
.editorial-underline {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.editorial-underline::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: rgb(var(--cec-brand-accent));
  opacity: var(--cec-underline-opacity);
  z-index: -1;
}

/* Modern & Bold's gradient headline word. Decorative — always pair with a
   solid-colour sibling so meaning never depends on the gradient alone. */
.text-gradient {
  background: linear-gradient(135deg, rgb(var(--cec-primary)) 0%, rgb(var(--cec-brand-accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgb(var(--cec-primary)); /* fallback where background-clip is unsupported */
}

/* --- Scroll tracks -------------------------------------------------------
   The Stitch variants referenced `.hide-scrollbar` / `.no-scrollbar` but never
   defined either, so their horizontal rails shipped with visible scrollbars.
   Both aliases are kept so transplanted markup keeps working.               */
.no-scrollbar,
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* --- Motion -------------------------------------------------------------- */

/* Scroll-reveal. Elements start hidden ONLY when JS is running and the
   IntersectionObserver is supported — main.js adds `js-reveal-ready` to <html>.
   Without that guard a JS failure would leave the page permanently blank,
   which is how the Editorial variant's observer was written. */
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header,
  .site-fab,
  .no-print {
    display: none !important;
  }
}

/* --- Theme behaviour ------------------------------------------------------
   The page background is painted from the token so the browser chrome (and any
   overscroll area) matches the theme rather than flashing white.             */
html, body {
  background-color: rgb(var(--cec-background));
  color: rgb(var(--cec-on-background));
}

/* Photography is designed for a light page. On a dark ground, full-brightness
   images glare; a slight dim keeps them sitting in the page rather than on it.
   Hovered/opened media returns to full brightness.                            */
.dark img:not([src*="logo"]):not(.no-dim),
.dark video {
  filter: brightness(0.88) contrast(1.02);
}
.dark .group:hover img:not([src*="logo"]):not(.no-dim),
.dark [data-lb-img] {
  filter: none;
}

/* --- Logo, per theme -------------------------------------------------------
   Two real assets, not a CSS filter. The filter approach (brightness(0)
   invert(1)) forced EVERYTHING white, which destroyed the orange brand mark —
   the logo lost its identity in dark mode. The client supplied a proper dark
   variant that keeps the orange and whitens only the "Dental" wordmark.

   Swapped by visibility rather than by changing src, so the browser's
   preloader can fetch both and the switch is instant with no flash. Each is
   ~20-40kb and cached after first paint.

   NOTE the :not() below. The old rule matched img[src*="confidental-logo"],
   which ALSO matches confidental-logo-dark.webp — it would invert the dark
   logo to all-white and defeat the point. Any future logo rule must exclude
   the dark file the same way.                                              */
.logo-dark  { display: none; }
.dark .logo-dark  { display: block; }
.dark .logo-light { display: none; }

/* Favicon and any other logo use that is NOT the themed pair still needs the
   old treatment, since only the header/footer marks are swapped. */
.dark img[src*="confidental-logo"]:not([src*="-dark"]):not(.logo-light):not(.logo-dark) {
  filter: brightness(0) invert(1) opacity(0.92);
}

/* Form controls: the Tailwind forms plugin hardcodes a white field. */
.dark input, .dark select, .dark textarea {
  color-scheme: dark;
}

/* Theme toggle: show the icon for the theme you would switch TO. */
.theme-toggle .icon-dark { display: none; }
.dark .theme-toggle .icon-dark { display: inline; }
.dark .theme-toggle .icon-light { display: none; }
