/* Nav search box — shared by the schools nav (dark bleu bar) and the daycares nav (light bar).
 * Markup: a .ss-trigger button in the nav; the panel is built by search/site-search.js. */
:root{
  --ss-bleu:#001F6B; --ss-bleu-mid:#0033A0; --ss-gold:#C9963A; --ss-rouge:#C1121F;
  --ss-ink:#1A2236; --ss-muted:#5B6478; --ss-line:#E3E6EE; --ss-soft:#F4F6FB; --ss-hi:#EEF3FF;
}

/* ── trigger ── */
.ss-trigger{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border-radius:999px;
  font:500 14px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;white-space:nowrap;flex-shrink:0;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;transition:background .15s,border-color .15s}
.ss-trigger:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.ss-trigger svg{width:17px;height:17px;flex-shrink:0}
/* light daycares bar */
.top .ss-trigger{background:#fff;border-color:var(--ss-line);color:var(--ss-ink)}
.top .ss-trigger:hover{border-color:#b9c3da;background:#fff}
.top .ss-slot{margin-left:auto}
/* The schools bar is already full (its labels wrap to two lines): icon only, tucked in
   next to Contact so it costs no extra wrapping. The daycares bar has room for the label. */
.nav .ss-trigger{width:38px;padding:0;justify-content:center}
.nav .ss-trigger .ss-label{display:none}
@media(min-width:1241px){.nav .nav-right.ss-slot{margin-left:-24px}}
@media(max-width:1100px){.top .ss-trigger .ss-label{display:none}.top .ss-trigger{width:38px;padding:0;justify-content:center}}
@media(max-width:1240px){.nav .ss-slot,.top .ss-slot{margin-left:auto}}

/* ── panel ── */
.ss-backdrop{position:fixed;inset:0;background:rgba(10,16,40,.38);opacity:0;visibility:hidden;transition:opacity .15s;z-index:2000}
.ss-open .ss-backdrop{opacity:1;visibility:visible}
.ss-panel{position:fixed;top:76px;left:50%;transform:translate(-50%,-6px);width:min(680px,calc(100vw - 32px));
  max-height:calc(100vh - 110px);display:flex;flex-direction:column;background:#fff;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,20,70,.28);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;z-index:2001;
  font-family:'DM Sans',system-ui,sans-serif;color:var(--ss-ink)}
.ss-open .ss-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ss-panel::before{content:'';display:block;height:3px;flex-shrink:0;background:linear-gradient(90deg,var(--ss-bleu) 0 33.3%,#fff 33.3% 66.6%,var(--ss-rouge) 66.6%)}
.ss-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ss-line)}
.ss-head svg{width:20px;height:20px;color:var(--ss-muted);flex-shrink:0}
.ss-input{flex:1;min-width:0;border:none;outline:none;font:500 17px/1.3 'DM Sans',system-ui,sans-serif;color:var(--ss-ink);background:none}
.ss-input::placeholder{color:#9aa2b5;font-weight:400}
.ss-close .ss-t{display:none}
.ss-close{border:none;background:var(--ss-soft);color:var(--ss-muted);font:600 12px/1 'DM Sans',system-ui,sans-serif;padding:6px 9px;border-radius:6px;cursor:pointer}
.ss-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 10px}
.ss-group{padding:6px 0 2px}
.ss-gh{display:flex;align-items:center;gap:10px;padding:8px 18px 4px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ss-bleu-mid)}
.ss-gh::after{content:'';flex:1;height:1px;background:var(--ss-line)}
.ss-item{display:flex;align-items:center;gap:12px;padding:9px 18px;text-decoration:none;color:inherit;cursor:pointer}
.ss-item:hover,.ss-item.active{background:var(--ss-hi)}
.ss-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:700}
.ss-ic svg{width:16px;height:16px}
.ss-ic.t-state,.ss-ic.t-metro{background:#E6ECFA;color:var(--ss-bleu-mid)}
.ss-ic.t-school{background:#FBF1DF;color:#9A6B1B}
.ss-ic.t-daycare,.ss-ic.t-dmetro{background:#E4F3EA;color:#15803D}
.ss-ic.t-guide{background:#F1EEF8;color:#5B3FA0}
.ss-tx{flex:1;min-width:0}
.ss-nm{display:block;font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-nm mark{background:none;color:var(--ss-bleu-mid);text-decoration:underline;text-decoration-color:var(--ss-gold);text-decoration-thickness:2px;text-underline-offset:3px}
.ss-sub{display:block;font-size:12.5px;color:var(--ss-muted);line-height:1.35;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-mi{flex-shrink:0;font-size:12px;font-weight:700;color:var(--ss-bleu-mid);background:#E6ECFA;border-radius:999px;padding:3px 9px}
.ss-note{padding:10px 18px;font-size:13.5px;color:var(--ss-muted)}
.ss-note b{color:var(--ss-ink)}
.ss-contact{display:block;margin:2px 18px 8px;font-size:13.5px;font-weight:600;color:var(--ss-bleu-mid);text-decoration:none}
.ss-contact:hover{text-decoration:underline}
.ss-hints{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 8px}
.ss-hint{border:1px solid var(--ss-line);background:#fff;border-radius:999px;padding:6px 12px;font:500 13px/1 'DM Sans',system-ui,sans-serif;color:var(--ss-ink);cursor:pointer}
.ss-hint:hover{border-color:var(--ss-bleu-mid);color:var(--ss-bleu-mid)}
.ss-all{display:block;margin:6px 18px 4px;padding:11px 14px;border-radius:10px;background:var(--ss-soft);text-decoration:none;font-size:14px;font-weight:600;color:var(--ss-bleu-mid)}
.ss-all:hover,.ss-all.active{background:var(--ss-hi)}
.ss-foot{display:flex;gap:16px;padding:9px 18px;border-top:1px solid var(--ss-line);font-size:11.5px;color:#8d95a8}
.ss-foot kbd{font:600 10.5px/1 'DM Sans',system-ui,sans-serif;padding:2px 5px;border:1px solid var(--ss-line);border-radius:4px;margin-right:4px;color:var(--ss-muted)}

/* phone: the same floating panel as the desktop — tricolour rule, rounded card, hint
   pills — only tighter. It used to become a full-screen sheet, which lost the design
   and hid the page behind it. The keyboard furniture goes instead: Esc, Enter and the
   arrows mean nothing on a touch screen. */
@media(max-width:640px){
  .ss-panel{top:70px;width:calc(100vw - 20px);max-height:calc(100vh - 92px)}
  .ss-head{padding:12px 14px}
  .ss-input{font-size:16px}   /* 16px stops iOS zooming into the field */
  .ss-item{padding:10px 14px}
  .ss-gh{padding:8px 14px 4px}
  .ss-note,.ss-hints{padding-left:14px;padding-right:14px}
  .ss-all,.ss-contact{margin-left:14px;margin-right:14px}
  /* One nowrap line meant "Dual Language" fitted on one row and became "Dual Langua…" on
     the next, which reads as a rendering fault rather than a length limit. Two wrapped
     lines fit every subtitle we actually produce at 375px. The name above keeps its single
     truncated line — school names are long and genuinely need cutting. */
  .ss-sub{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .ss-foot{display:none}
  /* The Esc chip becomes "Cancel", not a ✕. A type=search field already draws its own
     native ✕ to clear the text, so a second ✕ 10px away meant two identical buttons
     doing different things. "Cancel" next to a search field is also the iOS idiom
     (Safari, App Store): the ✕ clears what you typed, Cancel closes the search. */
  .ss-close{background:none;color:var(--ss-bleu-mid);font:600 15px/1 'DM Sans',system-ui,sans-serif;
    padding:4px 2px 4px 8px}
  .ss-close .ss-k{display:none}
  .ss-close .ss-t{display:inline}
}

/* ── Hamburger menu between phone and desktop widths ──
   Not search, but this is the one stylesheet every nav page shares (each page carries its
   own copy of the nav CSS). Above phone width the full-screen menu stretched across a whole
   laptop screen; here it becomes a 400px panel on the left, under the hamburger, with the
   page dimmed beside it (.ss-scrim, added by site-search.js; a tap on it closes the menu).
   Schools nav switches to the hamburger at 1240px, daycares at 940px. */
.ss-scrim{position:fixed;inset:64px 0 0;background:rgba(10,16,40,.38);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:1099}
@media(min-width:641px) and (max-width:1240px){
  .nav .nav-menu{right:auto;width:min(560px,calc(100vw - 72px));border-right:1px solid var(--ss-line);box-shadow:12px 0 40px rgba(0,20,70,.18);transform:translateX(-14px)}
  .nav.mobile-open .nav-menu{transform:none}
  /* By Metro Area / By State in 3 columns: East (NE + Mid-Atlantic) | South (SE + South
     Central) | West + Midwest. The left group opens up into its two columns; the right
     group stays one column, moved last. */
  .nav .rgroup-left{display:contents}
  .nav .rgroup-left .rcol{flex:1 1 0;border-right:1px solid var(--border-soft,#EDE8DF)}
  .nav .rgroup-right{order:5}
  .ss-menu-open .ss-scrim{opacity:1;visibility:visible}
}
@media(min-width:641px) and (max-width:940px){
  .top .top-menu{right:auto;width:400px;border-right:1px solid var(--ss-line);box-shadow:12px 0 40px rgba(0,20,70,.18);transform:translateX(-14px)}
  .top.mobile-open .top-menu{transform:none}
}