/*
Theme Name:   CCAPP DUI Programs — Divi Child
Theme URI:    https://ccappmembership.org/
Description:  Divi 5 child theme for the CCAPP DUI Program Membership site. Hybrid "Momentum × Statehouse" design system — CCAPP Membership brand (PANTONE 321 C #008C95) with the dark kinetic look and editorial serif choreography. Appearance only: all data/behavior belongs in plugins.
Author:       CCAPP
Template:     Divi
Version:      1.0.0
*/

/* =====================================================================
   1. DESIGN TOKENS
   House rule: tokens live HERE, not in Divi Design Variables (Divi's
   generated custom-property names are unstable — never target them).
   Use var(--ccapp-*) inside Divi module design fields and custom CSS.
   ===================================================================== */
:root{
  /* CCAPP Membership company color — PANTONE 321 C */
  --ccapp-brand-500:#008C95;   /* large/bold text + surfaces only (4.05:1 vs white) */
  --ccapp-brand-600:#017B83;   /* white-body-text-safe teal (5.05:1) */
  --ccapp-brand-700:#01666D;
  --ccapp-brand-800:#024A4F;
  --ccapp-brand-900:#06282B;
  --ccapp-brand-100:#D6EEEF;
  --ccapp-brand-50:#EBF7F7;
  --ccapp-ink:#2D2926;

  /* Hybrid dark palette */
  --dui-glow:#35B6BD;          /* light 321 C tint for accents on dark */
  --dui-soft:#9AD9DC;
  --dui-bg:#051E21;
  --dui-bg-2:#07282C;
  --dui-panel:rgba(255,255,255,.045);
  --dui-panel-line:rgba(154,217,220,.16);
  --dui-text:#EDF6F6;
  --dui-text-soft:#AFC9CA;
  --dui-text-faint:#7A9899;

  /* Type */
  --dui-serif:"Fraunces",Georgia,serif;
  --dui-sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Motion */
  --dui-ease:cubic-bezier(.2,.65,.25,1);
}

/* =====================================================================
   2. BASE TYPE (scoped to builder content so wp-admin is untouched)
   ===================================================================== */
.dui-page,
.dui-page .et_pb_text,
.dui-page p{font-family:var(--dui-sans)}
.dui-page h1,
.dui-page h2{font-family:var(--dui-serif);font-weight:400;letter-spacing:-.02em;line-height:1.04}
.dui-page h3,
.dui-page h4{font-family:var(--dui-sans);font-weight:700}

/* Eyebrow kicker — apply class dui-eyebrow to a Text module */
.dui-eyebrow{font-size:.7rem!important;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--dui-glow);display:flex;align-items:center;gap:14px}
.dui-eyebrow::after{content:"";flex:0 0 56px;height:1.5px;background:var(--dui-glow);opacity:.6}

/* Lede paragraph */
.dui-lede{font-size:clamp(1.05rem,2.1vw,1.26rem)!important;color:var(--dui-text-soft);max-width:58ch}

/* =====================================================================
   3. SCROLL PROGRESS BAR (injected by dui-animations.js)
   ===================================================================== */
#dui-progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--ccapp-brand-500),var(--dui-glow));z-index:100000;box-shadow:0 0 14px rgba(53,182,189,.8);pointer-events:none}

/* =====================================================================
   4. REVEAL SYSTEM — add class dui-rv to any module/row.
   Stagger siblings with dui-rv-d1 / d2 / d3.
   ===================================================================== */
.dui-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--dui-ease),transform .8s var(--dui-ease)}
.dui-rv.dui-in{opacity:1;transform:none}
.dui-rv-d1{transition-delay:.1s}
.dui-rv-d2{transition-delay:.2s}
.dui-rv-d3{transition-delay:.3s}
/* No-JS / reduced-motion safety: never leave content invisible */
.no-js .dui-rv,
html.dui-no-motion .dui-rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.dui-rv{opacity:1!important;transform:none!important;transition:none!important}}

/* =====================================================================
   5. HERO — section class dui-hero (+ dui-orbs for the glow field).
   Heading words are wrapped by JS when the heading has class dui-words;
   the accent word is wrapped manually in <em> in the heading content.
   ===================================================================== */
