/* Project styles layered on top of Pico. Self-hosted font only (no external CDN, CSP-clean).
   Visual system ported from the M3.1 design template
   (f719847144_..._Liste_final_mit_Wort_Umbruch_Fix.html): night header, paper body, white cards,
   two accents (night blue + gold) over neutral greys. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400.f1f8a8210104.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700.13a58e05dfd2.woff2") format("woff2");
}

:root {
  /* Fonts as in the design template: system sans for reading text, Georgia serif for wordmark and
     titles. (Atkinson Hyperlegible stays self-hosted below but currently unreferenced — the
     accessibility-font question is still open.) */
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pico-font-family: var(--sans);

  /* Two accents over neutral greys. */
  --night: #14203a;
  --night-2: #1e2a4a;
  --paper: #f4f6fa;
  --surface: #ffffff;
  --ink: #14203a;
  --blue: #23345c;
  --muted: #6b7794;
  --gold-dk: #b07f26;
  --wd-gray: #375990;   /* weekdays */
  --sun-gold: #a87c26;  /* Sundays */
  --line: #e0e4ee;

  --measure: 640px;     /* reading column width */

  /* Height of a stacked card's text block: title and venue line (47px), the column gap (8px) and
     the rhythm badge (26px). Cards without a rhythm keep that room empty, so a phone list has one
     card height instead of two (decided 2026-07-26). */
  --card-stacked-body: 81px;
}

body {
  background: var(--paper);
  color: var(--ink);
}

/* --- Header: full-bleed night bar, content held to the reading column ------------------------ */

.site-header {
  background: linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%);
  color: #eef1f7;
  padding: 0;
  margin: 0;
}

.site-header__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 auto;
}

.brand__name {
  font-family: var(--serif);
  font-size: 18px;
}

.brand__name b {
  color: #d9a94a;
  font-weight: 400;
}

/* Language switcher sitting on the dark bar: four codes, the current one lit. Plain links — the
   language is in the URL, so nothing has to be remembered between requests (and nothing is). */
.site-header .lang-switch {
  margin: 0;
  display: flex;
  gap: 2px;
  font-size: 12px;
  letter-spacing: .04em;
}

/* Four codes have to share the header row with the wordmark down to 320px — the padding is what
   little is left to give, so it stays modest. */
.lang-switch__link,
.lang-switch__current {
  padding: 4px 6px;
  border-radius: 5px;
  line-height: 1;
}

.lang-switch__link {
  color: #9fb0cf;
  text-decoration: none;
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
  color: #fff;
  background: rgba(159, 176, 207, .18);
}

.lang-switch__current {
  color: #fff;
  background: rgba(159, 176, 207, .22);
}

/* --- Main reading column -------------------------------------------------------------------- */

main.container {
  max-width: var(--measure);
  padding-top: 22px;
  /* The footer is part of the page, not an afterthought parked far below the list. */
  padding-bottom: 21px;
}

.page-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 4px;
}

.page-title span {
  display: inline-block;
  border-bottom: 3px solid #c99a3b;
  padding-bottom: 6px;
}

/* Result count line. */
#results > p:first-child {
  color: var(--muted);
  font-size: 13px;
  margin: 9px 0 16px;
}

/* --- Occurrence cards ----------------------------------------------------------------------- */

.card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 9px;
}

.card__time {
  font-weight: 700;
  font-size: 23px;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.card__day {
  font-size: 12px;
  margin-top: 6px;
  white-space: nowrap;
  color: var(--muted);
}

.card__day b {
  font-weight: 600;
  color: var(--wd-gray);
}

.card--sun .card__day b {
  color: var(--sun-gold);
}

.card__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  min-width: 0;
}

.card__info {
  min-width: 0;
}

/* The title is shortened server-side (K4); this keeps it on one line even when a long word or a
   narrow column would still push it over — every card stays exactly as tall as the next. */
