/* Equipment Room Info Site — public skin + shared UI.
 *
 * Builds on the branding kit: tokens.css supplies the palette, type and shape
 * variables and a light reset; header.css supplies the standard app header.
 * Everything here is the public site's own vocabulary — hero, sections, card
 * grids, centre cards, prose — plus the responsive behaviour.
 *
 * Colour discipline (BRANDING.md): cyan is the single accent. Rhodamine appears
 * only on admin role affordances, never alongside cyan on the same screen.
 */

/* ------------------------------------------------------------------ base */

:root {
  /* 1240px is set by the widest thing on the page: the three equipment-centre
     cards. "Art & Art History Equipment Centre" needs 321px of text width to
     stay on one line, so each card needs 371px (321 + 48 padding + 2 border),
     the 3-up grid needs 1153px (3 x 371 + 2 x 20 gap), and the container needs
     1201px once its own 24px gutters are added. Rounded up to 1240 for headroom
     against font-metric variation between browsers.

     Deliberately global rather than a wider modifier on the centres section
     alone: every section must share a left edge, and a single wider band there
     would visibly break the alignment with the section below it. */
  --measure: 1240px;
  --measure-narrow: 780px;
  --gutter: 24px;
  --section-y: 56px;
}

/* Always reserve the scrollbar gutter.
 *
 * Without this, navigating from a page that scrolls to one that doesn't (in the
 * admin, Editors is the only short page) removes the scrollbar, widens the
 * viewport by ~15px, and the whole layout jumps. Reserving the space means
 * every page is measured against the same width whether it scrolls or not. */
html {
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  /* Older engines: keep the track permanently visible instead. */
  html { overflow-y: scroll; }
}

body.public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.page-wrap { flex: 1; }

/* The `hidden` attribute must always win.
 * A UA stylesheet's `[hidden] { display: none }` is beaten by ANY author rule
 * that sets display — `.btn { display: inline-block }` silently un-hid every
 * hidden button. Anything toggled via `hidden` in JS depends on this. */
[hidden] { display: none !important; }

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

.center { text-align: center; }
/* text-align alone doesn't centre a max-width block — it centres the text
   INSIDE it, while the box itself stays hard left. Any width-limited child of a
   centred container needs auto side margins too. */
.center .section-lede,
.center .prose,
.center > p { margin-left: auto; margin-right: auto; }
/* A touch more air between the lines of the centred message, and real
   separation between its paragraphs. */
.center .section-lede { line-height: 1.75; }

/* 404: let the whole message breathe vertically. */
body.page-404 .error-code { margin-bottom: .15em; }
body.page-404 .page-title { margin-bottom: .9em; }
body.page-404 .section-lede { margin-bottom: 0; }
body.page-404 .section-lede + .section-lede { margin-top: 1.4em; }
body.page-404 .section-lede + .section-lede + p { margin-top: 2.2em; }
.muted { color: var(--grey-5); }

a { color: var(--blue); }
a:hover { color: var(--cyan-tint); }

/* Visible focus everywhere — the kit's focus ring. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(0, 178, 206, 0.35);
  border-radius: 3px;
}

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

.header--public { position: relative; z-index: 30; }

.header-brand--link {
  text-decoration: none;
  color: inherit;
}
.header-brand--link:hover { color: inherit; }

.site-nav { display: flex; align-items: center; }

.site-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-link {
  display: inline-block;
  padding: 8px 12px;
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
/* Fill only — no cyan underline on hover. The bottom border stays reserved for
   the current-page indicator, so hover can't be mistaken for "you are here". */
.site-nav-link:hover,
.site-nav-details[open] > .site-nav-summary {
  color: var(--white);
  background: rgba(255, 255, 255, 0.2);
}
.site-nav-link--active { border-bottom-color: var(--cyan-bright); }

.site-nav-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav-summary::-webkit-details-marker { display: none; }

.site-nav-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 150ms ease;
}
.site-nav-details[open] .site-nav-caret { transform: rotate(180deg); }

.site-nav-details { position: relative; }

/* Anchored to the RIGHT edge of its trigger, not the left.
   The nav sits at the right of the header, so a left-anchored panel runs off
   the side of the window on the last item (and any long label). Opening
   leftwards keeps it on screen with room to spare, since everything to the left
   is header. */
