/* ============================================
   ADHD Tutoring — Age Pages Stylesheet
   Loaded on pages using the "Age Page" template.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* ── Base Variables ── */
.adhdt-age-page {
  --sun:#F5A623;--sun-l:#FFF3D6;--sun-d:#C47E0A;
  --teal:#0D9E82;--teal-l:#E0F5F0;--teal-d:#0A7A65;
  --navy:#1A2B4A;--navy-m:#243558;
  --coral:#E05A4E;--coral-l:#FDEEED;
  --purple:#5B4F9E;--purple-l:#EEEDFE;--purple-d:#3C3489;
  --gold:#C9883A;--gold-l:#FFF4E6;
  --green:#2D9A5F;--green-l:#E6F7EE;
  --amber:#C27A18;--amber-l:#FFF0D6;
  --red:#C0392B;--red-l:#FDECEB;
  --slate:#4A5568;
  --cream:#FAF8F4;--ap-gray:#F0EDE8;--border:#E2DDD6;
  --ap-text:#1C1A17;--text-m:#3D3A35;--text-s:#6B6761;
  --sans:'Nunito',sans-serif;--serif:'Lora',Georgia,serif;
  font-family: var(--sans);
  color: var(--ap-text);
  --accent: var(--sun);
  --accent-l: var(--sun-l);
  --accent-d: var(--sun-d);
}

/* ── Page-Specific Color Themes ── */
.page-early-learning .adhdt-age-page { --accent:var(--sun); --accent-l:var(--sun-l); --accent-d:var(--sun-d); }
.page-elementary .adhdt-age-page { --accent:var(--teal); --accent-l:var(--teal-l); --accent-d:var(--teal-d); }
.page-middle-school .adhdt-age-page { --accent:var(--purple); --accent-l:var(--purple-l); --accent-d:var(--purple-d); }
.page-high-school .adhdt-age-page { --accent:var(--teal); --accent-l:var(--teal-l); --accent-d:var(--teal-d); }

