/* =========================================================
   SA | SCHOOL family site — one fixed navigation everywhere
   ========================================================= */
:root{--family-nav-height:78px}

html{scroll-padding-top:calc(var(--family-nav-height) + 18px)}
body{padding-top:var(--family-nav-height)}

.header.family-header{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  height:var(--family-nav-height) !important;
  z-index:6000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
  padding:0 clamp(24px,4.5vw,86px) !important;
  border-bottom:1px solid rgba(30,28,26,.12) !important;
  background:rgba(247,242,234,.94) !important;
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 8px 30px rgba(30,28,26,.035);
}

.family-logo{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
  color:#1E1C1A !important;
}
.family-logo span{color:#7A2528 !important}

.family-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(15px,1.45vw,28px);
  white-space:nowrap;
}
.family-nav a{
  position:relative;
  padding:29px 0 27px;
  font-family:"Manrope",sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.015em;
  color:#5f5954;
  transition:color .2s ease;
}
.family-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  background:#7A2528;
  transition:right .22s ease;
}
.family-nav a:hover,
.family-nav a.is-active,
.family-nav a[aria-current="page"]{color:#1E1C1A}
.family-nav a:hover::after,
.family-nav a.is-active::after,
.family-nav a[aria-current="page"]::after{right:0}

/* The old audience chooser is gone: navigation is direct. */
.audience-modal,.lessons-modal,.mobile-audience-choice{display:none !important}

@media (max-width:1350px) and (min-width:1101px){
  .header.family-header{padding-inline:30px !important;gap:18px !important}
  .family-nav{gap:14px}
  .family-nav a{font-size:11.5px}
}

@media (max-width:1100px){
  :root{--family-nav-height:72px}
  body{padding-top:var(--family-nav-height) !important}
  html{scroll-padding-top:calc(var(--family-nav-height) + 14px)}
  .header.family-header{
    position:fixed !important;
    height:var(--family-nav-height) !important;
    padding:0 22px !important;
  }
  .family-nav{display:none !important}
  .family-header .mobile-nav-toggle{display:flex !important}
  .family-mobile-nav{padding-top:96px !important}
  .family-mobile-nav .mobile-nav-links a{
    min-height:58px;
    font-size:25px;
  }
  .family-mobile-nav .mobile-nav-links a.is-active,
  .family-mobile-nav .mobile-nav-links a[aria-current="page"]{
    color:#7A2528;
  }
}

@media (max-width:600px){
  .header.family-header{padding-inline:18px !important}
  .family-logo{font-size:15px !important}
}