/* =========================
   GLOBAL APPLY
========================= */

body {
  background: var(--bg);
  color: var(--text);
}

/* sections */
.section,
.quote-strip,
.cta,
footer {
  background: var(--section);
  color: var(--text);
}

/* cards & containers */
.card,
.event,
.sermon-block,
.next-card,
.price-card,
.event-card {
  background: var(--card);
  border-color: var(--border);
}

/* text consistency */
p, h1, h2, h3, h4, span {
  color: var(--text);
}

/* navbar */
nav {
  background: var(--nav);
}

/* inputs */
input, textarea {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

/* buttons */
button {
  color: inherit;
}

/* =========================
   GLOBAL RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* =========================
   BODY (ATMOSPHERE UPGRADED)
========================= */
body {
  background: #f5f9ff;
  color: #1a1a1a;
  font-size: 18px;
  line-height: 1.8;
  overflow-x: hidden;
}

/* soft divine glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(46,204,113,0.10), transparent 60%),
              radial-gradient(circle at bottom, rgba(11,61,145,0.08), transparent 60%);
  z-index: -1;
}

/* =========================
   NAVBAR (IMPROVED)
========================= */
nav {
  background: linear-gradient(90deg, #0b3d91, #1457c5);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav h3 {
  font-size: 22px;
  letter-spacing: 1px;
}

nav ul {
  display: flex;
  gap: 22px;
  list-style: none;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  position: relative;
  transition: 0.3s;
}

nav a:hover {
  opacity: 0.8;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background: #2ecc71;
  transition: 0.3s;
}

nav a:hover::after {
  width: 100%;
}

/* =========================
   HERO (MORE POWERFUL)
========================= */
.hero {
  height: 92vh;
  background: linear-gradient(
      rgba(11, 61, 145, 0.75),
      rgba(46, 204, 113, 0.55)
    ),
    url("../images/placeholder.jpg") center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  padding: 20px;
}

.hero h1 {
  font-size: clamp(48px, 7vw, 90px);
  font-weight: 800;
  letter-spacing: 2px;
}

.hero p {
  margin-top: 18px;
  font-size: 22px;
  max-width: 750px;
  opacity: 0.95;
}

/* hero button universal fix */
.hero button {
  margin-top: 28px;
  padding: 14px 28px;
  border: none;
  background: #2ecc71;
  color: white;
  font-size: 17px;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
}

.hero button:hover {
  transform: translateY(-4px);
  background: #27ae60;
}

/* =========================
   QUOTE STRIP (IMPROVED)
========================= */
.quote-strip {
  background: white;
  text-align: center;
  padding: 28px;
  font-style: italic;
  font-size: 20px;
  color: #0b3d91;
  border-top: 3px solid #2ecc71;
  border-bottom: 3px solid #2ecc71;
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

/* =========================
   SECTIONS (MORE SPACE)
========================= */
.section {
  padding: 100px 20px;
  text-align: center;
}

.section h2 {
  font-size: 42px;
  color: #0b3d91;
  margin-bottom: 25px;
}

.section h2::after {
  content: "";
  width: 80px;
  height: 3px;
  background: #2ecc71;
  display: block;
  margin: 14px auto;
  border-radius: 10px;
}

.section p {
  max-width: 850px;
  margin: auto;
  font-size: 18px;
  color: #444;
}

/* =========================
   CARDS (CLEANER + STRONGER)
========================= */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.card {
  background: white;
  width: 280px;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-top: 4px solid #2ecc71;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-12px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.15);
}

.card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #0b3d91;
}

.card p {
  font-size: 16px;
  color: #555;
}

/* =========================
   EVENTS
========================= */
.event {
  background: white;
  margin: 16px auto;
  padding: 20px;
  max-width: 750px;
  border-left: 5px solid #2ecc71;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  text-align: left;
  transition: 0.3s;
}

.event:hover {
  transform: translateX(8px);
}

/* =========================
   CTA (MORE IMPACT)
========================= */
.cta {
  background: linear-gradient(90deg, #0b3d91, #2ecc71);
  color: white;
  text-align: center;
  padding: 90px 20px;
}

.cta h2 {
  font-size: 34px;
}

.cta button {
  margin-top: 20px;
  padding: 14px 32px;
  border: none;
  background: white;
  color: #0b3d91;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.cta button:hover {
  transform: scale(1.08);
}

/* =========================
   FOOTER
========================= */
footer {
  background: #081f4d;
  color: white;
  text-align: center;
  padding: 22px;
  font-size: 14px;
}

/* =========================
   VIDEO
========================= */
.video-container {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

iframe {
  width: 90%;
  max-width: 820px;
  height: 450px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* =========================
   CC / SUBTITLES BOX
========================= */
.cc-box {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 18px;
  max-width: 85%;
  text-align: center;
  z-index: 999;
}

/* =========================
   SOLD OUT BADGE (NEW X STYLE)
========================= */
.badge.sold-out {
  background: #e53935;
  color: white;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 8px;
  position: relative;
  display: inline-block;
  transform: rotate(-5deg);
  box-shadow: 0 6px 15px rgba(229,57,53,0.4);
}

/* X overlay effect */
.badge.sold-out::before,
.badge.sold-out::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 3px;
  background: white;
  top: 50%;
  left: -10%;
}

.badge.sold-out::before {
  transform: rotate(45deg);
}

.badge.sold-out::after {
  transform: rotate(-45deg);
}

/* =========================
   SOLD OUT CARD LOCK EFFECT
========================= */
.price-card.vvip {
  position: relative;
  opacity: 0.75;
  filter: grayscale(20%);
  border: 2px dashed #e53935;
}

.price-card.vvip:hover {
  transform: none !important;
  cursor: not-allowed;
}

/* =========================
   VIP / VVIP HIGHLIGHTING
========================= */
.price-card.vip {
  border-top: 4px solid #f1c40f;
  box-shadow: 0 12px 30px rgba(241,196,15,0.2);
}

.price-card.vvip {
  border-top: 4px solid #e53935;
  box-shadow: 0 12px 30px rgba(229,57,53,0.25);
}

/* =========================
   EVENT CARDS UPGRADE
========================= */
.event-card {
  position: relative;
  overflow: hidden;
}

/* soft glow background effect */
.event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(46,204,113,0.15), transparent 60%);
  z-index: 0;
}

.event-card * {
  position: relative;
  z-index: 1;
}

/* gala special glow */
.event-card.gala {
  border-left: 5px solid #1e88e5;
  box-shadow: 0 10px 25px rgba(30,136,229,0.15);
}

/* camp spiritual glow */
.event-card.camp {
  border-left: 5px solid #2ecc71;
  box-shadow: 0 10px 25px rgba(46,204,113,0.15);
}

/* =========================
   BADGE GENERAL UPGRADE
========================= */
.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  background: #0b3d91;
  color: white;
}

/* =========================
   PRICE TEXT BIGGER (IMPORTANT)
========================= */
.price {
  font-size: 28px;
  font-weight: bold;
  color: #0b3d91;
  margin: 10px 0;
}

/* =========================
   FLIP CORE VALUES CARDS
========================= */

.flip-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
}

