/*
Theme Name: Bishop Street CoC
Theme URI: https://bishopstcoc.com
Author: Bishop Street Church of Christ
Author URI: https://bishopstcoc.com
Description: A clean, modern Royal Blue & White theme for Bishop Street Church of Christ. Built for Astra (Outdoor Adventure starter) with full Gutenberg block support and responsive design for all devices.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bishopst-coc
Template: astra
Tags: church, christian, modern, responsive, blue, white, gutenberg
*/

/* ================================================
   BISHOP STREET COC — THEME STYLESHEET
   Royal Blue & White | Clean Modern Church
   ================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --color-royal-blue:     #1B4EA8;
  --color-royal-dark:     #0F3580;
  --color-royal-light:    #2D6FD9;
  --color-sky:            #EBF2FF;
  --color-gold:           #C8972B;
  --color-white:          #FFFFFF;
  --color-off-white:      #F8FAFF;
  --color-text:           #1A1F2E;
  --color-text-muted:     #5A6072;
  --color-border:         #D8E4F5;
  --color-overlay:        rgba(11, 37, 90, 0.72);

  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Source Sans 3', 'Helvetica Neue', sans-serif;
  --font-ui:       'Outfit', 'Helvetica Neue', sans-serif;

  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  20px;
  --radius-xl:  40px;

  --shadow-card:  0 4px 24px rgba(27,78,168,0.10);
  --shadow-btn:   0 4px 18px rgba(27,78,168,0.32);
  --shadow-hero:  0 8px 48px rgba(11,37,90,0.22);

  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --max-width: 1200px;
  --section-pad: 100px;
}

/* ---------- Google Fonts Import ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@300;400;600;700&family=Outfit:wght@400;500;600;700&display=swap');

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-royal-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-royal-dark); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--color-text);
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.25rem; }

p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

/* ---------- Utility ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.text-center { text-align: center; }
.text-blue { color: var(--color-royal-blue); }
.text-gold { color: var(--color-gold); }
.section-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-royal-blue);
  display: block;
  margin-bottom: 12px;
}
.divider-gold {
  width: 56px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  margin: 18px auto 32px;
}
.divider-gold.left { margin-left: 0; }

/* ================================================
   HEADER & NAVIGATION
   ================================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  box-shadow: 0 2px 20px rgba(27,78,168,0.09);
  transition: box-shadow var(--transition);
}

.header-top-bar {
  background: var(--color-royal-blue);
  color: var(--color-white);
  padding: 8px 0;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}
.header-top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.header-top-bar a { color: var(--color-white); opacity: 0.92; }
.header-top-bar a:hover { opacity: 1; }
.top-bar-phone::before { content: "📞 "; }
.top-bar-donate {
  background: var(--color-gold);
  color: var(--color-white) !important;
  padding: 4px 16px;
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.06em;
  transition: background var(--transition);
}
.top-bar-donate:hover { background: #a87820 !important; }

.header-main {
  padding: 16px 0;
}
.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-branding {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.site-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-royal-blue);
}
.site-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-royal-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  flex-shrink: 0;
  border: 3px solid var(--color-royal-blue);
}
.site-name-wrap { line-height: 1.2; }
.site-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-royal-dark);
  display: block;
}
.site-tagline {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  font-style: italic;
}

/* Nav */
.primary-nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
.nav-link:hover, .nav-link.active {
  color: var(--color-royal-blue);
  background: var(--color-sky);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--color-royal-blue);
  border-radius: 1px;
}
.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  position: absolute;
  /* top: 100% puts the menu flush against the nav bar with zero gap.
     The 8px visual separation is achieved via padding-top on the menu
     itself, so the hover area is continuous — no gap for the mouse to
     cross and lose the hover state.                                    */
  top: 100%;
  left: 0;
  /* padding-top bridges the visual gap while keeping hover area solid */
  padding-top: 8px;
  background: transparent;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  /* Show fast, hide with a delay — gives the cursor time to reach menu */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.25s;
  visibility: hidden;
  z-index: 1000;
}

/* Inner wrapper carries the visual card styling */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hero);
  border: 1px solid var(--color-border);
  z-index: -1;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  /* Show immediately, cancel any pending hide delay */
  visibility: visible;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--color-text);
  transition: all var(--transition);
  border-radius: 0;
}
.nav-dropdown-menu a:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.nav-dropdown-menu a:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.nav-dropdown-menu a:hover {
  background: var(--color-sky);
  color: var(--color-royal-blue);
  padding-left: 24px;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-royal-blue);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--color-royal-blue);
  font-size: 1.2rem;
  line-height: 1;
}
.mobile-nav {
  display: none;
  background: var(--color-off-white);
  border-top: 2px solid var(--color-border);
  padding: 16px 0 24px;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 12px 24px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
}
.mobile-nav a:hover { color: var(--color-royal-blue); background: var(--color-sky); }
.mobile-nav .mobile-donate {
  margin: 16px 24px 0;
  display: block;
  text-align: center;
  background: var(--color-gold);
  color: white !important;
  border-radius: var(--radius-xl);
  padding: 12px 24px;
  font-weight: 700;
  border-bottom: none;
}

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  border-radius: var(--radius-xl);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.2;
}
.btn-primary {
  background: var(--color-royal-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: var(--color-royal-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(27,78,168,0.42);
}
.btn-outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.7);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.15);
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-gold {
  background: var(--color-gold);
  color: var(--color-white);
  box-shadow: 0 4px 18px rgba(200,151,43,0.4);
}
.btn-gold:hover {
  background: #a87820;
  color: var(--color-white);
  transform: translateY(-2px);
}
.btn-lg { padding: 17px 42px; font-size: 1rem; }
.btn-sm { padding: 9px 22px; font-size: 0.82rem; }

