/* =========================================================
   LITTLE STAR 2026 BRANDING
   Loaded after main-2020.css; overrides only. New classes use the ls- prefix.
   Fonts: Arcanite Slab / Bouba Round / Proxima Nova, falling back to the
   Google substitutes (Roboto Slab 800 / Fredoka 600 / Figtree) loaded in head.php.
   ========================================================= */
:root{
  --ls-yellow:#FBAB1F;
  --ls-cream:#FBECD4;
  --ls-twilight:#5454A4;
  --ls-light-blue:#42C7F2;
  --ls-tomato:#F2633E;
  --ls-white:#FFFFFF;
  --ls-ink:#33335F;

  --ls-font-head:"Arcanite Slab","Roboto Slab",Georgia,serif;
  --ls-font-sub:"Bouba Round","Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --ls-font-body:"proxima-nova","Proxima Nova","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ls-pill:999px;
}

/* ---------- General ---------- */
*{letter-spacing:normal}
body{font-family:var(--ls-font-body);color:var(--ls-ink)}
p{font-family:var(--ls-font-body);font-size:1.0625rem;line-height:1.6;text-align:left;color:var(--ls-ink)}
h1,h2{font-family:var(--ls-font-head);font-weight:800;color:var(--ls-twilight);line-height:1.1}
h3,h4,h5{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-twilight)}
h5{font-family:var(--ls-font-body);font-weight:700}

.ls-title{font-size:2.75rem;text-align:center;margin:3.5rem 0 .75rem}
.ls-line{display:block;width:72px;height:8px;border-radius:var(--ls-pill);background:var(--ls-light-blue);margin:0 auto 1.75rem}
@media (max-width:767px){.ls-title{font-size:2.1rem;margin-top:2.5rem}}

/* Buttons: pill */
.btn{font-family:var(--ls-font-sub);font-weight:600;text-transform:none;border-radius:var(--ls-pill)}
.btn-info,
.btn-info:hover,.btn-info:focus,.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active{
  background:var(--ls-yellow);color:var(--ls-twilight);border:0;box-shadow:none}
.btn-info{transition:transform .15s ease,background-color .15s ease}
.btn-info:hover,.btn-info:focus{background:#ffbb42;color:var(--ls-twilight);transform:translateY(-2px)}
.btn.btn-lg{font-size:1.25rem;padding:.7rem 2rem}
.ls-btn-twilight.btn-info,.ls-btn-twilight.btn-info:hover,.ls-btn-twilight.btn-info:focus{background:var(--ls-twilight);color:var(--ls-white)}

a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--ls-light-blue);outline-offset:3px}

/* Wavy dividers */
.ls-wave{display:block;width:100%;height:60px}
.ls-wave--flip{transform:scaleY(-1)}
.ls-band--cream{background:var(--ls-cream)}
/* Contain child margins so a heading's top margin can't open a gap above the band */
div.ls-band--cream{display:flow-root}
.ls-band--twilight{background:var(--ls-twilight)}

/* ---------- Navbar ---------- */
.navbar-brand img,.navbar-brand img.scroll-100{width:auto;height:72px;background:none!important}
.nav-link{font-family:var(--ls-font-sub);font-weight:600;text-transform:none;color:#FFFFFF!important;font-size:1.2rem}
.nav-link:hover{color:#FBAB1F!important}
.nav-link.btn-info{color:#5454A4!important;font-size:1.15rem;padding:.65em 1.6em!important}
.navbar-open{background-color:rgba(84,84,164,.95)!important}
@media (max-width:991px){.navbar-expand-md .navbar-nav .nav-link{font-size:1.2rem}.navbar-expand-md .navbar-nav .nav-link.btn-info{font-size:1.15rem}}
@media (max-width:767px){
  .navbar{height:auto}
  .navbar-brand img,.navbar-brand img.scroll-100{height:54px}
  .navbar-collapse .navbar-nav{padding:.5rem 0 .25rem}
}

/* ---------- Hero (existing video kept) ---------- */
.hero-section{background-color:var(--ls-twilight)}
.hero-section::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(84,84,164,.6) 0%,rgba(84,84,164,.25) 50%,rgba(84,84,164,0) 100%)}
.hero-section-inner{z-index:2}
.hero-words{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-white);text-shadow:0 2px 12px rgba(51,51,95,.45)}
.hero-words span{font-family:var(--ls-font-head);font-weight:800;color:var(--ls-yellow);font-size:1.25em}
.hero-content .btn-info{margin:1rem 0 0}
.ls-hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;z-index:3;display:block}
@media (max-width:767px){.ls-hero-wave{height:40px}}
@media (max-width:575px){.hero-words span{display:inline-block}}

