/*
Theme Name:   Christ Peace Church
Theme URI:    https://christpeacechurch.org
Description:  Astra child theme carrying the Christ Peace Church brand system - navy, gold and cream, Playfair Display and Inter. Page content is built in Elementor and remains fully editable there; this stylesheet supplies the tokens and component classes.
Author:       Christ Peace Church
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ==========================================================================
   1. Brand tokens
   ========================================================================== */
:root{
  --cpc-navy-900:#04172E;
  --cpc-navy-800:#0A1E38;
  --cpc-navy-700:#11233F;
  --cpc-gold:#E3A84C;
  --cpc-gold-deep:#C8862A;
  --cpc-gold-ink:#92672A;      /* gold that passes WCAG AA as text on light */
  --cpc-gold-ink-hover:#775322;
  --cpc-cream:#F7F5F1;
  --cpc-white:#FFFFFF;
  --cpc-ink:#1A2130;
  --cpc-ink-soft:#4A5568;
  --cpc-ink-mute:#6B7688;

  --cpc-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --cpc-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cpc-script:"Great Vibes","Brush Script MT",cursive;

  --cpc-radius:3px;
  --cpc-radius-sm:2px;
  --cpc-ease:cubic-bezier(.22,.61,.36,1);
  --cpc-shadow-sm:0 2px 10px rgba(4,23,46,.07);
  --cpc-shadow-md:0 12px 34px rgba(4,23,46,.13);
  --cpc-shadow-lg:0 26px 60px rgba(4,23,46,.20);
}

/* ==========================================================================
   2. Typography baseline
   ========================================================================== */
body,
.ast-container{ font-family:var(--cpc-body); color:var(--cpc-ink); }
body{ font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; }

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--cpc-display);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.015em;
  color:var(--cpc-navy-900);
  text-wrap:balance;
}
p{ text-wrap:pretty; }

/* Script accent - used sparingly, e.g. the hero "Welcome to" */
.cpc-script .elementor-heading-title,
.cpc-script{
  font-family:var(--cpc-script)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:var(--cpc-gold)!important;
  line-height:1!important;
}

/* Eyebrow label */
.cpc-eyebrow .elementor-heading-title,
.cpc-eyebrow{
  font-family:var(--cpc-body)!important;
  font-size:.775rem!important;
  font-weight:700!important;
  letter-spacing:.26em!important;
  text-transform:uppercase!important;
  color:var(--cpc-gold-ink)!important;
  line-height:1.5!important;
}
.cpc-on-dark .cpc-eyebrow .elementor-heading-title,
.cpc-on-dark .cpc-eyebrow{ color:var(--cpc-gold)!important; }

/* Lead paragraph */
.cpc-lead{ font-size:1.12rem; line-height:1.7; color:var(--cpc-ink-soft); max-width:68ch; }
.cpc-on-dark .cpc-lead{ color:rgba(255,255,255,.82); }

/* Scripture / verse */
.cpc-verse{
  font-family:var(--cpc-display); font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.6; color:var(--cpc-gold-ink);
}
.cpc-on-dark .cpc-verse{ color:var(--cpc-gold); }

/* ==========================================================================
   3. Dark / light section helpers
   ========================================================================== */
.cpc-on-dark,
.cpc-on-dark p,
.cpc-on-dark .elementor-widget-text-editor{ color:rgba(255,255,255,.82); }
.cpc-on-dark h1,.cpc-on-dark h2,.cpc-on-dark h3,
.cpc-on-dark h4,.cpc-on-dark h5,.cpc-on-dark h6,
.cpc-on-dark .elementor-heading-title{ color:var(--cpc-white); }
.cpc-on-dark a{ color:var(--cpc-gold); }
.cpc-on-dark a:hover{ color:var(--cpc-gold-deep); }

/* Hairline gold seam at the foot of a dark band */
.cpc-seam{ position:relative; }
.cpc-seam::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(227,168,76,0),rgba(227,168,76,.42) 28%,rgba(227,168,76,.42) 72%,rgba(227,168,76,0));
}

/* Short gold rule, used under section headings */
.cpc-rule{ display:flex; align-items:center; gap:10px; }
.cpc-rule::before{ content:""; width:54px; height:2px; background:var(--cpc-gold); }
.cpc-rule::after{ content:""; width:7px; height:7px; transform:rotate(45deg); background:var(--cpc-gold); }
.cpc-rule.cpc-center{ justify-content:center; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.elementor-button{
  font-family:var(--cpc-body);
  font-size:.815rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  border-radius:6px; transition:all .3s var(--cpc-ease); line-height:1.3;
}
.cpc-btn-gold .elementor-button{
  background:linear-gradient(135deg,var(--cpc-gold),var(--cpc-gold-deep));
  color:var(--cpc-navy-900);
  box-shadow:0 6px 20px rgba(200,134,42,.32);
  border:2px solid transparent;
  position:relative; overflow:hidden; isolation:isolate;
}
.cpc-btn-gold .elementor-button:hover{
  background:linear-gradient(135deg,#F0C877,var(--cpc-gold));
  color:var(--cpc-navy-900); transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(200,134,42,.42);
}
.cpc-btn-gold .elementor-button::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
  transform:skewX(-18deg); transition:left .62s var(--cpc-ease);
}
.cpc-btn-gold .elementor-button:hover::after{ left:125%; }

.cpc-btn-outline-light .elementor-button{
  background:transparent; border:2px solid rgba(255,255,255,.55); color:var(--cpc-white);
}
.cpc-btn-outline-light .elementor-button:hover{
  background:var(--cpc-white); border-color:var(--cpc-white); color:var(--cpc-navy-900); transform:translateY(-2px);
}
.cpc-btn-outline-navy .elementor-button{
  background:transparent; border:2px solid var(--cpc-navy-900); color:var(--cpc-navy-900);
}
.cpc-btn-outline-navy .elementor-button:hover{
  background:var(--cpc-navy-900); color:var(--cpc-white); transform:translateY(-2px);
}
.elementor-button:active{ transform:translateY(0) scale(.985); }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.cpc-hero{ position:relative; overflow:hidden; }
.cpc-hero .elementor-heading-title{ text-shadow:0 2px 26px rgba(2,10,22,.42); }
.cpc-hero-tagline{ position:relative; padding-bottom:1.1rem; }
.cpc-hero-tagline::after{
  content:""; position:absolute; left:0; bottom:0; width:64px; height:2px;
  background:linear-gradient(90deg,var(--cpc-gold),rgba(227,168,76,0));
}
.cpc-center .cpc-hero-tagline::after{ left:50%; transform:translateX(-50%); }

/* ==========================================================================
   6. Cards - ministry / leader / sermon / event
   ========================================================================== */
.cpc-card .elementor-widget-container,
.cpc-card{
  background:var(--cpc-white);
  border:1px solid rgba(0,0,0,.10);
  border-radius:var(--cpc-radius);
  overflow:hidden;
  box-shadow:var(--cpc-shadow-sm);
  transition:transform .42s var(--cpc-ease),box-shadow .42s var(--cpc-ease),border-color .52s var(--cpc-ease);
  height:100%;
}
.cpc-card:hover .elementor-widget-container,
.cpc-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--cpc-shadow-md);
  border-color:rgba(227,168,76,.55);
}
.cpc-card .elementor-image-box-img{ overflow:hidden; margin-bottom:0!important; }
.cpc-card .elementor-image-box-img img{
  width:100%; display:block; transition:transform .7s var(--cpc-ease);
}
.cpc-card:hover .elementor-image-box-img img{ transform:scale(1.06); }
.cpc-card .elementor-image-box-content{ padding:22px 22px 26px; }
.cpc-card .elementor-image-box-title{
  font-family:var(--cpc-display); font-size:1.18rem; margin-bottom:.5em; color:var(--cpc-navy-900);
}
.cpc-card .elementor-image-box-description{ font-size:.95rem; color:var(--cpc-ink-soft); }

/* dark card variant */
.cpc-card-dark .elementor-widget-container{
  background:var(--cpc-navy-800); border-color:rgba(227,168,76,.20);
}
.cpc-card-dark .elementor-image-box-title{ color:var(--cpc-white); }
.cpc-card-dark .elementor-image-box-description{ color:rgba(255,255,255,.70); }

/* leader card - square portrait, never crops a face */
.cpc-leader .elementor-image-box-img img{ aspect-ratio:1/1; object-fit:cover; }
.cpc-leader .elementor-image-box-title{ font-size:1.05rem; margin-bottom:.2em; }
.cpc-leader-role{
  display:block; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--cpc-gold-ink); font-weight:700; margin-bottom:.6rem;
}
.cpc-card-dark .cpc-leader-role{ color:var(--cpc-gold); }

/* ==========================================================================
   7. Service card (icon box) + statistics (counter)
   ========================================================================== */
.cpc-service .elementor-icon-box-title{
  font-family:var(--cpc-display); font-size:1rem; letter-spacing:.13em; text-transform:uppercase;
}
.cpc-service .elementor-icon{ color:var(--cpc-gold); }
.cpc-service-time{
  display:block; font-family:var(--cpc-display); font-size:1.7rem; font-weight:700;
  color:var(--cpc-gold); line-height:1.2; margin:.2rem 0 .4rem;
}

.cpc-stat .elementor-counter-number-wrapper{
  font-family:var(--cpc-display)!important; font-weight:700; color:var(--cpc-gold);
}
.cpc-stat .elementor-counter-title{
  font-size:.68rem!important; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(255,255,255,.6); font-weight:700;
}
.cpc-stat-light .elementor-counter-number-wrapper{ color:var(--cpc-navy-900); }
.cpc-stat-light .elementor-counter-title{ color:var(--cpc-ink-mute); }

