/* ---------------------------------------------------------------------------
   Par La Foi - component styles.
   theme.json owns the palette, type scale and spacing scale. This file owns
   layout and components that theme.json cannot express.
   --------------------------------------------------------------------------- */

/* Keyboard users need this before anything else. */
.skip-link:focus{
  position:fixed; top:1rem; left:1rem; z-index:999;
  background:var(--wp--preset--color--navy); color:#fff;
  padding:.75rem 1rem; border-radius:.5rem;
}
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--wp--preset--color--gold);
  outline-offset:2px;
}

/* --- Header ------------------------------------------------------------- */
.pf-header{ position:sticky; top:0; z-index:100; }
.pf-header .wp-block-site-title a{
  color:#fff; text-decoration:none;
}
.pf-header .wp-block-site-title a:hover{ color:var(--wp--preset--color--gold-light); }

/* Navigation inherits nothing useful from the group, so state it explicitly.
   Without this the links render dark-on-navy and are effectively invisible. */
.pf-nav a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  padding:.5rem .75rem;
  border-radius:.4rem;
  transition:color .2s ease, background-color .2s ease;
}
.pf-nav a:hover,
.pf-nav a:focus-visible{
  color:var(--wp--preset--color--gold-light);
  background:rgba(255,255,255,.06);
}
.pf-nav .current-menu-item > a,
.pf-nav [aria-current="page"]{
  color:#fff;
  box-shadow:inset 0 -2px 0 var(--wp--preset--color--gold);
}

/* --- Service times ------------------------------------------------------ */
/* A definition list in spirit: day, name, time. Grid keeps the times aligned
   in a column instead of butting up against the name. */
.pf-services{ display:flex; flex-direction:column; gap:.6rem; }
.pf-service{
  display:grid;
  grid-template-columns:6.5rem 1fr auto;
  gap:.35rem 1rem;
  align-items:baseline;
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:var(--wp--preset--font-size--sm);
}
.pf-service:last-child{ border-bottom:0; padding-bottom:0; }
.pf-service__day{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--gold);
}
.pf-service__time{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  opacity:.9;
}
@media (max-width:34rem){
  .pf-service{ grid-template-columns:1fr auto; }
  .pf-service__day{ grid-column:1 / -1; }
}

/* --- Contact ------------------------------------------------------------ */
.pf-contact{ font-style:normal; display:flex; flex-direction:column; gap:.6rem; }
.pf-contact__line{ margin:0; font-size:var(--wp--preset--font-size--sm); }
.pf-footer .pf-contact a{ color:var(--wp--preset--color--gold-light); }

/* --- Footer ------------------------------------------------------------- */
.pf-footer__head{ margin:0 0 .75rem; }
.pf-footer__legal{
  margin-top:var(--wp--preset--spacing--40);
  padding-top:var(--wp--preset--spacing--30);
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.55);
}

/* --- Grids and cards ---------------------------------------------------- */
.pf-grid{ display:grid; gap:var(--wp--preset--spacing--30); }
.pf-grid--3{ grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.pf-grid--4{ grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }

.pf-card{
  display:flex; flex-direction:column; gap:.6rem;
  padding:var(--wp--preset--spacing--30);
  background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--rule);
  border-radius:.75rem;
  text-decoration:none;
  color:inherit;
  transition:border-color .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .pf-card:hover{ border-color:var(--wp--preset--color--gold); transform:translateY(-2px); }
}
.pf-card__title{ margin:0; font-size:var(--wp--preset--font-size--lg); }
.pf-card__body{ margin:0; color:var(--wp--preset--color--muted); font-size:var(--wp--preset--font-size--sm); }
.pf-card__more{
  margin-top:auto;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}
@media (prefers-reduced-motion:reduce){
  .pf-card{ transition:none; }
  .pf-card:hover{ transform:none; }
}

/* --- Beliefs ------------------------------------------------------------ */
.pf-beliefs{ display:grid; gap:var(--wp--preset--spacing--30); grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); }
.pf-belief{
  padding-left:var(--wp--preset--spacing--30);
  border-left:3px solid var(--wp--preset--color--gold);
}
.pf-belief__title{ margin:0 0 .5rem; font-size:var(--wp--preset--font-size--lg); }
.pf-belief__body{ margin:0 0 .6rem; color:var(--wp--preset--color--muted); font-size:var(--wp--preset--font-size--sm); }
.pf-belief__ref{
  margin:0;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}

/* --- Pastors ------------------------------------------------------------ */
.pf-pastor{ display:flex; flex-direction:column; gap:.5rem; }
.pf-pastor__photo{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:.75rem; background:var(--wp--preset--color--rule);
}
.pf-pastor__name{ margin:.5rem 0 0; font-size:var(--wp--preset--font-size--md); }
.pf-pastor__role{
  margin:0;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}
.pf-pastor__bio{ margin:0; font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--muted); }

/* --- Prose -------------------------------------------------------------- */
.pf-prose > p{ margin:0 0 1.1em; }
.pf-prose > p:last-child{ margin-bottom:0; }

.pf-eyebrow{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}

/* Wide content scrolls in its own box; the page body never scrolls sideways. */
.pf-scroll-x{ overflow-x:auto; }

/* Core styles .wp-block-navigation-item__content at (0,2,0), which outranks a
   bare `.pf-nav a`. Match the real class so the links are not left inheriting
   body ink onto the navy header. */
.pf-nav .wp-block-navigation-item__content{
  color:rgba(255,255,255,.78);
  text-decoration:none;
}
.pf-nav .wp-block-navigation-item__content:hover,
.pf-nav .wp-block-navigation-item__content:focus-visible{
  color:var(--wp--preset--color--gold-light);
}
.pf-nav .current-menu-item .wp-block-navigation-item__content,
.pf-nav .wp-block-navigation-item__content[aria-current="page"]{
  color:#fff;
}