/* ---------- Why Little Star ---------- */
.why-little-star > .col-12 > p{text-align:center;max-width:60rem;margin:0 auto}
/* Uncropped 72px icon, no circle; flex/max-width/auto margins override the img's .col-4 .offset-4 */
.why-icons-outer .why-icon{display:block;flex:0 0 72px;width:72px;max-width:72px;height:72px;object-fit:contain;
  background:none;border-radius:0;padding:0;margin:2rem auto 1rem}
.why-icons-outer h3{color:var(--ls-twilight)}
.why-icons-outer p{font-size:1rem}
.why-icons-outer strong{color:var(--ls-twilight)}

/* ---------- Nurture strip ---------- */
.nurture-section{background:#DFF4FC;animation:none;margin-top:0!important;margin-bottom:0!important;padding:1.5rem 0 1rem}
.nurture-icons-outer h3{color:var(--ls-twilight);text-transform:none;font-size:1rem}
/* Uncropped 120px icon, no circle; flex/max-width override the img's .col-6 sizing */
.nurture-section .why-icon{display:block;flex:0 0 120px;width:120px;max-width:120px;height:120px;object-fit:contain;
  background:none;border-radius:0;padding:0!important;margin:0 auto 1rem}

/* ---------- Center-based education ---------- */
.center-education{padding-bottom:3rem}
.center-education > .col-12 > h3{color:var(--ls-tomato);font-size:1.3rem}
.center-education .education-feedback{color:var(--ls-twilight);text-align:center}
.center-education-outer img{padding-top:0;padding-bottom:0}
.center-education-type{background:var(--ls-white);border-radius:28px;border:3px solid var(--ls-yellow);
  margin-top:2rem;padding:0;flex-basis:calc(33.333% - 1.5rem);max-width:calc(33.333% - 1.5rem);margin-left:.75rem;margin-right:.75rem}
.center-education-type:nth-child(3n+2){border-color:var(--ls-light-blue)}
.center-education-type:nth-child(3n+3){border-color:var(--ls-twilight)}
.center-education-type > img{width:100%;max-width:100%;flex:none;margin:0;padding:0}
.center-education-type > h3{margin:1rem 1rem .25rem}
.center-read-info{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-tomato);padding-bottom:1rem;text-transform:none;font-size:1rem}
.center-read-info:focus,.center-read-info:active,.center-read-info:hover{color:var(--ls-twilight)}
.center-info{width:100%;background:var(--ls-white)}
.center-info p{font-size:.98rem;text-align:left}
@media (max-width:991px){.center-education-type{flex-basis:calc(50% - 1.5rem);max-width:calc(50% - 1.5rem)}}
@media (max-width:575px){.center-education-type{flex-basis:100%;max-width:100%;margin-left:0;margin-right:0}}

/* ---------- Inside Impressions / testimonials ---------- */
.testimonials-section,.faq-section,.contact-section{background-image:none!important}
.testimonials-section{background:var(--ls-white)}
.testimonials-section-inner,.faq-section-inner,.contact-section-inner{min-height:0}
.testimonials-section hr,.faq-section hr,.contact-section hr{display:none}
.speech-bubbles{display:none!important}
.testimonials-section .video-thumb img{border-radius:20px}
.testimonials-section .video-thumbs-outer h5{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-twilight)}
.testimonials-section .video-thumb .fa-play{color:var(--ls-twilight);text-shadow:none}
.testimonials-section .video-thumb .fa-play::before{display:inline-grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--ls-yellow);padding-left:.15em}
.testimonials-section .video-thumb .fa-play.fa-3x::before{width:1.8em;height:1.8em}