/* Medallion icon treatment */
.cpc-medallion .elementor-icon{
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#F0C877,var(--cpc-gold-deep));
  color:var(--cpc-navy-900)!important;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(200,134,42,.28); position:relative;
}
.cpc-medallion .elementor-icon::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(227,168,76,.30);
}

/* ==========================================================================
   8. FAQ accordion
   ========================================================================== */
.cpc-faq .elementor-accordion-item{
  background:var(--cpc-white); border:1px solid rgba(0,0,0,.10)!important;
  border-radius:var(--cpc-radius-sm); overflow:hidden; margin-bottom:12px;
  transition:border-color .3s var(--cpc-ease),box-shadow .3s var(--cpc-ease);
}
.cpc-faq .elementor-tab-title{
  font-family:var(--cpc-display)!important; font-size:1.04rem!important; font-weight:700;
  color:var(--cpc-navy-900); padding:19px 22px!important;
}
.cpc-faq .elementor-tab-title.elementor-active{ color:var(--cpc-gold-ink); }
.cpc-faq .elementor-active + .elementor-tab-content{ border-top:0!important; }
.cpc-faq .elementor-tab-content{ padding:0 22px 22px!important; color:var(--cpc-ink-soft); border:0!important; }
.cpc-faq .elementor-accordion-icon{ color:var(--cpc-gold-ink)!important; }

/* ==========================================================================
   9. Gallery
   ========================================================================== */
.cpc-gallery .gallery-item img,
.cpc-gallery .elementor-image-gallery img{
  border-radius:var(--cpc-radius-sm);
  transition:transform .6s var(--cpc-ease),box-shadow .4s var(--cpc-ease);
}
.cpc-gallery .gallery-item:hover img{
  transform:scale(1.04);
  box-shadow:var(--cpc-shadow-md);
}
.cpc-gallery .gallery-item{ overflow:hidden; border-radius:var(--cpc-radius-sm); }

/* ==========================================================================
   10. Event countdown (shortcode output)
   ========================================================================== */
.cpc-countdown{ display:flex; flex-wrap:wrap; gap:10px; }
.cpc-cd-unit{
  min-width:72px; padding:11px 8px; text-align:center;
  background:var(--cpc-navy-900); border:1px solid rgba(227,168,76,.32);
  border-radius:var(--cpc-radius-sm);
  background-image:linear-gradient(180deg,rgba(227,168,76,.10),rgba(227,168,76,0) 70%);
}
.cpc-cd-num{
  display:block; font-family:var(--cpc-display); font-size:1.55rem; font-weight:700;
  color:var(--cpc-white); line-height:1.1; font-variant-numeric:tabular-nums;
}
.cpc-cd-lab{
  display:block; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cpc-gold); margin-top:3px;
}
.cpc-countdown.is-past .cpc-cd-num{ color:var(--cpc-gold); }

/* ==========================================================================
   11. Placeholder marker
   ========================================================================== */
