/*
 * The whole stylesheet of the site, written by hand: no build step.
 *
 *   1. Fonts
 *   2. Tokens       the single place to change the site's look
 *   3. Reset
 *   4. Base
 *   5. Layout       container, skip link, page header, sections, helpers
 *   6. Components   button, text link, eyebrow, headings, card, prose, schedule, address,
 *                   contact cards, pill, empty state
 *   7. Site header  top bar, brand, desktop menu, mobile menu
 *   8. Site footer
 *   9. Pages        home, contact, sermons, doctrinal statement, not found
 *
 * Breakpoints (min-width): 40rem, 48rem, 64rem. Styles are written for a phone first.
 * Naming: block__element, with --modifier for a variant and is-* for a state.
 */

/* ------------------------------------------------------------------ */
/* 1. Fonts                                                           */
/* Self-hosted variable fonts (SIL Open Font License), latin subset.  */
/* The `?v=` lets the browser keep them for good: bump it here and in */
/* the preloads of base.html if a file is ever replaced.              */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/montserrat-latin-wght-normal.woff2?v=1") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-latin-wght-normal.woff2?v=1") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/cormorant-garamond-latin-wght-italic.woff2?v=1") format("woff2");
}

/* ------------------------------------------------------------------ */
/* 2. Tokens                                                          */
/* ------------------------------------------------------------------ */

:root {
  /* Raw palette: navy and slate sampled from the logo; the rest from the church's flyers. */
  /* Mirrored in SITE.theme_color (app/web/site.py): meta tags can't read CSS variables. */
  --brand-navy: #223a5c;
  --brand-navy-dark: #1b2d48;
  /* Decorative only: ~3.5:1 on white, too low for text. */
  --brand-slate: #778d9b;
  /* Text-safe slate: >= 4.5:1 on white, paper and mist. */
  --brand-slate-dark: #566976;
  --brand-mist: #e3ebf3;
  --brand-sky: #b9d6f2;
  --brand-paper: #f1f0ed;
  --brand-ink: #1b2a44;
  --brand-white: #ffffff;

  /* Semantic colors: the only ones the rules below use. */
  --color-primary: var(--brand-navy);
  --color-primary-hover: var(--brand-navy-dark);
  --color-on-primary: var(--brand-white);
  /* Text at rest on a primary background; full white marks hover and the current page. */
  --color-on-primary-soft: rgb(255 255 255 / 0.85);
  --color-on-primary-line: rgb(255 255 255 / 0.25);
  --color-on-primary-divider: rgb(255 255 255 / 0.15);
  --color-secondary: var(--brand-slate);
  --color-accent-soft: var(--brand-sky);
  --color-muted: var(--brand-slate-dark);
  --color-background: var(--brand-paper);
  --color-surface: var(--brand-white);
  --color-surface-alt: var(--brand-mist);
  --color-foreground: var(--brand-ink);
  --color-border: color-mix(in srgb, var(--brand-slate) 40%, var(--brand-white));

  --font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Smallest comfortable touch target. */
  --tap-size: 2.75rem;
  --container-width: 72rem;
  /* Width of a column of long-form text. */
  --measure: 68ch;
  /* An in-page link lands a little below the top edge, not flush against it. */
  --anchor-offset: 1.5rem;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ */
/* 3. Reset                                                           */
/* ------------------------------------------------------------------ */

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

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* The menus are closed with the attribute; no `display` below may reopen them. */
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* 4. Base                                                            */
/* ------------------------------------------------------------------ */

body {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

/* Focused by script after a navigation, so the next Tab starts at the content. */
main:focus {
  outline: none;
}

/* An area on a primary background sets --focus-ring to a light color. */
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-primary));
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ------------------------------------------------------------------ */
/* 5. Layout                                                          */
/* ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 40rem) {
  .container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .container {
    padding-inline: 2rem;
  }
}

/* Off screen until it takes the focus. */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-primary);
  font-weight: 600;
}

.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Title band of a content page. */
.page-header {
  padding-block: 4rem;
  background-color: var(--color-surface-alt);
}

/* What follows the title band. */
.page-body {
  padding-block: 3rem;
}

/* A band of the home page. */
.section {
  padding-block: 4rem;
}

.section--alt {
  background-color: var(--color-surface-alt);
}