/* --- Events ------------------------------------------------------------- */
.pf-events{ display:grid; gap:var(--wp--preset--spacing--30); grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.pf-event{
  padding:var(--wp--preset--spacing--30);
  background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--rule);
  border-radius:.75rem;
}
.pf-event__when{
  margin:0 0 .4rem;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}
.pf-event__title{ margin:0 0 .35rem; font-size:var(--wp--preset--font-size--md); }
.pf-event__where{ margin:0; font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--muted); }
.pf-events__empty{ color:var(--wp--preset--color--muted); }

/* --- Move a Car form ---------------------------------------------------- */
.pf-mc{ display:flex; flex-direction:column; gap:var(--wp--preset--spacing--30); max-width:38rem; }
.pf-mc__photos{ display:grid; gap:var(--wp--preset--spacing--30); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.pf-mc__field{ display:flex; flex-direction:column; gap:.35rem; }
.pf-mc__label{ font-weight:600; font-size:var(--wp--preset--font-size--sm); }
.pf-mc__hint{ margin:0; font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--muted); }

.pf-mc__drop{
  position:relative; height:11rem; width:100%;
  display:flex; align-items:flex-end; justify-content:center;
  border:2px dashed var(--wp--preset--color--rule);
  border-radius:.75rem;
  background:var(--wp--preset--color--white) center/cover no-repeat;
  cursor:pointer; overflow:hidden;
  transition:border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .pf-mc__drop:hover{ border-color:var(--wp--preset--color--gold); }
}
.pf-mc__drop-label{
  width:100%; padding:.55rem;
  font-size:var(--wp--preset--font-size--xs);
  color:var(--wp--preset--color--muted);
}
.pf-mc__drop.is-set .pf-mc__drop-label{
  background:rgba(26,35,50,.82); color:#fff;
}

.pf-mc__input{
  /* width:100% plus padding overflowed the viewport by 17px on a phone; these
     inputs never inherited a global border-box. */
  box-sizing:border-box;
  width:100%; padding:.65rem .8rem;
  font:inherit; font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--rule);
  border-radius:.5rem;
}
.pf-mc__err{ margin:0; font-size:var(--wp--preset--font-size--xs); color:#A8202A; }
.pf-mc__status{ margin:0; font-size:var(--wp--preset--font-size--sm); }
.pf-mc__status.is-ok{ color:#1F6B3B; }
.pf-mc__status.is-err{ color:#A8202A; }
.pf-mc__submit{ align-self:flex-start; cursor:pointer; border:0; }
.pf-mc__submit[disabled]{ opacity:.6; cursor:progress; }

/* --- Hero --------------------------------------------------------------- */
.pf-hero .pf-eyebrow{ color:var(--wp--preset--color--gold); }

/* --- Post list ---------------------------------------------------------- */
.pf-postlist > li{ padding-bottom:var(--wp--preset--spacing--30); border-bottom:1px solid var(--wp--preset--color--rule); }
.pf-postlist > li:last-child{ border-bottom:0; }

.pf-hero__lede{ max-width:46ch; color:rgba(255,255,255,.88); }

/* ===========================================================================
   Section rhythm
   The old site ran eight identical centred sections at py-16 md:py-24. These
   bands differ in ground and weight so the page has anchors.
   =========================================================================== */
.pf-band--sand{ background:var(--wp--preset--color--sand); }
.pf-band--white{ background:var(--wp--preset--color--white); }
.pf-band--dark .pf-eyebrow{ color:var(--wp--preset--color--gold); }

/* Eyebrow sits tight above its heading rather than floating as a paragraph. */
.pf-band .pf-eyebrow,
.pf-hero .pf-eyebrow,
.pf-pagehead .pf-eyebrow{ margin-bottom:.35rem; }
.pf-band .pf-eyebrow + h2{ margin-top:0; }

/* --- Hero --------------------------------------------------------------- */
.pf-hero h1{ max-width:16ch; }
.pf-hero .wp-block-buttons{ margin-top:var(--wp--preset--spacing--30); }
/* Outline button needs stating on navy or it inherits an unreadable border. */
.pf-hero .is-style-outline .wp-block-button__link,
.pf-band--dark .is-style-outline .wp-block-button__link{
  color:#fff; border:1px solid rgba(255,255,255,.45); background:transparent;
}
.pf-hero .is-style-outline .wp-block-button__link:hover,
.pf-band--dark .is-style-outline .wp-block-button__link:hover{
  border-color:var(--wp--preset--color--gold); color:var(--wp--preset--color--gold-light);
}

/* --- Page header -------------------------------------------------------- */
.pf-pagehead h1{ margin-top:0; }
.pf-pagehead .pf-eyebrow{ color:var(--wp--preset--color--gold); }

/* --- Asymmetric split --------------------------------------------------- */
/* The one off-centre section. Heading hangs left, prose runs right. */
.pf-split{ gap:var(--wp--preset--spacing--40); align-items:start; }
.pf-split h2{ margin-top:0; }
@media (max-width:781px){
  .pf-split{ gap:var(--wp--preset--spacing--30); }
}

/* --- Plan your visit ---------------------------------------------------- */
.pf-visit{ gap:var(--wp--preset--spacing--40); align-items:start; }
.pf-map{
  border-radius:.75rem; overflow:hidden;
  border:1px solid var(--wp--preset--color--rule);
  line-height:0;
}
.pf-map iframe{ display:block; width:100%; border:0; }

/* --- Video embeds ------------------------------------------------------- */
.pf-embed{
  position:relative; aspect-ratio:16/9;
  border-radius:.75rem; overflow:hidden;
  background:#000;
}
.pf-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pf-embed__caption{
  margin:.7rem 0 0;
  font-size:var(--wp--preset--font-size--sm);
  opacity:.8;
}
.pf-embed__empty{ color:inherit; opacity:.8; }
.pf-band--dark .pf-embed__empty a{ color:var(--wp--preset--color--gold-light); }

/* --- Sermon cards ------------------------------------------------------- */
.pf-sermon{
  display:flex; flex-direction:column; gap:.5rem;
  text-decoration:none; color:inherit;
}
.pf-sermon__thumb{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:.6rem; background:var(--wp--preset--color--rule);
}
.pf-sermon__title{ margin:0; font-size:var(--wp--preset--font-size--md); }
.pf-sermon__date{ margin:0; font-size:var(--wp--preset--font-size--xs); color:var(--wp--preset--color--muted); }

/* ===========================================================================
   Registered block styles
   =========================================================================== */
.wp-block-group.is-style-pf-card{
  background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--rule);
  border-radius:.75rem;
  padding:var(--wp--preset--spacing--30);
}
.wp-block-group.is-style-pf-bordered{
  border-left:3px solid var(--wp--preset--color--gold);
  padding-left:var(--wp--preset--spacing--30);
}
.wp-block-image.is-style-pf-portrait img{
  border-radius:50%; aspect-ratio:1; object-fit:cover;
  box-shadow:0 0 0 4px rgba(212,160,23,.3);
}
.wp-block-separator.is-style-pf-eyebrow{
  width:3.5rem; height:3px; margin-left:0;
  border:0; border-radius:2px;
  background:var(--wp--preset--color--gold);
  opacity:1;
}
.wp-block-list.is-style-pf-checklist{ list-style:none; padding-left:0; }
.wp-block-list.is-style-pf-checklist li{
  position:relative; padding-left:1.6rem; margin-bottom:.5rem;
}
.wp-block-list.is-style-pf-checklist li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--wp--preset--color--gold);
}