/* ── Hero ── */
.age-hero{padding:72px 24px 0;overflow:hidden;position:relative}
.age-hero::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:120px;background:var(--cream);clip-path:ellipse(55% 100% at 50% 100%)}
.age-hero-inner{max-width:760px;margin:0 auto;position:relative;z-index:1}
.age-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;padding:6px 16px;border-radius:100px;margin-bottom:20px}
.page-early-learning .age-badge{color:var(--navy)}
.age-badge .dot{width:8px;height:8px;background:var(--navy);border-radius:50%;opacity:.4}
.age-hero h1{font-family:var(--serif);font-size:clamp(28px,5vw,48px);line-height:1.15;color:var(--navy);letter-spacing:-.02em;margin-bottom:16px}
.age-hero h1 em{color:var(--accent-d);font-style:normal}
.age-hero-lead{font-size:clamp(15px,2vw,18px);color:var(--text-m);line-height:1.72;max-width:600px;margin-bottom:28px}
.age-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:56px}
.age-btn-primary{background:var(--navy);color:#fff;font-weight:700;font-size:15px;padding:13px 28px;border-radius:100px;text-decoration:none;transition:.2s}
.age-btn-primary:hover{background:var(--navy-m);transform:translateY(-1px)}
.age-btn-ghost{background:transparent;color:var(--navy);font-weight:600;font-size:15px;padding:13px 28px;border-radius:100px;text-decoration:none;border:2px solid var(--navy);transition:.2s}
.age-btn-ghost:hover{background:rgba(26,43,74,.06)}

/* Hero Backgrounds */
.page-early-learning .age-hero{background:linear-gradient(135deg,#FFF8E7 0%,#FFF3D6 40%,#FDE8C6 100%)}
.page-elementary .age-hero{background:linear-gradient(135deg,#E8F8F4 0%,#D4F0EA 40%,#C0E8DF 100%)}
.page-middle-school .age-hero{background:linear-gradient(135deg,#EEECFD 0%,#E2DFFC 40%,#D5D1F8 100%)}
.page-high-school .age-hero{background:linear-gradient(135deg,#EEF1F8 0%,#E3E8F2 40%,#D8DFED 100%)}

/* ── Trust Bar ── */
.age-trust{background:var(--navy);padding:18px 24px;display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.age-trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:13px;font-weight:600}
.age-trust-icon{font-size:16px}

/* ── Section ── */
.age-section{padding:64px 24px}
.age-section-inner{max-width:760px;margin:0 auto}
.age-section-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-d);margin-bottom:10px}
.age-section h2{font-family:var(--serif);font-size:clamp(22px,3.5vw,34px);color:var(--navy);letter-spacing:-.02em;line-height:1.25;margin-bottom:16px}
.age-section p{font-size:15.5px;color:var(--text-m);line-height:1.78;margin-bottom:14px}

/* ── Challenge Cards ── */
.age-challenge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:28px 0}
.age-challenge-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;border-top:4px solid var(--accent)}
.age-challenge-card .icon{font-size:28px;margin-bottom:10px}
.age-challenge-card h3{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px}
.age-challenge-card p{font-size:13px;color:var(--text-s);line-height:1.65;margin:0}

/* ── Approach / Pillars ── */
.age-approach{background:var(--navy);padding:64px 24px}
.age-approach-inner{max-width:760px;margin:0 auto}
.age-approach-inner .age-section-label{color:var(--accent)}
.age-approach-inner h2{color:#fff;font-family:var(--serif);font-size:clamp(22px,3.5vw,34px);letter-spacing:-.02em;margin-bottom:28px}
.age-pillar-list{display:flex;flex-direction:column;gap:16px}
.age-pillar{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.07);border-radius:12px;padding:18px}
.age-pillar-num{flex-shrink:0;width:36px;height:36px;background:var(--accent);color:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.page-middle-school .age-pillar-num,.page-elementary .age-pillar-num,.page-high-school .age-pillar-num{color:#fff}
.age-pillar h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.age-pillar p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.65;margin:0}

/* ── Expect Grid ── */
.age-expect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:24px}
.age-expect-card{background:var(--accent-l);border-radius:12px;padding:18px;border-left:4px solid var(--accent)}
.age-expect-card h4{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:5px}
.age-expect-card p{font-size:12.5px;color:var(--text-m);line-height:1.6;margin:0}

/* ── Pull Quote ── */
.age-pull-quote{background:var(--teal-l);border-left:5px solid var(--teal);border-radius:0 12px 12px 0;padding:20px 22px;margin:28px 0}
.age-pull-quote p{font-family:var(--serif);font-size:18px;font-style:italic;color:var(--navy);line-height:1.55;margin:0}

/* ── Signs List ── */
.age-signs-list{margin:20px 0;display:flex;flex-direction:column;gap:10px}
.age-sign-item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;border-radius:10px;border:1px solid var(--border)}
.age-sign-check{flex-shrink:0;width:22px;height:22px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:800;margin-top:1px}
.page-early-learning .age-sign-check{color:var(--navy)}
.age-sign-item p{font-size:14px;color:var(--text-m);line-height:1.65;margin:0}

/* ── FAQ ── */
.age-faq-list{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.age-faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.age-faq-q{width:100%;background:none;border:none;padding:16px 20px;text-align:left;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.age-faq-q .arr{font-size:16px;transition:transform .2s;color:var(--accent-d)}
.age-faq-item.open .age-faq-q .arr{transform:rotate(180deg)}
.age-faq-a{display:none;padding:0 20px 16px;font-size:13.5px;color:var(--text-m);line-height:1.7}
.age-faq-item.open .age-faq-a{display:block}

/* ── CTA Section ── */
.age-cta{padding:64px 24px;text-align:center}
.page-early-learning .age-cta{background:linear-gradient(135deg,var(--sun) 0%,#E8940A 100%)}
.page-early-learning .age-cta h2{color:var(--navy)}
.page-early-learning .age-cta p{color:rgba(26,43,74,.75)}
.page-elementary .age-cta{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 100%)}
.page-elementary .age-cta h2,.page-elementary .age-cta p{color:#fff}
.page-elementary .age-cta p{opacity:.8}
.page-middle-school .age-cta{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-d) 100%)}
.page-middle-school .age-cta h2,.page-middle-school .age-cta p{color:#fff}
.page-middle-school .age-cta p{opacity:.8}
.page-high-school .age-cta{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-m) 100%);border-top:4px solid var(--gold)}
.page-high-school .age-cta h2,.page-high-school .age-cta p{color:#fff}
.page-high-school .age-cta p{opacity:.72}
.age-cta h2{font-family:var(--serif);font-size:clamp(22px,3.5vw,36px);margin-bottom:12px}
.age-cta p{font-size:15px;margin-bottom:28px;max-width:500px;margin-left:auto;margin-right:auto}
.age-cta-btn{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:16px;padding:15px 36px;border-radius:100px;text-decoration:none;transition:.2s}
.page-high-school .age-cta-btn{background:var(--teal)}
.age-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,43,74,.3)}

/* ── Ages Navigation ── */
.ages-nav-section{background:var(--ap-gray);padding:40px 24px}
.ages-nav-inner{max-width:760px;margin:0 auto}
.ages-nav-inner h3{font-family:var(--serif);font-size:20px;color:var(--navy);margin-bottom:16px}
.ages-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ages-nav-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-decoration:none;transition:.15s;display:block}
.ages-nav-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.07)}
.ages-nav-card .age-range{display:block;font-size:11px;font-weight:800;color:var(--accent-d);margin-bottom:3px}
.ages-nav-card .age-card-title{display:block;font-size:14px;font-weight:700;color:var(--navy)}
.ages-nav-card.current{border-color:var(--accent);border-width:2px;background:var(--accent-l)}

/* ── Elementary: Subject Cards ── */
.age-subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:24px 0}
.age-subject-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;position:relative;overflow:hidden}
.age-subject-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.age-subject-card.reading::before{background:#2D9A5F}
.age-subject-card.math::before{background:#E05A4E}
.age-subject-card.writing::before{background:#F5A623}
.age-subject-card.exec::before{background:#0D9E82}
.age-subject-card .icon{font-size:30px;margin-bottom:10px}
.age-subject-card h3{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px}
.age-subject-card p{font-size:13px;color:var(--text-s);line-height:1.65;margin:0}

/* ── Elementary: Feature Rows ── */
.age-feature-row{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.07);border-radius:12px;padding:18px;margin-bottom:12px}
.age-feature-icon{flex-shrink:0;width:40px;height:40px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.age-feature-row h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.age-feature-row p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.65;margin:0}

/* ── Elementary: Compare Table ── */
.age-compare-wrap{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:24px 0}
.age-compare-head{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--navy)}
.age-compare-head div{padding:12px 14px;font-size:12px;font-weight:700;color:rgba(255,255,255,.9)}
.age-compare-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border)}
.age-compare-row:nth-child(even){background:var(--ap-gray)}
.age-compare-row div{padding:11px 14px;font-size:13px;color:var(--text-m);line-height:1.55}
.age-compare-row div:first-child{font-weight:600;color:var(--ap-text)}
.age-check{color:var(--teal);font-weight:700}
.age-cross{color:var(--coral);font-weight:700}