@media (min-width: 40rem) {
  .page-header {
    padding-block: 5rem;
  }

  .page-body {
    padding-block: 4rem;
  }

  .section {
    padding-block: 6rem;
  }
}

/* For a screen reader only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Space above a block, where the template decides it and not the component. */
.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

/* ------------------------------------------------------------------ */
/* 6. Components                                                      */
/* ------------------------------------------------------------------ */

/* Button. Variants: --primary (default look), --secondary, --ghost. */
.btn {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25rem;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition);
}

.btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

.btn--secondary {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Between primary and secondary: filled, in a light blue. */
.btn--soft {
  background-color: var(--color-accent-soft);
  color: var(--color-primary);
}

.btn--soft:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--ghost {
  color: var(--color-primary);
}

.btn--ghost:hover {
  background-color: var(--color-surface-alt);
}

/* Buttons side by side; one under the other on a phone. */
.button-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .button-row {
    flex-direction: row;
  }
}

/* A link that stands alone on its line, as tall as a button. */
.text-link {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25rem;
  text-underline-offset: 4px;
}

.text-link:hover {
  text-decoration: underline;
}

/* Small uppercase label above a title or a value. */
.eyebrow {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1rem;
  text-transform: uppercase;
}

/* Title of a page or of a band of the home page, with its label and its opening sentence. */
.section-heading {
  max-width: 42rem;
}

.section-heading .eyebrow,
.page-header .eyebrow {
  margin-bottom: 0.5rem;
}

.section-heading__title {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.section-heading__description {
  margin-top: 1rem;
  color: var(--color-muted);
  line-height: 1.625;
  text-wrap: pretty;
}

/* Title of a block inside a page. */
.heading {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (min-width: 40rem) {
  .section-heading__title {
    font-size: 3rem;
  }

  .section-heading__description {
    font-size: var(--text-lg);
  }

  .heading {
    font-size: 2.25rem;
  }
}

/* Card. --flat drops the shadow and keeps the padding small on every screen. */
.card {
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow:
    0 0 0 1px var(--color-border),
    var(--shadow-sm);
}

.card--flat {
  box-shadow: 0 0 0 1px var(--color-border);
}

@media (min-width: 40rem) {
  .card:not(.card--flat) {
    padding: 2rem;
  }
}

/* Long-form copy: the measure stays around 70 characters and the leading is generous. */
.prose {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: 1.625;
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: 1rem;
}

/* A block of a content page: text column, well apart from the one above. */
.content-block {
  max-width: var(--measure);
  margin-top: 3rem;
}

.content-block:first-child {
  margin-top: 0;
}

/* The meetings of the week. --compact is the smaller one used inside a content page. */
.schedule__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  padding-block: 1rem;
}

.schedule__row + .schedule__row {
  border-top: 1px solid var(--color-border);
}

.schedule__time {
  width: 5rem;
  flex-shrink: 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-variant-numeric: lining-nums;
  font-weight: 600;
  line-height: 2.25rem;
}

/* The row wraps and this column may shrink: with a fixed first column and min-width:auto,
   enlarged text pushed the day out of the screen. */
.schedule__what {
  min-width: 0;
}

.schedule__activity {
  display: block;
  font-weight: 600;
}

.schedule__day {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.schedule--compact .schedule__row {
  padding-block: 0.75rem;
}

.schedule--compact .schedule__time {
  font-size: var(--text-2xl);
  line-height: 2rem;
}

.address {
  font-size: var(--text-lg);
  line-height: 1.625;
}

.address--muted {
  color: var(--color-muted);
  font-size: inherit;
}

/* E-mail, WhatsApp and the social networks: one card each, the last one wide on a tablet. */
.contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-cards__social {
    grid-column: span 2;
  }
}

@media (min-width: 64rem) {
  .contact-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-cards__social {
    grid-column: span 1;
  }
}

/* A whole card that is a link. */
.contact-card {
  display: block;
  transition: box-shadow var(--transition);
}

.contact-card:hover {
  box-shadow:
    0 0 0 1px var(--color-primary),
    var(--shadow-sm);
}

.contact-card.card--flat:hover {
  box-shadow: 0 0 0 1px var(--color-primary);
}

.contact-card__value {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.75rem;
  overflow-wrap: break-word;
}

.contact-card:hover .contact-card__value {
  text-decoration: underline;
}

.contact-card__value--icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-card__value--icon svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.contact-cards__social .pill-list {
  margin-top: 0.75rem;
}

/* Pill-shaped control: the filter, the pagination, the downloads, the social links.
   States: --active (the selected filter), --disabled (an end of the pagination).
   --soft is the quieter one, for a link that is not a control of the page. */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  /* The muted color, not the border one: the decorative one is under the 3:1 a control needs. */
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25rem;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition);
}

