/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0
*/

/* ============================================================
   THE UNALOME PROJECT — Child Theme Stylesheet
   The Void UI System v2.1

   ARCHITECTURE:
   This file is Layer 2 of 4. It loads at priority 1000,
   after unalome-minimal.css (priority 999).

   What lives here:
   — Site-wide utility classes (.up-*)
   — Shared interactive components used across all pages
   — Pseudo-element quarantine for Elementor pages
   — Page-level animation utilities
   — Workshop body-class scaffolding (populated as built)

   What does NOT live here:
   — :root tokens          → unalome-minimal.css
   — body, h1–h6, p, a     → unalome-minimal.css
   — Grain overlay         → unalome-minimal.css
   — Per-widget styles     → Elementor Style tab
   — Per-page overrides    → Elementor Custom CSS field

   !important is permitted ONLY when overriding Elementor
   inline widget styles. Never on global selectors.
============================================================ */


/* ============================================================
   1. TYPOGRAPHY UTILITIES
   Applied via Elementor Advanced > CSS Classes.
   These are the 5 named registers of the type system.
   Use these instead of hardcoding fonts in widgets.
============================================================ */

/* Headline register — Gloock, once per page */
.up-headline,
.up-headline .elementor-heading-title,
.up-headline .elementor-widget-container {
  font-family: 'Gloock', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

/* Prose register — Source Serif 4 Light */
.up-prose,
.up-prose .elementor-widget-container,
.up-prose .elementor-widget-container p {
  font-family: 'Source Serif 4', serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.01em !important;
}

/* Interface register — Inter, all UI chrome */
.up-ui,
.up-ui .elementor-widget-container,
.up-ui .elementor-widget-container p,
.up-ui .elementor-widget-container span {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0em !important;
}

/* Metadata register — JetBrains Mono */
.up-mono,
.up-mono .elementor-widget-container,
.up-mono .elementor-widget-container p,
.up-mono .elementor-widget-container span {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.6rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* Sanskrit / Devanāgarī register */
.up-devanagari,
.up-devanagari .elementor-widget-container,
.up-devanagari .elementor-widget-container p,
.up-devanagari .elementor-widget-container span {
  font-family: 'Noto Sans Devanagari', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Eyebrow — Inter, spaced caps, muted */
.up-eyebrow,
.up-eyebrow .elementor-widget-container,
.up-eyebrow .elementor-widget-container p {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

/* Pull quote — Gloock italic, left Teal accent */
.up-pullquote,
.up-pullquote .elementor-widget-container,
.up-pullquote .elementor-widget-container p {
  font-family: 'Gloock', serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  border-left: 1.5px solid var(--color-teal) !important;
  padding-left: 24px !important;
  color: var(--color-primary) !important;
}


/* ============================================================
   2. COLOUR UTILITIES
   Single-purpose classes for the 4 text colours.
============================================================ */

.up-color-primary  { color: var(--color-primary)  !important; }
.up-color-muted    { color: var(--color-muted)     !important; }
.up-color-teal     { color: var(--color-teal)      !important; }
.up-color-red      { color: var(--color-red)       !important; }
.up-color-dim      { color: var(--color-dim)       !important; }


/* ============================================================
   3. SURFACE UTILITIES
   Background surface steps — applied to Elementor
   sections or containers via CSS Classes field.
============================================================ */

.up-surface-void    { background-color: var(--surface-void)    !important; }
.up-surface-page    { background-color: var(--surface-page)    !important; }
.up-surface-card    { background-color: var(--surface-card)    !important; }
.up-surface-panel   { background-color: var(--surface-panel)   !important; }
.up-surface-hover   { background-color: var(--surface-hover)   !important; }


/* ============================================================
   4. LAYOUT UTILITIES
============================================================ */

/* Content width — 60% of viewport, left-anchored */
.up-content-width {
  max-width: 680px;
  width: 100%;
}

/* Narrow — for forms, single-column reads */
.up-content-narrow {
  max-width: 420px;
  width: 100%;
}

/* Wide — for pull quotes, full-bleed text blocks */
.up-content-wide {
  max-width: 860px;
  width: 100%;
}

/* Force left alignment — overrides Elementor center defaults */
.up-left,
.up-left .elementor-widget-container {
  text-align: left !important;
}

/* Center — hero and pull-quote only */
.up-center,
.up-center .elementor-widget-container {
  text-align: center !important;
}


/* ============================================================
   5. SPACING UTILITIES
   Vertical rhythm in multiples of the 8px base unit.
============================================================ */

.up-mt-0  { margin-top: 0      !important; }
.up-mt-1  { margin-top: 8px    !important; }
.up-mt-2  { margin-top: 16px   !important; }
.up-mt-3  { margin-top: 24px   !important; }
.up-mt-4  { margin-top: 32px   !important; }
.up-mt-6  { margin-top: 48px   !important; }
.up-mt-8  { margin-top: 64px   !important; }
.up-mt-12 { margin-top: 96px   !important; }
.up-mt-16 { margin-top: 128px  !important; }

.up-mb-0  { margin-bottom: 0      !important; }
.up-mb-1  { margin-bottom: 8px    !important; }
.up-mb-2  { margin-bottom: 16px   !important; }
.up-mb-3  { margin-bottom: 24px   !important; }
.up-mb-4  { margin-bottom: 32px   !important; }
.up-mb-6  { margin-bottom: 48px   !important; }
.up-mb-8  { margin-bottom: 64px   !important; }
.up-mb-12 { margin-bottom: 96px   !important; }
.up-mb-16 { margin-bottom: 128px  !important; }


/* ============================================================
   6. SCROLL REVEAL
   Add .up-reveal to any element in Elementor's CSS Classes
   field. The JS in WPCode triggers .is-visible on scroll.
============================================================ */

.up-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   var(--dur-fade) var(--ease-out),
    transform var(--dur-fade) var(--ease-out);
}

.up-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — add to siblings inside a reveal container */
.up-reveal[data-delay="80"]   { transition-delay: 80ms;   }
.up-reveal[data-delay="160"]  { transition-delay: 160ms;  }
.up-reveal[data-delay="240"]  { transition-delay: 240ms;  }
.up-reveal[data-delay="320"]  { transition-delay: 320ms;  }
.up-reveal[data-delay="400"]  { transition-delay: 400ms;  }
.up-reveal[data-delay="480"]  { transition-delay: 480ms;  }
.up-reveal[data-delay="560"]  { transition-delay: 560ms;  }
.up-reveal[data-delay="640"]  { transition-delay: 640ms;  }
.up-reveal[data-delay="800"]  { transition-delay: 800ms;  }
.up-reveal[data-delay="1000"] { transition-delay: 1000ms; }


/* ============================================================
   7. INTERACTIVE COMPONENTS
   Shared across all pages and workshops.
============================================================ */

/* --- Teal hairline divider --- */
.up-hairline {
  width: 100%;
  height: 0.5px;
  background-color: var(--border-dim);
  border: none;
  margin: 0;
}

/* --- Teal pulse dot --- */
.up-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-teal);
  display: inline-block;
  animation: upPulse 4s ease-in-out infinite;
}

@keyframes upPulse {
  0%   { opacity: 0.3; transform: scale(1);   }
  50%  { opacity: 1;   transform: scale(1.4); }
  100% { opacity: 0.3; transform: scale(1);   }
}

/* --- Spine nodes (progress spines, all workshops) --- */
.up-spine-tonight {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-teal);
  background: transparent;
  animation: upRingBreath 4s ease-in-out infinite;
  display: inline-block;
}