.site-nav-submenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 290px;
  max-width: min(360px, calc(100vw - 2 * var(--gutter)));
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 40;
}

.site-nav-sublink {
  display: block;
  padding: 9px 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 4px;
}
.site-nav-sublink:hover {
  background: #eef6fb;
  color: var(--blue);
  box-shadow: inset 3px 0 0 var(--cyan);
}

/* Sub-menu (third level): a disclosure inside the dropdown. */
.site-nav-subsummary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.site-nav-subsummary::-webkit-details-marker { display: none; }
.site-nav-subsummary .site-nav-caret { flex: 0 0 auto; }
.site-nav-subdetails[open] > .site-nav-subsummary { background: #eef6fb; color: var(--blue); }
.site-nav-subdetails[open] > .site-nav-subsummary .site-nav-caret { transform: rotate(180deg); }
.site-nav-subsubmenu { list-style: none; margin: 2px 0 4px 12px; padding: 0 0 0 8px; border-left: 2px solid var(--cyan); }
.site-nav-sublink--deep { font-size: 13.5px; padding: 8px 10px; }

/* Hamburger — hidden until the nav can no longer fit. */
.site-nav-toggle {
  display: none;
  width: 40px; height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.site-nav-toggle-bar,
.site-nav-toggle-bar::before,
.site-nav-toggle-bar::after {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; background: var(--white); content: '';
}
.site-nav-toggle-bar { top: 50%; margin-top: -1px; }
.site-nav-toggle-bar::before { top: -6px; }
.site-nav-toggle-bar::after { top: 6px; }

/* ---------------------------------------------------------------- notices */

.notices { background: var(--grey-1); }

/* Info notices carry the message in the fill, with no left rule — same
   treatment as the attention variant below, just a different band colour. */
.notice {
  border-bottom: 1px solid var(--grey-2);
  border-left: 0;
  background: #bcefff;
}

/* Attention notices carry the message in the fill rather than a rule: no left
   bar, and a saturated amber band so a seasonal-hours warning reads at a glance
   instead of looking like another info strip. */
.notice--warning {
  border-left: 0;
  border-bottom-color: #e2b345;
  background: #fdeec4;
  color: #5c4310;
}
.notice--warning .notice-inner { color: inherit; }
.notice--warning strong { color: #4a3609; }
.notice-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 14px var(--gutter);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.notice-inner p { margin: 0; }
.notice-inner p + p { margin-top: .4em; }

/* ------------------------------------------------------------------- hero */

.hero {
  background: linear-gradient(102deg, var(--blue-deep) 11.67%, var(--blue) 44.64%, var(--blue-edge) 77.6%);
  color: var(--white);
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Header-to-hero seam.
 *
 * The header and the hero are both dark blue, so with no notice banner between
 * them the two surfaces run together and the boundary reads as a smudge. A
 * cyan hairline articulates it using the vocabulary already in the header (the
 * 2px pipe beside the wordmark), and a short shadow underneath gives the header
 * a sense of sitting above the hero rather than being cut from it.
 *
 * On the header itself rather than the hero, so it holds in both states — with
 * a notice banner the line sits above the banner, which is still correct. */
.header--public {
  /* var(--cyan) is #00B2CE — the token rather than the literal, per the kit. */
  border-bottom: 1px solid var(--cyan);
  box-shadow: 0 6px 18px -8px rgba(0, 20, 40, .55);
}

/* A notice band directly beneath the header already separates it from the hero;
   the drop shadow would land on the band and dirty the join. */
.header--public.header--has-notice { box-shadow: none; }

/* Navy scrim so white text stays legible over the abstract photography —
   the wordmark/text never sits directly on a busy image.
   Slightly denser at the top so the hero starts near the header's tone and
   eases into the texture, instead of the image beginning abruptly. */
.hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 38, 72, 0.95) 0,
    rgba(0, 38, 72, 0.88) 160px
  );
}

.hero-inner {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 72px var(--gutter);
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.12;
  font-weight: 400;
  margin: 0 0 .35em;
  color: var(--white);
  max-width: 23.5ch;
}

.hero-sub {
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.5;
  margin: 0;
  max-width: 63ch;
  color: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------- sections */

.section { padding: var(--section-y) 0; }
.section--alt { background: var(--grey-1); }

.section-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section-inner--narrow { max-width: var(--measure-narrow); }

.section-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  color: var(--blue);
  margin: 0 0 .3em;
}

.section-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--grey-5);
  max-width: 70ch;
  margin: 0 0 28px;
}

