/*
Theme Name:  Trinity Baptist Church
Theme URI:   https://nevilstrinity.org
Author:      C Shane Cribbs
Author URI:  https://www.cribbsit.com
Description: Custom WordPress theme for Trinity Baptist Church, Nevils, GA. Burgundy, navy, gold & ivory palette with a split-hero homepage layout.
Version:     1.3.6
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:     Proprietary
Text Domain: tbc-theme
*/

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

:root {
  --navy:      #12203A;
  --navy-mid:  #1C2E50;
  --burgundy:  #7B1225;
  --burg-dark: #5E0D1B;
  --gold:      #B8882E;
  --ivory:     #F7F4EE;
  --warm-white:#FDFBF8;
  --stone:     #E8E2D9;
  --text:      #1E1E1E;
  --muted:     #5A5249;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--warm-white);
  color: var(--text);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

/* ══════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════ */
.site-nav {
  background: var(--navy);
  padding: 0 2.5rem;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 68px;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-brand img {
  height: 42px;
  width: auto;
}
/* Custom logo output from WordPress */
.nav-brand .custom-logo-link img {
  height: 42px;
  width: auto;
}

.nav-contact {
  margin-left: 1.4rem;
  padding-left: 1.4rem;
  border-left: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
}
.nav-contact span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}
.nav-address-link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
}
.nav-address-link:hover span {
  color: rgba(255,255,255,0.85);
}
.nav-address-link span {
  transition: color 0.2s ease;
}

/* Nav links list */
.nav-links {
  display: flex;
  list-style: none;
  align-items: stretch;
  gap: 0;
}
.nav-links li { display: flex; align-items: stretch; }
.nav-links a {
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  color: rgba(255,255,255,0.82);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover,
.nav-links li.current-menu-item > a,
.nav-links li.current-menu-ancestor > a {
  color: #fff;
  border-bottom-color: var(--gold);
}

/* Give CTA button inside nav */
.nav-links li.nav-give {
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
}
.nav-links li.nav-give a {
  background: var(--burgundy);
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 3px;
  border-bottom: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s;
}
.nav-links li.nav-give a:hover { background: var(--burg-dark); }

/* Dropdown menus */
.nav-links li.nav-members {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-links li.nav-members > a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-links li.nav-members > a .caret {
  font-size: 0.6rem;
  opacity: 0.65;
  transition: transform 0.2s;
}
.nav-links li.nav-members:hover > a .caret,
.nav-links li.nav-members.is-open > a .caret { transform: rotate(180deg); }

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--navy-mid);
  min-width: 180px;
  border-top: 2px solid var(--gold);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 200;
  list-style: none;
}
/* About is the first dropdown — anchor it left so it doesn't clip off-screen */
.nav-links > li.nav-members:first-child .nav-dropdown { left: 0; right: auto; }

/* Hover only on true mouse/trackpad devices.
   (hover: hover) alone is not enough — Chrome on Android incorrectly
   reports hover:hover even for finger touch, causing the dropdown to
   appear under the finger on touchstart and immediately ghost-clicking
   the first sub-item. Adding (pointer: fine) restricts this rule to
   devices where the PRIMARY pointer is a mouse (fine precision),
   which Android/iOS finger touch never satisfies (they report pointer:coarse).
   Mobile tap-to-open is handled exclusively by JS .is-open. */
