/*
 * The Schools Challenge: Site Map.
 * Load after screenNEW.css and home.css.
 * Scoped to body#sitemap; header, navigation and footer are untouched.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

body#sitemap > #container {
  --tsc-navy:#192b6d;
  --tsc-blue:#2f5caa;
  --tsc-sky:#91c5ed;
  --tsc-pale:#edf6fc;
  --tsc-ink:#172243;
  --tsc-muted:#5e6981;
  --tsc-line:rgba(25,43,109,.16);
  --tsc-serif:'Playfair Display',Georgia,serif;
  --tsc-sans:'DM Sans',Arial,sans-serif;
  box-sizing:border-box;
  width:min(1000px,calc(100% - 2*clamp(18px,4vw,56px)))!important;
  max-width:1000px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:clamp(44px,7vw,78px) 0 clamp(56px,8vw,88px)!important;
  background:transparent!important;
  color:var(--tsc-ink);
  font:400 16px/1.65 var(--tsc-sans);
  -webkit-font-smoothing:antialiased;
}

body#sitemap > #container::before {
  content:'';
  position:fixed;
  z-index:-2;
  inset:0;
  background:linear-gradient(180deg,var(--tsc-pale) 0,#fff 720px);
}

body#sitemap > #container *,
body#sitemap > #container *::before,
body#sitemap > #container *::after { box-sizing:border-box; }

body#sitemap > #container .contentfullwidth {
  float:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

body#sitemap > #container .contentfullwidth > h1 {
  max-width:820px;
  margin:0 auto clamp(32px,5vw,48px)!important;
  padding:0!important;
  color:var(--tsc-navy)!important;
  font:500 clamp(2.4rem,5vw,3.9rem)/1.08 var(--tsc-serif)!important;
  letter-spacing:-.035em;
  text-align:center!important;
}

body#sitemap > #container .sitemapblock {
  display:block!important;
  float:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(30px,5vw,50px)!important;
  border:1px solid var(--tsc-line)!important;
  background:#fff!important;
  columns:3 250px;
  column-gap:24px;
  column-rule:1px solid rgba(25,43,109,.1);
  box-shadow:0 14px 42px rgba(25,43,109,.07);
}

/* Main directory headings */
body#sitemap > #container .sitemapblock h3 {
  break-after:avoid;
  break-inside:avoid;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--tsc-navy)!important;
  background:var(--tsc-navy)!important;
  color:#fff!important;
  font:500 1.16rem/1.3 var(--tsc-serif)!important;
  text-align:left!important;
}

body#sitemap > #container .sitemapblock h3:not(:has(+ ul)) { margin-bottom:16px!important; }

body#sitemap > #container .sitemapblock h3 > a {
  position:relative;
  display:block!important;
  padding:13px 42px 13px 15px!important;
  color:#fff!important;
  font:inherit!important;
  text-decoration:none!important;
  transition:background .18s ease;
}

body#sitemap > #container .sitemapblock h3 > a::after {
  content:'→';
  position:absolute;
  top:50%;
  right:15px;
  color:rgba(255,255,255,.82);
  font:700 17px/1 var(--tsc-sans);
  transform:translateY(-50%);
}

body#sitemap > #container .sitemapblock h3 > a:hover { background:var(--tsc-blue)!important; }
body#sitemap > #container .sitemapblock h3 > a:focus-visible { outline:3px solid var(--tsc-sky);outline-offset:3px; }

/* Subpages */
body#sitemap > #container .sitemapblock ul {
  break-before:avoid;
  break-inside:avoid;
  margin:0 0 16px!important;
  padding:8px 14px 11px!important;
  border:1px solid var(--tsc-line)!important;
  border-top:0!important;
  background:var(--tsc-pale)!important;
  list-style:none!important;
}

body#sitemap > #container .sitemapblock li {
  position:relative;
  margin:0!important;
  padding:8px 4px 8px 19px!important;
  background:none!important;
  color:var(--tsc-muted)!important;
  font:400 13px/1.45 var(--tsc-sans)!important;
  list-style:none!important;
  text-align:left!important;
}

body#sitemap > #container .sitemapblock li::marker { content:''!important;font-size:0!important; }
body#sitemap > #container .sitemapblock li::before { content:'•';position:absolute;left:2px;top:50%;color:var(--tsc-blue);font:900 1.2rem/1 var(--tsc-sans);transform:translateY(-50%); }
body#sitemap > #container .sitemapblock li + li { border-top:1px solid rgba(25,43,109,.09); }
body#sitemap > #container .sitemapblock li > a { color:var(--tsc-blue)!important;font-weight:700!important;text-decoration:none!important; }
body#sitemap > #container .sitemapblock li > a:hover { color:var(--tsc-navy)!important;text-decoration:underline!important;text-underline-offset:3px; }
body#sitemap > #container .sitemapblock > br { display:none!important; }

@media (max-width:860px) {
  body#sitemap > #container .sitemapblock { columns:2 240px; }
}

@media (max-width:600px) {
  body#sitemap > #container { width:calc(100% - 30px)!important;padding:38px 0 56px!important; }
  body#sitemap > #container .contentfullwidth > h1 { font-size:2.3rem!important; }
  body#sitemap > #container .sitemapblock { padding:24px 14px!important;columns:1;column-rule:0; }
  body#sitemap > #container .sitemapblock h3 > a { padding-top:14px!important;padding-bottom:14px!important; }
  body#sitemap > #container .sitemapblock li { font-size:14px!important; }
}

@media (prefers-reduced-motion:reduce) {
  body#sitemap > #container *,body#sitemap > #container *::before,body#sitemap > #container *::after { transition:none!important; }
}