#carousel-testimonials{min-height:0;background:var(--ls-twilight);border-radius:28px;padding:2.5rem 1rem 1.5rem;margin:1rem 0 4rem}
#carousel-testimonials::before{content:"\201C";display:block;width:100%;text-align:center;font-family:var(--ls-font-head);font-size:5rem;line-height:.6;color:var(--ls-light-blue);padding-top:.5rem}
#carousel-testimonials .carousel-caption{color:var(--ls-white)}
#carousel-testimonials h5{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-white);text-align:center;font-size:1.3rem;line-height:1.5}
#carousel-testimonials p{color:var(--ls-yellow);font-weight:700;text-align:center;letter-spacing:.04em}
#carousel-testimonials .carousel-control-prev,#carousel-testimonials .carousel-control-next{
  top:auto;bottom:1rem;width:44px;height:44px;border-radius:50%;background:var(--ls-yellow);opacity:1}
#carousel-testimonials .carousel-control-prev{left:calc(50% - 54px)}
#carousel-testimonials .carousel-control-next{right:calc(50% - 54px)}
#carousel-testimonials .carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235454A4' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}
#carousel-testimonials .carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235454A4' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}
#carousel-testimonials .carousel-inner{padding-bottom:4rem}
@media (max-width:575px){#carousel-testimonials h5{font-size:1.05rem}}

/* ---------- Staff ---------- */
.staff > .col-12 > p{text-align:center;max-width:60rem;margin:0 auto}
.staff-member{border:6px solid var(--ls-cream);background:var(--ls-cream)}
.staff-outer .row > div:nth-child(4n+3) .staff-member{border-color:#dff4fc;background:#dff4fc}
.staff-outer .row > div:nth-child(4n+5) .staff-member{border-color:#fde6c0;background:#fde6c0}
.staff-member-gradient{background:linear-gradient(to right,rgba(251,171,31,0) 0,rgba(251,171,31,.85) 40%)}
.staff-member-bio h4{color:var(--ls-twilight);font-family:var(--ls-font-sub);font-weight:600}
.staff-member-bio p{font-size:1rem}

/* ---------- FAQ ---------- */
.faq-section{background:var(--ls-cream);padding-bottom:2rem;position:relative;overflow:hidden}
.faq-section-inner{z-index:1}
/* Brand icon cluster, white, bottom-right behind the questions */
.ls-faq-icons{position:absolute;right:24px;bottom:0;height:560px;width:auto;max-width:none;z-index:0;pointer-events:none}
@media (max-width:860px){.ls-faq-icons{height:340px;right:-40px;opacity:.7}}
.faq-section .card{background:var(--ls-white);border-radius:20px;margin-bottom:1rem}
.faq-section h5{text-align:left;font-family:var(--ls-font-sub);font-weight:600;font-size:1.1rem;color:var(--ls-twilight)}
.faq-section .card-header{padding:1.1rem 1.5rem}
.faq-section .card-header a{display:block;position:relative;padding-right:2.75rem}
.faq-section .card-header a .question{display:none}
.faq-section .card-header a:before,.faq-section .card-header a.collapsed:before{
  content:"\2013";font-family:var(--ls-font-sub);position:absolute;right:0;left:auto;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;line-height:1;
  background:var(--ls-light-blue);color:var(--ls-white)}
.faq-section .card-header a.collapsed:before{content:"+";background:var(--ls-yellow);color:var(--ls-twilight)}
.faq-section .card-block{padding:0 1.5rem 1.25rem;text-align:left}
.faq-section .btn-info{margin-top:2rem;margin-bottom:2rem}

/* ---------- Gallery ---------- */
.gallery > .col-12 > p{text-align:center}

/* ---------- Contact ---------- */
.contact-section{background:var(--ls-cream);padding-bottom:3rem}
.ls-contact-card{background:var(--ls-twilight);color:var(--ls-white);border-radius:28px;padding:1.75rem 2rem 1rem;margin-bottom:1.5rem}
.contact-outer .ls-contact-card h3{color:var(--ls-yellow);text-transform:none;padding-top:0}
.ls-contact-card p,.ls-contact-card a{color:var(--ls-white)}
.ls-contact-card .fa{color:var(--ls-light-blue)}
.contact-outer h3{text-transform:none;color:var(--ls-twilight)}
.contact-map{padding:0;margin-bottom:1.5rem;border-radius:20px;overflow:hidden}
.contact-map iframe{display:block}
.contact-section label{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-twilight)}
.contact-section .form-control{border:2px solid var(--ls-white);border-radius:14px;padding:.75rem 1rem;height:auto;color:var(--ls-ink)}
.contact-section .form-control:focus{border-color:var(--ls-light-blue);box-shadow:none}
.contact-section textarea.form-control{min-height:150px}
.contact-section .btn-info{margin-top:.5rem;margin-bottom:2rem}

/* ---------- Footer ---------- */
/* Overlaps the section above so its transparent part shows that section's colour */
.ls-footer-wave{display:block;position:relative;width:100%;height:40px;margin-top:-40px;margin-bottom:-1px}
footer.footer{background:var(--ls-twilight);color:var(--ls-white);padding-top:2rem!important;padding-bottom:1.5rem!important}
/* footer.footer keeps these ahead of the .ls-2026 a / h5 rules in branding-2026.css */
footer.footer h5{color:var(--ls-yellow);font-family:var(--ls-font-sub);font-weight:600;font-size:1.15rem}
footer.footer a{color:var(--ls-white)}
footer.footer a:hover{color:var(--ls-light-blue);text-decoration:none}
footer.footer .footer-social a:hover{color:var(--ls-white)}
footer li{margin-bottom:.35rem}
footer.footer p{color:var(--ls-white);opacity:.9;border-top:2px solid rgba(255,255,255,.15);margin-top:1.5rem}
.ls-footer-logo{height:80px;width:auto;margin-bottom:1rem}
.footer-social li a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ls-light-blue);color:var(--ls-white)}