/* ------------------------------------------------------------ card grids */

.card-grid,
.centre-grid {
  display: grid;
  gap: 20px;
}

.card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* The centre cards need a larger minimum than the generic card grid, and
   auto-FIT rather than auto-fill.
   - 340px minimum: below that the widest centre name ("Art & Art History
     Equipment Centre", 321px of text plus 50px of padding/border) wraps.
   - auto-fit, so the three centres always span the full row instead of
     leaving empty tracks. With auto-fill a wider container simply creates a
     fourth column and makes every card NARROWER — the opposite of the goal. */
.centre-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.link-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.link-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--cyan);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .link-card:hover { transform: translateY(-2px); }
}

.link-card-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 400;
  color: var(--blue);
  margin: 0;
}
.link-card-blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-5);
}
.link-card-cta {
  margin-top: auto;
  padding-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cyan-tint);
}

/* ---------------------------------------------------------- centre cards */

.centre-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--grey-2);
  border-top: 6px solid var(--cyan);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 24px;
}

/* Desktop: the three cards share one row grid (CSS subgrid) for the head —
   code, name, programs, note — so the note sits at the same height whatever
   the length of the programs list, and the hours tables start level. Below
   that, each card's body flows naturally (its own spacing, contact pinned to
   the bottom), so a two-line footnote list in one card does not open a gap in
   the others. Mobile stacks one card per row and keeps the flex flow. */
@media (min-width: 821px) {
  .centre-grid { grid-auto-rows: auto; }
  /* row-gap: 0 — a subgrid inherits the parent grid's 20px gap between its rows otherwise. */
  .centre-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start; }
  .centre-card-head { display: contents; }
  .centre-code      { grid-row: 1; }
  .centre-name      { grid-row: 2; }
  .centre-programs  { grid-row: 3; }
  .centre-note      { grid-row: 4; align-self: start; }
  .centre-card-body { grid-row: 5; display: flex; flex-direction: column; min-height: 0; }
}
.centre-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }

.centre-code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan-tint);
  margin: 0 0 2px;
}
.centre-name {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 400;
  color: var(--blue);
  margin: 0 0 10px;
  line-height: 1.25;
}
.centre-programs {
  font-size: 13px;
  line-height: 1.45;
  color: var(--grey-5);
  margin: 0 0 10px;
}
.centre-note {
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 14px;
  padding: 8px 10px;
  background: #eef6fb;
  border-left: 3px solid var(--cyan);
  border-radius: 0 3px 3px 0;
  color: var(--ink);
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 10px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.hours-table th,
.hours-table td {
  text-align: left;
  padding: 6px 0;
  border-bottom: 1px solid var(--grey-2);
  vertical-align: top;
}
.hours-table th { font-weight: 400; color: var(--grey-5); }
.hours-table td { text-align: right; color: var(--ink); }
.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.is-closed td { color: var(--grey-4); }

.hours-notes {
  margin: 0 0 10px;
  padding-left: 1.1em;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grey-5);
}

.centre-closures { margin: 0 0 14px; }
.centre-closures-title {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--blue);
}
.centre-closures .hours-notes { margin-bottom: 0; }

.centre-contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--grey-2);
  font-size: 13.5px;
}
.centre-contact dt { color: var(--grey-5); }
.centre-contact dd { margin: 0; word-break: break-word; }

/* ------------------------------------------------------- breadcrumb/tags */

.breadcrumb {
  font-size: 13px;
  color: var(--grey-5);
  margin-bottom: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.page-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 400;
  color: var(--blue);
  line-height: 1.18;
  margin: 0 0 .3em;
}
.page-meta { font-size: 13px; color: var(--grey-4); margin: 0 0 24px; }

