/*
 Theme Name:   Aster Gaia Child
 Theme URI:    https://astergaiaclinic.com
 Description:  Aster Gaia Clinic — Child theme for Kadence
 Author:       Salveus Labs
 Author URI:   https://salveuslabs.com
 Template:     kadence
 Version:      1.0.0
 License:      Private
 Text Domain:  aster-gaia-child
*/

/* ═══════════════════════════════════════════════════════════════
   ASTER GAIA CLINIC — DESIGN SYSTEM
   Child theme CSS — v1.0 · Concept C approved
   ALL design decisions live here. Edit tokens here ONLY.
   Never add raw hex values anywhere outside this :root block.
═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */

:root {

  /* Core palette — mirrors Kadence Global Palette slots 1–8 */
  --ag-void:        #060B1A;
  --ag-deep:        #0A1232;
  --ag-sapphire:    #0D1A4A;
  --ag-mid:         #142060;
  --ag-gold:        #C8A84B;
  --ag-gold-lt:     #E2C97E;
  --ag-gold-dk:     #9A7A28;
  --ag-silver-lt:   #D4DCE8;

  /* Semantic palette — Kadence slots 9–16 */
  --ag-ivory:       #F7F3EC;
  --ag-silver:      #B0BDD0;
  --ag-crystal:     #A8D8E0;
  --ag-atl:         #60C0F0;
  --ag-success:     #4CAF7D;
  --ag-warn:        #E8A838;
  --ag-cream:       #EDE7D9;
  --ag-panel:       #0C1438;

  /* Typography */
  --ag-font-d:  'Bodoni Moda', serif;         /* Display / Headings */
  --ag-font-b:  'Libre Baskerville', serif;   /* Body / Editorial */
  --ag-font-u:  'Outfit', sans-serif;         /* UI / Nav / Buttons */

  /* Easing */
  --ag-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ag-t:       0.35s var(--ag-ease);

  /* Spacing scale */
  --ag-space-xs:   4px;
  --ag-space-sm:   8px;
  --ag-space-md:   16px;
  --ag-space-lg:   24px;
  --ag-space-xl:   40px;
  --ag-space-2xl:  64px;
  --ag-space-3xl:  100px;
  --ag-space-4xl:  140px;

  /* Practitioner palettes — content system only, not in Kadence Global Palette */
  --p-larisa:       #C8A84B;
  --p-larisa-lt:    #E2C97E;
  --p-larisa-dk:    #9A7A28;
  --p-larisa-glow:  rgba(200,168,75,0.15);

  --p-sue:          #5BA870;
  --p-sue-lt:       #8FD4A0;
  --p-sue-dk:       #3A7A50;
  --p-sue-glow:     rgba(91,168,112,0.15);

  --p-kalindi:      #C85880;
  --p-kalindi-lt:   #E890B0;
  --p-kalindi-dk:   #8A2850;
  --p-kalindi-glow: rgba(200,88,128,0.15);

  --p-amber:        #D4841C;
  --p-amber-lt:     #F0B060;
  --p-amber-dk:     #9A5C0A;
  --p-amber-glow:   rgba(212,132,28,0.15);

  --p-ellie:        #8058B8;
  --p-ellie-lt:     #B090D8;
  --p-ellie-dk:     #502880;
  --p-ellie-glow:   rgba(128,88,184,0.15);

  --p-michie:       #28A8B8;
  --p-michie-lt:    #70D0DC;
  --p-michie-dk:    #147888;
  --p-michie-glow:  rgba(40,168,184,0.15);
}

/* ── 2. GLOBAL ELEMENTS ────────────────────────────────────── */

body {
  background-color: var(--ag-void);
  color: var(--ag-silver-lt);
  overflow-x: hidden;
  font-family: var(--ag-font-b);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ag-font-d) !important;
  color: var(--ag-ivory);
  font-weight: 700;
}

p, li, blockquote, td, label {
  font-family: var(--ag-font-b);
}

