/* /assets/styles.css — clean build (fixed nav + softer text + lighter banner overlay) */

/* Theme tokens */
:root{
  --bg:#f7f8fc;
  --card:#ffffff;
  --text:#404040;              /* softer than pure black */
  --muted:#61667a;
  --accent:#7c3aed;
  --accent-2:#06b6d4;
  --ring:rgba(124,58,237,.35);
  --maxw:1200px;
  --radius:18px;
  --border:rgba(10,14,25,.08);
  --wash:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.95));
}
:root[data-theme="dark"],
body[data-theme="dark"]{
  --bg:#0b0e14;
  --card:#0f1320;
  --text:#e6e6f0;
  --muted:#a5a7b7;
  --ring:rgba(124,58,237,.5);
  --border:rgba(255,255,255,.1);
  --wash:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
/* Optional: respect device dark until user toggles */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0e14;
    --card:#0f1320;
    --text:#e6e6f0;
    --muted:#a5a7b7;
    --ring:rgba(124,58,237,.5);
    --border:rgba(255,255,255,.1);
    --wash:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  }
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
body{
  overflow-x:hidden;          /* prevent accidental page-wide horizontal scroll */
  min-height:100vh;           /* for sticky footer */
  display:flex;
  flex-direction:column;
  padding-bottom:72px;
}
main{
  flex:1 0 auto;              /* main content grows, pushes footer down */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6) 70%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
:root[data-theme="dark"] .header{
  background:linear-gradient(180deg, rgba(11,14,20,.85), rgba(11,14,20,.5) 70%, transparent);
}
.header .container{padding-left:8px;padding-right:20px}

/* Header layout: brand left, menu cluster right */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:40px; /* breathing room between brand and nav */
}

/* --- Stack logo text under logo image --- */
.brand{
  display:flex;
  flex-direction:column;   /* stack vertically */
  align-items:center;      /* center both logo and text */
  gap:6px;                 /* space between logo and text */
  font-weight:700;
  letter-spacing:0.3px;
  text-decoration: none;   /* remove underline */
  color: inherit;          /* keep text same color */
}
.brand .logo{
  width:40px;
  height:40px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 10px 30px rgba(124,58,237,.25);
}
.brand span{
  font-size:14px;
  line-height:1;
  text-align:center;
}

.right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

/* Desktop nav (>=1160px) */
.nav{font-weight:600}
@media (min-width:1160px){
  .menu-btn{display:none !important}
  .nav{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a,
  .nav .theme-toggle{flex:0 0 auto}
}

/* Mobile / tablet nav (<=1159px): closed by default; opens at top-right as a panel */
@media (max-width:1159px){
  .menu-btn{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    background:rgba(10,10,10,.05);
    cursor:pointer;
  }
  :root[data-theme="dark"] .menu-btn{
    background:rgba(255,255,255,.06);
  }

  .nav{
    position:fixed;
    top:64px;
    right:16px;
    left:auto;
    display:none; /* closed by default */
    flex-direction:column;
    align-items:stretch;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    padding:10px;
    border-radius:16px;
    box-shadow:0 10px 40px rgba(0,0,0,.16);

    overflow-x:hidden;
    overflow-y:auto;
    max-width:min(320px, calc(100vw - 32px));
    width:max-content;
    max-height:70vh;
  }
  :root[data-theme="dark"] .nav{
    background:rgba(15,19,32,.92);
  }
  .nav.open{display:flex}
  .nav a{
    padding:10px 12px;
    border-radius:12px;
  }
  .nav .theme-toggle{
    width:100%;
    text-align:center;
    margin-top:6px;
  }
}

/* Nav link states */
.nav a{
  opacity:.85;
  padding:8px 10px;
  border-radius:12px;
  transition:.2s;
}
.nav a:hover,
.nav a.active{
  opacity:1;
  background:rgba(10,10,10,.04);
  box-shadow:inset 0 0 0 1px var(--border);
}
:root[data-theme="dark"] .nav a:hover,
:root[data-theme="dark"] .nav a.active{
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Theme toggle — always readable */
.theme-toggle{
  margin-left:10px;
  border:1px solid var(--border);
  background:var(--card);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;

  background:#ffffff !important;
  color:#1b2432 !important;
  border:1px solid rgba(10,14,25,.12) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
:root[data-theme="dark"] .theme-toggle{
  background:#0f1320 !important;
  color:#e6e6f0 !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* Banner & readability */
.banner{
  position:relative;
  display:grid;
  min-height:520px;
  place-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.banner .content{
  position:relative;
  z-index:1;
  max-width:900px;
  text-align:center;
  padding:90px 0 60px;
}
/* Lighter overlay for more vibrant image */
.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0.10) 100%
  );
  pointer-events:none;
}
:root[data-theme="dark"] .banner::after{
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.25) 100%
  );
}
/* Subtle glass card behind banner text */
.banner-card{
  display:inline-block;
  max-width:900px;
  margin:0 auto;
  padding:22px 28px;
  border-radius:18px;
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(18px) saturate(160%) brightness(110%);
  -webkit-backdrop-filter:blur(18px) saturate(160%) brightness(110%);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 10px 40px rgba(0,0,0,0.12);
  color:var(--text);
}
/* Dark mode banner card */
:root[data-theme="dark"] .banner-card{
  background:rgba(20,24,36,0.55);
  border-color:rgba(255,255,255,0.12);
  backdrop-filter:blur(18px) saturate(140%) brightness(90%);
  -webkit-backdrop-filter:blur(18px) saturate(140%) brightness(90%);
}
/* Banner text */
h1{
  font-size:clamp(28px,4vw,54px);
  line-height:1.08;
  margin:0 0 14px;
}
.lead{
  font-size:clamp(16px,2.1vw,20px);
  color:var(--muted);
  margin-bottom:22px;
}
.hero-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:brightness(.96);
}

