/* ============================================================

   SCHOOL SHELL — per-school sub-site nav strip + page chrome

   Loaded on every page inside /html/{kindergarten,primary,secondary}/.

   Each school gets its own accent identity while keeping the

   global Ather header/footer for cross-site continuity.

   ============================================================ */



:root {

  --school-shell-h: 64px;

}



.school-shell {

  position: sticky;

  top: var(--header-h, 80px);

  z-index: 40;

  background: linear-gradient(180deg, rgba(11, 16, 36, .96), rgba(11, 16, 36, .9));

  backdrop-filter: saturate(140%) blur(10px);

  -webkit-backdrop-filter: saturate(140%) blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, .08);

  box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .8);

}



.school-shell::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 2px;

  background: var(--school-accent, #C9A961);

  opacity: .85;

}



.school-shell__inner {

  display: flex;

  align-items: center;

  gap: clamp(.5rem, 1.5vw, 1.25rem);

  min-height: var(--school-shell-h);

  padding-block: .4rem;

}



.school-shell__brand {

  display: inline-flex;

  align-items: center;

  gap: .65rem;

  text-decoration: none;

  color: var(--text, #E8ECF7);

  flex-shrink: 0;

}



.school-shell__crest {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  display: grid;

  place-items: center;

  font-family: var(--font-serif, "Playfair Display", serif);

  font-size: 1.05rem;

  font-weight: 700;

  background: var(--school-accent, #C9A961);

  color: var(--school-accent-ink, #0B1024);

  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .15);

}



.school-shell__text {

  display: flex;

  flex-direction: column;

  line-height: 1.1;

}



.school-shell__eyebrow {

  font-size: .65rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--text-soft, #A8B2D1);

}



.school-shell__name {

  font-family: var(--font-serif, "Playfair Display", serif);

  font-size: 1rem;

  font-weight: 600;

  white-space: nowrap;

  color: var(--text, #E8ECF7);

}



/* Scrollable nav track — flex min-width:0 lets items scroll instead of clipping */

.school-shell__nav-wrap {

  position: relative;

  flex: 1 1 auto;

  min-width: 0;

  overflow: hidden;

}



.school-shell__nav-wrap::before,

.school-shell__nav-wrap::after {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  width: 20px;

  z-index: 2;

  pointer-events: none;

  opacity: 0;

  transition: opacity .2s ease;

}

.school-shell__nav-wrap::before {

  left: 0;

  background: linear-gradient(90deg, rgba(11, 16, 36, .98) 0%, transparent 100%);

}

.school-shell__nav-wrap::after {

  right: 0;

  background: linear-gradient(-90deg, rgba(11, 16, 36, .98) 0%, transparent 100%);

}

.school-shell__nav-wrap.is-scroll-left::before { opacity: 1; }

.school-shell__nav-wrap.is-scroll-right::after { opacity: 1; }



.school-shell__nav {

  list-style: none;

  margin: 0;

  padding: 2px 4px;

  display: flex;

  align-items: center;

  gap: .2rem;

  overflow-x: auto;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  scroll-behavior: smooth;

  scrollbar-width: thin;

  scrollbar-color: rgba(255, 255, 255, .28) transparent;

}



.school-shell__nav::-webkit-scrollbar {

  display: block;

  height: 5px;

}

.school-shell__nav::-webkit-scrollbar-track {

  background: transparent;

}

.school-shell__nav::-webkit-scrollbar-thumb {

  background: rgba(255, 255, 255, .22);

  border-radius: 999px;

}

.school-shell__nav::-webkit-scrollbar-thumb:hover {

  background: rgba(255, 255, 255, .38);

}



.school-shell__nav li {

  flex: none;

}



.school-shell__nav a {

  position: relative;

  display: inline-flex;

  align-items: center;

  padding: .5rem .75rem;

  border-radius: 8px;

  text-decoration: none;

  font-size: .86rem;

  font-weight: 500;

  color: var(--text-soft, #A8B2D1);

  white-space: nowrap;

  transition: color .15s ease, background .15s ease, box-shadow .15s ease;

}



.school-shell__nav a:hover:not(.is-active):not([aria-current="page"]) {

  color: var(--text, #fff);

  background: rgba(255, 255, 255, .06);

}



/* Active pill — school accent + shimmer (all items, every page) */

.school-shell__nav a.is-active,

.school-shell__nav a[aria-current="page"] {

  overflow: hidden;

  color: var(--nav-active-fg) !important;

  font-weight: 700;

  background: var(--nav-active-bg) !important;

  box-shadow: 0 2px 10px var(--nav-active-shadow), inset 0 1px 0 rgba(255, 255, 255, .28);

}



.school-shell__nav a.is-active::before,

.school-shell__nav a[aria-current="page"]::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%);

  background-size: 260% 100%;

  animation: navShimmer 6s ease-in-out infinite;

  pointer-events: none;

  border-radius: inherit;

  z-index: 0;

}



.school-shell__nav a.is-active::after,

.school-shell__nav a[aria-current="page"]::after {

  display: none;

}



.school-shell__actions {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  flex-shrink: 0;

}



.school-shell__actions .btn--gold {

  position: relative;

  overflow: hidden;

  white-space: nowrap;

  background: var(--nav-active-bg) !important;

  color: var(--nav-active-fg) !important;

  border-color: var(--nav-active-bg) !important;

  font-weight: 700;

  box-shadow: 0 2px 10px var(--nav-active-shadow), inset 0 1px 0 rgba(255, 255, 255, .28);

}



.school-shell__toggle {

  display: none;

  width: 38px;

  height: 38px;

  border-radius: 8px;

  background: rgba(255, 255, 255, .06);

  border: 1px solid rgba(255, 255, 255, .1);

  color: var(--text);

  cursor: pointer;

  position: relative;

}

.school-shell__toggle span,

.school-shell__toggle span::before,

.school-shell__toggle span::after {

  content: "";

  position: absolute;

  left: 9px;

  right: 9px;

  height: 2px;

  background: currentColor;

  border-radius: 2px;

}

.school-shell__toggle span { top: 50%; transform: translateY(-50%); }

.school-shell__toggle span::before { top: -6px; left: 0; right: 0; }

.school-shell__toggle span::after { top: 6px; left: 0; right: 0; }



/* ---- Per-school accent identities ---- */

body[data-school="kg"]        { --school-accent: #D88A4A; --school-accent-ink: #FFF; }

body[data-school="primary"]   { --school-accent: #2E7D5B; --school-accent-ink: #FFF; }

body[data-school="secondary"] { --school-accent: #8B1E3F; --school-accent-ink: #FFF; }



/* Page chrome */

.school-welcome {

  background: linear-gradient(180deg, rgba(11, 16, 36, .65), rgba(11, 16, 36, 0));

  padding: var(--sp-6) 0 var(--sp-4);

  border-bottom: 1px dashed rgba(255, 255, 255, .06);

}

.school-welcome__row {

  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;

}

.school-welcome__eyebrow {

  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;

  color: var(--school-accent);

}

.school-welcome h1 {

  font-family: var(--font-serif, "Playfair Display", serif);

  font-size: clamp(1.6rem, 3.4vw, 2.6rem);

  margin: .35rem 0 .5rem;

}

.school-welcome p { color: var(--text-soft); max-width: 60ch; }



/* ---- Responsive ---- */

@media (max-width: 1280px) {

  .school-shell__name { font-size: .92rem; }

  .school-shell__nav a { padding: .48rem .62rem; font-size: .82rem; }

}



@media (max-width: 900px) {

  .school-shell__brand .school-shell__eyebrow { display: none; }

  .school-shell__nav a { padding: .45rem .55rem; font-size: .8rem; }

}



@media (max-width: 768px) {

  .school-shell__inner { gap: var(--sp-3); }

  .school-shell__toggle { display: inline-flex; align-items: center; justify-content: center; }

  .school-shell__actions .btn { display: none; }



  .school-shell__nav-wrap {

    position: fixed;

    inset: calc(var(--header-h, 72px) + var(--school-shell-h)) 0 0 0;

    flex: none;

    min-width: 0;

    overflow: visible;

    z-index: 39;

    transform: translateX(100%);

    transition: transform .28s ease;

    background: rgba(11, 16, 36, .98);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

  }

  html[dir="rtl"] .school-shell__nav-wrap {

    transform: translateX(-100%);

  }

  .school-shell.is-open .school-shell__nav-wrap {

    transform: translateX(0);

  }



  .school-shell__nav-wrap::before,

  .school-shell__nav-wrap::after { display: none; }



  .school-shell__nav {

    flex-direction: column;

    align-items: stretch;

    padding: var(--sp-4);

    gap: .25rem;

    overflow-x: hidden;

    overflow-y: auto;

    max-height: 100%;

  }



  .school-shell__nav a {

    padding: .85rem 1rem;

    font-size: 1rem;

    border-radius: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, .04);

  }

}



@media (max-width: 480px) {

  .school-shell__crest { width: 32px; height: 32px; font-size: .95rem; }

  .school-shell__name { font-size: .88rem; }

}



/* RTL */

html[dir="rtl"] .school-shell__nav { direction: rtl; }

html[dir="rtl"] .school-shell__toggle span::before { right: 0; left: 0; }