/* ===== English Churches — layout: header, nav, sections, footer ===== */

/* --- fixed nav --- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:60;padding:18px 0;transition:background .5s,padding .5s,box-shadow .5s}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink)}
.brand__mark{height:44px;width:auto;display:block;flex:none}
.brand__txt{display:flex;flex-direction:column;font-family:var(--ff-display);text-transform:uppercase;font-weight:600;letter-spacing:.04em;font-size:1.12rem;line-height:1}
.brand small{display:block;font-family:var(--ff-body);font-weight:700;font-size:.56rem;letter-spacing:.24em;color:var(--gold-ink);margin-top:4px}
.nav__links{display:none;gap:34px;align-items:center}
.nav__links a{font-family:var(--ff-body);font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;color:var(--ink);position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav--solid{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);padding:12px 0;box-shadow:0 1px 0 var(--line)}
/* burger */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;align-items:flex-end}
.burger span{display:block;width:28px;height:2px;background:var(--ink);transition:transform .4s,opacity .3s}
.nav--open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav--open .burger span:nth-child(2){opacity:0}
.nav--open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* when the dark overlay is open, header marks go light so the close X + brand stay visible */
.nav--open{background:transparent!important;box-shadow:none!important}
.nav--open .burger span{background:var(--cream)}
.nav--open .brand__txt{color:var(--cream)}
.nav--open .brand small{color:var(--gold-lite)}

/* overlay menu */
.menu{position:fixed;inset:0;z-index:55;background:var(--dark);color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:34px;padding:calc(var(--gut) + 78px) var(--gut) calc(var(--gut) + 20px);clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1);visibility:hidden;overflow-y:auto}
.nav--open ~ .menu,.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu nav{display:flex;flex-direction:column;align-items:flex-start}
.menu nav a{display:block;width:auto;font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.9rem,9vw,3.6rem);color:var(--cream);line-height:1.12;padding:7px 0;transition:color .3s,transform .4s}
.menu nav a:hover,.menu nav a:focus-visible{color:var(--gold-lite);transform:translateX(12px)}
.menu__meta{display:flex;flex-direction:column;gap:10px;font-size:.9rem;letter-spacing:.04em;color:var(--dark-soft);border-top:1px solid var(--line-dark);padding-top:24px}
.menu__meta a{font-family:var(--ff-body);font-size:.95rem;text-transform:none;color:var(--dark-soft)}
.menu__meta a:hover{color:var(--cream)}

/* --- sections --- */
.section{padding-block:var(--sp)}
.section--cream{background:var(--cream)}
.section--flush{padding-block:0}
.section-head{display:flex;flex-direction:column;gap:18px;max-width:44ch;margin-bottom:clamp(34px,5vw,64px)}
.grid{display:grid;gap:clamp(28px,4vw,56px)}

/* --- footer --- */
.footer{background:var(--dark);color:var(--cream);position:relative;overflow:hidden;padding-top:var(--sp)}
.footer__top{display:grid;gap:44px;padding-bottom:64px;border-bottom:1px solid var(--line-dark)}
.footer__lede h2{color:var(--cream);font-size:clamp(2rem,6vw,4rem)}
.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.footer__col h3{font-family:var(--ff-body);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold-lite);margin-bottom:16px}
.footer__col a,.footer__col p{display:block;color:var(--dark-soft);font-size:.95rem;line-height:1.9;transition:color .3s}
.footer__col a:hover{color:var(--cream)}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;align-items:center;padding:28px 0;font-size:.78rem;color:var(--dark-soft);letter-spacing:.04em}
.footer__legal nav{display:flex;flex-wrap:wrap;gap:22px}


@media (min-width:900px){
  .nav__links{display:flex}
  .burger{display:none}
  .footer__top{grid-template-columns:1.1fr 1.3fr;gap:60px;align-items:end}
  .footer__cols{grid-template-columns:repeat(4,1fr)}
}