/* Buttons */
.cta{
  display:inline-block;
  padding:12px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  font-weight:700;
  box-shadow:0 10px 30px rgba(124,58,237,.35);
  border:0;
  cursor:pointer;
  color:#fff;
}
.ghost{
  background:transparent;
  border:1px solid var(--border);
  box-shadow:none;
  color:var(--text);
}

/* Sections / Cards */
.grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(12,1fr);
}
.card{
  grid-column:span 4;
  background:var(--wash);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.card h3{margin:0 0 8px}
@media (max-width:1000px){.card{grid-column:span 6}}
@media (max-width:640px){.card{grid-column:span 12}}

.section{padding:56px 0}
.section h2{
  font-size:clamp(22px,3vw,34px);
  margin:0 0 10px;
}
.center{text-align:center}

/* Consistent text margins in sections */
.section p,
.section h2,
.section h3,
.section ul,
.section ol,
.prose p,
.prose h2,
.prose h3,
.prose ul,
.prose ol{
  margin-top:0;
  margin-bottom:1em;
}

/* Home grid – consistent layout, CTAs pinned bottom */
.grid.grid4{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(12,1fr);
}
.grid.grid4 .card{grid-column:span 3}
@media (max-width:1000px){.grid.grid4 .card{grid-column:span 6}}
@media (max-width:640px){.grid.grid4 .card{grid-column:span 12}}

.card.outlined{
  background:var(--wash);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:260px;
}
.card.outlined h3{
  width:100%;
  text-align:center;
  margin-bottom:8px;
}
.card.outlined>p,
.card.outlined>ul,
.card.outlined>ol{
  width:100%;
}
.card .actions{
  margin-top:auto;
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
}
.card .cta.ghost{padding:10px 14px}
/* Make all home buttons filled like Parent Pact */
.grid.grid4 .card .cta,
.grid.grid4 .card .cta.ghost{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  border:0;
  box-shadow:0 10px 30px rgba(124,58,237,.35);
  padding:12px 18px;
}

/* Footer — compact split, sticky via body flex */
.footer{
  position:fixed;          /* NEW: always visible */
  bottom:0;
  left:0;
  right:0;
  z-index:40;

  border-top:1px solid var(--border);
  padding:16px 0;
  color:var(--muted);
  font-size:13px;
  background:var(--bg);    /* solid background so content doesn’t show through */
}

/* keep the existing inner layout */
.footer .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.footer .container .small a{opacity:.9}
.footer .container .small a:hover{
  opacity:1;
  text-decoration:underline;
}

/* Forms */
fieldset{border:0;margin:0;padding:0}
.form{
  max-width:900px;
  margin:0 auto;
  background:var(--wash);
  padding:24px;
  border:1px solid var(--border);
  border-radius:18px;
}
.row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.input{
  grid-column:span 12;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.input>label{font-weight:600}

/* IMPORTANT: make all inputs/selects consistent, including Region select + search */
.input>input,
.input>select,
.input .region-wrapper select,
.input .region-wrapper .region-filter{
  background:rgba(0,0,0,.03);
  border:1px solid var(--border);
  padding:12px 14px;
  border-radius:12px;
  color:var(--text);
}

/* Make all form <select> fields (Region, School, School year)
   use the theme text color + a custom arrow, in BOTH light and dark. */
.form select {
  color: var(--text) !important;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* custom chevron */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;

  padding-right: 32px; /* space for arrow */
}

/* Respect your existing dark background/border for inputs */
:root[data-theme="dark"] .form select {
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.12);
}

/* NEW: custom select arrow so text + chevron are visible in dark mode
   and all selects (Region, School, School year) look consistent */
.input>select,
.input .region-wrapper select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:32px;
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .input>select,
:root[data-theme="dark"] .input .region-wrapper select,
body[data-theme="dark"] .input>select,
body[data-theme="dark"] .input .region-wrapper select{
  color:#e6e6f0; /* light text for all selects */
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23e6e6f0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .input>input,
:root[data-theme="dark"] .input>select,
:root[data-theme="dark"] .input .region-wrapper select,
:root[data-theme="dark"] .input .region-wrapper .region-filter{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
}

/* Custom Region dropdown with search INSIDE the dropdown
   - Looks like a normal select
   - Always opens below the field
*/

.region-dropdown{
  position:relative;
  width:100%;
}

.region-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.03);
  cursor:pointer;
  font-size:15px;
  text-align:left;
}
:root[data-theme="dark"] .region-toggle{
  background:rgba(0,0,0,.25);
  border-color:rgba(255,255,255,.15);
}
.region-toggle-label{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.region-toggle-arrow{
  flex:0 0 auto;
  font-size:12px;
  opacity:.7;
}

/* Parent Pact form: Region dropdown button follows theme colours */
.region-dropdown .region-toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.03);
  color:var(--text);
  font-size:14px;
}

