/* My First Place Academy — staging preview stylesheet */
:root{
  --teal:#0f7a72;
  --teal-dark:#0b5b55;
  --coral:#ff7a59;          /* brand accent — badges, hover, non-text uses */
  --coral-dark:#e85f3f;
  /* Button fill. The bright coral gives white text only 2.57:1; this clears the
     4.5:1 AA floor at 4.51:1 while still reading as the same colour family. */
  --coral-btn:#cf4a26;
  --coral-btn-hover:#b93c19;
  --sun:#ffc247;
  --cream:#fff8ef;
  --ink:#20302e;
  --gray:#5a6b68;
  --line:#e7ded0;
  --white:#ffffff;
  --radius:16px;
  --shadow:0 10px 30px rgba(15,60,55,.10);
  --shadow-sm:0 4px 14px rgba(15,60,55,.08);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden; max-width:100%;}
body{
  margin:0; font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.6;
}
img{max-width:100%; display:block; border-radius:var(--radius);}
a{color:var(--teal-dark);}
h1,h2,h3{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.2; color:var(--teal-dark); margin:0 0 .5em;}
h1{font-size:clamp(1.9rem,4vw,2.9rem);}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:1.4em;}
h3{font-size:1.15rem; margin-top:1.2em;}
p{margin:0 0 1em;}
ul{padding-left:1.2em;}
li{margin-bottom:.4em;}
.container{max-width:1120px; margin:0 auto; padding:0 20px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.85em 1.4em; border-radius:999px; font-weight:700; text-decoration:none; border:2px solid transparent; cursor:pointer; font-size:1rem; transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--coral-btn); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--coral-btn-hover);}
.btn-outline{background:transparent; border-color:#fff; color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.15);}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:var(--teal-dark);}
.btn-block{width:100%;}

/* Top utility bar */
.topbar{background:var(--teal-dark); color:#fff; font-size:.85rem; padding:.4em 0;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.4em; min-width:0;}
.topbar .container span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* 44px minimum tap target — verified by hit-test on a 390px viewport. */
.topbar a{color:#fff; text-decoration:none; font-weight:600; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; min-height:44px; padding:0 .4em;}
.topbar a:hover{text-decoration:underline;}
@media (max-width:480px){ .topbar .container span{display:none;} .topbar .container{justify-content:center;} }

/* Nav */
header.site-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:.7em 0; gap:.6em; min-width:0;}
.brand{display:flex; align-items:center; gap:.6em; text-decoration:none; color:var(--teal-dark); font-weight:800; font-size:1.15rem; min-width:0; flex-shrink:1;}
.brand span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.brand .logo-badge{width:42px; height:42px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--coral)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; font-weight:900;}
nav.main-nav{display:none;}
nav.main-nav ul{display:flex; gap:1.6em; list-style:none; padding:0; margin:0;}
nav.main-nav a{text-decoration:none; color:var(--ink); font-weight:600; font-size:.96rem;}
nav.main-nav a:hover{color:var(--coral);}
.nav-cta{display:flex; align-items:center; gap:.5em; flex-shrink:0;}
.call-pill{display:inline-flex; align-items:center; gap:.4em; background:var(--cream); border:2px solid var(--teal); color:var(--teal-dark); font-weight:800; padding:.5em .8em; border-radius:999px; text-decoration:none; font-size:.92rem; white-space:nowrap; flex-shrink:0;}
.call-pill:hover{background:var(--teal); color:#fff;}
.call-pill .call-pill-text{display:none;}
.menu-toggle{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:none; border:2px solid var(--teal); color:var(--teal-dark); border-radius:10px; padding:.4em .6em; font-weight:800; flex-shrink:0;}
@media (min-width:560px){
  .call-pill .call-pill-text{display:inline;}
}
@media (min-width:900px){
  nav.main-nav{display:block;}
  .menu-toggle{display:none;}
}
.mobile-nav{display:none; flex-direction:column; padding:0 0 1em; gap:.2em;}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:.6em 0; text-decoration:none; color:var(--ink); font-weight:600; border-top:1px solid var(--line);}

/* Hero (home) */
/* Photo hero. Both layers are decorative and MUST keep pointer-events:none —
   an overlay without it swallowed every mobile tap on four live Summit sites (9/3).
   `isolation:isolate` lets the layers sit at z-index -1/-2 behind the content
   without needing a z-index on any child. */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--teal-dark); color:#fff; padding:3.4em 0 3.8em;}