/* ================================================
   HERO SECTION
   ================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-royal-dark);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(11,37,90,0.88) 0%, rgba(27,78,168,0.75) 50%, rgba(11,37,90,0.92) 100%),
    url('images/hero-placeholder.jpg');
  background-size: cover;
  background-position: center;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(255,255,255,0.5) 20px,
    rgba(255,255,255,0.5) 21px
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  max-width: 700px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-xl);
  padding: 6px 18px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 24px;
}
.hero h1 {
  color: var(--color-white);
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--color-gold);
  font-style: italic;
  margin-bottom: 20px;
}
.hero-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 36px;
  line-height: 1.75;
  max-width: 560px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}
.hero-scroll-arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255,255,255,0.5);
  border-bottom: 2px solid rgba(255,255,255,0.5);
  transform: rotate(45deg);
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ================================================
   SERVICE TIMES STRIP
   ================================================ */
.service-strip {
  background: var(--color-royal-blue);
  padding: 28px 0;
  overflow: hidden;
}
.service-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.service-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 36px;
  color: var(--color-white);
  border-right: 1px solid rgba(255,255,255,0.2);
}
.service-strip-item:last-child { border-right: none; }
.service-strip-day {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.service-strip-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.service-strip-time {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

/* ================================================
   WELCOME SECTION
   ================================================ */
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--color-off-white); }
.section-blue { background: var(--color-royal-blue); }
.section-dark { background: var(--color-royal-dark); }

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.welcome-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
}
.welcome-img-wrap img,
.welcome-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.welcome-img-placeholder {
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-border) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.welcome-img-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: var(--color-royal-blue);
  color: white;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.welcome-img-badge-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  display: block;
  line-height: 1;
}
.welcome-img-badge-txt {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.welcome-content h2 { margin-bottom: 6px; }
.welcome-features {
  list-style: none;
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.welcome-features li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.98rem;
  color: var(--color-text-muted);
}
.feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  margin-top: 2px;
}

/* ================================================
   CARDS (Worship Life, etc.)
   ================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hero);
}
.card-icon-wrap {
  background: var(--color-sky);
  padding: 40px 32px 32px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.card-icon {
  width: 52px;
  height: 52px;
  background: var(--color-royal-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.card-body { padding: 28px 32px; }
.card-body h3 { margin-bottom: 10px; font-size: 1.25rem; }
.card-body p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; }

/* ================================================
   SCRIPTURE FEATURE SECTION
   ================================================ */
.scripture-section {
  background: var(--color-royal-dark);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.scripture-section::before {
  content: '"';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 30rem;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  pointer-events: none;
}
.scripture-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--color-white);
  font-style: italic;
  line-height: 1.5;
  max-width: 820px;
  margin: 0 auto 20px;
}
.scripture-ref {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ================================================
   EVENTS SECTION
   ================================================ */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.event-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: flex;
  gap: 20px;
  padding: 22px;
  transition: box-shadow var(--transition), transform var(--transition);
  align-items: flex-start;
}
.event-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.event-date-block {
  background: var(--color-royal-blue);
  color: white;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: center;
  min-width: 58px;
  flex-shrink: 0;
}
.event-month {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}
.event-day {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}
.event-info h4 { font-size: 1rem; margin-bottom: 4px; }
.event-info .event-time {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-royal-blue);
  font-weight: 600;
  margin-bottom: 6px;
}
.event-info p { font-size: 0.88rem; color: var(--color-text-muted); margin: 0; }

/* ================================================
   SERMON / WATCH LIVE SECTION
   ================================================ */
.sermon-feature {
  background: var(--color-royal-blue);
  border-radius: var(--radius-lg);
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.sermon-feature-text h2, .sermon-feature-text p { color: white; }
.sermon-feature-text h2 { margin-bottom: 12px; }
.sermon-feature-text p { opacity: 0.88; margin-bottom: 28px; }
.sermon-feature-video {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* When a real video embed is injected from the editor */
.sermon-editor-video { width: 100%; height: 100%; }
.sermon-editor-video figure,
.sermon-editor-video .wp-block-embed,
.sermon-editor-video .wp-block-embed__wrapper { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
.sermon-editor-video iframe { width: 100% !important; height: 100% !important; display: block; border: none; }
.sermon-editor-video .wp-block-embed__wrapper::after { display: none !important; } /* remove WP padding-top hack */

.video-placeholder-inner {
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-ui);
}
.play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.5rem;
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,0.3);
}
/* Contact form from editor */
.editor-contact-form input,
.editor-contact-form textarea,
.editor-contact-form select { width: 100%; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.98rem; margin-bottom: 14px; outline: none; transition: border-color var(--transition); }
.editor-contact-form input:focus,
.editor-contact-form textarea:focus { border-color: var(--color-royal-blue); box-shadow: 0 0 0 3px rgba(27,78,168,0.1); }
.editor-contact-form input[type="submit"],
.editor-contact-form button[type="submit"] { background: var(--color-royal-blue); color: white; border: none; cursor: pointer; border-radius: var(--radius-xl); padding: 14px 32px; font-weight: 700; font-family: var(--font-ui); font-size: 0.92rem; width: auto; transition: all var(--transition); }
.editor-contact-form input[type="submit"]:hover,
.editor-contact-form button[type="submit"]:hover { background: var(--color-royal-dark); transform: translateY(-2px); }
/* Contact map embed */
.contact-map-embed iframe { width: 100% !important; height: 300px; display: block; border: none; }

