/* ============================================================
   El menú de escritorio pide 1086px de contenido (9 items).
   Colapsaba a 900px cuando eran 7, y en la banda 901–1100 el logo
   se comprimía. Breakpoint subido a 1100/1101.
   ============================================================ */
/* ============================================================
   Tidal Church — Shared Site Chrome STYLES (header + footer)
   Loaded by every page (marketing site + watch app) alongside
   js/site-chrome.js. Self-contained: all custom properties are
   scoped to .site-header / .site-footer so they never collide
   with a page's own :root (e.g. the watch app's dark theme).
   ============================================================ */

.site-header, .site-footer {
  --navy:      #0a2540;
  --accent:    #0fa3a3;
  --accent-2:  #14c7c7;
  --line:      #e3e8ec;
  --muted:     #5a6b78;
  --bg:        #ffffff;
  --bg-soft:   #f6f9fb;
  --shadow-sm: 0 1px 3px rgba(10,37,64,.08), 0 1px 2px rgba(10,37,64,.06);
  --shadow-md: 0 10px 30px rgba(10,37,64,.12);
  --maxw:      1120px;
  --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* El header pide más aire que el resto de las secciones: el logo y el
   menú quedaban a sólo 10px de distancia porque compartían el --maxw
   de 1120px del contenido, que apenas alcanzaba para los 9 items.
   El footer sigue con el ancho normal. */
.site-header .container { width: 100%; max-width: 1150px; margin: 0 auto; padding: 0 24px; }
.site-footer .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; flex-shrink: 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
}
.site-header .nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.site-header .brand { display: inline-flex; align-items: center; gap: 12px; line-height: 0; color: var(--navy); text-decoration: none; margin-right: 36px; }
.site-header .brand:hover { text-decoration: none; }
.site-header .brand__logo { height: 42px; width: auto; display: block; }
.site-header .brand__logo--light { display: none; }   /* default light bar → show navy (dark) logo */
.site-header .brand__logo--dark  { display: block; }
.site-header .nav__links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-header .nav__links a { color: var(--navy); font-weight: 500; font-size: .95rem; letter-spacing: .01em; text-decoration: none; }

/* :hover gated to real pointers throughout this file (see the longer note by
   .has-submenu:hover in the dropdown-submenu rules below) — on touch, any
   element matched by a :hover selector needs a first "wasted" tap before a
   second tap actually fires the click/navigation. Left unguarded, every
   mobile nav link would need double-tapping to go anywhere. */
@media (min-width: 1141px) {
  .site-header .nav__links a:hover { color: var(--accent); text-decoration: none; }
  /* Plain links are `inline` with vertical padding, which inflates their box
     and centers them ~13px higher than the dropdown items (inline-flex) —
     and without white-space:nowrap, "I'm New" wraps into two lines and its
     caret gets crushed to 8px wide. Missing from watch/index.html (which
     only loads this file, not styles.css) until this was moved here. */
  .site-header .nav__links > li { display: flex; align-items: center; flex: none; }
  .site-header .nav__links > li > a, .site-header .nav__search-btn {
    display: inline-flex; align-items: center; white-space: nowrap;
  }
  .site-header .nav__links > li > a > svg, .site-header .nav__search-btn > svg { flex: none; }
  .site-header .nav__links > li:not(.nav__cta) a { position: relative; padding: 6px 1px; }
  .site-header .nav__links > li:not(.nav__cta) a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: currentColor; border-radius: 2px; opacity: .85;
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .site-header .nav__links > li:not(.nav__cta) a:hover::after { transform: scaleX(1); }
}
.site-header .nav__cta { margin-left: 8px; }
.site-header .nav__active > a { color: var(--accent); }

/* CTA button */
.site-header .btn {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-head);
  font-weight: 600; font-size: 1rem; padding: 14px 26px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.site-header .btn:hover { text-decoration: none; transform: translateY(-2px); }
.site-header .btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: var(--shadow-sm); }
.site-header .btn--primary:hover { box-shadow: var(--shadow-md); }