.page-tags {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.page-tags-label { font-size: 12.5px; color: var(--grey-5); margin-right: 4px; }

.tag, .chip {
  display: inline-block;
  padding: 4px 11px;
  font-size: 12.5px;
  border-radius: 999px;
  background: var(--grey-1);
  border: 1px solid var(--grey-2);
  color: var(--grey-5);
  text-decoration: none;
}
.tag:hover, .chip:hover { border-color: var(--cyan); color: var(--blue); }

.chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 28px; padding: 0;
}

/* ---------------------------------------------------- 404 mascot
 * Rises from behind the footer, holds, drops back, then reappears elsewhere
 * along the bottom (position driven by public/js/mascot.js).
 *
 * The footer sits above him in the stacking order, so he is genuinely occluded
 * by it rather than masked. `bottom: 0` on the page wrapper puts his feet on
 * the footer's top edge; translateY then slides him down out of sight.
 */
body.page-404 .page-wrap { position: relative; overflow: hidden; }

.cutout {
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(190px, 24vw, 300px);
  z-index: 1;
  /* Parked below the line: fully hidden behind the footer. */
  transform: translateY(100%);
  /* Accelerating away as he leaves. */
  transition: transform 650ms cubic-bezier(.55, 0, .85, .3);
  will-change: transform;
}

/* Up: a little of him stays tucked behind the footer so he reads as emerging
   from behind it rather than standing on top of it. Decelerating as he
   arrives, which is what makes the entrance feel like it lands. */
.cutout.is-up {
  transform: translateY(12%);
  transition: transform 850ms cubic-bezier(.16, .84, .34, 1);
}

.cutout-figure {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 20, 40, .16));
}

/* The footer has to paint over him. */
body.page-404 .site-footer { position: relative; z-index: 5; }

/* prefers-reduced-motion: present, but perfectly still. */
.cutout.is-static { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cutout { transition: none !important; }
}

.error-code {
  font-family: var(--font-head);
  font-size: 64px;
  color: var(--grey-3);
  margin: 0;
  line-height: 1;
}

/* ------------------------------------------------------------------ prose
 * Imported WordPress bodies land here: tables, figures, embedded forms.
 */