.cpc-ph{
  background:rgba(227,168,76,.16);
  border-bottom:1px dashed var(--cpc-gold-deep);
  padding:0 3px; border-radius:2px;
}
.cpc-on-dark .cpc-ph{ background:rgba(227,168,76,.20); border-bottom-color:var(--cpc-gold); }
.cpc-ph-note{
  background:#FFF8E8; border:1px solid var(--cpc-gold);
  border-left:4px solid var(--cpc-gold-deep);
  border-radius:var(--cpc-radius-sm); padding:15px 19px;
  font-size:.88rem; line-height:1.65; color:#6B4A0F;
}
.cpc-ph-note strong{ color:#4A3208; }

/* ==========================================================================
   12. Header / footer (UAE templates)
   ========================================================================== */
.cpc-topbar{ font-size:.8rem; }
.cpc-topbar a{ color:rgba(255,255,255,.72); }
.cpc-topbar a:hover{ color:var(--cpc-gold); }

.cpc-nav .hfe-nav-menu a.hfe-menu-item,
.cpc-nav .hfe-nav-menu a.hfe-sub-menu-item{
  font-family:var(--cpc-body); font-size:.795rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.cpc-nav .hfe-nav-menu .menu-item a.hfe-menu-item{ position:relative; }
.cpc-nav .hfe-nav-menu .menu-item a.hfe-menu-item::after{
  content:""; position:absolute; left:50%; right:50%; bottom:6px; height:2px;
  background:var(--cpc-gold); transition:left .3s var(--cpc-ease),right .3s var(--cpc-ease);
}
.cpc-nav .hfe-nav-menu .menu-item a.hfe-menu-item:hover::after,
.cpc-nav .hfe-nav-menu .current-menu-item > a.hfe-menu-item::after{ left:13px; right:13px; }
.cpc-nav .hfe-nav-menu .current-menu-item > a.hfe-menu-item{ color:var(--cpc-gold)!important; }

/* Mobile off-canvas panel */
.cpc-nav .hfe-nav-menu__toggle .hfe-menu-toggle-icon{ color:var(--cpc-white); }
.cpc-nav .hfe-nav-menu__layout-vertical .sub-menu{ background:rgba(0,0,0,.24); }

.cpc-footer-heading{
  font-family:var(--cpc-body)!important; font-size:.72rem!important; font-weight:800!important;
  letter-spacing:.21em!important; text-transform:uppercase!important; color:var(--cpc-gold)!important;
}

/* ==========================================================================
   13. Utilities
   ========================================================================== */
.cpc-framed img{
  border-radius:var(--cpc-radius);
  box-shadow:var(--cpc-shadow-lg);
}
.cpc-framed{ position:relative; }
.cpc-map iframe{ border-radius:var(--cpc-radius); }
.cpc-screen-reader{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Nothing may push the page sideways */
html,body{ overflow-x:hidden; max-width:100%; }

/* ==========================================================================
   14. Motion / print
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
@media print{
  .cpc-hero,.cpc-seam::after{ box-shadow:none; }
}

/* ==========================================================================
   15. Small-screen header
   ========================================================================== */
@media (max-width:767px){
  /* The address is in the footer and on Contact; dropping it here keeps the
     utility bar to one tidy line and lets the hero start higher. */
  .cpc-topbar .elementor-icon-list-item:first-child{ display:none; }
  .cpc-topbar .elementor-icon-list-items{ justify-content:center; }
  .cpc-topbar .elementor-widget-icon-list{ width:auto; }
  .cpc-topbar .elementor-social-icons-wrapper{ margin-top:0; }
  .cpc-topbar .e-con-inner{ row-gap:4px; }

  /* Header row must never stack: logo | CTA | hamburger */
  .ehf-header .elementor-widget-site-logo{ flex:0 0 auto; }
  .ehf-header .elementor-widget-navigation-menu{ flex:0 0 auto; margin-left:auto; }
  .ehf-header .elementor-widget-button{ flex:0 0 auto; }

  /* Off-canvas panel styling */
  .hfe-nav-menu__layout-horizontal .hfe-nav-menu{ background:var(--cpc-navy-900); }
  .hfe-nav-menu .sub-menu{ box-shadow:inset 3px 0 0 rgba(227,168,76,.34); }
}

@media (max-width:1024px){
  /* Cards go two-up on tablet, full width on phones - set on the containers
     too, this is the safety net. */
  .cpc-card .elementor-image-box-content{ padding:18px 16px 22px; }
}

/* Elementor gallery: consistent tile ratio and a gold frame on hover */
.cpc-gallery .gallery-item img{ aspect-ratio:3/2; object-fit:cover; width:100%; }
.cpc-gallery .gallery-item{ position:relative; }
.cpc-gallery .gallery-item::after{
  content:""; position:absolute; inset:0; border-radius:var(--cpc-radius-sm);
  border:1px solid rgba(227,168,76,0); transition:border-color .4s var(--cpc-ease);
  pointer-events:none;
}
.cpc-gallery .gallery-item:hover::after{ border-color:rgba(227,168,76,.55); }

/* WPForms styled to the brand */
.wpforms-container .wpforms-field-label{
  font-family:var(--cpc-body); font-size:.78rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--cpc-navy-800);
}
.wpforms-container input[type=text],.wpforms-container input[type=email],
.wpforms-container input[type=tel],.wpforms-container input[type=date],
.wpforms-container select,.wpforms-container textarea{
  border:1px solid #D8D3CA!important; border-radius:var(--cpc-radius-sm)!important;
  padding:13px 15px!important; font-family:var(--cpc-body)!important; font-size:16px!important;
  background:#fff!important;
}
.wpforms-container input:focus,.wpforms-container select:focus,.wpforms-container textarea:focus{
  border-color:var(--cpc-gold)!important; box-shadow:0 0 0 3px rgba(227,168,76,.18)!important; outline:none!important;
}
.wpforms-container button[type=submit]{
  background:linear-gradient(135deg,var(--cpc-gold),var(--cpc-gold-deep))!important;
  color:var(--cpc-navy-900)!important; border:0!important; border-radius:6px!important;
  font-family:var(--cpc-body)!important; font-size:.815rem!important; font-weight:700!important;
  letter-spacing:.13em!important; text-transform:uppercase!important;
  padding:16px 32px!important; transition:all .3s var(--cpc-ease)!important;
}
.wpforms-container button[type=submit]:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(200,134,42,.42)!important; }
.wpforms-container .wpforms-required-label{ color:var(--cpc-gold-ink)!important; }

/* ==========================================================================
   16. Header row - small screens (corrected selectors)
   ========================================================================== */
@media (max-width:1024px){
  /* The nav widget must hug its hamburger, not claim the free space, or the
     Plan a Visit button gets pushed off the viewport. */
  .cpc-seam .elementor-widget-navigation-menu{
    flex:0 0 auto!important; width:auto!important; max-width:none!important;
    margin-left:auto!important; order:3;
  }
  .cpc-seam .elementor-widget-navigation-menu .elementor-widget-container{ width:auto; }
  .cpc-seam .hfe-nav-menu-wrapper{ width:auto; }
  .cpc-seam .elementor-widget-site-logo{ flex:0 0 auto!important; order:1; }
  .cpc-seam .elementor-widget-button{ flex:0 0 auto!important; width:auto!important; order:2; margin-left:auto; }
}
@media (max-width:767px){
  .cpc-topbar .elementor-icon-list-item:first-child{ display:none!important; }
  .cpc-topbar .elementor-icon-list-items{ justify-content:center!important; }
  .cpc-topbar .e-con-inner{ row-gap:2px!important; padding-top:4px!important; padding-bottom:4px!important; }
  .cpc-seam .elementor-widget-button .elementor-button{ padding:11px 14px!important; font-size:10px!important; letter-spacing:.08em!important; }
  .cpc-seam .elementor-widget-button{ margin-left:auto; }
}

/* ==========================================================================
   17. Mobile menu panel
   ========================================================================== */
@media (max-width:1024px){
  .cpc-nav .hfe-nav-menu,
  .cpc-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu{ background:var(--cpc-navy-900)!important; }
  .cpc-nav .hfe-nav-menu a.hfe-menu-item,
  .cpc-nav .hfe-nav-menu a.hfe-sub-menu-item{
    color:rgba(255,255,255,.90)!important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .cpc-nav .hfe-nav-menu a.hfe-menu-item:hover,
  .cpc-nav .hfe-nav-menu a.hfe-sub-menu-item:hover,
  .cpc-nav .hfe-nav-menu .current-menu-item > a.hfe-menu-item{ color:var(--cpc-gold)!important; }
  .cpc-nav .hfe-nav-menu .sub-menu{ background:rgba(0,0,0,.28)!important; }
  .cpc-nav .hfe-nav-menu .sub-menu a{ padding-left:34px!important; font-size:14px!important; }
  .cpc-nav .hfe-nav-menu .menu-item a.hfe-menu-item::after{ display:none; }
}

/* ==========================================================================
   18. Menu panel background fix

   UAE paints a white background on both the panel <nav> and on every
   <a class=hfe-menu-item>. Combined with light link text that made the
   mobile menu render white-on-white. Force the surfaces transparent and
   let the navy panel show through.
   ========================================================================== */
.cpc-nav nav.hfe-nav-menu__layout-horizontal,
.cpc-nav nav.hfe-nav-menu__layout-vertical{ background-color:transparent!important; }

.cpc-nav a.hfe-menu-item,
.cpc-nav a.hfe-sub-menu-item{ background-color:transparent!important; }

/* Desktop dropdown panel */
@media (min-width:1025px){
  .cpc-nav ul.hfe-nav-menu .sub-menu{
    background:var(--cpc-navy-900)!important;
    border-top:3px solid var(--cpc-gold);
    border-radius:0 0 10px 10px;
    box-shadow:0 26px 60px rgba(4,23,46,.28);
    padding:8px 0;
  }
  .cpc-nav ul.hfe-nav-menu .sub-menu a.hfe-sub-menu-item{
    color:rgba(255,255,255,.88)!important;
  }
  .cpc-nav ul.hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover{
    color:var(--cpc-gold)!important;
    background-color:rgba(255,255,255,.06)!important;
  }
}

/* Mobile / tablet panel */
@media (max-width:1024px){
  .cpc-nav nav.hfe-nav-menu__layout-horizontal{
    background-color:var(--cpc-navy-900)!important;
    border-top:1px solid rgba(227,168,76,.30);
    box-shadow:0 24px 40px rgba(0,0,0,.35);
  }
  .cpc-nav ul.hfe-nav-menu{ background:transparent!important; }
  .cpc-nav ul.hfe-nav-menu .sub-menu{
    background:rgba(0,0,0,.26)!important;
    box-shadow:inset 3px 0 0 rgba(227,168,76,.34);
  }
  .cpc-nav a.hfe-menu-item{
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px!important;
  }
  .cpc-nav a.hfe-sub-menu-item{ padding-left:34px!important; font-size:13px!important; }
}

/* ==========================================================================
   19. Menu link colour (panel + dropdown)
   Highest-specificity pass: UAE and Astra both set anchor colours here, so
   these rules name the full chain to guarantee legible links on navy.
   ========================================================================== */
@media (max-width:1024px){
  .cpc-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li.menu-item > a.hfe-menu-item,
  .cpc-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li.menu-item > div > a.hfe-menu-item,
  .cpc-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li.menu-item a.hfe-sub-menu-item,
  .cpc-nav nav.hfe-nav-menu__layout-horizontal .hfe-has-submenu-container > a{
    color:rgba(255,255,255,.92)!important;
  }
  .cpc-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li.current-menu-item > a.hfe-menu-item,
  .cpc-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li.current-menu-item > div > a.hfe-menu-item,
  .cpc-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li.menu-item > div > a.hfe-menu-item:hover,
  .cpc-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu li.menu-item a.hfe-sub-menu-item:hover{
    color:var(--cpc-gold)!important;
  }
  /* submenu expand arrow */
  .cpc-nav nav.hfe-nav-menu__layout-horizontal .hfe-menu-toggle,
  .cpc-nav nav.hfe-nav-menu__layout-horizontal .sub-menu-toggle{ color:var(--cpc-gold)!important; }
}
@media (min-width:1025px){
  .cpc-nav ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item,
  .cpc-nav ul.hfe-nav-menu > li.menu-item > div > a.hfe-menu-item{
    color:rgba(255,255,255,.86)!important;
  }
  .cpc-nav ul.hfe-nav-menu > li.menu-item:hover > a.hfe-menu-item,
  .cpc-nav ul.hfe-nav-menu > li.menu-item:hover > div > a.hfe-menu-item,
  .cpc-nav ul.hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
  .cpc-nav ul.hfe-nav-menu > li.current-menu-item > div > a.hfe-menu-item,
  .cpc-nav ul.hfe-nav-menu > li.current-menu-ancestor > div > a.hfe-menu-item{
    color:var(--cpc-gold)!important;
  }
  .cpc-nav ul.hfe-nav-menu .sub-menu li.menu-item a.hfe-sub-menu-item{
    color:rgba(255,255,255,.88)!important;
  }
}

/* ==========================================================================
   20. Touch target minimums (WCAG 2.2 AA - Target Size 24x24)
   ========================================================================== */
/* Accordion headers: the tappable element is the inner anchor, so the
   padding has to land there, not only on the wrapper. */
.cpc-faq .elementor-tab-title,
.cpc-faq .elementor-tab-title a,
.cpc-faq .elementor-accordion-title{
  display:flex!important; align-items:center; gap:12px;
  min-height:56px; padding:16px 22px!important; line-height:1.4;
}
.cpc-faq .elementor-tab-title{ padding:0!important; }
.cpc-faq .elementor-accordion-icon{ min-width:24px; min-height:24px; display:flex; align-items:center; justify-content:center; }

/* WPForms controls */
.wpforms-container input[type=checkbox],
.wpforms-container input[type=radio]{
  width:24px!important; height:24px!important; accent-color:var(--cpc-gold-deep);
  margin-right:10px!important;
}
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-radio label{
  display:flex; align-items:flex-start; gap:4px; min-height:32px; padding:4px 0;
  font-size:15px; line-height:1.55; text-transform:none; letter-spacing:0;
  font-weight:400; color:var(--cpc-ink-soft);
}
.wpforms-container button[type=submit]{ min-height:48px; }

/* Any inline link inside body copy stays comfortably tappable on phones */
@media (max-width:767px){
  .elementor-widget-text-editor a{ display:inline-block; padding-block:2px; }
}

/* 21. Checkbox width - WPForms constrains it via a flex rule, so pin all three axes. */
.wpforms-container input[type=checkbox],
.wpforms-container input[type=radio],
.wpforms-container ul li input[type=checkbox],
.wpforms-container ul li input[type=radio]{
  width:24px!important; min-width:24px!important; max-width:24px!important;
  height:24px!important; min-height:24px!important;
  flex:0 0 24px!important; appearance:auto!important;
}

/* ==========================================================================
   22. Logo aspect reservation
   UAE's site-logo widget renders without width/height attributes, so reserve
   the box in CSS to keep Cumulative Layout Shift at zero.
   ========================================================================== */
.hfe-site-logo-img{ aspect-ratio:812/757; height:auto; display:block; }

/* Reduced motion: honour the OS setting across every custom animation. */
@media (prefers-reduced-motion:reduce){
  .cpc-card,.cpc-card:hover,
  .cpc-card .elementor-image-box-img img,
  .elementor-button,.elementor-button:hover,
  .cpc-gallery .gallery-item img{
    transition:none!important; transform:none!important; animation:none!important;
  }
  html{ scroll-behavior:auto!important; }
}

/* Visible keyboard focus everywhere, including inside Elementor widgets. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,
.elementor-button:focus-visible,
.cpc-nav a:focus-visible,
.gallery-item a:focus-visible,
.cpc-faq .elementor-tab-title:focus-visible{
  outline:3px solid var(--cpc-gold)!important;
  outline-offset:3px!important;
  border-radius:3px;
}
.cpc-on-dark a:focus-visible,
.cpc-nav a:focus-visible{ outline-color:var(--cpc-gold)!important; }

/* Skip link becomes visible on focus. */
.skip-link:focus,.skip-link:focus-visible{
  position:absolute!important; left:12px!important; top:12px!important;
  width:auto!important; height:auto!important; clip:auto!important;
  z-index:99999; background:var(--cpc-gold); color:var(--cpc-navy-900);
  padding:12px 22px; font-weight:700; border-radius:0 0 8px 8px;
  clip-path:none!important;
}

/* ==========================================================================
   23. Placeholder visibility system

   Everything the church still has to supply is marked so an administrator
   cannot miss it. Each marker is driven by a CSS class on the widget, so
   removing the class in Elementor removes the marker - no code edit needed.
   ========================================================================== */

/* Inline placeholder text */
.cpc-ph{
  background:rgba(227,168,76,.20);
  border-bottom:1px dashed var(--cpc-gold-deep);
  padding:0 3px; border-radius:2px;
}
.cpc-on-dark .cpc-ph{ background:rgba(227,168,76,.24); border-bottom-color:var(--cpc-gold); }

/* Page-level notice */
.cpc-ph-note{
  background:#FFF8E8; border:2px solid var(--cpc-gold-deep);
  border-left:6px solid var(--cpc-gold-deep);
  border-radius:var(--cpc-radius-sm); padding:18px 22px;
  font-family:var(--cpc-body); font-size:.92rem; line-height:1.7; color:#5A3D0B;
}
.cpc-ph-note strong{ color:#3F2A06; }
.cpc-ph-note .cpc-ph-tag{
  display:inline-block; background:var(--cpc-gold-deep); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:4px; margin-bottom:10px;
}

/* Corner badge for placeholder imagery (leaders, event art, sermon art).
   Remove the cpc-photo-placeholder class in Elementor once the real image
   is uploaded and the badge disappears. */
.cpc-photo-placeholder .elementor-image-box-img,
.cpc-photo-placeholder .elementor-widget-container{ position:relative; }
.cpc-photo-placeholder .elementor-image-box-img::after{
  content:"PLACEHOLDER PHOTO - OFFICIAL PHOTO REQUIRED";
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  background:rgba(200,134,42,.94); color:#fff;
  font-family:var(--cpc-body); font-size:9.5px; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase; text-align:center;
  padding:7px 6px; line-height:1.35; pointer-events:none;
}
.cpc-photo-placeholder .elementor-image-box-img{ overflow:hidden; }

/* Ribbon for a whole placeholder block (featured event, latest sermon) */
.cpc-block-placeholder{ position:relative; }
.cpc-block-placeholder::before{
  content:"PLACEHOLDER - OFFICIAL INFORMATION REQUIRED";
  display:block; width:100%;
  background:var(--cpc-gold-deep); color:#fff;
  font-family:var(--cpc-body); font-size:10.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
  padding:9px 12px; margin-bottom:20px; border-radius:5px;
}

/* Placeholder link (social icons, sermon video buttons pointing at #) */
.cpc-link-placeholder{ position:relative; }
.cpc-link-placeholder::after{
  content:"LINKS NOT YET SUPPLIED";
  display:block; margin-top:10px;
  font-family:var(--cpc-body); font-size:9.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--cpc-gold); opacity:.95;
}
.cpc-on-dark .cpc-link-placeholder::after{ color:var(--cpc-gold); }

@media (max-width:767px){
  .cpc-photo-placeholder .elementor-image-box-img::after{ font-size:8.5px; letter-spacing:.06em; }
  .cpc-block-placeholder::before{ font-size:9.5px; letter-spacing:.10em; }
}

/* Print: keep the markers so a printed review copy still shows the gaps. */
@media print{
  .cpc-ph-note,.cpc-block-placeholder::before{ border:1px solid #000; }
}

/* ==========================================================================
   24. Image box media fills the card
   Elementor's Image Box sizes .elementor-image-box-img from its own control,
   which left card imagery at ~110px. Cards want edge-to-edge media.
   ========================================================================== */
.cpc-card .elementor-image-box-wrapper{ display:block; }
.cpc-card .elementor-image-box-img{
  width:100%!important; max-width:100%!important; margin:0 0 0 0!important;
  display:block!important; overflow:hidden;
}
.cpc-card .elementor-image-box-img a{ display:block; }
.cpc-card .elementor-image-box-img img{ width:100%!important; display:block; }
.cpc-leader .elementor-image-box-img img{ aspect-ratio:1/1; object-fit:cover; }
.cpc-card:not(.cpc-leader) .elementor-image-box-img img{ aspect-ratio:4/3; object-fit:cover; }
@media (max-width:767px){
  .cpc-card:not(.cpc-leader) .elementor-image-box-img img{ aspect-ratio:16/9; }
}

/* ==========================================================================
   25. Skip link visibility
   Astra ships the skip link as .skip-link.screen-reader-text, which is clipped
   to 1x1. It must become visible when focused (WCAG 2.4.1 / 2.4.7). The
   selector below matches both classes so it outranks the clipping rule.
   ========================================================================== */
a.skip-link.screen-reader-text:focus,
a.skip-link.screen-reader-text:focus-visible,
a.skip-link:focus,
.screen-reader-text:focus{
  position:fixed!important;
  left:16px!important; top:16px!important; right:auto!important; bottom:auto!important;
  width:auto!important; height:auto!important;
  min-width:0!important; min-height:44px!important;
  margin:0!important; padding:12px 24px!important;
  clip:auto!important; clip-path:none!important; overflow:visible!important;
  background:var(--cpc-gold)!important; color:var(--cpc-navy-900)!important;
  font-family:var(--cpc-body)!important; font-size:14px!important; font-weight:700!important;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none!important;
  border-radius:6px!important; box-shadow:0 10px 30px rgba(0,0,0,.35)!important;
  z-index:100000!important;
  display:inline-flex!important; align-items:center;
  outline:3px solid var(--cpc-navy-900)!important; outline-offset:2px!important;
}

/* 26. Skip link colours - Astra overrides the background shorthand, so set the
   longhand properties with a body-prefixed selector to win the cascade. */
body a.skip-link.screen-reader-text:focus,
body a.skip-link.screen-reader-text:focus-visible,
body a.skip-link:focus{
  background-color:#E3A84C!important;
  background-image:none!important;
  color:#04172E!important;
  text-decoration:none!important;
  border:0!important;
}

/* ==========================================================================
   27. Child theme skip link
   Own class, so nothing in the parent theme competes with it.
   ========================================================================== */
.cpc-skip{
  position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden;
}
.cpc-skip:focus{
  position:fixed; left:16px; top:16px; z-index:100000;
  width:auto; height:auto; min-height:44px; overflow:visible;
  display:inline-flex; align-items:center;
  padding:12px 24px;
  background-color:#E3A84C; color:#04172E;
  font-family:var(--cpc-body); font-size:14px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  outline:3px solid #04172E; outline-offset:2px;
}
/* Astra ships a second one in some contexts - keep it out of the tab order. */
body > a.skip-link.screen-reader-text{ display:none!important; }

/* ==========================================================================
   28. Click-to-load map (privacy)
   Nothing is requested from Google until the visitor presses the button.
   ========================================================================== */
.cpc-map{
  position:relative; width:100%; overflow:hidden;
  border-radius:var(--cpc-radius);
  background:linear-gradient(160deg,var(--cpc-navy-800),var(--cpc-navy-900));
  border:1px solid rgba(227,168,76,.28);
  display:flex; align-items:center; justify-content:center;
}
.cpc-map.is-loaded{ background:none; border-color:rgba(0,0,0,.10); display:block; }
.cpc-map-inner{ text-align:center; padding:34px 24px; max-width:520px; }
.cpc-map-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:14px; border-radius:50%;
  background:linear-gradient(135deg,#F0C877,var(--cpc-gold-deep));
  color:var(--cpc-navy-900); font-size:20px; line-height:1;
}
.cpc-map-address{
  font-family:var(--cpc-display); font-size:1.15rem; font-weight:700;
  color:#fff; margin:0 0 8px;
}
.cpc-map-note{
  font-family:var(--cpc-body); font-size:.88rem; line-height:1.6;
  color:rgba(255,255,255,.72); margin:0 0 20px;
}
.cpc-map-load{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:14px 30px; cursor:pointer;
  background:linear-gradient(135deg,var(--cpc-gold),var(--cpc-gold-deep));
  color:var(--cpc-navy-900); border:0; border-radius:6px;
  font-family:var(--cpc-body); font-size:.815rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  transition:transform .3s var(--cpc-ease), box-shadow .3s var(--cpc-ease);
  box-shadow:0 6px 20px rgba(200,134,42,.32);
}
.cpc-map-load:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(200,134,42,.42); }
.cpc-map-load:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.cpc-map-dir{
  display:block; margin-top:14px; color:var(--cpc-gold);
  font-family:var(--cpc-body); font-size:.85rem; text-decoration:underline;
  min-height:24px;
}
.cpc-map-dir:hover{ color:#F0C877; }
.cpc-map iframe{ border-radius:var(--cpc-radius); }
@media (prefers-reduced-motion:reduce){ .cpc-map-load{ transition:none; } }

/* 29. Map sizing - the shortcode wrapper must fill the Elementor widget. */
.elementor-widget-shortcode .cpc-map{ width:100%; }
.cpc-map.is-loaded iframe{ width:100%!important; height:100%!important; min-height:inherit; display:block; }
.cpc-map.is-loaded{ display:block; padding:0; }

/* ==========================================================================
   30. Medallion icon fill

   Elementor renders Font Awesome as inline SVG and drives it with `fill`
   (from the widget's primary colour), not `color`. The medallion background
   is gold, so a gold fill made every icon invisible. Force navy on the glyph.
   Navy #04172E on gold #E3A84C = 8.54:1.
   ========================================================================== */
.cpc-medallion .elementor-icon svg,
.cpc-medallion .elementor-icon svg path,
.cpc-service .elementor-icon svg,
.cpc-service .elementor-icon svg path{
  fill:var(--cpc-navy-900)!important;
}
.cpc-medallion .elementor-icon i,
.cpc-service .elementor-icon i{ color:var(--cpc-navy-900)!important; }

/* Icons that sit directly on a dark band (no medallion) stay gold. */
.cpc-on-dark .elementor-icon-list-icon svg,
.cpc-on-dark .elementor-icon-list-icon svg path{ fill:var(--cpc-gold)!important; }

/* ==========================================================================
   31. LUXURY REFINEMENT LAYER
   ==========================================================================
   Editorial pass over the component library. Everything here is class-based
   so Elementor content stays fully editable and any rule can be lifted
   without touching page structure.

   Ratio held throughout: ~80% navy/cream/white, ~15% neutral typography,
   ~5% gold. Gold reads as precious because it is rationed.
   ========================================================================== */

:root{
  --cpc-radius:3px;          /* editorial, not bubbly */
  --cpc-radius-sm:2px;
  --cpc-hair:rgba(4,23,46,.12);
  --cpc-hair-gold:rgba(227,168,76,.42);
  --cpc-lift:cubic-bezier(.22,.61,.36,1);
  --cpc-measure:64ch;
}

/* --------------------------------------------------------------------------
   31.1 Typographic scale — editorial rhythm, not uniform bigness
   -------------------------------------------------------------------------- */
.cpc-hero h1,
.cpc-hero .elementor-heading-title{
  font-size:clamp(3rem,6.4vw,5.6rem)!important;
  line-height:1.02!important;
  letter-spacing:-.028em!important;
  font-weight:700!important;
  text-shadow:0 2px 40px rgba(2,10,22,.45);
}
.cpc-section-title .elementor-heading-title,
.cpc-copy-title .elementor-heading-title{
  font-size:clamp(2.1rem,4vw,3.4rem)!important;
  line-height:1.1!important;
  letter-spacing:-.022em!important;
}
h2,.elementor-widget-heading h2.elementor-heading-title{ letter-spacing:-.02em; }
h3,.elementor-widget-heading h3.elementor-heading-title{ letter-spacing:-.012em; }

/* Eyebrow: smaller, wider, quieter */
.cpc-eyebrow .elementor-heading-title,.cpc-eyebrow{
  font-size:.68rem!important;
  letter-spacing:.34em!important;
  font-weight:600!important;
}

/* Body copy sits on a comfortable measure */
.cpc-lead{ font-size:1.06rem; line-height:1.78; max-width:var(--cpc-measure); }
.elementor-widget-text-editor p{ max-width:var(--cpc-measure); }
.cpc-center .elementor-widget-text-editor p,
.elementor-widget-text-editor[class*="text-center"] p{ margin-inline:auto; }

/* --------------------------------------------------------------------------
   31.2 Gold rules — a hairline, never a graphic
   -------------------------------------------------------------------------- */
.cpc-rule::after{ display:none; }              /* drop the diamond */
.cpc-rule::before{ width:72px; height:1px; background:var(--cpc-gold); }

.elementor-widget-divider .elementor-divider-separator{
  border-top-width:1px!important;
  border-color:var(--cpc-hair-gold)!important;
}
.cpc-on-dark .elementor-widget-divider .elementor-divider-separator{
  border-color:rgba(227,168,76,.5)!important;
}

/* --------------------------------------------------------------------------
   31.3 Buttons — one restrained system
   -------------------------------------------------------------------------- */
.elementor-button{
  border-radius:2px!important;
  font-size:.72rem!important;
  letter-spacing:.19em!important;
  font-weight:700!important;
  padding:19px 40px!important;
  transition:transform .35s var(--cpc-lift),box-shadow .35s var(--cpc-lift),
             background-color .35s var(--cpc-lift),color .35s var(--cpc-lift),
             border-color .35s var(--cpc-lift)!important;
}
.cpc-btn-gold .elementor-button{
  background:var(--cpc-gold)!important;
  background-image:none!important;
  color:var(--cpc-navy-900)!important;
  border:1px solid var(--cpc-gold)!important;
  box-shadow:none!important;
}
.cpc-btn-gold .elementor-button:hover{
  background:#F0C877!important;
  border-color:#F0C877!important;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(200,134,42,.28)!important;
}
.cpc-btn-gold .elementor-button::after{ display:none!important; }  /* drop the sheen sweep */

.cpc-btn-outline-light .elementor-button{
  border:1px solid rgba(255,255,255,.45)!important;
  background:transparent!important; color:#fff!important;
}
.cpc-btn-outline-light .elementor-button:hover{
  border-color:var(--cpc-gold)!important; color:var(--cpc-gold)!important;
  background:transparent!important; transform:translateY(-2px);
}
.cpc-btn-outline-navy .elementor-button{
  border:1px solid var(--cpc-navy-900)!important;
  background:transparent!important; color:var(--cpc-navy-900)!important;
}
.cpc-btn-outline-navy .elementor-button:hover{
  background:var(--cpc-navy-900)!important; color:#fff!important; transform:translateY(-2px);
}
.cpc-btn-outline-navy .elementor-button::before,
.cpc-btn-outline-light .elementor-button::before{ display:none!important; }

/* --------------------------------------------------------------------------
   31.4 Header — transparent over the hero, solid navy on scroll
   -------------------------------------------------------------------------- */
.ehf-header #masthead,
header.ehf-header{
  position:sticky; top:0; z-index:999;
  transition:background-color .4s var(--cpc-lift),box-shadow .4s var(--cpc-lift);
}
body.cpc-hero-page #masthead .cpc-seam > .e-con-inner{ transition:padding .4s var(--cpc-lift); }

/* transparent state (only while the hero is under the header) */
body.cpc-hero-page:not(.cpc-scrolled) #masthead .cpc-seam{
  background-color:transparent!important;
  background-image:linear-gradient(to bottom,rgba(4,23,46,.55),rgba(4,23,46,0))!important;
}
body.cpc-hero-page:not(.cpc-scrolled) #masthead .cpc-seam::after{ opacity:0; }
body.cpc-hero-page:not(.cpc-scrolled) #masthead .cpc-topbar{
  background-color:rgba(2,10,22,.42)!important;
}

/* solid state */
body.cpc-scrolled #masthead .cpc-seam{
  background-color:var(--cpc-navy-900)!important;
  background-image:none!important;
  box-shadow:0 10px 34px rgba(2,10,22,.34);
}
body.cpc-scrolled #masthead .cpc-seam > .e-con-inner{ padding-top:9px!important; padding-bottom:9px!important; }
body.cpc-scrolled #masthead .cpc-topbar{ background-color:#020D1C!important; }