/* ── Middle School: Transition Grid ── */
.age-transition-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:24px 0}
.age-t-card{background:#fff;border-radius:14px;padding:20px;border:1px solid var(--border);border-top:4px solid var(--accent)}
.age-t-card .icon{font-size:26px;margin-bottom:8px}
.age-t-card h3{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:5px}
.age-t-card p{font-size:13px;color:var(--text-s);line-height:1.6;margin:0}

/* ── Middle School: Skills Grid ── */
.age-dark-section{background:var(--navy);padding:64px 24px}
.age-dark-inner{max-width:760px;margin:0 auto}
.age-dark-inner .age-section-label{color:var(--purple-l)}
.age-dark-inner h2{color:#fff;font-family:var(--serif);font-size:clamp(22px,3.5vw,34px);letter-spacing:-.02em;margin-bottom:28px}
.age-skill-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.age-skill-card{background:rgba(255,255,255,.07);border-radius:12px;padding:18px}
.age-skill-card h3{font-size:14px;font-weight:700;color:var(--purple-l);margin-bottom:6px}
.age-skill-card p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.6;margin:0}
@media(max-width:520px){.age-skill-row{grid-template-columns:1fr}}

/* ── Middle School: Teen Note ── */
.age-teen-note{background:var(--amber-l);border-left:4px solid var(--amber);border-radius:0 10px 10px 0;padding:16px 18px;margin:20px 0}
.age-teen-note p{font-size:14px;color:var(--text-m);line-height:1.7;margin:0}
.age-teen-note strong{color:var(--amber);display:block;margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:.07em}

/* ── High School: Stats Bar ── */
.age-stats{background:var(--teal);padding:20px 24px;display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
.age-stat{text-align:center}
.age-stat .num{font-size:24px;font-weight:800;color:#fff}
.age-stat .label{font-size:11px;color:rgba(255,255,255,.75);font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ── High School: Dark hero overrides ── */
.page-high-school .age-hero{background:var(--navy)}
.page-high-school .age-hero h1{color:#fff}
.page-high-school .age-hero h1 em{color:var(--gold)}
.page-high-school .age-hero-lead{color:rgba(255,255,255,.75)}
.page-high-school .age-btn-primary{background:var(--gold);color:var(--navy);font-weight:800}
.page-high-school .age-btn-primary:hover{background:#b8741f}
.page-high-school .age-btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.page-high-school .age-btn-ghost:hover{background:rgba(255,255,255,.08)}

/* ── High School: Stakes Grid ── */
.age-stakes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:20px 0}
.age-stake-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
.age-stake-card .icon{font-size:24px;margin-bottom:8px}
.age-stake-card h3{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:5px}
.age-stake-card p{font-size:12.5px;color:var(--text-s);line-height:1.6;margin:0}

/* ── High School: Service Items ── */
.age-service-list{display:flex;flex-direction:column;gap:14px}
.age-service-item{display:flex;gap:14px;background:rgba(255,255,255,.06);border-radius:12px;padding:18px;border-left:4px solid var(--teal)}
.age-service-icon{flex-shrink:0;font-size:22px;margin-top:2px}
.age-service-item h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:5px}
.age-service-item p{font-size:13px;color:rgba(255,255,255,.68);line-height:1.65;margin:0}

/* ── High School: College Box ── */
.age-college-box{background:var(--gold-l);border:1px solid var(--gold);border-radius:14px;padding:24px;margin:24px 0}
.age-college-box h3{font-family:var(--serif);font-size:20px;color:var(--navy);margin-bottom:10px}
.age-college-box p{font-size:14px;color:var(--text-m);line-height:1.7;margin-bottom:12px}
.age-college-box ul{padding-left:18px}
.age-college-box li{font-size:14px;color:var(--text-m);line-height:1.7;margin-bottom:4px}
.age-college-box li::marker{color:var(--gold)}

/* ── High School: Warning Box ── */
.age-warning-box{background:var(--red-l);border-left:4px solid var(--red);border-radius:0 10px 10px 0;padding:16px 18px;margin:20px 0}
.age-warning-box strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--red);margin-bottom:4px}
.age-warning-box p{font-size:14px;color:var(--text-m);line-height:1.7;margin:0}

/* ── Responsive ── */
@media(max-width:560px){
  .age-hero{padding:48px 18px 0}
  .age-section{padding:48px 18px}
  .age-approach{padding:48px 18px}
  .age-dark-section{padding:48px 18px}
  .age-cta{padding:48px 18px}
}