/*
 * Companion to theme.json.
 *
 * Only what theme.json cannot describe belongs here: the focus indicator, form
 * field boundaries, the skip link, and a few layout adjustments. Every colour
 * comes from the variables theme.json generates — no value is hard-coded.
 */

/* --------------------------------------------------------------------------
   1. Visible focus
   RGAA 10.7 / WCAG 2.4.7 and 2.4.13: focus must be perceivable. The 2px stroke
   in institutional blue gives 11.6:1 against the page background, and the 2px
   offset keeps it from merging with the component's own border. Never remove
   an outline without replacing it.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Against a blue background the blue ring would be invisible: 1.34:1 on
   #001E49. These areas are named explicitly, because they carry none of
   WordPress's utility classes — their background comes from this stylesheet. */
.site-footer :where(a, button):focus-visible,
.section--dark :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.has-primary-background-color :where(a, button):focus-visible,
.has-primary-dark-background-color :where(a, button):focus-visible {
  outline-color: var(--wp--preset--color--surface);
}

/* --------------------------------------------------------------------------
   2. Skip link
   RGAA 12.7: offer a direct route to the content. It stays hidden until
   focused, but is never removed from the accessibility tree.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* --------------------------------------------------------------------------
   3. Form fields
   WCAG 1.4.11: a field's boundary must reach 3:1, or the user cannot tell
   where it starts. "border-strong" gives 3.69:1 on the page background.
   -------------------------------------------------------------------------- */
input:not([type="submit"]):not([type="button"]),
select,
textarea {
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: 4px;
  padding: 0.625rem 0.75rem;
  max-width: 100%;
}
input:not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
  border-color: var(--wp--preset--color--primary);
}

/* The asterisk on required fields must never be the only cue. */

/* --------------------------------------------------------------------------
   4. Site header
   A single compact, sticky bar. The dark blue contact band that used to sit
   above it was removed: it repeated the footer and the Contact page.
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
}

/* Navigation: the current section is marked by a rule, not by colour alone
   (RGAA 3.1 — information must not be carried by colour only). */
.wp-block-navigation .wp-block-navigation-item a {
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.wp-block-navigation .wp-block-navigation-item a:hover {
  border-bottom-color: var(--wp--preset--color--border-strong);
}
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-ancestor > a,
.wp-block-navigation .current_page_item > a,
.wp-block-navigation .current_page_ancestor > a {
  color: var(--wp--preset--color--primary);
  border-bottom-color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   5. Cards and callouts
   Brand rules: square corners on large containers, no drop shadows; hierarchy
   comes from a 1px rule and a step in tint.
   -------------------------------------------------------------------------- */
.card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--40);
  height: 100%;
}
.card > :first-child { margin-block-start: 0; }
.card > :last-child  { margin-block-end: 0; }

/* Clickable card: the whole area follows the title's link, without nesting a
   link inside a link (which would break keyboard navigation). */
.card--link { position: relative; }
.card--link a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card--link:has(a:focus-visible) {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}
.card--link:has(a:focus-visible) a:focus-visible { outline: none; }

/* Migration callout: flags what is still outstanding (a lost document, a
   third-party app to replace). The pictogram is always paired with text,
   never used on its own. */
.wp-block-quote {
  background: var(--wp--preset--color--primary-soft);
  border-left: 3px solid var(--wp--preset--color--primary);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.wp-block-quote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Page content
   -------------------------------------------------------------------------- */
/* History pages alternate long paragraphs with photographs: give the images
   room and frame their captions. */
.wp-block-image figcaption {
  color: var(--wp--preset--color--ink-muted);
  font-size: var(--wp--preset--font-size--label);
  text-align: left;
  margin-top: 0.5rem;
}

/* Reconstructed tables (statistics, opening hours, rates) must stay readable
   on a phone: they scroll horizontally rather than overflow. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table :where(th, td) {
  border: 1px solid var(--wp--preset--color--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.wp-block-table thead th {
  background: var(--wp--preset--color--surface-2);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--surface);
  border-top: 4px solid var(--wp--preset--color--primary);
}
.site-footer :where(a, h2, h3, p, li) { color: var(--wp--preset--color--surface); }
.site-footer .wp-block-heading { color: var(--wp--preset--color--surface); }
.site-footer a:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   8. Honouring system preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   9. Print
   Residents print opening hours, collection calendars and paperwork: the
   printed page has to stay readable.
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .wp-block-navigation,
  .site-footer,
  .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* --------------------------------------------------------------------------
   10. Breadcrumb
   Second means of navigation (RGAA 12.2). The separator is decorative: it is
   drawn in CSS so screen readers do not announce it.
   -------------------------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--wp--preset--spacing--40); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--label);
}
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-top: 1px solid var(--wp--preset--color--border-strong);
  border-right: 1px solid var(--wp--preset--color--border-strong);
  transform: rotate(45deg);
}
.breadcrumb [aria-current="page"] { color: var(--wp--preset--color--ink-muted); }

/* --------------------------------------------------------------------------
   11. Cards: the title is a link, but it must not be underlined like a link in
   running text — the whole card is already clickable, and the underline chops
   up two-line titles.
   -------------------------------------------------------------------------- */
.card h2 a,
.card h3 a {
  text-decoration: none;
  color: inherit;
}
.card:hover h2 a,
.card:hover h3 a { text-decoration: underline; }

/* A row of cards has to stay readable: below 60rem WordPress already stacks
   its columns, but four cards across a wide row leave too little width for a
   two-word title. */
/* The floor only applies to rows of cards. Applied to every column, it pushed
   the document 336px past the viewport as soon as the visitor enlarged the
   browser font: the media query is evaluated against the initial rem, so it
   stays active, and three 12rem columns at a 32px rem demand 1152px inside a
   1024px window. */
@media (min-width: 782px) {
  .wp-block-columns > .wp-block-column { min-width: 12rem; }
  .site-footer .wp-block-column,
  .grid > *,
  .mayor > * { min-width: 0; }
}

/* --------------------------------------------------------------------------
   12. Home page sections
   All align on the same left margin; only the length of text lines is capped,
   because past roughly 70 characters the eye loses the next line on its way
   back to the margin.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. Mobile: no horizontal overflow
   One unbreakable string — an e-mail address, a URL, a filename — imposes its
   width on the whole document and pushes the page off screen. So we allow
   those strings to break, without breaking ordinary words ("anywhere" only
   acts when the line would genuinely overflow).
   -------------------------------------------------------------------------- */
body { overflow-wrap: break-word; }
/* "anywhere" drops a cell's minimum width to a single character: the table
   compressed indefinitely and the scrolling promised just above never
   happened — under 400px, columns fell to one letter per line. Cells
   therefore break between words only. */
:where(a, code, pre, figcaption) { overflow-wrap: anywhere; }
.wp-block-table :where(th, td) { overflow-wrap: break-word; }

/* Images never exceed their column, whatever their source size — some of the
   migrated photographs are 5000px wide. */
img, video, iframe { max-width: 100%; height: auto; }