/* Map canvas keeps 800/404 ratio and hides any seam */
#map,
#map .leaflet-container { background: transparent !important; }
.county-map-canvas {  margin: 8px auto 1.4rem; max-width: 1600px; }

/* Bottom-right zoom controls spacing */
#map .leaflet-bottom.leaflet-right .leaflet-control { margin: 12px; }

/* Remove focus ring on clicked markers */
#map .leaflet-interactive,
#map .leaflet-interactive:focus,
#map .leaflet-interactive:active { outline: none !important; }

/* Tooltip as popup */
.leaflet-tooltip.school-tooltip {
  background: #fff;
  border: 1px solid #d0d7de;
  color: #111;
  border-radius: 0; /* square corners */
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  max-width: 280px;
  white-space: normal;
  pointer-events: auto;
}

#map .leaflet-tooltip,
#map .leaflet-tooltip * {
  pointer-events: auto !important;
}

/* Hide the little arrow */
.leaflet-tooltip.school-tooltip.leaflet-tooltip-right:before,
.leaflet-tooltip.school-tooltip.leaflet-tooltip-left:before,
.leaflet-tooltip.school-tooltip.leaflet-tooltip-top:before,
.leaflet-tooltip.school-tooltip.leaflet-tooltip-bottom:before {
  display: none !important;
}