/* Sits at -3, behind the video at -2: it is what you see if the video is still
   loading, fails, or is suppressed for reduced-motion. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  background-image:url("/assets/real/1-year-plyground-1.jpg");
  background-size:cover; background-position:center 38%;
  transform:scale(1.04); /* hides edge softening from upscaling a 1024px source */
}
.hero-video{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  width:100%; height:100%; object-fit:cover; display:block; border:0;
}
/* Respect a reduced-motion preference — the still photo carries the hero instead. */
@media (prefers-reduced-motion:reduce){ .hero-video{display:none;} }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, rgba(11,91,85,.79) 0%, rgba(11,91,85,.70) 38%, rgba(11,91,85,.26) 100%);
}
/* Stacked layout puts text directly over the photo, so the scrim goes heavier. */
@media (max-width:959px){
  /* Heavy enough for white text over a busy photo, light enough that the photo
     still reads — at .95 it was indistinguishable from the old flat gradient. */
  .hero::after{background:linear-gradient(180deg, rgba(11,91,85,.58) 0%, rgba(11,91,85,.70) 45%, rgba(11,91,85,.79) 100%);}
  .hero::before{background-position:center 28%;}
}
.hero-grid{display:grid; grid-template-columns:1fr; gap:2em; align-items:center;}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.1fr .9fr;} }
.hero-eyebrow{display:inline-block; background:rgba(255,255,255,.15); padding:.3em .9em; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.03em; margin-bottom:.8em;}
/* The scrim is deliberately light so the video reads, so the type carries its own
   legibility — it has to survive the brightest frame of the loop, not the average. */