/* nav typography + hover reveal */
.cpc-nav ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item,
.cpc-nav ul.hfe-nav-menu > li.menu-item > div > a.hfe-menu-item{
  font-size:.7rem!important; letter-spacing:.17em!important; font-weight:600!important;
  padding-left:15px!important; padding-right:15px!important;
}
@media (min-width:1025px){
  .cpc-nav ul.hfe-nav-menu > li.menu-item > div > a.hfe-menu-item::after,
  .cpc-nav ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item::after{
    content:""; position:absolute; left:15px; right:15px; bottom:4px; height:1px;
    background:var(--cpc-gold); transform:scaleX(0); transform-origin:left;
    transition:transform .4s var(--cpc-lift);
  }
  .cpc-nav ul.hfe-nav-menu > li.menu-item:hover > div > a.hfe-menu-item::after,
  .cpc-nav ul.hfe-nav-menu > li.menu-item:hover > a.hfe-menu-item::after,
  .cpc-nav ul.hfe-nav-menu > li.current-menu-item > div > a.hfe-menu-item::after,
  .cpc-nav ul.hfe-nav-menu > li.current-menu-item > a.hfe-menu-item::after,
  .cpc-nav ul.hfe-nav-menu > li.current-menu-ancestor > div > a.hfe-menu-item::after{
    transform:scaleX(1);
  }
  .cpc-nav ul.hfe-nav-menu > li.menu-item{ position:relative; }
}