/* --- Brand lockup ------------------------------------------------------- */
.pf-brand{ gap:.7rem; }
.pf-lockup{ display:flex; flex-direction:column; gap:0; line-height:1.05; }
.pf-lockup__name{
  margin:0;
  font-size:var(--wp--preset--font-size--md);
  font-weight:700; letter-spacing:.04em;
}
.pf-lockup__name a{ color:#fff; text-decoration:none; }
.pf-lockup__name a:hover{ color:var(--wp--preset--color--gold-light); }
.pf-lockup__gold{ color:var(--wp--preset--color--gold); }
.pf-lockup__sub{
  margin:0;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.18em; text-transform:uppercase;
  /* 62% white on navy = 5.7:1, above AA for this size. */
  color:rgba(255,255,255,.62);
}
@media (max-width:480px){ .pf-lockup__sub{ display:none; } }
.pf-header .wp-block-site-logo img{ border-radius:0; }

/* WordPress's constrained layout sets `margin-left:auto !important` on every
   child, so any max-width element silently centres itself. Specificity cannot
   beat !important - only !important can. This is why the hero H1 sat indented
   while the eyebrow hugged the left edge. */
/* The hero's text sits in an inner group with a DEFAULT layout. WordPress only
   applies `margin-left:auto !important` inside a CONSTRAINED layout, so a plain
   default layout lets max-width behave normally and stay left-aligned - no
   !important arms race, and the hero keeps the same gutter as every section. */
/* Match the 78rem band container exactly, so the hero's left edge lines up
   with every section heading below it. */
/* .pf-hero is a flex container, so this item sized to its CONTENT (736px) and
   the auto margins then centred it 256px right of every section heading.
   width:100% makes it fill first, then clamp to the 78rem band width. */
.pf-hero__inner{ width:100%; max-width:78rem; margin-inline:auto; }
/* Measure is set on the TEXT, inside the default layout, where max-width does
   not trigger auto-centring. */
.pf-hero__inner > .pf-eyebrow,
.pf-hero__inner > p{ max-width:46rem; }
.pf-hero__inner > *{ margin-block:0; }
.pf-hero__inner > * + *{ margin-block-start:var(--wp--preset--spacing--30); }

.pf-map__link{ margin:.6rem 0 0; font-size:var(--wp--preset--font-size--sm); }
.pf-footer__links{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.pf-footer__links a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:var(--wp--preset--font-size--sm); }
.pf-footer__links a:hover{ color:var(--wp--preset--color--gold-light); text-decoration:underline; }

/* ===========================================================================
   Hero with video
   =========================================================================== */
.pf-hero{
  position:relative; isolation:isolate;
  overflow:hidden;
  min-height:min(82vh, 44rem);
  display:flex; align-items:center;
  padding-block:var(--wp--preset--spacing--60);
}
.pf-hero__video,
.pf-hero__scrim{
  max-width:none !important;
  margin:0 !important;
}
.pf-hero__video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
}
/* Heavy, directional scrim. The footage is only 854x480 upscaled, so it needs
   real cover - at this strength the softness reads as atmosphere. */
.pf-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(20,27,38,.94) 0%, rgba(20,27,38,.86) 42%, rgba(26,35,50,.62) 100%),
    linear-gradient(180deg, rgba(26,35,50,.35) 0%, rgba(26,35,50,.75) 100%);
}
@media (prefers-reduced-motion:reduce){
  /* Hiding the video used to leave bare navy, because the POSTER is painted by
     the video element. Fall back to the same frame as a static background. */
  .pf-hero__video{ display:none; }
  .pf-hero{
    background-image:var(--pf-hero-poster);
    background-size:cover;
    background-position:center;
  }
}
.pf-hero__inner{ position:relative; z-index:1; }
.pf-hero h1{ letter-spacing:-.025em; }