.flip-card {
  width: 200px;
  height: 160px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

/* flip action */
.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

/* FRONT + BACK */
.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  backface-visibility: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  font-weight: bold;
}

/* FRONT (word only) */
.flip-front {
  background: linear-gradient(135deg, #0b3d91, #2ecc71);
  color: white;
  font-size: 20px;
  letter-spacing: 1px;
}

/* BACK (meaning) */
.flip-back {
  background: white;
  color: #0b3d91;
  transform: rotateY(180deg);
  font-size: 15px;
  line-height: 1.4;
}

/* SERMON CARD LINK FIX */
.sermon-card {
  text-decoration: none;
  color: inherit;
  width: 320px;
}

.sermon-card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* SERMON VIEW PAGE */
.sermon-details {
  margin-top: 25px;
  max-width: 800px;
  margin-inline: auto;
  text-align: left;
}

.sermon-details h2 {
  color: #0b3d91;
  margin-bottom: 10px;
}

.sermon-details p {
  margin-bottom: 10px;
}
/* =========================
   SERMON VIEW UPGRADE 🔥
========================= */

/* THEME ABOVE VIDEO */
.sermon-theme {
  font-size: 30px;
  font-weight: 800;
  color: #2ecc71;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

/* VIDEO IMPROVEMENT */
.video-container iframe {
  width: 95%;
  max-width: 900px;
  height: 480px;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

/* MAIN DETAILS WRAPPER */
.sermon-details {
  margin-top: 40px;
  max-width: 900px;
  margin-inline: auto;
  text-align: left;
}

/* TITLE BIGGER */
.sermon-details h2 {
  font-size: 34px;
  font-weight: 800;
  color: #0b3d91;
  margin-bottom: 12px;
}

/* META INFO */
.sermon-meta {
  font-size: 18px;
  color: #666;
  margin-bottom: 25px;
}

/* CONTENT BLOCKS */
.sermon-block {
  background: white;
  padding: 20px;
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  border-left: 4px solid #2ecc71;
}

/* BLOCK HEADINGS */
.sermon-block h3 {
  font-size: 22px;
  color: #0b3d91;
  margin-bottom: 8px;
}

/* BLOCK TEXT */
.sermon-block p {
  font-size: 18px;
  line-height: 1.8;
  color: #444;
}

/* =========================
   SEARCH BAR 🔍
========================= */
#searchInput {
  padding: 14px;
  width: 80%;
  max-width: 520px;
  border-radius: 12px;
  border: 1px solid #ccc;
  font-size: 16px;
  outline: none;
  transition: 0.3s;
}

#searchInput:focus {
  border-color: #2ecc71;
  box-shadow: 0 0 10px rgba(46,204,113,0.3);
}

/* =========================
   SERMON CARDS (BETTER LOOK)
========================= */
.sermon-card {
  width: 320px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
}

.sermon-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 10px;
}