:root[data-theme="dark"] .region-dropdown .region-toggle{
  background:rgba(0,0,0,0.25);
  border-color:rgba(255,255,255,0.15);
}

.region-dropdown .region-toggle-label{
  color:var(--text);
}
.region-dropdown .region-toggle-arrow{
  font-size:11px;
  opacity:0.75;
}

/* The dropdown panel */
.region-menu{
  position:absolute;
  top:calc(100% + 4px);   /* always below */
  left:0;
  right:0;
  background:var(--card);
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:0 10px 38px rgba(0,0,0,.18);
  max-height:260px;
  display:block;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
  z-index:60;
}
:root[data-theme="dark"] .region-menu{
  background:#111522;
  border-color:rgba(255,255,255,.15);
}

.region-menu.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Search in the dropdown header */
.region-menu-search{
  padding:8px;
  border-bottom:1px solid var(--border);
}
.region-menu-search input.region-menu-filter{
  width:100%;
  padding:8px 10px;
  border-radius:9px;
  border:1px solid var(--border);
  font-size:14px;
  background:rgba(0,0,0,.02);
}
:root[data-theme="dark"] .region-menu-search input.region-menu-filter{
  background:rgba(0,0,0,.35);
}

/* List of regions */
.region-menu-list{
  list-style:none;
  margin:0;
  padding:4px 0;
  max-height:210px;
  overflow-y:auto;
}
.region-menu-list li{
  padding:8px 12px;
  cursor:pointer;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.region-menu-list li:hover,
.region-menu-list li:focus{
  background:rgba(124,58,237,.08);
  outline:none;
}

/* Actions */
.actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:10px;
}

/* Child block */
.child{
  position:relative;
  background:rgba(0,0,0,.03);
  border:1px dashed var(--border);
  padding:16px;
  border-radius:14px;
  margin-top:16px;
}
.child .remove{
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid var(--border);
  background:transparent;
  border-radius:10px;
  color:var(--text);
  padding:6px 8px;
  cursor:pointer;
}
hr.sep{
  border:0;
  border-top:1px dashed var(--border);
  margin:18px 0;
}