/* Dropdown submenu */
.site-header .has-submenu { position: relative; }
.site-header .has-submenu > a { display: inline-flex; align-items: center; gap: 5px; }
.site-header .has-submenu > a .caret { width: 13px; height: 13px; transition: transform .2s ease; }
.site-header .has-submenu:focus-within > a .caret { transform: rotate(180deg); }
.site-header .submenu {
  position: absolute; top: 100%; left: 0; margin: 12px 0 0; padding: 8px;
  min-width: 220px; list-style: none; display: grid; gap: 2px; z-index: 60;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.site-header .submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.site-header .has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
/* :hover only — gated to real hover-capable pointers. iOS Safari treats any
   element matched by a :hover selector specially: the FIRST tap is consumed
   to simulate the hover state and only the SECOND tap fires the actual
   click, regardless of which rule ends up winning the cascade. That's what
   made the mobile submenu caret need two taps to open. */
@media (min-width: 1141px) {
  .site-header .has-submenu:hover > a .caret { transform: rotate(180deg); }
  .site-header .has-submenu:hover .submenu { opacity: 1; visibility: visible; transform: none; }
}
.site-header .submenu li { width: 100%; }
.site-header .submenu .submenu__sep { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.site-header .submenu a { display: block; padding: 10px 14px; border-radius: 9px; font-size: .92rem; font-weight: 500; white-space: nowrap; color: var(--navy); text-shadow: none; }
@media (min-width: 1141px) {
  .site-header .submenu a:hover { background: var(--bg-soft); color: var(--accent); text-decoration: none; }
}
.site-header .submenu a::after { display: none !important; }

/* Site search button — reads as one more menu link: same weight, size,
   padding and hover-underline as the rest of .nav__links. The index it
   opens (search-index.json) is fetched by js/site-search.js. */
.site-header .nav__search { display: flex; align-items: center; }
.site-header .nav__search-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--navy); font-family: inherit; font-size: .95rem; font-weight: 500;
  letter-spacing: .01em; padding: 6px 1px;
  /* <a> inherits the body line-height; a <button> starts at `normal` and
     sat 5px lower than the rest of the row without this. */
  line-height: inherit;
  /* With the label hidden, only the 16px icon is left and the button
     shrinks — this keeps it level with the links (1.6em + padding). */
  min-height: calc(1.6em + 12px);
}
.site-header .nav__search-btn svg { width: 16px; height: 16px; flex: none; }
/* Icon only — the word "Search" added 67px and the menu was already tight.
   The accessible name lives in aria-label and title. */
.site-header .nav__search-label { display: none; }
@media (min-width: 1141px) {
  .site-header .nav__search-btn:hover { color: var(--accent); }
  .site-header .nav__search-btn::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: currentColor; border-radius: 2px; opacity: .85;
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .site-header .nav__search-btn:hover::after { transform: scaleX(1); }
}
/* Mobile: the button isn't an <a>, so it doesn't inherit the row's
   display:block/padding the way the other menu items do — it read small
   and left-stuck instead of like another row. Label shows here: the
   expanded menu has all the width to spare. */
@media (max-width: 1140px) {
  .site-header .nav__search { width: 100%; }
  .site-header .nav__search-btn {
    width: 100%; min-height: 0; padding: 14px 24px; gap: 12px;
    font-size: 1rem;
  }
  .site-header .nav__search-btn svg { width: 18px; height: 18px; }
  .site-header .nav__search-label { display: inline; }
}

/* Hamburger toggle */
.site-header .nav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 10px; color: var(--navy); }
.site-header .nav__toggle span, .site-header .nav__toggle span::before, .site-header .nav__toggle span::after {
  content: ""; display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.site-header .nav__toggle span { position: relative; }
.site-header .nav__toggle span::before { position: absolute; top: -7px; width: 100%; }
.site-header .nav__toggle span::after  { position: absolute; top: 7px;  width: 100%; }
.site-header .nav.is-open .nav__toggle span { background: transparent; }
.site-header .nav.is-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
.site-header .nav.is-open .nav__toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) { .site-header .brand__logo { height: 34px; } }

