/* ==========================================================================
   style.css — the furniture every page carries: header, menu, footer, buttons.
   The sections a page is built from live in css/blocks.css instead.
   Order: buttons · header · mobile menu · page header · footer
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.btn{
  min-height:54px;
  padding-inline:clamp(22px,3vw,30px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1.5px solid transparent;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),
             border-color var(--t),color var(--t);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);opacity:.85}

.btn--coral{background:var(--coral);color:var(--white)}
.btn--coral:hover{color:var(--white);box-shadow:0 16px 34px rgba(236,114,90,.36)}

.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{color:var(--white);box-shadow:0 16px 32px rgba(23,44,77,.26)}

.btn--white{background:var(--white);color:var(--navy)}
.btn--white:hover{color:var(--navy);box-shadow:0 16px 34px rgba(0,0,0,.24)}

/* Give. White on aqua everywhere it appears — header, footer and menu — and
   it stays white on hover. The 800 weight is what keeps it legible. */
.btn--aqua{background:var(--aqua);color:var(--white)}
.btn--aqua:hover{color:var(--white);box-shadow:0 14px 30px rgba(102,186,186,.34)}

.btn--ghost{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.32);
  color:var(--white);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{background:rgba(255,255,255,.2);color:var(--white)}

.btn-row{
  margin-top:clamp(26px,3.4vw,34px);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* --- Site header -------------------------------------------------------
   An overlay, not a bar: the angled white slab hangs off the top-left of
   whatever dark ground the page opens with, and the nav sits in white type
   at the far right of it. Because the header takes no space in the flow,
   every page's opening band clears it with --header-clear instead.

   Non-sticky on purpose — it scrolls away with the page. */
.site-header{
  position:absolute;
  z-index:100;
  top:0;
  left:0;
  right:0;
}

/* The slab. Anchored to the viewport edge, not the content column. */
.site-header__slab{
  position:absolute;
  left:0;
  top:var(--slab-top);
  /* Flex, not block: it stops the inline-flex lockup picking up baseline
     leading, which would push the slab past --header-clear. */
  display:flex;
  padding:var(--slab-pad-y) var(--slab-pad-r) var(--slab-pad-y) var(--slab-pad-l);
  background:var(--white);
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  box-shadow:20px 18px 42px rgba(11,26,44,.14);
}
/* Over a photograph the slab needs the heavier shadow to hold its edge. */
.site-header--on-photo .site-header__slab{box-shadow:20px 18px 42px rgba(11,26,44,.22)}

/* Brand lockup — shared by the header, the menu panel and the footer. */
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--slab-gap);
  min-width:0;
  color:var(--navy);
  transition:opacity var(--t);
}
.brand:hover{color:var(--navy);opacity:.78}
.brand:active{opacity:.6}
.brand__mark{
  width:var(--slab-logo);
  height:var(--slab-logo);
  object-fit:contain;
  flex:0 0 auto;
}
.brand__text{display:grid;gap:6px;line-height:1;width:max-content}
.brand__name{
  font-size:clamp(26px,2.58vw,37px);
  line-height:.82;
  letter-spacing:.025em;
  text-transform:uppercase;
  font-weight:900;
  white-space:nowrap;
}
/* "NAZARENE" justified across the exact width of "Lewisburg". */
.brand__sub{
  display:flex;
  justify-content:space-between;
  font-size:clamp(10.4px,1.02vw,14.6px);
  line-height:1;
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
}

/* Nav row. Pushed to the far right, clear of the slab. */
.site-header__bar{
  display:flex;
  justify-content:flex-end;
  padding:clamp(40px,4.03vw,58px) clamp(28px,5.14vw,74px) 0 0;
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.23vw,32px)}
.nav__link{
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  color:rgba(255,255,255,.78);
  transition:color var(--t);
}
.nav__link:hover{color:var(--white)}
.nav__link[aria-current="page"]{
  padding-bottom:6px;
  border-bottom:2px solid var(--aqua);
  color:var(--white);
}
.nav__divider{
  width:1px;
  height:26px;
  background:rgba(255,255,255,.24);
  flex:0 0 auto;
}
/* Give and Plan a Visit read as one pair, so they get their own tighter gap. */
.nav__actions{display:flex;align-items:center;gap:10px}
.nav .btn{min-height:48px;padding-inline:26px;font-size:12.5px}