/* ================================================
   LOCATION SECTION
   ================================================ */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.location-map-placeholder {
  background: linear-gradient(135deg, var(--color-sky) 0%, #c8daff 100%);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-royal-blue);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  border: 2px dashed var(--color-border);
}
.location-map-placeholder .map-icon { font-size: 3rem; opacity: 0.6; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}
.contact-detail:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-icon {
  width: 44px;
  height: 44px;
  background: var(--color-sky);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--color-royal-blue);
}
.contact-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.contact-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.contact-value a { color: var(--color-royal-blue); }

/* ================================================
   FOOTER
   ================================================ */
#site-footer {
  background: var(--color-royal-dark);
  color: rgba(255,255,255,0.8);
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  /* 4-column layout when Quick Links menu is assigned.
     auto-fit collapses gracefully to 3 columns when the
     Quick Links column is absent (hidden via PHP). */
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
/* When Quick Links column is hidden, reflow to 3 columns */
.footer-grid > .footer-brand:first-child:nth-last-child(3),
.footer-grid > .footer-brand:first-child:nth-last-child(3) ~ .footer-col {
  grid-template-columns: 2fr 1fr 1fr;
}
.footer-brand .footer-logo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: white;
  margin-bottom: 16px;
}
.footer-site-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: white;
  margin-bottom: 4px;
  display: block;
}
.footer-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--color-gold);
  margin-bottom: 18px;
}
.footer-about { font-size: 0.88rem; line-height: 1.7; margin-bottom: 24px; }
.footer-social { display: flex; gap: 12px; }
/* Social buttons — white circle, brand-colored icon inside */
.social-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  border: none;
}
.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  background: #ffffff;
}

/* Facebook — official brand blue icon on white */
.social-btn--facebook svg { width: 18px; height: 18px; }

/* YouTube — official brand red icon on white */
.social-btn--youtube svg { width: 22px; height: 15px; }
.footer-col-title {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
  transition: color var(--transition);
}
.footer-links a:hover { color: white; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-ui);
}
.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover { color: white; }

/* ================================================
   PAGE HERO (inner pages)
   ================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--color-royal-dark) 0%, var(--color-royal-blue) 100%);
  padding: 72px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 20px,
    rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 21px
  );
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: white; margin-bottom: 12px; }
.page-hero-sub {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  max-width: 520px;
  margin: 0 auto;
}
.breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-gold); }

/* ================================================
   SERVICE TIMES PAGE
   ================================================ */
.times-table-wrap {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.times-table {
  width: 100%;
  border-collapse: collapse;
}
.times-table th {
  background: var(--color-royal-blue);
  color: white;
  padding: 18px 28px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
}
.times-table td {
  padding: 18px 28px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: 1rem;
}
.times-table tr:last-child td { border-bottom: none; }
.times-table tr:hover td { background: var(--color-sky); }
.times-table .time-val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-royal-blue);
  font-weight: 700;
}

/* ================================================
   GIVE / DONATE CTA STRIP
   ================================================ */
.give-cta {
  background: linear-gradient(135deg, var(--color-gold) 0%, #a87820 100%);
  padding: 60px 0;
  text-align: center;
}
.give-cta h2 { color: white; margin-bottom: 12px; }
.give-cta p { color: rgba(255,255,255,0.88); max-width: 560px; margin: 0 auto 28px; }
.btn-white {
  background: white;
  color: var(--color-royal-dark);
  font-weight: 700;
}
.btn-white:hover {
  background: var(--color-off-white);
  color: var(--color-royal-dark);
  transform: translateY(-2px);
}

/* ================================================
   CONTACT FORM
   ================================================ */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.form-input, .form-textarea {
  width: 100%;
  padding: 13px 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition);
  outline: none;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--color-royal-blue);
  box-shadow: 0 0 0 3px rgba(27,78,168,0.1);
}
.form-textarea { min-height: 140px; resize: vertical; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  :root { --section-pad: 72px; }
  .welcome-grid { gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sermon-feature { padding: 40px; gap: 40px; }
}

@media (max-width: 768px) {
  :root { --section-pad: 56px; }

  .primary-nav { display: none; }
  .nav-toggle { display: flex; }

  .welcome-grid,
  .location-grid,
  .sermon-feature { grid-template-columns: 1fr; gap: 36px; }

  .service-strip-item { padding: 12px 20px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .hero { min-height: 80vh; }
  .hero-buttons { flex-direction: column; gap: 12px; }
  .hero-buttons .btn { width: 100%; justify-content: center; }

  .sermon-feature { text-align: center; }
  .welcome-img-badge { bottom: 12px; right: 12px; }
}

@media (max-width: 480px) {
  :root { --section-pad: 44px; }
  .service-strip .container { flex-direction: column; gap: 0; }
  .service-strip-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); width: 100%; }
  .service-strip-item:last-child { border-bottom: none; }
  .cards-grid { grid-template-columns: 1fr; }
  .header-top-bar .container { justify-content: center; }
}

/* ================================================
   ASTRA COMPATIBILITY OVERRIDES
   ================================================ */
.ast-container { max-width: var(--max-width) !important; }
.ast-separate-container .ast-article-post { padding: 0; }
.entry-content { max-width: none; }

/* Gutenberg block alignment */
.wp-block-group.alignfull,
.wp-block-cover.alignfull { margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)); margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)); }

/* Block Editor Color Palette */
.has-royal-blue-background-color { background-color: var(--color-royal-blue) !important; }
.has-royal-dark-background-color  { background-color: var(--color-royal-dark) !important; }
.has-gold-background-color         { background-color: var(--color-gold) !important; }
.has-sky-background-color          { background-color: var(--color-sky) !important; }
.has-royal-blue-color  { color: var(--color-royal-blue) !important; }
.has-gold-color        { color: var(--color-gold) !important; }