a {
  color: var(--ag-gold);
  transition: color var(--ag-t);
  text-decoration: none;
}
a:hover { color: var(--ag-gold-lt); }

/* ── 3. UTILITY CLASSES ────────────────────────────────────── */

/* Section eyebrow — add class ag-eyebrow to Kadence Heading block */
.ag-eyebrow {
  font-family: var(--ag-font-u) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--ag-gold) !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px !important;
  font-weight: 400 !important;
}

.ag-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--ag-gold);
  flex-shrink: 0;
}

/* Gold rule divider — add class ag-gold-rule to Kadence Spacer */
.ag-gold-rule {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--ag-gold), transparent) !important;
  border: none !important;
  margin: var(--ag-space-3xl) 0;
}

/* Dark panel card */
.ag-panel {
  background: var(--ag-deep);
  border: 1px solid rgba(200,168,75,0.1);
}

/* Gold top border accent */
.ag-gold-top {
  border-top: 2px solid var(--ag-gold) !important;
}

/* Section background helpers */
.ag-bg-void     { background-color: var(--ag-void) !important; }
.ag-bg-deep     { background-color: var(--ag-deep) !important; }
.ag-bg-sapphire { background-color: var(--ag-sapphire) !important; }
.ag-bg-cream    { background-color: var(--ag-cream) !important; }
.ag-bg-gradient-hero {
  background: radial-gradient(ellipse at 30% 50%, var(--ag-mid) 0%, var(--ag-deep) 50%, var(--ag-void) 100%);
}
.ag-bg-gradient-gold {
  background: linear-gradient(135deg, var(--ag-gold-dk), var(--ag-gold), var(--ag-gold-lt));
}

/* Text colour helpers */
.ag-text-gold    { color: var(--ag-gold) !important; }
.ag-text-ivory   { color: var(--ag-ivory) !important; }
.ag-text-silver  { color: var(--ag-silver) !important; }
.ag-text-crystal { color: var(--ag-crystal) !important; }

/* ── 4. PRACTITIONER COLOUR CLASSES ────────────────────────── */

/*
  Usage: add class p-{name} to any Kadence block or container.
  The CSS variable cascade handles all colour theming automatically.
  Set via ACF field _aster_practitioner on LearnDash lessons.
*/

.p-larisa  { --p-color: var(--p-larisa);  --p-lt: var(--p-larisa-lt);  --p-dk: var(--p-larisa-dk);  --p-glow: var(--p-larisa-glow);  }
.p-sue     { --p-color: var(--p-sue);     --p-lt: var(--p-sue-lt);     --p-dk: var(--p-sue-dk);     --p-glow: var(--p-sue-glow);     }
.p-kalindi { --p-color: var(--p-kalindi); --p-lt: var(--p-kalindi-lt); --p-dk: var(--p-kalindi-dk); --p-glow: var(--p-kalindi-glow); }
.p-amber   { --p-color: var(--p-amber);   --p-lt: var(--p-amber-lt);   --p-dk: var(--p-amber-dk);   --p-glow: var(--p-amber-glow);   }
.p-ellie   { --p-color: var(--p-ellie);   --p-lt: var(--p-ellie-lt);   --p-dk: var(--p-ellie-dk);   --p-glow: var(--p-ellie-glow);   }
.p-michie  { --p-color: var(--p-michie);  --p-lt: var(--p-michie-lt);  --p-dk: var(--p-michie-dk);  --p-glow: var(--p-michie-glow);  }

/* Practitioner accent border on content blocks */
[class^="p-"] .content-block,
[class^="p-"] .lesson-header {
  border-left: 3px solid var(--p-color);
}

/* Practitioner label text */
[class^="p-"] .practitioner-label {
  color: var(--p-color);
}

/* Practitioner icon circles */
[class^="p-"] .practitioner-icon {
  background: var(--p-glow);
  border: 1px solid var(--p-color);
  box-shadow: 0 0 16px var(--p-glow);
}

/* Practitioner progress bars */
[class^="p-"] .progress-fill {
  background: linear-gradient(90deg, var(--p-dk), var(--p-color), var(--p-lt));
}