/* hover effect */
.sermon-card:hover {
  transform: translateY(-10px) scale(1.02);
}

/* title */
.sermon-card h3 {
  font-size: 20px;
  color: #0b3d91;
  text-align: center;
}

/* subtle glow overlay */
.sermon-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
  border-radius: 14px;
  opacity: 0;
  transition: 0.3s;
}

.sermon-card:hover::after {
  opacity: 1;
}



@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .video-container iframe {
    height: 250px;
  }
}

/* =========================
   SOCIAL ICONS 🔥
========================= */
.socials {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 25px;
}

.socials img {
  width: 50px;
  height: 50px;
  transition: 0.3s;
  cursor: pointer;
}

.socials img:hover {
  transform: scale(1.2);
}

.sermon-actions-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.big-btn {
  padding: 12px 18px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  background: #f4f4f4;
  transition: 0.2s;
}

.big-btn:hover {
  transform: scale(1.05);
  background: #e8e8e8;
}

.big-btn.active {
  background: #2ecc71;
  color: white;
  box-shadow: 0 0 10px #2ecc71;
}
/* =========================
   NAV LOGO BRANDING (ADD ONLY)
========================= */

/* container for logo + text */
.logo-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* church logo (safe scaling) */
.logo-img {
  width: 115px;
  height: 115px;
  object-fit: contain;
}

/* stacked text next to logo */
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

/* top line */
.logo-text .top {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  color: white;
}

/* bottom line */
.logo-text .bottom {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #2ecc71;
}

/* =========================
   SERMON FILTER BAR (PRETTY UPGRADE)
========================= */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 10px;
}

/* filter buttons */
.filter-bar button {
  padding: 10px 18px;
  border: none;
  border-radius: 30px;
  background: #0b3d91;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.filter-bar button:hover {
  transform: translateY(-3px);
  background: #1457c5;
}

/* active/selected feel (JS can add this later if you want) */
.filter-bar button.active {
  background: #2ecc71;
  color: white;
  box-shadow: 0 0 12px rgba(46,204,113,0.5);
}

/* speaker search input */
#speakerFilter {
  padding: 10px 16px;
  border-radius: 30px;
  border: 1px solid #ccc;
  font-size: 14px;
  outline: none;
  transition: 0.3s;
  min-width: 200px;
}