/* Mobile menu button — two bare rules, no tile. */
.nav-toggle{
  display:none;
  width:48px;
  height:48px;
  padding:0 2px;
  border:0;
  background:transparent;
  cursor:pointer;
  align-content:center;
  gap:9px;
}
.nav-toggle span{
  display:block;
  height:2px;
  border-radius:99px;
  background:var(--white);
}
.nav-toggle:active{opacity:.6}

@media (max-width:1023px){
  .site-header__slab{clip-path:polygon(0 0,100% 0,86% 100%,0 100%);box-shadow:12px 10px 26px rgba(11,26,44,.24)}
  .site-header--on-photo .site-header__slab{box-shadow:12px 10px 26px rgba(11,26,44,.24)}
  .site-header__bar{padding:22px 20px 0 0}
  .brand__text{gap:5px}
  .brand__name{font-size:24px}
  .brand__sub{font-size:9.6px}
  .nav{display:none}
  .nav-toggle{display:grid}
}

/* --- Mobile menu -------------------------------------------------------
   A panel that drops from the top and ends where its content ends. The page
   stays visible and dimmed behind it; this is not a full-screen takeover. */
.nav-panel{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}
.nav-panel[data-open="true"]{display:block}

/* Dimming the page behind. Not focusable: the close button and Escape are
   the keyboard routes out. */
.nav-panel__scrim{
  position:absolute;
  inset:0;
  background:rgba(11,26,44,.55);
  cursor:pointer;
}

.nav-panel__sheet{
  position:relative;
  background:linear-gradient(168deg,var(--navy-deep),var(--navy) 70%);
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  box-shadow:0 26px 60px rgba(11,26,44,.55);
}

/* The slab and lockup repeat at the top of the panel, unchanged. */
.nav-panel__head{display:flex;align-items:flex-start;justify-content:space-between}
.nav-panel__slab{
  display:flex;
  padding:var(--slab-pad-y) var(--slab-pad-r) var(--slab-pad-y) var(--slab-pad-l);
  background:var(--white);
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
}
.nav-panel__close{
  flex:0 0 auto;
  margin:18px 18px 0 0;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.2);
  color:var(--white);
  font-size:21px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background var(--t);
}
.nav-panel__close:hover{background:rgba(255,255,255,.3)}
.nav-panel__close:active{opacity:.7}

.nav-panel__links{padding:22px 22px 0;display:grid;gap:2px}
.nav-panel__link{
  padding-block:9px;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--white);
  transition:color var(--t);
}
.nav-panel__link:hover{color:var(--aqua)}
.nav-panel__link[aria-current="page"]{color:var(--aqua)}

