/* =========================================================
   Site Styles (drop-in replacement)
   - Full-bleed hero (content centered)
   - Full-bleed newsletter (gradient → footer)
   - Full-bleed footer (dark navy)
   - Clean nav + cards + utilities
========================================================= */

/* ============================
   CUSTOM
============================ */

@media only screen and (min-width: 993px) {
    .container {
        width: 85% !important;
    }
}

/* ============================
   NAV / HEADER
============================ */
.site-header nav.white { box-shadow: none; border-bottom: 1px solid #eee; }
.nav-flex { display: flex; align-items: center; }
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 34px; width: auto; }
.brand-wordmark { font-weight: 700; color: #1a1a1a; letter-spacing: .2px; }
.brand-wordmark small { font-weight: 600; color: #9e9e9e; margin-left: 4px; }

/* Centered desktop menu */
.nav-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.nav-center > li > a { font-weight: 600; color: #212121 !important; }
.nav-utilities > li > a { font-weight: 600; }

.dropdown-content.menu-dropdown { min-width: 220px; border-radius: 6px; }
.dropdown-content.menu-dropdown li > a { padding: 12px 16px; }

/* Mobile menu styles */
.sidenav-trigger { display: none !important; }
@media only screen and (max-width: 992px) {
  .sidenav-trigger { display: block !important; }
  .hide-on-med-and-down { display: none !important; }
}

.sidenav { width: 280px; }
.sidenav li > a { font-size: 16px; font-weight: 500; }
.sidenav .collapsible-header { padding: 0 32px; }
.sidenav .collapsible-body ul { margin: 0; }
.sidenav .collapsible-body li > a { padding-left: 48px; font-size: 14px; }

/* ============================
   HERO (full-bleed, centered)
============================ */
.hero-modern{
  position:relative;
  width:100vw;                         /* edge-to-edge */
  margin-left:calc(50% - 50vw);        /* keep page grid centered */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:72vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-overlay{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.hero-inner{ position:relative; z-index:2; padding:36px 0; }
.hero-title{ color:#fff; font-weight:800; margin:0 0 8px; }
.hero-title .thin{ font-weight:300; }
.hero-sub{ color:rgba(255,255,255,.9); margin-bottom:16px; }
.hero-ctas .btn-large{ border-radius:8px; margin-right:10px; }
.hero-media-card .card{ border-radius:10px; overflow:hidden; }
.responsive-video{ position:relative; padding-bottom:56.25%; height:0; }
.responsive-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width:992px){
  .hero-modern{ min-height:60vh; }
  .hero-title{ font-size:2.2rem; }
}

/* ============================
   QUICK ACTIONS
============================ */
.quick-actions{
  background:#f7f8fb;
  padding:18px 0;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.action-pill .btn-large{ width:100%; border-radius:999px; }

/* ============================
   SECTION HEADERS
============================ */
.section-head{ margin-bottom:10px; }
.section-title{ font-weight:800; margin:0; }

/* ============================
   CARDS / FEATURES / EVENTS
============================ */
.card .card-image img{ display:block; width:100%; height:auto; }
.feature-card .card-image img{ height:200px; object-fit:cover; }
.h-event .chip{ margin-bottom:8px; }

/* ============================
   MINISTRIES CHIPS
============================ */
.ministries-cloud .chips-cloud{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.ministries-cloud .chip{ font-weight:600; border-radius:999px; }

/* ============================
   NEWSLETTER STRIP (full width
   + gradient fading into footer)
============================ */
.newsletter-strip{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  /* left→right blue + subtle bottom fade to darker blue for footer handoff */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,20,64,0.25) 100%),
    linear-gradient(90deg, #0047bb 0%, #002f7a 100%);
  color:#fff;
  padding:60px 0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
}
.newsletter-strip .container{ position:relative; z-index:2; }
.newsletter-strip .input-field input{
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.7);
}
.newsletter-strip .input-field input:focus{
  border-bottom:2px solid #ffb300; box-shadow:none;
}
.newsletter-strip label{ color:rgba(255,255,255,.85); }
.newsletter-strip button.btn-large{
  border-radius:6px; text-transform:uppercase; font-weight:600;
}

@media (max-width:992px){
  .newsletter-strip{ padding:40px 0; text-align:center; }
  .newsletter-strip .input-field{ text-align:left; }
}

/* ============================
   FOOTER (full-bleed dark base)
============================ */
.site-footer{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:60px;
  background:linear-gradient(180deg, #001e60 0%, #000c32 100%);
  color:#fff;
  padding:60px 0 20px;
  overflow:hidden;
}
.footer-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.3); z-index:1; }
.footer-inner{ position:relative; z-index:2; }
.footer-inner .row{ margin-bottom:40px; }
.footer-buttons .btn{ margin-left:8px; border-radius:6px; text-transform:uppercase; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:16px;
  text-align:center;
  font-size:.95rem;
  color:rgba(255,255,255,.85);
}

@media (max-width:992px){
  .site-footer{ margin-top:40px; }
  .footer-buttons{ text-align:center; margin-top:20px; }
}

/* ============================
   UTILITIES
============================ */
.no-margin{ margin:0 !important; }
.section-muted{ background:#fafafa; }
.strong{ font-weight:600; }