/* Inner layout + close button */
.leaflet-tooltip.school-tooltip .tip-inner { position: relative; padding-right: 22px; }
.leaflet-tooltip.school-tooltip .tip-close {
  position: absolute; top: 2px; right: 4px;
  width: auto; height: auto; line-height: 1;
  padding: 0; margin: 0;
  border: none; background: none; border-radius: 0;
  color: #666; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: none;
}
.leaflet-tooltip.school-tooltip .tip-close:hover { color: #000; }
.leaflet-tooltip.school-tooltip .tip-close:focus { outline: none; }

/* Content styling within popup */
.leaflet-tooltip.school-tooltip .st-logo { display:block; max-width: 120px; height:auto; margin: 0 0 8px 0; }
.leaflet-tooltip.school-tooltip .st-name { font-weight: 700; margin: 2px 0 6px; }
.leaflet-tooltip.school-tooltip .st-block { margin: 6px 0; }

/* Map + directory shared width wrapper */
.sd-wrap {  max-width: 1600px; margin: 0 auto; }

/* --- Filters --- */
.school-directory__filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 3.5rem 0; justify-content: center; }
.sd-btn {
  display:inline-block; padding:.7rem 1.2rem; border:2px solid #b3b3b3; border-radius:12px; ;
  background:#fff; color:#b3b3b3; text-decoration:none; line-height:1; font-size:15px; font-weight:700;
  transition:transform .04s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.sd-btn:hover { border-color:#358255; color:#358255; cursor:pointer; }
.sd-btn:active { transform:translateY(1px); }
.sd-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(53,130,85,.35); }
.sd-btn.is-active { background:#358255; color:#fff; border-color:#358255; box-shadow:inset 0 0 0 1px #358255; }

.select-a-county {
      display: flex;
    align-items: center;
    font-weight:700;
    margin-right:5px;
    font-size:.9rem;
}

.find-a-map-header {
  padding: 50px 0 30px;
  text-align: center;
  font-size: 35px;
}

.find-a-school-container {
margin-bottom:90px;
}

.find-a-map-header h2 {
      font-family: 'Quicksand', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 600;
    font-size: 35px;
}

/* --- Header + Rows --- */
.school-directory__header-row {
  display:flex; align-items:center; ;
  padding:8px 10px; background:#f1f1f1; font-size:1.1rem; margin-bottom:10px; font-weight:700;
}

.school-directory__list {
  font-weight:400;
}
.school-row { display:flex; align-items:center; border-bottom:1px solid #d3d3d3; padding:10px 12px; }
.school-col { padding: 2px 8px; min-width: 0; }
.school-col--logo   { flex: 0 0 25%; max-width: 25%; }
.school-col--name   { flex: 0 0 39%; max-width: 41%; }
.school-col--city   { flex: 0 0 18%; max-width: 18%; line-height:2rem;}
.school-col--grades { flex: 0 0 18%; max-width: 16%; line-height:2rem;}

.school-network {
  text-transform:uppercase;
  font-size:.8rem;
  font-weight:700;
}
.school-name {
  font-weight:700;
  font-size:1.2rem;
}

.school-name a {
  color:#423d3d;
  text-decoration:none;
}

.school-name a:hover { text-decoration:underline; }

.school-col--logo { display:flex; justify-content:center; align-items:center; overflow:visible; }
.school-logo { display:block; width:auto !important; height:auto !important; max-width:100%; max-height:60px; object-fit:contain !important; }
.school-logo--placeholder { width:60px; height:60px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:6px; }
.school-directory__empty { margin:1rem 0; color:#555; }

@media (max-width: 700px) { .school-col--city, .school-col--grades { flex:0 0 160px; } }
@media (max-width: 560px) {
  .school-row, .school-directory__header-row { padding:8px 8px; }
  .school-col--logo { flex-basis:70px; }
  .school-col--city, .school-col--grades { flex:0 0 140px; }
}
@media (max-width: 480px) { .school-col--city, .school-col--grades { flex:0 0 120px; }
}


/* =========================
   School map – Leaflet popup
   ========================= */

/* Hide the little popup arrow so our manual positioning looks clean */
.leaflet-container .leaflet-popup-tip-container {
  display: none !important;
}

/* Remove default margins that interfere with JS offset math */
.leaflet-container .leaflet-popup {
  margin: 0;
}

/* Popup chrome */
.leaflet-container .school-popup .leaflet-popup-content-wrapper {
  border-radius: 0;
  border: 1px solid #c2c2c2; /* light gray */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  background: #fff;
}

/* Remove Leaflet’s default inner margins; we’ll control spacing ourselves */
.leaflet-container .school-popup .leaflet-popup-content {
  margin: 0;
  pointer-events: auto; /* ensure links/buttons are clickable */
}

/* Content layout (keep max-width in sync with JS popup maxWidth: 420) */
.leaflet-container .school-popup .popup-inner {
  position: relative;
  padding: 14px 16px 16px 20px; /* extra room on right for close button */
  max-width: 290px;
  line-height: 1.35;
  color: #111827; /* slate-900 */
  font-size: 16px;
  font-family:Quicksand, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

/* Close button (×) */
.leaflet-container .school-popup .popup-close {
  position: absolute;
  top: 0px;
  right: 10px;
  font-family:Quicksand, Arial, Helvetica, sans-serif;
  border: 0;
  background: transparent;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
  font-weight:300;
  padding: 0;
  color: #9d9d9d;
  -webkit-tap-highlight-color: transparent;
}
.leaflet-container .school-popup .popup-close:hover { opacity: 0.8; }

/* Content bits */
.leaflet-container .school-popup .st-logo {
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 0 10px;
}
.leaflet-container .school-popup .st-name {
  font-weight: 700;

  margin: 0 0 8px;
  font-size: 1.3rem;
}
.leaflet-container .school-popup .st-block {
  margin: 8px 0;
  font-size: 0.95rem;
}
.leaflet-container .school-popup a {
  text-decoration: underline;
  color: #358255; 
   transition:.2s;
}

.leaflet-container .school-popup a:hover {
  opacity:.7; 
  transition:.2s;
}

/* Responsive guardrails for small screens */
@media (max-width: 480px) {
  .leaflet-container .school-popup .popup-inner { max-width: 320px; }
}
@media (max-width: 360px) {
  .leaflet-container .school-popup .popup-inner { max-width: 280px; }
}
.map-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* margins/max-width live here so off-screen parking fully removes layout space */
  margin: 8px auto 2rem;
  max-width: 1600px;
}

/* Map stays laid out by aspect-ratio */
#map,
.county-map-canvas,
#map.leaflet-container {
  width: 100%;
  height: auto; /* aspect-ratio on #map sets the height on desktop */
}

/* Small screens: NO layout space, NO display:none */
@media (max-width: 1000px) {
  .map-wrap {
    position: fixed;     /* take it out of document flow */
    width: 1px;
    height: 1px;         /* keep a tiny (non-zero) box so Leaflet stays happy */
    overflow: hidden;
    top: -10000px;
    left: -10000px;      /* park it off-screen */
  }
  .school-directory__filters { display: none; }
}

/* Desktop: restore normal layout */
@media (min-width: 1001px) {
  .map-wrap {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
  }
}




/* Ensure the close button positions relative to the popup content
   and that it's on top & clickable */
.leaflet-container .school-popup .leaflet-popup-content {
  position: relative;       /* anchor for .popup-close */
  pointer-events: auto;
  z-index: 0;
}

.leaflet-container .school-popup .popup-close {
  position: absolute;
  top: 0px;
  right: 8px;
  z-index: 5;               /* above everything in the popup */
  pointer-events: auto;
}

.keyboard-outline {
    outline-style: solid !important;
    outline-width: 0px !important;
}

.intro-sentence-above-school-list {
font-size:20px;
text-align:center;
font-weight:600;
padding-top:10px;
padding-bottom:30px;
}