/* Service times in the hero: the single most useful thing a first-time
   visitor needs, above the fold. */
.pf-hero__times{
  list-style:none; margin:var(--wp--preset--spacing--30) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
}
.pf-hero__times li{
  font-size:var(--wp--preset--font-size--xs);
  padding:.45rem .75rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:2rem;
  /* Was rgba(255,255,255,.06) + backdrop-filter:blur(3px). The backdrop here is
     an autoplaying video, so the blur forced a GPU readback every frame for as
     long as the hero was on screen - the banned never-exiting loop, relocated
     to the compositor. Measured cost of removing it: max channel delta 8/255
     on 0.03% of pixels (the chip edges), mean 0.18/255. Navy at 55% is also a
     firmer, more legible chip than 6% white over a moving image. */
  background:rgba(20,27,38,.55);
}
.pf-hero__times span{
  color:var(--wp--preset--color--gold);
  text-transform:uppercase; letter-spacing:.1em;
  margin-right:.35rem;
}

/* ===========================================================================
   The gold rule - the signature device, standardised on ONE variant
   =========================================================================== */
.pf-eyebrow--rule{
  display:flex; align-items:center; gap:.7rem;
}
.pf-eyebrow--rule::before{
  content:""; flex:0 0 2.25rem; height:2px; border-radius:2px;
  background:var(--wp--preset--color--gold);
}
.pf-band--dark .pf-eyebrow--rule,
.pf-hero .pf-eyebrow--rule{ color:var(--wp--preset--color--gold); }

/* ===========================================================================
   Scripture band
   =========================================================================== */
.pf-verse{ position:relative; overflow:hidden; }
/* Oversized gold monogram as texture - at 8% it reads, unlike the old site's
   3% blur blobs which were below perceptual threshold. */
.pf-verse::after{
  content:"✝"; position:absolute; right:-1.5rem; top:50%;
  transform:translateY(-50%);
  font-family:var(--wp--preset--font-family--display);
  font-size:22rem; line-height:1;
  color:var(--wp--preset--color--gold);
  opacity:.08; pointer-events:none;
}
.pf-verse__quote{
  margin:0; border:0; padding:0;
  max-width:34ch; position:relative; z-index:1;
}
.pf-verse__quote > p:first-child{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--xxl);
  line-height:1.18; font-style:italic;
  margin:0 0 .6rem;
}
.pf-verse__en{
  margin:0 0 1rem;
  font-size:var(--wp--preset--font-size--md);
  color:rgba(255,255,255,.72);
}
.pf-verse__quote cite{
  font-style:normal;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--gold);
}

/* ===========================================================================
   Leaders
   =========================================================================== */
.pf-leaders{
  display:grid; gap:var(--wp--preset--spacing--30);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin-top:var(--wp--preset--spacing--40);
}
.pf-leader{ margin:0; text-align:center; }
.pf-leader__photo{
  width:100%; max-width:11rem; height:auto; aspect-ratio:1;
  object-fit:cover; border-radius:50%;
  box-shadow:0 0 0 4px rgba(212,160,23,.32);
  transition:box-shadow .25s ease, transform .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .pf-leader:hover .pf-leader__photo{
    box-shadow:0 0 0 5px rgba(212,160,23,.7);
    transform:translateY(-3px);
  }
}
.pf-leader figcaption{ display:block; margin-top:.85rem; }
.pf-leader__name{
  display:block;
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--md);
  color:var(--wp--preset--color--navy);
}
.pf-leader__role{
  display:block; margin-top:.15rem;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}
@media (prefers-reduced-motion:reduce){
  .pf-leader__photo{ transition:none; }
  .pf-leader:hover .pf-leader__photo{ transform:none; }
}

/* ===========================================================================
   Richer ministry cards - a gold top rule and a real hover, instead of a
   plain white box with a border
   =========================================================================== */
.pf-card{ position:relative; overflow:hidden; }
.pf-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--wp--preset--color--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .pf-card:hover::before{ transform:scaleX(1); }
  }
.pf-card__title{ letter-spacing:-.01em; }
.pf-card__more::after{
  content:"→"; margin-left:.4rem;
  display:inline-block; transition:transform .25s ease;
}
@media (prefers-reduced-motion:reduce){
  .pf-card::before,.pf-card__more::after{ transition:none; }
}

/* Section headings get a touch more room to breathe. */
.pf-band h2{ margin-bottom:var(--wp--preset--spacing--30); }

/* Off-screen layout skipping, ONLY where nothing is revealed inside.
   `content-visibility:auto` skips style computation for the subtree, which
   fights a child-based reveal: .pf-grid--3 and .pf-leaders animate their
   children, so they are deliberately excluded. `auto` (not a bare length) makes
   the browser remember the last rendered size so the scrollbar does not jump. */
.pf-events{
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}

/* WordPress's flow layout puts a 24px block-start margin on MAIN itself (not on
   its first child, which is where I first looked), leaving a sand strip between
   the sticky header and the hero on every page. */
main.wp-block-group{ margin-block-start:0; }

/* ===========================================================================
   Editorial pass — the layout language, not just its execution
   =========================================================================== */

/* --- Hero: display type at real scale ----------------------------------- */
.pf-hero{ min-height:min(92vh, 52rem); }
.pf-hero__title{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(3rem, 7.2vw, 6.5rem);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0 0 var(--wp--preset--spacing--30);
  max-width:14ch;
}
/* The second line in italic serif is the whole typographic idea: one voice
   saying two things, rather than a single flat block of caps. */
.pf-hero__title em{
  font-style:italic;
  color:var(--wp--preset--color--gold-light);
}
.pf-hero__lede{ font-size:var(--wp--preset--font-size--lg); max-width:34ch; }