/* ---------- Inner pages (body.ls-2026; component styles live in branding-2026.css) ---------- */
/* mn.js pads <body> by programs bar + nav, so pull the banner up behind the gradient nav by the nav height (109px; 91px on phones) */
.ls-2026 .ls-page-hero{margin-top:-109px;padding-top:calc(109px + 3rem)}
@media (max-width:767px){.ls-2026 .ls-page-hero{margin-top:-91px;padding-top:calc(91px + 3rem)}}
.ls-2026 .oorah-outer,.ls-2026 .application-outer{background-image:none;padding-bottom:4rem}
.ls-2026 .oorah,.ls-2026 .application{padding-top:2.5rem}
.ls-2026 .oorah h2{color:var(--ls-twilight)}
.ls-2026 .ls-prose{margin-top:0}

/* apply.php wizard: the step list sits beside the fields, so let the form use the full container */
.ls-2026 .application form{max-width:none}
.ls-2026 .tab-content{border-left:0}
.ls-2026 #rootwizard .nav-tabs li{margin-bottom:.4rem}
.ls-2026 #rootwizard .nav-tabs a{display:block;font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-twilight);
  background:var(--ls-cream);border:0;border-radius:999px;padding:.6rem 1.1rem;text-decoration:none}
.ls-2026 #rootwizard .nav-tabs a:hover{background:var(--ls-pale-blue);color:var(--ls-twilight)}
.ls-2026 #rootwizard .nav-tabs a.active{background:var(--ls-yellow);color:var(--ls-twilight)}
.ls-2026 .tab-pane h4{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-tomato);text-transform:none;font-size:1.05rem}
.ls-2026 .pager .btn{font-family:var(--ls-font-sub);font-weight:600;text-transform:none;border-radius:999px;font-size:1rem;padding:.6rem 1rem}
.ls-2026 .pager .btn-outline-dark{border:2px solid var(--ls-twilight);color:var(--ls-twilight);background:var(--ls-white)}
.ls-2026 .pager .btn-outline-dark:hover:not(:disabled){background:var(--ls-twilight);color:var(--ls-white)}
.ls-2026 .ls-prose h2{text-align:left;padding-top:1rem}

/* ---------- Header: live-site style gradient, same at top and when scrolled ---------- */
.ls-header{
  /* Position is managed by the Oorah network script (mn.js): fixed under the programs bar */
  height:auto;
  background:linear-gradient(to bottom,rgba(84,84,164,.95) 0%,rgba(84,84,164,.75) 45%,rgba(84,84,164,0) 100%);
  padding-bottom:24px;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}