/* ================================================
   INNER PAGE CONTENT — Block Editor Output
   ================================================ */

.page-content-wrap {
  padding: 72px 0 96px;
}
.page-content-wrap .entry-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text);
}

/* Full/wide alignment breakouts */
.page-content-wrap .entry-content .alignfull,
.page-content-wrap .entry-content .wp-block-group.alignfull,
.page-content-wrap .entry-content .wp-block-cover.alignfull {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.page-content-wrap .entry-content .alignwide {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Headings */
.entry-content h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-top: 56px; margin-bottom: 16px; color: var(--color-royal-dark); }
.entry-content h2:first-child { margin-top: 0; }
.entry-content h3 { font-size: clamp(1.2rem,2vw,1.5rem); margin-top: 40px; margin-bottom: 12px; }
.entry-content h4 { margin-top: 28px; margin-bottom: 10px; }

/* Body text */
.entry-content p  { margin-bottom: 1.3em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.3em 1.5em; }
.entry-content li { margin-bottom: 0.5em; }
.entry-content a  { color: var(--color-royal-blue); text-decoration: underline; }
.entry-content a:hover { color: var(--color-royal-dark); }

/* Tables */
.entry-content table { width:100%; border-collapse:collapse; margin-bottom:2em; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.entry-content thead th { background:var(--color-royal-blue); color:white; padding:16px 22px; font-family:var(--font-ui); font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; text-align:left; }
.entry-content tbody td { padding:15px 22px; border-bottom:1px solid var(--color-border); font-family:var(--font-ui); }
.entry-content tbody tr:last-child td { border-bottom:none; }
.entry-content tbody tr:hover td { background:var(--color-sky); }

/* Buttons */
.entry-content .wp-block-button__link { background:var(--color-royal-blue); color:white !important; border-radius:var(--radius-xl) !important; padding:14px 32px !important; font-family:var(--font-ui); font-weight:700; font-size:0.92rem; transition:all var(--transition); text-decoration:none !important; }
.entry-content .wp-block-button__link:hover { background:var(--color-royal-dark) !important; transform:translateY(-2px); }
.entry-content .wp-block-button.is-style-outline .wp-block-button__link { background:transparent !important; color:var(--color-royal-blue) !important; border:2px solid var(--color-royal-blue) !important; }

/* Images */
.entry-content figure { margin-bottom:2em; }
.entry-content figure img { border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
.entry-content figcaption { text-align:center; font-size:0.82rem; color:var(--color-text-muted); margin-top:8px; font-style:italic; }

/* Groups */
.entry-content .wp-block-group { padding:48px; border-radius:var(--radius-lg); }
.entry-content .wp-block-group.has-royal-blue-background-color h2,
.entry-content .wp-block-group.has-royal-blue-background-color h3,
.entry-content .wp-block-group.has-royal-blue-background-color p { color:white; }
.entry-content .wp-block-group.has-sky-background-color { border:1px solid var(--color-border); }

/* Separators */
.entry-content hr, .entry-content .wp-block-separator { border:none; border-top:2px solid var(--color-border); margin:48px 0; }

/* Quotes */
.entry-content blockquote, .entry-content .wp-block-quote { border-left:4px solid var(--color-royal-blue); padding:8px 0 8px 28px; margin:2em 0; font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--color-royal-dark); }
.entry-content .wp-block-pullquote { border-top:4px solid var(--color-royal-blue); border-bottom:4px solid var(--color-royal-blue); text-align:center; padding:32px; font-family:var(--font-display); font-style:italic; font-size:clamp(1.2rem,2.5vw,1.6rem); color:var(--color-royal-dark); }

/* Contact Form 7 */
.entry-content .wpcf7 input[type="text"],
.entry-content .wpcf7 input[type="email"],
.entry-content .wpcf7 input[type="tel"],
.entry-content .wpcf7 textarea { width:100%; padding:13px 18px; border:2px solid var(--color-border); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:0.98rem; color:var(--color-text); background:var(--color-white); transition:border-color var(--transition); outline:none; margin-bottom:14px; }
.entry-content .wpcf7 input:focus, .entry-content .wpcf7 textarea:focus { border-color:var(--color-royal-blue); box-shadow:0 0 0 3px rgba(27,78,168,0.1); }
.entry-content .wpcf7 input[type="submit"] { background:var(--color-royal-blue); color:white; border:none; border-radius:var(--radius-xl); padding:14px 36px; font-family:var(--font-ui); font-weight:700; font-size:0.95rem; cursor:pointer; transition:all var(--transition); width:auto; }
.entry-content .wpcf7 input[type="submit"]:hover { background:var(--color-royal-dark); transform:translateY(-2px); }
.entry-content .wpcf7-not-valid-tip { color:#c0392b; font-size:0.82rem; }
.entry-content .wpcf7-mail-sent-ok  { color:#27ae60; padding:12px; border:1px solid #27ae60; border-radius:var(--radius-sm); margin-top:12px; }

/* YouTube / Video embeds */
.entry-content .wp-block-embed { margin-bottom:2em; }
.entry-content .wp-block-embed__wrapper { position:relative; padding-top:56.25%; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.entry-content .wp-block-embed__wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* Google Maps iframe */
.entry-content iframe[src*="google.com/maps"] { width:100%; height:400px; border:none; border-radius:var(--radius-md); box-shadow:var(--shadow-card); display:block; margin-bottom:2em; }

/* Responsive */
@media (max-width: 768px) {
  .page-content-wrap { padding: 48px 0 72px; }
  .entry-content .wp-block-group { padding: 28px 24px; }
}

/* ================================================
   HOMEPAGE BLOCKS — Custom HTML block styling
   All homepage sections use wp-block-html with
   class names below. Edit freely in the block editor.
   ================================================ */

/* Full-width block breakout on homepage */
.homepage-content .wp-block-group.alignfull,
.homepage-content .wp-block-html {
  margin-left: 0;
  margin-right: 0;
}

/* ── Hero ── */
.bscoc-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-royal-dark);
  padding: 80px 0;
}
.bscoc-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,37,90,0.88) 0%, rgba(27,78,168,0.75) 50%, rgba(11,37,90,0.92) 100%);
  background-size: cover;
  background-position: center;
}
.bscoc-hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.bscoc-hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.5) 20px, rgba(255,255,255,0.5) 21px);
}
.bscoc-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.bscoc-hero-inner { max-width: 680px; }
.bscoc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-xl);
  padding: 6px 18px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 24px;
}
.bscoc-hero h1 {
  color: var(--color-white);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  line-height: 1.1;
}
.bscoc-hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--color-gold);
  font-style: italic;
  margin-bottom: 18px;
}
.bscoc-hero-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.86);
  margin-bottom: 36px;
  line-height: 1.75;
  max-width: 540px;
}
.bscoc-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Service Times Strip ── */
.bscoc-service-strip {
  background: var(--color-royal-blue);
  padding: 28px 0;
}
.bscoc-service-strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.bscoc-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 36px;
  color: var(--color-white);
  border-right: 1px solid rgba(255,255,255,0.2);
}
.bscoc-service-item:last-child { border-right: none; }
.bscoc-service-day {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 3px;
}
.bscoc-service-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.bscoc-service-time {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

/* ── Generic section wrappers ── */
.bscoc-section {
  padding: var(--section-pad) 0;
}
.bscoc-section-alt { background: var(--color-off-white); }
.bscoc-section-dark { background: var(--color-royal-dark); }
.bscoc-section-blue { background: var(--color-royal-blue); }
.bscoc-section-gold { background: linear-gradient(135deg, var(--color-gold) 0%, #a87820 100%); }

.bscoc-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.bscoc-inner-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}
.bscoc-center { text-align: center; }

/* ── Section heading helper ── */
.bscoc-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-royal-blue);
  display: block;
  margin-bottom: 10px;
}
.bscoc-label-light { color: rgba(255,255,255,0.6); }
.bscoc-gold-bar {
  width: 56px; height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  margin: 16px auto 32px;
}
.bscoc-gold-bar-left { margin-left: 0; }