.prose { font-size: 16px; line-height: 1.62; color: var(--ink); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.05em; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--blue);
  line-height: 1.25;
  margin: 1.8em 0 .5em;
}
.prose h2 { font-size: 24px; }
.prose h3 { font-size: 20px; }
.prose h4 { font-size: 17px; }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.4em; }
.prose li { margin-bottom: .35em; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: 13px; color: var(--grey-5); margin-top: .5em; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--cyan);
  color: var(--grey-5);
}
.prose hr { border: 0; border-top: 1px solid var(--grey-2); margin: 2em 0; }
.prose mark { background: #fff3bf; padding: 0 .15em; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* Wide tables must scroll inside their own box, never the page. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 14.5px;
}
.prose th, .prose td {
  border: 1px solid var(--grey-2);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.prose thead th { background: var(--grey-1); font-weight: 500; }

.prose details {
  margin: 1.2em 0;
  padding: 12px 14px;
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  background: var(--grey-1);
}
.prose summary { cursor: pointer; font-weight: 500; color: var(--blue); }

/* Embedded forms/media (JotForm, SharePoint). Given a workable default height
   since a cross-origin iframe can't size itself. */
.embed-frame {
  display: block;
  width: 100%;
  min-height: 780px;
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  background: var(--white);
  margin: 1.4em 0;
}
.embed-frame--form { min-height: 900px; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.btn--primary { background: var(--cyan); color: var(--white); border-color: var(--cyan); }
.btn--primary:hover { background: var(--cyan-tint); border-color: var(--cyan-tint); color: var(--white); }
.btn--secondary { background: var(--white); color: var(--blue); border-color: var(--grey-3); }
.btn--secondary:hover { background: var(--grey-1); }

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

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

.site-footer {
  background: linear-gradient(102deg, var(--blue-deep) 11.67%, var(--blue) 44.64%, var(--blue-edge) 77.6%);
  color: rgba(255, 255, 255, 0.85);
  padding: 16px var(--gutter);
  font-size: 12.5px;
}
.site-footer-line {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.site-footer a, .site-footer .linkish { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }
.site-footer a:hover, .site-footer .linkish:hover { color: var(--white); }
.site-footer .dot { opacity: .5; }

/* ---------------------------------------------------------------- modals */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 55, 103, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }

.modal-content {
  background: var(--white);
  border-radius: 8px;
  padding: 32px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2);
  text-align: left;
}
.modal-content h3 {
  font-family: var(--font-head);
  font-size: 21px; font-weight: 400; color: var(--blue);
  margin: 0 0 14px;
}
.modal-content h4 {
  font-size: 15px; font-weight: 500; color: var(--ink);
  margin: 20px 0 6px;
}
.modal-content p { font-size: 14px; line-height: 1.6; color: var(--grey-5); margin: 0 0 10px; }
.modal-meta { font-size: 12.5px !important; color: var(--grey-4) !important; margin-top: 18px !important; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 24px; }

.privacy-tech-details {
  margin: 8px 0 4px;
  font-size: 13px;
}
.privacy-tech-details summary {
  cursor: pointer; color: var(--blue); font-size: 13px;
}
.privacy-tech-details p {
  font-size: 13px !important;
  margin-top: 8px !important;
  padding-left: 14px;
  border-left: 2px solid var(--grey-2);
}

/* --------------------------------------------------------------- signout */

.signout-dialog {
  border: none; border-radius: 8px; padding: 0;
  width: 360px; max-width: 90vw; box-shadow: var(--shadow-2);
}
.signout-dialog:not([open]) { display: none; }
.signout-dialog[open] {
  display: block; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%); margin: 0; z-index: 10000;
}
.signout-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.signout-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 9999; }
.signout-scrim[hidden] { display: none; }
.signout-dialog-body { padding: 22px 24px; }
.signout-dialog-body h2 {
  margin: 0 0 8px; color: var(--blue); font-size: 18px; font-weight: 500;
  font-family: var(--font-head);
}
.signout-dialog-body p { margin: 0 0 20px; color: var(--grey-5); font-size: 13px; line-height: 1.5; }
.signout-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.signout-btn {
  font: inherit; font-size: 13px; padding: 8px 18px;
  border-radius: 4px; cursor: pointer; border: 1px solid; min-width: 88px;
}
.signout-btn--cancel { background: var(--white); color: var(--grey-5); border-color: var(--grey-3); }
.signout-btn--cancel:hover { background: var(--grey-1); }
.signout-btn--confirm { background: var(--blue); color: var(--white); border-color: var(--blue); font-weight: 500; }
.signout-btn--confirm:hover { background: var(--blue-edge); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1020px) {
  .site-nav-link { padding: 8px 9px; font-size: 13.5px; }
}

/* Below this the horizontal nav can't fit; collapse to a disclosure panel.
   820px also matches the branding kit's rule for dropping the pipe/sublabel. */
@media (max-width: 900px) {
  .site-nav-toggle { display: block; }

  .site-nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: var(--blue-deep);
    border-top: 1px solid rgba(255, 255, 255, .15);
    box-shadow: var(--shadow-2);
    max-height: 75vh;
    overflow-y: auto;
  }
  .site-nav-list.is-open { display: flex; }

  .site-nav-link { display: block; padding: 11px 12px; border-bottom: 0; }
  .site-nav-link--active { background: rgba(255, 255, 255, .12); }

  .site-nav-details { position: static; }
  .site-nav-submenu {
    position: static;
    min-width: 0;
    margin: 2px 0 6px 10px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--cyan-bright);
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 8px;
  }
  .site-nav-sublink { color: rgba(255, 255, 255, .85); padding: 9px 10px; }
  .site-nav-subdetails[open] > .site-nav-subsummary { background: rgba(255, 255, 255, .1); color: var(--white); }
  .site-nav-subsubmenu { border-left-color: rgba(255, 255, 255, .35); }
  .site-nav-sublink:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
}

@media (max-width: 820px) {
  :root { --section-y: 40px; --gutter: 18px; }
  .hero-inner { padding: 48px var(--gutter); }
  .centre-grid, .card-grid { grid-template-columns: 1fr; }
  .embed-frame, .embed-frame--form { min-height: 680px; }
}

