/* EPRR static reading room. Plain CSS, no build step, no external fonts. */

:root {
  --navy: #14284b;
  --header-bg: #24366f;   /* the header bar colour on the WordPress site */
  --footer-bg: #071225;                     /* and the footer band */
  --footer-ink: rgba(255, 255, 255, .79);
  --navy-dk: #0d1c35;
  --blue: #205493;
  --blue-lt: #e8eff7;
  --line: #d6dbe1;
  --ink: #1b1b1b;
  --muted: #5b6570;
  --bg: #f4f6f8;
  --white: #fff;
  --radius: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--blue); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--white); padding: 10px 16px; z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ----------------------------------------------------------------- header */

/* Colours, spacing and layout mirror the Bricks header on the WordPress site
   (page 862): #24366f bar, 3rem gap between logo and title, link buttons
   stacked flush right. */
.site-header {
  background: var(--header-bg);
  color: var(--white);
  box-shadow: 0 3px 15px 5px rgba(33, 33, 33, .76);
  position: relative; z-index: 1;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3rem; padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 3rem; }
.brand-logo { display: block; width: 150px; height: auto; }
.brand-mark {
  font-weight: 700; letter-spacing: .5px; background: var(--white);
  color: var(--header-bg); padding: 6px 9px; border-radius: var(--radius); font-size: 15px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 28px; font-weight: 600; }
.brand-text small { color: #b9c6d8; font-size: 12.5px; }

.header-links { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.header-links a {
  color: var(--white); text-decoration: none; font-size: 16px;
  padding: 4px 0;
}
.header-links a:hover { text-decoration: underline; }

/* Optional maintenance banner, driven by config.notice.show. */
.notice {
  margin: 0;
  background: #fdf3d8;
  border-bottom: 1px solid #e6d5a4;
  color: #6b5514;
  font-size: 13.5px;
  padding: 9px 20px;
  text-align: center;
}

/* ----------------------------------------------------------------- layout */

.layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding-top: 26px;
  padding-bottom: 40px;
}

/* ---------------------------------------------------------------- filters */

/* No inner scrollers: the sidebar grows to its natural height and the page
   scrolls as one. Nested scroll tracks in a narrow column are miserable to use
   and hide options that look like the whole list. */
.filters {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
/* Heading on the left, sort + reset on the right. The sidebar is narrow, so
   the tools wrap to their own line rather than squeezing the controls. */
.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.filters-head h2 { margin: 0; font-size: 17px; }
.filters-tools { display: flex; align-items: center; gap: 8px; }

.facet-sort-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--muted);
}
.facet-sort-label select {
  font: inherit; font-size: 12.5px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
}