@keyframes upRingBreath {
  0%   { box-shadow: 0 0 0 0px rgba(68, 216, 204, 0.4); }
  50%  { box-shadow: 0 0 0 6px rgba(68, 216, 204, 0);   }
  100% { box-shadow: 0 0 0 0px rgba(68, 216, 204, 0.4); }
}

.up-spine-complete {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-teal);
  display: inline-block;
}

.up-spine-locked {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--surface-mid);
  display: inline-block;
}

/* --- Reflection journal textarea --- */
.up-journal-textarea {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  font-family: 'Source Serif 4', serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
  min-height: 120px !important;
  resize: vertical !important;
  padding: 16px 0 !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid var(--border-dim) !important;
}

.up-journal-textarea::placeholder {
  color: var(--border-dim) !important;
  font-style: italic !important;
}

/* --- Mark complete button --- */
.up-complete-btn {
  background-color: var(--surface-card);
  color: var(--color-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 0.5px solid var(--border-dim);
  padding: 12px 24px;
  cursor: pointer;
  transition: all 400ms var(--ease-out);
  display: inline-block;
}

.up-complete-btn:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.up-complete-btn.is-complete {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-primary);
  cursor: default;
}

/* Elementor button widget variant */
.up-complete-btn.elementor-button {
  background-color: var(--surface-card) !important;
  color: var(--color-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border: 0.5px solid var(--border-dim) !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  transition: all 400ms var(--ease-out) !important;
  box-shadow: none !important;
}

.up-complete-btn.elementor-button:hover {
  border-color: var(--color-teal) !important;
  color: var(--color-teal) !important;
}

.up-complete-btn.elementor-button.is-complete {
  background-color: var(--color-red) !important;
  border-color: var(--color-red) !important;
  color: var(--color-primary) !important;
  cursor: default !important;
}


/* ============================================================
   8. PSEUDO-ELEMENT QUARANTINE
   Void card grain + scanline are disabled globally.
   Activated only on pages that explicitly need them
   via a body class added in Elementor Page Settings
   or a PMPro/ACF body class filter in functions.php.
============================================================ */

.void-card::before,
.void-card::after,
.void-surface::before,
.void-surface::after {
  display: none;
}

/* Re-enable on dashboard pages */
body.up-dashboard .void-card::before,
body.up-dashboard .void-card::after,
body.up-dashboard .void-surface::before,
body.up-dashboard .void-surface::after {
  display: block;
}


/* ============================================================
   9. AUDIO PLAYER
   Overrides browser-native player. color-scheme: dark
   is the primary lever. Webkit pseudo-elements are
   Chrome/Edge only — Firefox uses color-scheme alone.
============================================================ */

.up-audio-player {
  background-color: var(--surface-void) !important;
  padding: 0 !important;
  width: 100% !important;
}

.up-audio-player audio {
  width: 100% !important;
  height: 48px !important;
  outline: none !important;
  border: none !important;
  background-color: var(--surface-void) !important;
  border-radius: 0 !important;
  color-scheme: dark !important;
}

.up-audio-player audio::-webkit-media-controls-panel {
  background-color: var(--surface-card) !important;
  border-radius: 0 !important;
}

.up-audio-player audio::-webkit-media-controls-play-button {
  background-color: var(--color-teal) !important;
  border-radius: 50% !important;
  filter: none !important;
}

.up-audio-player audio::-webkit-media-controls-current-time-display,
.up-audio-player audio::-webkit-media-controls-time-remaining-display {
  color: var(--color-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}

.up-audio-player audio::-webkit-media-controls-timeline {
  background-color: var(--border-dim) !important;
  border-radius: 0 !important;
  height: 2px !important;
}

.up-audio-player audio::-webkit-media-controls-volume-slider {
  background-color: var(--border-dim) !important;
}


/* ============================================================
   10. DOWNLOAD CARD
   The only Teal border in the system.
   Used for gated resource cards across all workshops.
============================================================ */

.up-download-card {
  border: 0.5px solid var(--color-teal) !important;
  background-color: var(--surface-card) !important;
}

.elementor-section.up-download-card {
  border: 0.5px solid var(--color-teal) !important;
  background-color: var(--surface-card) !important;
}


/* ============================================================
   11. PAGE TRANSITIONS
   Applied via body class on dashboard / gated pages.
============================================================ */

body.up-dashboard,
body.up-preparation {
  animation: upPageIn 1.2s var(--ease-out);
}

@keyframes upPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   12. MOBILE
============================================================ */

@media (max-width: 768px) {

  .up-content-width  { max-width: 100%; }
  .up-content-narrow { max-width: 100%; }
  .up-content-wide   { max-width: 100%; }

  .up-journal-textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

}


/* ============================================================
   13. WORKSHOP SCAFFOLDING
   Workshop-specific overrides go here, scoped to body class.
   Body class is set via Elementor Page Settings >
   Body Class field, or programmatically via functions.php.

   Current workshops:
   — NNG     body.workshop-nng
   — [TBA]   body.workshop-[slug]
   — [TBA]   body.workshop-[slug]
   — [TBA]   body.workshop-[slug]
   — [TBA]   body.workshop-[slug]
   — [TBA]   body.workshop-[slug]

   Add workshop-specific rules below their section header.
   Never override global .up-* classes from inside here.
============================================================ */

/* --- NNG: Naad Nada Gyan --------------------------------- */
/* body.workshop-nng { } */


/* --- Workshop 2 ------------------------------------------ */
/* body.workshop-[slug] { } */


/* --- Workshop 3 ------------------------------------------ */
/* body.workshop-[slug] { } */


/* --- Workshop 4 ------------------------------------------ */
/* body.workshop-[slug] { } */


/* --- Workshop 5 ------------------------------------------ */
/* body.workshop-[slug] { } */


/* --- Workshop 6 ------------------------------------------ */
/* body.workshop-[slug] { } */