/* ── Two-column welcome layout ── */
.bscoc-welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.bscoc-welcome-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  flex-direction: column;
  gap: 8px;
}
.bscoc-welcome-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Feature list ── */
.bscoc-feature-list { list-style: none; margin: 24px 0 32px; display: flex; flex-direction: column; gap: 14px; }
.bscoc-feature-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 0.98rem; color: var(--color-text-muted); }
.bscoc-feature-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-sky);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.9rem; margin-top: 2px;
}

/* ── Scripture section ── */
.bscoc-scripture {
  background: var(--color-royal-dark);
  padding: 90px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bscoc-scripture-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  color: var(--color-white);
  font-style: italic;
  line-height: 1.55;
  max-width: 820px;
  margin: 0 auto 20px;
}
.bscoc-scripture-ref {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Worship cards grid ── */
.bscoc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.bscoc-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bscoc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hero); }
.bscoc-card-top {
  background: var(--color-sky);
  padding: 28px 28px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bscoc-card-icon {
  width: 48px; height: 48px;
  background: var(--color-royal-blue);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.bscoc-card-top h3 { font-size: 1.1rem; margin-bottom: 2px; }
.bscoc-card-top p  { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }
.bscoc-card-body { padding: 22px 28px; }
.bscoc-card-body p { font-size: 0.93rem; color: var(--color-text-muted); margin: 0; }

/* ── Sermon feature panel ── */
.bscoc-sermon-panel {
  background: var(--color-royal-blue);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.bscoc-sermon-text h2,
.bscoc-sermon-text p { color: white; }
.bscoc-sermon-text p { opacity: 0.88; margin-bottom: 28px; }
.bscoc-sermon-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,0.25);
}
.bscoc-sermon-embed iframe { width: 100%; height: 100%; border: none; display: block; }

/* ── Give / Donate CTA ── */
.bscoc-give {
  background: linear-gradient(135deg, var(--color-gold) 0%, #a87820 100%);
  padding: 72px 0;
  text-align: center;
}
.bscoc-give h2 { color: white; margin-bottom: 14px; }
.bscoc-give p  { color: rgba(255,255,255,0.88); max-width: 540px; margin: 0 auto 32px; font-size: 1.05rem; }
.btn-white-solid {
  background: white;
  color: var(--color-royal-dark);
  font-weight: 700;
  font-family: var(--font-ui);
  display: inline-block;
  padding: 16px 40px;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  transition: all var(--transition);
  text-decoration: none;
  border: none;
}
.btn-white-solid:hover { background: var(--color-off-white); color: var(--color-royal-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* ── Location section ── */
.bscoc-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.bscoc-map-placeholder {
  background: linear-gradient(135deg, var(--color-sky) 0%, #c8daff 100%);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  color: var(--color-royal-blue);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px dashed var(--color-border);
}
.bscoc-map-placeholder iframe { width: 100%; height: 100%; border: none; display: block; border-radius: var(--radius-lg); }

/* ── Responsive: homepage ── */
@media (max-width: 900px) {
  .bscoc-welcome-grid,
  .bscoc-location-grid,
  .bscoc-sermon-panel { grid-template-columns: 1fr; gap: 36px; }
  .bscoc-hero { min-height: 80vh; }
  .bscoc-hero-buttons { flex-direction: column; }
  .bscoc-hero-buttons .btn { width: 100%; justify-content: center; }
  .bscoc-sermon-panel { padding: 36px 28px; }
}
@media (max-width: 600px) {
  .bscoc-service-strip-inner { flex-direction: column; }
  .bscoc-service-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); width: 100%; }
  .bscoc-service-item:last-child { border-bottom: none; }
  .bscoc-cards { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   ASTRA CHILD THEME OVERRIDES
   These rules run AFTER Astra's stylesheet and fix every
   place Astra's defaults bleed through into our design.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Fonts: replace Astra's system/body font everywhere ── */
body,
.ast-single-post .entry-content,
.entry-content,
.ast-container,
p, li, td, th, label, input, textarea, select, button {
  font-family: 'Source Sans 3', 'Helvetica Neue', sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.ast-single-post .entry-content h1,
.ast-single-post .entry-content h2,
.ast-single-post .entry-content h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* ── 2. Container: Astra forces narrow max-width; reset it ── */
.ast-container,
.site-content .ast-container,
#content .ast-container {
  max-width: var(--max-width) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ── 3. Content area: Astra adds padding that breaks our layouts ── */
.ast-separate-container .ast-article-post,
.post-page-bottom-padding,
.entry,
.hentry,
.ast-article-inner-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove Astra's white card box around page content */
.ast-separate-container .site-content,
.ast-separate-container #content,
.ast-separate-container .ast-article-post {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── 4. Full-width page layout: disable Astra sidebar ── */
.ast-page-builder-template .site-content,
.page .site-content,
.page #content {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
.page .widget-area,
.page #secondary {
  display: none !important;
}

/* ── 5. Content padding that was killing the edge-to-edge look ── */
.page-content-wrap .entry-content,
.homepage-content,
.page .entry-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The inner pages need padding but via OUR wrapper, not Astra's */
.page-content-wrap {
  padding: 72px 0 96px !important;
}
.page-content-wrap .entry-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Homepage: no Astra padding on the content wrapper */
.homepage-content {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ── 6. Astra's header: hide it since we render our own ── */
#masthead,
.site-header,
.ast-masthead-custom-menu-items,
.main-header-bar {
  display: none !important;
}

/* Our sticky header must still show */
#site-header {
  display: block !important;
}

/* ── 7. Astra breadcrumbs: hide the default ones ── */
.ast-breadcrumbs-wrapper,
#breadcrumbs,
.astra-breadcrumbs {
  display: none !important;
}

/* ── 8. Astra page title: hide it (we render our own in page-hero) ── */
.ast-archive-description,
.page-header,
.ast-page-title-wrap,
.entry-header .entry-title,
.page .entry-header {
  display: none !important;
}

/* ── 9. Astra footer: hide it since we render our own ── */
#colophon,
.site-footer,
.ast-small-footer,
.footer-widget-area {
  display: none !important;
}
/* Our footer must show */
#site-footer {
  display: block !important;
}

/* ── 10. Astra buttons: override with our Royal Blue style ── */
.wp-block-button__link,
.ast-button,
button[type="submit"],
input[type="submit"],
.wpcf7-submit {
  background-color: var(--color-royal-blue) !important;
  border-color: var(--color-royal-blue) !important;
  color: #ffffff !important;
  border-radius: 40px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  padding: 13px 30px !important;
  font-size: 0.92rem !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: 0 4px 18px rgba(27,78,168,0.28) !important;
  cursor: pointer !important;
}
.wp-block-button__link:hover,
.ast-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: var(--color-royal-dark) !important;
  border-color: var(--color-royal-dark) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(27,78,168,0.38) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--color-royal-blue) !important;
  border: 2px solid var(--color-royal-blue) !important;
  box-shadow: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-royal-blue) !important;
  color: #ffffff !important;
}

/* ── 11. Tables: Astra strips our header color ── */
.entry-content table thead th,
.wp-block-table thead th {
  background-color: var(--color-royal-blue) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
}
.entry-content table tbody tr:hover td {
  background-color: var(--color-sky) !important;
}

/* ── 12. Contact Form 7: fix Astra's ugly default form ── */
.wpcf7 form .wpcf7-form-control-wrap input,
.wpcf7 form .wpcf7-form-control-wrap textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100% !important;
  padding: 13px 18px !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
  color: var(--color-text) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  margin-bottom: 14px !important;
  transition: border-color 0.28s ease !important;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-royal-blue) !important;
  box-shadow: 0 0 0 3px rgba(27,78,168,0.1) !important;
}
.wpcf7 input[type="submit"],
.wpcf7-submit {
  width: auto !important;
  display: inline-block !important;
}