/* --------------------------------------------------------------------------
   31.5 Hero — cinematic, full viewport
   -------------------------------------------------------------------------- */
.cpc-hero{ display:flex; align-items:center; }
body.home .cpc-hero{ min-height:100svh!important; }
body:not(.home) .cpc-hero{ min-height:clamp(360px,44vh,540px)!important; }
.cpc-hero > .e-con-inner{ width:100%; }
.cpc-hero .cpc-script .elementor-heading-title,
.cpc-hero .cpc-script{
  font-size:clamp(1.9rem,3vw,2.9rem)!important;
  opacity:.95;
}
/* gold accent line under the tagline */
.cpc-hero-tagline::after{
  width:88px!important; height:1px!important;
  background:var(--cpc-gold)!important;
}
.cpc-hero-tagline p{
  font-size:clamp(1.15rem,1.9vw,1.5rem)!important;
  font-weight:300!important; letter-spacing:.005em;
}

/* scroll indicator */
.cpc-hero::after{
  content:""; position:absolute; left:50%; bottom:34px; z-index:3;
  width:1px; height:54px; transform:translateX(-50%);
  background:linear-gradient(to bottom,rgba(227,168,76,0),var(--cpc-gold));
  animation:cpcScroll 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cpcScroll{
  0%,100%{ opacity:.25; transform:translateX(-50%) scaleY(.6); transform-origin:bottom; }
  50%    { opacity:1;   transform:translateX(-50%) scaleY(1);   transform-origin:bottom; }
}

/* --------------------------------------------------------------------------
   31.6 Cards — hairline borders, no floating boxes
   -------------------------------------------------------------------------- */
.cpc-card .elementor-widget-container,.cpc-card{
  border-radius:var(--cpc-radius)!important;
  border:1px solid var(--cpc-hair)!important;
  box-shadow:none!important;
  transition:transform .5s var(--cpc-lift),border-color .5s var(--cpc-lift),
             box-shadow .5s var(--cpc-lift)!important;
}
.cpc-card:hover .elementor-widget-container,.cpc-card:hover{
  transform:translateY(-4px);
  border-color:var(--cpc-hair-gold)!important;
  box-shadow:0 18px 46px rgba(4,23,46,.10)!important;
}
.cpc-card .elementor-image-box-img img{ transition:transform .9s var(--cpc-lift); }
.cpc-card:hover .elementor-image-box-img img{ transform:scale(1.035); }
.cpc-card-dark .elementor-widget-container{
  border-color:rgba(227,168,76,.20)!important;
  background:var(--cpc-navy-800)!important;
}
.cpc-card-dark:hover .elementor-widget-container{ border-color:rgba(227,168,76,.5)!important; }
.cpc-card .elementor-image-box-content{ padding:26px 26px 30px; }
.cpc-card .elementor-image-box-title{ letter-spacing:-.01em; margin-bottom:.45em; }
.cpc-card .elementor-image-box-description{ font-size:.94rem; line-height:1.7; }

/* --------------------------------------------------------------------------
   31.7 Service blocks — replace the medallion look with editorial rules
   -------------------------------------------------------------------------- */
.cpc-service .elementor-widget-container{
  border-top:1px solid var(--cpc-hair-gold);
  padding-top:26px;
  transition:border-color .5s var(--cpc-lift);
}
.cpc-service:hover .elementor-widget-container{ border-top-color:var(--cpc-gold); }
.cpc-medallion .elementor-icon{
  width:auto!important; height:auto!important;
  background:none!important; box-shadow:none!important;
  border-radius:0!important;
}
.cpc-medallion .elementor-icon::after{ display:none!important; }
.cpc-medallion .elementor-icon svg,
.cpc-service .elementor-icon svg{
  width:26px!important; height:26px!important;
  fill:var(--cpc-gold)!important;
}
.cpc-on-dark .cpc-medallion .elementor-icon svg{ fill:var(--cpc-gold)!important; }
.cpc-service .elementor-icon-box-title{
  font-family:var(--cpc-body)!important;
  font-size:.68rem!important; letter-spacing:.26em!important;
  font-weight:700!important; text-transform:uppercase;
}
.cpc-service-time{
  font-size:2.1rem!important; letter-spacing:-.02em; margin:.35rem 0 .5rem!important;
}
.cpc-service .elementor-icon-box-description{ font-size:.9rem!important; line-height:1.7; }

/* --------------------------------------------------------------------------
   31.8 Statistics — editorial numerals with hairline separators
   -------------------------------------------------------------------------- */
.cpc-stat .elementor-widget-container{
  padding:6px 0 6px 26px;
  border-left:1px solid var(--cpc-hair-gold);
}
.cpc-stat .elementor-counter-number-wrapper{
  font-size:clamp(2.4rem,4vw,3.4rem)!important; letter-spacing:-.03em; line-height:1;
}
.cpc-stat .elementor-counter-title{
  font-size:.62rem!important; letter-spacing:.3em!important; margin-top:10px;
}
@media (max-width:767px){
  .cpc-stat .elementor-widget-container{ padding-left:18px; }
}

/* --------------------------------------------------------------------------
   31.9 Countdown — quiet, elegant, never louder than the event
   -------------------------------------------------------------------------- */
.cpc-countdown{ gap:0; border-top:1px solid var(--cpc-hair-gold); padding-top:20px; }
.cpc-cd-unit{
  background:none!important; background-image:none!important;
  border:0!important; border-right:1px solid rgba(227,168,76,.22)!important;
  border-radius:0!important; min-width:0; flex:1 1 0;
  padding:2px 14px!important; text-align:left;
}
.cpc-cd-unit:last-child{ border-right:0!important; }
.cpc-cd-unit:first-child{ padding-left:0!important; }
.cpc-cd-num{
  font-size:2.3rem!important; letter-spacing:-.03em; line-height:1;
  color:var(--cpc-white)!important;
}
.cpc-cd-lab{
  font-size:.56rem!important; letter-spacing:.26em!important; margin-top:8px!important;
  color:rgba(255,255,255,.55)!important;
}
.cpc-on-dark .cpc-cd-num{ color:#fff!important; }

/* --------------------------------------------------------------------------
   31.10 Leadership — editorial portraits
   -------------------------------------------------------------------------- */
.cpc-leader .elementor-widget-container{
  border:0!important; background:none!important; box-shadow:none!important;
}
.cpc-leader:hover .elementor-widget-container{
  transform:none!important; box-shadow:none!important; border:0!important;
}
.cpc-leader .elementor-image-box-img{
  border-radius:var(--cpc-radius); overflow:hidden;
  border:1px solid var(--cpc-hair);
}
.cpc-leader .elementor-image-box-content{ padding:22px 2px 0; text-align:left; }
.cpc-leader .elementor-image-box-title{ font-size:1.25rem!important; margin-bottom:.2em; }
.cpc-leader-role{
  font-size:.62rem!important; letter-spacing:.26em!important; margin-bottom:.85rem;
}
.cpc-leader .elementor-image-box-description{ font-size:.92rem; line-height:1.75; }
.cpc-leader:hover .elementor-image-box-img img{ transform:scale(1.03); }

/* --------------------------------------------------------------------------
   31.11 Gallery — editorial rhythm instead of a uniform grid
   -------------------------------------------------------------------------- */
.cpc-gallery .gallery-item img{
  border-radius:var(--cpc-radius);
  transition:transform .9s var(--cpc-lift),filter .6s var(--cpc-lift);
  filter:saturate(.96);
}
.cpc-gallery .gallery-item:hover img{ transform:scale(1.03); filter:saturate(1.06); }
.cpc-gallery .gallery-item::after{ border-radius:var(--cpc-radius); }
@media (min-width:1025px){
  /* alternate tall / short rows for editorial rhythm */
  .cpc-gallery .gallery-item:nth-child(6n+1) img,
  .cpc-gallery .gallery-item:nth-child(6n+6) img{ aspect-ratio:4/5; }
  .cpc-gallery .gallery-item:nth-child(6n+2) img,
  .cpc-gallery .gallery-item:nth-child(6n+3) img,
  .cpc-gallery .gallery-item:nth-child(6n+4) img,
  .cpc-gallery .gallery-item:nth-child(6n+5) img{ aspect-ratio:3/2; }
}

/* --------------------------------------------------------------------------
   31.12 Framed media — hairline instead of heavy shadow
   -------------------------------------------------------------------------- */
.cpc-framed img{
  border-radius:var(--cpc-radius);
  box-shadow:0 30px 70px rgba(4,23,46,.16);
}
.cpc-framed::after{ display:none; }

/* --------------------------------------------------------------------------
   31.13 Section seams — a whisper of gold, not a band
   -------------------------------------------------------------------------- */
.cpc-seam::after{
  background:linear-gradient(90deg,
    rgba(227,168,76,0),rgba(227,168,76,.34) 30%,
    rgba(227,168,76,.34) 70%,rgba(227,168,76,0))!important;
}

/* --------------------------------------------------------------------------
   31.14 Footer — editorial, generous
   -------------------------------------------------------------------------- */
.cpc-footer-heading{
  font-size:.62rem!important; letter-spacing:.3em!important; opacity:.9;
}
.site-footer .elementor-icon-list-item a,
.ehf-footer .elementor-icon-list-item a{ transition:color .35s var(--cpc-lift); }
.ehf-footer .elementor-widget-image img{ opacity:.96; }

/* --------------------------------------------------------------------------
   31.15 Placeholder markers — quieter, still unmistakable
   -------------------------------------------------------------------------- */
.cpc-ph{
  background:rgba(227,168,76,.13);
  border-bottom:1px dashed rgba(200,134,42,.75);
}
.cpc-ph-note{
  border-width:1px; border-left-width:3px; border-radius:var(--cpc-radius);
  background:#FCF7EC;
}
.cpc-ph-note .cpc-ph-tag{ border-radius:2px; letter-spacing:.16em; }
.cpc-photo-placeholder .elementor-image-box-img::after{
  background:rgba(4,23,46,.86); font-size:9px; letter-spacing:.14em; padding:8px 6px;
}
.cpc-block-placeholder::before{ border-radius:2px; letter-spacing:.2em; }

/* --------------------------------------------------------------------------
   31.16 Micro-interactions — fast, quiet, and opt-out aware
   -------------------------------------------------------------------------- */
.cpc-reveal{ opacity:0; transform:translateY(18px); }
.cpc-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--cpc-lift),transform .8s var(--cpc-lift);
}
@media (prefers-reduced-motion:reduce){
  .cpc-reveal,.cpc-reveal.is-in{ opacity:1!important; transform:none!important; transition:none!important; }
  .cpc-hero::after{ animation:none!important; }
  .cpc-card:hover,.cpc-card:hover .elementor-widget-container{ transform:none!important; }
  .cpc-card:hover .elementor-image-box-img img,
  .cpc-gallery .gallery-item:hover img{ transform:none!important; }
}

