/* ============================================================
   ESSENCE OF HOPE — Dynamic 2026 Layer
   Truly responsive across Phone → Tablet → Laptop → Desktop → TV
   Truly dynamic: time-of-day, network, motion, hover-capability
   ------------------------------------------------------------
   ADDITIVE: imported AFTER style.css. Never modifies brand tokens.
   Compatible with all 21 pages (no source edits required).
   ============================================================ */

/* === 1. FORM-FACTOR BREAKPOINTS (single source of truth) === */
/*   Phone  :   0 – 479px  (portrait phones)                       */
/*   PhoneL : 480 – 767px  (large phones, phablets, foldables)     */
/*   Tablet : 768 – 1023px (portrait tablets)                      */
/*   TabletL:1024 – 1279px (landscape tablets, small laptops)      */
/*   Laptop :1280 – 1599px                                         */
/*   Desktop:1600 – 1919px                                         */
/*   TV     :1920+   (10-foot UI, distance reading)                  */

/* === 2. SAFE-AREA INSETS (iPhone notch / Android punch-hole) === */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  /* Combined gutters for the safe area */
  --safe-top: max(env(safe-area-inset-top, 0px), 0px);
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
}

/* === 3. DYNAMIC VIEWPORT UNITS (iOS Safari address bar fix) === */
:root {
  /* 1dvh = 1% of the current dynamic viewport height (resizes as address bar shows/hides) */
  --vvh: 1dvh;
  /* 1svh = small viewport (address bar fully visible — fallback for very old browsers) */
  --vsvh: 1svh;
  /* 1lvh = large viewport (address bar fully hidden) */
  --vlvh: 1lvh;
  /* Practical: use dvh for full-screen sections, svh for above-the-fold hero, lvh for footer */
}

/* === 4. FLUID TYPE SCALE (using clamp + container query units) === */
/*   Every text size scales smoothly between phone and TV          */
.fs-display { font-size: clamp(2.4rem, 5.5vw, 4.8rem); line-height: 1.05; }
.fs-h1      { font-size: clamp(2rem, 4.5vw, 4rem);    line-height: 1.08; }
.fs-h2      { font-size: clamp(1.6rem, 3.5vw, 3rem);    line-height: 1.12; }
.fs-h3      { font-size: clamp(1.3rem, 2.4vw, 2rem);    line-height: 1.2;  }
.fs-h4      { font-size: clamp(1.1rem, 1.8vw, 1.5rem);  line-height: 1.3;  }
.fs-lead    { font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.55; }
.fs-body    { font-size: clamp(0.95rem, 1.1vw, 1.125rem); line-height: 1.65; }
.fs-small   { font-size: clamp(0.85rem, 0.95vw, 1rem);  line-height: 1.5; }
.fs-eyebrow { font-size: clamp(0.68rem, 0.75vw, 0.8rem); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; }

/* === 5. TOUCH TARGET ENFORCEMENT (Apple HIG 44px / Material 48px) === */
button, a, [role="button"], input, select, textarea, label.tap {
  min-height: 44px;
}
@media (pointer: coarse) {
  button, a, [role="button"] { min-height: 48px; }
}
/* Inline links should not inherit the 44px — only tap targets */
a { min-height: 0; }
a.tap { min-height: 44px; display: inline-flex; align-items: center; }

/* === 6. HOVER / POINTER CAPABILITY === */
@media (hover: none) {
  /* Touch-only devices: kill hover-only effects */
  .hover-only,
  [data-hover-only] { display: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  /* Real pointer (mouse/trackpad): allow hover but no touch-only */
  .no-touch-only { display: none !important; }
}

/* === 7. CONTAINER QUERIES (components respond to their own size) === */
/*   Apply container-type to a parent; children can use cqi/cqb    */
.container-fluid { container-type: inline-size; container-name: fluid; }
.container-padded { container-type: inline-size; container-name: padded; padding: var(--gutter); }

/* Generic 2-col → 1-col pattern via container query */
@container (min-width: 700px) {
  .cq-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4cqi, 64px); align-items: center; }
  .cq-2col > * { min-width: 0; }
}
@container (max-width: 699px) {
  .cq-2col { display: flex; flex-direction: column; gap: clamp(24px, 4cqi, 48px); }
}

/* 3-col → 2-col → 1-col pattern */
@container (min-width: 900px) {
  .cq-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5cqi, 40px); }
}
@container (min-width: 560px) and (max-width: 899px) {
  .cq-3col { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.5cqi, 40px); }
}
@container (max-width: 559px) {
  .cq-3col { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.5cqi, 40px); }
}

/* === 8. REDUCED MOTION (vestibular accessibility) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* But preserve opacity transitions for state changes */
  [data-allow-motion] { transition: opacity 200ms !important; }
}

/* === 9. REDUCED DATA (low-bandwidth) === */
@media (prefers-reduced-data: reduce) {
  .auto-play-video { display: none; }
  .decorative-anim { display: none; }
  .heavy-bg { display: none; }
  /* Replace high-res hero with CSS gradient */
  .hero[data-lazy-bg] { background: linear-gradient(135deg, var(--cream) 0%, var(--cream-soft) 100%); }
}

/* === 10. TIME-OF-DAY THEMING (subtle warm/cool shifts) === */
:root {
  --warmth: 1; /* multiplier; 1 = no shift */
  --saturation: 1;
  --brightness: 1;
}
:root[data-tod="dawn"]  { --warmth: 1.04; --brightness: 1.02; }   /* warmer, brighter */
:root[data-tod="day"]   { --warmth: 1.0;  --brightness: 1.0;  }
:root[data-tod="dusk"]  { --warmth: 0.98; --saturation: 0.96; } /* slightly cooler */
:root[data-tod="night"] { --warmth: 0.94; --saturation: 0.88; --brightness: 0.96; }