@media (hover: hover) and (pointer: fine) {
  .nav-links li.nav-members:hover .nav-dropdown { display: block; }
}
.nav-links li.nav-members.is-open .nav-dropdown { display: block; }
.nav-dropdown li { display: block; }
.nav-dropdown li a {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem !important;
  font-size: 0.84rem !important;
  color: rgba(255,255,255,0.8) !important;
  border-bottom: none !important;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s !important;
}
.nav-dropdown li a:hover {
  background: rgba(255,255,255,0.07);
  color: #fff !important;
}
.nav-dropdown li a i {
  color: var(--gold);
  width: 1rem;
  text-align: center;
  font-size: 0.78rem;
}
.nav-dropdown li + li {
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   Rendered only when tbc_announcement is set in Customizer.
   To revert: remove this block + the HTML in front-page.php
   + the setting in functions.php.
══════════════════════════════════════════════════════ */
@keyframes bar-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bar-shimmer {
  0%        { background-position: -250% 0; }
  45%, 100% { background-position: 250% 0; }
}
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.8rem 2rem;
  background: linear-gradient(
    105deg,
    var(--gold) 0%,
    var(--gold) 36%,
    rgba(255,255,255,0.28) 50%,
    var(--gold) 64%,
    var(--gold) 100%
  );
  background-size: 250% 100%;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.01em;
  animation:
    bar-fade-in 0.5s ease forwards,
    bar-shimmer 5s ease-in-out 1.2s infinite;
}
.announcement-icon {
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.88;
}
.announcement-text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 640px) {
  .announcement-bar {
    font-size: 0.82rem;
    padding: 0.7rem 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════
   HERO — Split: photo left / ivory schedule right
══════════════════════════════════════════════════════ */
.hero {
  display: flex;
  height: 420px;
}

.hero-photo-panel {
  flex: 1;
  position: relative;
  background: url('assets/images/churchpicture1.jpg') center 60% / cover no-repeat;
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.hero-photo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18,32,58,0.78) 0%,
    rgba(18,32,58,0.30) 50%,
    rgba(18,32,58,0.55) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 3rem 3rem 2rem;
  width: 100%;
}
.hero-church-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}
/* Keep each word as one unbreakable unit */
.hero-word { white-space: nowrap; }
/* Decorative drop initials rendered in Great Vibes */
.hero-initial {
  font-family: 'Great Vibes', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0.8;
  display: inline-block;
  vertical-align: -0.14em;
  margin-right: 0.18em;
  color: #fff;
}
.hero-tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  color: rgba(255,255,255,0.95);
  line-height: 1.35;
  margin-bottom: 1.75rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.65rem 1.3rem;
  border-radius: 3px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.hero-cta:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.85);
}

/* Ivory schedule column */
.hero-schedule-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2rem;
}
.hero-schedule-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 0.35rem;
}
.hero-schedule-heading {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--stone);
}
.hero-sched-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--stone);
}
.hero-sched-icon {
  width: 34px;
  height: 34px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
  font-size: 0.78rem;
}
.hero-sched-info { flex: 1; }
.hero-sched-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.hero-sched-time {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.hero-pastor-note {
  margin-top: 0.7rem;
  padding-top: 0.55rem;
}
.hero-pastor-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  display: block;
  margin-bottom: 0.2rem;
}
.hero-pastor-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--navy);
  line-height: 1.2;
}
/* Linked heading in schedule panel */
.hero-schedule-heading a {
  color: inherit;
  text-decoration: none;
}
.hero-schedule-heading a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* "View Full Schedule" CTA — right-aligned, sits just below last schedule row */
.hero-sched-cta {
  display: block;
  text-align: right;
  margin-top: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--burgundy);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.hero-sched-cta:hover {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══════════════════════════════════════════════════════
   FEATURED EVENT PANEL — hero left column  (v1.3.1)
   Rendered only when an upcoming featured event exists in
   The Events Calendar. Disappears automatically when the
   event ends or its Featured flag is removed.
   Hidden at tablet widths (≤ 900px) — photo fills instead.
══════════════════════════════════════════════════════ */
.hero-event-panel {
  width: 270px;
  flex-shrink: 0;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--stone);
}
/* Event's Featured Image — only rendered when image is set */
.hero-event-image-link {
  display: block;        /* fills panel width like a block element */
  flex-shrink: 0;        /* honours the panel's flex layout */
  text-decoration: none; /* no underline on the image link */
}
.hero-event-image-link:hover .hero-event-image {
  opacity: 0.88;         /* subtle hover feedback */
}
.hero-event-image {
  width: 100%;
  height: 145px;
  background: center center / cover no-repeat var(--stone);
  transition: opacity 0.2s;
}
.hero-event-body {
  padding: 1.1rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hero-event-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 0.3rem;
}
.hero-event-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--stone);
}
.hero-event-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.hero-event-title a:hover { color: var(--burgundy); }
.hero-event-meta {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-bottom: 0.8rem;
}
.hero-event-meta-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
}
.hero-event-meta-row i {
  color: var(--burgundy);
  font-size: 0.7rem;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.hero-event-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Gold separator below hero */
.hero-separator {
  height: 4px;
  background: var(--gold);
  box-shadow: 0 2px 8px rgba(184,136,46,0.45);
}

/* ══════════════════════════════════════════════════════
   UPCOMING EVENTS STRIP
══════════════════════════════════════════════════════ */
.events-strip {
  background: var(--navy);
  padding: 1.75rem 0 2rem;
}
.events-inner {
  padding: 0 2.5rem;
}
.events-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.1rem;
}
.events-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.events-view-all {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.42);
  text-decoration: none;
  transition: color 0.2s;
}
.events-view-all:hover { color: rgba(255,255,255,0.75); }
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
/* Events 4 and 5 are fetched but hidden below 1400px */
.event-card:nth-child(n+4) { display: none; }