/* --- The overlapping visit card ----------------------------------------- */
/* Breaking the boundary between two sections is the single move that stops a
   page reading as a stack of bands. */
.pf-visitcard-wrap{
  position:relative; z-index:5;
  margin-top:clamp(-5.5rem, -7vw, -3rem);
  margin-bottom:var(--wp--preset--spacing--50);
}
.pf-visitcard{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  background:var(--wp--preset--color--white);
  border-radius:1rem;
  box-shadow:0 24px 60px -24px rgba(10,14,22,.45), 0 2px 8px rgba(10,14,22,.08);
  overflow:hidden;
}
.pf-visitcard__col{
  display:flex; flex-direction:column; gap:.3rem;
  padding:clamp(1.4rem, 2.6vw, 2.1rem);
  border-right:1px solid var(--wp--preset--color--rule);
}
.pf-visitcard__col:last-child{ border-right:0; }
@media (max-width:47rem){
  .pf-visitcard__col{ border-right:0; border-bottom:1px solid var(--wp--preset--color--rule); }
  .pf-visitcard__col:last-child{ border-bottom:0; }
}
.pf-visitcard__label{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}
.pf-visitcard__big{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  line-height:1; letter-spacing:-.02em;
  color:var(--wp--preset--color--navy);
  font-weight:600;
}
.pf-visitcard__addr{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--lg);
  line-height:1.15; color:var(--wp--preset--color--navy);
  font-weight:600;
}
.pf-visitcard__sub{
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--muted);
}

/* One shared "more" affordance, always visible - never opacity-0-until-hover,
   which never appears at all on a touch device. */
.pf-more{
  margin-top:auto; padding-top:.6rem;
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
  text-decoration:none;
}
.pf-more::after{ content:"→"; margin-left:.4rem; display:inline-block; transition:transform .25s ease; }

/* --- Ministries mosaic --------------------------------------------------- */
.pf-mosaic{
  display:grid; gap:1px;
  grid-template-columns:repeat(3, 1fr);
  background:var(--wp--preset--color--rule);
  border:1px solid var(--wp--preset--color--rule);
  border-radius:1rem; overflow:hidden;
  margin-top:var(--wp--preset--spacing--40);
}
.pf-tile{
  display:flex; flex-direction:column; gap:.5rem;
  padding:clamp(1.5rem, 2.4vw, 2.2rem);
  background:var(--wp--preset--color--white);
  color:inherit; text-decoration:none;
  min-height:13rem;
  transition:background-color .25s ease;
}
/* The feature tile: two columns, darker, with the copy at a larger size. */
.pf-tile--feature{
  grid-column:span 2;
  grid-row:span 2;          /* 4 cells + 5 tiles = 9 = a full 3x3, no holes */
  justify-content:flex-end;
  background:var(--wp--preset--color--navy);
  color:#fff;
}
.pf-tile--feature .pf-tile__title{ color:#fff; font-size:var(--wp--preset--font-size--xl); }
.pf-tile--feature .pf-tile__body{ color:rgba(255,255,255,.78); font-size:var(--wp--preset--font-size--base); }
.pf-tile--feature .pf-tile__idx,
.pf-tile--feature .pf-more{ color:var(--wp--preset--color--gold); }
.pf-tile__idx{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--gold-ink);
  font-variant-numeric:tabular-nums;
}
.pf-tile__title{ margin:0; font-size:var(--wp--preset--font-size--lg); letter-spacing:-.01em; }
.pf-tile__body{ margin:0; color:var(--wp--preset--color--muted); font-size:var(--wp--preset--font-size--sm); }
@media (hover:hover) and (pointer:fine){
  .pf-tile:hover{ background:var(--wp--preset--color--sand); }
  .pf-tile--feature:hover{ background:var(--wp--preset--color--navy-light); }
  .pf-tile:hover .pf-more::after{ transform:translateX(4px); }
}
@media (max-width:60rem){
  .pf-mosaic{ grid-template-columns:repeat(2, 1fr); }
  .pf-tile--feature{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:38rem){
  .pf-mosaic{ grid-template-columns:1fr; }
  .pf-tile--feature{ grid-column:span 1; grid-row:auto; }
}
@media (prefers-reduced-motion:reduce){
  .pf-tile,.pf-more::after{ transition:none; }
}

/* --- Story: an oversized numeral as the page's typographic anchor -------- */
.pf-story__grid{
  display:grid; gap:clamp(1.5rem, 5vw, 4rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  align-items:start;
}
@media (max-width:52rem){ .pf-story__grid{ grid-template-columns:1fr; } }
.pf-story__stat{ display:flex; flex-direction:column; }
.pf-story__num{
  font-family:var(--wp--preset--font-family--display);
  font-size:clamp(6rem, 15vw, 13rem);
  line-height:.82; letter-spacing:-.05em;
  color:var(--wp--preset--color--navy);
  font-weight:600;
}
.pf-story__unit{
  margin-top:.6rem;
  font-size:var(--wp--preset--font-size--sm);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
  line-height:1.5;
}
.pf-story__body{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.pf-story__head{
  margin:0;
  font-size:clamp(1.6rem, 2.9vw, 2.4rem);
  line-height:1.16; letter-spacing:-.015em;
  max-width:24ch;
}
.pf-story__body p{ margin:0; max-width:52ch; color:var(--wp--preset--color--muted); }

/* --- Next steps ---------------------------------------------------------- */
.pf-steps__head{
  margin:.2rem 0 var(--wp--preset--spacing--40);
  font-size:clamp(1.7rem, 3.4vw, 2.75rem);
  line-height:1.12; letter-spacing:-.02em;
  max-width:20ch;
}
.pf-steps__grid{
  display:grid; gap:var(--wp--preset--spacing--30);
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
}
.pf-step{
  display:flex; flex-direction:column; gap:.55rem;
  padding:var(--wp--preset--spacing--30) 0 0;
  border-top:2px solid var(--wp--preset--color--navy);
  color:inherit; text-decoration:none;
  transition:border-color .25s ease;
}
.pf-step__n{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--lg);
  color:var(--wp--preset--color--gold);
  font-variant-numeric:tabular-nums; line-height:1;
}
.pf-step__t{ margin:0; font-size:var(--wp--preset--font-size--lg); letter-spacing:-.01em; max-width:18ch; }
.pf-step__b{ margin:0; font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--muted); }
@media (hover:hover) and (pointer:fine){
  .pf-step:hover{ border-color:var(--wp--preset--color--gold); }
  .pf-step:hover .pf-more::after{ transform:translateX(4px); }
}
@media (prefers-reduced-motion:reduce){ .pf-step{ transition:none; } }

/* Raw elements inside a wp:html block are direct children of the constrained
   group, so a max-width on them silently centres the element. Overriding the
   margin pushes content to the viewport edge instead, out of line with every
   other section. The fix used throughout this theme is a WRAPPER: one full-width
   constrained child, with the measure set on ITS children, where max-width
   behaves normally. */
.pf-inner{ width:100%; }
.pf-inner > *{ margin-inline-start:0; }

/* ===========================================================================
   Pastors — horizontal records, not a wall of two-column prose
   =========================================================================== */
.pf-pastors{ display:flex; flex-direction:column; margin-top:var(--wp--preset--spacing--40); }
.pf-pastorrow{
  display:grid;
  grid-template-columns:minmax(0,16rem) minmax(0,1fr);
  gap:clamp(1.25rem, 3vw, 2.75rem);
  align-items:start;
  padding:var(--wp--preset--spacing--40) 0;
  border-top:1px solid var(--wp--preset--color--rule);
}
.pf-pastorrow:first-child{ border-top:2px solid var(--wp--preset--color--navy); }
@media (max-width:44rem){
  .pf-pastorrow{ grid-template-columns:1fr; gap:1rem; }
  .pf-pastorrow__media{ max-width:12rem; }
}
.pf-pastorrow__photo{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top center;
  border-radius:.75rem; background:var(--wp--preset--color--rule);
}
.pf-pastorrow__body{ display:flex; flex-direction:column; gap:.4rem; }
.pf-pastorrow__idx{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--gold-ink);
  font-variant-numeric:tabular-nums;
}
.pf-pastorrow__name{
  margin:0; font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:-.015em; line-height:1.1;
}
.pf-pastorrow__role{
  margin:0; font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}