/* Mobile: collapse menu into a dropdown panel */
@media (max-width: 1140px) {
  .site-header .nav__links {
    position: fixed; inset: 84px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 0;
    transform: translateY(-120%); transition: transform .28s ease; box-shadow: var(--shadow-md);
    max-height: calc(100vh - 84px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .site-header .nav.is-open .nav__links { transform: translateY(0); }
  .site-header .nav__links li { width: 100%; }
  .site-header .nav__links a { display: block; padding: 14px 24px; }
  .site-header .nav__cta { margin: 12px 24px; }
  .site-header .nav__cta .btn { width: 100%; justify-content: center; }
  .site-header .nav__toggle { display: block; }
  /* Collapsed accordion by default — with 4 submenus (28 links total) always
     expanded the panel became a huge scroll of links. Closed, it shows just
     the 9 top-level rows; tapping a caret (added by site-chrome.js) expands
     one submenu at a time. */
  .site-header .has-submenu > a {
    display: flex; align-items: center; justify-content: space-between;
  }
  .site-header .has-submenu > a .caret { display: block; flex-shrink: 0; transition: transform .2s ease; }
  .site-header .has-submenu.submenu-open > a .caret { transform: rotate(180deg); }
  .site-header .submenu {
    position: static; transform: none;
    background: transparent; border: 0; box-shadow: none; border-radius: 0; margin: 0; padding: 0;
    opacity: 0; visibility: hidden; max-height: 0; overflow: hidden;
    transition: max-height .3s ease, opacity .2s ease, visibility .3s;
  }
  .site-header .has-submenu.submenu-open > .submenu {
    opacity: 1; visibility: visible; max-height: 480px; padding: 0 0 8px;
  }
  .site-header .submenu::before { display: none; }
  .site-header .submenu a { padding: 11px 24px 11px 42px; color: var(--muted); font-size: .9rem; }
}

/* ---------- Home: transparent-over-hero header (only on body.home) ---------- */
.home .site-header {
  position: fixed; top: 0; left: 0; right: 0; background: transparent;
  border-bottom-color: transparent; box-shadow: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.home .site-header .nav { transition: height .35s ease; }
.home .site-header:not(.is-solid) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.home .site-header:not(.is-solid) .brand__logo--light { display: block; }
.home .site-header:not(.is-solid) .brand__logo--dark  { display: none; }
.home .site-header:not(.is-solid) .brand,
.home .site-header:not(.is-solid) .nav__toggle { color: #fff; }
.home .site-header:not(.is-solid) .brand__logo { filter: drop-shadow(0 2px 10px rgba(0,0,0,.28)); }
@media (min-width: 1141px) {
  .home .site-header:not(.is-solid) .nav__links a { color: rgba(255,255,255,.92); font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.22); }
  .home .site-header:not(.is-solid) .nav__links a:hover { color: #fff; }
}
.home .site-header:not(.is-solid) .nav__cta .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }
.home .site-header:not(.is-solid) .nav__cta .btn:hover { background: rgba(255,255,255,.14); }
.home .site-header.is-solid {
  background: rgba(3,36,60,.55);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
.home .site-header.is-solid .nav { height: 68px; }
.home .site-header.is-solid .brand__logo--light { display: block; }
.home .site-header.is-solid .brand__logo--dark { display: none; }
.home .site-header.is-solid .brand,
.home .site-header.is-solid .nav__toggle { color: #fff; }
.home .site-header.is-solid .nav__links a { color: rgba(255,255,255,.9); }
@media (min-width: 1141px) {
  .home .site-header.is-solid .nav__links a:hover { color: #fff; }
}

/* ---------- Footer ---------- */
/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #003D63 0%, #022c48 100%); color: rgba(255,255,255,.74); padding: 0 0 28px; font-family: var(--font-head); }
.site-footer::before { content: ""; position: absolute; width: 620px; height: 620px; right: -200px; top: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(95,207,223,.14), transparent 65%); pointer-events: none; }
.site-footer .container { position: relative; }
.site-footer h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 18px; font-family: var(--font-head); }
.site-footer a { color: rgba(255,255,255,.74); transition: color .2s ease; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: none; }

/* visit band */
.site-footer .ft-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; align-items: center; margin: 0 0 56px; padding: 34px 36px; border-radius: 0 0 28px 28px; background: linear-gradient(120deg, rgba(95,207,223,.18), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12); border-top: 0; }
.site-footer .ft-kicker { margin: 0 0 6px; color: #7fe3d8; font-weight: 800; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.site-footer .ft-visit h2 { margin: 0 0 18px; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; font-family: var(--font-head); }
.site-footer .ft-visit__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer .ft-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: #fff; border: 1.5px solid rgba(255,255,255,.35); transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.site-footer .ft-btn:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-2px); }
.site-footer .ft-btn--primary { background: #5fcfdf; border-color: #5fcfdf; color: #003D63; }
.site-footer .ft-btn--primary:hover { background: #7fe3d8; border-color: #7fe3d8; color: #003D63; }
.site-footer .ft-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.site-footer .ft-btn:hover svg { transform: translateX(3px); }
.site-footer .ft-campuses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.site-footer .ft-campus { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.1); transition: background .25s ease, transform .25s ease, border-color .25s ease; }
.site-footer .ft-campus:hover { background: rgba(95,207,223,.16); border-color: rgba(95,207,223,.5); transform: translateY(-3px); }
.site-footer .ft-campus strong { color: #fff; font-size: 1.1rem; }
.site-footer .ft-campus span { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: rgba(255,255,255,.75); }
.site-footer .ft-campus svg { width: 14px; height: 14px; color: #7fe3d8; flex: none; }

/* main grid */
.site-footer .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 48px; align-items: start; }
.site-footer .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .95rem; }
.site-footer .footer-links a { position: relative; display: inline-block; transition: color .2s ease, transform .2s ease; }
.site-footer .footer-links a:hover { transform: translateX(4px); }
.site-footer .footer-brand .brand { display: inline-block; line-height: 0; }
.site-footer .footer-logo { height: 38px; width: auto; display: block; }
.site-footer .footer-brand p { max-width: 36ch; font-size: .95rem; line-height: 1.65; margin: 20px 0 0; }
.site-footer .ft-news { margin-top: 22px; max-width: 360px; }
.site-footer .ft-news label { display: block; margin-bottom: 8px; color: #fff; font-weight: 700; font-size: .88rem; }
.site-footer .ft-news > div { display: flex; align-items: center; padding: 5px 5px 5px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); transition: border-color .2s ease, background .2s ease; }
.site-footer .ft-news > div:focus-within { border-color: #5fcfdf; background: rgba(255,255,255,.12); }
.site-footer .ft-news input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: .92rem; padding: 8px 0; }
.site-footer .ft-news input::placeholder { color: rgba(255,255,255,.5); }
.site-footer .ft-news button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #5fcfdf; color: #003D63; transition: transform .2s ease, background .2s ease; }
.site-footer .ft-news button:hover { background: #7fe3d8; transform: translateX(2px); }
.site-footer .ft-news button svg { width: 18px; height: 18px; }
.site-footer .social { display: flex; gap: 10px; margin-top: 22px; }
.site-footer .social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.site-footer .social a:hover { background: rgba(95,207,223,.95); border-color: transparent; color: #003D63; transform: translateY(-3px); }
.site-footer .social svg { width: 20px; height: 20px; }
.site-footer .ft-contact { display: grid; gap: 14px; }
.site-footer .ft-contact h4 { margin-bottom: 4px; }
.site-footer .ft-line { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; line-height: 1.45; }
.site-footer .ft-line svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #7fe3d8; }

/* staff row + bottom */
.site-footer .ft-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
.site-footer .ft-staff span { color: rgba(255,255,255,.5); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; margin-right: 6px; }
.site-footer .ft-staff a { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.site-footer .ft-staff a:hover { border-color: rgba(95,207,223,.6); color: #fff; }
.site-footer .footer-bottom { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .84rem; color: rgba(255,255,255,.55); }
.site-footer .ft-bottom__links { display: inline-flex; align-items: center; gap: 18px; }
.site-footer .ft-top { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.8); font: inherit; font-size: .82rem; cursor: pointer; transition: background .2s ease, color .2s ease; }
.site-footer .ft-top:hover { background: rgba(255,255,255,.1); color: #fff; }
.site-footer .ft-top svg { width: 14px; height: 14px; transition: transform .2s ease; }
.site-footer .ft-top:hover svg { transform: translateY(-2px); }

@media (max-width: 1100px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .ft-visit { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-footer { padding-bottom: 24px; }
  .site-footer .ft-visit { padding: 26px 20px; margin-bottom: 40px; }
  .site-footer .ft-campuses { grid-template-columns: 1fr; }
  .site-footer .ft-campus { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .site-footer .footer-brand, .site-footer .ft-contact { grid-column: 1 / -1; }
  .site-footer .footer-brand p { max-width: none; margin-top: 16px; }
  .site-footer .ft-news { max-width: none; }
  .site-footer .footer-logo { height: 34px; }
  .site-footer h4 { font-size: .74rem; margin-bottom: 12px; }
  .site-footer .footer-links { gap: 10px; font-size: .9rem; }
  .site-footer .ft-staff { margin-top: 36px; }
  .site-footer .footer-bottom { font-size: .8rem; }
}
@media (max-width: 360px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .site-footer * { transition: none !important; } }


/* ---------- Compact footer (overrides) ---------- */
.site-footer { padding: 44px 0 18px; }
.site-footer::before { top: -260px; }
.site-footer .footer-grid { grid-template-columns: 1.3fr 1fr 1.4fr 1.1fr; gap: 32px; }
.site-footer h4 { margin-bottom: 12px; font-size: .72rem; }
.site-footer .footer-logo { height: 30px; }
.site-footer .footer-brand p { margin-top: 12px; font-size: .88rem; }
.site-footer .ft-news { margin-top: 14px; }
.site-footer .ft-news label { font-size: .8rem; margin-bottom: 6px; }
.site-footer .ft-news > div { padding: 3px 3px 3px 14px; }
.site-footer .ft-news input { padding: 6px 0; font-size: .86rem; }
.site-footer .ft-news button { width: 32px; height: 32px; }
.site-footer .social { margin-top: 14px; gap: 8px; }
.site-footer .social a { width: 34px; height: 34px; }
.site-footer .social svg { width: 16px; height: 16px; }
.site-footer .footer-links { gap: 7px; font-size: .88rem; }
/* ministries in two short columns */
.site-footer .footer-grid > div:nth-child(3) .footer-links { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.site-footer .ft-contact { gap: 9px; }
.site-footer .ft-line { font-size: .86rem; gap: 10px; }
.site-footer .ft-line svg { width: 16px; height: 16px; }
.site-footer .footer-bottom { margin-top: 28px; padding-top: 14px; font-size: .78rem; gap: 10px 18px; }
.site-footer .ft-staff { margin: 0; padding: 0; border: 0; gap: 4px 12px; font-size: .78rem; }
.site-footer .ft-staff span { font-size: .78rem; letter-spacing: 0; text-transform: none; margin-right: 0; font-weight: 600; color: rgba(255,255,255,.45); }
.site-footer .ft-staff a { padding: 0; border: 0; color: rgba(255,255,255,.6); }
.site-footer .ft-staff a:hover { color: #fff; }
.site-footer .ft-top { padding: 5px 12px; font-size: .78rem; }
@media (max-width: 1100px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .site-footer { padding: 34px 0 16px; }
  .site-footer .footer-grid { gap: 24px 18px; }
  .site-footer .footer-grid > div:nth-child(3) { grid-column: 1 / -1; }
  .site-footer .footer-grid > div:nth-child(3) .footer-links { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .site-footer .footer-grid > div:nth-child(2) .footer-links { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .site-footer .ft-contact { grid-column: 1 / -1; }
  .site-footer .ft-contact { grid-column: auto; }
  .site-footer .footer-bottom { margin-top: 22px; }
}

/* ---------- Dark mode (header/footer only — does NOT touch page :root) ---------- */
@media (prefers-color-scheme: dark) {
  .site-header, .site-footer { --navy: #eaf3f9; --muted: #9fb2c0; --line: #203645; --bg: #0e2130; --bg-soft: #12283a; }
  .site-header { background: rgba(11,26,38,.85); border-bottom-color: #1c3243; }
  .site-header .brand__logo--dark { display: none; }
  .site-header .brand__logo--light { display: block; }
  @media (max-width: 1140px) { .site-header .nav__links { border-bottom-color: #203645; } }
}