/* ==================================================================== */
/* ATTENTION PAGES - elementaryschoolassemblies.com                     */
/* VERSION 5. If the live copy does not say VERSION 5, re-upload.       */
/*                                                                      */
/* Serves all ten pages:                                                */
/*   ELEMENTARY - .ap-principals .ap-counselors .ap-pta .ap-library     */
/*                .ap-why                                               */
/*   MIDDLE SCH - .ap-ms-principals .ap-ms-counselors .ap-ms-pta        */
/*                .ap-ms-library                                        */
/*   OFFER PAGE - .ap-free                                              */
/*                                                                      */
/* v2 added the four middle school palettes. v3 added .ap-free.         */
/* v4 sets the Mago form height - see the form card block below.        */
/* v5 kills the ~20px white band above the hero. See CONTAINER RESET.   */
/* Palette lines only - no shared rule has ever been edited, so          */
/* re-uploading this file cannot alter any page already live.            */
/*                                                                      */
/* Everything is scoped under .ap-page so it cannot touch the rest of   */
/* the site. Nothing here edits a Global Color.                         */
/* ==================================================================== */

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

/* ---- palette. One accent per audience, everything else shared. ---- */
.ap-page{
  --paper:#FBF8F3;
  --paper2:#FFFFFF;
  --band:#F2EDE4;
  --ink:#1C2536;
  --body:#3A4557;
  --muted:#6B7688;
  --rule:#E2DACC;

  --deep:#1B3A6B;          /* headline / dark bands  */
  --accent:#F0A202;        /* the audience color     */
  --accent-soft:#FDF0D2;
  --cta:#E8552F;

  --f-head:'Bitter',Georgia,'Times New Roman',serif;
  --f-body:'Nunito Sans','Segoe UI',Helvetica,Arial,sans-serif;
}
.ap-principals{ --deep:#1B3A6B; --accent:#F0A202; --accent-soft:#FDF1D6; --cta:#E8552F; }
.ap-counselors{ --deep:#12615C; --accent:#F2994A; --accent-soft:#FCEBDA; --cta:#C8442A; }
.ap-pta       { --deep:#5E2A66; --accent:#F2B705; --accent-soft:#FBF0CF; --cta:#D6395F; }
.ap-library   { --deep:#1E5945; --accent:#E8552F; --accent-soft:#FBE2DA; --cta:#C4471F; }
.ap-why       { --deep:#123C7A; --accent:#FF7A1A; --accent-soft:#FFE9D6; --cta:#D6410F; }

/* ---- middle school. Same hue families as their elementary twins,  ---- */
/* ---- deepened and de-sweetened. A 13-year-old's principal should  ---- */
/* ---- recognize the navy but not feel sold a children's page.      ---- */
.ap-ms-principals{ --deep:#16273F; --accent:#D9A227; --accent-soft:#F7EFD9; --cta:#C6452A; }
.ap-ms-counselors{ --deep:#0E4A46; --accent:#E2853F; --accent-soft:#FAEADB; --cta:#B03D24; }
.ap-ms-pta       { --deep:#48224F; --accent:#D9A21A; --accent-soft:#F9F0D3; --cta:#BE3352; }
.ap-ms-library   { --deep:#183D33; --accent:#E2673A; --accent-soft:#FBE5DB; --cta:#B8431E; }

/* ---- the free-assembly offer page. Deep wine + gold on purpose:   ---- */
/* ---- a free offer dressed as an earned privilege, not a discount  ---- */
/* ---- bin. Keeps the page from undercutting his positioning.       ---- */
.ap-free         { --deep:#5A1F35; --accent:#E3A32A; --accent-soft:#F9EFD8; --cta:#C0392B; }

/* ==================================================================== */
/* CONTAINER RESET                                                      */
/* Same fix used on the Jurassic page: force the Elementor container    */
/* itself full width rather than dragging each band sideways with       */
/* 100vw. The 100vw trick needs a centered container; these pages do     */
/* not have one, and it leaves a white gutter down the edge.            */
/* gap:0 is the one that actually closes the seams between widgets.     */
/* ==================================================================== */
/* -------------------------------------------------------------- */
/* v5 - THE WHITE BAND ABOVE THE HERO                              */
/*                                                                  */
/* v1-v4 zeroed padding-LEFT and RIGHT here and nothing else, which */
/* left a white strip between the header and the hero on every      */
/* page. It was never a page-builder mistake:                       */
/*                                                                  */
/*   Elementor frontend.min.css:                                    */
/*     .e-con{ --padding-top:var(--container-default-padding-top,   */
/*                             10px); ... }                         */
/*     .e-con-full,.e-con>.e-con-inner{                             */
/*        padding-block-start:var(--padding-block-start);           */
/*        padding-block-end:var(--padding-block-end); }             */
/*                                                                  */
/* The Global Kit never defines --container-default-padding-*, so   */
/* EVERY container falls back to 10px top and 10px bottom. The      */
/* container holding the pasted HTML contributed 10px and the nav   */
/* container above it another 10px - about 20px of white.           */
/*                                                                  */
/* padding-left/right could never touch that. Zero the custom       */
/* properties AND the physical properties, both axes.               */
/* -------------------------------------------------------------- */
.elementor-element:has(> .elementor-widget-container > .ap-page),
.elementor-element:has(.ap-page),
.elementor-container:has(.ap-page),
.e-con:has(.ap-page),
.e-con-inner:has(.ap-page){
  width:100% !important; max-width:100% !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:0 !important; margin-right:0 !important;
  gap:0 !important;

  --padding-top:0 !important;        --padding-bottom:0 !important;
  --padding-block-start:0 !important; --padding-block-end:0 !important;
  --margin-top:0 !important;         --margin-bottom:0 !important;
  padding-top:0 !important;          padding-bottom:0 !important;
  padding-block-start:0 !important;  padding-block-end:0 !important;
  margin-top:0 !important;           margin-bottom:0 !important;
}

/* the HTML widget's own wrapper, and the kit's 20px widget spacing */
/* (.elementor-widget:not(:last-child){margin-block-end:20px})      */
.elementor-widget-html:has(.ap-page) > .elementor-widget-container{
  margin:0 !important; padding:0 !important;
}
.elementor-widget:has(.ap-page){ margin-block-end:0 !important; }

/* The container DIRECTLY ABOVE the pasted block - normally the nav */
/* - adds its own 10px bottom. It sits outside .ap-page, so no      */
/* descendant selector can reach it, but :has(+ ...) can. If a page */
/* is built differently this simply matches nothing and does no     */
/* harm. It also closes the seams between multiple stacked widgets. */
.e-con:has(+ .e-con .ap-page){
  --padding-bottom:0 !important; --padding-block-end:0 !important;
  padding-bottom:0 !important;   padding-block-end:0 !important;
}
.e-con:has(+ .e-con .ap-page) > .e-con-inner{
  padding-bottom:0 !important; padding-block-end:0 !important;
}

.ap-page .elementor-widget-container{ margin:0 !important; padding:0 !important; }

/* ==================================================================== */
/* BASE                                                                 */
/* ==================================================================== */
.ap-page{
  background:var(--paper);
  color:var(--body);
  font-family:var(--f-body);
  font-size:clamp(17px,1.15vw,18.5px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.ap-page *{ box-sizing:border-box; }
.ap-page img{ max-width:100%; height:auto; display:block; }
.ap-page a{ color:var(--deep); text-decoration:underline; text-underline-offset:2px; }
.ap-page a:hover{ color:var(--cta); }
.ap-page :focus-visible{ outline:3px solid var(--cta); outline-offset:3px; }
.ap-page [id]{ scroll-margin-top:120px; }

.ap-page h1,.ap-page h2,.ap-page h3,.ap-page h4{
  font-family:var(--f-head); color:var(--deep);
  line-height:1.18; margin:0 0 .5em; font-weight:700;
}
.ap-page h2{ font-size:clamp(26px,3.1vw,40px); }
.ap-page h3{ font-size:clamp(20px,2.1vw,26px); }
.ap-page p{ margin:0 0 1.15em; }
.ap-page strong{ color:var(--ink); font-weight:700; }

.ap-in{ width:min(1120px,92vw); margin:0 auto; }
.ap-narrow{ width:min(820px,92vw); margin:0 auto; }
.ap-sec{ padding:clamp(52px,6.5vw,92px) 0; }
.ap-band{ background:var(--band); }
.ap-white{ background:var(--paper2); }
.ap-dark{ background:var(--deep); color:#E8EEF7; }
.ap-dark h2,.ap-dark h3{ color:#fff; }
.ap-dark strong{ color:#fff; }
.ap-dark a{ color:var(--accent); }

.ap-eyebrow{
  font-family:var(--f-body); font-weight:800;
  font-size:13px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.ap-dark .ap-eyebrow{ color:var(--accent); }
.ap-lede{ font-size:clamp(19px,1.6vw,22px); color:var(--ink); line-height:1.62; }

/* ==================================================================== */
/* HERO                                                                 */
/* ==================================================================== */
.ap-hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.72)),
    var(--hero-img, none) center/cover no-repeat,
    var(--deep);
  color:#fff;
  padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px);
  text-align:center;
}
.ap-hero h1{
  color:#fff;
  font-size:clamp(31px,4.6vw,58px);
  letter-spacing:-.01em;
  margin:0 auto .6em;
  max-width:20ch;
  text-wrap:balance;
}
.ap-hero .ap-eyebrow{ color:var(--accent); }
.ap-hero .ap-lede{
  color:#EDF1F7; max-width:60ch; margin:0 auto;
  text-wrap:pretty;
}

/* ---- buttons ---- */
.ap-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px; }
.ap-btn{
  display:inline-block; padding:15px 30px; border-radius:999px;
  font-family:var(--f-body); font-weight:800; font-size:16px;
  letter-spacing:.02em; text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ap-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22); }
.ap-btn-1{ background:var(--cta); color:#fff !important; }
.ap-btn-2{ background:transparent; color:#fff !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.65); }
.ap-sec .ap-btn-2{ color:var(--deep) !important; box-shadow:inset 0 0 0 2px var(--deep); }

/* ==================================================================== */
/* CREDIBILITY BAR                                                      */
/* ==================================================================== */
.ap-stats{ background:var(--accent-soft); border-top:4px solid var(--accent); padding:clamp(26px,3vw,38px) 0; }
.ap-statgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.ap-stat b{
  display:block; font-family:var(--f-head); font-weight:700;
  font-size:clamp(26px,3vw,40px); color:var(--deep); line-height:1.05;
}
.ap-stat span{ display:block; font-size:13.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-top:6px; }
@media (max-width:760px){ .ap-statgrid{ grid-template-columns:repeat(2,1fr); gap:24px 14px; } }

/* ==================================================================== */
/* THE LETTER                                                           */
/* ==================================================================== */
.ap-letter{ font-size:clamp(17.5px,1.2vw,19px); }
.ap-letter p:first-of-type::first-letter{
  float:left; font-family:var(--f-head); font-weight:700;
  font-size:4.1em; line-height:.82; color:var(--accent);
  margin:.05em .12em 0 0;
}
.ap-sig{ margin-top:34px; padding-top:22px; border-top:1px solid var(--rule); }
.ap-sig b{ display:block; font-family:var(--f-head); font-size:22px; color:var(--deep); }
.ap-sig span{ font-size:14.5px; color:var(--muted); }

/* ---- pull quote ---- */
.ap-pull{
  margin:34px 0; padding:24px 30px;
  background:var(--accent-soft); border-left:5px solid var(--accent);
  border-radius:0 12px 12px 0;
  font-family:var(--f-head); font-size:clamp(19px,1.8vw,24px);
  font-style:italic; color:var(--deep); line-height:1.5;
}
.ap-pull p{ margin:0; }

/* ---- the worry list ---- */
.ap-worries{ list-style:none; margin:26px 0; padding:0; display:grid; gap:12px; }
.ap-worries li{
  background:var(--paper2); border:1px solid var(--rule); border-radius:12px;
  padding:16px 20px 16px 52px; position:relative;
  font-family:var(--f-head); font-style:italic; color:var(--ink); font-size:17.5px;
}
.ap-worries li::before{
  content:"?"; position:absolute; left:18px; top:15px;
  width:22px; height:22px; border-radius:50%; background:var(--accent);
  color:#fff; font-family:var(--f-body); font-style:normal; font-weight:800;
  font-size:14px; line-height:22px; text-align:center;
}

/* ==================================================================== */
/* CARD GRIDS                                                           */
/* ==================================================================== */
.ap-grid{ display:grid; gap:22px; }
.ap-g2{ grid-template-columns:repeat(2,1fr); }
.ap-g3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .ap-g3{ grid-template-columns:1fr; } .ap-g2{ grid-template-columns:1fr; } }

.ap-card{
  background:var(--paper2); border:1px solid var(--rule);
  border-radius:14px; padding:26px 26px 22px;
  box-shadow:0 2px 10px rgba(28,37,54,.05);
}
.ap-card h3{ margin-bottom:.45em; }
.ap-card p:last-child{ margin-bottom:0; }
.ap-card .ap-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--deep); color:#fff;
  font-family:var(--f-head); font-weight:700; font-size:19px;
  margin-bottom:14px;
}

/* ---- the reasons list (why-cris page) ---- */
.ap-reasons{ counter-reset:r; display:grid; gap:18px; }
.ap-reason{
  background:var(--paper2); border:1px solid var(--rule); border-radius:14px;
  padding:24px 26px 22px 76px; position:relative;
}
.ap-reason::before{
  counter-increment:r; content:counter(r);
  position:absolute; left:22px; top:23px;
  width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:var(--deep);
  font-family:var(--f-head); font-weight:700; font-size:19px;
  display:flex; align-items:center; justify-content:center;
}
.ap-reason h3{ margin-bottom:.4em; }
.ap-reason p:last-child{ margin-bottom:0; }
@media (max-width:600px){ .ap-reason{ padding:64px 22px 20px; } .ap-reason::before{ top:18px; left:22px; } }

/* ==================================================================== */
/* PROGRAM LINKS - the internal-linking block                           */
/* ==================================================================== */
.ap-progs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .ap-progs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ap-progs{ grid-template-columns:1fr; } }
.ap-prog{
  display:block; background:var(--paper2); border:1px solid var(--rule);
  border-left:5px solid var(--accent); border-radius:10px;
  padding:18px 20px; text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ap-prog:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(28,37,54,.11); }
.ap-prog b{ display:block; font-family:var(--f-head); font-size:18px; color:var(--deep); margin-bottom:4px; }
.ap-prog span{ display:block; font-size:14.5px; color:var(--muted); line-height:1.5; }

/* ==================================================================== */
/* TESTIMONIALS                                                         */
/* ==================================================================== */
.ap-quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:860px){ .ap-quotes{ grid-template-columns:1fr; } }
.ap-quote{
  background:var(--paper2); border:1px solid var(--rule); border-radius:14px;
  padding:28px 28px 24px; position:relative;
}
.ap-dark .ap-quote{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
.ap-quote::before{
  content:"\201C"; position:absolute; top:6px; left:20px;
  font-family:var(--f-head); font-size:64px; line-height:1;
  color:var(--accent); opacity:.5;
}
.ap-quote p{
  font-family:var(--f-head); font-style:italic; font-size:17.5px;
  color:var(--ink); line-height:1.62; margin:0 0 16px; position:relative;
}
.ap-dark .ap-quote p{ color:#EDF1F7; }
.ap-quote cite{
  display:block; font-style:normal; font-size:14.5px; line-height:1.5;
  color:var(--muted); border-top:1px solid var(--rule); padding-top:13px;
}
.ap-dark .ap-quote cite{ color:#B9C6D8; border-color:rgba(255,255,255,.16); }
.ap-quote cite b{ display:block; color:var(--deep); font-size:15.5px; font-weight:800; }
.ap-dark .ap-quote cite b{ color:#fff; }

/* ==================================================================== */
/* PHOTO BAND                                                           */
/* ==================================================================== */
.ap-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:760px){ .ap-photos{ grid-template-columns:repeat(2,1fr); } }
.ap-photo{
  border-radius:14px; overflow:hidden; border:1px solid var(--rule);
  aspect-ratio:4/3; background:var(--band);
}
.ap-photo img{ width:100%; height:100%; object-fit:cover; }

/* ==================================================================== */
/* GUARANTEE                                                            */
/* ==================================================================== */
.ap-guar{
  background:var(--paper2); border:3px solid var(--accent); border-radius:18px;
  padding:clamp(28px,3.6vw,44px); text-align:center;
}
.ap-guar h2{ margin-bottom:.4em; }
.ap-guar p:last-child{ margin-bottom:0; }

/* ==================================================================== */
/* FAQ                                                                  */
/* ==================================================================== */
.ap-faq{ display:grid; gap:14px; }
.ap-faq details{
  background:var(--paper2); border:1px solid var(--rule); border-radius:12px;
  padding:0 22px;
}
.ap-faq summary{
  cursor:pointer; list-style:none; padding:19px 30px 19px 0; position:relative;
  font-family:var(--f-head); font-weight:600; font-size:18.5px; color:var(--deep);
}
.ap-faq summary::-webkit-details-marker{ display:none; }
.ap-faq summary::after{
  content:"+"; position:absolute; right:2px; top:16px;
  font-family:var(--f-body); font-weight:800; font-size:24px; color:var(--accent);
}
.ap-faq details[open] summary::after{ content:"\2013"; }
.ap-faq details > *:not(summary){ margin-bottom:18px; }

/* ==================================================================== */
/* CTA BAND + FORM SLOT                                                 */
/* ==================================================================== */
.ap-cta{ background:var(--deep); color:#fff; text-align:center;
  padding:clamp(52px,6.5vw,90px) 0; }
.ap-cta h2{ color:#fff; max-width:22ch; margin-left:auto; margin-right:auto; }
.ap-cta p{ color:#DCE5F1; max-width:56ch; margin-left:auto; margin-right:auto; }
.ap-phone{
  display:inline-block; margin-top:8px;
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(28px,3.4vw,42px); color:#fff !important;
  text-decoration:none !important; letter-spacing:.01em;
}
.ap-phone:hover{ color:var(--accent) !important; }

/* the white Mago form is served by mago.co and cannot be recolored     */
/* from here. Mat it instead - a reply card tipped onto the dark band.  */
.ap-formcard{
  max-width:760px; margin:34px auto 0;
  background:var(--paper2); border-top:5px solid var(--accent);
  border-radius:14px; padding:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.35);
}
/* HEIGHT. Mago's auto-resizer cannot be used on this site - a          */
/* javascript tag inside an Elementor HTML widget makes the save fail    */
/* with a 403 (since 2026-08-29). So the height is set here instead.     */
/*                                                                       */
/* --form-h is the ONLY number to change. Too tall = a band of dead      */
/* white under the Submit button. Too short = the button is cut off.     */
/* Cut off is worse than dead space, so these values err generous.       */
/*                                                                       */
/* 768px is Mago's own breakpoint, not an arbitrary one: below it the    */
/* form stacks its labels above the fields and gets much taller, above   */
/* it the labels sit to the left. Matching it means the height changes   */
/* at exactly the width the form's layout changes.                       */
/*                                                                       */
/* NOTE: no !important. An !important height would beat the resizer AND  */
/* the height attribute and collapse the form - that was the Haunted     */
/* Christmas bug. Plain CSS already beats an HTML height attribute.      */
.ap-formcard{ --form-h:820px; }
@media (min-width:768px){ .ap-formcard{ --form-h:600px; } }
.ap-formcard iframe,
.ap-formcard .mago-form-container{
  display:block; width:100%; border:0; border-radius:9px;
  overflow:hidden; background:#fff; height:var(--form-h); margin:0 !important;
}
@media (max-width:640px){ .ap-formcard{ padding:9px; border-radius:11px; } }

.ap-foot{ font-size:14.5px; color:#AEBDD2; margin-top:28px; }
.ap-foot a{ color:#fff; }