/*
Theme Name: Destiny
Theme URI: https://example.com/destiny
Author: Solidus Systems
Author URI: mailto:dgitong99@gmail.com
Description: A lightweight, page-builder-free church theme for The House of Destiny, inspired by the Zegen layout. Every element is editable from the WordPress Customizer and simple custom post types (Sermons, Events, Ministries, Team, Testimonials). Built for non-technical teams: no Elementor, no heavy plugins, auto-seeds demo content on activation. Palette: charcoal grey + soft peach.
Version: 1.31.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sanctuary
Tags: church, religion, nonprofit, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, theme-options, translation-ready, two-columns, right-sidebar
*/

/* ==========================================================================
   0. Design Tokens
   Colors are also injected live from the Customizer (see inc/dynamic-css.php).
   The values here are sensible fallbacks.
   ========================================================================== */
:root{
  --peach:#e6a57e;
  --peach-dark:#d4895f;
  --peach-soft:#fbeee5;
  --peach-tint:#faf4ef;
  --blue:#1f8aa5;         /* secondary accent (from logo) */
  --blue-dark:#15697f;    /* blue hover */
  --blue-soft:#e4f1f5;    /* blue tint */
  --ink:#34373d;          /* charcoal grey - headings */
  --grey:#6c7077;         /* body grey */
  --grey-light:#f4f4f5;   /* section background */
  --line:#e7e7ea;         /* borders */
  --white:#ffffff;
  --footer-bg:#34373d;
  --footer-ink:#b9bcc2;

  --font-display:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-script:'Caveat',cursive;

  --wrap:1200px;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 18px 50px -28px rgba(52,55,61,.45);
  --shadow-sm:0 8px 24px -16px rgba(52,55,61,.4);
  --t:.28s cubic-bezier(.4,0,.2,1);
  /* Brand gradients — teal only (kept subtle for an official look). --grad-card
     is a soft wash for card backgrounds; --grad-brand is the accent for icons. */
  --grad-card:linear-gradient(160deg,#ffffff 0%,var(--blue-soft) 100%);
  --grad-brand:linear-gradient(140deg,var(--blue) 0%,var(--blue-dark) 100%);
}

/* ==========================================================================
   1. Reset / base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--grey);
  line-height:1.75;
  font-size:17px;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--peach-dark);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--ink)}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.18;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.2rem,5vw,3.5rem)}
h2{font-size:clamp(1.9rem,4vw,2.7rem)}
h3{font-size:1.5rem}
h4{font-size:1.2rem}
p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
blockquote{
  margin:1.5em 0;padding:1.2em 1.6em;
  border-left:4px solid var(--peach);
  background:var(--peach-tint);
  font-style:italic;color:var(--ink);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
:focus-visible{outline:3px solid var(--peach);outline-offset:2px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:.7em 1.2em;z-index:9999;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0}

/* ==========================================================================
   2. Layout helpers
   ========================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.section--grey{background:var(--grey-light)}
.section--peach{background:var(--peach-soft)}
.grid{display:grid;gap:30px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.text-center{text-align:center}

/* Section heading block (Zegen-style: script eyebrow + bold heading) */
.heading{margin-bottom:54px}
.heading.text-center{margin-left:auto;margin-right:auto;max-width:680px}
.eyebrow{
  font-family:var(--font-script);
  color:var(--peach-dark);
  font-size:1.6rem;
  line-height:1;
  display:block;
  margin-bottom:.2em;
}
.heading h2{margin:0}
.heading p{margin-top:.8em}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--peach);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;
  letter-spacing:.02em;
  padding:.85em 1.9em;border-radius:50px;border:0;cursor:pointer;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
  box-shadow:0 10px 24px -12px var(--peach);
}
.btn:hover{background:var(--peach-dark);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--light{background:#fff;color:var(--ink);box-shadow:none}
.btn--light:hover{background:var(--ink);color:#fff}

/* ==========================================================================
   3. Header
   ========================================================================== */
.topbar{background:var(--ink);color:#cfd2d8;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  min-height:44px;gap:20px;flex-wrap:wrap}
.topbar a{color:#cfd2d8}
.topbar a:hover{color:var(--peach)}
.topbar-info{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar-info span{display:inline-flex;align-items:center;gap:.45em}
.topbar-social{display:flex;gap:14px;align-items:center}
.topbar-social a{font-size:.95rem}

.site-header{
  background:#fff;position:sticky;top:0;z-index:500;
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t),background-color var(--t),border-color var(--t);
}
/* Inner pages: a clean white bar with a soft shadow once scrolled. */
.site-header:not(.site-header--overlay).is-stuck{box-shadow:0 10px 30px -20px rgba(0,0,0,.35)}

/* Transparent header that overlays the hero on the front page. */
.has-overlay-header .hero{margin-top:-99px}
.site-header--overlay{background:transparent;border-bottom-color:transparent;box-shadow:none}
/* On scroll: a teal highlight stays behind the logo + Home on the LEFT and fades out to the right. */
.site-header--overlay.is-stuck{
  background:linear-gradient(to right,var(--blue-dark) 0%,rgba(31,138,165,.6) 24%,transparent 55%);
  box-shadow:none;border-bottom-color:transparent}
/* White branding on the overlay header in both states (over the hero / over the teal highlight). */
.site-header--overlay .site-title,
.site-header--overlay .site-title a,
.site-header--overlay .main-nav>ul>li>a{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.site-header--overlay .main-nav>ul>li>a:hover{color:var(--peach)}
.site-header--overlay .main-nav .current-menu-item>a{color:#fff}
.site-header--overlay .site-description{color:rgba(255,255,255,.85)}
.site-header--overlay .nav-toggle span{background:#fff}
.header-inner{display:flex;align-items:flex-start;justify-content:space-between;
  min-height:98px;gap:24px}
.header-actions{align-self:center}
/* Logo sits flush at the top; the Home nav sits just beneath it with breathing room. */
.header-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.header-left .site-branding{margin-top:-2px}
.header-left .main-nav>ul{margin-left:-.8em}
.site-branding{display:flex;align-items:center;gap:12px}
.site-branding .custom-logo{max-height:46px;width:auto}
.site-title{font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  color:var(--ink);margin:0;letter-spacing:-.02em}
.site-title a{color:inherit}
.site-description{font-size:.78rem;color:var(--grey);margin:0}

.main-nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center}
.main-nav a{
  font-family:var(--font-display);font-weight:500;color:var(--ink);
  font-size:.98rem;padding:.42em .8em;border-radius:var(--radius-sm);
  display:block;position:relative;
}
.main-nav a:hover{color:var(--peach-dark)}
/* Active page gets a peach pill so it stays legible on any header background. */
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:#fff;background:var(--peach)}
.main-nav .current-menu-item>a:hover,.main-nav .current_page_item>a:hover{color:#fff;background:var(--peach-dark)}
.main-nav li{position:relative}
.main-nav .sub-menu{
  display:block;position:absolute;top:100%;left:0;background:#fff;min-width:220px;
  list-style:none;margin:0;padding:8px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow);border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all var(--t);z-index:600;
}
.main-nav .sub-menu a{display:block;white-space:nowrap}
.main-nav li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.main-nav .sub-menu a{padding:.55em .8em}
.main-nav .sub-menu a:hover{background:var(--peach-soft)}
/* Nested (3rd level) sub-menus fly out to the side */
.main-nav .sub-menu .sub-menu{top:-9px;left:100%;transform:translateX(10px)}
.main-nav .sub-menu li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateX(0)}
/* Dropdown carets so parents are discoverable */
.main-nav .menu-item-has-children>a::after{content:"\25be";font-size:.7em;margin-left:.4em;opacity:.65}
.main-nav .sub-menu .menu-item-has-children>a{display:flex;align-items:center}
.main-nav .sub-menu .menu-item-has-children>a::after{content:"\203a";font-size:1.1em;margin-left:auto;opacity:.6}

.header-actions{display:flex;align-items:center;gap:14px}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);
  transition:var(--t)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   4. Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden}
.hero-slide{position:relative;min-height:78vh;display:flex;align-items:center;
  background-size:cover;background-position:center;color:#fff}
.hero-slide::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(16,18,22,calc(var(--hero-dim,.55) + .15)) 0%,
    rgba(16,18,22,var(--hero-dim,.55)) 60%,
    rgba(16,18,22,calc(var(--hero-dim,.55) - .05)) 100%)}
.hero-content{position:relative;z-index:2;max-width:680px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0}
.hero-video-embed{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-video-embed iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0}
.hero-slide::before{z-index:1}
.hero .eyebrow{color:var(--peach)}
.hero h1{color:#fff;margin:.1em 0 .4em}
.hero p{color:rgba(255,255,255,.9);font-size:1.15rem;max-width:560px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6em}
/* sliding carousel: the active slide moves in from the right, the previous one slides out to the left */
.hero-slides{position:relative;min-height:78vh}
.hero-slide{position:absolute;inset:0;transform:translateX(100%);opacity:0;
  visibility:hidden;transition:none}
.hero-slide.is-active{transform:translateX(0);opacity:1;visibility:visible;z-index:2;
  transition:transform 1.5s cubic-bezier(.45,.05,.3,1),opacity 1.5s ease}
.hero-slide.is-prev{transform:translateX(-100%);opacity:1;visibility:visible;z-index:1;
  transition:transform 1.5s cubic-bezier(.45,.05,.3,1),opacity 1.5s ease}
.hero-slide:only-child{position:relative;transform:none;opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-slide.is-active,.hero-slide.is-prev{transform:none;transition:opacity .5s ease}
}
.hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:5}
.hero-dots button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;
  background:transparent;cursor:pointer;padding:0;transition:var(--t)}
.hero-dots button.is-active{background:var(--peach);border-color:var(--peach)}

/* ==========================================================================
   5. Cards / shared components
   ========================================================================== */
.card{background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);transition:transform var(--t),box-shadow var(--t)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--grey-light);position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card-media img{transform:scale(1.06)}
.card-body{padding:24px}
.card-body h3{margin-bottom:.3em;font-size:1.25rem}
.card-meta{font-size:.85rem;color:var(--peach-dark);font-weight:600;
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:.6em;
  font-family:var(--font-display)}
.card-meta span{display:inline-flex;align-items:center;gap:.4em}
.read-more{font-family:var(--font-display);font-weight:600;font-size:.92rem;
  display:inline-flex;align-items:center;gap:.4em;margin-top:.4em}
.read-more::after{content:"→";transition:transform var(--t)}
.read-more:hover::after{transform:translateX(4px)}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-text .heading{margin-bottom:20px}
.about-media{position:relative}
.about-media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.about-badge{position:absolute;bottom:-24px;right:-24px;background:var(--peach);
  color:#fff;padding:22px 28px;border-radius:var(--radius);text-align:center;
  box-shadow:var(--shadow-sm)}
.about-badge strong{font-family:var(--font-display);font-size:2.2rem;display:block;line-height:1}
.about-list{list-style:none;padding:0;margin:1.2em 0}
.about-list li{padding-left:1.9em;position:relative;margin-bottom:.6em;color:var(--ink)}
.about-list li::before{content:"✦";position:absolute;left:0;color:var(--blue);font-size:.9em}

/* Blue accent hints (secondary colour, drawn from the logo) */
.entry-content a,.prose a,.faith-extra a{color:var(--blue-dark);text-decoration:underline;text-underline-offset:2px}
.entry-content a:hover,.prose a:hover{color:var(--blue)}
.footer a:hover{color:var(--blue)}
.topbar-social a:hover{color:var(--blue)}

/* Service times */
.service-card{background:var(--grad-card);border-radius:var(--radius);padding:34px 28px;
  text-align:center;border:1px solid #c7e1e9;transition:var(--t)}
.service-card:hover{background:var(--ink);color:#fff;transform:translateY(-6px);border-color:var(--ink)}
.service-card:hover h3,.service-card:hover .service-day{color:#fff}
.service-icon{width:62px;height:62px;border-radius:50%;background:var(--grad-brand);
  color:#fff;display:grid;place-items:center;margin:0 auto 18px;
  font-size:1.6rem;transition:var(--t);box-shadow:0 10px 20px -10px var(--blue)}
.service-card:hover .service-icon{background:#fff;color:var(--blue-dark)}
.service-day{font-family:var(--font-display);font-weight:600;color:var(--peach-dark);
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.service-time{font-size:1.05rem;margin-top:.3em}

/* Plan your visit panel */
.visit-panel{margin-top:48px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr}
.visit-intro{background:var(--blue);color:#fff;padding:44px 40px}
.visit-intro .eyebrow{color:rgba(255,255,255,.85)}
.visit-intro h3{color:#fff;font-size:1.7rem;margin:.1em 0 .5em}
.visit-intro p{color:rgba(255,255,255,.92);margin:0 0 1em}
.visit-hours{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);
  font-weight:600;font-size:.92rem}
.visit-image{margin-top:22px;border-radius:var(--radius-sm);overflow:hidden}
.visit-image img{width:100%;height:180px;object-fit:cover;display:block}
.visit-form-wrap{padding:36px 40px}
.visit-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.visit-form .field{margin-bottom:16px}
.visit-form label{display:block;font-family:var(--font-display);font-weight:600;
  font-size:.88rem;margin-bottom:5px;color:var(--ink)}
.visit-form input,.visit-form select,.visit-form textarea{width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;background:#fff}
.visit-form input:focus,.visit-form select:focus,.visit-form textarea:focus{outline:none;
  border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
@media(max-width:820px){
  .visit-panel{grid-template-columns:1fr}
  .visit-fields{grid-template-columns:1fr}
}

/* Announcements — bold, attention-grabbing, but sitting as its own band */
.announcements-section{background:var(--grey-light);color:#fff}
.ann-band{position:relative;overflow:hidden;color:#fff;border-radius:var(--radius);
  padding:52px 48px;background:linear-gradient(135deg,var(--ink),var(--blue-dark));
  box-shadow:var(--shadow)}
.ann-band::before{content:"";position:absolute;top:-60px;right:-40px;width:280px;height:280px;
  border-radius:50%;background:rgba(255,255,255,.05)}
@media(max-width:600px){.ann-band{padding:34px 24px}}
.ann-head{display:flex;align-items:center;gap:20px;margin-bottom:40px;position:relative;z-index:1}
.ann-head h2{color:#fff;margin:0}
.ann-head .eyebrow{color:var(--peach)}
.ann-badge{flex:none;width:60px;height:60px;border-radius:16px;background:var(--peach);color:#fff;
  display:grid;place-items:center;font-size:1.7rem;box-shadow:0 12px 24px -10px rgba(0,0,0,.5)}
.ann-head-link{margin-left:auto;flex:none}
@media(max-width:600px){.ann-head{flex-wrap:wrap;gap:14px}.ann-head-link{margin-left:0;width:100%;justify-content:center}}
.ann-grid{position:relative;z-index:1}
.ann-card{position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform var(--t)}
.ann-card:hover{transform:translateY(-6px)}
.ann-card-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--grey-light)}
.ann-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ann-card:hover .ann-card-media img{transform:scale(1.05)}
.ann-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.ann-card-body h3{margin:.15em 0 .4em;font-size:1.25rem}
.ann-card-body p{color:var(--grey);margin:0 0 1em}
.ann-card-body .read-more{margin-top:auto}
.ann-date{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);
  font-weight:600;font-size:.82rem;color:var(--blue-dark);text-transform:uppercase;letter-spacing:.04em}
.ann-date--single{color:var(--blue-dark);margin-bottom:18px}
.ann-new{position:absolute;top:14px;right:14px;z-index:2;background:var(--peach);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;padding:4px 10px;border-radius:50px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.ann-new::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;
  margin-right:5px;vertical-align:middle;animation:annPulse 1.4s ease-in-out infinite}
@keyframes annPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Mission, Vision & Values */
.mission-section{padding-bottom:44px}
.mission-section + .section--grey{padding-top:52px}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:48px}
.mission-pillar{background:var(--grad-card);border:1px solid #c7e1e9;border-radius:var(--radius);
  padding:36px 32px;position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.mission-pillar:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-4px)}
.mission-pillar-media{margin:-36px -32px 0;overflow:hidden;aspect-ratio:16/8}
.mission-pillar-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mission-pillar:hover .mission-pillar-media img{transform:scale(1.05)}
.mission-pillar-icon{width:54px;height:54px;border-radius:14px;background:var(--grad-brand);
  color:#fff;display:grid;place-items:center;font-size:1.4rem;margin-bottom:18px;
  box-shadow:0 10px 20px -10px var(--blue)}
/* When the card has a cover image, lift the icon to straddle the image edge. */
.mission-pillar-media + .mission-pillar-icon{margin-top:-46px;position:relative;
  width:60px;height:60px;border:3px solid #fff}
.mission-pillar h3{margin-bottom:.4em}
.mission-pillar p{margin:0;color:var(--grey)}
.mission-tagline{margin-top:1em;font-family:var(--font-script);font-size:1.45rem;
  color:var(--peach-dark);line-height:1.2}
.mission-values-title{text-align:center;margin-bottom:30px;font-size:1.5rem}
.value-card{text-align:center;padding:28px 22px;border-radius:var(--radius);
  background:var(--grad-card);border:1px solid #c7e1e9;transition:var(--t)}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--blue)}
.value-icon{width:58px;height:58px;border-radius:50%;background:var(--grad-brand);
  color:#fff;display:grid;place-items:center;margin:0 auto 16px;font-size:1.5rem;
  box-shadow:0 10px 20px -10px var(--blue)}
.value-card h4{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.4em}
.value-card p{margin:0;font-size:.93rem;color:var(--grey)}
@media (max-width:780px){.mission-grid{grid-template-columns:1fr}}

/* Ministries */
.ministry-card{position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:300px;display:flex;align-items:flex-end;color:#fff;
  background-size:cover;background-position:center}
.ministry-card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(40,42,47,.85))}
.ministry-card-body{position:relative;padding:26px;width:100%}
.ministry-card-body h3{color:#fff;margin-bottom:.2em}
.ministry-card-body p{color:rgba(255,255,255,.85);margin:0;font-size:.95rem}

/* Sermon listen / podcast block */
.sermon-listen{background:var(--blue-soft);border-radius:var(--radius);padding:24px 26px;margin:28px 0}
.sermon-listen-title{display:flex;align-items:center;gap:.5em;margin:0 0 14px;font-size:1.15rem;color:var(--blue-dark)}
.sermon-listen-title .icon-play{fill:currentColor}
.sermon-listen .audio-embed,.sermon-listen audio{width:100%}

/* Detail pages (single ministry) — content / gallery separation */
.detail-body{max-width:920px;margin:0 auto}
.detail-cover{border-radius:var(--radius);overflow:hidden;margin-bottom:40px}
.detail-cover img{width:100%;height:auto;display:block}
.detail-section + .detail-section{margin-top:48px;padding-top:44px;border-top:1px solid var(--line)}
.section-head-line{margin:0 0 24px}
.section-head-line h2{display:flex;align-items:center;gap:.55rem;margin:0;font-size:1.6rem}
.section-head-line h2::before{content:"";width:6px;height:1.05em;border-radius:3px;background:var(--blue)}
.section-head-sub{color:var(--grey);margin:.5rem 0 0;padding-left:1.15rem}
.ministry-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.ministry-gallery{grid-template-columns:repeat(3,1fr)}}
.ministry-gallery-item{display:block;border-radius:var(--radius-sm);overflow:hidden;
  aspect-ratio:4/3;background:var(--grey-light);cursor:zoom-in}
.ministry-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ministry-gallery-item:hover img{transform:scale(1.06)}

/* Give page (M-PESA methods) */
.give-intro{margin-bottom:44px}
.give-methods-title{text-align:center;margin-bottom:30px;font-size:1.5rem}
.give-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px;max-width:1040px;margin:0 auto;align-items:start}
.give-card{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--t)}
.give-card:hover{transform:translateY(-4px)}
.give-card-head{background:var(--grad-brand);color:#fff;padding:20px 24px;display:flex;
  align-items:center;gap:14px}
.give-card-head h4{color:#fff;margin:0;font-size:1.15rem}
.give-mpesa-badge{background:#fff;color:var(--blue-dark);font-family:var(--font-display);
  font-weight:700;font-size:.85rem;padding:5px 11px;border-radius:6px;letter-spacing:.03em;flex:none}
.give-numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:1px;background:var(--line)}
.give-number{background:var(--blue-soft);padding:18px 16px;text-align:center}
.give-number-label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--blue-dark);font-weight:600;margin-bottom:5px}
.give-number-value{font-family:var(--font-display);font-weight:700;
  font-size:1.4rem;color:var(--ink);letter-spacing:.02em}
.give-copy{position:relative;display:inline-flex;align-items:center;gap:.5em;background:none;border:0;
  cursor:pointer;padding:2px 4px;border-radius:6px;transition:var(--t);color:var(--ink)}
.give-copy:hover{background:rgba(255,255,255,.6)}
.give-copy-ico{display:inline-flex;position:relative;width:1em;height:1em;color:var(--blue-dark)}
.give-copy-ico .icon{position:absolute;inset:0;width:1em;height:1em;transition:opacity .2s ease,transform .2s ease}
.give-copy-ico .icon-check{opacity:0;transform:scale(.5);color:#1f9d55}
.give-copy.is-copied .give-copy-ico .icon-copy{opacity:0;transform:scale(.5)}
.give-copy.is-copied .give-copy-ico .icon-check{opacity:1;transform:scale(1)}
.give-copy::after{content:"Copied!";position:absolute;margin-top:-2.4em;background:var(--ink);color:#fff;
  font-size:.72rem;font-family:var(--font-body);padding:3px 8px;border-radius:6px;opacity:0;
  transform:translateY(4px);transition:var(--t);pointer-events:none}
.give-copy.is-copied::after{opacity:1;transform:translateY(0)}
.give-steps{margin:0;padding:26px 28px 10px 28px;counter-reset:give}
.give-steps li{list-style:none;position:relative;padding:0 0 16px 40px;color:var(--ink);font-size:.95rem}
.give-steps li::before{counter-increment:give;content:counter(give);position:absolute;left:0;top:-2px;
  width:28px;height:28px;border-radius:50%;background:var(--blue-soft);color:var(--blue-dark);
  font-family:var(--font-display);font-weight:700;display:grid;place-items:center;font-size:.9rem}
.give-steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:28px;bottom:1px;
  width:2px;background:var(--line)}
.give-note{max-width:720px;margin:40px auto 0;color:var(--grey);font-size:.95rem}

/* Locations page */
.branch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:680px){.branch-grid{grid-template-columns:1fr}}
.branch-card{display:flex;gap:20px;align-items:center;background:var(--grad-card);
  border:1px solid #c7e1e9;border-radius:var(--radius);padding:22px 24px;transition:var(--t)}
.branch-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--blue)}
.branch-photo{flex:none;width:88px;height:88px;border-radius:18px;overflow:hidden;
  background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-size:1.8rem;
  box-shadow:0 12px 24px -12px var(--blue)}