/* --------------------------------------------------------------------------
   31.17 Mobile composition — not a shrunken desktop
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  body.home .cpc-hero{ min-height:86svh!important; }
  body:not(.home) .cpc-hero{ min-height:clamp(300px,38vh,420px)!important; }
  .cpc-hero h1,.cpc-hero .elementor-heading-title{
    font-size:clamp(2.3rem,11vw,3.1rem)!important; line-height:1.05!important;
  }
  .cpc-hero .cpc-script .elementor-heading-title{ font-size:1.65rem!important; }
  .cpc-hero-tagline p{ font-size:1.02rem!important; }
  .cpc-hero::after{ height:34px; bottom:20px; }
  .elementor-button{ padding:17px 26px!important; font-size:.68rem!important; letter-spacing:.15em!important; }
  .cpc-card .elementor-image-box-content{ padding:20px 20px 24px; }
  .cpc-service-time{ font-size:1.75rem!important; }
  .cpc-cd-num{ font-size:1.7rem!important; }
  .cpc-cd-unit{ padding:2px 9px!important; }
  .cpc-leader .elementor-image-box-content{ text-align:center; }
  .cpc-stat .elementor-widget-container{ border-left:0; border-top:1px solid var(--cpc-hair-gold); padding:16px 0 0; }
}
@media (max-width:1024px){
  /* the transparent header only makes sense where the hero sits behind it */
  body.cpc-hero-page:not(.cpc-scrolled) #masthead .cpc-seam{
    background-color:var(--cpc-navy-900)!important; background-image:none!important;
  }
  body.cpc-hero-page:not(.cpc-scrolled) #masthead .cpc-topbar{ background-color:#020D1C!important; }
}