.hero h1{color:#fff; font-size:clamp(1.9rem,4.2vw,3rem); text-shadow:0 2px 6px rgba(0,0,0,.5), 0 4px 22px rgba(0,0,0,.4);}
.hero .sub{font-size:1.08rem; color:#f2fffc; max-width:46ch; margin-bottom:1.4em; text-shadow:0 1px 4px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.35);}
.hero .hero-eyebrow{background:rgba(3,48,44,.55); backdrop-filter:blur(2px);}
.hero .hero-note{text-shadow:0 1px 4px rgba(0,0,0,.6);}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.7em; margin-bottom:.4em;}
.hero-note{font-size:.82rem; color:#d7f0ec; margin-top:1em;}

/* Compact hero-form for interior pages */
.subhero{position:relative; isolation:isolate; overflow:hidden; background:var(--teal-dark); color:#fff; padding:2.4em 0;}
.subhero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:url("/assets/real/Hall-1-1.jpg");
  background-size:cover; background-position:center 45%;
}
.subhero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, rgba(11,91,85,.96) 0%, rgba(11,91,85,.92) 50%, rgba(11,91,85,.74) 100%);
}
.subhero .container{display:grid; gap:1.6em; grid-template-columns:1fr;}
@media (min-width:900px){ .subhero .container{grid-template-columns:1.1fr .9fr; align-items:center;} }
.subhero h1{color:#fff; font-size:clamp(1.6rem,3vw,2.3rem);}
.subhero p.sub{color:#eafcf8; max-width:52ch;}
.breadcrumb{font-size:.82rem; color:#d7f0ec; margin-bottom:.6em;}
.breadcrumb a{color:#d7f0ec;}

/* Lead form card */
.lead-card{background:#fff; color:var(--ink); border-radius:var(--radius); padding:1.4em; box-shadow:var(--shadow);}
.lead-card h3{margin-top:0; color:var(--teal-dark); font-size:1.15rem;}
.lead-card .fine{font-size:.78rem; color:var(--gray); margin-top:.6em;}
.field{margin-bottom:.8em;}
.field label{display:block; font-size:.82rem; font-weight:700; margin-bottom:.3em; color:var(--ink);}
.field input, .field select, .field textarea{
  width:100%; padding:.7em .8em; border-radius:10px; border:1.5px solid var(--line); font-size:.96rem; font-family:inherit; background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--teal);}
.field-row{display:grid; grid-template-columns:1fr; gap:.8em;}
@media (min-width:480px){ .field-row.two{grid-template-columns:1fr 1fr;} }
.hp-field{position:absolute; left:-9999px; top:-9999px;}
.form-msg{display:none; font-size:.9rem; font-weight:600; margin-top:.6em; padding:.6em .8em; border-radius:10px;}
.form-msg.success{display:block; background:#e4f7ef; color:#0d6b45;}
.form-msg.error{display:block; background:#fdeceb; color:#b3311c;}

/* Sections */
section{padding:2.6em 0;}
section.alt{background:#fff;}
.section-head{max-width:70ch; margin-bottom:1.2em;}
.grid-cards{display:grid; grid-template-columns:1fr; gap:1.2em;}
@media (min-width:700px){ .grid-cards{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .grid-cards.cols-4{grid-template-columns:repeat(4,1fr);} }
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.3em; box-shadow:var(--shadow-sm);}
.card h3{margin-top:0;}
.photo-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:.8em;}
@media (min-width:700px){ .photo-strip{grid-template-columns:repeat(4,1fr);} }
/* height:auto is required — without it the intrinsic height="768" attribute wins
   over aspect-ratio and the strip renders as full-height portraits. */
.photo-strip img{aspect-ratio:4/3; object-fit:cover; width:100%; height:auto;}

/* Language switch — a bilingual academy gets a real second site, not a token link */
.lang-switch{display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1.5px solid var(--teal); border-radius:999px; padding:.25em .9em; color:var(--teal-dark)!important; font-weight:700;}
.lang-switch:hover,.lang-switch:focus-visible{background:var(--teal); color:#fff!important;}
.mobile-nav .lang-switch{margin-top:.4em;}
/* The footer sits on --teal-dark, so the default pill colour rendered the label
   invisible against its own background. Light variant for any dark surface. */
.site-footer .lang-switch{color:#eafcf8!important; border-color:rgba(255,255,255,.55); padding:.15em .9em;}
.site-footer .lang-switch:hover,.site-footer .lang-switch:focus-visible{background:rgba(255,255,255,.14); color:#fff!important;}

/* Program grid — real classroom photo per program */
.program-grid{display:grid; grid-template-columns:1fr; gap:1em; margin:1.4em 0;}
@media (min-width:620px){ .program-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .program-grid{grid-template-columns:repeat(4,1fr);} }
.program-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;}
.program-card:hover,.program-card:focus-visible{transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.12);}
.program-card img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;}
.program-card-body{padding:.9em 1em 1.1em;}
.program-card-body h3{margin:0 0 .35em; color:var(--teal-dark); font-size:1.05rem;}
.program-card-body p{margin:0; font-size:.9rem; color:var(--gray);}

/* Proof strip — verified figures only */
.proof-strip{display:grid; grid-template-columns:1fr; gap:.9em; margin:0 0 1.6em;}
@media (min-width:620px){ .proof-strip{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .proof-strip{grid-template-columns:repeat(4,1fr);} }
.proof-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1em; text-align:center; box-shadow:var(--shadow-sm);}
.proof-figure{display:block; font-size:1.35rem; font-weight:800; color:var(--teal-dark); line-height:1.2;}
.proof-label{display:block; margin-top:.35em; font-size:.85rem; color:var(--gray);}

/* Brand logo mark (replaces the old "MF" text badge) */
.brand .logo-mark{height:42px; width:auto; max-width:120px; flex-shrink:0; display:block; object-fit:contain;}
/* At 390px the logo + full name + call pill + burger overflowed, truncating the
   name to "My First Place Aca...". Shrink the mark and the wordmark instead. */
@media (max-width:560px){
  .brand{font-size:.95rem; gap:.45em;}
  .brand .logo-mark{height:34px; max-width:62px;}
}

/* Google Business Profile map embed */
.map-embed{position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:1.2em 0; box-shadow:var(--shadow-sm);}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
@media (max-width:600px){ .map-embed{aspect-ratio:4/3;} }

/* Table (used on port-salerno age-by-age table) */
.table-wrap{overflow-x:auto; margin:1em 0;}
table{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden;}
th,td{padding:.7em .9em; text-align:left; border-bottom:1px solid var(--line); font-size:.94rem;}
th{background:var(--teal); color:#fff;}

/* City grid on service-area hub */
.city-grid{display:grid; grid-template-columns:1fr 1fr; gap:.8em;}
@media (min-width:700px){ .city-grid{grid-template-columns:repeat(3,1fr);} }
.city-grid a{display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:1em; text-decoration:none; color:var(--teal-dark); font-weight:700; text-align:center; box-shadow:var(--shadow-sm);}
.city-grid a:hover{border-color:var(--teal); color:var(--coral-dark);}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:1em 0; font-weight:700; font-size:1.02rem; color:var(--teal-dark); cursor:pointer; display:flex; justify-content:space-between; gap:1em;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a-inner{padding:0 0 1em; color:var(--ink);}

/* Footer */
footer.site-footer{background:var(--teal-dark); color:#eafcf8; padding:2.6em 0 1.4em; margin-top:2em;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:1.6em;}
@media (min-width:800px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;} }
footer.site-footer h4{color:#fff; font-size:.92rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.7em;}
footer.site-footer ul{list-style:none; padding:0; margin:0;}
footer.site-footer li{margin-bottom:.5em;}
footer.site-footer a{color:#eafcf8; text-decoration:none; font-size:.92rem;}
footer.site-footer a:hover{text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); margin-top:2em; padding-top:1.2em; font-size:.8rem; color:#bfe4dd; display:flex; flex-wrap:wrap; gap:.6em; justify-content:space-between;}

.trust-strip{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1em 0;}
.trust-strip .container{display:flex; flex-wrap:wrap; gap:1.4em; justify-content:center; font-size:.85rem; color:var(--gray); font-weight:600;}
.trust-strip span{white-space:nowrap;}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}