/*
 * Civic: the public notice done well. Clarity first: large, plain type, strong contrast, every link underlined, every
 * button a sign that points the way, and the details people come for (a date, a document, a phone number, the opening
 * hours) set where they are found at a glance. Its one ornament is the civic stripe: the header is a band of the
 * website's main colour with a stripe of the signal colour (the accent) under it, and the same two colours mark a
 * section's heading (a short flag), the opening's plate, a call to action and the footer.
 *
 * This file draws the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the blocks the
 * theme draws itself (the openings, the article body, the divider) and the stock kit blocks by their type (data-block,
 * includes/stitch.php: headings at the left under the flag, news as dated notices). Everything inside a kit block that
 * holds for a module's section too is in kit-theme.css.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair. A dark palette is just
 * other values for the same tokens: nothing here asks whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --civic-heading-weight and --civic-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. */
:where(:root) {
  --civic-width: 75rem;
  --civic-gutter: clamp(1rem, 4vw, 2.5rem);
  --civic-bar: 4.5rem;
  --civic-stripe: 0.375rem;
  --civic-radius: 0.375rem;
  --civic-button-radius: 0.25rem;
  --civic-heading-weight: 700;
  --civic-body-strong: 700;
  --civic-speed: 140ms;
  --civic-line: var(--border, #c5cfdb);
  --civic-line-strong: color-mix(in srgb, var(--text-primary, #0f1723) 55%, transparent);
  /* Quieter words on the band (the footer's tagline, the plate's lead line): the band's text colour, a little into the
     band. Measured readable in every palette (verify-theme-readability.mjs). */
  --civic-quiet: color-mix(in srgb, var(--on-primary, #ffffff) 84%, var(--primary, #12305a));
  --civic-band-line: color-mix(in srgb, var(--on-primary, #ffffff) 24%, transparent);
  /* The edge under a button of the main colour: the button stands a little proud of the page and goes down when pressed. */
  --civic-edge: color-mix(in srgb, var(--primary, #12305a) 55%, #000000);
  --civic-accent-edge: color-mix(in srgb, var(--accent, #ffcc29) 62%, #000000);
}

/* ------------------------------------------------------------------ Base */

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

html {
  scroll-padding-top: calc(var(--civic-head, calc(var(--civic-bar) + var(--civic-stripe))) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Running text is 17 px on a phone and 18 px from a tablet up: a notice is read by everyone, not only by the young. */
body {
  margin: 0;
  background: var(--background, #ffffff);
  color: var(--text-primary, #0f1723);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
  body {
    font-size: 1.125rem;
  }
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Focus that cannot be missed. A link the keyboard reaches is lit like a highlighter: the signal colour behind its words
   and a bar of the text colour under them, so it shows on a light page and on the band alike. Every other control gets
   a ring of the signal colour with a ring of the text colour round it. */
:focus-visible {
  outline: 3px solid var(--accent, #ffcc29);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--text-primary, #0f1723);
}

:where(.civic-main, .civic-header, .civic-footer, .civic-announcement) a:not(.civic-button, .kit-button, .kit-card__link):focus-visible {
  outline: 3px solid transparent;
  background: var(--accent, #ffcc29);
  color: var(--on-accent, #10213b);
  box-shadow: 0 -2px var(--accent, #ffcc29), 0 4px var(--text-primary, #0f1723);
  text-decoration: none;
}

.civic-main {
  display: block;
  min-height: 40vh;
}

.civic-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  border-radius: var(--civic-button-radius);
  background: var(--accent, #ffcc29);
  color: var(--on-accent, #10213b);
  font-weight: var(--civic-body-strong);
  text-decoration: underline;
}

.civic-skip-link:focus {
  top: 1rem;
}

.civic-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button the theme draws itself: a sign. Square-ish, at least 48 px tall, the label in the body
   face's bold, and an arrow after the label of a button in the main colour. kit-theme.css gives the kit's buttons the
   same shape, and the line of this theme in resilience.css (--chrome-button-radius) gives it to the cookie notice and
   the phone action bar: theme-chrome.test.mjs holds the three together. A label may take two lines; it never runs out
   of the button. */
.civic-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--civic-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 1.0625rem;
  font-weight: var(--civic-body-strong);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--civic-speed) ease, border-color var(--civic-speed) ease, box-shadow var(--civic-speed) ease, transform var(--civic-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.civic-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The arrow is its own piece beside the label, never a letter of it: a long word and the arrow never break together. */
.civic-button--primary::after,
.civic-button--accent:not(.civic-button--small)::after {
  content: "\2192";
  flex: none;
  font-family: var(--font-body, sans-serif);
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--civic-speed) ease;
}

.civic-button:hover::after {
  transform: translateX(0.2rem);
}

.civic-button--primary {
  background: var(--primary, #12305a);
  color: var(--on-primary, #ffffff);
  box-shadow: 0 3px 0 var(--civic-edge);
}

.civic-button--primary:hover {
  background: var(--primary-alt, #1c4178);
}

.civic-button--accent {
  background: var(--accent, #ffcc29);
  color: var(--on-accent, #10213b);
  box-shadow: 0 3px 0 var(--civic-accent-edge);
}

/* The hover is a ring in the words' colour, not a lighter fill: a lighter fill would bring the words' contrast under
   what the colour contract promises for this pair. */
.civic-button--accent:hover {
  box-shadow: 0 3px 0 var(--civic-accent-edge), inset 0 0 0 2px var(--on-accent, #10213b);
}

.civic-button--primary:active,
.civic-button--accent:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--civic-edge);
}

.civic-button--secondary {
  border-color: var(--text-primary, #0f1723);
  background: transparent;
  color: var(--text-primary, #0f1723);
}

.civic-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #0f1723) 8%, transparent);
}

/* On the band: an outline in the band's own text colour, beside the signal button. */
.civic-button--light {
  border-color: var(--on-primary, #ffffff);
  background: transparent;
  color: var(--on-primary, #ffffff);
}

.civic-button--light:hover {
  background: color-mix(in srgb, var(--on-primary, #ffffff) 14%, transparent);
}

.civic-button--small {
  min-height: 2.75rem;
  padding: 0.5rem 1.05rem;
  font-size: 1rem;
}

.civic-button--block {
  width: 100%;
}

.civic-button:focus-visible {
  outline: 3px solid var(--accent, #ffcc29);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--text-primary, #0f1723);
}

/* ------------------------------------------------------------------ Announcement */

/* A notice on the signal colour above everything: road works, a closed office, an election day. */
.civic-announcement {
  background: var(--accent, #ffcc29);
  color: var(--on-accent, #10213b);
  font-size: 0.9375rem;
}

.civic-announcement[hidden] {
  display: none;
}

.civic-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  margin-inline: auto;
  padding: 0.55rem var(--civic-gutter);
  text-align: center;
}

.civic-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  font-weight: var(--civic-body-strong);
}

.civic-announcement__icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.civic-announcement a {
  font-weight: var(--civic-body-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.civic-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.civic-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ------------------------------------------------------------------ Header */

/* The band: the website's main colour, its own text colour, and the stripe of the signal colour under it. It stays at
   the top. The bar has one height for every kind; the centred kind adds a row for the menu, the topbar kind a light
   line above. */
.civic-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--civic-stripe) solid var(--accent, #ffcc29);
  background: var(--primary, #12305a);
  color: var(--on-primary, #ffffff);
}

.civic-header__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: var(--civic-bar);
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  margin-inline: auto;
  padding: 0 var(--civic-gutter);
}

.civic-header__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding-block: 0.6rem;
  color: inherit;
  text-decoration: none;
}

.civic-header__brand:hover .civic-brand__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them. */
.civic-header--centered .civic-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.civic-header--centered .civic-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.civic-header--centered .civic-header__actions {
  grid-column: 3;
  justify-self: end;
}

.civic-header__rail {
  border-top: 1px solid var(--civic-band-line);
}

.civic-header__rail .civic-nav {
  justify-content: center;
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  margin-inline: auto;
  padding: 0 var(--civic-gutter);
}

.civic-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.civic-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  font-size: 1rem;
  font-weight: var(--civic-body-strong);
  text-decoration: none;
  white-space: nowrap;
}

.civic-header__phone-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--accent, #ffcc29);
}

.civic-header__phone:hover span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.civic-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name. Its line height and the small padding leave room for what letters carry above and below (the
   caron of Š, the tail of Ų, the descender of g): a tighter line in a box that clips cuts them
   (theme-clipped-marks.test.mjs, with "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two
   balanced lines and the shared script sets it smaller before a word would break; this rule only sets its look. */
.civic-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.civic-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.375rem;
  font-weight: var(--civic-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.civic-header .civic-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .civic-header .civic-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.1875rem;
  }
}

.civic-brand:has(.civic-brand__logo, .brand-logo-original, .logo-mask) .civic-brand__name {
  font-size: 1.125rem;
}

/* A logo. The shared render_logo states max-height: 3rem inline, so a size here needs !important to hold. On the band
   the shared script decides whether a logo in its own colours needs a plate (logo-own-colours.test.mjs); a logo the
   website lets the theme colour takes the band's text colour. */
.civic-header .civic-brand__logo,
.civic-header .brand-logo-original {
  max-height: 2.75rem !important;
  width: auto;
}

.civic-header .logo-mask {
  background-color: var(--on-primary, #ffffff) !important;
}

/* A drawn logo (an SVG file) saved without a width and a height has a shape but no size of its own, and beside the name
   in a row it then takes no room at all: the logo is simply not there. Given a height, its width follows from its
   shape. A photograph of a logo keeps its own size under the limits above. */
.civic-header .brand-logo-original[src*=".svg"] {
  height: 2.75rem !important;
  object-position: left center;
}

.civic-header--centered .brand-logo-original[src*=".svg"] {
  object-position: center;
}

/* ------------------------------------------------------------------ Topbar */

/* A light service line above the band: the ways to get in touch, each with its symbol. */
.civic-topbar {
  border-bottom: 1px solid var(--civic-line);
  background: var(--surface-alt, #edf1f6);
  color: var(--text-primary, #0f1723);
  font-size: 0.9375rem;
}

.civic-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  min-height: 2.5rem;
  margin-inline: auto;
  padding: 0 var(--civic-gutter);
}

.civic-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
}

.civic-topbar a {
  color: inherit;
  text-decoration: none;
}

.civic-topbar a:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.civic-topbar .civic-contact__icon {
  color: var(--accent-ink, #1d55a3);
}

.civic-topbar__social,
.civic-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.civic-topbar__social svg,
.civic-footer__social svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .civic-topbar {
    display: none;
  }
}

/* A phone number or an email address with its symbol (civic_contact_link). */
.civic-contact {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 100%;
  min-width: 0;
}

.civic-contact__icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.22em;
  flex: none;
}

.civic-contact > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Navigation */

/* The menu stands the full height of the band, so the bar that marks the page being shown sits on the stripe, like a
   tab that stands open. */
.civic-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 0.15rem;
  min-width: 0;
}

.civic-header--simple .civic-nav,
.civic-header--topbar .civic-nav {
  margin-left: auto;
}

.civic-nav__item {
  position: relative;
  display: flex;
  /* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu button.
     Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
  min-width: 0;
}

.civic-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  color: inherit;
  font-size: 1.0625rem;
  font-weight: var(--civic-body-strong);
  line-height: 1.25;
  text-decoration: none;
  box-shadow: inset 0 -0.3125rem transparent;
  transition: box-shadow var(--civic-speed) ease;
}

.civic-nav__item > a:hover > span,
.civic-nav__item--parent:focus-within > a > span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.civic-nav__item.is-current > a {
  box-shadow: inset 0 -0.3125rem var(--accent, #ffcc29);
}

.civic-nav__caret {
  width: 0.65rem;
  height: 0.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.civic-nav__children {
  position: absolute;
  top: calc(100% + var(--civic-stripe));
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem;
  border: 1px solid var(--civic-line);
  border-top: 3px solid var(--primary, #12305a);
  border-radius: 0 0 var(--civic-radius) var(--civic-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f1723);
  box-shadow: 0 14px 32px -16px color-mix(in srgb, var(--text-primary, #0f1723) 45%, transparent);
  visibility: hidden;
  opacity: 0;
}

.civic-nav__item--parent:is(:hover, :focus-within) > .civic-nav__children {
  visibility: visible;
  opacity: 1;
}

.civic-nav__children a {
  padding: 0.6rem 0.75rem;
  border-radius: var(--civic-button-radius);
  font-size: 1rem;
  font-weight: var(--civic-body-strong);
  line-height: 1.35;
  text-decoration: none;
}

.civic-nav__children a:hover,
.civic-nav__children a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.civic-nav__children a:hover {
  background: var(--surface-alt, #edf1f6);
}

/* The menu button: three lines that turn into a cross, framed like a sign. Hidden on a wide screen unless resilience.js
   folds the menu into it (theme-nav-compact on #site-header, whose shared rules show it). */
.civic-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--on-primary, #ffffff) 55%, transparent);
  border-radius: var(--civic-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.civic-menu-button:hover,
.civic-menu-button[aria-expanded="true"] {
  border-color: var(--on-primary, #ffffff);
}

.civic-menu-button__lines {
  display: grid;
  gap: 0.3rem;
  width: 1.25rem;
}

.civic-menu-button__lines i {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--civic-speed) ease, opacity var(--civic-speed) ease;
}

.civic-menu-button[aria-expanded="true"] .civic-menu-button__lines i:nth-child(1) {
  transform: translateY(0.45rem) rotate(45deg);
}

.civic-menu-button[aria-expanded="true"] .civic-menu-button__lines i:nth-child(2) {
  opacity: 0;
}

.civic-menu-button[aria-expanded="true"] .civic-menu-button__lines i:nth-child(3) {
  transform: translateY(-0.45rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A panel under the stripe with every page as a row with an arrow. It scrolls inside itself when the pages are many, so
   the last one is always reachable. */
.civic-drawer {
  position: absolute;
  top: calc(100% + var(--civic-stripe));
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--civic-head, the stripe included). With the bar's own height here, the foot of a long menu lay under the window's
     edge and its last link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--civic-head, calc(var(--civic-bar) + var(--civic-stripe))));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 2px solid var(--primary, #12305a);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f1723);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--text-primary, #0f1723) 50%, transparent);
}

.civic-drawer[hidden] {
  display: none;
}

.civic-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.5rem var(--civic-gutter) 1.5rem;
}

.civic-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.civic-drawer__item {
  border-bottom: 1px solid var(--civic-line);
}

.civic-drawer__item.is-current {
  box-shadow: inset 0.3125rem 0 var(--primary, #12305a);
  padding-left: 0.85rem;
}

/* A page name in the heading face, with an arrow at the end of its row. data-fit-text (includes/chrome.php) lets the
   shared script set a long single word smaller instead of breaking it. */
.civic-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--civic-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.civic-drawer__link::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.civic-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.9rem 0.85rem;
}

.civic-drawer__children a {
  padding: 0.35rem 0;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.civic-drawer__footer {
  display: grid;
  gap: 0.75rem;
}

.civic-drawer__contact {
  width: fit-content;
  font-weight: var(--civic-body-strong);
  text-decoration: none;
}

.civic-drawer__contact .civic-contact__icon {
  color: var(--accent-ink, #1d55a3);
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .civic-nav,
  .civic-header__rail,
  .civic-header__phone,
  .civic-header__cta,
  .civic-header__slot {
    display: none;
  }

  .civic-menu-button {
    display: inline-flex;
  }

  .civic-header--centered .civic-header__inner {
    display: flex;
  }

  :where(:root) {
    --civic-bar: 4rem;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .civic-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .civic-header--simple .civic-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ Breadcrumbs */

/* Where the page stands, as a row of underlined links parted by chevrons. */
.civic-breadcrumbs {
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  margin-inline: auto;
  padding: 1.1rem var(--civic-gutter) 0;
}

.civic-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #46505e);
  font-size: 1rem;
  list-style: none;
}

.civic-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.civic-breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.civic-breadcrumbs a {
  color: var(--text-primary, #0f1723);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.civic-breadcrumbs a:hover {
  text-decoration-thickness: 3px;
}

.civic-breadcrumbs [aria-current="page"] {
  color: var(--text-secondary, #46505e);
}

/* ------------------------------------------------------------------ The flag */

/* A section's heading carries the theme's flag: a short bar of the main colour ending in the signal colour, the band and
   its stripe in small. Only the stock blocks (data-block) carry it; a module's section keeps its own heading. It stands
   above the heading in the flow, so it never crosses it (first-section-marks.test.mjs). On a band of the main colour or
   on a picture the kit's main colour is the band's text colour, so the flag stays visible there too. */
.kit-section[data-block] .kit-heading-group > .kit-heading--2::before,
.civic-flag::before {
  content: "";
  display: block;
  width: 3.75rem;
  height: 0.375rem;
  margin-bottom: 0.85rem;
  background: linear-gradient(90deg, var(--kit-primary, var(--primary, #12305a)) 0 62%, var(--accent, #ffcc29) 62% 100%);
}

.kit-section[data-block].kit-section--align-center .kit-heading-group > .kit-heading--2::before {
  margin-inline: auto;
}

/* Headings and lead lines of the stock blocks stand at the left, where a reader's eye starts each line: the kit centres
   them. A section the block itself centres (statistics, a call to action on a picture) stays centred. */
.kit-section[data-block]:not(.kit-section--align-center) .kit-stack > :is(.kit-heading-group, .kit-text-block).kit-text--center {
  margin-inline: 0;
  text-align: start;
}

.kit-section[data-block="contact_form"] .kit-stack > .kit-stack > .kit-row.kit-justify--center {
  justify-content: flex-start;
}

/* A heading under its own symbol (an enquiry form's) has its lead mark already: no flag there. */
.kit-section[data-block] .kit-stack:has(> .kit-row > .kit-icon) > .kit-heading-group > .kit-heading--2::before {
  display: none;
}

/* A service card leads with its symbol, then its name: the kit puts the symbol in the card's text under the name. */
.kit-section[data-block="service_cards"] .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body {
  display: contents;
}

.kit-section[data-block="service_cards"] .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body > .kit-icon:first-child {
  order: -1;
  margin-bottom: 0.6rem;
}

/* ------------------------------------------------------------------ News as notices */

/* A post's date is the first thing on its card, beside a calendar, in the text colour's bold: what a notice board is
   read for. */
.kit-section:is([data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"]) .kit-card__meta {
  order: -1;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--kit-text);
  font-size: 0.9375rem;
  font-weight: var(--civic-body-strong);
}

.kit-section:is([data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"]) .kit-card__meta::before {
  content: "";
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2em;
  background: var(--kit-accent-text, currentColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2'/%3E%3Cpath d='M3 10h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2'/%3E%3Cpath d='M3 10h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kit-section:is([data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"]) .kit-card__eyebrow {
  order: -2;
}

/* A timeline is a column of dated entries hung on one line down the left. */
.kit-section[data-block="timeline"] .kit-grid {
  position: relative;
  padding-left: 1.5rem;
}

.kit-section[data-block="timeline"] .kit-grid::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.3rem;
  width: 0.25rem;
  background: var(--kit-primary, var(--primary, #12305a));
}

.kit-section[data-block="timeline"] .kit-card {
  overflow: visible;
}

.kit-section[data-block="timeline"] .kit-card::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: -1.6rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 3px solid var(--kit-primary, var(--primary, #12305a));
  border-radius: 50%;
  background: var(--accent, #ffcc29);
}

/* A call to action on a band of the main colour carries the band's stripe along its top, and its first button is the
   signal colour, as in the header. */
.kit-section.kit-section--inverse[data-block] {
  border-top: var(--civic-stripe) solid var(--accent, #ffcc29);
}

.kit-section.kit-section--inverse[data-block] .kit-button--primary {
  border-color: var(--accent, #ffcc29);
  background: var(--accent, #ffcc29);
  color: var(--on-accent, #10213b);
  box-shadow: 0 3px 0 var(--civic-accent-edge);
}

.kit-section.kit-section--inverse[data-block] .kit-button--primary:hover {
  box-shadow: 0 3px 0 var(--civic-accent-edge), inset 0 0 0 2px var(--on-accent, #10213b);
}

/* ------------------------------------------------------------------ Full-width opening */

/* includes/hero.php: the photograph across the window and the words on a plate of the main colour over its lower edge,
   with the stripe along the plate's top. */
.civic-opening {
  position: relative;
  --civic-overlap: 6rem;
  --civic-picture-min: 15rem;
  --civic-picture-max: 40rem;
  /* The plate's height below the photograph, until theme.js measures it. */
  --civic-plate-rest-guess: 11rem;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.civic-opening__picture {
  position: relative;
  height: clamp(var(--civic-picture-min), 42vw, 34rem);
  overflow: hidden;
  background: var(--surface-alt, #edf1f6);
}

/* The first block of a page takes what is left of the first screen: the window less where the opening starts (the
   header, and on every page but the home page the breadcrumb) and less the plate's words under the photograph, so the
   buttons are on the first screen (cms/THEME_DEVELOPMENT.md, rule 19). theme.js measures both; the estimates stand
   before it does. */
.civic-main > .civic-opening:first-child .civic-opening__picture,
.civic-main > .civic-breadcrumbs:first-child + .civic-opening .civic-opening__picture {
  height: clamp(var(--civic-picture-min), calc(100svh - var(--civic-above, calc(var(--civic-bar) + var(--civic-stripe))) - var(--civic-plate-rest, var(--civic-plate-rest-guess)) - 1.25rem), var(--civic-picture-max));
}

/* The shared short top of a first section under the breadcrumb (three rem of empty page) is not for a photograph that
   fills the window: the opening starts just under the breadcrumb. */
.civic-main > .civic-breadcrumbs:first-child + .civic-opening {
  --civic-above-guess: calc(var(--civic-bar) + var(--civic-stripe) + 3.5rem);
  margin-top: 1rem;
  padding-top: 0;
}

.civic-main > .civic-breadcrumbs:first-child + .civic-opening .civic-opening__picture {
  height: clamp(var(--civic-picture-min), calc(100svh - var(--civic-above, var(--civic-above-guess)) - var(--civic-plate-rest, var(--civic-plate-rest-guess)) - 1.25rem), var(--civic-picture-max));
}

.civic-opening__image,
.civic-opening__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A block's tint darkens the photograph a little; the words are on the plate and need no shade. */
.civic-opening__shade {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / min(0.5, calc(0.08 * var(--pgs-tint, 1))));
  pointer-events: none;
}

.civic-opening__frame {
  position: relative;
  z-index: 1;
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  margin: calc(-1 * var(--civic-overlap)) auto 0;
  padding-inline: var(--civic-gutter);
}

.civic-opening__plate {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 46rem;
  padding: clamp(1.4rem, 1rem + 2vw, 2.75rem);
  border-top: 0.5rem solid var(--accent, #ffcc29);
  border-radius: 0 0 var(--civic-radius) var(--civic-radius);
  background: var(--primary, #12305a);
  color: var(--on-primary, #ffffff);
  box-shadow: 0 22px 44px -26px rgb(0 0 0 / 0.55);
}

.civic-opening__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.125rem, 1.45rem + 2.9vw, 3.75rem);
  font-weight: var(--civic-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}

.civic-opening__lead {
  max-width: 38rem;
  margin: 0;
  color: var(--civic-quiet);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.civic-opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  margin-top: 0.35rem;
}

/* Without a picture the plate stands alone on the tinted page. */
.civic-opening--words {
  padding-top: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  background: var(--surface-alt, #edf1f6);
}

.civic-opening--words .civic-opening__frame {
  margin-top: 0;
}

.civic-opening--words .civic-opening__plate {
  border-radius: var(--civic-radius);
}

@media (max-width: 47.99rem) {
  .civic-opening {
    --civic-overlap: 2.5rem;
    --civic-picture-min: 11rem;
    --civic-picture-max: 22rem;
    --civic-plate-rest-guess: 17rem;
  }

  .civic-opening__frame {
    padding-inline: 0.75rem;
  }

  .civic-opening__actions > .civic-button {
    flex: 1 1 100%;
  }
}

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

/* The words beside a photograph that stands on the signal colour's stripe. */
.civic-hero {
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--civic-gutter);
}

.civic-hero--words {
  background: var(--surface-alt, #edf1f6);
}

.civic-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--civic-width);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .civic-hero:not(.civic-hero--words) .civic-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.civic-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  min-width: 0;
}

.civic-hero--words .civic-hero__copy {
  max-width: 48rem;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it. */
.civic-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.125rem, 1.45rem + 2.9vw, 3.75rem);
  font-weight: var(--civic-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}

.civic-hero__lead {
  max-width: 38rem;
  margin: 0;
  color: var(--text-secondary, #46505e);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
}

.civic-hero__points {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.civic-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Each point's symbol stands in a small square of the main colour, like a pictogram on a sign. */
.civic-hero__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.05em;
  padding: 0.3rem;
  border-radius: var(--civic-button-radius);
  background: var(--primary, #12305a);
  color: var(--on-primary, #ffffff);
}

.civic-hero__actions,
.civic-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
}

.civic-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #46505e);
  font-size: 1rem;
}

.civic-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.civic-stars svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: color-mix(in srgb, var(--text-primary, #0f1723) 20%, transparent);
}

.civic-stars svg.is-full {
  fill: var(--accent-ink, #1d55a3);
}

.civic-hero__trustpilot {
  color: var(--accent-ink, #1d55a3);
  font-weight: var(--civic-body-strong);
  text-underline-offset: 0.2em;
}

.civic-hero__media {
  margin: 0;
  border-bottom: 0.5rem solid var(--accent, #ffcc29);
  border-radius: var(--civic-radius) var(--civic-radius) 0 0;
  overflow: hidden;
}

.civic-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ------------------------------------------------------------------ Article body */

.civic-article {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--civic-gutter);
}

.civic-article__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.civic-article__header {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.civic-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0;
  color: var(--text-secondary, #46505e);
  font-size: 1rem;
}

/* The post's date on a tag of the signal colour: the first thing a reader of a notice looks for. */
.civic-article__byline time {
  padding: 0.15rem 0.6rem;
  border-radius: var(--civic-button-radius);
  background: var(--accent, #ffcc29);
  color: var(--on-accent, #10213b);
  font-weight: var(--civic-body-strong);
}

.civic-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3rem);
  font-weight: var(--civic-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}

.civic-prose {
  font-size: 1.125rem;
  line-height: 1.65;
}

.civic-prose > :first-child {
  margin-top: 0;
}

.civic-prose > :last-child {
  margin-bottom: 0;
}

.civic-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.25em;
}

.civic-prose :where(ul, ol) {
  padding-left: 1.4em;
}

.civic-prose li + li {
  margin-top: 0.4em;
}

.civic-prose :where(h2, h3, h4) {
  margin: 1.8em 0 0.5em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--civic-heading-weight);
  line-height: 1.25;
}

.civic-prose h2 {
  font-size: 1.75rem;
}

.civic-prose h3 {
  font-size: 1.375rem;
}

.civic-prose h4 {
  font-size: 1.1875rem;
}

.civic-prose a {
  color: var(--accent-ink, #1d55a3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.civic-prose a:hover {
  text-decoration-thickness: 3px;
}

/* A link to a document carries a page symbol before its words, so a form or a report is told from a page at a glance. */
.civic-prose a:is([href$=".pdf" i], [href$=".doc" i], [href$=".docx" i], [href$=".odt" i], [href$=".xls" i], [href$=".xlsx" i], [href$=".rtf" i]),
.kit-section[data-block] .kit-rich-text a:is([href$=".pdf" i], [href$=".doc" i], [href$=".docx" i], [href$=".odt" i], [href$=".xls" i], [href$=".xlsx" i], [href$=".rtf" i]) {
  font-weight: var(--civic-body-strong);
}

.civic-prose a:is([href$=".pdf" i], [href$=".doc" i], [href$=".docx" i], [href$=".odt" i], [href$=".xls" i], [href$=".xlsx" i], [href$=".rtf" i])::before,
.kit-section[data-block] .kit-rich-text a:is([href$=".pdf" i], [href$=".doc" i], [href$=".docx" i], [href$=".odt" i], [href$=".xls" i], [href$=".xlsx" i], [href$=".rtf" i])::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 1.1em;
  margin-right: 0.35em;
  vertical-align: -0.18em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 2h10l6 6v14H2z'/%3E%3Cpath d='M12 2v6h6M6 13h8M6 17h8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 2h10l6 6v14H2z'/%3E%3Cpath d='M12 2v6h6M6 13h8M6 17h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.civic-prose blockquote {
  margin-inline: 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 0.375rem solid var(--primary, #12305a);
  font-size: 1.1875rem;
}

.civic-prose img {
  display: block;
  border-radius: var(--civic-radius);
}

.civic-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #46505e);
  font-size: 0.9375rem;
}

.civic-prose table {
  width: 100%;
  border-collapse: collapse;
  /* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited
     value. */
  font-variant-numeric: lining-nums tabular-nums;
}

.civic-prose :where(th, td) {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--civic-line);
  text-align: left;
  vertical-align: top;
}

.civic-prose th {
  border-bottom: 2px solid var(--text-primary, #0f1723);
  font-weight: var(--civic-body-strong);
}

.civic-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--civic-radius);
  background: var(--surface-alt, #edf1f6);
}

/* ------------------------------------------------------------------ Divider block */

.civic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--civic-gutter);
}

.civic-divider__line {
  width: 100%;
  border-top: 2px solid var(--civic-line);
}

.civic-divider--dashed .civic-divider__line {
  border-top-style: dashed;
}

.civic-divider--dotted span {
  width: 0.45rem;
  height: 0.45rem;
  background: var(--primary, #12305a);
}

.civic-divider--dotted span:nth-child(2) {
  background: var(--accent, #ffcc29);
}

/* ------------------------------------------------------------------ Footer */

/* The page closes on the band again, with the stripe along its top. The contact details are a column of their own, each
   beside its symbol in the signal colour, with the opening hours under them. */
.civic-footer {
  border-top: var(--civic-stripe) solid var(--accent, #ffcc29);
  background: var(--primary, #12305a);
  color: var(--on-primary, #ffffff);
}

.civic-footer__inner {
  max-width: calc(var(--civic-width) + 2 * var(--civic-gutter));
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--civic-gutter) 1.5rem;
}

.civic-footer--minimal .civic-footer__inner {
  padding-block: 1.75rem;
}

.civic-footer a {
  color: inherit;
}

.civic-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.civic-footer .civic-brand__name {
  max-width: 100%;
  font-size: 1.375rem;
}

.civic-footer .civic-brand__logo,
.civic-footer .brand-logo-original {
  max-height: 3rem !important;
  width: auto;
}

.civic-footer .brand-logo-original[src*=".svg"] {
  height: 3rem !important;
  object-position: left center;
}

.civic-footer .logo-mask {
  background-color: var(--on-primary, #ffffff) !important;
}

.civic-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--civic-band-line);
}

.civic-footer__invite {
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: var(--civic-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. */
.civic-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2.25rem 2.5rem;
}

.civic-footer__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.9rem;
}

.civic-footer__tagline,
.civic-footer__copyright {
  margin: 0;
  color: var(--civic-quiet);
  font-size: 1rem;
}

.civic-footer__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.125rem;
  font-weight: var(--civic-heading-weight);
  line-height: 1.3;
}

.civic-footer__links,
.civic-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  font-style: normal;
}

.civic-footer__links a,
.civic-footer__contact a,
.civic-footer__legal a,
.civic-footer__inline a {
  width: fit-content;
  max-width: 100%;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: break-word;
}

.civic-footer__links a:hover,
.civic-footer__contact a:hover,
.civic-footer__legal a:hover,
.civic-footer__inline a:hover {
  text-decoration-thickness: 3px;
}

.civic-footer__contact .civic-contact {
  font-size: 1.0625rem;
}

.civic-footer__contact .civic-contact__icon {
  color: var(--accent, #ffcc29);
}

.civic-footer__contact p {
  margin: 0;
}

.civic-footer__hours {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.civic-footer__hours li {
  display: grid;
  grid-template-columns: minmax(3.5em, auto) minmax(0, 1fr);
  gap: 0 0.9rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.civic-footer__hours li > span:first-child {
  font-weight: var(--civic-body-strong);
}

.civic-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--civic-band-line);
  border-radius: 50%;
  color: inherit;
}

.civic-footer__social a:hover {
  border-color: currentColor;
}

.civic-footer__bottom,
.civic-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.civic-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--civic-band-line);
}

.civic-footer__legal,
.civic-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.civic-footer__legal a {
  font-size: 1rem;
}

.civic-footer--minimal .civic-footer__legal {
  margin-top: 0.85rem;
}

/* ------------------------------------------------------------------ Page not found */

/* A notice: a card with the band's colour along its top, the number on a tag of the signal colour. Each part has a class
   of its own, so no rule for the paragraph turns the number grey. */
.civic-not-found {
  padding: clamp(3rem, 8vw, 6rem) var(--civic-gutter);
  background: var(--surface-alt, #edf1f6);
}

.civic-not-found__inner {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--civic-line);
  border-top: 0.5rem solid var(--primary, #12305a);
  border-radius: var(--civic-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f1723);
}

.civic-not-found .civic-not-found__number {
  margin: 0;
  padding: 0.1rem 0.65rem;
  border-radius: var(--civic-button-radius);
  background: var(--accent, #ffcc29);
  color: var(--on-accent, #10213b);
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--civic-heading-weight);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.4;
}

.civic-not-found__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3rem);
  font-weight: var(--civic-heading-weight);
  line-height: 1.12;
  text-wrap: balance;
}

.civic-not-found__text {
  margin: 0 0 0.5rem;
  color: var(--text-secondary, #46505e);
}

/* The shared row of the website's main pages is centred by its own inline style; on this left-aligned notice it starts
   at the left. */
.civic-not-found .pgs-not-found-links ul {
  justify-content: flex-start !important;
}

.civic-not-found .pgs-not-found-links a {
  color: var(--accent-ink, #1d55a3);
  font-weight: var(--civic-body-strong);
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ Form thanks */

.civic-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 0.375rem solid var(--primary, #12305a);
}

.civic-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--civic-heading-weight);
  line-height: 1.25;
}

.civic-form-success p {
  margin: 0;
}

/* ------------------------------------------------------------------ The phone action bar */

/* The shared bar (resilience.css) on the theme's surface, under the band's stripe. */
body .theme-action-bar {
  border-top: var(--civic-stripe) solid var(--accent, #ffcc29);
  background: var(--surface, #ffffff);
}

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). */
@media (scripting: none) {
  .civic-menu-button {
    display: none !important;
  }

  .civic-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .civic-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}