.branch-photo img{width:100%;height:100%;object-fit:cover}
.branch-photo .icon{width:1em;height:1em}
.branch-info h3{font-size:1.15rem;margin:0 0 .3em}
.branch-leaders{margin:0;color:var(--grey);font-size:.95rem}
@media(max-width:420px){.branch-card{flex-direction:column;text-align:center}}

/* Life group clickable cards */
.lifegroup-grid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.lifegroup-item{display:flex;align-items:center;gap:.7em;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;transition:var(--t)}
.lifegroup-item:hover{border-color:var(--blue);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.lifegroup-item-icon{flex:none;width:36px;height:36px;border-radius:9px;background:var(--blue-soft);
  color:var(--blue-dark);display:grid;place-items:center}
.lifegroup-item-icon .icon{width:1.1em;height:1.1em}
.lifegroup-item-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.lifegroup-item-body strong{font-family:var(--font-display);color:var(--ink);font-size:1rem}
.lifegroup-item-body small{color:var(--grey);font-size:.82rem}
.lifegroup-item-arrow{flex:none;color:var(--blue);opacity:.5;transition:var(--t)}
.lifegroup-item:hover .lifegroup-item-arrow{opacity:1;transform:translateX(3px)}
.lifegroup-facts{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0 0 30px;
  font-family:var(--font-display);font-weight:600;color:var(--blue-dark)}
.lifegroup-facts span{display:inline-flex;align-items:center;gap:.5em}

/* Destiny Music Studio section */
.studio-grid.has-image{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.studio-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.studio-media img{width:100%;height:100%;object-fit:cover;display:block}
.studio-copy p{color:var(--grey);margin:0}
@media(max-width:760px){.studio-grid.has-image{grid-template-columns:1fr}}

/* Studio audio tracks */
.studio-tracks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.studio-track{display:flex;gap:14px;align-items:center;background:var(--grad-card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-sm)}
.studio-track-icon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--grad-brand);color:#fff}
.studio-track-icon svg{width:18px;height:18px}
.studio-track-body{flex:1;min-width:0}
.studio-track-title{display:block;font-family:var(--font-display);font-weight:600;
  color:var(--ink);margin-bottom:6px}
.studio-track-body .wp-audio-shortcode,.studio-track-body audio{width:100%!important;display:block}

/* Live stream section */
.live-eyebrow{display:inline-flex;align-items:center;gap:.5em;color:#e23b3b}
.live-dot{width:10px;height:10px;border-radius:50%;background:#e23b3b;
  box-shadow:0 0 0 0 rgba(226,59,59,.6);animation:sanctuary-live-pulse 1.8s infinite}
@keyframes sanctuary-live-pulse{0%{box-shadow:0 0 0 0 rgba(226,59,59,.6)}
  70%{box-shadow:0 0 0 12px rgba(226,59,59,0)}100%{box-shadow:0 0 0 0 rgba(226,59,59,0)}}
.live-embed{position:relative;width:100%;max-width:920px;margin:8px auto 0;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000}
.live-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Event registration form spacing on the single event page */
.event-register{margin-top:44px;padding-top:8px;border-top:1px solid var(--line)}
.event-register .heading{margin-bottom:18px}

/* Destiny School teaser */
.school-teaser-inner{border-radius:var(--radius);overflow:hidden;background-size:cover;
  background-position:center;color:#fff;padding:64px 48px;display:flex}
.school-teaser-copy{max-width:560px}
.school-teaser-copy .eyebrow{color:#fff}
.school-teaser-copy h2{color:#fff;margin:.1em 0 .4em}
.school-teaser-copy p{color:rgba(255,255,255,.9);margin-bottom:1.6em}
@media(max-width:600px){.school-teaser-inner{padding:44px 26px}}
.apply-form{max-width:720px}

/* Lightbox */
body.lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(20,21,24,.92);padding:40px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:20px;right:26px;background:none;border:0;color:#fff;
  font-size:2.4rem;line-height:1;cursor:pointer}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);
  border:0;color:#fff;font-size:2.2rem;width:54px;height:54px;border-radius:50%;cursor:pointer;
  transition:background .2s ease}
.lightbox-nav:hover{background:var(--blue)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

/* Sermon cards — caritas-style content card (image, overview, link) */
.card-eyebrow{font-family:var(--font-display);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--blue-dark);margin:0 0 .5em;
  display:flex;flex-wrap:wrap;gap:4px 12px}
.card-eyebrow span{display:inline-flex;align-items:center;gap:.4em}
.card-badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:.4em;
  background:var(--blue);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.8rem;
  padding:5px 11px;border-radius:50px;box-shadow:var(--shadow-sm)}
.card-badge .icon-play{fill:currentColor}
.card-badge--read{background:var(--peach-dark)}
.sermon-card .card-body p{color:var(--grey)}
.sermon-passage{display:inline-flex;align-items:center;gap:.5em;color:var(--blue-dark);
  font-family:var(--font-display);font-weight:600;font-size:.9rem;margin:0 0 .5em}

/* This-week (dominant) events */
.events-week-title{text-align:center;margin:0 0 28px}
.events-week-pill{display:inline-flex;align-items:center;gap:.5em;background:var(--grad-brand);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:1rem;text-transform:uppercase;
  letter-spacing:.08em;padding:8px 20px;border-radius:50px;box-shadow:0 10px 22px -10px var(--blue)}
.events-later-title{text-align:center;font-size:1.2rem;color:var(--grey);margin:48px 0 24px;font-weight:600}
.events-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;
  max-width:1040px;margin:0 auto}
