/* ==========================================================================
   layout.css — container, header, footer, section rhythm.
   Breakpoints follow brand/layout.md: phone ≤ 767, tablet 768–1199, desktop ≥ 1200.
   ========================================================================== */

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(54.375rem + 2 * var(--gutter)); } /* 870px agenda column */

/* Section rhythm: 60 / 80 / 116 px */
.section { padding-block: 3.75rem; }
@media (min-width: 48rem) { .section { padding-block: 5rem; } }
@media (min-width: 75rem) { .section { padding-block: 7.25rem; } }

.section__head { display: grid; gap: var(--space-4); justify-items: start; margin-bottom: 2.5rem; }
.section__head--center { justify-items: center; text-align: center; }
.section__head--center .lead { margin-inline: auto; }
@media (min-width: 48rem) { .section__head { margin-bottom: 3rem; } }
@media (min-width: 75rem) { .section__head { margin-bottom: 4.75rem; } }

/* Split: two columns from 1200, stacked below (gap 40 / 48 / 96) */
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 48rem) { .split { gap: 3rem; } }
@media (min-width: 75rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6rem; }
  .split--top { align-items: start; }
  .split--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 5.625rem; align-items: start; }
}

/* Header: floating pill inside the container ---------------------------- */
/* Sticky (fixed) floating header. No backdrop-filter or transform on .site-header or its inner:
   either would become the containing block of the fixed mobile nav and collapse it. */
.site-header { position: fixed; inset: 1.25rem 0 auto; z-index: 50; background: transparent; pointer-events: none; }
.site-header__inner { pointer-events: auto; transition: box-shadow .2s ease; }
.site-header.is-scrolled .site-header__inner { box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--c-ink) 55%, transparent); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  border: 1px solid var(--line); border-radius: 1rem;
  padding-block: 0.75rem; padding-inline: 1.25rem 0.75rem; min-height: 4.25rem;
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--c-ink) 45%, transparent);
}
.site-header .container { padding-inline: var(--gutter); }
.site-logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.site-logo img { height: 2.75rem; width: auto; }
.site-logo__text { font: 800 1rem/1.1 var(--font-display); color: var(--c-primary); letter-spacing: -0.01em; }
.site-logo__text small { display: block; font: 500 0.75rem/1.3 var(--font-body); color: var(--muted); letter-spacing: 0; }

.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; gap: var(--space-2); align-items: center; }
.site-nav__list a {
  display: block; padding: 0.625rem 0.875rem; border-radius: 99px;
  font: 600 0.9375rem/1 var(--font-display); text-decoration: none; color: var(--fg);
}
.site-nav__list a:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); color: var(--c-primary); }
.site-nav__list a[aria-current="page"] { color: var(--c-primary); font-weight: 700; }
.site-header__cta { flex-shrink: 0; }

.nav-toggle { display: none; }

/* ≤ 1199: compact bar + menu toggle (the template uses the phone menu on tablet too) */
@media (max-width: 74.99rem) {
  .site-nav__cta-desktop { display: none; }
  .site-header .site-header__cta.btn { display: none; }
  .nav-toggle {
    display: inline-grid; place-items: center; margin-inline-start: auto;
    width: 3rem; height: 3rem; border-radius: 0.75rem; border: 1px solid var(--line); background: var(--c-surface);
  }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
    display: block; width: 1.25rem; height: 2px; background: var(--c-primary); border-radius: 2px; content: ""; position: relative; transition: transform .2s ease, background-color .2s ease;
  }
  .nav-toggle__bar::before { position: absolute; top: -6px; }
  .nav-toggle__bar::after { position: absolute; top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

  .site-nav {
    position: fixed; inset: 6.5rem var(--gutter) auto; margin: 0;
    background: var(--c-surface); border: 1px solid var(--line); border-radius: 1rem; padding: var(--space-4);
    box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--c-ink) 50%, transparent);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a { padding: 0.95rem 1rem; font-size: 1.0625rem; border-radius: 0.75rem; }
  .site-nav__list .btn { margin-top: var(--space-3); justify-content: center; }
}
@media (min-width: 75rem) { .site-nav__cta-mobile { display: none; } }

/* Footer --------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; padding-top: 4.5rem; isolation: isolate; }
.site-footer__bg { position: absolute; inset: auto 0 0; height: 70%; z-index: -1; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0.22; }
.site-footer__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--c-ink), color-mix(in srgb, var(--c-ink) 40%, transparent)); z-index: 1; }
.site-footer__grid { display: grid; gap: 3rem; }
@media (min-width: 75rem) { .site-footer__grid { grid-template-columns: minmax(0, 342fr) minmax(0, 682fr); gap: 6rem; justify-content: space-between; } }
.site-footer__brand img { height: 3.5rem; width: auto; margin-bottom: var(--space-4); }
.site-footer__brand p { color: var(--muted); max-width: 34ch; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
@media (min-width: 48rem) { .site-footer__cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr); } }
.site-footer h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: var(--space-4); }
.site-footer ul { display: grid; gap: var(--space-3); font-size: 0.9375rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.site-footer__contact li { color: var(--muted); }
.site-footer__times li { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--muted); }
.site-footer__times span:last-child { color: var(--fg); font-variant-numeric: tabular-nums; }
.site-footer__bottom {
  margin-top: 4rem; padding-block: 1.75rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; font-size: 0.875rem; color: var(--muted);
}

.section--alt { background: var(--c-surface); }
.section--flush-top { padding-top: 0; }
.site-footer__socials { margin-top: 1.25rem; }
.site-footer__times .prayer-list__time { font: 600 0.9375rem/1.3 var(--font-body); }
.site-footer li, .site-footer a { overflow-wrap: anywhere; }
.site-footer__times { max-width: 16rem; }
@media (max-width: 47.99rem) { .site-footer__cols > div:nth-child(2) { grid-column: span 1; } .site-footer__cols > :last-child { grid-column: 1 / -1; } }
@media (max-width: 29.99rem) { .site-footer__cols > div:nth-child(2) { grid-column: 1 / -1; order: 3; } .site-footer__cols > :last-child { order: 2; grid-column: auto; } }
.site-nav__list a.btn { color: var(--btn-fg); background: var(--btn-bg); padding: 0.95rem 1rem; }
.site-nav__list a.btn:hover { color: var(--btn-fg); background: var(--btn-bg); }
.nav-toggle { flex-shrink: 0; }
.site-logo { min-width: 0; }
@media (max-width: 23.99rem) {
  .site-header__inner { gap: var(--space-3); padding-inline-start: 0.875rem; }
  .site-logo { gap: var(--space-2); }
  .site-logo img { height: 2.25rem; }
  .site-logo__text { font-size: 0.875rem; }
}