.card__title {
  font-size: 15.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.card__title a:hover {
  text-decoration: underline;
}

/* Every address block on the site (card and detail page) reads upright — the <address>
   element's italic browser default fights the calm of the block (K3). */
address {
  font-style: normal;
  line-height: 1.5;
}

/* "Church, town" — deliberately kept to a single line so every card is exactly as tall as every
   other one. A name too long for the column ends in an ellipsis rather than wrapping (K3). */
.card__where {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recurrence badge — gold pill echoing the sun's rings. */
.recur {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--gold-dk);
  border: 1px solid #ecd9ac;
  background: #fbf5e7;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.recur svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* On narrow screens the badge drops under the venue instead of squeezing the title. */
@media (max-width: 540px) {
  .card__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Stacking moves the text block's width into the flex cross axis, where `min-width: 0` has no
     say — a flex-start item takes its content's width instead. Since title and venue line never
     wrap (they must not, or cards stop being equally tall), that content width is the whole text
     and the card pushes the page sideways. Binding the block to the column width restores the
     limit the ellipsis needs. */
  .card__info {
    width: 100%;
  }

  /* Room for the badge row, held open on every card of a page that shows at least one badge —
     an even list edge is worth more than the blank line it costs on the one-off services next to
     it. A page without a single rhythm (all of them today) stays compact: `:has()` only reserves
     the room where it is actually needed. */
  #results:has(.recur) .card__main {
    min-height: var(--card-stacked-body);
  }
}

/* --- Search: the page's primary action ------------------------------------------------------ */

/* Pico renders every [role=search] as a one-line pill-shaped input group (inline-flex, 5rem radii).
   Ours is a stacked block — bar, collapsible filters, reset link — so we opt out of both, but keep
   the role itself: it is the search landmark screen readers navigate to. */
.search {
  display: block;
  --pico-border-radius: 10px;
  margin: 16px 0 24px;
  /* Pico also rings the whole group whenever any field inside it takes focus. Our fields carry
     their own focus styles, so the outer ring is noise. */
  box-shadow: none;
}

/* One tall bar: magnifier-marked field on the left, night-blue submit welded to the right. */
.search__bar {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 32, 58, .06);
}

.search__bar:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(35, 52, 92, .16);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 15px 16px 15px 50px;
  font-size: 17px;
  color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7794' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat 18px center;
  background-size: 20px 20px;
}

.search__input:focus {
  outline: 0;
  box-shadow: none;  /* the whole bar carries the focus ring instead */
}

.search__submit {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 0 24px;
  cursor: pointer;
}

.search__submit:hover {
  background: #2b3f6e;
}

/* Secondary filters, collapsed under "Weitere Filter" so they never compete with the search. */
.search__more {
  margin-top: 12px;
}

.search__more > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  list-style: none;
}

.search__more > summary::-webkit-details-marker {
  display: none;
}

/* Chevron that rotates open. */
.search__more > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}

.search__more[open] > summary::before {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .search__more > summary::before {
    transition: none;
  }
}

/* The revealed fields: a single vertical column — each filter on its own row, stacked cleanly
   between the search and the results. Scoped to [open] because setting `display` on a closed
   <details>'s content can defeat the native collapse in some engines. */
.search__more[open] .search__filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.search__filters label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Radius set explicitly: Pico puts --pico-border-radius:5rem on [type=search] elements themselves,
   which beats the value inherited from .search and would leave the place field a 100px pill. */
.search__filters input,
.search__filters select {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
}

.search__filters input:focus,
.search__filters select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(35, 52, 92, .15);
}

.search__reset {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

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

/* Two equal halves, parted by a hairline down the middle: who runs the site on the left, what it
   promises on the right, with the closing line drawn under both. */
.site-footer {
  max-width: var(--measure);
  margin: 13px auto 55px;
  padding: 21px 16px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Equal halves and no column gap: the split then falls exactly on the middle of the footer, and
   each half keeps its distance from it through its own padding. */
.site-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 21px;
}

.site-footer__imprint {
  padding-right: 34px;
}

.site-footer__pledge {
  border-left: 1px solid var(--line);
  padding-left: 34px;
}

.site-footer p {
  margin: 0;
}

.site-footer__label {
  display: block;
  font-weight: 700;
  color: var(--wd-gray);
}

.site-footer__imprint {
  font-style: normal;
  line-height: 1.6;
}

.site-footer a {
  color: var(--blue);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Centred: it belongs to both columns above it and closes the page rather than continuing it. */
.site-footer__made {
  margin-top: 21px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* The only coloured glyph down here — the sun's gold, not a red that would break the palette. */
.site-footer__heart {
  color: var(--gold-dk);
}

/* One column on a phone: the address block reads as a block, not as a squeezed column, and the
   split lies down — a line between two stacked blocks runs across, not alongside. */
@media (max-width: 640px) {
  .site-footer__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__imprint {
    padding-right: 0;
  }

  .site-footer__pledge {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 21px;
  }
}