/* ── 13. Block pullquote: Astra neutralizes border color ── */
.wp-block-pullquote {
  border-color: var(--color-royal-blue) !important;
  color: var(--color-royal-dark) !important;
}
.wp-block-quote {
  border-left-color: var(--color-royal-blue) !important;
}

/* ── 14. Page hero banner: ensure it sits flush below our header ── */
.page-hero {
  margin-top: 0 !important;
}

/* ── 15. Astra sets global link colors — override ── */
a,
.ast-single-post .entry-content a {
  color: var(--color-royal-blue) !important;
}
a:hover {
  color: var(--color-royal-dark) !important;
}

/* ── 16. Remove Astra's body top padding (it reserves space for its header) ── */
body.ast-header-break-point,
body {
  padding-top: 0 !important;
}

/* ── CONTAINER LEFT-EDGE FIX ──
   Astra sets negative margins on its content wrapper that push
   content flush to the left viewport edge with no padding.
   These rules restore proper containment on all page types.   */

body.ast-page-builder-template #content,
body.ast-page-builder-template .site-content,
body.page #content .ast-container,
body.home #content,
.ast-separate-container #primary,
#primary {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
}

/* Kill Astra negative content margins */
.ast-article-post,
.ast-separate-container .entry-content,
.ast-separate-container .post-page-bottom-padding {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Homepage specifically: needs to be truly full width */
body.home .homepage-content,
body.home .entry-content,
body.home #page {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Inner pages: restore readable content padding */
body.page:not(.home) .page-content-wrap {
  padding: 64px 0 96px !important;
}
body.page:not(.home) .page-content-wrap .entry-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* ════════════════════════════════════════════════════════════
   BUTTON SPECIFICITY FIX
   Astra's global `a { color: ... }` and link rules override
   .btn classes. These rules use body scoping to win.
   ════════════════════════════════════════════════════════════ */

body a.btn,
body a.btn:visited,
body .btn {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.04em !important;
  padding: 14px 32px !important;
  border-radius: 40px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}
body a.btn-lg,
body .btn-lg {
  padding: 17px 42px !important;
  font-size: 1rem !important;
}
body a.btn-sm,
body .btn-sm {
  padding: 9px 22px !important;
  font-size: 0.82rem !important;
}

/* Primary — Royal Blue fill */
body a.btn-primary,
body a.btn-primary:visited,
body .btn-primary {
  background: #1B4EA8 !important;
  background-color: #1B4EA8 !important;
  color: #ffffff !important;
  border-color: #1B4EA8 !important;
  box-shadow: 0 4px 18px rgba(27,78,168,0.32) !important;
}
body a.btn-primary:hover,
body .btn-primary:hover {
  background: #0F3580 !important;
  background-color: #0F3580 !important;
  color: #ffffff !important;
  border-color: #0F3580 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(27,78,168,0.42) !important;
}

/* Outline — transparent with white border (for use on dark/blue backgrounds) */
body a.btn-outline,
body a.btn-outline:visited,
body .btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.75) !important;
  box-shadow: none !important;
}
body a.btn-outline:hover,
body .btn-outline:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Outline on light backgrounds */
body a.btn-outline-blue,
body a.btn-outline-blue:visited,
body .btn-outline-blue {
  background: transparent !important;
  color: #1B4EA8 !important;
  border-color: #1B4EA8 !important;
  box-shadow: none !important;
}
body a.btn-outline-blue:hover,
body .btn-outline-blue:hover {
  background: #1B4EA8 !important;
  color: #ffffff !important;
}

