@layer components {
  .skip-link {
    position: absolute; inset-inline-start: var(--space-m); inset-block-start: -10rem; z-index: 100;
    padding: var(--space-s) var(--space-m); background: var(--color-paper); border: 2px solid var(--color-accent);
    &:focus { inset-block-start: var(--space-m); }
  }

  main:focus { outline: none; }

  /* --- Header: logo and name on white, a plain navigation row under it, like evang.ro ---------------- */
  .site-header { background: var(--color-paper); }
  .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-l); padding-block: var(--space-m); }

  .brand { display: flex; align-items: center; gap: var(--space-m); text-decoration: none; color: var(--color-text); }
  .brand__logo { inline-size: 40px; block-size: auto; flex: none; }
  .brand__text { display: grid; line-height: 1.25; }
  .brand__name { font-size: var(--step-2); font-weight: 700; color: var(--color-heading); }
  .brand__tagline { font-size: var(--step--1); color: var(--color-muted); }
  .brand:hover .brand__name { text-decoration: underline; }

  .language-switcher { font-size: var(--step--1);
    ul { list-style: none; padding: 0; display: flex; gap: var(--space-m); }
    a, span { display: inline-block; padding-block: var(--space-xs); min-block-size: 24px; }
    [aria-current] { font-weight: 700; }
  }

  .site-nav {
    background: var(--color-cream); border-block-end: 2px solid var(--color-coral);
    ul { list-style: none; padding: var(--space-s) 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); }
    a { display: inline-block; padding-block: var(--space-xs); font-weight: 700; color: var(--color-text); text-decoration: none; }
    a:hover { color: var(--color-accent); text-decoration: underline; }
    a[aria-current='page'] { color: var(--color-accent); }
  }

  /* --- Footer: who runs the site ---------------------------------------------------------------- */
  .site-footer {
    margin-block-start: var(--space-2xl); padding-block: var(--space-xl) var(--space-l);
    border-block-start: 2px solid var(--color-coral); font-size: var(--step--1);
    ul { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
  }
  .site-footer__inner { display: grid; gap: var(--space-l); align-items: start; }
  .site-footer__church { display: flex; align-items: center; gap: var(--space-m); color: var(--color-text); max-inline-size: 26rem; }
  .site-footer__church img { flex: none; }
  .site-footer__credits { color: var(--color-muted); }

  @media (min-width: 52rem) {
    .site-footer__inner { grid-template-columns: 2fr 1fr 1.4fr; }
  }

  .breadcrumbs { font-size: var(--step--1); color: var(--color-muted); margin-block: var(--space-m) var(--space-l);
    ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
    li + li::before { content: '›'; margin-inline-end: var(--space-xs); }
  }

  .button {
    display: inline-flex; align-items: center; gap: var(--space-s);
    min-block-size: 40px; padding: var(--space-s) var(--space-m);
    border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff;
    font-weight: 700; text-decoration: none; cursor: pointer;
    &:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }
  }

  .button--secondary {
    background: var(--color-paper); color: var(--color-accent);
    &:hover { background: var(--color-cream); color: var(--color-accent-dark); }
  }

  .page-header { margin-block-end: var(--space-l);
    p { color: var(--color-muted); max-inline-size: var(--measure); margin-block-start: var(--space-s); }
  }

  /* A cream box with a heading and its three squares, like evang.ro's sidebar */
  .box { background: var(--color-cream); padding: var(--space-m) var(--space-l) var(--space-l);
    h2 { font-size: var(--step-1); margin-block-end: var(--space-s); }
  }

  .flash { margin-block: var(--space-m); padding: var(--space-s) var(--space-m); background: var(--color-cream);
    border-inline-start: 4px solid var(--color-success);
  }
}