/* Wide screens (≥1400px): show up to 5 events.
   data-count is set by PHP to the actual number of events returned,
   so columns always stretch to fill — e.g. 3 events → 3 equal columns,
   not 3 narrow cards in a 5-column grid. */
@media (min-width: 1400px) {
  .event-card:nth-child(n+4) { display: flex; }
  .events-grid                          { grid-template-columns: repeat(5, 1fr); }
  .events-grid[data-count="1"]          { grid-template-columns: 1fr; }
  .events-grid[data-count="2"]          { grid-template-columns: repeat(2, 1fr); }
  .events-grid[data-count="3"]          { grid-template-columns: repeat(3, 1fr); }
  .events-grid[data-count="4"]          { grid-template-columns: repeat(4, 1fr); }
  .events-grid[data-count="5"]          { grid-template-columns: repeat(5, 1fr); }
}
.event-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: background 0.2s;
  text-decoration: none;
}
.event-card:hover { background: rgba(255,255,255,0.07); }
.event-date-badge {
  background: var(--burgundy);
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
  text-align: center;
  flex-shrink: 0;
  min-width: 42px;
}
.event-date-month {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  line-height: 1.3;
}
.event-date-day {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.event-info { flex: 1; }
.event-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.98rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
.event-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.event-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.5;
  margin-bottom: 0.55rem;
}
.event-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.event-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   MAIN CONTENT AREA (two-column homepage grid)
══════════════════════════════════════════════════════ */
.content-area {
  max-width: 1100px;
  margin: 3.5rem auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
}

/* ── Quick Links ── */
.quick-links-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 1.25rem;
}
.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}
.quick-card {
  background: #fff;
  border: 1px solid var(--stone);
  border-top: 3px solid var(--burgundy);
  border-radius: 6px;
  padding: 2rem 1.5rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}
.quick-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.13);
  border-top-color: var(--gold);
}
.quick-card-icon {
  font-size: 2.4rem;
  color: var(--burgundy);
  margin-bottom: 0.65rem;
  transition: transform 0.3s ease, color 0.3s ease;
}
.quick-card:hover .quick-card-icon {
  transform: scale(1.18);
  color: var(--navy);
}
.quick-card-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.quick-card-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0.65rem;
}
.quick-card-action {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--burgundy);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.quick-card:hover .quick-card-action { color: var(--gold); }

/* ── Ministries list ── */
.ministries-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 1.25rem;
}
.ministry-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--stone);
  text-decoration: none;
}
.ministry-row:first-of-type { border-top: 1px solid var(--stone); }
.ministry-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--burgundy);
  flex-shrink: 0;
}
.ministry-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--navy);
  flex: 1;
}
.ministry-arrow {
  color: var(--stone);
  font-size: 0.75rem;
  transition: color 0.2s;
}
.ministry-row:hover .ministry-arrow { color: var(--burgundy); }

