/*
Theme Name:   Men United In Christ
Description:  Kadence child theme – Men United In Christ. Unified global design system.
Author:       MUIC Brotherhood
Template:     kadence
Version:      6.0.0
Text Domain:  kadence-muic-child
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap");

/* ============================================================
   DESIGN TOKENS — Light mode default
   ============================================================ */
:root {
  --bg:           #f7f3ed;
  --surface:      #ffffff;
  --surface-2:    #f0e9df;
  --surface-3:    #e6dccc;
  --border:       rgba(26,18,12,.12);
  --border-strong:rgba(26,18,12,.22);
  --text:         #140f0a;
  --muted:        #4d4037;
  --faint:        #84766c;
  --accent:       #8b0000;
  --accent-hover: #640000;
  --accent-soft:  rgba(139,0,0,.10);
  --accent-glow:  rgba(139,0,0,.28);
  --gold:         #b8860b;
  --gold-bright:  #d4a017;
  --gold-soft:    rgba(184,134,11,.12);
  --shadow-xs:    0 1px 3px rgba(10,6,2,.08);
  --shadow-sm:    0 2px 8px rgba(10,6,2,.10);
  --shadow-md:    0 8px 32px rgba(10,6,2,.13);
  --shadow-lg:    0 20px 60px rgba(10,6,2,.17);
  --r-sm:  8px; --r-md: 14px; --r-lg: 22px;
  --r-xl:  32px; --r-full: 9999px;
  --f-display: "Cinzel","Times New Roman",serif;
  --f-body:    "Lato","Helvetica Neue",Arial,sans-serif;
  --content: 1160px;
  --narrow:  760px;
  --ease: 200ms cubic-bezier(.16,1,.3,1);
  --t-xs:   clamp(.75rem, .72rem + .15vw, .875rem);
  --t-sm:   clamp(.875rem,.82rem + .22vw, 1rem);
  --t-base: clamp(1rem,   .94rem + .30vw, 1.125rem);
  --t-lg:   clamp(1.125rem,1rem + .70vw,  1.5rem);
  --t-xl:   clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  --t-2xl:  clamp(2rem,   1rem  + 4.0vw,  5rem);
}

/* ── DARK MODE — applied to html element by inline script in header.php ── */
[data-theme="dark"],
html.dark-mode,
body.dark-mode,
body.muic-dark {
  --bg:           #0d0b09;
  --surface:      #171310;
  --surface-2:    #211b17;
  --surface-3:    #2a231d;
  --border:       rgba(255,230,180,.10);
  --border-strong:rgba(255,230,180,.20);
  --text:         #f4ebe0;
  --muted:        #d2c1af;
  --faint:        #8b7a6c;
  --accent:       #d42b2b;
  --accent-hover: #f04040;
  --accent-soft:  rgba(212,43,43,.16);
  --accent-glow:  rgba(212,43,43,.38);
  --gold:         #d4a017;
  --gold-bright:  #f0c040;
  --gold-soft:    rgba(212,160,23,.15);
  --shadow-xs:    0 1px 3px rgba(0,0,0,.35);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.45);
  --shadow-md:    0 8px 32px rgba(0,0,0,.55);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.65);
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

html,
body,
body.home,
body.page,
body.single,
body.archive,
body.error404,
.wp-site-blocks,
#page,
.site,
#content,
.site-content {
  background-color: var(--bg) !important;
  color:            var(--text) !important;
}

body {
  margin: 0;
  padding-bottom: 52px !important; /* clears fixed radio bar */
  font-family: var(--f-body) !important;
  font-size:   var(--t-base) !important;
  line-height: 1.75 !important;
  color:       var(--text) !important;
  background:  var(--bg) !important;
  transition:  background var(--ease), color var(--ease);
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ease), background var(--ease);
}

button { font: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; }

/* ============================================================
   PJAX — smooth content swap transition
   ============================================================ */
#muic-pjax-wrap {
  animation: muic-fadein .25s ease both;
}
@keyframes muic-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.wp-block-heading {
  font-family:    var(--f-display) !important;
  color:          var(--text) !important;
  line-height:    1.1 !important;
  letter-spacing: .02em !important;
  margin-top:     0 !important;
  overflow-wrap:  break-word !important;
  word-break:     break-word !important;
}

h1, .entry-title, .page-title {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem) !important;
}
h2 { font-size: clamp(1.2rem, 0.9rem + 1vw, 2rem) !important; }
h3 { font-size: clamp(1rem,  0.85rem + .6vw, 1.4rem) !important; }
h4, h5, h6 { font-size: 1rem !important; }

/* Hero h1 */
.muic-hero h1,
h1.muic-hero-title,
.muic-hero .entry-title {
  font-size:     clamp(1.5rem, 0.8rem + 2.5vw, 3rem) !important;
  line-height:   1.06 !important;
  white-space:   normal !important;
  word-break:    normal !important;
  overflow-wrap: normal !important;
  letter-spacing:.02em !important;
}

/* Paragraph */
p,
.entry-content p,
.wp-block-paragraph,
.wp-block-post-content p {
  font-family: var(--f-body)   !important;
  font-size:   var(--t-base)   !important;
  line-height: 1.75            !important;
  color:       var(--muted)    !important;
  margin-top:  0               !important;
  margin-bottom: 1.2em         !important;
}

.entry-content,
.wp-block-post-content,
.kadence-blocks-pro-show,
.single-content,
.page-content {
  font-size:   var(--t-base) !important;
  color:       var(--text)   !important;
  font-family: var(--f-body) !important;
}

.entry-content p,
.page .entry-content p,
.single .entry-content p {
  color: var(--muted) !important;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.muic-wrap        { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.muic-wrap-narrow { width: min(calc(100% - 2rem), var(--narrow));  margin-inline: auto; }

.muic-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  padding: .75rem 1rem; background: var(--surface); color: var(--text);
  border-radius: 0 0 var(--r-sm) 0; box-shadow: var(--shadow-md);
}
.muic-skip:focus { left: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.muic-header {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  display: block !important; visibility: visible !important;
}

.muic-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem; min-height: 80px;
}

.muic-brand {
  display: inline-flex !important; align-items: center !important;
  gap: .75rem !important; flex-shrink: 0 !important;
  visibility: visible !important; text-decoration: none !important;
}

.muic-site-logo,
img.muic-site-logo {
  display: block !important; visibility: visible !important;
  opacity: 1 !important; width: 52px !important; height: 52px !important;
  min-width: 52px !important; object-fit: contain !important;
  border-radius: 8px !important; flex-shrink: 0 !important;
}

.muic-brand-text          { display: block !important; }
.muic-brand-text strong   {
  display: block !important;
  font-family: var(--f-display) !important;
  font-size: 0.82rem !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--text) !important; white-space: nowrap !important;
}
.muic-brand-text em {
  display: block !important; font-style: italic !important;
  font-size: 0.72rem !important;
  color: var(--gold) !important; letter-spacing: .04em !important;
  white-space: nowrap !important;
}

/* ============================================================
   NAV — DESKTOP / MOBILE
   ============================================================ */
@media (min-width: 901px) {
  #menu-toggle { display: none !important; }

  .muic-nav,
  nav.muic-nav,
  #muic-nav-wrapper {
    display: block !important; position: static !important;
    background: transparent !important; overflow: visible !important;
    padding: 0 !important;
  }

  .muic-nav ul,
  nav.muic-nav ul,
  #muic-nav-wrapper ul,
  ul#muic-nav {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 1.5rem !important;
    list-style: none !important; margin: 0 !important; padding: 0 !important;
  }

  .muic-nav li,
  #muic-nav-wrapper li,
  ul#muic-nav > li { width: auto !important; border: 0 !important; }

  .muic-nav li a,
  #muic-nav-wrapper li a,
  ul#muic-nav > li > a {
    display: inline-flex !important; width: auto !important;
    padding: .3rem 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important; letter-spacing: .04em !important;
    text-transform: uppercase !important; color: var(--muted) !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important; white-space: nowrap !important;
    transition: color var(--ease), border-color var(--ease) !important;
  }

  .muic-nav li a:hover,
  ul#muic-nav > li > a:hover {
    color: var(--text) !important;
    border-bottom-color: var(--accent) !important;
  }

  .muic-nav-live > a,
  ul#muic-nav .muic-nav-live > a {
    color: var(--accent) !important;
    padding: .4rem .85rem !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--r-full) !important;
  }

  .muic-nav-live > a:hover {
    background: var(--accent) !important;
    color: #fff !important;
  }
}

@media (max-width: 900px) {
  #menu-toggle { display: inline-flex !important; }

  .muic-nav,
  nav.muic-nav,
  #muic-nav-wrapper {
    display: none; position: fixed !important;
    top: 80px !important; left: 0 !important; right: 0 !important;
    bottom: 44px !important; /* stops above radio bar */
    background: var(--bg) !important;
    z-index: 198 !important; overflow-y: auto !important;
    padding: 2rem 1.5rem 4rem !important;
  }

  .muic-nav.is-open,
  #muic-nav-wrapper.is-open { display: block !important; }

  .muic-nav ul,
  #muic-nav-wrapper ul,
  ul#muic-nav {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 0 !important;
  }

  .muic-nav li,
  #muic-nav-wrapper li { width: 100% !important; }

  .muic-nav li a,
  #muic-nav-wrapper li a {
    width: 100% !important; padding: 1rem 0 !important;
    font-size: var(--t-lg) !important;
    border-bottom: 1px solid var(--border) !important;
    display: block !important;
  }
}

/* ============================================================
   HEADER TOOLS
   ============================================================ */
.muic-header-tools {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  flex-shrink: 0 !important;
}

/* Theme toggle — always visible on ALL screen sizes */
#theme-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.muic-icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); display: inline-flex;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), border-color var(--ease);
  cursor: pointer;
}
.muic-icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* ============================================================
   BUTTONS
   ============================================================ */
.muic-btn,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  display: inline-flex; align-items: center;
  justify-content: center; gap: .5rem;
  min-height: 52px; padding: .95rem 1.5rem;
  border-radius: var(--r-full);
  font-weight: 800; letter-spacing: .02em;
  font-family: var(--f-body); text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.muic-btn:hover { transform: translateY(-2px); }

.muic-btn-primary, .wp-block-button__link {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff; border: 1px solid transparent;
  box-shadow: 0 10px 28px var(--accent-glow);
}
.muic-btn-primary:hover { box-shadow: 0 14px 36px var(--accent-glow); }

.muic-btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
}
.muic-btn-ghost:hover { background: var(--surface-2); }

/* ============================================================
   KICKER BADGE
   ============================================================ */
.muic-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(139,0,0,.18); margin-bottom: 1.25rem;
}
.muic-kicker-gold {
  background: var(--gold-soft); color: var(--gold);
  border-color: rgba(184,134,11,.22);
}

/* ============================================================
   HERO
   ============================================================ */
.muic-hero {
  padding: clamp(3rem,7vw,7rem) 0 clamp(2rem,5vw,5rem);
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, var(--accent-soft), transparent),
    radial-gradient(ellipse 40% 40% at 10% 90%, var(--gold-soft), transparent),
    var(--bg);
  border-bottom: 1px solid var(--border);
}

.muic-hero-grid {
  display: grid; grid-template-columns: 1.3fr .7fr;
  gap: clamp(1.5rem,3vw,3rem); align-items: center;
}

.muic-hero h1 {
  margin: 0 0 1.25rem;
  font-family: var(--f-display) !important;
  font-size: clamp(1.5rem, 0.8rem + 2.5vw, 3rem) !important;
  line-height: 1.06 !important; letter-spacing: .03em !important;
  color: var(--text) !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

.muic-hero p.lead {
  color: var(--muted); font-size: var(--t-lg); line-height: 1.75;
  max-width: 54ch; margin: 0 0 2rem;
}

.muic-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.muic-hero-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 2rem; box-shadow: var(--shadow-md);
}
.muic-hero-panel h2 {
  font-family: var(--f-display) !important;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 2rem) !important;
  margin: 0 0 .75rem !important; color: var(--text) !important;
}
.muic-hero-panel p { color: var(--muted); margin: 0 0 1.5rem; }

.muic-pillar-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.muic-pillar-list li {
  padding: 1rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.muic-pillar-list strong { display: block; color: var(--text); margin-bottom: .2rem; }
.muic-pillar-list span   { color: var(--muted); font-size: var(--t-sm); }

/* ============================================================
   SECTIONS
   ============================================================ */
.muic-section { padding: clamp(3.5rem,7vw,6rem) 0; }

.muic-section-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: 2.5rem; flex-wrap: wrap;
}
.muic-section-head h2 {
  margin: 0 0 .75rem !important;
  font-family: var(--f-display) !important;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 2rem) !important;
  line-height: 1.1 !important; letter-spacing: .03em !important;
  color: var(--text) !important;
}
.muic-section-head p { color: var(--muted); max-width: 52ch; margin: 0; }

/* ============================================================
   CARDS
   ============================================================ */
.muic-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
}

.muic-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 2rem; box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}
.muic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.muic-card-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem; font-weight: 800;
  font-family: var(--f-display); font-size: 1.25rem;
  border: 1px solid rgba(139,0,0,.15);
}
.muic-card h3 {
  font-family: var(--f-display) !important;
  font-size: clamp(1rem, 0.85rem + .6vw, 1.4rem) !important;
  margin: 0 0 .75rem !important; color: var(--text) !important;
}
.muic-card p { color: var(--muted); margin: 0; }

/* ============================================================
   VERSE BAND — always dark
   ============================================================ */
.muic-verse-band {
  background: linear-gradient(135deg,#120b0b 0%,#1e1212 50%,#0d0d0d 100%) !important;
  border-block: 1px solid rgba(212,43,43,.25);
  padding: clamp(3rem,6vw,5rem) 0;
}
.muic-verse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
}
.muic-verse-card {
  padding: 2rem; border: 1px solid rgba(255,230,180,.12);
  border-radius: var(--r-xl); background: rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  transition: transform var(--ease), border-color var(--ease);
}
.muic-verse-card:hover { transform: translateY(-3px); border-color: rgba(240,192,64,.30); }
.muic-verse-card h3 {
  font-family: var(--f-display) !important;
  font-size: var(--t-base) !important;
  color: var(--gold-bright) !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  margin: 0 0 .75rem !important;
}
.muic-verse-card blockquote {
  font-style: italic; font-size: var(--t-lg); line-height: 1.5;
  color: #f5ede3; margin: 0 0 .75rem; padding: 0; border: 0;
}
.muic-verse-card cite {
  font-size: var(--t-sm); color: rgba(245,237,227,.55);
  font-style: normal; font-weight: 700; letter-spacing: .06em;
}

/* ============================================================
   EPISODE CARDS
   ============================================================ */
.muic-episode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
}
.muic-episode-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .75rem;
  transition: transform var(--ease), box-shadow var(--ease);
}
.muic-episode-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.muic-episode-card h3 {
  font-family: var(--f-display) !important;
  font-size: var(--t-base) !important;
  margin: 0 !important; color: var(--text) !important; line-height: 1.25 !important;
}
.muic-episode-card h3 a:hover { color: var(--accent); }
.muic-scripture-ref {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
}
.muic-episode-card audio { width: 100%; border-radius: var(--r-sm); }
.muic-episode-card p     { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.muic-episode-card-footer { margin-top: auto; }

/* ============================================================
   5-MIN FRAMEWORK
   ============================================================ */
.muic-framework-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 1rem;
}
.muic-step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  transition: transform var(--ease), box-shadow var(--ease);
}
.muic-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.muic-step-time {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .75rem;
}
.muic-step h3 {
  font-family: var(--f-display) !important;
  font-size: var(--t-base) !important;
  margin: 0 0 .5rem !important; color: var(--text) !important;
}
.muic-step p { color: var(--muted); font-size: var(--t-sm); margin: 0; }

/* ============================================================
   LIVE RADIO SECTION — always dark
   ============================================================ */
.muic-live-radio {
  position: relative; padding: clamp(2rem,5vw,4rem) 0;
  background:
    radial-gradient(circle at top left,  rgba(212,43,43,.20), transparent 34%),
    radial-gradient(circle at bottom right, rgba(212,160,23,.18), transparent 34%),
    linear-gradient(135deg,#120b0b 0%,#1c1212 45%,#0d0d0d 100%) !important;
  overflow: hidden;
}
.muic-live-radio::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 26px);
}
.muic-live-radio-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem,3vw,3rem); align-items: center;
}
.muic-live-copy { color: #fff7ef; }
.muic-live-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(240,192,64,.10); color: #f0c040;
  border: 1px solid rgba(240,192,64,.30); margin-bottom: 1.25rem;
}
.muic-live-copy h2 {
  margin: 0 0 1rem !important; font-family: var(--f-display) !important;
  font-size: clamp(1.5rem,1rem + 2.5vw,3.5rem) !important;
  line-height: 1.02 !important; color: #fffaf2 !important;
}
.muic-live-copy p {
  color: #ead5c2 !important; font-size: var(--t-lg) !important;
  line-height: 1.8 !important; max-width: 38ch; margin: 0 0 1.5rem !important;
}
.muic-live-points { display: grid; gap: 1rem; }
.muic-live-point {
  padding: 1rem 1.25rem; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,230,180,.10);
  backdrop-filter: blur(6px);
}
.muic-live-point strong { display: block; margin-bottom: .2rem; color: #fff8ef; }
.muic-live-point span   { color: #dccdbb; font-size: var(--t-sm); }

.muic-live-player-wrap { display: block !important; }

.muic-clean-player {
  background: linear-gradient(160deg,#1a0d0d 0%,#0f0808 100%);
  border: 1px solid rgba(212,43,43,.30); border-radius: 28px;
  padding: 2.5rem 2rem; text-align: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset,
    0 28px 80px rgba(0,0,0,.55), 0 0 60px rgba(139,0,0,.18);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}

.muic-radio-play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .65rem; min-width: 180px; min-height: 58px;
  padding: 1rem 2rem; border-radius: var(--r-full);
  border: none; cursor: pointer;
  background: linear-gradient(135deg,#d42b2b 0%,#8b0000 100%);
  color: #fff; font-weight: 900; font-size: 1rem; letter-spacing: .04em;
  font-family: var(--f-body);
  box-shadow: 0 10px 32px rgba(212,43,43,.45);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.muic-radio-play-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 44px rgba(212,43,43,.65); }
.muic-radio-play-btn.is-playing { background: linear-gradient(135deg,#b8860b,#d4a017); }
.muic-radio-play-btn.is-buffering { opacity: .7; cursor: wait; }
.muic-radio-status-line { font-size: var(--t-xs); letter-spacing: .08em; color: rgba(240,212,180,.45); margin: 0; text-transform: uppercase; }

.muic-np-box {
  width: 100%; padding: 1.5rem 1.25rem; border-radius: 18px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(240,192,64,.15);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.muic-np-label {
  display: block; font-size: .72rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase; color: #f0c040;
}
.muic-np-title {
  margin: 0; font-size: clamp(1.1rem,.9rem + .8vw,1.4rem);
  font-weight: 800; font-family: var(--f-display); color: #fff8ef;
  line-height: 1.3; text-align: center; max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .3s;
}
.muic-np-title.is-long { animation: muic-marquee 10s linear infinite; text-overflow: clip; }
@keyframes muic-marquee { 0%{transform:translateX(40%)} 100%{transform:translateX(-100%)} }
.muic-np-artist {
  margin: 0; font-size: .95rem; color: rgba(240,210,170,.65);
  font-style: italic; text-align: center; min-height: 1.4em;
  transition: opacity .3s;
}

.muic-live-on-air-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem;
  background: linear-gradient(135deg,#d42b2b,#8b0000);
  color: #fff; font-size: .72rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  border-radius: var(--r-full); margin-bottom: 1rem;
  box-shadow: 0 6px 24px rgba(212,43,43,.5);
  animation: muic-badge-pulse 2s ease-in-out infinite;
}
@keyframes muic-badge-pulse {
  0%,100% { box-shadow: 0 6px 24px rgba(212,43,43,.45); }
  50%      { box-shadow: 0 6px 36px rgba(212,43,43,.85); }
}
.muic-live-caption {
  text-align: center; margin: .85rem 0 0;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,192,64,.50); font-weight: 700;
}

.muic-radio-fallback {
  display: none; margin-top: .5rem;
  font-size: var(--t-xs); color: rgba(240,192,64,.65);
  letter-spacing: .06em; text-decoration: underline;
  text-underline-offset: 3px; font-family: var(--f-body);
  transition: color var(--ease);
}
.muic-radio-fallback:hover { color: #f0c040; }

/* ============================================================
   CTA / FORM
   ============================================================ */
.muic-cta-shell  { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.muic-cta-inner  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 2.5rem; box-shadow: var(--shadow-md); }
.muic-cta-inner h2 { font-family: var(--f-display) !important; font-size: clamp(1.2rem, 0.9rem + 1vw, 2rem) !important; margin: 0 0 1rem !important; color: var(--text) !important; }
.muic-cta-inner p  { color: var(--muted); margin: 0 0 1.5rem; }
.muic-cta-form-placeholder { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 2rem; }
.muic-cta-form-placeholder h3 { font-family: var(--f-display) !important; font-size: clamp(1rem, 0.85rem + .6vw, 1.4rem) !important; margin: 0 0 1.25rem !important; color: var(--text) !important; }
.muic-form-row { display: grid; gap: .5rem; margin-bottom: 1rem; }
.muic-form-row label { font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.muic-form-row input,
.muic-form-row select,
.muic-form-row textarea {
  width: 100%; padding: .75rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--t-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.muic-form-row input:focus,
.muic-form-row select:focus,
.muic-form-row textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================================================
   SINGLE EPISODE / INNER PAGES
   ============================================================ */
.muic-single-wrap   { padding: clamp(3rem,6vw,5rem) 0; }
.muic-single-title  { font-family: var(--f-display) !important; font-size: clamp(1.2rem, 0.9rem + 1vw, 2rem) !important; margin: 0 0 1rem !important; color: var(--text) !important; }
.muic-single-meta   { color: var(--muted); font-size: var(--t-sm); margin: 0 0 1rem; }
.muic-single-player,
.muic-single-scripture {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 2rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);
}
.muic-single-player h2,
.muic-single-scripture h2 { font-family: var(--f-display) !important; font-size: clamp(1rem, 0.85rem + .6vw, 1.4rem) !important; margin: 0 0 1rem !important; color: var(--text) !important; }
.muic-single-player audio { width: 100%; }
.muic-content > * + * { margin-top: 1.2em; }
.muic-archive-title { font-family: var(--f-display) !important; font-size: clamp(1.2rem, 0.9rem + 1vw, 2rem) !important; color: var(--text) !important; margin: 0 0 .75rem !important; }

.muic-empty-state {
  grid-column: 1 / -1; text-align: center;
  padding: 4rem 2rem; color: var(--muted);
  font-size: var(--t-lg); font-style: italic;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl);
}

/* ============================================================
   ABOUT / INNER PAGES
   ============================================================ */
body.page-template-default .entry-content,
body.page .entry-content,
body.page .site-main,
body.page-id-about .entry-content {
  font-size:   var(--t-base) !important;
  color:       var(--text)   !important;
  font-family: var(--f-body) !important;
  max-width:   var(--content) !important;
}

body.page .entry-content p,
body.page .entry-content li,
body.page-template-default p,
body.page-template-default li {
  font-size:   var(--t-base) !important;
  color:       var(--muted)  !important;
  line-height: 1.75 !important;
}

.kb-inside-inner-column p,
.kb-row-column-wrap p,
.kadence-column p {
  font-size:   var(--t-base) !important;
  color:       var(--muted)  !important;
  font-family: var(--f-body) !important;
}

/* ============================================================
   FOOTER — always dark
   ============================================================ */
.muic-footer,
#colophon,
.site-footer,
footer.site-footer,
footer {
  border-top:   1px solid rgba(255,230,180,.10) !important;
  padding:      clamp(2.5rem,5vw,4rem) 0 !important;
  background:   #0f0b09 !important;
  color:        #d2c1af !important;
  font-family:  var(--f-body) !important;
}

.site-footer .site-info,
.site-footer .footer-wrap,
.site-footer #footer-widgets,
.footer-widget-area,
#colophon .site-info {
  background:   transparent !important;
  color:        #d2c1af !important;
  font-family:  var(--f-body) !important;
}

.muic-footer-inner {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   3rem !important;
  align-items:           start !important;
}

.muic-footer-logo-link { display: inline-flex !important; margin-bottom: 1rem !important; }
.muic-footer-logo, img.muic-footer-logo {
  display:     block !important; width: 52px !important; height: 52px !important;
  object-fit:  contain !important; border-radius: 8px !important;
  visibility:  visible !important; opacity: 1 !important;
}

.muic-footer-brand strong {
  display:     block !important;
  font-family: var(--f-display) !important;
  font-size:   var(--t-lg) !important;
  color:       #fff8ef !important;
  margin-bottom: .5rem !important;
}
.muic-footer-brand p {
  color: #d2c1af !important; font-size: var(--t-sm) !important;
  max-width: 100% !important; margin: 0 0 1.25rem !important;
}
.muic-footer-verse { font-style: italic !important; font-size: var(--t-sm) !important; color: var(--gold-bright) !important; display: block !important; }

.muic-footer-nav ul,
.site-footer ul,
#colophon ul,
.footer-navigation ul {
  list-style:  none    !important;
  padding:     0       !important;
  margin:      0       !important;
  display:     flex    !important;
  flex-wrap:   wrap    !important;
  gap:         .75rem 1.5rem !important;
}

.muic-footer-nav li,
.site-footer li,
#colophon li,
.footer-navigation li {
  list-style:  none !important;
  padding:     0    !important;
  margin:      0    !important;
}

.muic-footer-nav a,
.site-footer a,
#colophon a,
.footer-navigation a,
.site-footer .site-info a {
  color:           #d2c1af !important;
  font-size:       var(--t-base) !important;
  font-weight:     700 !important;
  text-decoration: none !important;
  font-family:     var(--f-body) !important;
  transition:      color var(--ease) !important;
}

.muic-footer-nav a:hover,
.site-footer a:hover,
#colophon a:hover {
  color: var(--accent) !important;
  text-decoration: none !important;
}

.muic-footer-copy {
  margin-top:  2rem !important;
  padding-top: 1.5rem !important;
  border-top:  1px solid rgba(255,230,180,.08) !important;
  color:       rgba(210,193,175,.40) !important;
  font-size:   var(--t-xs) !important;
}
.muic-footer-copy p { margin: 0 !important; color: rgba(210,193,175,.40) !important; }

.kadence-footer-columns,
.kadence-footer-row { background: #0f0b09 !important; }

/* ============================================================
   KADENCE NEUTRALISERS
   ============================================================ */
.kadence-blocks-info-box-link-wrap,
.kt-btn-wrap a,
.wp-block-kadence-advancedbtn .kt-btn-wrap a {
  text-decoration: none !important;
}

.kt-row-layout-inner,
.kt-inside-inner-col,
.kadence-column-inner,
.wp-block-kadence-rowlayout {
  background-color: transparent !important;
}

.site-header,
header#masthead { display: none !important; }

.wp-block-kadence-advancedheading,
h1.wp-block-kadence-advancedheading,
h2.wp-block-kadence-advancedheading,
h3.wp-block-kadence-advancedheading {
  font-size: clamp(1.2rem, 0.9rem + 1vw, 2rem) !important;
  font-family: var(--f-display) !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
}

/* ============================================================
   BODY / PAGE COLOUR SAFETY
   ============================================================ */
body.page,
body.single,
body.archive {
  color: var(--text) !important;
  background-color: var(--bg) !important;
}

body.page p,
body.single p,
body.archive p { color: var(--muted) !important; }

.muic-verse-band,
.muic-live-radio,
section[class*="muic-"][style*="background"] {
  background-color: unset !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .muic-framework-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .muic-hero-grid        { grid-template-columns: 1fr; }
  .muic-hero-panel       { display: none; }
  .muic-grid-3,
  .muic-verse-grid,
  .muic-episode-grid     { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .muic-cta-shell        { grid-template-columns: 1fr; }
  .muic-live-radio-inner { grid-template-columns: 1fr; }
  .muic-footer-inner     { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

@media (max-width: 768px) {
  h1, .entry-title, .page-title {
    font-size: clamp(1.25rem, 1rem + 2vw, 2rem) !important;
  }
  h2 { font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.6rem) !important; }
  h3 { font-size: clamp(1rem, 0.85rem + .8vw, 1.25rem) !important; }

  .muic-live-copy h2 {
    font-size: clamp(1.25rem, 1rem + 2vw, 2rem) !important;
  }
  .muic-section-head h2 {
    font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.6rem) !important;
  }
}

@media (max-width: 640px) {
  .muic-grid-3,
  .muic-verse-grid,
  .muic-episode-grid,
  .muic-framework-grid   { grid-template-columns: 1fr; }

  .muic-section          { padding: 3rem 0; }
  .muic-live-radio       { padding: 2rem 0; }
  .muic-hero-actions     { flex-direction: column; }
  .muic-btn              { width: 100%; }
  .muic-footer-inner     { grid-template-columns: 1fr !important; }

  .muic-footer-nav ul,
  .site-footer ul        { flex-direction: column !important; gap: .5rem !important; }
}

@media (max-width: 480px) {
  .muic-hero h1,
  h1.muic-hero-title {
    font-size: clamp(1.2rem, 1rem + 3vw, 1.75rem) !important;
    letter-spacing: .01em !important;
  }
  .muic-hero p.lead      { font-size: var(--t-base) !important; }
  body                   { padding-bottom: 48px !important; }
}