.pill:hover {
  border-color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.pill svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.pill--soft {
  border-color: var(--color-border);
  background-color: transparent;
}

.pill--active,
.pill--active:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.pill--disabled,
.pill--disabled:hover {
  border-color: var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-muted);
}

/* What a page shows when it has nothing to show yet. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  text-align: center;
}

.empty-state__rule {
  width: 4rem;
  height: 1px;
  margin-bottom: 1.5rem;
  background-color: var(--color-secondary);
}

.empty-state__title {
  max-width: 36rem;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.375;
  text-wrap: balance;
}

.empty-state__description {
  max-width: 28rem;
  margin-top: 0.75rem;
  color: var(--color-muted);
  text-wrap: pretty;
}

.empty-state__body {
  margin-top: 1.5rem;
}

@media (min-width: 40rem) {
  .empty-state {
    padding-inline: 3rem;
  }

  .empty-state__title {
    font-size: 1.875rem;
  }
}

/* ------------------------------------------------------------------ */
/* 7. Site header                                                     */
/* ------------------------------------------------------------------ */

/* Top bar: the address and the ways to reach the church, on a wide screen only. */
.site-topbar {
  display: none;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.site-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.5rem;
}

/* The social networks and WhatsApp. A thin rule sets each link apart, so the row reads as a
   list and not as a run of words. */
.site-topbar__links,
.site-topbar__links li {
  display: flex;
  align-items: center;
}

.site-topbar__links li + li {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.site-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-primary);
  font-variant-numeric: lining-nums;
  font-weight: 600;
  text-underline-offset: 4px;
  /* A phone number split in two lines no longer reads as one. */
  white-space: nowrap;
}

.site-topbar__link:hover {
  text-decoration: underline;
}

.site-topbar__link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* The bar is the containing block of the mobile menu, which opens right under it. */
.site-bar {
  --focus-ring: var(--color-on-primary);
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.site-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--radius-full);
}

.brand__logo {
  display: flex;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
}

.brand__logo img {
  width: 100%;
  height: 100%;
}

/* min-width + break-word: a flex item keeps its longest word otherwise, and at 200% text
   "Cristiana" ran under the menu button. */
.brand__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (min-width: 48rem) {
  .brand__logo {
    width: 3.5rem;
    height: 3.5rem;
  }

  .brand__name {
    font-size: var(--text-2xl);
  }
}

/* Where the desktop menu has just appeared the row is some 26px short, and the name and the
   menu entries break in two lines: the name steps down until there is room. */
@media (min-width: 64rem) and (max-width: 68rem) {
  .brand__name {
    font-size: var(--text-xl);
  }
}

/* Desktop menu. static/js/site.js opens and closes the submenus. */
.nav-desktop {
  display: none;
}

.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-desktop__item {
  position: relative;
}

.nav-desktop__entry {
  display: flex;
  align-items: center;
}