/* ── Sidebar ── */
.sidebar { align-self: center; }
.sidebar-card {
  background: var(--ivory);
  border: 1px solid var(--stone);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
.sidebar-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--burgundy);
  display: inline-block;
}
.sidebar-stream-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(145deg, #080F1C 0%, #152340 40%, #1C3260 70%, #0D1A30 100%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  position: relative;
  overflow: hidden;
}
.sidebar-stream-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(28,50,96,0.6) 0%, transparent 70%);
  pointer-events: none;
}
.play-circle {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  padding-left: 3px;
}
.sidebar-stream-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.sidebar-stream-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 1rem;
}
.sidebar-stream-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--burgundy);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.sidebar-stream-link + .sidebar-stream-link {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--stone);
}
.sidebar-stream-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   INTERIOR PAGE CONTENT
══════════════════════════════════════════════════════ */
.page-hero {
  background: var(--navy);
  padding: 1.5rem 2.5rem;
  text-align: center;
  /* Gold accent line at top — separates page title from nav bar.
     inset shadow adds a warm glow downward into the navy, matching
     the hero-separator used on the homepage. */
  border-top: 4px solid var(--gold);
  box-shadow: inset 0 3px 10px rgba(184,136,46,0.18);
}
.page-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  font-weight: 400; /* DM Serif Display only has a regular weight; without
                       this, browsers synthesise a bold that thickens the
                       letterforms. 400 uses the actual designed glyphs. */
  color: #fff;
  margin-bottom: 0.4rem;
}
.page-hero .page-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
}
.page-content-wrap {
  max-width: 1040px;
  margin: 3rem auto;
  padding: 0 2rem;
}
.page-content-wrap h1,
.page-content-wrap h2,
.page-content-wrap h3 {
  font-family: 'DM Serif Display', serif;
  color: var(--navy);
}
.page-content-wrap p {
  font-size: 1rem;
  color: var(--text);
}
.page-content-wrap a { color: var(--burgundy); }
.page-content-wrap a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  border-top: 3px solid var(--gold);
  margin-top: 3rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.75rem 2rem 1.25rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 1.75rem;
}
.footer-brand img,
.footer-brand .custom-logo-link img {
  height: 38px;
  width: auto;
  max-width: none;
  margin-bottom: 1rem;
  opacity: 0.9;
}
.footer-address-link {
  color: inherit;
  text-decoration: none;
}
.footer-address-link:hover { color: #fff; }
.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.7;
}
.footer-col h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
/* WordPress-generated menu inside footer */
.footer-col .menu { list-style: none; padding: 0; }
.footer-col .menu li { margin-bottom: 0.45rem; }
.footer-col .menu a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}
.footer-col .menu a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.75rem 2rem;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤900px)
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .content-area { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-schedule-panel { width: 260px; padding: 2rem 1.5rem; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  /* Featured event panel: hide at tablet so the photo fills the left side */
  .hero-event-panel { display: none; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — nav two-row (≤768px)
   Nav switches to logo-on-top / links-below layout.
   Hero, content and footer remain in their tablet state
   until the 640px breakpoint below.
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Nav: two-row layout */
  .site-nav {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }
  .nav-brand {
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-brand img,
  .nav-brand .custom-logo-link img { height: 36px; width: auto; max-width: none; }
  .nav-contact { margin-left: 1rem; padding-left: 1rem; }
  .nav-contact span { font-size: 0.68rem; }

  /* Nav links: single scrollable row */
  .nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.5rem;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    padding: 0 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
    height: 44px;
  }
  /* Default dropdown — hidden until JS moves it and adds .tbc-mobile-menu */
  .nav-dropdown { top: auto; bottom: auto; right: 0; }

  /* Mobile dropdown: rendered as a full-width row below the nav bar.
     JS moves the element to be a direct child of .site-nav. */
  .nav-dropdown.tbc-mobile-menu {
    position: static;
    display: block;
    width: 100%;
    min-width: auto;
    border-top: 2px solid var(--gold);
    box-shadow: none;
    right: auto;
  }
  .nav-dropdown.tbc-mobile-menu li a {
    padding: 0.85rem 1.5rem !important;
    font-size: 0.9rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — mobile (≤640px)
   Hero stacks, events go single-column, content and
   footer go full-width single-column.
══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Hero: stack vertically */
  .hero { flex-direction: column; height: auto; }
  .hero-photo-panel { min-height: 240px; }
  .hero-content { padding: 1.5rem 1.25rem; }
  .hero-church-name { font-size: 1.9rem; }
  .hero-tagline { font-size: 1.45rem; margin-bottom: 1rem; }
  .hero-cta { font-size: 0.8rem; padding: 0.55rem 1rem; }

  /* Schedule panel: full width, horizontal */
  .hero-schedule-panel {
    width: 100%;
    border-top: none;
    padding: 1.5rem 1.25rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .hero-schedule-eyebrow { width: 100%; }
  .hero-schedule-heading { width: 100%; margin-bottom: 0.5rem; }
  .hero-sched-item {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
    border-bottom: none;
    padding: 0.5rem 0;
  }

  /* Events: single column */
  .events-grid { grid-template-columns: 1fr; }
  .events-inner { padding: 0 1.25rem; }

  /* Content */
  .content-area { padding: 0 1.25rem; margin: 2rem auto; }
  .quick-grid { gap: 0.75rem; }
  .quick-card { padding: 1.5rem 1rem; }
  .sidebar-card { padding: 1.2rem; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem 1rem;
    gap: 1.25rem;
  }
  .footer-brand img,
  .footer-brand .custom-logo-link img { height: 32px; width: auto; max-width: none; }
}


/* ══════════════════════════════════════════════════════
   TABLES  (v1.3.0)
   Default style: clean bordered table matching the TBC palette.
   Block style "Borderless": select in the block editor sidebar
   under Styles → Borderless. Adds class "is-style-borderless".
   ══════════════════════════════════════════════════════ */

.wp-block-table { margin: 1.5rem 0; }

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
}

.wp-block-table td,
.wp-block-table th {
  border: 1px solid var(--stone);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.wp-block-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wp-block-table tbody tr:nth-child(even) td {
  background: var(--ivory);
}

/* ── Borderless variant ── */
.wp-block-table.is-style-borderless table,
.wp-block-table.is-style-borderless td,
.wp-block-table.is-style-borderless th {
  border: none;
}

.wp-block-table.is-style-borderless thead th {
  background: transparent;
  color: var(--navy);
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
}

.wp-block-table.is-style-borderless tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--stone);
}

.wp-block-table.is-style-borderless tbody tr:nth-child(even) td {
  background: transparent;
}

/* ══════════════════════════════════════════════════════
   PAGE & POST CONTENT  (v1.3.3)
   Fixes three issues caused by the global CSS reset and
   WordPress block stylesheets:
     1. Lists (ul/ol) lose their indentation — restored here.
     2. WordPress block styles add margin-block-end (bottom margin)
        AFTER our reset, causing double-spacing. Zeroed out here.
     3. Block spacing is overly generous — reduced here using
        a hierarchical approach that only ever REDUCES space,
        never adds more than WordPress defaults already show.
══════════════════════════════════════════════════════ */

/* ── 1. List indentation ── */
.entry-content ul,
.entry-content ol,
.page-content-wrap ul,
.page-content-wrap ol,
.wp-block-list {
  padding-left: 1.5rem;
}
.entry-content li,
.page-content-wrap li,
.wp-block-list li {
  margin-bottom: 0.3rem;
}

/* ── 2. Nullify bottom margins WordPress block styles may add ──
   Spacing is entirely controlled by the margin-top rules below.  */
.entry-content > *,
.page-content-wrap > * {
  margin-bottom: 0;
}

/* ── 3. Block spacing — hierarchical reductions only ──
   All values are at or below WordPress block defaults (~1.5rem).
   No value here can exceed what the browser already shows.       */

/* Base gap: space between every consecutive block */
.entry-content > * + *,
.page-content-wrap > * + * {
  margin-top: 0.9rem;
}

/* Heading → following content: very tight — they belong together */
.entry-content > h1 + *,
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + *,
.entry-content > .wp-block-heading + *,
.page-content-wrap > h1 + *,
.page-content-wrap > h2 + *,
.page-content-wrap > h3 + *,
.page-content-wrap > h4 + *,
.page-content-wrap > .wp-block-heading + * {
  margin-top: 0.15rem;
}

/* Paragraph → list: list belongs to the paragraph above it */
.entry-content > p + ul,
.entry-content > p + ol,
.entry-content > p + .wp-block-list,
.page-content-wrap > p + ul,
.page-content-wrap > p + ol,
.page-content-wrap > p + .wp-block-list {
  margin-top: 0.35rem;
}

/* Anything → heading: section-break feel */
.entry-content > * + h1,
.entry-content > * + h2,
.entry-content > * + h3,
.entry-content > * + h4,
.entry-content > * + .wp-block-heading,
.page-content-wrap > * + h1,
.page-content-wrap > * + h2,
.page-content-wrap > * + h3,
.page-content-wrap > * + h4,
.page-content-wrap > * + .wp-block-heading {
  margin-top: 1.4rem;
}