/* DAT Saturday School — shared site theme (scoped under .dat-site) */
html{scroll-behavior:smooth}

.dat-site{
  --primary:#0b6e6e; --primary-dark:#084f4f; --accent:#c79a3a; --accent-light:#e6c877;
  --ink:#1f2933; --muted:#5b6773; --line:#e3e8ec; --bg:#f4f7f8; --radius:16px;
  color:var(--ink); line-height:1.6;
  font-size:16px; /* pin base so theme root (e.g. 62.5%) can't shrink our em text */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.dat-site *{box-sizing:border-box}
.dat-site a{color:var(--primary);text-decoration:none}
.dat-site .wrap{max-width:1080px;margin:0 auto;padding:0 1.25em}
.dat-site section{padding:4.5em 0;scroll-margin-top:64px}

/* In-page anchor menu (home page only) — slim bar, not a site header */
.dat-subnav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.dat-subnav-inner{display:flex;gap:1.4em;align-items:center;justify-content:center;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:.7em 1.25em}
.dat-subnav a{color:var(--ink);font-weight:600;font-size:.95em}
.dat-subnav a:hover{color:var(--primary)}
.dat-subnav .dat-subnav-cta{background:var(--primary);color:#fff !important;padding:.45em 1em;border-radius:8px}
.dat-subnav .dat-subnav-cta:hover{background:var(--primary-dark)}
@media(max-width:600px){
  .dat-subnav-inner{gap:1em;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
}
.dat-site h2.sec-title{font-size:2em;font-weight:800;text-align:center;margin:0 0 .6em}
.dat-site .sec-sub{text-align:center;color:var(--muted);max-width:640px;margin:1em auto 2.6em;font-size:1.05em}
.dat-site .accent-rule{width:64px;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:3px;margin:.7em auto 0}

/* Nav */
.dat-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.dat-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.85em 1.25em;max-width:1080px;margin:0 auto}
.dat-brand{display:flex;align-items:center;gap:.6em;font-weight:800;color:var(--primary-dark);font-size:1.05em}
.dat-brand:hover{color:var(--primary-dark)}
.dat-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;display:grid;place-items:center;font-weight:800;font-size:1em}
.dat-nav-links{display:flex;gap:1.4em;align-items:center}
.dat-nav-links a{color:var(--ink);font-weight:600;font-size:.95em}
.dat-nav-links a:hover{color:var(--primary)}
.dat-nav-cta{background:var(--primary);color:#fff !important;padding:.55em 1.1em;border-radius:9px}
.dat-nav-cta:hover{background:var(--primary-dark)}
.dat-menu-toggle{display:none;background:none;border:none;font-size:1.6em;cursor:pointer;color:var(--primary-dark);line-height:1}
@media(max-width:760px){
  .dat-nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:1em 1.25em;gap:1em;border-bottom:1px solid var(--line)}
  .dat-nav-links.open{display:flex}
  .dat-menu-toggle{display:block}
}

/* Buttons */
.dat-site .btn{display:inline-flex;align-items:center;justify-content:center;padding:.85em 1.7em;border-radius:10px;font-weight:700;font-size:1em;cursor:pointer;border:none;transition:transform .05s,background .15s,box-shadow .15s}
.dat-site .btn:active{transform:translateY(1px)}
.dat-site .btn-gold{background:var(--accent);color:#241c00}
.dat-site .btn-gold:hover{background:var(--accent-light)}
.dat-site .btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.dat-site .btn-outline:hover{background:rgba(255,255,255,.12)}
.dat-site .btn-primary{background:var(--primary);color:#fff}
.dat-site .btn-primary:hover{background:var(--primary-dark)}
.dat-site .btn-row{display:flex;gap:1em;justify-content:center;flex-wrap:wrap}

/* Hero */
.dat-hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;position:relative;overflow:hidden}
.dat-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent-light))}
.dat-hero .wrap{padding-top:5em;padding-bottom:5em;text-align:center;position:relative;z-index:1}
.dat-hero .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8em;opacity:.9;margin-bottom:1em}
.dat-hero h1{font-size:2.9em;font-weight:800;line-height:1.15;margin:0 0 1em}
.dat-hero p.lead{font-size:1.2em;max-width:680px;margin:0 auto 2em;color:rgba(255,255,255,.94)}
.dat-hero .facts{display:flex;flex-wrap:wrap;gap:1.5em;justify-content:center;margin-bottom:2.2em}
.dat-hero .fact{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:.7em 1.1em;font-weight:600;font-size:.95em}
@media(max-width:600px){.dat-hero h1{font-size:2.1em}}