/* Apply warmth via filter (cheap, no rebuild) */
body { background: hsl(from var(--cream) calc(h + 4 * var(--warmth)) calc(s * var(--saturation)) calc(l * var(--brightness))); }
@supports not (background: hsl(from var(--cream) h s l)) {
  /* Old browsers: no-op fallback */
  body { background: var(--cream); }
}

/* === 11. PREFERS-COLOR-SCHEME (system dark mode — opt-in) === */
/* EoH brand is intentionally warm/light; we do NOT auto-darken.
   We DO offer an opt-in via [data-theme="dark"] on <html> for power users. */
@media (prefers-color-scheme: dark) {
  /* By default: ignore system dark mode (brand is light) */
  :root { color-scheme: light; }
}
/* If user explicitly opts in via [data-theme="dark"] */
:root[data-theme="dark"] {
  --cream:       #14110C;
  --cream-soft:  #1A1610;
  --cream-deep:  #221C13;
  --ivory:       #0E0B07;
  --bone:        #2A2418;
  --forest:      #C5DCC8;
  --forest-2:    #C0B090;
  --sage:        #8FA38F;
  --moss:        #A4B0A0;
  --ink:         #F2EBDD;
  --ink-2:       #D8D0C0;
  --muted:       #9A9080;
  --muted-2:     #7A7060;
  --line:        rgba(242,235,221,0.12);
  --line-light:  rgba(242,235,221,0.08);
  --gold:        #D4B888;
  --gold-light:  #E0C8A0;
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--cream); color: var(--ink); }
:root[data-theme="dark"] .nav { background: rgba(20, 17, 12, 0.92); }
:root[data-theme="dark"] .nav__link { color: var(--ink); }
:root[data-theme="dark"] .btn-nav { background: var(--gold); color: var(--cream); }

/* === 12. TV MODE (10-foot UI, auto-detected) === */
/*   Trigger: ≥1920×1080 with coarse pointer (TV remote)            */
@media (min-width: 1920px) and (min-height: 1080px) and (pointer: coarse) {
  :root { font-size: 18px; } /* base scale up */
  .container,
  .container-wide { max-width: 90vw; }
  button, a, [role="button"], input, select, textarea {
    min-height: 64px;
    font-size: 1.1em;
  }
  /* Larger focus rings for remote control navigation */
  :focus-visible {
    outline: 4px solid var(--gold);
    outline-offset: 4px;
  }
  /* Disable hover (TV remotes don't hover) */
  *, *::before, *::after { transition: none !important; }
  /* Bigger hero h1 */
  h1 { font-size: clamp(3rem, 6vw, 6rem); }
  /* More spacing between sections */
  .section { padding: 120px 0; }
}
/* Manual TV mode toggle */
:root[data-tv="1"] {
  font-size: 18px;
  --gutter: clamp(40px, 6vw, 80px);
}
:root[data-tv="1"] button,
:root[data-tv="1"] a,
:root[data-tv="1"] [role="button"] { min-height: 64px; }
:root[data-tv="1"] :focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
:root[data-tv="1"] *, :root[data-tv="1"] *::before, :root[data-tv="1"] *::after { transition: none !important; }

/* === 13. WIDE-GAMUT / HDR (Apple Display XDR, Dolby Vision) === */
@media (dynamic-range: high) {
  :root {
    --gold: oklch(75% 0.12 75);
    --gold-light: oklch(82% 0.10 75);
    --forest: oklch(28% 0.05 150);
  }
}

/* === 14. FORM-FACTOR-SPECIFIC TOUCH-UPS === */
/* Foldables: protect against split-screen mode */
@media (spanning: single-fold-vertical) {
  .nav, .footer { padding-left: max(var(--gutter), env(fold-left, 0px)); padding-right: max(var(--gutter), env(fold-right, 0px)); }
}

/* Ultra-wide (21:9, 32:9) */
@media (min-aspect-ratio: 21/9) {
  .hero__content, .container { max-width: 80vw; }
}

/* === 15. CLS PREVENTION === */
/* Default aspect ratio for hero / media containers */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-ultrawide { aspect-ratio: 21 / 9; }

/* Reserve space for dynamically-loaded images */
img[width][height] { height: auto; }
img:not([width]):not([height]) { aspect-ratio: 16 / 9; }

/* === 16. INP OPTIMIZATION (yield to main thread) === */
@media (prefers-reduced-data: reduce) {
  [data-heavy-anim] { animation: none !important; }
}

/* === 17. FOCUS VISIBLE (a11y) === */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* === 18. PRINT (bonus) === */
@media print {
  .nav, .footer, .hero__cta, .nav__burger, .mobile-menu { display: none !important; }
  body { background: white; color: black; font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* === 19. DYNAMIC UTILITIES (use on any element) === */
.dynamic-height { min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px); }
.dynamic-hero    { min-height: 100vh; min-height: 100dvh; }
.dynamic-bottom { padding-bottom: env(safe-area-inset-bottom); }
.dynamic-top    { padding-top: env(safe-area-inset-top); }
.dynamic-pad-x  { padding-left:  env(safe-area-inset-left);  padding-right:  env(safe-area-inset-right); }
.dynamic-pad-y  { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.dynamic-pad    { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }