/* ===============================
   MCC Site — Custom Styles
   Move inline styles → external CSS
   =============================== */

/* Base */
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #212529;
  background-color: #f8f9fa;
  /* Offset for fixed navbar */
  padding-top: 56px; /* ~navbar height; adjust if brand row grows */
}

/* Hero */
.hero {
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url('/images/bible-hero.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 8rem 2rem;
}
.hero h1 { font-size: 3rem; font-weight: 600; animation: fadeInDown 1s ease-out; }
.hero p, .hero a { animation: fadeInUp 1.2s ease-out; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px);} to { opacity: 1; transform: translateY(0);} }
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(20px);}  to { opacity: 1; transform: translateY(0);} }

/* Sections */
.section-title { font-weight: 600; margin-bottom: 1rem; }

/* Cards */
.card-icon { font-size: 2rem; color: #0d6efd; line-height: 1; }
.card { transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }

/* Footer */
footer a { color: #aaa; text-decoration: none; }
footer a:hover { text-decoration: underline; color: #fff; }

/* Video */
/* Using Bootstrap's .ratio for aspect lock; poster provided via HTML */

/* Navbar (sticky) */
.navbar.fixed-top { backdrop-filter: saturate(180%) blur(6px); }

/* Utilities */
.fade-up { animation: fadeInUp .6s ease both; }

/* Responsive tweaks */
@media (max-width: 575.98px) {
  .hero h1 { font-size: 2.25rem; }
}

/* ===== v1 Uniform Helpers (safe to append) ===== */

/* Section spacing (use where you want even vertical rhythm) */
.section { padding: 3rem 0; }
.section--alt { background: #f7f7f9; }

/* Simple grid helpers that play nice with Bootstrap */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Subtle card lift (apply to elements that already look like cards) */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }

/* Reveal-on-scroll (no visual change unless you add .reveal in HTML) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal, .lift { transition: none; }
}

/* Watch Live contrast guard (only applies if the button already uses .btn-primary) */
.btn-primary { color: #fff; }  /* ensures white text on primary backgrounds */

/* === Navbar: stable hover/active underline with no caret conflicts === */

/* Base link styling + invisible underline (0% width) */
.navbar .nav-link{
  position: relative;
  padding-bottom: .35rem;              /* space for underline without moving text */
  background-image: linear-gradient(var(--bs-primary, #0d6efd), var(--bs-primary, #0d6efd));
  background-repeat: no-repeat;
  background-position: 50% 100%;       /* centered at the bottom */
  background-size: 0% 2px;             /* starts hidden */
  transition: background-size .2s ease, color .2s ease;
}

/* Hover/focus color + show underline */
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: var(--bs-primary, #0d6efd);
  background-size: 100% 2px;           /* expand underline without layout shift */
}

/* Active state: keep underline visible */
.navbar .nav-link.active{
  color: var(--bs-primary, #0d6efd);
  background-size: 100% 2px;
}

/* Keep Bootstrap caret intact and stable */
.navbar .dropdown-toggle::after{
  margin-left: .35rem;                 /* consistent spacing from label */
  vertical-align: .255em;              /* default Bootstrap alignment */
  transition: transform .2s ease;
}

/* Desktop: open dropdown on hover (click still works on mobile) */
@media (min-width: 992px){
  .navbar .dropdown:hover > .dropdown-menu{
    display: block;
    margin-top: 0;
  }
}

/* Optional: dropdown menu polish */
.navbar .dropdown-menu{
  border-radius: .5rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* --- MCC Radio Live: robust iframe sizing --- */
.embed-wrap { position: relative; width: 100%; border: 0; }
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Compact heights that behave like your h-50 “fix” */
.embed-wrap--player  { height: 200px; }  /* ~ compact player */
.embed-wrap--history { height: 380px; }  /* ~ compact history list */

@media (min-width: 768px){
  .embed-wrap--player  { height: 220px; }
  .embed-wrap--history { height: 420px; }
}

/* Make sure the alt section never tucks up under previous content */
.section + .section--alt { margin-top: 1.5rem; }

@media (min-width: 992px){
  .lg-h-100 { height: 100% !important; }
}