.pf-pastorrow__bio{
  margin:.5rem 0 0; max-width:56ch;
  color:var(--wp--preset--color--muted);
  font-size:var(--wp--preset--font-size--base);
}

/* ===========================================================================
   Beliefs — a numbered creed
   =========================================================================== */
.pf-creed{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  margin-top:var(--wp--preset--spacing--40);
  border-top:2px solid var(--wp--preset--color--navy);
}
.pf-creed__item{
  display:grid; grid-template-columns:2.75rem 1fr; gap:.75rem;
  padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
  border-bottom:1px solid var(--wp--preset--color--rule);
}
.pf-creed__n{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--lg);
  color:var(--wp--preset--color--gold);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.pf-creed__body{ display:flex; flex-direction:column; gap:.35rem; }
.pf-creed__title{ margin:0; font-size:var(--wp--preset--font-size--lg); letter-spacing:-.01em; }
.pf-creed__text{ margin:0; color:var(--wp--preset--color--muted); font-size:var(--wp--preset--font-size--sm); }
.pf-creed__ref{
  margin:.15rem 0 0; font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}

/* ===========================================================================
   Contact
   =========================================================================== */
.pf-contact__head{
  margin:.2rem 0 var(--wp--preset--spacing--40);
  font-size:clamp(1.8rem,3.6vw,3rem);
  line-height:1.1; letter-spacing:-.02em; max-width:18ch;
}
.pf-contact__grid{
  display:grid; gap:var(--wp--preset--spacing--40);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:stretch;
}
@media (max-width:52rem){ .pf-contact__grid{ grid-template-columns:1fr; } }
.pf-contact__map{
  border-radius:1rem; overflow:hidden; line-height:0;
  border:1px solid var(--wp--preset--color--rule);
  box-shadow:0 18px 44px -22px rgba(10,14,22,.35);
  aspect-ratio:4/3;
}
.pf-contact__map iframe{ display:block; width:100%; height:100%; border:0; }
@media (max-width:52rem){ .pf-contact__map{ aspect-ratio:3/2; } }
.pf-contact__panel{ display:flex; flex-direction:column; }
.pf-contact__row{
  display:flex; flex-direction:column; gap:.3rem;
  padding:var(--wp--preset--spacing--30) 0;
  border-bottom:1px solid var(--wp--preset--color--rule);
}
.pf-contact__row:first-child{ border-top:2px solid var(--wp--preset--color--navy); }
.pf-contact__k{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--gold-ink);
}
.pf-contact__v{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--lg);
  line-height:1.25; color:var(--wp--preset--color--navy); font-weight:600;
}
.pf-contact__v--plain{
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--sm);
  font-weight:400; color:var(--wp--preset--color--muted);
}
.pf-contact__v a{ color:inherit; }

