/*
Theme Name:  Climate Child — Climate Change & The Prophecy Connection
Theme URI:   https://climateprophecy.com
Template:    go
Description: Brand child theme for climateprophecy.com (One Tiny Mustard Seed). Design tokens, self-hosted fonts, sticky mobile CTA, countdown and next-event helpers. Layout lives in Elementor; the parent Go theme is untouched.
Author:      One Tiny Mustard Seed
Version:     0.12.0
Text Domain: climate-child
*/

/* =========================================================
   0. FONTS — self-hosted Latin subsets (no Google request)
   ========================================================= */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2'); }

/* =========================================================
   1. DESIGN TOKENS — mirror of brand/brand-tokens.json and the
   Elementor global kit. Component rules reference these only.
   ========================================================= */
:root {
  --cp-storm-deep:  #0F1D1B;  /* dark hero base: header, footer, dark bands */
  --cp-storm:       #1E3230;  /* gradient partner; dark cards */
  --cp-storm-mid:   #374F4C;  /* borders/dividers on dark */
  --cp-stone-light: #EFEBE3;  /* light body base (page background) */
  --cp-stone:       #E3DED2;  /* alternate light section, card fill */
  --cp-granite:     #BDB8AD;  /* hairlines; muted text on dark (8.8:1) */
  --cp-ink:         #14211F;  /* body text on light (13.9:1) */
  --cp-ink-muted:   #3F4A48;  /* secondary text on light (7.4:1) */
  --cp-ember:       #BF581C;  /* PRIMARY ACCENT: CTAs, links on light, focus */
  --cp-ember-hover: #A34612;
  --cp-gold:        #E5C34C;  /* SECONDARY ACCENT: eyebrows on dark only */
  --cp-gold-deep:   #6E5C1D;  /* gold on light: eyebrows, dates (5.5:1 on stone-light, 4.9:1 on stone) */
  --cp-ember-text:  #8F3D0E;  /* text links on light (6.6:1); buttons keep --cp-ember with white labels */
  --cp-earth:       #8C6F4D;  /* decorative rules, icons */
  --cp-lightning:   #B9B0FF;  /* countdown digits on dark only */
  --cp-alert:       #9E2B25;  /* form errors, deadline notices */
  --cp-white:       #FFFFFF;

  --cp-hero-scrim: linear-gradient(180deg, rgba(15,29,27,.35) 0%, rgba(15,29,27,.55) 60%, rgba(15,29,27,.85) 100%);

  --cp-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --cp-font-body:    'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --cp-radius:       4px;
  --cp-radius-card:  6px;
  --cp-shadow-card:  0 8px 24px rgba(15, 29, 27, .18);
  --cp-sticky-h:     72px;   /* mobile sticky CTA bar height */
}

/* =========================================================
   2. BASE — legibility first (Myckal's standing rule):
   body 18px, nothing below 15px, muted text >= 7:1 on light.
   ========================================================= */