/* Gold */
body a.btn-gold,
body a.btn-gold:visited,
body .btn-gold {
  background: #C8972B !important;
  background-color: #C8972B !important;
  color: #ffffff !important;
  border-color: #C8972B !important;
  box-shadow: 0 4px 18px rgba(200,151,43,0.4) !important;
}
body a.btn-gold:hover,
body .btn-gold:hover {
  background: #a87820 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* White solid (Give CTA section) */
body a.btn-white-solid,
body a.btn-white-solid:visited,
body .btn-white-solid {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0F3580 !important;
  border-color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  display: inline-block !important;
  padding: 16px 40px !important;
  border-radius: 40px !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15) !important;
}
body a.btn-white-solid:hover,
body .btn-white-solid:hover {
  background: #F8FAFF !important;
  color: #0F3580 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}


/* Remove Astra sticky header body offset */
body.ast-header-sticky-active,
body.ast-desktop-sticky-active,
body.ast-primary-sticky-enabled {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Event card date block: recurring symbol styling ── */
.event-date-block .event-day {
  font-size: 1.4rem;
  line-height: 1;
}
/* Shrink the ♻ symbol so it doesn't dominate */
.event-date-block .event-day:not(:empty) {
  font-size: clamp(0.9rem, 2vw, 1.6rem);
}

/* Events grid: ensure it doesn't float outside its wrapper */
.bscoc-inner > .events-grid,
.bscoc-section .events-grid {
  margin-top: 0;
}

/* Shortcode wrapper — the [bscoc_events] div inside bscoc-inner */
.bscoc-inner .events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* ── wp_nav_menu list resets (mobile nav uses default WP list markup) ── */
.mobile-nav-list,
.mobile-nav-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav-list li { display: block; }
.mobile-nav-list li a {
  display: block;
  padding: 12px 24px;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav-list li a:hover { color: var(--color-royal-blue); background: var(--color-sky); }
/* Submenu items indented on mobile */
.mobile-nav-list ul li a { padding-left: 40px; font-weight: 400; font-size: 0.95rem; }

/* primary-nav-list: not used — items_wrap suppresses the ul entirely */

/* ── Mobile submenu accordion ── */
.mobile-nav-list li.menu-item-has-children {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
/* Parent link takes all available width minus the toggle button */
.mobile-nav-list li.menu-item-has-children > a {
  flex: 1;
  border-bottom: none; /* border is on the <li> instead */
}
/* Chevron toggle button */
.mobile-submenu-toggle {
  background: none;
  border: none;
  border-left: 1px solid var(--color-border);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-royal-blue);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background var(--transition);
}
.mobile-submenu-toggle:hover { background: var(--color-sky); }

/* Sub-menu list inside mobile nav */
.mobile-nav-list li.menu-item-has-children > ul {
  width: 100%;
  flex-basis: 100%;
  background: var(--color-sky);
  border-top: 1px solid var(--color-border);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav-list li.menu-item-has-children > ul li { border-bottom: 1px solid var(--color-border); }
.mobile-nav-list li.menu-item-has-children > ul li:last-child { border-bottom: none; }
.mobile-nav-list li.menu-item-has-children > ul li a {
  padding: 11px 24px 11px 36px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-royal-blue);
  display: block;
  text-decoration: none;
}
.mobile-nav-list li.menu-item-has-children > ul li a:hover {
  background: rgba(27,78,168,0.07);
}

/* ════════════════════════════════════════════════════════════
   FOOTER COLOR FIXES
   The global Astra link override (a { color: royal-blue })
   was bleeding into footer links and list items. These rules
   use scoped specificity to lock footer colors correctly.
   ════════════════════════════════════════════════════════════ */

/* All text inside footer columns — white at 72% opacity */
#site-footer .footer-links li,
#site-footer .footer-links li a,
#site-footer .footer-links li a:visited {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Hover lifts to full white */
#site-footer .footer-links li a:hover {
  color: #ffffff !important;
}

/* Phone and email links specifically */
#site-footer .footer-col a[href^="tel:"],
#site-footer .footer-col a[href^="mailto:"],
#site-footer .footer-col a[href^="tel:"]:visited,
#site-footer .footer-col a[href^="mailto:"]:visited {
  color: rgba(255,255,255,0.72) !important;
}
#site-footer .footer-col a[href^="tel:"]:hover,
#site-footer .footer-col a[href^="mailto:"]:hover {
  color: #ffffff !important;
}