/* ── 5. KADENCE BUTTON OVERRIDES ───────────────────────────── */

/* Primary button — gold gradient */
.wp-block-kadence-advancedbtn .kt-btn-wrap:not(.kt-outline) .kt-button,
.kadence-button:not(.kt-outline-btn),
.kb-btn-global-outline:not(.kt-outline-btn) {
  background: linear-gradient(135deg, var(--ag-gold-lt), var(--ag-gold)) !important;
  color: var(--ag-void) !important;
  font-family: var(--ag-font-u) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  transition: all var(--ag-t) !important;
}

.wp-block-kadence-advancedbtn .kt-btn-wrap:not(.kt-outline) .kt-button:hover {
  background: linear-gradient(135deg, var(--ag-gold), var(--ag-gold-dk)) !important;
  color: var(--ag-ivory) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,168,75,0.35);
}

/* ── 6. KADENCE GLOBAL OVERRIDES ───────────────────────────── */

/* Remove all border-radius (Concept C uses sharp edges) */
.kadence-blocks-form input,
.kadence-blocks-form select,
.kadence-blocks-form textarea,
.kt-btn-wrap,
.kt-button {
  border-radius: 0 !important;
}

/* Form inputs */
.kadence-blocks-form input[type="text"],
.kadence-blocks-form input[type="email"],
.kadence-blocks-form input[type="tel"],
.kadence-blocks-form textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(200,168,75,0.3) !important;
  color: var(--ag-ivory) !important;
  font-family: var(--ag-font-u) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
  transition: border-color var(--ag-t) !important;
}

.kadence-blocks-form input:focus,
.kadence-blocks-form textarea:focus {
  border-color: rgba(200,168,75,0.6) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(200,168,75,0.2) !important;
}

/* ── 7. LEARNDDASH OVERRIDES ───────────────────────────────── */

.learndash-wrapper {
  background: var(--ag-void) !important;
  color: var(--ag-silver-lt) !important;
}

.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.learndash-wrapper h4 {
  font-family: var(--ag-font-d) !important;
  color: var(--ag-ivory) !important;
}

.ld-lesson-item,
.ld-topic-list .ld-topic-title,
.ld-course-list-item {
  background: var(--ag-panel) !important;
  border-color: rgba(200,168,75,0.1) !important;
  border-radius: 0 !important;
  transition: border-color var(--ag-t);
}

.ld-lesson-item:hover,
.ld-topic-list .ld-topic-title:hover {
  border-color: rgba(200,168,75,0.28) !important;
  background: rgba(200,168,75,0.04) !important;
}

.ld-lesson-item a,
.ld-topic-list a {
  color: var(--ag-silver-lt) !important;
  font-family: var(--ag-font-u) !important;
}

.ld-lesson-item a:hover {
  color: var(--ag-gold-lt) !important;
}

/* Progress bars */
.ld-progress-bar,
.ld-course-progress-bar {
  background: rgba(200,168,75,0.12) !important;
  border-radius: 0 !important;
}

.ld-progress-bar-percentage,
.ld-course-progress-percentage {
  background: linear-gradient(90deg, var(--ag-gold-dk), var(--ag-gold), var(--ag-gold-lt)) !important;
  border-radius: 0 !important;
}

/* Complete status */
.ld-status-complete .ld-status-icon,
.ld-lesson-item.ld-status-completed .ld-lesson-title {
  color: var(--ag-success) !important;
}

/* LearnDash buttons */
.learndash_mark_complete_button,
.ld-button,
.btn-join-group-btn,
.ld-next-prev-link a,
.course_progress_blue {
  background: linear-gradient(135deg, var(--ag-gold-lt), var(--ag-gold)) !important;
  color: var(--ag-void) !important;
  font-family: var(--ag-font-u) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 28px !important;
  transition: all var(--ag-t) !important;
}