html { scroll-behavior: smooth; }
body {
  background-color: var(--cp-stone-light);
  color: var(--cp-ink);
  font-family: var(--cp-font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--cp-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
h4, h5, h6 { font-family: var(--cp-font-body); font-weight: 700; }
small, .cp-small { font-size: 15px; }

.elementor-widget-text-editor a, .entry-content a, .cp-on-light a:not(.elementor-button):not(.cp-btn) { color: var(--cp-ember-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.elementor-widget-text-editor a:hover, .entry-content a:hover { color: var(--cp-ember-hover); }
.cp-on-dark .elementor-widget-text-editor a, .cp-on-dark a:not(.elementor-button) { color: var(--cp-gold); }

::selection { background: var(--cp-gold); color: var(--cp-ink); }

a:focus-visible, button:focus-visible, .elementor-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cp-ember); outline-offset: 3px;
}
.cp-on-dark a:focus-visible, .cp-on-dark button:focus-visible, .cp-on-dark .elementor-button:focus-visible { outline-color: var(--cp-gold); }

/* Skip link for keyboard users (Go theme prints one; make it visible on focus) */
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100000; background: var(--cp-ember); color: #fff; padding: 12px 18px; border-radius: var(--cp-radius); font-weight: 700; }

/* =========================================================
   3. COMPONENTS
   ========================================================= */
/* Buttons used outside Elementor (sticky bar, 404 fallback, ICS links) */
.cp-btn { display: inline-block; font-family: var(--cp-font-body); font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: .01em; padding: 16px 28px; border-radius: var(--cp-radius); text-decoration: none; text-align: center; transition: background-color .15s ease; }
.cp-btn--primary { background: var(--cp-ember); color: #fff !important; }
.cp-btn--primary:hover { background: var(--cp-ember-hover); color: #fff; }
.cp-btn--ghost { background: transparent; color: var(--cp-stone-light) !important; border: 2px solid var(--cp-granite); }
.cp-btn--ghost:hover { border-color: var(--cp-gold); color: var(--cp-gold) !important; }

/* Eyebrow label */
.cp-eyebrow { font-family: var(--cp-font-body); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-gold); }
.cp-on-light .cp-eyebrow, .cp-eyebrow--light { color: var(--cp-gold-deep); }

/* Horizon rule: dark -> light transitions */
.elementor-element.cp-horizon-top { border-top: 3px solid var(--cp-gold); }

/* Card (session tiles, benefit boxes) */
.cp-card { background: var(--cp-white); border: 1px solid var(--cp-granite); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); }
.cp-card--dark { background: var(--cp-storm); border-color: var(--cp-storm-mid); color: var(--cp-stone-light); }

/* Alert / deadline notice — the ONLY place --cp-alert appears */
.cp-alert { background: var(--cp-alert); color: #fff; font-weight: 700; font-size: 16px; padding: 10px 18px; border-radius: var(--cp-radius); text-align: center; }

/* Elementor Pro form fields: kit handles colors; enforce legible sizes + error color */
.elementor-field-group .elementor-field-label { font-size: 15px; font-weight: 700; }
.elementor-field-group input.elementor-field, .elementor-field-group select.elementor-field, .elementor-field-group textarea.elementor-field { font-size: 18px; min-height: 52px; }
.elementor-field-group .elementor-field-subgroup label { font-size: 17px; }
.elementor-message.elementor-message-danger, .elementor-field-group.elementor-error .elementor-help-inline { color: var(--cp-alert); font-size: 15px; font-weight: 600; }
.elementor-message::before { display: none; } /* eicons font is not loaded on the front end; the glyph rendered as an empty box (Phase 10 QA) */
.elementor-field-group.elementor-error .elementor-field { border-color: var(--cp-alert) !important; }
.elementor-message.elementor-message-success { color: var(--cp-ink); font-size: 18px; }

/* Countdown (child-theme shortcode, driven by the next TEC event) */
.cp-countdown { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; min-height: 96px; }
.cp-countdown__unit { box-sizing: border-box; min-width: 96px; padding: 12px 8px; background: rgba(255,255,255,.06); border: 1px solid var(--cp-storm-mid); border-radius: var(--cp-radius-card); text-align: center; }
.cp-countdown__num { display: block; font-family: var(--cp-font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--cp-lightning); font-variant-numeric: tabular-nums; }
.cp-countdown__label { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cp-granite); }
.cp-countdown--done { font-size: 22px; font-weight: 700; color: var(--cp-gold); text-align: center; }
@media (max-width: 767px) { .cp-countdown { gap: 8px; } .cp-countdown__unit { box-sizing: border-box; min-width: 76px; padding: 10px 6px; } .cp-countdown__num { font-size: 34px; } .cp-countdown__label { font-size: 13px; } }

/* =========================================================
   4. STICKY MOBILE CTA (printed by functions.php on every page
   except the registration form and the thank-you page)
   ========================================================= */
.cp-sticky-cta { display: none; }
@media (max-width: 1024px) {
  body.cp-has-sticky { padding-bottom: calc(var(--cp-sticky-h) + env(safe-area-inset-bottom)); }
  .cp-sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(15,29,27,.96); border-top: 1px solid var(--cp-storm-mid); backdrop-filter: blur(6px); }
  .cp-sticky-cta .cp-btn { display: block; width: 100%; font-size: 20px; padding: 15px 20px; }
}

/* =========================================================
   5. MOTION — subtle entrances only; honor reduced motion
   ========================================================= */
.elementor-invisible { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .elementor-invisible { visibility: visible !important; }
  .animated { animation: none !important; opacity: 1 !important; }
}

/* =========================================================
   6. UTILITIES
   ========================================================= */
.cp-on-dark { color: var(--cp-stone-light); }
.cp-on-dark h1, .cp-on-dark h2, .cp-on-dark h3 { color: var(--cp-white); }
.cp-muted { color: var(--cp-ink-muted); }
.cp-on-dark .cp-muted { color: var(--cp-granite); }
.cp-tabular { font-variant-numeric: tabular-nums; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Footer link colors (text-editor lists inside the footer) */
.cp-footer .elementor-widget-text-editor a { color: var(--cp-stone-light); text-decoration: none; }
.cp-footer .elementor-widget-text-editor a:hover { color: var(--cp-gold); text-decoration: underline; }
.cp-footer .elementor-widget-text-editor p { margin-bottom: 8px; }
/* Header: keep the wordmark crisp and the menu vertically centred */
.cp-header .elementor-widget-image img { height: auto; }
.cp-header .elementor-nav-menu--dropdown { border-top: 1px solid var(--cp-storm-mid); }

/* =========================================================
   7. NEXT-EVENT BANDS, SCHEDULE, CALENDAR, INVITE (shortcodes)
   ========================================================= */
.cp-countdown-wrap { margin-top: 28px; }
.cp-countdown__title { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-granite); text-align: center; margin-bottom: 10px; }
.cp-band { display: flex; gap: 40px; align-items: center; }
.cp-band__media { flex: 0 0 42%; }
.cp-band__media img { width: 100%; height: auto; border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); }
.cp-band__body { flex: 1 1 auto; }
.cp-band h2 { margin: 6px 0 4px; }
.cp-band__dates { font-family: var(--cp-font-body); font-weight: 700; font-size: 22px; color: var(--cp-gold); margin: 0 0 14px; }
.cp-on-light .cp-band__dates { color: var(--cp-gold-deep); }
.cp-band__extras { font-weight: 600; color: var(--cp-granite); }
.cp-on-light .cp-band__extras { color: var(--cp-ink-muted); }
.cp-band__lead { font-size: 20px; }
.cp-band__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
@media (max-width: 1024px) { .cp-band { flex-direction: column; align-items: stretch; gap: 24px; } .cp-band__media { flex-basis: auto; } }
.cp-btn--ghost-light, button.cp-btn--ghost-light { background: transparent !important; color: var(--cp-ember-text) !important; border: 2px solid var(--cp-ember); } /* !important: Elementor kit button styles also target <button> (Copy Link) */
.cp-btn--ghost-light:hover, button.cp-btn--ghost-light:hover { background: var(--cp-ember) !important; color: #fff !important; }

.cp-details h2 { margin: 4px 0 2px; }
.cp-details__dates { font-weight: 700; font-size: 24px; color: var(--cp-gold-deep); margin: 0 0 16px; }
.cp-details__venue { font-size: 19px; line-height: 1.5; }
.cp-schedule { list-style: none; margin: 8px 0 20px; padding: 0; border: 1px solid var(--cp-granite); border-radius: var(--cp-radius-card); background: #fff; overflow: hidden; }
.cp-schedule__day { background: var(--cp-storm-deep); color: var(--cp-gold); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 18px; }
.cp-schedule__row { display: flex; gap: 18px; padding: 14px 18px; border-top: 1px solid var(--cp-stone); font-size: 18px; }
.cp-schedule__time { flex: 0 0 92px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-facts { list-style: none; padding: 0; margin: 0 0 18px; }
.cp-facts li { padding: 6px 0 6px 30px; position: relative; font-size: 18px; }
.cp-facts li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--cp-ember); }
.cp-details__notes { background: var(--cp-stone); border-left: 4px solid var(--cp-earth); padding: 14px 18px; border-radius: var(--cp-radius); margin-bottom: 16px; }
.cp-upcoming ul { padding-left: 20px; }

.cp-cal__list { padding-left: 20px; }
.cp-cal__list li { margin-bottom: 8px; }
.cp-invite { display: flex; flex-wrap: wrap; gap: 12px; }
.cp-invite .cp-btn { flex: 1 1 200px; cursor: pointer; font-family: var(--cp-font-body); }

/* Session cards (The Series page) and image-box cards (Home) */
.cp-card .elementor-image-box-img img { border-radius: 6px 6px 0 0; width: 100%; }
.cp-card .elementor-image-box-content { padding: 18px 20px 22px; text-align: left; }
.cp-card .elementor-image-box-title { font-family: var(--cp-font-body); font-weight: 700; font-size: 21px; line-height: 1.3; }
.cp-card .elementor-image-box-description { font-size: 17px; color: var(--cp-ink-muted); margin-top: 8px; }
.cp-icon-card { background: #fff; border: 1px solid var(--cp-granite); border-radius: var(--cp-radius-card); padding: 28px 22px; height: 100%; }
.cp-icon-card .elementor-icon-box-title { font-family: var(--cp-font-body); font-weight: 700; font-size: 21px; }
.cp-icon-card .elementor-icon-box-description { font-size: 17px; color: var(--cp-ink-muted); }
.cp-scripture { display: inline-block; background: var(--cp-stone); color: var(--cp-ink); border-left: 4px solid var(--cp-gold-deep); padding: 8px 14px; border-radius: var(--cp-radius); font-size: 16px; font-weight: 600; margin-top: 12px; }
.cp-on-dark .cp-scripture { background: rgba(255,255,255,.06); color: var(--cp-stone-light); border-left-color: var(--cp-gold); }

/* FAQ accordion (Elementor classic accordion) */
.cp-faq .elementor-accordion .elementor-tab-title, .cp-faq .elementor-accordion .elementor-tab-title a { font-family: var(--cp-font-body); font-weight: 700; font-size: 20px; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.cp-faq .elementor-accordion .elementor-tab-title { padding: 18px 20px; }
.cp-faq .elementor-accordion .elementor-tab-content { font-size: 18px; line-height: 1.6; padding: 4px 20px 22px; }
.cp-faq .elementor-accordion .elementor-accordion-item { border-color: var(--cp-granite); background: #fff; }
.cp-faq .elementor-accordion .elementor-accordion-item + .elementor-accordion-item { margin-top: 10px; }
.cp-faq .elementor-accordion .elementor-accordion-item { border-radius: var(--cp-radius-card); border: 1px solid var(--cp-granite) !important; }

/* Hero */
.cp-hero .elementor-widget-image img { filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.cp-hero-lead { font-size: 22px; line-height: 1.5; color: var(--cp-stone-light); max-width: 40em; }
@media (max-width: 767px) { .cp-hero-lead { font-size: 19px; } }

/* Registration form (multi-step) */
.cp-reserve-form .elementor-field-type-step { margin-bottom: 8px; }
.cp-reserve-form .e-form__indicators { margin-bottom: 20px; }
.cp-reserve-form .e-form__indicators__indicator__label { font-size: 15px; font-weight: 700; }
.cp-reserve-form .elementor-field-type-acceptance label { font-size: 16px; line-height: 1.5; }
.cp-reserve-form .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option { margin-right: 18px; }
.cp-reserve-form .elementor-field-option label { font-size: 17px; }
.cp-reserve-form .e-form__buttons__wrapper__button { min-height: 56px; }
.cp-form-note { font-size: 16px; color: var(--cp-ink-muted); }

/* The Go parent theme hides native checkboxes/radios (opacity 0) for its own block styling; Elementor forms need them visible. */
.elementor-field-subgroup input[type="checkbox"], .elementor-field-subgroup input[type="radio"], .elementor-field-type-acceptance input[type="checkbox"] { opacity: 1 !important; position: static !important; width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--cp-ember); }
.elementor-field-subgroup .elementor-field-option label, .elementor-field-type-acceptance label { display: inline-flex; align-items: center; gap: 4px; }
.elementor-field-type-acceptance label { align-items: flex-start; }

/* =========================================================
   12. POLISH (0.11.0) — tablet: one Reserve CTA, not two; TEC single-event page on-brand
   ========================================================= */
@media (max-width: 1024px) { .cp-header-cta { display: none !important; } }
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events-c-subscribe-dropdown__button:focus { background: var(--cp-ember) !important; border: 2px solid var(--cp-ember) !important; border-radius: 4px !important; color: var(--cp-white) !important; padding: 12px 22px !important; }
.tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events-c-subscribe-dropdown__button:focus { background: var(--cp-ember-hover) !important; border-color: var(--cp-ember-hover) !important; }
.tribe-events-c-subscribe-dropdown__button-text { color: var(--cp-white) !important; font-family: var(--cp-font-body) !important; font-weight: 700 !important; font-size: 18px !important; }
.tribe-events-c-subscribe-dropdown__button-icon, .tribe-events-c-subscribe-dropdown__export-icon { filter: brightness(0) invert(1); }
.tribe-events-c-subscribe-dropdown__list-item-link { font-family: var(--cp-font-body) !important; font-size: 17px !important; color: var(--cp-ink) !important; }
.tribe-events-schedule .timezone, .tribe-events-schedule__timezone { color: var(--cp-ink-muted); font-size: 16px; }

/* =========================================================
   13. GIVING BAND (0.12.0) — You're Registered page
   ========================================================= */
.cp-give { background: var(--cp-storm-deep); color: var(--cp-stone-light); padding: 56px 20px; }
.cp-give__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.cp-give__eyebrow { color: var(--cp-gold); font-family: var(--cp-font-body); font-weight: 700; font-size: 18px; margin: 0 0 10px; }
.cp-give__h { color: var(--cp-white); font-family: var(--cp-font-display); font-weight: 700; font-size: 40px; line-height: 1.1; margin: 0 0 16px; }
.cp-give__p { font-family: var(--cp-font-body); font-size: 19px; line-height: 1.6; margin: 0 auto 26px; color: var(--cp-stone-light); }
.cp-give__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 18px; }
.cp-give__btn { display: inline-block; min-width: 150px; padding: 16px 24px; border-radius: 4px; background: var(--cp-ember); border: 2px solid var(--cp-ember); color: var(--cp-white) !important; font-family: var(--cp-font-body); font-weight: 700; font-size: 20px; line-height: 1.1; text-decoration: none !important; }
.cp-give__btn:hover, .cp-give__btn:focus { background: var(--cp-ember-hover); border-color: var(--cp-ember-hover); }
.cp-give__btn--alt { background: transparent; border-color: var(--cp-stone-light); }
.cp-give__btn--alt:hover, .cp-give__btn--alt:focus { background: rgba(239,235,227,.12); border-color: var(--cp-white); }
.cp-give__small { font-family: var(--cp-font-body); font-size: 16px; color: var(--cp-granite); margin: 0; }
@media (max-width: 600px) { .cp-give__h { font-size: 32px; } .cp-give__btn { flex: 1 1 45%; min-width: 0; } }