/* =========================================================
   St. Anthony's Learning Center — shared styles (mockup)
   Warm, playful, modern. Brand pulled from live site:
   red oval + gold lettering, handprint-tree, peach background.
   ========================================================= */

:root{
  /* Core brand */
  --red:        #D9504A;   /* warm, softened version of logo oval red */
  --red-deep:   #B73B36;
  --gold:       #EBA433;   /* logo lettering gold */
  --gold-deep:  #C9851B;
  --cream:      #FFF7EC;   /* page background (echoes peach site bg) */
  --peach:      #FBE6CC;
  --ink:        #4A3A33;   /* warm dark brown text */
  --ink-soft:   #6E5A50;

  /* Playful accent rainbow (from the handprint tree) */
  --sun:    #F6C544;
  --sky:    #5BAEDB;
  --leaf:   #74B65A;
  --grape:  #9B6BC3;
  --coral:  #E2725B;

  --card:   #FFFFFF;
  --shadow: 0 14px 34px -16px rgba(120, 70, 40, .35);
  --shadow-sm: 0 6px 18px -10px rgba(120, 70, 40, .35);
  --radius: 22px;
  --radius-sm: 14px;
  --maxw: 1140px;

  --font-head: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Quicksand", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.12; color:var(--ink); margin:0 0 .4em; font-weight:700; }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1rem; }
a{ color:var(--red-deep); text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.center{ text-align:center; }
.muted{ color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:600; font-size:1.02rem;
  padding:.72em 1.5em; border-radius:999px; border:none; cursor:pointer;
  background:var(--red); color:#fff; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-3px) rotate(-1deg); box-shadow:0 16px 26px -12px rgba(183,59,54,.6); background:var(--red-deep); }
.btn:active{ transform:translateY(-1px); }
.btn--gold{ background:var(--gold); color:#5a3d12; }
.btn--gold:hover{ background:var(--gold-deep); box-shadow:0 16px 26px -12px rgba(201,133,27,.6); }
.btn--ghost{ background:#fff; color:var(--red-deep); box-shadow:inset 0 0 0 2px var(--red); }
.btn--ghost:hover{ background:var(--red); color:#fff; box-shadow:none; }
.btn--lg{ font-size:1.12rem; padding:.85em 1.8em; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,247,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid rgba(235,164,51,.35);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:10px 22px; max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand:hover{ text-decoration:none; }
.brand .logo-svg{ width:54px; height:54px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text .name{
  font-family:var(--font-head); font-weight:800; font-size:1.18rem;
  color:var(--red-deep); letter-spacing:.2px;
}
.brand-text .sub{ font-size:.72rem; color:var(--gold-deep); font-weight:600; letter-spacing:.5px; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--font-head); font-weight:500; color:var(--ink);
  padding:.45em .8em; border-radius:999px; transition:background .15s ease, color .15s ease;
}
.nav-links a:hover{ background:var(--peach); color:var(--red-deep); }
.nav-links a.active{ background:var(--red); color:#fff; }
.nav-cta{ margin-left:6px; }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:26px; height:3px; background:var(--red-deep); border-radius:3px; transition:.25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); padding:8px 16px 18px;
    border-bottom:3px solid var(--gold);
    box-shadow:var(--shadow); display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }

  /* Regular nav links: plain, evenly-spaced, tappable rows */
  .nav-links a{
    display:block; width:100%; text-align:left;
    padding:1em .25em; font-size:1.08rem; font-weight:600;
    color:var(--ink); background:transparent; border-radius:0;
    border-bottom:1px solid rgba(235,164,51,.25);
  }
  .nav-links a:hover,
  .nav-links a:focus{ background:transparent; color:var(--red-deep); }
  /* Active page: colored text only — no pill background */
  .nav-links a.active{ background:transparent; color:var(--red-deep); }

  /* Only the primary CTA stays a button */
  .nav-cta{ margin:16px 0 0; }
  .nav-cta a{ border-bottom:none; }
  .nav-cta .btn{
    display:flex; justify-content:center; width:100%;
    padding:.85em 1.5em; font-size:1.05rem; color:#5a3d12;
  }
}

/* ---------- Sections ---------- */
section{ position:relative; }
.section{ padding:72px 0; }
.section--tight{ padding:48px 0; }
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-weight:600;
  color:var(--gold-deep); text-transform:uppercase; letter-spacing:2px;
  font-size:.82rem; margin-bottom:.4em;
}
.lead{ font-size:1.18rem; color:var(--ink-soft); max-width:680px; }

/* soft color band backgrounds */
.band-cream{ background:var(--cream); }
.band-peach{ background:linear-gradient(180deg,#FBE6CC, #FFF1DD); }
.band-white{ background:#fff; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%, #FFF1DD 0%, #FBE6CC 55%, #F8DCBC 100%);
  padding:64px 0 90px;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero h1{ margin-bottom:.25em; }
.hero h1 .hl{ color:var(--red); }
.hero .lead{ margin-bottom:1.6em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-art{ position:relative; }
@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-cta{ justify-content:center; }
  .hero .lead{ margin-left:auto; margin-right:auto; }
}

/* ---------- Quick links ---------- */
.quicklinks{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ql-card{
  background:#fff; border-radius:var(--radius); padding:30px 26px; text-align:center;
  box-shadow:var(--shadow); border-bottom:6px solid var(--c, var(--gold));
  transition:transform .2s ease, box-shadow .2s ease;
}
.ql-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(120,70,40,.5); }
.ql-ico{ width:64px; height:64px; margin:0 auto 14px; }
.ql-card h3{ margin-bottom:.3em; }
.ql-card p{ color:var(--ink-soft); margin-bottom:1.1em; font-size:.97rem; }
@media (max-width: 760px){ .quicklinks{ grid-template-columns:1fr; } }

/* ---------- Program cards ---------- */
.prog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.prog-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.prog-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -18px rgba(120,70,40,.5); }
.prog-top{ padding:26px 26px 18px; color:#fff; position:relative; }
.prog-top h3{ color:#fff; font-size:1.5rem; margin:0; }
.prog-badge{
  display:inline-block; background:rgba(255,255,255,.28); color:#fff;
  font-family:var(--font-head); font-weight:600; font-size:.78rem;
  padding:.25em .8em; border-radius:999px; margin-bottom:.6em; letter-spacing:.5px;
}
.prog-top .hours{ font-weight:600; opacity:.95; margin:0; }
.prog-ico{ position:absolute; right:20px; top:18px; width:54px; height:54px; opacity:.95; }
.prog-body{ padding:22px 26px 26px; }
.prog-body p.note{ font-size:.82rem; color:var(--ink-soft); font-style:italic; margin-top:10px; }

/* color variants */
.c-pre   .prog-top{ background:linear-gradient(135deg,var(--coral),#d65a44); }
.c-pre   { border-top:6px solid var(--coral); }
.c-before .prog-top{ background:linear-gradient(135deg,var(--sky),#3f97c7); }
.c-before{ border-top:6px solid var(--sky); }
.c-after .prog-top{ background:linear-gradient(135deg,var(--leaf),#5aa043); }
.c-after { border-top:6px solid var(--leaf); }
.c-summer .prog-top{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.c-summer{ border-top:6px solid var(--gold); }
.c-grape .prog-top{ background:linear-gradient(135deg,var(--grape),#7e52a6); }
.c-grape { border-top:6px solid var(--grape); }
@media (max-width: 760px){ .prog-grid{ grid-template-columns:1fr; } }

/* ---------- Tables ---------- */
.price-table{ width:100%; border-collapse:collapse; font-size:.98rem; margin:.4em 0 0; }
.price-table th, .price-table td{ padding:.6em .7em; text-align:left; }
.price-table thead th{
  background:var(--peach); color:var(--ink); font-family:var(--font-head);
  font-weight:600; border-bottom:2px solid var(--gold);
}
.price-table tbody tr:nth-child(even){ background:#FFF7EC; }
.price-table td.price{ font-weight:700; color:var(--red-deep); white-space:nowrap; }
.price-table th:first-child{ border-top-left-radius:10px; }
.price-table th:last-child{ border-top-right-radius:10px; }

.table-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px 26px 30px; margin-bottom:28px; overflow:hidden;
}
.table-card h3{ display:flex; align-items:center; gap:10px; }
.table-card .pill{
  font-size:.74rem; font-family:var(--font-head); font-weight:600; color:#fff;
  padding:.2em .7em; border-radius:999px;
}
.pill-coral{ background:var(--coral); } .pill-sky{ background:var(--sky); }
.pill-leaf{ background:var(--leaf); } .pill-gold{ background:var(--gold-deep); }
.pill-grape{ background:var(--grape); }
.table-scroll{ overflow-x:auto; }

/* ---------- Generic content cards ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cards-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.feature{
  background:#fff; border-radius:var(--radius); padding:28px 24px;
  box-shadow:var(--shadow-sm); border-top:5px solid var(--c,var(--gold));
}
.feature .f-ico{ width:50px; height:50px; margin-bottom:12px; }
.feature h3{ margin-bottom:.3em; }
.feature p{ color:var(--ink-soft); font-size:.96rem; margin:0; }
@media (max-width: 860px){ .cards-3{ grid-template-columns:1fr; } .cards-2{ grid-template-columns:1fr; } }

/* values chips */
.values{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.chip{
  background:#fff; box-shadow:var(--shadow-sm); border-radius:999px;
  padding:.6em 1.2em; font-family:var(--font-head); font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:.5em;
}
.chip .dot{ width:12px; height:12px; border-radius:50%; }

/* ---------- Placeholders ---------- */
.ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(45deg,#fbe6cc,#fbe6cc 14px,#f6dcb8 14px,#f6dcb8 28px);
  border:2px dashed var(--gold-deep);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--gold-deep); min-height:220px; padding:18px;
}
.ph span{ font-family:var(--font-head); font-weight:600; font-size:.95rem; line-height:1.4; max-width:90%; }
.ph .pin{ display:block; font-size:1.6rem; margin-bottom:6px; }
.ph--tall{ min-height:340px; }
.ph--wide{ aspect-ratio:16/9; min-height:0; }

/* ---------- Mission / split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split--text-first{ }
@media (max-width: 820px){ .split{ grid-template-columns:1fr; } }

.quote-block{
  background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff;
  border-radius:var(--radius); padding:40px 38px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.quote-block::before{
  content:"\201C"; position:absolute; top:-10px; left:18px;
  font-family:Georgia, serif; font-size:7rem; opacity:.18;
}
.quote-block p{ font-size:1.22rem; font-family:var(--font-head); margin:0; position:relative; }

/* staff welcome */
.welcome{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:34px 32px; display:grid; grid-template-columns:120px 1fr; gap:26px; align-items:start;
}
.welcome .avatar{
  width:120px; height:120px; border-radius:50%; background:var(--peach);
  border:3px dashed var(--gold-deep); display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep); font-family:var(--font-head); font-weight:600; font-size:.72rem; text-align:center; padding:8px;
}
.welcome .sign{ font-family:"Baloo 2",cursive; color:var(--red-deep); font-size:1.3rem; margin-top:.4em; }
@media (max-width: 620px){ .welcome{ grid-template-columns:1fr; justify-items:center; text-align:center; } }

/* ---------- Resources / docs ---------- */
.doc-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.doc{
  display:flex; align-items:center; gap:16px; background:#fff; border-radius:var(--radius-sm);
  padding:16px 18px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;
  border-left:5px solid var(--c,var(--red));
}
.doc:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.doc .doc-ico{ width:40px; height:48px; flex:none; }
.doc .doc-meta{ flex:1; }
.doc .doc-meta strong{ display:block; font-family:var(--font-head); color:var(--ink); }
.doc .doc-meta small{ color:var(--ink-soft); }
.doc .doc-dl{ font-family:var(--font-head); font-weight:600; color:var(--red-deep); white-space:nowrap; }
@media (max-width: 700px){ .doc-list{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.form-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 30px 34px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.92rem; margin-bottom:6px; color:var(--ink); }
.field input, .field select, .field textarea{
  width:100%; padding:.7em .9em; border:2px solid var(--peach); border-radius:12px;
  font-family:var(--font-body); font-size:1rem; background:#FFFDF9; color:var(--ink); transition:border .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ min-height:120px; resize:vertical; }
.req{ color:var(--red); }
.checkbox{ display:flex; align-items:center; gap:10px; font-family:var(--font-body); }
.checkbox input{ width:auto; }
@media (max-width: 620px){ .form-row{ grid-template-columns:1fr; } }

/* contact info block */
.info-list{ list-style:none; padding:0; margin:0; }
.info-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; font-size:1.02rem; }
.info-list .ico{ width:26px; height:26px; flex:none; margin-top:2px; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink); color:#FBE6CC; margin-top:10px; padding:48px 0 26px;
}
.site-footer a{ color:#FBE6CC; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
.footer-grid h4{ color:#fff; font-size:1.05rem; margin-bottom:.7em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid ul li{ margin-bottom:8px; }
.footer-grid ul a:hover{ color:var(--gold); }
.footer-brand{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.footer-brand .logo-svg{ width:48px; height:48px; }
.footer-bottom{
  border-top:1px solid rgba(251,230,204,.2); margin-top:34px; padding-top:18px;
  text-align:center; font-size:.85rem; color:rgba(251,230,204,.7);
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; gap:24px; } }

/* ---------- Flags / mockup notes ---------- */
.flag-note{
  background:#FFF3D6; border:1px solid var(--gold); border-left:5px solid var(--gold-deep);
  border-radius:12px; padding:12px 16px; font-size:.88rem; color:#7a5a16; margin:14px 0;
}
.flag-note strong{ color:#5a3d12; }
.mock-banner{
  background:var(--ink); color:#FBE6CC; text-align:center; font-size:.82rem;
  padding:7px 14px; font-family:var(--font-head); letter-spacing:.3px;
}
.mock-banner b{ color:var(--gold); }

/* ---------- Scroll-in animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .float, .float-slow, .sway{ animation:none !important; }
}

/* ---------- Floating deco ---------- */
.deco{ position:absolute; pointer-events:none; z-index:0; }
.float{ animation:floaty 6s ease-in-out infinite; }
.float-slow{ animation:floaty 9s ease-in-out infinite; }
.sway{ animation:sway 7s ease-in-out infinite; transform-origin:bottom center; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
@keyframes sway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }
.hero .container{ position:relative; z-index:2; }

/* wavy divider */
.wave{ display:block; width:100%; height:60px; }
.section-pad-0{ padding-top:0; }