/* Errors notice with close */
.notice{
  position:relative;
  padding:16px 56px 16px 18px;
  margin-bottom:16px;
  border:1px solid rgba(255,0,0,.3);
  border-radius:14px;
  background:rgba(255,0,0,.05);
  color:#b91c1c;
  font-weight:500;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.notice ul{
  margin:8px 0 0 20px;
  padding:0;
}
.notice li{
  list-style:disc;
  margin:3px 0;
}
.notice .close-error{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  line-height:28px;
  border-radius:50%;
  border:none;
  background:rgba(185,28,28,.1);
  color:#b91c1c;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s, transform .2s;
}
.notice .close-error:hover{
  background:rgba(185,28,28,.2);
  transform:translateY(-50%) scale(1.05);
}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table td,
.table th{
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  text-align:left;
}

/* Stack Region / School / School year vertically on phones */
@media (max-width:640px){
  .child .row{
    grid-template-columns:1fr !important;
    gap:12px;
  }
  .child .input{
    grid-column:1 / -1 !important;
  }
}

/* Responsive banner text scaling on small screens */
@media (max-width:640px){
  .banner .content{
    padding:70px 16px 50px;
  }
  .banner-card{
    padding:14px 18px;
    border-radius:14px;
  }
  .banner h1{
    font-size:1.7rem;
    line-height:1.2;
  }
  .banner .lead{
    font-size:0.95rem;
    line-height:1.5;
    margin-bottom:16px;
  }
  .banner .actions{
    flex-direction:column;
    gap:10px;
  }
  .banner .cta{
    width:100%;
    text-align:center;
  }
}

/* Region search + select wrapper
   - keeps Region / School / School year on one line
   - groups search + select nicely in the Region column
*/
.region-wrapper,
.region-filter-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

/* Search input above the Region select */
.region-filter {
  width: 100%;
  font-size: 14px;
  /* visual style (border, radius, padding) is inherited from
     .input .region-wrapper .region-filter rule above */
}

/* Clear “x” inside the search field */
.region-filter-clear {
  position: absolute;
  right: 10px;
  top: 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
}
.region-filter-clear:hover {
  opacity: 1;
}

/* Make sure the Region <select> fills the column */
.region-wrapper select {
  width: 100%;
}

/* Consistent form spacing and button alignment */
.form{
  padding:28px 22px;
  border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.04);
}
.form .input>input,
.form .input>select{
  padding:12px 14px;
  font-size:15px;
}
.form .actions{
  justify-content:flex-end;
  gap:10px;
}
.form .cta,
.form button[type="submit"]{
  font-weight:600;
  padding:12px 22px;
  border-radius:14px;
}
.child{
  background:rgba(0,0,0,.02);
  padding:18px;
  margin-top:18px;
}

/* ---------------------------------------------------------
   GLOBAL RESPONSIVE CONTENT WIDTH CONTROL
   --------------------------------------------------------- */

/* 1) Wide desktop (≥1401px): keep clean edges, no extra padding */
@media (min-width:1401px){
  main,
  .section,
  .prose{
    padding-left:0;
    padding-right:0;
  }
}

/* 2) Mid-desktop & laptop (901px–1400px): gentle breathing room */
@media (min-width:901px) and (max-width:1400px){
  main,
  .section,
  .prose{
    padding-left:18px;
    padding-right:18px;
  }
}

/* 3) Tablet & mobile (≤900px): comfortable inset + fix bullets touching edges */
@media (max-width:900px){
  main,
  .section,
  .prose{
    padding-left:12px;
    padding-right:12px;
  }

  /* make sure list items don’t sit on the edge */
  .section ul,
  .section ol,
  .prose ul,
  .prose ol{
    padding-left:18px;   /* indent text + bullets */
    padding-right:4px;
  }
}

/* --- Fix Region select + dropdown arrows (all browsers / themes) --- */

/* Ensure the Region select uses the same text colour as the rest of the form */
.child .region-wrapper select {
  color: var(--text);
}

/* ----------------------------------------------------------
   Generic select styling (Region / School / Year)
   ---------------------------------------------------------- */

/* Just make selects inherit the correct text colour.
   Backgrounds are already handled earlier (.input>select). */
.child select {
  color: var(--text);
}

/* ----------------------------------------------------------
   Region dropdown search – theme aware
   (this is the "Search region…" input inside the open list)
   ---------------------------------------------------------- */

.region-menu-search input.region-menu-filter {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.02);
  color: var(--text);
}

/* Dark mode: lighter text + darker, but not black, background */
:root[data-theme="dark"] .region-menu-search input.region-menu-filter,
body[data-theme="dark"] .region-menu-search input.region-menu-filter {
  background: rgba(15, 23, 42, 0.9);        /* dark slate */
  border-color: rgba(148, 163, 184, 0.7);   /* slate border */
  color: #e6e6f0;                           /* light text */
}

/* Placeholder colour for all browsers */
.region-menu-search input.region-menu-filter::placeholder,
.region-menu-search input.region-menu-filter::-webkit-input-placeholder,
.region-menu-search input.region-menu-filter::-moz-placeholder,
.region-menu-search input.region-menu-filter:-ms-input-placeholder {
  color: rgba(148, 163, 184, 0.9);
}

