/* ==================================================================
   Archive search and service area filter
   Markup comes from the [archive_search] and [service_filter]
   shortcodes in post-structure.php.
   ================================================================== */


/* ---- Visually hidden ----------------------------------------------
   Hides the search label from sight while leaving it in the
   accessibility tree. A placeholder is not a label: it disappears the
   moment someone types, and several screen readers ignore it. */

.st-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---- Search form --------------------------------------------------
   The input inherits its look from form-controls.css, so this only
   handles layout. There is no submit button — Enter submits. */

.archive-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  /* Width of the whole search row. Raise or lower to taste; set to
     `none` to fill the full content column. */
  max-width: 860px;

  margin: 0 0 20px;
}

.archive-search__input {
  flex: 1 1 auto;
  min-width: 0;   /* without this a flex item refuses to shrink below
                     its intrinsic width and overflows on narrow screens */
}


/* ---- Filter links -------------------------------------------------- */

.service-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 24px;
  margin: 0 0 32px;
}

.service-filter__link {
  display: inline-block;

  /* Vertical padding is doing accessibility work, not visual work.
     A 16px text link is about 19px tall; WCAG 2.5.8 wants a 24px
     minimum target. This lifts it to 32px without moving anything. */
  padding-block: 7px;

  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  color: var(--wp--preset--color--custom-contrast, #201e50);

  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;

  transition: color 0.15s ease;
}

.service-filter__link:hover {
  color: var(--wp--preset--color--custom-primary, #1a3c29);
  text-decoration: underline;
}

.service-filter__link:focus-visible {
  outline: 3px solid var(--wp--preset--color--custom-primary, #1a3c29);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ---- Active filter -------------------------------------------------
   Marked by BOTH colour and an underline, never colour alone — WCAG
   1.4.1. Deliberately not a weight change: Varela Round ships a single
   400 weight, so font-weight: 700 would render as browser-synthesised
   faux bold, which smears the letterforms and shifts the layout. */

.service-filter__link.is-active {
  color: var(--wp--preset--color--custom-primary, #1a3c29);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}


/* ---- Narrow screens ------------------------------------------------ */

@media (max-width: 600px) {

  .archive-search {
    gap: 10px;
    margin-bottom: 16px;
  }

  .service-filter {
    gap: 4px 18px;
    margin-bottom: 24px;
  }
}