.reset-btn {
  background: var(--blue-lt); color: var(--blue);
  border: 1px solid #c3d5e8; border-radius: var(--radius);
  padding: 5px 10px; font-size: 12.5px; cursor: pointer;
}
.reset-btn:hover { background: #dae7f4; }

/* Search and date live inside a .facet-body, so the box supplies the heading
   and the spacing below it. */
.field { margin: 6px 0 6px; }
.field input[type=search],
.field input[type=date] {
  width: 100%; padding: 7px 9px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
}
.date-row { display: flex; align-items: center; gap: 6px; }
.date-row input { flex: 1; min-width: 0; }
.date-sep { font-size: 12px; color: var(--muted); }

.facet { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.facet h3 { margin: 0; font-size: 14px; }
/* The 8px of side padding is cancelled by matching negative margins, so the
   .has-filter tint below gets breathing room around the text while the label
   and chevron stay on the same lines as an untinted header. Every toggle
   carries this geometry, tinted or not, so nothing shifts when a filter is
   set or cleared. */
.facet-toggle {
  width: calc(100% + 16px); margin: 0 -8px;
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  border-radius: var(--radius);
  font: inherit; font-weight: 600; color: var(--navy); text-align: left;
}
.chev {
  width: 8px; height: 8px; margin-left: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.facet.collapsed .chev { transform: rotate(-45deg); }
.facet.collapsed .facet-body { display: none; }

/* A box holding an active filter gets a light blue header, so a collapsed box
   still shows that it is narrowing the results. Background only — the size and
   position come from .facet-toggle above and must not change with state. */
.facet.has-filter > h3 > .facet-toggle { background: var(--blue-lt); }

.facet-search {
  width: 100%; margin: 6px 0; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
}

.opts { list-style: none; margin: 4px 0 0; padding: 0; }
.opts li { margin: 0; }
.opts label {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 4px; font-size: 13.5px; cursor: pointer; border-radius: 3px;
}
.opts label:hover { background: var(--blue-lt); }
.opts input { flex: none; margin: 0; }
.opt-name { flex: 1; min-width: 0; }
.opt-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.opts li.empty { opacity: .38; }

/* ---------------------------------------------------------------- results */

.results { min-width: 0; }

.results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
}
.count { margin: 0; font-weight: 600; color: var(--navy); }
.sort-label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.sort-label select {
  font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-lt); border: 1px solid #c3d5e8; color: var(--navy);
  border-radius: 14px; padding: 4px 11px; font-size: 12.5px; cursor: pointer;
}
.chip:hover { background: #d3e2f2; }
.chip-label { font-weight: 600; }
.chip-x { font-size: 14px; line-height: 1; }

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 15px 18px; margin-bottom: 12px;
}
.doc-title { margin: 0 0 9px; font-size: 16.5px; line-height: 1.35; }
.doc-title a { color: var(--blue); text-decoration: none; }
.doc-title a:hover { text-decoration: underline; }

.doc-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2px 22px;
  font-size: 13.5px;
}
.doc-meta > div { display: flex; gap: 6px; }
.doc-meta dt { font-weight: 600; color: var(--navy); flex: none; }
.doc-meta dd { margin: 0; color: #333; min-width: 0; }

.empty-state {
  background: var(--white); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 34px; text-align: center; color: var(--muted);
}
.empty-state p { margin: 4px 0; }

.more-wrap { text-align: center; margin: 18px 0 4px; }
.more-btn {
  background: var(--blue); color: var(--white); border: 0;
  border-radius: var(--radius); padding: 10px 22px; font-size: 14px; cursor: pointer;
}
.more-btn:hover { background: #1a4577; }

/* ----------------------------------------------------------------- footer */

/* Mirrors the Bricks footer template on the WordPress site (bricks_template 29):
   one centred column on #071225 — warning, credit, seals, privacy link, entity,
   contact block — closed by a row holding the copyright and the social marks. */
.site-footer {
  background: var(--footer-bg); color: var(--footer-ink);
  font-size: 18px; line-height: 1.8; text-align: center;
  padding: 60px 0 30px;
}
.site-footer p { margin: 0; }
.site-footer a { color: inherit; }
.site-footer code { color: #b9c6d8; }

/* The DOE system-use notice is body copy on the WordPress site, not a banded
   callout: same colour, same measure, same 18px as the credit beneath it. */
.footer-warning { padding: 0; }
/* One long unbreakable token. It shrinks to hold its line on a narrow screen,
   and wraps rather than pushing the page sideways if it still will not fit. */
.warning-rule {
  text-align: center; margin: 0;
  font-size: clamp(11px, 3vw, 18px);
  overflow-wrap: anywhere;
}
.site-footer .warning-text { margin: 0; }

.footer-cols {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 0; padding-bottom: 0;
}
.footer-col { width: 100%; }
.footer-col h2 { margin: 0 0 10px; font-size: 20px; color: var(--white); text-align: left; }
.footer-col p { margin: 0; }

/* 41px above the credit and again above the privacy link, per the Bricks
   element margins. */
#footer-produced { margin-top: 41px; }
.footer-links { margin-top: 41px; }
.footer-links a { display: inline-block; text-decoration: underline; }

.footer-logo { margin: 0; }
.footer-logo img {
  display: block; width: 100%; max-width: 802px; height: auto; margin: 0 auto;
}

/* Contact Us is the one left-aligned block in an otherwise centred footer. */
#footer-contact-text { font-size: 14px; line-height: 1.6; text-align: left; }

.footer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 60px;
}
.footer-copyright { margin: 0; font-size: 12px; font-weight: 300; }

.footer-social { display: flex; gap: 14px; list-style: none; margin: 0 25px 0 0; padding: 0; }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.footer-social li > * { color: var(--white); display: block; }
.footer-social a:hover { color: var(--white); }

.footer-note { padding-bottom: 20px; margin: 0; font-size: 12.5px; }
.site-footer .footer-note { color: #8d9cb0; }

/* Off-screen but still announced: names the unlinked social marks. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------ small print */

/* Long lists are truncated to a sane number of rows instead of scrolled;
   .expanded (toggled by the show-all button) reveals the rest. */
.opts li.over-limit { display: none; }
.facet.expanded .opts li.over-limit { display: block; }
/* [hidden] comes from the facet search and must beat .expanded above. */
.opts li[hidden], .facet.expanded .opts li[hidden] { display: none; }

.show-all {
  background: none; border: 0; padding: 4px 4px 2px;
  color: var(--blue); font: inherit; font-size: 12.5px;
  cursor: pointer; text-decoration: underline;
}
.show-all:hover { color: var(--navy); }

/* Keep this width in step with settings.collapseFacetsBelowPx in config.json:
   the same breakpoint that stacks the sidebar above the results is the one that
   makes every filter box start collapsed. */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* The two header breakpoints the WordPress site sets on these same elements:
   a smaller title from mobile landscape down, logo stacked above it below that. */
@media (max-width: 767px) {
  .brand-text strong { font-size: 22px; }
  .brand { gap: 1.5rem; }
  .header-inner { gap: 20px; }
  .footer-col h2 { font-size: 16px; }
  .footer-bar { justify-content: center; }
}
@media (max-width: 478px) {
  .brand { flex-direction: column; text-align: center; }
  .brand-logo { margin: 20px 0 10px; }
  .header-links { align-items: center; width: 100%; }
}