@media (max-width: 560px) {
  .modal-content { padding: 22px; }
  .site-footer-line { gap: 6px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .header, .site-nav, .site-footer, .modal-overlay { display: none !important; }
  .prose { font-size: 12pt; }
}

/* Modal actions sit in a row with breathing room between them; without a gap
   Cancel and the confirm button touch. `.warn-actions` sets its own. */
.modal-actions { gap: 10px; }

/* While any modal is open the page behind it must not scroll. `html` already
   reserves the scrollbar gutter (scrollbar-gutter: stable), so hiding overflow
   here cannot shift the layout width. */
body.modal-open { overflow: hidden; }

/* ---- Placeholders (server-wide, 2026-09-15) --------------------------------
   A placeholder is an example of what to type, not content — the label above
   carries the meaning — so it sits a step lighter than the value the field will
   hold. A bare element selector so it reaches search boxes and filter bars too.
   opacity:1 because Firefox dims ::placeholder ON TOP of the colour set here,
   which would take it below legible. */
input::placeholder,
textarea::placeholder { color: var(--placeholder); opacity: 1; }

/* Placeholder standing in for a request form while JotForm is replaced.
   Two of the seven affected pages had no prose at all outside their embed, so
   this carries a contact line rather than only an apology — otherwise those
   pages would render as a heading and nothing else. Replace by hand, page by
   page, once the new form solution is chosen. */
.form-placeholder {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--grey-3, #d5dde3);
  border-left: 4px solid var(--cyan-tint, #008ea5);
  border-radius: 4px;
  background: var(--grey-1, #f5f8fa);
}
.form-placeholder p { margin: 0 0 .5rem; }
.form-placeholder p:last-child { margin-bottom: 0; }

/* ---- "Edit this page" — signed-in Admins/Managers only --------------------
   Server-wide app-role band (reference: GovDeals Prepper .gdp-btn--admin): a
   10px dark-rhodamine cap naming the tier over a rhodamine-outlined body. The
   body is white rather than the kit's 6% tint: on the navy header a tint
   would read as navy and leave rhodamine text with no contrast.

   CENTRING RULE (bulletproof, do not replace with padding arithmetic): the
   button is a flex COLUMN. The band is a real 10px block, and the label is a
   <span> that takes the remaining height and centres its own line box with
   align-items:center. No padding-top guesses, no transform, and it stays
   centred if the height, font or band ever change. Verified by scanning the
   rendered pixels for the label ink (tests: scratchpad shoot-edit.mjs). */
.header-edit {
  display: inline-flex; flex-direction: column; align-items: stretch;
  overflow: hidden;
  order: 1;
  box-sizing: border-box; height: 34px;
  margin-left: 14px;
  padding: 0;
  font-size: 13px; font-weight: 400; line-height: 1;
  white-space: nowrap;
  color: var(--rhodamine);
  background: #fff;
  border: 1px solid var(--rhodamine);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.header-edit:hover { background: #fbe4ef; color: #ad1f66; text-decoration: none; }
.header-edit::before {
  content: "SITE MANAGER";
  display: block; flex: 0 0 10px; height: 10px; line-height: 10px;
  font-size: 8px; font-weight: 700; letter-spacing: .05em; text-align: center;
  color: #fff; background: #ad1f66;
}
.header-edit--admin::before { content: "SITE ADMIN"; letter-spacing: .08em; }
.header-edit-label {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px;
  /* Optical: ClassicGrotesque's x-height sits a hair above the line-box
     centre; measured ink centre at 0 offset was 0.5px high → none needed.
     Adjust ONLY from a pixel measurement, never by eye. */
}
@media (max-width: 900px) {
  /* Stays in the bar beside the menu toggle (the list itself collapses). */
  .site-nav-toggle { order: 2; }
  .header-edit { margin-left: 0; margin-right: 10px; }
}
@media print { .header-edit { display: none !important; } }

/* ---- Staging banner — non-live installs only (see ec_staging_banner) ------
   Thin amber band above the header, on every page including admin, so a
   staging edit is never mistaken for a live one. */
.staging-banner {
  position: sticky; top: 0; z-index: 40;   /* above the public header (30) and its menus */
  background: #f2a900;
  color: #1b1b1b;
  font-size: 12px; line-height: 12px;
  padding: 3px 12px;           /* 18px tall on one line; wraps on narrow screens */
  text-align: center;
  letter-spacing: .01em;
}
.staging-banner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media print { .staging-banner { display: none !important; } }