/* SEARCH INPUT (make it match filter style) */
#searchInput {
  border-radius: 30px;
  border: 1px solid #ccc;
  padding: 14px 18px;
  font-size: 15px;
  width: 80%;
  max-width: 520px;
  display: block;
  margin: 20px auto;
}

#searchInput:focus {
  border-color: #2ecc71;
  box-shadow: 0 0 10px rgba(46,204,113,0.3);
}


/* =========================
   BACK BUTTON (CLEAN TOP NAV)
========================= */

.sermon-nav-top {
  display: flex;
  justify-content: flex-start;
  margin: 15px 0;
  padding-left: 10px;
}

.back-btn {
  text-decoration: none;
  background: #0b3d91;
  color: white;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  transition: 0.3s;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.back-btn:hover {
  background: #1457c5;
  transform: translateX(-5px);
}

/* =========================
   NEXT SERMON SECTION (CARD STYLE)
========================= */

.sermon-next-section {
  margin-top: 50px;
  text-align: center;
}

.sermon-next-section h3 {
  font-size: 22px;
  color: #0b3d91;
  margin-bottom: 15px;
}

.next-card {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 600px;
  margin: auto;
  background: white;
  border-radius: 14px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
  border-left: 4px solid #2ecc71;
}

.next-card:hover {
  transform: translateY(-5px);
}

.next-card img {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
}

.next-card h4 {
  font-size: 16px;
  color: #0b3d91;
  margin: 0;
}

.next-card p {
  font-size: 13px;
  color: #666;
  margin: 0;
}
/* =========================
   SERMONS PAGE RESPONSIVE FIX 🔥
========================= */

.section {
  max-width: 1200px;
  margin: auto;
}

/* make cards bigger + flexible */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  justify-items: center;
}

/* sermon cards scaling fix */
.sermon-card {
  width: 100%;
  max-width: 340px;
}

/* make images bigger and consistent */
.sermon-card img {
  height: 220px;
  object-fit: cover;
}

/* heading bigger */
.section h2 {
  font-size: 48px;
}

/* search bar bigger and cleaner */
#searchInput {
  font-size: 18px;
  padding: 16px 20px;
  max-width: 600px;
}

/* filter buttons bigger */
.filter-bar button {
  font-size: 15px;
  padding: 12px 22px;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .section h2 {
    font-size: 32px;
  }

  .sermon-card {
    max-width: 100%;
  }

  .sermon-card img {
    height: 200px;
  }
}

/* =========================
   NAV RESET (CLEAN + RESPONSIVE)
========================= */

nav {
  background: linear-gradient(90deg, #0b3d91, #1457c5);
  color: white;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 18px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* =========================
   LOGO AREA (RESPONSIVE FIX)
========================= */

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-img {
  width: clamp(45px, 8vw, 80px);
  height: auto;
  object-fit: contain;
}

.logo-text .top {
  font-size: clamp(14px, 3.5vw, 22px);
  font-weight: 900;
}

.logo-text .bottom {
  font-size: clamp(12px, 3vw, 16px);
  font-weight: 800;
  color: #2ecc71;
}

/* =========================
   NAV LINKS (DESKTOP)
========================= */

nav ul {
  display: flex;
  gap: 18px;
  list-style: none;
  align-items: center;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  position: relative;
}

/* underline */
nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background: #2ecc71;
  transition: 0.3s;
}

nav ul li a:hover::after {
  width: 100%;
}

/* =========================
   HAMBURGER (CLEAN FIX)
========================= */

.menu-toggle {
  display: none;
  font-size: 30px;
  cursor: pointer;
  color: white;
  user-select: none;
}

/* =========================
   MOBILE SYSTEM (NO SCROLL BREAK)
========================= */

@media (max-width: 768px) {

  nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    background: #0b3d91;
    flex-direction: column;

    display: none;
    text-align: center;

    padding: 10px 0;
  }

  nav ul.active {
    display: flex;
  }

  nav ul li {
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  /* hamburger ALWAYS in flow */
  .menu-toggle {
    display: block;
  }

  /* hide desktop spacing issues */
  nav {
    gap: 10px;
  }

  .dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 180px;
  list-style: none;
  padding: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  z-index: 999;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  color: black;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background: #f2f2f2;
}
}