/* --------------------------------------------------------------------------
   31.18 Full-bleed sections
   Astra's .ast-container caps content width, which stopped the navy and cream
   bands short of the viewport edge on wide screens. Elementor's own container
   already controls the inner measure, so release the theme wrapper on
   full-width templates only.
   -------------------------------------------------------------------------- */
.page-template-elementor_header_footer #content .ast-container{
  max-width:100%!important; padding-left:0!important; padding-right:0!important;
}
.page-template-elementor_header_footer #content{ padding-left:0; padding-right:0; }
.page-template-elementor_header_footer .site-content > .ast-container{ display:block; }

/* --------------------------------------------------------------------------
   31.19 Hero composition
   -------------------------------------------------------------------------- */
/* Elementor button widgets stretch as flex items, which pushed the two hero
   CTAs to opposite ends of the row. Let them hug their own width. */
.cpc-hero .elementor-widget-button,
.cpc-cta-actions .elementor-widget-button{
  flex:0 0 auto!important; width:auto!important;
}



/* Inner hero column: hold the copy to a readable measure on wide screens. */
@media (min-width:1025px){
  .cpc-hero .cpc-hero-tagline p,
  .cpc-hero .elementor-widget-text-editor p{ max-width:34ch; }
}

/* --------------------------------------------------------------------------
   31.20 Hero layering
   The hero container renders as .e-con-full, so it has no .e-con-inner and
   Elementor already owns ::before for its background overlay. Raise the
   direct children instead of introducing a competing layer.
   -------------------------------------------------------------------------- */
.cpc-hero > *{ position:relative; z-index:2; }
.cpc-hero::after{ z-index:3; }

/* --------------------------------------------------------------------------
   31.21 Hero CTA row
   Elementor applies auto margins to button widgets from their alignment
   control, which pushed the two hero CTAs to opposite ends. Neutralise the
   margins and let the container's gap do the spacing.
   -------------------------------------------------------------------------- */
.cpc-hero .elementor-widget-button,
.cpc-hero .elementor-widget-button > .elementor-widget-container{
  margin-left:0!important; margin-right:0!important;
}
.cpc-hero .elementor-widget-button .elementor-button{ margin:0!important; }
.cpc-hero .e-con.e-flex:has(> .elementor-widget-button){
  justify-content:flex-start!important;
  gap:16px!important;
}

/* --------------------------------------------------------------------------
   31.22 Inner page heroes
   Banner proportions, quieter type, and no scroll cue - the cinematic
   treatment is reserved for the homepage so it stays a signature moment.
   -------------------------------------------------------------------------- */
body:not(.home) .cpc-hero::after{ display:none; }
body:not(.home) .cpc-hero h1,
body:not(.home) .cpc-hero .elementor-heading-title{
  font-size:clamp(2.3rem,4.6vw,3.9rem)!important;
  line-height:1.08!important;
}
body:not(.home) .cpc-hero .elementor-widget-text-editor p{
  font-size:1.02rem!important; max-width:56ch; margin-inline:auto;
}

/* --------------------------------------------------------------------------
   31.23 Narrow-tablet hero composition (approx. 460-680px)

   In this band the headline stops wrapping and sits on one line, so
   "Christ Peace Church" ran straight across the singer's face.

   Subject located by per-column focus (Laplacian) energy on hero-worship.jpg:
   the background is bokeh, the singer is the only sharp region. Energy is
   confined to 57-78% of the source width, face core 59-73%, peak at 65%.

   Cover scales by height here (source 1536x1024 is far wider than the
   portrait hero box), so only background-position-x changes the crop.
   At ~515px the visible window is ~44% of the source, which places the
   face at ~62-93% of the frame when position-x is 57%: fully in shot,
   held to the right, and clear of the headline.

   The headline is capped at 66% so it wraps to two lines and stays left.
   Desktop (>=1025px), 768px and 390px compositions are untouched.
   -------------------------------------------------------------------------- */
@media (min-width:460px) and (max-width:680px){
  body.home .cpc-hero{
    background-position:57% 30%!important;
  }
  body.home .cpc-hero h1,
  body.home .cpc-hero h1.elementor-heading-title{
    max-width:66%;
    font-size:clamp(2.4rem,8.4vw,3.2rem)!important;
    line-height:1.04!important;
  }
  /* the tagline and body copy sit below the subject, so they keep more room */
  body.home .cpc-hero .cpc-hero-tagline p{ max-width:74%; }
  body.home .cpc-hero .elementor-widget-text-editor p{ max-width:78%; }
}

/* ==========================================================================
   32. EDITORIAL CORRECTION PASS

   Every rule below fixes something measured on the rendered pages, not a
   matter of taste. Rationale is recorded inline so the next pass does not
   undo it by accident.
   ========================================================================== */

/* --------------------------------------------------------------------------
   32.1 Icon glyphs were invisible   [CRITICAL]

   Section 30 forced `fill:navy` on `.cpc-medallion/.cpc-service svg path`
   back when the glyph sat on a GOLD medallion disc. The luxury pass (31.10)
   removed that disc and recoloured the `svg` gold, but left section 30's
   `path` selector standing -- and the path is what actually paints.
   Result: navy glyph on a navy band, measured at 1.00-1.08:1. Invisible.
   Affected 8 icons on the homepage and the same component on 13 pages.

   The glyph now follows its band:
     gold      #E3A84C on navy  = 7.94:1 / 8.54:1
     gold-ink  #92672A on white = 5.01:1, on cream = 4.60:1
   -------------------------------------------------------------------------- */
.cpc-medallion .elementor-icon svg,
.cpc-medallion .elementor-icon svg path,
.cpc-service .elementor-icon svg,
.cpc-service .elementor-icon svg path{
  fill:var(--cpc-gold-ink)!important;
}
.cpc-medallion .elementor-icon i,
.cpc-service .elementor-icon i{ color:var(--cpc-gold-ink)!important; }

.cpc-on-dark .cpc-medallion .elementor-icon svg,
.cpc-on-dark .cpc-medallion .elementor-icon svg path,
.cpc-on-dark .cpc-service .elementor-icon svg,
.cpc-on-dark .cpc-service .elementor-icon svg path{
  fill:var(--cpc-gold)!important;
}
.cpc-on-dark .cpc-medallion .elementor-icon i,
.cpc-on-dark .cpc-service .elementor-icon i{ color:var(--cpc-gold)!important; }

/* --------------------------------------------------------------------------
   32.2 Scroll-to-top was Astra's default blue

   Measured rgb(4,107,210) -- a stock blue chip with no relationship to the
   brand, sitting over navy and cream alike on every page. Rebuilt as a
   quiet navy square with a gold hairline and gold glyph.
   Gold on navy = 8.54:1; inverted on hover, navy on gold = 8.54:1.
   -------------------------------------------------------------------------- */
#ast-scroll-top{
  background-color:var(--cpc-navy-900)!important;
  color:var(--cpc-gold)!important;
  border:1px solid rgba(227,168,76,.42)!important;
  border-radius:2px!important;
  width:44px!important; height:44px!important;
  line-height:42px!important;
  box-shadow:0 8px 24px rgba(4,23,46,.22)!important;
  transition:background-color .3s var(--cpc-ease),color .3s var(--cpc-ease),
             border-color .3s var(--cpc-ease);
}
#ast-scroll-top svg,
#ast-scroll-top svg path{ fill:currentColor!important; }
#ast-scroll-top:hover,
#ast-scroll-top:focus-visible{
  background-color:var(--cpc-gold)!important;
  color:var(--cpc-navy-900)!important;
  border-color:var(--cpc-gold)!important;
}

