@import url("fonts.css");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
/* Lock scrolling on the ROOT, not on body. html already has overflow-x:clip,
   so overflow:hidden on body turns body into its own scroll container — a
   position:sticky header then sticks to body and is thrown off-screen (with
   its close button) when the menu opens after scrolling. site.js puts
   .is-locked on <html> directly; a :has() selector was tried first and its
   style invalidation visibly lagged behind the menu opening. */
html.is-locked { overflow: hidden; }
/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
/* A <button> inherits the user agent's grey `buttonface` unless something says
   otherwise. An outline/ghost button that sets only border-color and color then
   renders as light-grey with (often white) text on it — invisible. Reset here;
   any variant that wants a fill sets one and wins on specificity. */
button { background: transparent; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ============================================================
   Skiathos Emergency — "Clinic"
   White and cool blue-grey, the old site's navy for headings,
   the logo's red only for emergency accents. Advent Pro + Arimo.
   WCAG 2.2 AA: every text colour below is checked on its ground.
   ============================================================ */
:root {
  --bg: #ffffff;
  --bg-2: #f2f5fa;          /* section tint */
  --bg-3: #e5ebf5;
  --navy: #07268c;          /* on white 12.1:1 */
  --navy-2: #0a1f5c;
  --ink: #1b2436;           /* body text 15:1 */
  --ink-2: #47526a;         /* secondary text 7.6:1 on white, 7:1 on --bg-2 */
  --line: #d5dce8;
  --red: #c8102e;           /* white text on red 5.9:1; red on white 5.9:1 */
  --red-dark: #a00d25;
  --focus: #07268c;
  --radius: 14px;
  --header-h: 80px;
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --display: "Advent Pro", "Arimo", system-ui, sans-serif;
  --text: "Arimo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html { scroll-padding-top: calc(var(--header-h) + 16px); background: var(--bg); }
body { background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.7 var(--text); }
h1, h2, h3 { font-family: var(--text); font-weight: 700; color: var(--navy); line-height: 1.2; letter-spacing: -.01em; }
/* Advent Pro only where it is large: page titles and section titles. Smaller headings
   and labels use Arimo Bold, which stays readable at small sizes. */
.hero h1, .page-head h1, .sec-title { font-family: var(--display); line-height: 1.1; letter-spacing: 0; }
a { color: var(--navy); text-underline-offset: .18em; }
a:hover { color: var(--red-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 50rem; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .7rem 1rem; background: var(--navy); color: #fff; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 1rem; color: #fff; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font: 700 .82rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.eyebrow .ico { width: 1rem; height: 1rem; }
.sec-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 1rem; }
.sec-head { margin-bottom: 2rem; max-width: 46rem; }
.sec-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; max-width: none; }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.prose { max-width: 68ch; }
.block { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.3rem; border-radius: 999px; border: 2px solid transparent; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.btn .ico { width: 1.15rem; height: 1.15rem; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-emergency { background: var(--red); color: #fff; }
.btn-emergency:hover { background: var(--red-dark); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--bg-3); color: var(--navy-2); }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
.link-arrow .ico { transition: transform .2s var(--ease); }
.link-arrow:hover .ico { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: #fff; border-bottom: 1px solid var(--line); }
.site-header.is-stuck { box-shadow: 0 6px 24px -12px rgba(7, 38, 140, .25); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 100%; }
.brand { margin-right: auto; display: block; }
.brand img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: 1.2rem; }
.nav ul { display: flex; gap: .2rem; list-style: none; }
.nav ul a { display: block; padding: .6rem .85rem; border-radius: 8px; color: var(--ink); font-weight: 700; text-decoration: none; }
.nav ul a:hover { background: var(--bg-2); color: var(--navy); }
.nav ul a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--red); border-radius: 0; }
.lang { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); font-weight: 700; text-decoration: none; }
.lang:hover { border-color: var(--navy); }
.lang .ico { width: 1.05rem; height: 1.05rem; }
.nav-toggle { display: none; position: relative; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { position: absolute; left: 50%; width: 1.2rem; height: 2px; margin-left: -.6rem; background: var(--navy); content: ""; transition: transform .25s var(--ease); }
.nav-toggle .bars { top: 50%; }
.nav-toggle .bars::before { top: -7px; left: 0; margin: 0; }
.nav-toggle .bars::after { top: 7px; left: 0; margin: 0; }
.site-header.is-open .nav-toggle .bars { background: transparent; }
.site-header.is-open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(460px, 68vh, 700px); padding: 4rem 0 6.5rem; color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 22, 70, .92) 0%, rgba(6, 22, 70, .78) 42%, rgba(6, 22, 70, .25) 80%), linear-gradient(0deg, rgba(6, 22, 70, .5), transparent 50%); }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5rem); max-width: 14ch; margin-bottom: .6rem; }
.hero .lead { color: #fff; max-width: 34rem; }
.eyebrow-light { color: #fff; background: var(--red); padding: .35rem .75rem; border-radius: 999px; letter-spacing: .08em; }
.facts-wrap { position: relative; z-index: 2; margin-top: -3.2rem; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 40px -24px rgba(7, 38, 140, .35); }
.facts li { display: flex; align-items: center; gap: .8rem; padding: 1.2rem 1.3rem; line-height: 1.35; color: var(--ink-2); }
.facts li + li { border-left: 1px solid var(--line); }
.facts .ico { width: 1.6rem; height: 1.6rem; color: var(--red); }
.facts strong { display: block; color: var(--navy); font-size: 1.08rem; }
.facts a { text-decoration: none; }

.page-head { position: relative; isolation: isolate; padding: clamp(3rem, 7vw, 5rem) 0; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.3rem, 1.5rem + 3.5vw, 4rem); margin-bottom: .6rem; }
.page-head .lead { max-width: 44rem; color: var(--ink-2); }
.page-head.has-photo { color: #fff; padding: clamp(5rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 4.5rem); background: var(--navy-2); }
.page-head-media { position: absolute; inset: 0; z-index: -1; }
.page-head-media img { width: 100%; height: 100%; object-fit: cover; }
.page-head-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 22, 70, .93) 0%, rgba(6, 22, 70, .75) 50%, rgba(6, 22, 70, .35) 100%); }
.page-head.has-photo h1, .page-head.has-photo .lead { color: #fff; }
.page-head.has-photo .eyebrow { color: #fff; }

/* ---------- Home ---------- */
.intro-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); }
.quote { margin-top: 1.5rem; padding-left: 1.2rem; border-left: 4px solid var(--red); font: 700 clamp(1.08rem, .98rem + .5vw, 1.3rem)/1.45 var(--text); color: var(--ink); }
.depts-block, .highlights { background: var(--bg-2); }
.depts-block + .highlights { padding-top: 0; }
.depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; list-style: none; }
.dept { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; height: 100%; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.dept .ico { grid-row: span 2; width: 2.8rem; height: 2.8rem; padding: .6rem; border-radius: 12px; background: #fdecef; color: var(--red); }
.dept-name { font: 700 1rem/1.25 var(--text); color: var(--navy); }
.dept-sub { font-size: .88rem; line-height: 1.35; color: var(--ink-2); }
.dept:hover { border-color: var(--navy); box-shadow: 0 12px 24px -16px rgba(7, 38, 140, .5); transform: translateY(-2px); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; list-style: none; }
.stats li { padding: 1.4rem; background: var(--navy); color: #fff; border-radius: var(--radius); }
.stats strong { display: block; margin-bottom: .4rem; font: 700 1.8rem/1.1 var(--display); color: #fff; }
.stats span { font-size: .95rem; line-height: 1.45; }
.peeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; list-style: none; }
.peek img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

.find-us { background: var(--bg-2); border-top: 1px solid var(--line); }
.find-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 4rem; align-items: center; }
.contact-card { margin: 0; padding: 1.2rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.contact-card > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.contact-card > div:first-child { border-top: 0; }
.contact-card dt { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--navy); }
.contact-card dt .ico { color: var(--red); }
.contact-card dd { margin: 0; }

/* ---------- Services ---------- */
.services-layout { display: grid; grid-template-columns: 16rem 1fr; gap: 3rem; padding: clamp(3rem, 6vw, 5rem) 0; }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
.toc-title { margin: 0 0 .6rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.toc ul { list-style: none; border-left: 2px solid var(--line); }
.toc a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; font-size: .95rem; }
.toc a:hover { border-color: var(--red); color: var(--navy); }
.services { display: grid; gap: 1rem; }
.service { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.service-icon .ico { width: 3.2rem; height: 3.2rem; padding: .7rem; border-radius: 14px; background: #fdecef; color: var(--red); }
.service h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); margin: .35rem 0 .7rem; }
.dept-photo { margin: 1rem 0 0; }
.dept-photo img { border-radius: 12px; max-width: 28rem; width: 100%; }

/* ---------- Facilities ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; list-style: none; }
.gallery li:first-child { grid-column: span 2; }
.gallery li:first-child .tile img { position: absolute; inset: 0; aspect-ratio: auto; }
.gallery li:first-child .tile { min-height: 100%; }
.tile { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; background: var(--bg-3); }
.tile img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.tile:hover img { transform: scale(1.04); }

/* ---------- Contact + Covid ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.big-line { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; font: 700 clamp(1.15rem, .95rem + 1vw, 1.6rem)/1.25 var(--text); color: var(--navy); }
.big-line .ico { width: 2rem; height: 2rem; color: var(--red); }
.big-line a { text-decoration: none; }
.big-line a:hover { text-decoration: underline; }
.contact-photo { margin: 0; }
.contact-photo img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.faqs { display: grid; gap: .7rem; }
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; font: 700 1.1rem/1.35 var(--text); color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--red); transition: transform .25s var(--ease); }
.faq[open] summary .ico { transform: rotate(45deg); }
.faq-body { padding: 0 1.4rem 1.2rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-2); color: #e6ebf6; margin-top: 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #ffd7dd; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem 3rem; padding: 3.5rem 0 2.5rem; }
.footer-name { font: 700 1.25rem/1.25 var(--text); color: #fff; margin-bottom: .5rem; }
.footer-h { margin-bottom: .8rem; font: 700 .85rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.site-footer address { font-style: normal; }
.icon-line { display: flex; gap: .6rem; }
.icon-line .ico { margin-top: .25rem; color: #ff9aa9; }
.footer-links { list-style: none; display: grid; gap: .35rem; }
.social { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.espa { background: #fff; padding: 1.2rem 0; }
.espa a { display: block; max-width: 44rem; margin-inline: auto; }
.espa img { width: 100%; height: auto; }
.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: 1.1rem 0; font-size: .88rem; }
.colophon p { margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(6, 14, 40, .95); opacity: 0; transition: opacity .25s; }
.lightbox.is-open { display: block; }
.lightbox.is-visible { opacity: 1; }
.lb-stage { position: absolute; inset: 4.5rem 4.5rem 4rem; display: grid; place-items: center; }
.lb-figure { margin: 0; display: grid; justify-items: center; gap: .8rem; }
.lb-img { max-width: 100%; max-height: calc(100vh - 11rem); width: auto; height: auto; border-radius: 8px; }
.lb-caption { color: #fff; text-align: center; }
.lb-counter { position: absolute; left: 1.4rem; top: 1.4rem; margin: 0; color: #fff; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #fff; background: rgba(6, 14, 40, .6); color: #fff; cursor: pointer; }
.lb-btn:hover { background: var(--red); border-color: var(--red); }
.lb-btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-btn:focus-visible { outline-color: #fff; }
.lb-prev { left: 1rem; top: 50%; margin-top: -1.5rem; }
.lb-next { right: 1rem; top: 50%; margin-top: -1.5rem; }
.lb-close { right: 1rem; top: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .depts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .brand img { height: 42px; }
  .nav-toggle { display: block; }
  .nav { position: fixed; inset: var(--header-h) 0 auto; z-index: 90; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem 1.25rem 1.6rem; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(7, 38, 140, .3); display: none; }
  .site-header.is-open .nav { display: flex; }
  .nav ul { flex-direction: column; }
  .nav ul a { padding: .9rem .4rem; font-size: 1.15rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav ul a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--red); padding-left: 1rem; }
  .lang { align-self: flex-start; }
  .intro-grid, .find-grid, .contact-grid, .services-layout { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ul { columns: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery li:first-child .tile img { position: static; aspect-ratio: 3 / 2; }
  .peeks { grid-template-columns: 1fr 1fr; }
  .peeks li:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .wrap { width: min(100% - 2rem, var(--wrap)); }
  .depts { grid-template-columns: 1fr 1fr; }
  .stats, .facts { grid-template-columns: 1fr; }
  .facts li + li { border-left: 0; border-top: 1px solid var(--line); }
  .hero { min-height: 520px; padding-bottom: 5rem; }
  .hero-media::after { background: linear-gradient(0deg, rgba(6, 22, 70, .95) 0%, rgba(6, 22, 70, .8) 55%, rgba(6, 22, 70, .45) 100%); }
  .service { grid-template-columns: 1fr; gap: .6rem; padding: 1.3rem; }
  .toc ul { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-card > div { grid-template-columns: 1fr; gap: .2rem; }
  .gallery { grid-template-columns: 1fr; }
  .gallery li:first-child { grid-column: auto; }
  .lb-stage { inset: 4rem .5rem 5rem; }
  .lb-prev, .lb-next { top: auto; bottom: 1rem; margin: 0; }
  .lb-prev { left: calc(50% - 3.6rem); }
  .lb-next { right: calc(50% - 3.6rem); }
}
@media (max-width: 400px) { .depts { grid-template-columns: 1fr; } }

/* ---------- Accessibility tools ---------- */
.a11y { position: fixed; left: 0; top: 50%; z-index: 150; display: flex; flex-direction: column; gap: 4px; transform: translateY(-50%); }
.a11y button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: #fff; color: var(--navy); border: 2px solid var(--navy); border-left: 0; border-radius: 0 10px 10px 0; cursor: pointer; box-shadow: 0 4px 12px rgba(7, 38, 140, .25); }
.a11y button .ico { width: 24px; height: 24px; }
.a11y button:hover { background: var(--bg-3); }
.a11y button[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (max-width: 640px) {
  .a11y { top: auto; bottom: 1rem; transform: none; }
}

/* Larger text: everything is in rem, so the root size scales the page. */
html.is-larger { font-size: 125%; }
html.is-larger .depts, html.is-larger .facts, html.is-larger .stats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
html.is-larger .facts li + li { border-left: 0; }

/* High contrast: black ground, white text, yellow links and controls. */
html.is-contrast, html.is-contrast body { background: #000 !important; }
html.is-contrast body *:not(svg):not(svg *):not(img) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; }
html.is-contrast .hero-media, html.is-contrast .page-head-media { background: transparent !important; }
html.is-contrast .hero-media::after, html.is-contrast .page-head-media::after { background: rgba(0, 0, 0, .78) !important; }
html.is-contrast a, html.is-contrast a *:not(svg):not(svg *), html.is-contrast button, html.is-contrast button *:not(svg):not(svg *) { color: #ff0 !important; }
html.is-contrast a svg, html.is-contrast button svg, html.is-contrast .ico { color: #ff0 !important; }
html.is-contrast a { text-decoration: underline !important; }
html.is-contrast .btn, html.is-contrast .dept, html.is-contrast .lang, html.is-contrast .a11y button, html.is-contrast .faq { border: 2px solid #ff0 !important; }
html.is-contrast .a11y button[aria-pressed="true"], html.is-contrast .a11y button[aria-pressed="true"] * { background-color: #ff0 !important; color: #000 !important; }
html.is-contrast .nav ul a[aria-current="page"] { box-shadow: inset 0 -3px 0 #ff0 !important; }
html.is-contrast :focus-visible { outline-color: #ff0 !important; }
html.is-contrast .espa, html.is-contrast .espa * { background-color: #fff !important; }
html.is-contrast .brand img { background: #fff !important; }
html.is-contrast .nav-toggle .bars, html.is-contrast .nav-toggle .bars::before, html.is-contrast .nav-toggle .bars::after { background-color: #ff0 !important; }
html.is-contrast .site-header.is-open .nav-toggle .bars { background-color: transparent !important; }
html.is-contrast .nav-toggle { border: 2px solid #ff0 !important; }

@media print { .a11y { display: none !important; } }