.nav-panel__actions{
  padding:22px 22px 26px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.nav-panel__actions .btn{min-height:54px;padding-inline:12px;font-size:12.5px}

/* --- Page header (interior pages) --------------------------------------
   The band the header overlays. Each variant carries its own modifier in
   css/blocks.css — the headers are meant to differ from one another — but
   they all clear the slab and they are all dark, because the nav above them
   is set in white. */
.page-header{
  padding-block:calc(var(--header-clear) + clamp(28px,3.6vw,52px)) clamp(40px,5vw,64px);
  background:linear-gradient(158deg,var(--navy-deep),var(--navy) 48%,var(--teal));
  color:var(--white);
}
.page-header__inner{width:var(--wrap);margin-inline:auto;max-width:none}
.page-header .lead{margin-top:20px;color:rgba(255,255,255,.72)}
.page-header .eyebrow{color:var(--aqua)}
@media (max-width:1023px){
  .page-header{background:linear-gradient(160deg,var(--navy-deep),var(--navy) 50%,var(--teal))}
}

/* --- Site footer -------------------------------------------------------
   The lockup and one row of links on the left, social + the church's
   contact details on the right, then the credit rail underneath.
   Collapses to a centred single column below 860px. */
.site-footer{
  background:var(--navy);
  color:var(--white);
  padding:clamp(34px,4.6vw,56px) 0 18px;
}
.site-footer a{color:rgba(255,255,255,.82)}
.site-footer a:hover{color:var(--aqua)}
.site-footer .brand{color:var(--white);justify-self:start;gap:14px}
.site-footer .brand:hover{color:var(--white)}
.site-footer .brand__mark{width:clamp(48px,6.4vw,64px);height:clamp(48px,6.4vw,64px)}
.site-footer .brand__text{gap:5px}
.site-footer .brand__name{font-size:clamp(21px,3.6vw,31px)}
.site-footer .brand__sub{font-size:clamp(8.2px,1.46vw,12.4px)}

.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,3.4vw,44px);
  align-items:start;
}

.footer__brand{display:grid;gap:clamp(18px,2.4vw,26px);min-width:0}

.footer__nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(12px,2vw,24px);
}
.footer__nav a{
  font-size:14.5px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--white);
  transition:color var(--t),opacity var(--t),transform var(--t);
}
.footer__nav a:hover{color:var(--aqua);transform:translateY(-1px)}
.footer__nav a:active{color:var(--aqua);opacity:.6;transform:none}
.footer__nav .btn{min-height:44px;padding-inline:20px;font-size:13px}
.footer__nav .btn:hover{color:var(--white)}

.footer__aside{display:grid;gap:13px;justify-items:end;text-align:right;min-width:0}

/* Facebook: the solid circle with the f knocked out of it. */
/* However many accounts the church keeps. */
.footer__socials{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer__social{
  display:inline-flex;
  transition:transform var(--t),opacity var(--t);
}
.footer__social svg{width:26px;height:26px;display:block}
.footer__social:hover{transform:translateY(-2px);opacity:.82}
.footer__social:active{transform:scale(.94)}

/* Address / phone / email — all three are tappable. */
.footer__contact{
  font-style:normal;          /* <address> defaults to italic */
  display:grid;
  gap:5px;
  justify-items:end;
  font-size:13.5px;
  line-height:1.6;
  font-weight:600;
}
.footer__contact a{
  display:inline-block;
  color:rgba(255,255,255,.72);
  transition:color var(--t),transform var(--t);
}
.footer__contact a:hover{color:var(--aqua);transform:translateY(-1px)}
.footer__contact a:active{color:var(--aqua);opacity:.6;transform:none}

/* --- Footer responsive ------------------------------------------------- */
@media (max-width:860px){
  /* Centred single column: lockup, links, Give, then the Facebook mark
     sitting above the details rather than below them — the extra 12px on top
     of the grid gap is what makes the contact block read as its own section. */
  .site-footer{padding:34px 22px 20px}
  .site-footer > .wrap{width:100%}
  .footer__top{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
  .footer__brand{justify-items:center;gap:22px}
  .site-footer .brand{flex-direction:column;gap:10px;justify-self:center;text-align:center}
  .footer__nav{justify-content:center;gap:16px 20px}
  .footer__nav a{font-size:13.5px}
  .footer__nav .btn{order:1;min-height:48px;padding-inline:24px}
  .footer__aside{
    width:100%;
    justify-items:center;
    text-align:center;
    gap:13px;
  }
  .footer__social{margin-top:12px}
  .footer__contact{justify-items:center;gap:6px}
  /* The rail itself belongs to the credit kit; only the legal line's size is
     ours to set, so it stays short instead of stacking tall. Direct children
     only — the year inside the first line is a span of its own. */
  .site-footer .hdc-credit-bar__legal{font-size:10px;line-height:1.5}
  .site-footer .hdc-credit-bar__legal > span{display:block}
}