/*
 * The only custom CSS in the project. Everything else comes from Pico.css.
 * Focus styles are deliberately left to Pico defaults and never suppressed.
 *
 * Mobile-first: every base rule targets a narrow phone viewport, and the single
 * media query at the bottom only adds breathing room once there is room to spare.
 */

/*
 * Brand palette, and the narrow slice of Pico's theme it replaces.
 *
 * Declared on `body`, not `:root`. Pico sets these under
 * `:root:not([data-theme])`, which outranks a plain `:root` no matter which
 * stylesheet loads last. Custom properties inherit, so declaring them on `body`
 * reaches every element that renders and sidesteps the specificity contest
 * entirely — including Pico's `prefers-color-scheme: dark` block, which remaps
 * --pico-primary-background as well.
 *
 * Contrast verified against WCAG AA:
 *   white on #0b4da2   8.08:1
 *   white on #083c80  10.67:1
 */
body {
  --brand: #0b4da2;
  --brand-hover: #083c80;

  /*
   * Only the *button* colours are remapped. `--pico-primary` — the colour of
   * links and outline-button text — is deliberately left alone: #0b4da2 on
   * Pico's dark surface is roughly 1.7:1, so forcing the brand blue there would
   * fail badly in dark mode. A filled button paints its own background, so
   * white-on-brand-blue holds up under either theme.
   */
  --pico-primary-background: var(--brand);
  --pico-primary-border: var(--brand);
  --pico-primary-hover-background: var(--brand-hover);
  --pico-primary-hover-border: var(--brand-hover);
  --pico-primary-inverse: #fff;
}

/* Visible on keyboard focus only — never hidden from assistive technology. */
.skip-link {
  position: absolute;
  top: 0;
  left: -100vw;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--pico-background-color);
  border: var(--pico-border-width) solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

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

   Narrow single column. 30rem keeps the form about a phone's width even on a
   desktop monitor, which suits four short fields far better than a full-width
   page. Pico's own `.container` is deliberately not used. */
.shell {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: 0.75rem 0.75rem 2rem;
}

.panel {
  background: var(--pico-card-background-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
}

/* The banner artwork has white edges, so the strip behind it stays white in both
   themes rather than showing a dark seam around the image.
 *
 * The clipping lives here rather than on .panel, where it used to be: `overflow:
 * hidden` on the panel also clipped the address suggestion list, cutting the
 * dropdown off at the panel's edge. Only the banner needs clipping, so only the
 * banner clips. */
.panel__banner {
  background: #fff;
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
  overflow: hidden;
}

.panel__banner img {
  display: block;
  width: 100%;
  height: auto;
}

.panel__body {
  padding: 1.25rem 1rem 1.5rem;
  text-align: justify;
}

.shell__foot {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--pico-muted-color);
}

.shell__foot p {
  margin: 0;
}

/* ------------------------------------------------------------------- type --- */

.panel__body h1 {
  /* Pico's default h1 is sized for a full-page banner, not a card on a phone.
     The colour is left to Pico so it stays legible in dark mode. */
  font-size: 1.375rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

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

/* ------------------------------------------------------------------- form --- */

/* The email is pre-filled and not editable. Make that visible, instead of
   leaving it looking like a field the user still has to complete.
 *
 * Pico v2 has no variable for a disabled/readonly form background — it only
 * suppresses the focus and active styles for [readonly] — so the cue here is a
 * dashed border plus muted text. Both come from Pico's own theme tokens, so they
 * stay legible in light and dark mode, and the dashed border carries the meaning
 * without relying on colour at all. */
.panel__body input[readonly] {
  color: var(--pico-muted-color);
  border-style: dashed;
  cursor: default;
}

/* ------------------------------------------------------- address combobox ---

   The suggestion list replaced a native <datalist>, which had no CSS surface at
   all. Now that the markup is ours, it can look like the rest of the form. */

/* Positioning context for the list. It also takes over the input's bottom margin
   — Pico gives inputs `margin-bottom: var(--pico-spacing)` and then pulls the
   following help text up by 0.75rem via `input + small`. Wrapping the input would
   otherwise break both halves of that: the wrapper has no margin and the help text
   is no longer adjacent to an input. Reproducing them keeps the spacing byte for
   byte what it was before the wrapper existed. */
.combobox {
  position: relative;
  margin-bottom: var(--pico-spacing);
}

.combobox input {
  margin-bottom: 0;
}

.combobox + small {
  margin-top: calc(var(--pico-spacing) * -0.75);
}

.combobox__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 13rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  text-align: left;
  background: var(--pico-card-background-color, var(--pico-background-color));
  border: var(--pico-border-width) solid var(--pico-form-element-active-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
}

.combobox__option {
  /* ~44px tall: these are tap targets on a phone, not just rows. */
  padding: 0.7rem 0.75rem;
  border-radius: var(--pico-border-radius);
  line-height: 1.3;
  cursor: pointer;
}

/* One rule for both the pointer and the keyboard cursor, so hovering and arrowing
   look identical instead of inventing two visual languages. */
.combobox__option:hover,
.combobox__option[aria-selected='true'] {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* Available to assistive technology, invisible on screen. Used for the live region
   that announces how many suggestions arrived. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.panel__body button[type='submit'] {
  width: 100%;
  margin-top: 1rem;
  /* ~48px tall including borders: comfortably past the 44px minimum for a touch
     target. */
  padding-block: 0.85rem;
  font-weight: 700;
}

/* Error summary: Pico has no component for this, so give it the same visual
   weight as an invalid field. */
.error-summary {
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border: var(--pico-border-width) solid var(--pico-del-color);
  border-radius: var(--pico-border-radius);
}

.error-summary > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ wider screens --- */

@media (min-width: 40rem) {
  .shell {
    padding: 2rem 1rem 3rem;
  }

  .panel__body {
    padding: 1.75rem;
  }

  .panel__body h1 {
    font-size: 1.625rem;
  }
}