/* Region dropdown: search box matches theme */
.region-menu-search .region-menu-filter {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--form-border);
}
/* Keep native arrow, just enforce text colour */
.child select {
  color: var(--text);
}

/* Dark mode: custom light arrow on School + School year selects */
:root[data-theme="dark"] .child select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* keep your existing look, just add space for the arrow */
  padding-right: 32px;

  /* draw a single light arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e5e7eb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;

  /* make sure the text stays light in dark mode */
  color: var(--text);
}

/* ---------------------------------------------
   STATS BANNER (simple + advanced)
   --------------------------------------------- */

.stats-banner{
  display:flex;
  flex-direction:column;      /* single column layout */
  align-items:stretch;
  gap:16px;
  padding:18px 22px;
  border-radius:18px;

  /* LIGHT MODE: soft light card on top of hero */
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(15,23,42,0.10);
  box-shadow:0 18px 45px rgba(15,23,42,0.18);

  max-width:100%;
}

/* DARK MODE: keep the dark “panel” look */
:root[data-theme="dark"] .stats-banner{
  background:rgba(15,19,32,0.85);
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 18px 45px rgba(0,0,0,0.6);
}

/* TOP: big number + main label */
.stats-banner-main{
  display:flex;
  flex-direction:column;
  align-items:center;          /* number + label perfectly centred */
  text-align:center;
  gap:6px;
}

/* styles.css */
.stats-banner[data-loading="1"] {
  visibility: hidden;
}

.stats-number{
  font-size:42px;
  font-weight:800;
  letter-spacing:0.03em;
}
.stats-label{
  font-size:16px;
  font-weight:500;
  color:var(--muted);
}
.stats-sub{
  margin-top:4px;
  font-size:18px;
  font-weight:600;
}

/* MIDDLE: filters – each label + field inline, group left-aligned */
.stats-controls{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  justify-content:flex-start;   /* groups start at the left */
}

.stats-control{
  display:flex;                 /* label + select inline */
  flex-direction:row;
  align-items:center;
  gap:8px;
  text-align:left;
}

.stats-control label{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:.8;
  white-space:nowrap;
}

/* pill selects + inputs */
.stats-control select,
.stats-control input{
  width:140px;
  max-width:140px;
  border-radius:999px;
  border:1px solid var(--border);
  padding:7px 12px;
  background:rgba(0,0,0,.04);
  color:var(--text);
  font-size:14px;
  text-align:left;
}
:root[data-theme="dark"] .stats-control select,
:root[data-theme="dark"] .stats-control input{
  background:rgba(0,0,0,.25);
  border-color:rgba(255,255,255,.16);
}

/* Schools select slightly wider, but fixed */
#stats-school-filter{
  width:220px;
  max-width:220px;
}

/* Year total sits at the end of the row */
.stats-year-total{
  margin-left:auto;
  text-align:right;
}
.stats-year-total span:first-child{
  font-size:20px;
  font-weight:700;
}
.stats-year-total-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.75;
}

/* BOTTOM: chart spans full width, no “empty” side strip */
.stats-banner-chart{
  margin-top:4px;
  width:100%;
  display:flex;
  align-items:flex-end;
}
.stats-chart-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  width:100%;
  max-height:150px;
}

.stats-bar{
  flex:1 1 0;
  position:relative;
  border-radius:10px 10px 4px 4px;
  overflow:hidden;
  background:rgba(148,163,184,.25);
}
.stats-bar-inner{
  position:absolute;
  inset:auto 0 0 0;
  background:linear-gradient(180deg, rgba(124,58,237,.18), rgba(124,58,237,.55));
}
.stats-bar-value{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:600;
}
.stats-bar-label{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  opacity:.85;
}

/* Simple variant: hide filters & chart */
.stats-banner[data-stats-mode="simple"] .stats-controls,
.stats-banner[data-stats-mode="simple"] .stats-banner-chart{
  display:none;
}

/* Two-column Parent Pact hero layout: stats card + copy on the right */
.banner-card-parentpact{
  display:flex;
  align-items:stretch;
  gap:24px;
}
.banner-card-parentpact .stats-banner{
  flex:0 0 420px;
}
.banner-copy{
  flex:1 1 auto;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Responsive */
@media (max-width:800px){
  .banner-card-parentpact{
    flex-direction:column;
  }
  .banner-card-parentpact .stats-banner{
    flex:0 0 auto;
  }
  .stats-control select,
  .stats-control input{
    width:160px;
    max-width:100%;
  }
}

/* ---------------------------------------------
   TEAM / AMBASSADORS GRID + MODAL
   --------------------------------------------- */

/* reuse .grid.grid4 and .card.outlined from home */

.team-section{
  padding-top:32px;
  padding-bottom:24px;
}

.team-grid .team-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
}