.learndash_mark_complete_button:hover,
.ld-button:hover {
  background: linear-gradient(135deg, var(--ag-gold), var(--ag-gold-dk)) !important;
  color: var(--ag-ivory) !important;
  transform: translateY(-1px);
}

/* Course navigation */
.ld-breadcrumbs {
  font-family: var(--ag-font-u) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
}

.ld-breadcrumbs a { color: var(--ag-gold) !important; }

/* Lesson sidebar */
.ld-course-navigation {
  background: var(--ag-deep) !important;
  border-color: rgba(200,168,75,0.08) !important;
}

/* Expand/collapse icons */
.ld-expand-button .ld-icon,
.ld-item-list-item-expand button {
  color: var(--ag-gold) !important;
}

/* Quiz styles */
.ld-quiz-message-wrapper,
.ld-quiz-result {
  background: var(--ag-panel) !important;
  border-color: rgba(200,168,75,0.1) !important;
  color: var(--ag-silver-lt) !important;
}

/* ── 8. MEMBERDASH OVERRIDES ───────────────────────────────── */

.memberdash-member-info,
.memberdash-course-item,
.memberdash-subscription-item {
  background: var(--ag-panel) !important;
  border-color: rgba(200,168,75,0.1) !important;
  border-radius: 0 !important;
  color: var(--ag-silver-lt) !important;
}

.memberdash-progress-bar {
  background: linear-gradient(90deg, var(--ag-gold-dk), var(--ag-gold)) !important;
  border-radius: 0 !important;
}

/* ── 9. WOOCOMMERCE OVERRIDES ──────────────────────────────── */

.woocommerce-page .woocommerce,
.woocommerce {
  background: var(--ag-void);
}

.woocommerce-product-gallery,
.woocommerce div.product {
  background: var(--ag-void) !important;
}

.woocommerce-product-details__short-description,
.woocommerce div.product p.price,
.woocommerce div.product .woocommerce-product-rating {
  font-family: var(--ag-font-b) !important;
  color: var(--ag-silver-lt) !important;
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt {
  background: linear-gradient(135deg, var(--ag-gold-lt), var(--ag-gold)) !important;
  color: var(--ag-void) !important;
  font-family: var(--ag-font-u) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
}

.woocommerce .star-rating span::before {
  color: var(--ag-gold) !important;
}

/* ── 10. KADENCE HEADER OVERRIDES ──────────────────────────── */

.site-header,
#masthead,
.kadence-sticky-header {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.site-header.scrolled {
  background: rgba(6,11,26,0.96) !important;
  border-bottom: 1px solid rgba(200,168,75,0.12) !important;
}

/* ── 11. ANIMATION SUPPORT CLASSES ────────────────────────── */

/* Reveal on scroll — add via JS IntersectionObserver */
.ag-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ag-ease), transform 0.9s var(--ag-ease);
}
.ag-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.ag-reveal-left  { opacity: 0; transform: translateX(-24px); transition: opacity 0.9s var(--ag-ease), transform 0.9s var(--ag-ease); }
.ag-reveal-right { opacity: 0; transform: translateX( 24px); transition: opacity 0.9s var(--ag-ease), transform 0.9s var(--ag-ease); }
.ag-reveal-left.visible, .ag-reveal-right.visible { opacity: 1; transform: translate(0); }

.ag-d1 { transition-delay: 0.1s; }
.ag-d2 { transition-delay: 0.2s; }
.ag-d3 { transition-delay: 0.3s; }
.ag-d4 { transition-delay: 0.4s; }
.ag-d5 { transition-delay: 0.5s; }

/* Canvas animation blocks */
.ag-animation-block {
  position: relative;
  overflow: hidden;
}

.ag-animation-block canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.ag-animation-block > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* ── 12. RESPONSIVE ────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ag-2col-grid { grid-template-columns: 1fr !important; }
  .ag-4col-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
  .ag-4col-grid { grid-template-columns: 1fr !important; }
  .ag-3col-grid { grid-template-columns: 1fr !important; }
  .ag-gold-rule  { margin: var(--ag-space-2xl) 0; }
}