.nav-desktop__link {
  display: flex;
  min-height: var(--tap-size);
  align-items: center;
  padding-inline: 1rem;
  border-radius: var(--radius-full);
  color: var(--color-on-primary-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25rem;
  transition:
    color var(--transition),
    background-color var(--transition);
}

/* The arrow button of the submenu follows: less room between the two. */
.nav-desktop__link--has-menu {
  padding-right: 0.5rem;
}

.nav-desktop__link:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

/* The section the visitor is in. */
.nav-desktop__link.is-active {
  color: var(--color-on-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.nav-toggle {
  display: flex;
  width: var(--tap-size);
  height: var(--tap-size);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition:
    color var(--transition),
    background-color var(--transition);
}

.nav-toggle:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.nav-toggle--submenu {
  color: var(--color-on-primary-soft);
}

.nav-toggle--submenu svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition);
}

.nav-toggle--submenu[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-toggle--mobile svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Two drawings in one icon: the bars while closed, the cross while open. */
.nav-toggle--mobile .nav-toggle__close,
.nav-toggle--mobile[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle--mobile[aria-expanded="true"] .nav-toggle__close {
  display: inline;
}

/* A light surface inside the primary bar: the focus ring goes back to dark. */
.submenu {
  --focus-ring: var(--color-primary);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 16rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.submenu__link {
  display: flex;
  min-height: var(--tap-size);
  align-items: center;
  padding-inline: 0.75rem;
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-size: var(--text-sm);
  line-height: 1.25rem;
  transition: background-color var(--transition);
}

.submenu__link:hover {
  background-color: var(--color-surface-alt);
}

.submenu__link[aria-current] {
  background-color: var(--color-surface-alt);
  font-weight: 600;
}

/* Mobile menu. */
.nav-mobile {
  flex-shrink: 0;
}

/* Never taller than what is left under the bar (100% is the bar, its containing block), so the
   panel ends inside the viewport however large the text is; it scrolls inside if needed. */
.nav-mobile__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 40;
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  border-top: 1px solid var(--color-on-primary-divider);
  background-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

/* Every level is visible at once: no accordion to open inside an open menu. */
.nav-mobile__list {
  display: flex;
  flex-direction: column;
  padding-block: 0.75rem;
}

.nav-mobile__sublist {
  margin-bottom: 0.25rem;
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-on-primary-line);
}

/* The left border is always there: only its color changes, so nothing moves between states. */
.nav-mobile__link {
  display: flex;
  min-height: var(--tap-size);
  align-items: center;
  padding-right: 0.75rem;
  padding-left: 0.5rem;
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-on-primary-soft);
  font-weight: 500;
  transition:
    color var(--transition),
    background-color var(--transition);
}

.nav-mobile__link--child {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.25rem;
}

.nav-mobile__link:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

/* The section the visitor is in, when the current page is one of its children. */
.nav-mobile__link.is-active {
  color: var(--color-on-primary);
}

/* The current page: the bar carries the mark, since the darker background alone is only 1.2:1. */
.nav-mobile__link[aria-current] {
  border-left-color: var(--color-secondary);
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
  font-weight: 600;
}

@media (min-width: 64rem) {
  .site-topbar,
  .nav-desktop {
    display: block;
  }

  .nav-mobile {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* 8. Site footer                                                     */
/* ------------------------------------------------------------------ */

.site-footer {
  --focus-ring: var(--color-on-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary-soft);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: 3rem;
}

@media (min-width: 40rem) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site-footer__title {
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 2rem;
}

.site-footer__body {
  margin-top: 1rem;
  font-size: var(--text-sm);
  line-height: 1.625;
}

.site-footer__body > * + * {
  margin-top: 0.25rem;
}

.site-footer__schedule > * + * {
  margin-top: 0.5rem;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
}

.site-footer__sublist {
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-on-primary-line);
}

/* 44px tall on a phone, where every one of these is a thumb target; tighter on a wide screen. */
.site-footer__link {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  text-underline-offset: 4px;
}

.site-footer__link:hover {
  color: var(--color-on-primary);
  text-decoration: underline;
}

.site-footer__link--strong {
  color: var(--color-on-primary);
  font-weight: 600;
}

/* A link of the menu: bold, in the color of the text around it. */
.site-footer__link--section {
  font-weight: 600;
}

/* `anywhere`, not `break-word`: only this one lets the flex row shrink below the width of an
   e-mail address, which is one long unbreakable token. */
.site-footer__link--email {
  overflow-wrap: anywhere;
}

.site-footer__link--icon {
  gap: 0.5rem;
  color: var(--color-on-primary);
}

.site-footer__link--icon svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

@media (min-width: 64rem) {
  .site-footer__link {
    min-height: 2rem;
  }
}

.site-footer__legal {
  border-top: 1px solid var(--color-on-primary-divider);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.site-footer__legal .container {
  padding-block: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* 9. Pages                                                           */
/* ------------------------------------------------------------------ */

/* Home: hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-surface-alt);
}

/* Soft blurred blobs for a watercolor feel. */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__blob {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(64px);
}

.hero__blob--slate {
  top: -6rem;
  left: -6rem;
  width: 20rem;
  height: 20rem;
  background-color: color-mix(in srgb, var(--color-secondary) 35%, transparent);
}

.hero__blob--navy {
  right: -4rem;
  bottom: -8rem;
  width: 24rem;
  height: 24rem;
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.hero__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6rem;
  background-image: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--color-background) 70%, transparent)
  );
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 5rem;
  text-align: center;
}

.hero__title {
  max-width: 56rem;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
}

.hero__lead {
  max-width: 36rem;
  margin-top: 1.5rem;
  font-size: var(--text-lg);
  line-height: 1.75rem;
  text-wrap: pretty;
}

/* On a phone the main button takes the first row and the other two share the second. */
.hero__actions {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.hero__actions .btn {
  flex: 1 1 0;
  padding-inline: 1rem;
}

.hero__actions .btn:first-child {
  flex-basis: 100%;
}

@media (min-width: 40rem) {
  .hero__blob--slate {
    width: 28rem;
    height: 28rem;
  }

  .hero__blob--navy {
    width: 32rem;
    height: 32rem;
  }

  .hero__inner {
    padding-block: 7rem;
  }

  .hero__title {
    font-size: 3.75rem;
  }

  .hero__lead {
    font-size: var(--text-xl);
  }

  .hero__actions {
    width: auto;
    flex-wrap: nowrap;
  }

  .hero__actions .btn,
  .hero__actions .btn:first-child {
    flex: 0 0 auto;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .hero__title {
    font-size: 4.5rem;
  }
}

/* Home: schedule and address, side by side from a tablet up */
.home-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .home-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Contact: meetings and map, side by side on a wide screen */
.contact-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 64rem) {
  .contact-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Where "Ver el mapa y cómo llegar" lands. */
.contact-anchor {
  scroll-margin-top: var(--anchor-offset);
}

.map-frame {
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px var(--color-border);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 16rem;
  border: 0;
}

@media (min-width: 40rem) {
  .map-frame iframe {
    height: 18rem;
  }
}

/* Sermons: one card per service date, each with its recordings */
.service-list > * + * {
  margin-top: 1.5rem;
}

.service-card {
  padding: 1.25rem;
}

.service-card__date {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.service-card__recordings {
  margin-top: 0.5rem;
}

.recording {
  padding-block: 1.25rem;
}

.recording + .recording {
  border-top: 1px solid var(--color-border);
}

.recording:last-child {
  padding-bottom: 0;
}

.recording__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.recording__label {
  color: var(--color-primary);
  font-weight: 600;
}

.recording__meta {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.recording__details {
  margin-top: 0.25rem;
  font-variant-numeric: lining-nums;
}

.recording__controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.recording__controls audio {
  width: 100%;
  min-width: 0;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* On a phone the status takes its own line, above the two links. */
.pagination__status {
  order: -1;
  width: 100%;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: lining-nums;
  line-height: 1.25rem;
  text-align: center;
}

@media (min-width: 40rem) {
  .service-card__date {
    font-size: 1.875rem;
  }

  .recording__controls {
    flex-direction: row;
    align-items: center;
  }

  .recording__controls audio {
    flex: 1;
  }

  .pagination {
    justify-content: space-between;
  }

  .pagination__status {
    order: 0;
    width: auto;
  }
}

/* Doctrinal statement */

/* The document is read in one column, a little narrower than the rest of the site's copy. */
.doctrine-column {
  max-width: 63ch;
}

/* Target of an in-page link: the index, an article, a note, a marker. */
.doctrine-anchor,
.doctrine-note,
.doctrine-ref a {
  scroll-margin-top: var(--anchor-offset);
}

.doctrine-header__subtitle {
  margin-top: 0.75rem;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.375;
  text-wrap: balance;
}

.doctrine-header__revision {
  margin-top: 1.5rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.doctrine-header__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

@media (min-width: 40rem) {
  .doctrine-header__subtitle {
    font-size: var(--text-2xl);
  }

  .doctrine-header__actions {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

/* The text of the document: the introduction and the points of an article. */
.doctrine-body {
  font-size: var(--text-lg);
  line-height: 1.625;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.doctrine-body > * + * {
  margin-top: 1rem;
}

.doctrine-body--points > * + * {
  margin-top: 1.5rem;
}

.doctrine-intro__closing {
  margin-top: 1.5rem;
  font-size: var(--text-lg);
  line-height: 1.625;
}

.doctrine-intro__signature {
  margin-top: 2rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.doctrine-intro__signature li {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.75rem;
}

.doctrine-intro__signature li + li {
  margin-top: 0.25rem;
}

.doctrine-index {
  margin-top: 4rem;
}

@media (min-width: 40rem) {
  .doctrine-index {
    padding: 2rem;
  }
}

.doctrine-index__title {
  margin-bottom: 0.5rem;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 2rem;
  overflow-wrap: break-word;
}

.doctrine-index__link {
  display: flex;
  min-height: var(--tap-size);
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.25rem;
  text-underline-offset: 4px;
}

.doctrine-index__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.doctrine-index__number {
  width: 2.25rem;
  flex-shrink: 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: lining-nums;
  font-weight: 600;
  line-height: 1.75rem;
}

.doctrine-index__name {
  min-width: 0;
  overflow-wrap: break-word;
}

.doctrine-article {
  margin-top: 4rem;
}

/* "Artículo 1", above the title and part of the same heading. */
.doctrine-article__number {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-variant-numeric: lining-nums;
  line-height: 1.25rem;
}

.doctrine-point > * + * {
  margin-top: 1rem;
}

.doctrine-point__number {
  color: var(--color-primary);
  font-variant-numeric: lining-nums;
  font-weight: 600;
}

.doctrine-point__items {
  padding-inline-start: 1.5rem;
  list-style: decimal outside;
  font-variant-numeric: lining-nums;
}

.doctrine-point__items > * + * {
  margin-top: 1rem;
}

.doctrine-point__items ::marker {
  color: var(--color-primary);
  font-weight: 600;
}

/*
 * A marker in the text and a note at the foot of the article: the document has 462 of each,
 * so their markup carries one class and the rest is decided here.
 */
.doctrine-ref {
  font-size: 0.7em;
  font-variant-numeric: lining-nums;
  line-height: 1;
}

.doctrine-ref a {
  color: var(--color-primary);
  font-weight: 600;
  text-underline-offset: 2px;
}

.doctrine-ref a:hover {
  text-decoration: underline;
}

.doctrine-notes {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
  overflow-wrap: break-word;
}

.doctrine-notes__title {
  margin-bottom: 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.doctrine-note {
  display: flex;
  gap: 0.5rem;
  line-height: 1.625;
}

.doctrine-note + .doctrine-note {
  margin-top: 0.375rem;
}

.doctrine-note > a {
  display: inline-flex;
  min-width: 1.75rem;
  min-height: 1.5rem;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: flex-end;
  color: var(--color-primary);
  font-variant-numeric: lining-nums;
  font-weight: 600;
  text-underline-offset: 2px;
}

.doctrine-note > a:hover {
  text-decoration: underline;
}

.doctrine-note > span {
  min-width: 0;
}

/* The copyright page of the document, at the very end. */
.doctrine-terms {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.625;
  overflow-wrap: break-word;
}

.doctrine-terms > * + * {
  margin-top: 0.75rem;
}

.doctrine-terms__title {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.75rem;
}

.doctrine-terms__link {
  color: var(--color-primary);
  font-weight: 600;
  text-underline-offset: 4px;
}

.doctrine-terms__link:hover {
  text-decoration: underline;
}

.doctrine-terms__link--email {
  overflow-wrap: anywhere;
}

/* Not found */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 6rem;
  text-align: center;
}

.not-found__code {
  color: var(--color-secondary);
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-variant-numeric: lining-nums;
  font-weight: 600;
  line-height: 1;
}

.not-found__title {
  margin-top: 1rem;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 2.5rem;
  text-wrap: balance;
}

.not-found__text {
  max-width: 28rem;
  margin-top: 1rem;
  color: var(--color-muted);
  text-wrap: pretty;
}

.not-found .btn {
  margin-top: 2rem;
}

@media (min-width: 40rem) {
  .not-found__title {
    font-size: 3rem;
    line-height: 1;
  }
}