/* About */
.dat-about .wrap{max-width:820px}
.dat-about p{font-size:1.08em;color:#374350;margin:0 0 1.1em}

/* Program cards */
.dat-program{background:var(--bg)}
.dat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3em}
@media(max-width:820px){.dat-cards{grid-template-columns:1fr}}
.dat-card2{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6em;box-shadow:0 6px 20px rgba(8,79,79,.05)}
.dat-card2 .ico{width:46px;height:46px;border-radius:11px;background:#e7f2f2;color:var(--primary-dark);display:grid;place-items:center;font-size:1.4em;margin-bottom:1em}
.dat-card2 h3{font-size:1.15em;margin:0 0 .5em}
.dat-card2 p{color:var(--muted);font-size:.97em;margin:0}

/* Tuition */
.dat-fees{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3em;margin-bottom:1.6em}
@media(max-width:820px){.dat-fees{grid-template-columns:1fr}}
.dat-fee{border:1px solid var(--line);border-radius:var(--radius);padding:1.8em 1.5em;text-align:center;background:#fff;position:relative}
.dat-fee.featured{border-color:var(--primary);box-shadow:0 10px 28px rgba(11,110,110,.12)}
.dat-fee .tier{font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.82em}
.dat-fee .price{font-size:2.6em;font-weight:800;color:var(--primary-dark);margin:.4em 0 .1em}
.dat-fee .price span{font-size:1em;font-weight:600;color:var(--muted)}
.dat-fee .note{color:var(--muted);font-size:.92em}
.dat-fee-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#241c00;font-size:.72em;font-weight:800;padding:.2em .7em;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.dat-fee-extra{background:#fff8ea;border:1px solid #f0e2c0;border-radius:12px;padding:1.1em 1.3em;text-align:center;color:#6b5518;font-size:1em}

/* Calendar */
.dat-calendar{background:var(--bg)}
.dat-cal-note{max-width:720px;margin:1.4em auto 2em;text-align:center;color:var(--muted);font-size:.95em}
.dat-cal-list{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dat-cal-row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1em 1.4em;border-bottom:1px solid var(--line)}
.dat-cal-row:last-child{border-bottom:none}
.dat-cal-row .ev{font-weight:600}
.dat-cal-row .ev small{display:block;color:var(--muted);font-weight:400;font-size:.85em}
.dat-cal-row .date{color:var(--primary-dark);font-weight:700;white-space:nowrap;background:#e7f2f2;padding:.35em .75em;border-radius:8px;font-size:.9em}
.dat-cal-row.holiday .date{background:#fdecec;color:#b42318}
.dat-cal-row.term .date{background:#e7f6ee;color:#1f7a4d}
.dat-placeholder-tag{display:inline-block;margin-left:.4em;font-size:.68em;font-weight:700;color:#b45309;background:#fef3c7;padding:.05em .4em;border-radius:5px;vertical-align:middle}

/* Enroll CTA */
.dat-enroll-cta{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;text-align:center}
.dat-enroll-cta h2{font-size:2em;font-weight:800;margin:0 0 .6em}
.dat-enroll-cta p{color:rgba(255,255,255,.92);max-width:600px;margin:0 auto 2.2em;font-size:1.08em}
.dat-enroll-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.3em;max-width:760px;margin:0 auto}
@media(max-width:640px){.dat-enroll-cards{grid-template-columns:1fr}}
.dat-enroll-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);padding:1.8em 1.5em}
.dat-enroll-card h3{font-size:1.25em;margin:0 0 .5em}
.dat-enroll-card p{font-size:.95em;margin:0 0 1.3em;color:rgba(255,255,255,.85)}

/* Footer */
.dat-footer{background:#082e2e;color:#c9d6d6;padding:2.6em 0;text-align:center;font-size:.92em}
.dat-footer .dat-brand{color:#fff;justify-content:center;margin-bottom:.8em}
.dat-footer .dat-mark{color:#fff}
.dat-footer a{color:var(--accent-light)}
.dat-footer p{margin:.3em 0}

/* Page wrapper for the enrollment form so it sits nicely between nav & footer */
.dat-page{background:var(--bg);padding:3em 1.25em}

/* Editable intro text shown above the enrollment form */
.dat-enroll-intro{max-width:720px;margin:0 auto 1.5em;color:var(--ink);line-height:1.6}
.dat-enroll-intro h2{font-size:1.5em;margin:0 0 .5em;color:var(--primary-dark);font-weight:800}
.dat-enroll-intro p{font-size:1.02em;margin:0 0 1em}
.dat-enroll-intro p:last-child{margin-bottom:0}

/* Full-bleed: break out of the theme's centered content container so section
   backgrounds span the full browser width regardless of the active theme. */
.dat-site{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:hidden;
}

/* -------- Mobile refinements -------- */
@media(max-width:600px){
  .dat-site section{padding:3em 0}
  .dat-site .wrap{padding:0 1.1em}
  .dat-site h2.sec-title{font-size:1.55em}
  .dat-site .sec-sub{font-size:.98em;margin:.8em auto 2em}

  .dat-hero .wrap{padding-top:3.5em;padding-bottom:3.5em}
  .dat-hero h1{font-size:2em}
  .dat-hero p.lead{font-size:1.05em}
  .dat-hero .facts{flex-direction:column;gap:.6em;align-items:stretch}
  .dat-hero .fact{text-align:center}

  /* Stack CTAs and make them full-width & easy to tap */
  .dat-site .btn-row{flex-direction:column}
  .dat-site .btn-row .btn{width:100%}
  .dat-site .btn{padding:.9em 1.2em}

  .dat-page{padding:1.5em .9em}
  .dat-fee .price{font-size:2.2em}

  /* Calendar rows stack date under the event on small screens */
  .dat-cal-row{flex-direction:column;align-items:flex-start;gap:.5em;padding:.9em 1.1em}

  .dat-nav-inner{padding:.75em 1.1em}
  .dat-footer{padding:2em 0}
}

/* Larger tap targets in the collapsed mobile menu */
@media(max-width:760px){
  .dat-nav-links a{padding:.35em 0;font-size:1em}
  .dat-nav-links .dat-nav-cta{text-align:center}
}