/* One event: keep it a tidy, centred card rather than a full-width block. */
.events-feature-grid--single{grid-template-columns:minmax(0,440px);justify-content:center;max-width:440px}
/* Two events: side by side, medium size. */
.events-feature-grid--two{grid-template-columns:repeat(2,1fr);max-width:760px}
.event-feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform var(--t)}
.event-feature:hover{transform:translateY(-6px)}
.event-feature-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--grey-light)}
.event-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.event-feature:hover .event-feature-media img{transform:scale(1.05)}
/* No featured image: a branded teal panel with a big date, instead of a broken image. */
.event-feature--noimg .event-feature-media{background:var(--grad-brand);display:flex;align-items:center;justify-content:center}
.event-feature--noimg .event-feature-date{position:static;top:auto;left:auto;background:transparent;
  color:#fff;box-shadow:none;padding:0}
.event-feature--noimg .event-feature-date .event-date-m{font-size:1rem;opacity:.9}
.event-feature--noimg .event-feature-date .event-date-d{font-size:2.8rem}
.event-feature-date{position:absolute;top:12px;left:12px;background:#fff;color:var(--blue-dark);
  border-radius:10px;padding:6px 10px;text-align:center;line-height:1;box-shadow:var(--shadow-sm)}
.event-feature-date .event-date-m{display:block;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
.event-feature-date .event-date-d{display:block;font-family:var(--font-display);font-weight:700;font-size:1.35rem}
.event-feature-body{padding:20px 22px;display:flex;flex-direction:column;flex:1}
.event-feature-body h3{font-size:1.2rem;margin:0 0 .4em}
.event-feature-body .event-meta{margin-bottom:.6em}
.event-feature-body p{color:var(--grey);margin:0 0 1em;font-size:.95rem}
.event-feature-body .btn{margin-top:auto;align-self:flex-start}

/* Event rows (informative list) */
.event-list{display:grid;gap:18px;max-width:980px;margin:0 auto}
.event-row{display:flex;align-items:center;gap:24px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 26px;transition:var(--t)}
.event-row:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.event-date{flex:none;width:88px;text-align:center;background:var(--blue-soft);
  color:var(--blue-dark);border-radius:12px;padding:12px 6px;line-height:1}
.event-date-m{display:block;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.event-date-d{display:block;font-family:var(--font-display);font-weight:700;font-size:2rem;margin:2px 0}
.event-date-y{display:block;font-size:.78rem;opacity:.8}
.event-row-body{flex:1 1 auto;min-width:0}
.event-row-body h3{margin:0 0 .35em;font-size:1.3rem}
.event-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--blue-dark);
  font-family:var(--font-display);font-weight:600;margin-bottom:.5em}
.event-meta span{display:inline-flex;align-items:center;gap:.4em}
.event-excerpt{margin:0;color:var(--grey);font-size:.95rem}
.event-row-cta{flex:none}
@media (max-width:720px){
  .event-row{flex-wrap:wrap;gap:16px}
  .event-date{width:64px}
  .event-row-cta{width:100%}
  .event-row-cta .btn{width:100%;text-align:center}
}

/* Statement of Faith */
.faith-intro{max-width:760px;margin:0 auto 48px;text-align:center;font-size:1.2rem;
  color:var(--grey);font-family:var(--font-display)}
.faith-list{max-width:860px;margin:0 auto;display:grid;gap:22px}
.faith-item{display:flex;gap:22px;background:var(--grad-card);border:1px solid #c7e1e9;
  border-radius:var(--radius);padding:30px 32px;transition:var(--t)}
.faith-item:hover{box-shadow:var(--shadow);border-color:var(--blue)}
.faith-num{flex:none;width:48px;height:48px;border-radius:50%;background:var(--grad-brand);
  color:#fff;box-shadow:0 10px 20px -10px var(--blue);display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:1.3rem}
.faith-body h2{margin:.1em 0 .4em;font-size:1.3rem}
.faith-body p{margin:0 0 .5em;color:var(--grey)}
.faith-scripture{display:inline-flex;align-items:center;gap:.5em;color:var(--peach-dark);
  font-family:var(--font-display);font-weight:600;font-size:.92rem}
.faith-extra{max-width:860px;margin:40px auto 0}
@media (max-width:560px){.faith-item{flex-direction:column;gap:14px}}

/* Scripture banner */
.scripture{background:var(--ink);color:#fff;text-align:center;position:relative}
.scripture.has-bg{background-size:cover;background-position:center;background-attachment:fixed}
.scripture.has-bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(21,40,46,.82),rgba(21,40,46,.88))}
.scripture .wrap{max-width:820px;position:relative;z-index:1}
.scripture .eyebrow{color:var(--peach)}
.scripture blockquote{border:0;background:none;font-size:clamp(1.4rem,3vw,2rem);
  font-family:var(--font-display);color:#fff;font-style:normal;line-height:1.4;padding:0}
.scripture cite{color:var(--peach);font-style:normal;font-weight:600;
  font-family:var(--font-display)}

/* Testimonials */
.testimonial-card{background:#fff;border-radius:var(--radius);padding:34px;
  border:1px solid var(--line)}
.testimonial-card .quote-mark{font-family:var(--font-display);font-size:3.5rem;
  color:var(--peach);line-height:.6;height:.4em}
.testimonial-card p{font-style:italic;color:var(--ink)}
.testimonial-author{display:flex;align-items:center;gap:14px;margin-top:18px}
.testimonial-author img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.testimonial-author strong{display:block;font-family:var(--font-display);color:var(--ink)}
.testimonial-author span{font-size:.85rem;color:var(--peach-dark)}

/* Team */
.team-card{text-align:center}
.team-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;
  margin-bottom:18px;position:relative;background:var(--grey-light)}
.team-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.team-card:hover .team-media img{transform:scale(1.05)}
.team-social{position:absolute;inset:auto 0 0 0;background:rgba(52,55,61,.9);
  display:flex;justify-content:center;gap:18px;padding:12px;
  transform:translateY(100%);transition:var(--t)}
.team-card:hover .team-social{transform:translateY(0)}
.team-social a{color:#fff}
.team-card h3{margin-bottom:.1em;font-size:1.25rem}
.team-role{color:var(--peach-dark);font-family:var(--font-display);font-weight:600;
  font-size:.92rem}

/* Donate CTA */
.donate-cta{background:var(--peach);color:#fff;text-align:center;position:relative;overflow:hidden;
  background-image:linear-gradient(120deg,var(--peach),var(--peach-dark) 60%,var(--blue-dark))}
.donate-cta h2{color:#fff}
.donate-cta .eyebrow{color:rgba(255,255,255,.9)}
.donate-cta-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.donate-lead{color:rgba(255,255,255,.92);max-width:620px;margin:0 auto 1.8em}
.donate-cta-glyph{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  font-size:300px;color:rgba(255,255,255,.07);line-height:0;pointer-events:none}
.donate-cta-glyph .icon{width:1em;height:1em;fill:currentColor;stroke:none}
.donate-points{list-style:none;padding:0;margin:0 auto 2em;display:flex;justify-content:center;
  flex-wrap:wrap;gap:14px 30px;max-width:720px}
.donate-points li{display:flex;align-items:center;gap:.6em;font-family:var(--font-display);
  font-weight:600;font-size:1rem}
.donate-point-icon{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;flex:none}
.donate-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
@media(max-width:620px){
  .donate-points{flex-direction:column;align-items:center;gap:14px}
  .donate-cta-glyph{font-size:200px;right:-60px}
}

/* Mobile app teaser */
.app-section{background:var(--ink);color:#fff;overflow:hidden}
.app-section h2{color:#fff}
.app-section .eyebrow{color:var(--peach)}
.app-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.app-copy p{color:rgba(255,255,255,.85);max-width:46ch;margin-bottom:1.8em}

.store-badges{display:flex;gap:14px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:.6em;background:#fff;color:var(--ink);
  border-radius:12px;padding:9px 18px;transition:transform var(--t),box-shadow var(--t);border:1.5px solid transparent}
.store-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--ink)}
.store-badge--apk{background:var(--grad-brand);color:#fff}
.store-badge--apk:hover{color:#fff}
.store-badge--apk .store-badge-icon{color:#fff}
.app-note{margin:1em 0 0;font-size:.85rem;color:rgba(255,255,255,.7)}
.store-badge-icon{font-size:1.5rem;display:grid;place-items:center}
.store-badge-icon .icon{width:1em;height:1em;fill:currentColor;stroke:none}
.store-badge-text{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.store-badge-text small{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.store-badge-text strong{font-family:var(--font-display);font-size:1.05rem;font-weight:600}

.app-visual{display:flex;justify-content:center}
.app-phone{position:relative;width:250px;height:500px;background:#0f1012;border-radius:38px;
  padding:13px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12)}
.app-phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:110px;height:20px;background:#0f1012;border-radius:0 0 14px 14px;z-index:2}
.app-phone-screen{width:100%;height:100%;border-radius:26px;overflow:hidden;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center}
.app-phone-screen img{width:100%;height:100%;object-fit:cover}
.app-phone-fallback{display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;text-align:center;padding:24px}
.app-phone-logo{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:24px;padding:10px}
.app-phone-fallback strong{font-family:var(--font-display);font-size:1.3rem;line-height:1.2}
.app-phone-fallback span{font-size:.85rem;opacity:.85}
@media(max-width:820px){
  .app-grid{grid-template-columns:1fr;text-align:center;gap:40px}
  .app-copy p{margin-inline:auto}
  .store-badges{justify-content:center}
}

/* Footer app teaser */
.footer-app{border-top:1px solid rgba(255,255,255,.1);padding:26px 0}
.footer-app .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-app-text{display:flex;flex-direction:column}
.footer-app-text strong{color:#fff;font-family:var(--font-display);font-size:1.1rem}
.footer-app-text span{font-size:.9rem}
@media(max-width:600px){.footer-app .wrap{justify-content:center;text-align:center}}

/* ==========================================================================
   6. Page header (inner pages)
   ========================================================================== */
.page-hero{background:var(--ink);color:#fff;text-align:center;padding:88px 0;
  position:relative;background-size:cover;background-position:center}
.page-hero.has-bg::before{content:"";position:absolute;inset:0;background:rgba(40,42,47,.7)}
.page-hero .wrap{position:relative}
.page-hero h1{color:#fff;margin:0}
.breadcrumb{margin-top:.6em;font-size:.9rem;color:rgba(255,255,255,.8)}
.breadcrumb a{color:var(--peach)}
.breadcrumb span{margin:0 .4em}

/* ==========================================================================
   7. Content / blog / single
   ========================================================================== */
.content-area{display:grid;grid-template-columns:1fr 320px;gap:50px}
.content-area.no-sidebar{grid-template-columns:1fr;max-width:820px;margin:0 auto}
.post-card .card-body p{color:var(--grey)}
.entry-content{font-size:1.05rem}
.entry-content h2{margin-top:1.4em}
.entry-content img{border-radius:var(--radius-sm);margin:1.5em 0}
.entry-content a{text-decoration:underline}
.post-thumb{border-radius:var(--radius);overflow:hidden;margin-bottom:30px}
.entry-meta{font-size:.9rem;color:var(--peach-dark);font-weight:600;
  font-family:var(--font-display);margin-bottom:.6em;display:flex;gap:16px;flex-wrap:wrap}

.widget{background:var(--grey-light);border-radius:var(--radius);padding:26px;
  margin-bottom:26px}
.widget-title{font-size:1.15rem;margin-bottom:.8em;padding-bottom:.5em;
  border-bottom:2px solid var(--peach)}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{padding:.4em 0;border-bottom:1px solid var(--line)}
.widget li:last-child{border:0}
.widget a{color:var(--ink)}
.widget a:hover{color:var(--peach-dark)}

.search-form{display:flex;gap:8px}
.search-form input[type=search]{flex:1;padding:.7em 1em;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-family:inherit}
.search-form button{padding:.7em 1.1em}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:50px;flex-wrap:wrap}
.pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;
  padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line);
  color:var(--ink);font-family:var(--font-display);font-weight:600}
.pagination .page-numbers.current,.pagination .page-numbers:hover{
  background:var(--peach);color:#fff;border-color:var(--peach)}

/* Sermon meta box */
.sermon-meta-box{background:var(--grey-light);border-radius:var(--radius);
  padding:24px;display:flex;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.sermon-meta-box div{flex:1;min-width:140px}
.sermon-meta-box .label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--peach-dark);font-weight:700;font-family:var(--font-display)}
.sermon-meta-box .value{color:var(--ink);font-weight:500}
.audio-embed,.video-embed{margin:24px 0}
.video-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radius);overflow:hidden}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Event meta */
.event-date-badge{display:inline-flex;flex-direction:column;align-items:center;
  background:var(--peach);color:#fff;border-radius:var(--radius-sm);
  padding:10px 16px;line-height:1;text-align:center;font-family:var(--font-display);
  position:absolute;top:14px;left:14px;z-index:2;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.event-date-badge .day{font-size:1.8rem;font-weight:700}
.event-date-badge .mon{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}

/* ==========================================================================
   8. Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.contact-info-list{list-style:none;padding:0;margin:0}
.contact-info-list li{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
.contact-info-list .ci-icon{width:48px;height:48px;border-radius:50%;
  background:var(--peach-soft);color:var(--peach-dark);display:grid;place-items:center;
  flex-shrink:0;font-size:1.2rem}
.contact-info-list strong{display:block;color:var(--ink);font-family:var(--font-display)}
.contact-form{background:var(--grey-light);padding:36px;border-radius:var(--radius)}
.contact-form .field{margin-bottom:18px}
.contact-form label{display:block;font-family:var(--font-display);font-weight:600;
  color:var(--ink);margin-bottom:.4em;font-size:.92rem}
.contact-form input,.contact-form textarea{width:100%;padding:.85em 1em;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;
  font-size:1rem;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--peach);outline:none}
.contact-form textarea{min-height:140px;resize:vertical}
.form-notice{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:.95rem}
.form-notice.success{background:#e7f6ec;color:#1c7c3c;border:1px solid #b7e3c4}
.form-notice.error{background:#fdecec;color:#c0392b;border:1px solid #f5c0bb}
.map-embed{border-radius:var(--radius);overflow:hidden;margin-top:40px;line-height:0}
.map-embed iframe{width:100%;height:420px;border:0}

/* Post detail extras */
.entry-tags{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.entry-tags a{font-size:.82rem;background:var(--peach-soft);color:var(--peach-dark);
  padding:.35em .9em;border-radius:999px;font-weight:600}
.entry-tags a:hover{background:var(--peach);color:#fff}
.page-links{margin-top:24px;font-family:var(--font-display);font-weight:600}
.post-navigation{margin:50px 0;display:flex;justify-content:space-between;gap:20px}
.post-navigation .nav-links{display:flex;justify-content:space-between;gap:20px;width:100%}
.post-navigation a{font-family:var(--font-display);color:var(--ink)}
.post-navigation a:hover{color:var(--peach-dark)}
.post-navigation span{display:block;font-size:.8rem;color:var(--peach-dark);font-weight:600}
.contact-social{margin-top:28px;display:flex;gap:14px}
.contact-social a{width:42px;height:42px;border-radius:50%;background:var(--peach-soft);
  color:var(--peach-dark);display:grid;place-items:center;transition:var(--t)}
.contact-social a:hover{background:var(--peach);color:#fff}

/* Comments */
.comments-area{margin-top:60px;padding-top:40px;border-top:1px solid var(--line)}
.comments-title{font-size:1.4rem;margin-bottom:24px}
.comment-list{list-style:none;margin:0 0 40px;padding:0}
.comment-list ol.children{list-style:none;margin-left:40px}
.comment-body{padding:20px 0;border-bottom:1px solid var(--line)}
.comment-author{font-family:var(--font-display);font-weight:600}
.comment-author .avatar{border-radius:50%;margin-right:12px;vertical-align:middle}
.comment-metadata{font-size:.82rem;color:var(--grey)}
.comment-respond{background:var(--grey-light);padding:30px;border-radius:var(--radius)}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{width:100%;padding:.8em 1em;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;
  margin-top:.3em;background:#fff}
.comment-form p{margin-bottom:16px}
.comment-form textarea{min-height:130px}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer{background:var(--footer-bg);color:var(--footer-ink)}
.footer-top{padding:72px 0 48px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.site-footer h4{color:#fff;margin-bottom:1em;font-size:1.15rem}
.site-footer a{color:var(--footer-ink)}
.site-footer a:hover{color:var(--peach)}
.footer-about .custom-logo{max-height:64px;width:auto;height:auto;display:block;margin-bottom:22px}
.footer-about p{font-size:.96rem}
.footer-logo{font-family:var(--font-display);font-weight:700;font-size:1.4rem;
  color:#fff;margin-bottom:.5em;display:inline-block}
.footer-menu{list-style:none;padding:0;margin:0}
.footer-menu li{padding:.32em 0}
.footer-contact-list{list-style:none;padding:0;margin:0;font-size:.96rem}
.footer-contact-list li{padding:.32em 0;display:flex;gap:.6em}
.footer-social{display:flex;gap:14px;margin-top:1em}
.footer-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff}
.footer-social a:hover{background:var(--peach)}
.newsletter-form{display:flex;gap:8px;margin-top:1em}
.newsletter-form input{flex:1;padding:.75em 1em;border:0;border-radius:var(--radius-sm);
  font-family:inherit}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;font-size:.9rem}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:10px 24px;flex-wrap:wrap}
.footer-credit a{color:var(--peach)}
.footer-credit a:hover{color:#fff}
.footer-legal{display:inline-flex;gap:18px;flex-wrap:wrap}
.footer-privacy{color:rgba(255,255,255,.7)}
.footer-privacy:hover{color:#fff}

/* Danger / account-deletion form */
.danger-form{border:1px solid rgba(210,60,60,.35);border-radius:var(--radius);
  padding:26px 28px;background:rgba(210,60,60,.04)}
.danger-form .delete-confirm{display:flex;gap:10px;align-items:flex-start;
  margin:6px 0 18px;font-size:.92rem;color:var(--ink);cursor:pointer}
.danger-form .delete-confirm input{margin-top:3px;flex:0 0 auto}
.btn--danger{background:#c0392b;border-color:#c0392b}
.btn--danger:hover{background:#a5281c;border-color:#a5281c}
@media(max-width:520px){.danger-form{padding:20px 18px}}
@media (max-width:600px){.footer-bottom .wrap{justify-content:center;text-align:center}}

/* SVG icon helper */
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.12em}

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media(max-width:980px){
  .footer-cols{grid-template-columns:1fr 1fr}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .about-badge{right:24px;bottom:24px}
  .content-area{grid-template-columns:1fr}
  .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .topbar{display:none}
  .nav-toggle{display:flex}
  /* The Home nav collapses into a drawer, so the bar only holds the logo + hamburger:
     keep it compact and vertically centred instead of the tall desktop layout. */
  .header-inner{align-items:center;min-height:70px}
  .header-left .site-branding{margin-top:0}
  .has-overlay-header .hero{margin-top:-71px}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(320px,85vw);background:#fff;
    box-shadow:var(--shadow);padding:90px 24px 24px;transform:translateX(100%);
    transition:transform var(--t);z-index:550;overflow-y:auto}
  .main-nav.is-open{transform:translateX(0)}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  /* The mobile nav is a solid white drawer, so keep its links dark even in overlay mode. */
  .site-header--overlay .main-nav>ul>li>a{color:var(--ink);text-shadow:none}
  .main-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding-left:14px;background:var(--grey-light)}
  /* Sits BELOW the header's sticky stacking context (z-index:500) so it dims the
     page but never covers the drawer, which lives inside the header. */
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:490;
    opacity:0;visibility:hidden;transition:var(--t)}
  .nav-overlay.is-open{opacity:1;visibility:visible}
}
@media(max-width:640px){
  .section{padding:64px 0}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .sermon-meta-box{flex-direction:column;gap:14px}
  .hero-slide,.hero-slides{min-height:70vh}
  /* "This week" cards stack full-width on phones so they read cleanly and the
     button no longer wraps into a tall blob. */
  .events-feature-grid,.events-feature-grid--two,.events-feature-grid--single{
    grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .event-feature-body .btn{white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}