/* Submenus need stating on navy or core renders them light-on-light. */
.pf-nav .wp-block-navigation__submenu-container{
  background:var(--wp--preset--color--navy-light);
  border:1px solid rgba(255,255,255,.12);
  border-radius:.6rem; padding:.35rem;
  box-shadow:0 18px 40px -18px rgba(10,14,22,.7);
}
.pf-nav .wp-block-navigation__submenu-container a{ color:rgba(255,255,255,.82); border-radius:.4rem; }
.pf-nav .wp-block-navigation__submenu-container a:hover{
  color:var(--wp--preset--color--gold-light); background:rgba(255,255,255,.07);
}

/* ===========================================================================
   Service times: a band, not a box
   The hard navy rectangle read as an inserted panel. Two changes: it now runs
   edge to edge like every other section, and the rows carry the structure
   instead of a container border.
   =========================================================================== */
.pf-band--dark,
.pf-verse{ position:relative; }

/* The seam softener is INSIDE the band. An earlier version used
   `transform:scaleY(-1)` with a top origin, which flipped the gradient above the
   element and hazed over the bottom of the section before it - visible right
   across the contact map. Keep it contained. */
.pf-band--dark::before,
.pf-verse::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* Rows: full-width hairlines, roomier rhythm, times in a quieter weight. */
.pf-band--dark .pf-services,
.pf-visitcard + * .pf-services{ gap:0; }
.pf-band--dark .pf-service{
  padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:var(--wp--preset--font-size--base);
  align-items:center;
}
.pf-band--dark .pf-service:first-child{ border-top:1px solid rgba(255,255,255,.09); }
.pf-band--dark .pf-service:last-child{ border-bottom:1px solid rgba(255,255,255,.09); }
.pf-band--dark .pf-service__day{
  font-size:var(--wp--preset--font-size--xs);
  color:var(--wp--preset--color--gold);
  opacity:.9;
}
.pf-band--dark .pf-service__time{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--lg);
  opacity:1; letter-spacing:-.01em;
}
/* The soonest service reads first without a badge or a box. */
.pf-band--dark .pf-service:nth-child(2) .pf-service__time{
  color:var(--wp--preset--color--gold-light);
}
/* ===========================================================================
   Mobile menu

   Core's overlay right-aligns every link against a ragged edge, flattens all 18
   entries to one weight, and inherits the desktop submenu card -- border, radius
   and shadow -- so each group renders as a panel floating at its own offset.
   Measured on a real 390x844 device: 24x24 toggle, 25-40px rows, 16 distinct
   left edges.

   SPECIFICITY NOTE. Every rule below is prefixed with the full
   `.wp-block-navigation__responsive-container.is-menu-open` rather than the
   shorter `.is-menu-open`. Core's own overlay rules are three-class selectors,
   so a three-class override ties and then loses on source order -- silently, and
   only for the properties core happens to set. Two passes were lost to that.
   =========================================================================== */

/* 24x24 is the WCAG 2.5.8 floor, not a thumb. Grow the hit area, not the icon,
   and pull the margin back so the optical edge stays where it was.

   MUST stay inside this media query. Core hides the toggle above 600px with
   `.wp-block-navigation__responsive-container-open:not(.always-shown){display:none}`,
   which is (0,2,0) -- exactly the weight of `.pf-nav .…-open`. An unscoped
   `display:flex` here ties and wins on source order, and the hamburger then
   appears on desktop beside the full menu. */
@media (max-width:599.98px){
  .pf-nav .wp-block-navigation__responsive-container-open{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-right:-.55rem;
  }
  .pf-nav .wp-block-navigation__responsive-container-open svg{ width:26px; height:26px; }
}

.pf-nav .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--wp--preset--color--navy);
  padding:0;
  overscroll-behavior:contain;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
  max-width:none;
}
/* Core scrolls the CONTAINER (`.is-menu-open{overflow:auto}`), not the content,
   so an absolutely-positioned close button scrolls off with the list. On a menu
   taller than the screen that strands the reader. Fixed, not absolute. */
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  position:fixed;
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  top:max(.5rem, env(safe-area-inset-top)); right:.6rem;
  color:#fff; z-index:9;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{
  width:26px; height:26px;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover{
  color:var(--wp--preset--color--gold-light);
}