/* "Send a Message →" and other footer CTA links */
#site-footer .footer-col a {
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none;
}
#site-footer .footer-col a:hover {
  color: #ffffff !important;
}

/* Footer brand area — site name stays white */
#site-footer .footer-site-name,
#site-footer .footer-about {
  color: rgba(255,255,255,0.8) !important;
}

/* Footer bottom bar links */
#site-footer .footer-bottom a,
#site-footer .footer-bottom a:visited {
  color: rgba(255,255,255,0.6) !important;
}
#site-footer .footer-bottom a:hover {
  color: #ffffff !important;
}

/* Hide the "Edit times in Customize" admin hint from public view.
   This note was intended for developers but shows to all visitors. */
#site-footer .footer-col p[style*="Customize"] {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   SOCIAL ICON SVG COLORS — set via CSS fill property only.
   CSS fill property beats SVG fill attribute per spec (MDN).
   Scoped to #site-footer to beat any global link color rules.
   These rules are the single source of truth for icon colors.
   ════════════════════════════════════════════════════════════ */

/* ── Social icon SVG color isolation ──
   Multiple layers of protection against CSS color cascade into SVG fill:
   1. color:transparent on <a> stops currentColor inheritance
   2. fill on the SVG element itself resets before paths are painted
   3. fill on each path class is the final authoritative color
   All rules use !important to beat the global Astra link color override. */

#site-footer .social-btn,
#site-footer .social-btn:link,
#site-footer .social-btn:visited,
#site-footer .social-btn:hover,
#site-footer .social-btn:active {
  color: transparent !important;
}

/* SVG element fill reset — prevents currentColor bleed into paths */
#site-footer .social-btn--facebook svg { fill: transparent !important; color: transparent !important; }
#site-footer .social-btn--youtube svg  { fill: transparent !important; color: transparent !important; }

/* Facebook paths — blue background circle, white f letterform */
#site-footer .social-btn--facebook .fb-bg { fill: #1877F2 !important; }
#site-footer .social-btn--facebook .fb-f  { fill: #ffffff !important; }

/* YouTube paths — red background rectangle, white play triangle */
#site-footer .social-btn--youtube .yt-bg   { fill: #FF0000 !important; }
#site-footer .social-btn--youtube .yt-play { fill: #ffffff !important; }

/* ════════════════════════════════════════════════════════════
   MATERIAL ICONS — consistent sizing and alignment
   Font loaded via Google Fonts (Material Icons Round variant)
   ════════════════════════════════════════════════════════════ */

.material-icons-round {
  /* Force correct font — must beat any global font-family override */
  font-family: 'Material Icons Round' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  /* These MUST be set — any override breaks codepoint and ligature rendering */
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr !important;
  /* Cross-browser font rendering */
  -webkit-font-smoothing: antialiased;   /* Chrome, Safari */
  text-rendering: optimizeLegibility;    /* Firefox */
  -moz-osx-font-smoothing: grayscale;    /* Firefox macOS */
  font-feature-settings: 'liga' 1;       /* Enable ligatures (fallback) */
  -webkit-font-feature-settings: 'liga'; /* Safari/Chrome ligatures */
  vertical-align: middle;
}

/* Small inline icon — for location, phone labels on event cards */
.bscoc-icon-sm {
  font-size: 16px;
  margin-right: 4px;
  color: var(--color-text-muted);
  vertical-align: text-bottom;
}

/* Icon inside feature list circles */
.bscoc-feature-icon .material-icons-round {
  font-size: 18px;
  color: var(--color-royal-blue);
}

/* Icon inside worship cards */
.bscoc-card-icon .material-icons-round {
  font-size: 26px;
  color: #ffffff;
}

/* Icon inside contact detail circles */
.contact-icon .material-icons-round {
  font-size: 20px;
  color: var(--color-royal-blue);
}

/* Icon inline with h3 headings (About Us page) */
.bscoc-heading-icon {
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--color-royal-blue);
}

/* Event location line */
.event-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.event-location .material-icons-round {
  font-size: 14px;
  flex-shrink: 0;
}