/* --------------------------------------------------------------------------
   32.3 Gold glow shadows

   Coloured drop shadows behind gold buttons (rgba(200,134,42,.28-.42))
   read as cheap and date the page. A premium button does not glow; it
   sits on the page and shifts weight on hover. Replaced with a restrained
   navy-tinted shadow at low opacity.
   The gold FOCUS ring is deliberately kept and strengthened -- that is an
   accessibility affordance, not decoration.
   -------------------------------------------------------------------------- */
.cpc-btn-gold .elementor-button,
.cpc-map-load,
.wpforms-container button[type=submit]{
  box-shadow:none!important;
}
.cpc-btn-gold .elementor-button:hover,
.cpc-map-load:hover,
.wpforms-container button[type=submit]:hover{
  box-shadow:0 10px 26px rgba(4,23,46,.18)!important;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{
  box-shadow:0 0 0 3px rgba(227,168,76,.34)!important;
}

/* --------------------------------------------------------------------------
   32.4 Heavy black shadows on framed media

   `0 10px 30px rgba(0,0,0,.35)` and `0 24px 40px rgba(0,0,0,.35)` are
   pure-black at 35% -- muddy against navy and grey against cream. The
   navy-tinted equivalents sit in the same colour family as the page.
   -------------------------------------------------------------------------- */
.cpc-framed img,
.cpc-framed .elementor-widget-image img,
.cpc-media-frame img{
  box-shadow:0 18px 44px rgba(4,23,46,.16)!important;
}

/* --------------------------------------------------------------------------
   32.5 Framed media used object-fit:fill

   `fill` stretches the photograph to the box instead of cropping it. It
   happens to look correct today only because the source and the frame are
   both 3:2 -- any future image at another ratio would be distorted, and
   faces distort worst. `cover` with a centred focal point is safe.
   -------------------------------------------------------------------------- */
.cpc-framed img,
.cpc-media-frame img,
.elementor-widget-image img{
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   32.6 Ad-hoc corner radii

   Radii of 4px, 5px, 6px and 10px had accumulated alongside the tokens.
   With the tokens retuned to 3px / 2px, these are pulled onto the same
   two-step scale so nothing reads as accidentally rounder than its
   neighbour. Circular avatars (50%) are untouched.
   -------------------------------------------------------------------------- */
.cpc-badge,
.cpc-note,
.cpc-pill,
.wpforms-container button[type=submit],
.cpc-map-load{ border-radius:2px!important; }

.cpc-countdown,
.cpc-countdown-unit{ border-radius:2px!important; }

/* ==========================================================================
   33. PLACEHOLDER BLOCK + COUNTDOWN CORRECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   33.1 The placeholder marker was a full-card gold slab   [CRITICAL]

   `.cpc-block-placeholder::before` carried `inset:0 0 -20px`, so a badge
   meant to be a 9.5px label bar stretched to the entire height of the block
   -- measured 350x728 of solid rgb(200,134,42) on the homepage. That single
   pseudo-element was the largest gold area on the site, swamping the
   ~5% gold budget and burying the event copy underneath it.

   It is now what it was always meant to be: a compact badge pinned to the
   top-left, with the block itself carrying a hairline gold outline to keep
   the "this is unverified content" signal unmistakable.

   Badge colour also corrected: white on #C8862A measured 3.25:1 and failed
   AA for its 9.5px bold text. Navy on #E3A84C is 8.54:1.
   -------------------------------------------------------------------------- */
.cpc-block-placeholder{
  position:relative;
  padding:44px 22px 24px!important;
  outline:1px solid rgba(227,168,76,.55);
  outline-offset:0;
  /* no background wash: it darkened the band to rgb(246,241,233) and pushed
     the #92672A eyebrow/verse from 4.60:1 to 4.46:1, under AA. The outline
     and badge already mark the block unmistakably. */
}
.cpc-block-placeholder::before{
  inset:auto!important;
  top:0!important; left:0!important;
  right:auto!important; bottom:auto!important;
  width:auto!important; height:auto!important;
  background:var(--cpc-gold)!important;
  color:var(--cpc-navy-900)!important;
  font-size:.62rem!important;
  font-weight:700;
  letter-spacing:.2em;
  padding:7px 12px!important;
  border-radius:0!important;
  white-space:nowrap;
}

@media (max-width:480px){
  .cpc-block-placeholder{ padding:40px 16px 20px!important; }
  .cpc-block-placeholder::before{
    font-size:.55rem!important; letter-spacing:.14em; white-space:normal;
  }
}

/* --------------------------------------------------------------------------
   33.2 Countdown was white text on a cream band   [CRITICAL]

   `.cpc-cd-num` is white and `.cpc-cd-lab` is white at 55% opacity. That is
   correct on a navy band, but the homepage featured event sits on cream:
   measured 1.05:1 for both. The digits were completely invisible.

   The component now takes its colour from its band, like the icons do.
   Labels were also 8.17px, which is below comfortable reading; raised to
   10.88px with the tracking kept.
     navy  #04172E on cream #F7F5F1 = 15.2:1
     ink-soft #4A5568 on cream      = 6.37:1
   -------------------------------------------------------------------------- */
.cpc-countdown .cpc-cd-num{ color:var(--cpc-navy-900)!important; }
.cpc-countdown .cpc-cd-lab{
  color:var(--cpc-ink-soft)!important;
  font-size:.68rem!important;
  letter-spacing:.18em;
}
.cpc-on-dark .cpc-countdown .cpc-cd-num{ color:var(--cpc-white)!important; }
.cpc-on-dark .cpc-countdown .cpc-cd-lab{ color:rgba(255,255,255,.78)!important; }

/* Hairline separators read better than boxes on both bands. */
.cpc-countdown .cpc-cd-unit{ border-color:rgba(4,23,46,.14)!important; }
.cpc-on-dark .cpc-countdown .cpc-cd-unit{ border-color:rgba(255,255,255,.16)!important; }

/* ==========================================================================
   34. PLACEHOLDER TEXT LEGIBILITY
   ========================================================================== */

/* --------------------------------------------------------------------------
   34.1 Placeholder text was invisible on the leader cards   [CRITICAL]

   The leadership band is `.cpc-on-dark` (navy), so its text rules paint
   white. But each leader card is a WHITE island inside that band --
   confirmed on the ancestor chain: the card element computes
   `background-color: rgb(255,255,255)`. The on-dark white therefore landed
   on white, and `.cpc-ph` only adds a 24% gold wash on top.

   Measured on the homepage: 18 of 20 `.cpc-ph` spans failing.
     name  "Pastor Name"   white on rgb(248,234,212) = 1.18:1
     role  "Senior Pastor" gold  on rgb(248,234,212) = 1.78:1
     bio   white 70%                                 = 1.13:1

   Leadership names, roles and biographies were unreadable.

   Rather than patch one card, the placeholder chip is made self-contained:
   it carries its own OPAQUE tint and its own dark ink, so it is legible on
   navy, cream and white alike and never inherits a band colour again. That
   also serves the content rule -- unverified copy must be unmistakable.
     navy    #04172E on #F7E8CA = 15.0:1
     gold-dp #775322 on #F7E8CA =  5.7:1  (role keeps a gold character)
   -------------------------------------------------------------------------- */
.cpc-ph{
  background:#F7E8CA!important;
  color:var(--cpc-navy-900)!important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.cpc-ph.cpc-leader-role,
.cpc-ph .cpc-leader-role,
.cpc-leader-role.cpc-ph{ color:#775322!important; }

/* The same leak affects any light card dropped into a dark band. */
.cpc-on-dark .elementor-widget-image-box .elementor-image-box-content .cpc-ph,
.cpc-on-dark .elementor-image-box-title .cpc-ph,
.cpc-on-dark .elementor-image-box-description .cpc-ph{
  color:var(--cpc-navy-900)!important;
}

/* --------------------------------------------------------------------------
   34.2 Placeholder note tag failed AA

   `.cpc-ph-tag` was white on #C8862A = 3.04:1 at 9.9px bold, short of the
   4.5:1 required for text at that size. Navy on #E3A84C is 8.54:1 and
   matches the badge introduced in 33.1, so the two markers now agree.
   -------------------------------------------------------------------------- */
.cpc-ph-tag{
  background:var(--cpc-gold)!important;
  color:var(--cpc-navy-900)!important;
}

/* ==========================================================================
   35. WCAG 2.2 TARGET SIZE
   ========================================================================== */

/* --------------------------------------------------------------------------
   35.1 Interactive targets were 23px tall

   WCAG 2.2 AA 2.5.8 (Target Size, Minimum) requires 24x24 CSS px. The topbar
   contact links and the footer quick-links rendered at exactly 23px -- one
   pixel short, because the Elementor icon-list item had no padding and the
   line-height resolved to 22.75px.

   Raising the line-box to 24px fixes all five without moving anything: the
   rows already had more than 1px of surrounding space, so nothing reflows.
   -------------------------------------------------------------------------- */
.elementor-icon-list-item > a,
.elementor-icon-list-item > .elementor-icon-list-text,
.cpc-topbar .elementor-icon-list-item a,
.hfe-nav-menu a.hfe-menu-item{
  min-height:24px;
  display:flex;
  align-items:center;
}