.dui-hero{position:relative;overflow:hidden}
.dui-orbs::before,
.dui-orbs::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
.dui-orbs::before{width:520px;height:520px;background:var(--ccapp-brand-500);top:-180px;right:-120px;animation:dui-drift1 14s ease-in-out infinite alternate}
.dui-orbs::after{width:380px;height:380px;background:#0F4B50;bottom:-160px;left:-100px;animation:dui-drift2 18s ease-in-out infinite alternate}
@keyframes dui-drift1{to{transform:translate(-70px,60px) scale(1.15)}}
@keyframes dui-drift2{to{transform:translate(80px,-50px) scale(1.1)}}
.dui-orbs > *{position:relative;z-index:1}

.dui-words .dui-w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(1.5deg);animation:dui-wordUp .85s var(--dui-ease) forwards}
@keyframes dui-wordUp{to{opacity:1;transform:none}}
.dui-words em{font-style:italic;color:var(--dui-glow);position:relative;white-space:nowrap}
.dui-words em::after{content:"";position:absolute;left:0;bottom:.06em;width:100%;height:.09em;background:var(--ccapp-brand-500);box-shadow:0 0 16px rgba(0,140,149,.9);transform:scaleX(0);transform-origin:left;animation:dui-underline 1.1s 1s var(--dui-ease) forwards}
@keyframes dui-underline{to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  .dui-orbs::before,.dui-orbs::after{animation:none}
  .dui-words .dui-w{opacity:1;transform:none;animation:none}
  .dui-words em::after{transform:scaleX(1);animation:none}
}
.no-js .dui-words .dui-w{opacity:1;transform:none;animation:none}

/* =====================================================================
   6. BUTTONS — apply dui-btn (+ dui-btn-ghost) to Button modules
   ===================================================================== */
.dui-btn.et_pb_button,
.dui-btn .et_pb_button{background:var(--ccapp-brand-500);color:#fff;border:0;border-radius:999px;font-family:var(--dui-sans);font-weight:800;font-size:1.02rem;padding:17px 34px;transition:transform .2s,box-shadow .2s}
.dui-btn.et_pb_button:hover,
.dui-btn .et_pb_button:hover{transform:translateY(-3px);box-shadow:0 0 36px rgba(0,140,149,.75);background:var(--ccapp-brand-500);padding:17px 34px}
.dui-btn-ghost.et_pb_button,
.dui-btn-ghost .et_pb_button{background:transparent;border:1.5px solid var(--dui-panel-line);color:var(--dui-text)}
.dui-btn-ghost.et_pb_button:hover,
.dui-btn-ghost .et_pb_button:hover{border-color:var(--dui-glow);background:var(--dui-panel);box-shadow:none}

/* =====================================================================
   7. TICKER MARQUEE — Code module with class dui-ticker (markup in guide)
   ===================================================================== */
.dui-ticker{border-block:1px solid var(--dui-panel-line);padding:18px 0;overflow:hidden;background:var(--dui-bg-2)}
.dui-ticker-track{display:flex;gap:56px;white-space:nowrap;animation:dui-marquee 30s linear infinite;width:max-content}
.dui-ticker:hover .dui-ticker-track{animation-play-state:paused}
@keyframes dui-marquee{to{transform:translateX(-50%)}}
.dui-ticker-track span{font-family:var(--dui-sans);font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dui-soft);display:flex;align-items:center;gap:56px}
.dui-ticker-track span::after{content:"◆";color:var(--ccapp-brand-500);font-size:.6rem}
@media(prefers-reduced-motion:reduce){.dui-ticker-track{animation:none}}

/* =====================================================================
   8. STAT PANELS — Blurb/Text modules with class dui-stat.
   Number element needs class dui-count + data-count (set in guide).
   ===================================================================== */
.dui-stat{background:var(--dui-panel);border:1px solid var(--dui-panel-line);border-radius:16px;padding:30px 26px;position:relative;overflow:hidden}
.dui-stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ccapp-brand-500);box-shadow:0 0 18px rgba(0,140,149,.9)}
.dui-stat .dui-count{display:block;font-family:var(--dui-serif);font-size:clamp(2.3rem,4.8vw,3.5rem);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.dui-stat .dui-stat-label{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dui-text-faint);margin-top:10px;font-weight:700}

/* =====================================================================
   9. PRESSURE CARDS — class dui-pcard; numeral element class dui-no
   ===================================================================== */
