/* Survey pages wear the site header + footer (/chrome-v6.js, same as
   /student-portal/login.html) on top of the old Bootstrap 5.2 survey.

   Load order on every survey page:
     /styles.css  ->  bootstrap.min.css + survey css  ->  this file
   so the survey keeps its own look, and this file only patches the two
   places where the stylesheets bleed into each other:
     1) Bootstrap / survey rules leaking INTO the header + footer
     2) styles.css rules leaking INTO the survey (<main>)                   */

/* ---------- 1) header + footer ---------- */

/* Bootstrap's body font/size/line-height (and survey's Montserrat) would be
   inherited by the chrome. :where() keeps this at zero specificity so
   styles.css's own .topbar / footer values still win. */
:where(.topbar, header.site, footer, .scrim){font-family:var(--ff);font-size:16.5px;line-height:1.62;color:var(--body)}

/* Bootstrap element defaults (ul padding, p/h5 margins, blue underlined
   links) - put back the styles.css reset. Element-level specificity, so
   any class rule from styles.css still beats these. */
:where(.topbar, header.site, footer, .scrim) p,
:where(.topbar, header.site, footer, .scrim) ul,
:where(.topbar, header.site, footer, .scrim) ol,
:where(.topbar, header.site, footer, .scrim) h5{margin:0;padding:0}
:where(.topbar, header.site, footer, .scrim) a,
:where(.topbar, header.site, footer, .scrim) a:hover{color:inherit;text-decoration:none}

/* survey.css / responsive2.css style every bare <header> */
header.site{padding:0}

/* The header row is <div class="wrap nav">: Bootstrap .nav adds flex-wrap
   and zeroes padding-left, which kills the .wrap gutter (styles.css values) */
:where(header.site) .nav{flex-wrap:nowrap;padding-left:28px}
@media(max-width:600px){:where(header.site) .nav{padding-left:15px}}

/* Bootstrap .btn loads after styles.css and would win. Its rules read
   --bs-btn-* variables, so feed it the styles.css values. */
:where(.topbar, header.site, footer, .scrim) .btn{
  display:inline-flex;line-height:normal;vertical-align:middle;
  --bs-btn-font-family:var(--ff);--bs-btn-font-size:15px;--bs-btn-font-weight:700;--bs-btn-line-height:normal;
  --bs-btn-padding-y:0;--bs-btn-padding-x:26px;--bs-btn-border-width:0;--bs-btn-border-radius:999px;
  --bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;
  --bs-btn-bg:transparent;--bs-btn-hover-bg:transparent;--bs-btn-active-bg:transparent;
  --bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;--bs-btn-active-border-color:transparent;
  --bs-btn-focus-box-shadow:none}
:where(.topbar, header.site, footer, .scrim) .btn-sm{--bs-btn-padding-x:20px;--bs-btn-font-size:14px}

/* ---------- 2) survey content ---------- */

/* styles.css: img{display:block;max-width:100%} */
main img{display:inline;max-width:none}

/* styles.css: h1-h4 letter-spacing (Bootstrap resets the rest) */
main :is(h1,h2,h3,h4){letter-spacing:normal}

/* styles.css .btn - fixed 50px height + hover lift on the survey buttons */
main .btn{height:auto;gap:0;white-space:normal}
main .btn:hover{transform:none}

/* styles.css .nav (76px tall, space-between) - survey uses Bootstrap nav-pills */
main .nav{height:auto;justify-content:normal;align-items:normal;gap:0}