.team-card-btn{
  border:0;
  padding:18px 16px 14px;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  cursor:pointer;
}

/* Portrait in card (grid) */
.team-photo{
  width:100%;
  aspect-ratio:4 / 5;          /* works nicely with 800×1000, 1600×2000, etc. */
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(15,23,42,0.25);
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Name + role */
.team-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.team-name{
  font-weight:700;
  font-size:16px;
}
.team-role{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
}

/* Backdrop */
.team-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(15,23,42,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.team-modal-backdrop.is-open{
  display:flex;
}

/* Modal panel */
.team-modal{
  position:relative;
  max-width:960px;
  width:100%;
  background:var(--card);
  border-radius:20px;
  padding:24px 24px 20px;
  box-shadow:0 22px 60px rgba(0,0,0,0.45);
  display:grid;
  grid-template-columns:260px 1fr;
  gap:22px;
}
:root[data-theme="dark"] .team-modal{
  background:#0f1320;
  border:1px solid rgba(255,255,255,0.12);
}

/* left = photo column, right = text column */
.team-modal-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.team-modal-left .team-photo{
  max-width:260px;
  width:100%;
  margin-bottom:6px;
}
.team-modal-right{
  display:block;
}

.team-modal-header h2{
  margin:0 0 4px;
}
.team-modal-role{
  margin:0 0 12px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
}
.team-modal h3{
  margin-top:10px;
  margin-bottom:6px;
}

/* Close button */
.team-modal-close{
  position:absolute;
  top:14px;
  right:18px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.08);
}
:root[data-theme="dark"] .team-modal-close{
  background:rgba(255,255,255,0.06);
}

/* Mobile: stack modal */
@media (max-width:700px){
  .team-modal{
    grid-template-columns:1fr;
    text-align:left;
  }
  .team-modal-left{
    align-items:center;
  }
  .team-modal-left .team-photo{
    margin-bottom:12px;
  }
}

/* ---------------------------------------------
   TEAM PORTRAITS – POLISH
   --------------------------------------------- */

/* Make team cards feel more like premium portrait tiles */
.card.outlined.team-card{
  padding:18px 18px 20px;
  align-items:center;
  text-align:center;
  min-height:auto; /* let height follow content */

  border-radius:22px;
  border-color:rgba(15,23,42,0.10);
  box-shadow:0 10px 32px rgba(15,23,42,0.12);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}

/* Hover: gentle lift + subtle accent */
.card.outlined.team-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(15,23,42,0.18);
  border-color:rgba(124,58,237,0.35);
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246,248,255,0.98));
}

/* Dark mode variant – keep it soft but clear */
:root[data-theme="dark"] .card.outlined.team-card{
  border-color:rgba(255,255,255,0.10);
  box-shadow:0 12px 32px rgba(0,0,0,0.7);
  background:rgba(15,19,32,0.95);
}
:root[data-theme="dark"] .card.outlined.team-card:hover{
  box-shadow:0 22px 60px rgba(0,0,0,0.9);
  background:linear-gradient(180deg, rgba(15,23,42,0.98), rgba(15,23,42,0.9));
}

/* Button inside card – rely on card padding, not double padding */
.team-card-btn{
  padding:0;
  gap:14px;
}

/* Portrait in grid cards – slightly narrower than card, 4:5 ratio */
.team-photo{
  max-width:210px;      /* keeps nice framing in the 4-column grid */
  width:100%;
  margin:0 auto 6px;
  aspect-ratio:4 / 5;   /* matches 800×1000, 1600×2000 etc. */
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(15,23,42,0.28);
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Name + role spacing */
.team-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.team-name{
  font-weight:700;
  font-size:17px;
}
.team-role{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--muted);
}

/* Modal: reuse same photo proportions, just larger */
.team-modal-left .team-photo{
  max-width:260px;
  width:100%;
  margin-bottom:10px;
}

/* Slightly more breathing room for text in modal */
.team-modal{
  row-gap:24px;
}
.team-modal-right p{
  margin-bottom:0.9em;
}

/* On small screens let the portrait breathe */
@media (max-width:700px){
  .team-photo{
    max-width:260px;
  }
}