.dui-pcard{background:var(--dui-panel);border:1px solid var(--dui-panel-line);border-top:3px solid var(--ccapp-brand-500);border-radius:16px;padding:32px 28px;transition:transform .3s,border-color .3s}
.dui-pcard:hover{transform:translateY(-6px);border-color:var(--dui-glow)}
.dui-pcard .dui-no{font-family:var(--dui-serif);font-style:italic;font-size:2.6rem;color:var(--dui-glow);line-height:1;display:block;margin-bottom:14px}
.dui-pcard p{font-size:.94rem;color:var(--dui-text-soft)}

/* =====================================================================
   10. GLASS BENEFIT CARDS — class dui-card (+ dui-card-featured for
   the DUI-only gradient). Tilt applies automatically to .dui-card.
   Tag element: class dui-tag.
   ===================================================================== */
.dui-card{background:var(--dui-panel);border:1px solid var(--dui-panel-line);border-radius:16px;padding:30px 26px;transition:transform .25s ease,border-color .25s,box-shadow .25s;transform-style:preserve-3d;will-change:transform}
.dui-card:hover{border-color:rgba(53,182,189,.55);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.dui-card .dui-tag{font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dui-glow);display:block;margin-bottom:14px}
.dui-card p{font-size:.92rem;color:var(--dui-text-soft)}
.dui-card-featured{background:linear-gradient(160deg,rgba(0,140,149,.16),var(--dui-panel) 60%)}

/* =====================================================================
   11. VALUE LEDGER — Code or Text module with class dui-ledger
   (markup in guide). Lines cascade in on scroll.
   ===================================================================== */
.dui-ledger{background:#F6F8F7;color:#1B2B2C;border-radius:20px;padding:clamp(24px,4vw,46px);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 60px rgba(0,140,149,.18);font-family:var(--dui-sans)}
.dui-ledger-hd{display:flex;justify-content:space-between;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6E7E7F;border-bottom:2px solid #1B2B2C;padding-bottom:14px}
.dui-line{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid #DDE4E3;opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s}
.dui-line.dui-in{opacity:1;transform:none}
.no-js .dui-line{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.dui-line{opacity:1;transform:none;transition:none}}
.dui-line small{display:block;color:#6E7E7F;font-size:.8rem;font-weight:400;line-height:1.45;margin-top:2px}
.dui-line-val{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.dui-line--sub{border-bottom:2px solid #1B2B2C;font-weight:800}
.dui-line--sub .dui-line-val{font-family:var(--dui-serif);font-size:1.7rem;color:var(--ccapp-brand-600)}
.dui-line--due{border-bottom:0;padding-top:24px}
.dui-line--due .dui-line-name{font-family:var(--dui-serif);font-size:1.5rem;font-weight:600}
.dui-line--due .dui-line-val{font-family:var(--dui-serif);font-size:3.2rem;font-weight:600;line-height:1;color:var(--ccapp-brand-600)}
.dui-ledger-foot{font-size:.82rem;color:#6E7E7F;border-top:1px dashed #C9D2D1;margin-top:22px;padding-top:16px}

/* =====================================================================
   12. BILL SCROLLER — row class dui-bill-scroll; cards class dui-bill
   ===================================================================== */
.dui-bill-scroll{display:flex!important;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;-webkit-overflow-scrolling:touch}
.dui-bill{flex:0 0 min(340px,82vw);scroll-snap-align:start;background:var(--dui-panel);border:1px solid var(--dui-panel-line);border-top:4px solid var(--ccapp-brand-500);border-radius:16px;padding:28px 24px}
.dui-bill .dui-bill-no{font-family:var(--dui-serif);font-weight:600;font-size:1.6rem;display:block;color:var(--dui-text)}
.dui-bill .dui-bill-yr{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dui-text-faint);font-weight:700}
.dui-bill p{font-size:.88rem;color:var(--dui-text-soft)}
.dui-pos{display:inline-block;margin-top:16px;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(53,182,189,.4);border-radius:999px;padding:4px 13px;color:var(--dui-soft)}

/* =====================================================================
   13. FINAL CTA — big gradient price: class dui-price + dui-count
   ===================================================================== */
.dui-price{font-family:var(--dui-serif);font-size:clamp(4rem,12vw,8rem);font-weight:600;line-height:1;background:linear-gradient(100deg,#fff 20%,var(--dui-glow));-webkit-background-clip:text;background-clip:text;color:transparent;display:block}

/* =====================================================================
   14. UTILITIES
   ===================================================================== */
.dui-scroll-hint{font-size:.78rem;color:var(--dui-text-faint);letter-spacing:.1em;text-transform:uppercase}