.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  align-items:stretch;
  padding:calc(52px + env(safe-area-inset-top)) 0 calc(1.5rem + env(safe-area-inset-bottom));
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items:stretch; gap:0; width:100%;
}
/* Each <li> is itself a flex column carrying the same flex-end, so stretching
   only the <ul> leaves every link shrink-wrapped against the right edge. */
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  align-items:stretch;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{
  width:100%; border-top:1px solid rgba(255,255,255,.10);
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child{
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Top-level rows: the display face, and a target you can actually hit. */
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
  display:flex; align-items:center;
  min-height:58px;
  padding:.4rem clamp(1.25rem, 6vw, 2rem);
  font-family:var(--wp--preset--font-family--display);
  font-size:1.3rem; font-weight:600; letter-spacing:-.01em;
  color:#fff; text-decoration:none;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content{
  color:var(--wp--preset--color--gold-light);
}

/* The submenu is a section of this list, not a card floating above it. The gold
   rule carries the indent so the children read as belonging to the row above. */
/* Core's own overlay rule for this element is
     .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay))
     .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container
   -- (0,5,0), since :where() contributes nothing -- and it hard-sets
   `border:none` and `padding-left/right:2rem`. Mirroring its shape with .pf-nav
   in front reaches (0,6,0), which is what it takes to place the gold rule. */
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container{
  position:static; width:auto; min-width:0;
  background:transparent; border-radius:0; box-shadow:none;
  opacity:1; visibility:visible;
  padding:.15rem 0 .6rem;
  margin:0 0 0 clamp(1.35rem, 6vw, 2.1rem);
  border:0;
  border-left:2px solid rgba(212,160,23,.5);
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{
  width:100%;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:flex; align-items:center;
  min-height:46px; padding:.15rem 1rem;
  font-family:var(--wp--preset--font-family--body);
  font-size:1rem; font-weight:400; letter-spacing:0; line-height:1.3;
  color:rgba(255,255,255,.72);
  border-radius:0; background:none;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{
  color:var(--wp--preset--color--gold-light); background:none;
}

/* The parent of an always-open submenu is a heading for it, so drop the chevron
   that implies a control the overlay does not have. */
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon{
  display:none;
}

/* The overlay covers the header, so the church loses its own name while the menu
   is open. Decorative only -- the wordmark is on every page behind it -- so a
   pseudo-element is honest here, and being on the fixed container rather than the
   scrolling content keeps it in place while the list moves under it. */
.pf-nav .wp-block-navigation__responsive-container.is-menu-open::before{
  content:"PAR LA FOI";
  /* Core gives every nav link `z-index:1` inside a positioned <li>, so the bar
     needs to sit clearly above that whole band, and the close button above it. */
  position:fixed; z-index:8;
  top:0; left:0; right:0;
  height:calc(52px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 0 0 clamp(1.25rem, 6vw, 2rem);
  display:flex; align-items:center;
  font-family:var(--wp--preset--font-family--body);
  font-size:.78rem; font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.45);
  /* Opaque, and the full width of the overlay: the container is the scroller, so
     a bare fixed label lets the list slide underneath and collide with it. */
  background:var(--wp--preset--color--navy);
  border-bottom:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   Mobile menu, accordion

   Collapsed submenus, opened by a chevron beside the parent. The parent link
   still navigates to its own page, so "Ministries" and "Ministries > Worship"
   are both one tap.

   All of it is gated on `html.pf-acc`, which nav.js adds only after every
   toggle is wired. No script, no class, no collapsing -- the menu falls back to
   the fully expanded list rather than to unreachable links.
   --------------------------------------------------------------------------- */

/* An overlay control only; the desktop dropdown keeps core's own chevron. */
.pf-acc-toggle{ display:none; }

.pf-nav .wp-block-navigation__responsive-container.is-menu-open .pf-acc-toggle{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:56px; align-self:stretch; min-height:58px;
  margin:0; padding:0;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.55);
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .pf-acc-toggle svg{
  width:20px; height:20px;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .pf-nav .wp-block-navigation__responsive-container.is-menu-open .pf-acc-toggle svg{ transition:none; }
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .pf-acc-toggle[aria-expanded="true"]{
  color:var(--wp--preset--color--gold);
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open .pf-acc-toggle[aria-expanded="true"] svg{
  transform:rotate(180deg);
}

/* The link and its chevron share a row; the submenu takes the next one. Core
   sets column direction on every item at (0,5,0), hence the six classes. */
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container > .has-child{
  flex-direction:row; flex-wrap:wrap; align-items:center;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content{
  flex:1 1 auto;
}
.pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container{
  flex:0 0 100%; width:100%;
}

/* The collapse itself. Gated on pf-acc so a JS failure cannot hide links. */
html.pf-acc .pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child > .wp-block-navigation__submenu-container{
  display:none;
}
html.pf-acc .pf-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child.pf-open > .wp-block-navigation__submenu-container{
  display:flex;
}

/* ---------------------------------------------------------------------------
   Move a Car: photo guides

   These are GOOD / NOT GOOD comparison diagrams, not sample photos, so they
   carry instructional text that has to stay legible. An earlier version ghosted
   them behind the upload control at 45% opacity and greyscaled - which is right
   for a "your photo goes here" placeholder and completely wrong for a diagram.

   Full opacity, full column width, above the control it explains.
   --------------------------------------------------------------------------- */
.pf-mc__guide{
  display:block; width:100%;
  border:1px solid var(--wp--preset--color--rule);
  border-radius:.5rem;
  margin:0 0 .1rem;
  /* Both guides are padded to 1400x875, but pin the ratio here too: two
     diagrams of different heights push their capture boxes to different
     vertical positions, and the columns visibly fall out of step. contain +
     the diagrams' own cream means a future image of any shape letterboxes
     invisibly instead of shifting the layout. */
  aspect-ratio:1400/875;
  height:auto;
  object-fit:contain;
  background:#FCF7F0;
}

/* Colour and make sit side by side - two short dropdowns, one line. */
.pf-mc__pair{
  display:grid; gap:var(--wp--preset--spacing--20);
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
}

/* Two optional fields are already labelled as such, so one sentence covers the
   rest without hanging an asterisk off five separate labels. */
.pf-mc__req{
  margin:0 0 .35rem;
  font-size:var(--wp--preset--font-size--xs);
  color:var(--wp--preset--color--muted);
}

/* A red sentence under a control is easy to skim past; a red control is not. */
.pf-mc__input[aria-invalid="true"],
.pf-mc__drop[aria-invalid="true"]{
  border-color:#A8202A;
}
.pf-mc__input[aria-invalid="true"]{
  background:#FDF6F6;
}
.pf-mc__drop:focus-visible,
.pf-mc__input:focus-visible{
  outline:2px solid var(--wp--preset--color--gold);
  outline-offset:2px;
}

/* --- Blog listing thumbnails --------------------------------------------
   The post list is a reading column, so a full-width featured image at
   78rem would bury the title it belongs to. Cap the width and let the
   16/9 aspect-ratio from the block handle the crop. */
.pf-postlist > li .wp-block-post-featured-image{
  max-width:22rem; margin:0 0 .75rem;
}
.pf-postlist > li .wp-block-post-featured-image img{
  border-radius:.6rem; display:block; width:100%; height:100%; object-fit:cover;
}
/* The single-post image spans the content column, above the article body. */
.wp-block-post-featured-image img{ border-radius:.75rem; }