/* Soundline School — premium.css
   The pages are generated by tools/site/make.py and carry their layout inline.
   This file holds only what inline styles cannot: page defaults, focus, hover,
   the phone menu, the phone action bar, and motion preferences.
   Brand Guide: Night-water palette, three typefaces, no gradients, no shadows, nothing purple. */

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:#F7F5F0; color:#12222B; font-family:'Instrument Sans',Arial,sans-serif}
img{max-width:100%}
a{color:#1B4B6E}
a:hover{color:#12222B}
.on-dark a:hover{color:#F7F5F0}
strong{font-weight:600}
[id]{scroll-margin-top:24px}

:focus-visible{outline:3px solid #1B4B6E; outline-offset:3px; border-radius:4px}
.on-dark :focus-visible{outline-color:#F2C14E}
.btn:focus-visible{border-radius:999px}

.btn{transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}

/* header */
.nav-links{display:flex; align-items:center; gap:4px 26px}
.nav-links .nav-link:hover{color:#F7F5F0 !important}
.menu{display:none; position:relative}
.menu summary{list-style:none; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:999px; border:1px solid rgba(247,245,240,.4); cursor:pointer; color:#F7F5F0}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:#F2C14E; color:#F2C14E}
.menu .panel{position:absolute; right:0; top:56px; z-index:20; box-sizing:border-box; min-width:240px; padding:8px; background:#12222B; border:1px solid rgba(247,245,240,.4); border-radius:16px; display:flex; flex-direction:column}
.menu .panel a{display:flex; align-items:center; min-height:46px; padding:0 14px; border-radius:10px; color:#F7F5F0; font-size:17px; font-weight:500; text-decoration:none}
.menu .panel a[aria-current="page"]{color:#F2C14E}
.menu .panel a:hover{background:#1B4B6E; color:#F7F5F0}

@media (max-width:72rem){
  .nav-links .nav-link, .nav-links > .btn{display:none !important}
  .menu{display:block}
}

/* questions */
details > summary{list-style-position:outside}
details > summary:hover{color:#1B4B6E}

/* phone: one action bar, which steps aside whenever another call button is on screen (site.js) */
.sticky-cta{display:none}
@media (max-width:56rem){
  body{padding-bottom:76px}
  .sticky-cta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; box-sizing:border-box; padding:10px 20px calc(10px + env(safe-area-inset-bottom)); background:#12222B; border-top:1px solid rgba(247,245,240,.18); transition:transform .25s ease}
  .sticky-cta .btn{flex:1; display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:48px; padding:10px 20px; border-radius:999px; background:#F2C14E; border:3px solid #F2C14E; color:#12222B; font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:18px; letter-spacing:-.02em; text-decoration:none}
  .sticky-cta.off{transform:translateY(110%)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .sticky-cta{transition:none}
  .btn:hover{transform:none}
}

/* the tuition table is a table on a wide screen and two stacked cards on a phone */
.only-narrow{display:none}
@media (max-width:44rem){
  .only-wide{display:none}
  .only-narrow{display:block}
}

/* research and the survey still read site.css for their bodies; keep its old footer rules off the new footer */
footer.on-dark{padding:0; border-top:0; font-size:inherit}
footer.on-dark a{border-bottom:0}