/* ==========================================================================
   WLBT — Full Stylesheet (stable)
   - Cards + Footer intact
   - Desktop single nav
   - Mobile dropdown
   - Mobile menu hidden on desktop (integrated)
   - Logo constrained to fit inside header
   ========================================================================== */

:root{
  --charcoal:#0F0F10; --charcoal-2:#1C1C1C; --ink:#E8E8EA; --ink-dim:#B9B9C0; --gold:#D4AF37;
  --container:1200px; --gap:24px; --radius:14px;
  --card-btn-reserve: 60px;
}

/* Base */
html{ background:var(--charcoal); color-scheme:dark; }
body{ margin:0; background:var(--charcoal); color:var(--ink);
      font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; overflow-x:hidden; }
a{ color:var(--gold); text-decoration:none } a:hover{ text-decoration:underline }

/* Layout helpers */
.section,.wrap,.inner{ max-width:var(--container); margin:0 auto; padding:0 20px; }
.grid3{ display:grid; gap:var(--gap) }
@media(min-width:1200px){ .grid3{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:768px) and (max-width:1199.98px){ .grid3{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:767.98px){
  /* Inner content spacing inside cards on mobile */
  .card{ padding:20px 5px calc(var(--card-btn-reserve) + 5px); }
  .section,.wrap,.inner{ padding-left:4px; padding-right:4px; }
.grid3{ grid-template-columns:1fr }
}

/* ===================== Cards ===================== */
.card{
  background:#121214;
  border:0.5px solid rgba(212,175,55,.35);
  border-radius:var(--radius);
  padding:20px 20px calc(var(--card-btn-reserve) + 5px);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  position:relative;
}
.card h3{ margin-top:5px; margin-bottom:5px; color:var(--gold); }
.card p{ margin:0 0 10px; }
.card .actions{ position:absolute; left:0; right:0; bottom:5px; text-align:center; }
.card .actions a, a.btn{
  display:inline-block; padding:7px 14px; border:0.5px solid rgba(212,175,55,.45);
  border-radius:999px; color:var(--gold); background:rgba(212,175,55,.08);
  font-weight:400; font-size:0.85rem; text-transform:none; letter-spacing:.2px;
}
.card .actions a:hover, a.btn:hover{ background:rgba(212,175,55,.14) }

/* ===================== Header ===================== */
.site-header{ background:var(--charcoal-2); color:var(--ink); border-bottom:1px solid rgba(212,175,55,.35) }
.site-header .wrap.header-row{
  position:relative;
  max-width:var(--container); margin:0 auto; padding:8px 20px;
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
}
.site-header .brand{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; text-decoration:none; color:var(--ink) }
.site-header .brand-logo{ max-height:48px; width:auto; height:auto; object-fit:contain }

/* Brand text */
.site-header .brand-text{ display:flex; flex-direction:column; min-width:0; }
.site-header .brand-text strong{ display:block; font-family:"Playfair Display",Georgia,serif; font-weight:600;
  font-size:20px; line-height:1.1; color:var(--gold); margin:0 0 2px 0; }
.site-header .brand-text span{ display:block; font-size:12px; color:var(--ink-dim); line-height:1.2; margin:0; }

/* Desktop nav (single) */
.site-header .nav{ justify-self:end; display:flex; align-items:center; gap:18px; margin:0; padding:0; list-style:none }
.site-header .nav a{ color:var(--ink) } .site-header .nav a:hover{ color:var(--gold) }

/* Guard: hide any accidental duplicate navs */
@media (min-width: 768px){
  .site-header .wrap.header-row > nav.nav ~ nav,
  .site-header .wrap.header-row > .nav + .nav,
  .site-header .wrap.header-row > .nav ~ ul,
  .site-header .wrap.header-row > .nav ~ .menu,
  .site-header .wrap.header-row > ul.menu,
  .site-header .wrap.header-row > nav.menu { display:none !important; }
}

/* Hamburger */
.hamburger{ display:none; flex-direction:column; justify-content:center; align-items:center; }
.hamburger span{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; border-radius:1px; }
.menu-toggle{ position:absolute; opacity:0; pointer-events:none; }

/* Mobile dropdown */
@media(max-width:767.98px){
  .site-header .brand-text strong{ font-size:16px; } /* Minor reduction on mobile heading */
  .site-header .nav{ display:none !important; }
  .hamburger{ display:flex; width:40px; height:40px; border:1px solid var(--gold); border-radius:8px; background:rgba(15,15,16,.85); cursor:pointer; margin-left:auto; }

  .mobile-menu{
    display:none; position:absolute; left:10px; right:10px; top:calc(100% + 6px);
    background:rgba(15,15,16,0.95); border:1px solid var(--gold); border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.35);
    padding:10px 0; z-index:2000; text-align:center;
  }
  .mobile-menu a{ display:block; padding:12px; color:#fff; text-decoration:none; }
  .mobile-menu a:hover{ background:rgba(212,175,55,0.12); }
  .menu-toggle:checked ~ .mobile-menu{ display:block; }
  .mobile-menu .close-btn{ display:block; text-align:right; padding:6px 12px; font-size:22px; color:var(--gold); cursor:pointer; }
}

/* Integrated: ensure mobile menu hidden on desktop */
@media(min-width:768px){
  .mobile-menu{display:none !important;}
}

/* ===================== Footer ===================== */
footer{
  background:#111113; color:var(--ink);
  margin-top:56px; padding:24px 7px 22px;
  border-top:1px solid rgba(212,175,55,.5);
}
footer .footer-inner, footer .inner{
  max-width:var(--container); margin:0 auto;
  text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.footer-contact{ display:inline-flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.footer-contact a{ white-space:nowrap; word-break:keep-all; color:var(--gold); font-weight:600; text-decoration:none }
@media(min-width:381px){ .footer-contact{ flex-wrap:nowrap; } }
footer small{ color:#9A9AA2; display:block; margin-top:10px }

/* Safety */
.site-header img{ max-height:56px; width:auto; height:auto; object-fit:contain }
@media(max-width:480px){ .site-header img{ max-height:44px } }

/* ===== WLBT unified header/footer/cards + auth state — 2025-09-14 (t) ===== */

/* Surfaces */
.site-header, .card, .card-auth, .wlb-footer{ background: var(--charcoal-2) !important; }

/* Footer full-bleed & centered stack */
.wlb-footer{ position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw) }
.wlb-footer::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:1px; background: rgba(212,175,55,.35) }
.wlb-footer .wrap{ max-width: var(--container); margin:0 auto; padding:16px 20px; display:grid; gap:6px; justify-items:center; text-align:center }
footer, .wlb-footer{ border-top:0 !important }

/* Brand + tagline */
.brand-acronym{ font-weight:800; letter-spacing:.06em }
.brand-tagline{ display:block; font-size:1.15rem; line-height:1.25; opacity:.9 }

/* Buttons baseline (avoid default blue) */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border:1px solid currentColor; border-radius:10px; text-decoration:none; font-weight:600; }
button[type=submit], input[type=submit]{
  appearance:none; -webkit-appearance:none; background: transparent;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 10px; padding: 8px 14px; font-weight: 600; cursor: pointer;
}

/* Show only ONE desktop auth button; hide mobile CTA on desktop */
.nav .btn-auth{ display:inline-flex !important }
.mobile-auth-cta{ display:none !important }

/* Mobile layout + 1.5px borders */
@media (max-width: 767.98px){
  .site-header .header-row{ display:flex; align-items:center; flex-wrap:wrap }
  .site-header .brand{ flex:1 1 auto; min-width:0 }
  .site-header .hamburger{ margin-left:auto }

  /* Flip visibility on mobile */
  .nav .btn-auth{ display:none !important }
  .mobile-auth-cta{ display:inline-flex !important; margin-left:8px }

  /* Tagline below row */
  .site-header .brand-tagline{ flex-basis:100%; order:4; margin-top:6px }

  /* Compact dropdown */
  .mobile-menu{ right:10px; left:auto; width:min(360px,92vw); top:calc(100% + 8px); padding-top:6px }
  .mobile-menu a{ padding-top:10px; padding-bottom:10px }
  .mobile-menu .close-btn{ position:absolute; top:2px; right:8px; font-size:28px; line-height:1; font-weight:700 }

  /* Thicker borders */
  .card, .card-auth, .btn, button[type=submit], input[type=submit], input, select, textarea{ border-width:1.5px !important }
  .site-header{ border-bottom:1.5px solid rgba(212,175,55,.35) !important }
  .wlb-footer::before{ height:1.5px !important }
}

/* ===================== Intro Panel ===================== */
.intro-panel{
  background: linear-gradient(135deg, rgba(212,175,55,.08), rgba(212,175,55,.15));
  border: 0.5px solid rgba(212,175,55,.45);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  margin: 30px auto;
}
.intro-inner{
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap);
  padding: 40px 28px; align-items: center;
}
.intro-logo img{ max-width: 220px; height: auto; display: block; }
.intro-copy h1{ margin: 0 0 12px; color: var(--gold); font-size: 1.8rem; line-height: 1.25; }
.intro-copy p{ margin: 0 0 16px; color: var(--ink); font-size: 1rem; }
.intro-copy .actions{ margin-top: 10px; }
.intro-copy .actions .btn{ font-size: 1rem; padding: 10px 20px; }

/* Responsive behavior */
@media(max-width:767.98px){
  .intro-inner{ grid-template-columns: 1fr; text-align: center; padding: 28px 18px; }
  .intro-logo{ display: none; }
  .intro-copy h1{ font-size: 1.4rem; }
  .intro-copy p{ font-size: 0.95rem; }
}

/* Home Events title spacing under Intro Panel */
.home-events-title{
  margin: 30px 0;
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1.25;
}


/* Purple CTA button */
a.btn.btn-purple{ border-color:#7f3fbf; color:#7f3fbf; background:transparent; }
a.btn.btn-purple:hover{ border-color:#d4af37; color:#d4af37; background:transparent; }

/* === WLBT PATCH (Intro panel only) === */

/* Keep purple CTA purple at all times */
.intro-panel .btn.btn-purple{
  border-color:#7f3fbf;
  background:#7f3fbf;
  color:#fff;
}
.intro-panel .btn.btn-purple:hover,
.intro-panel .btn.btn-purple:focus,
.intro-panel .btn.btn-purple:active{
  border-color:#7f3fbf;
  background:#7f3fbf;
  color:#fff;
}

/* Layout: two buttons side‑by‑side on phones, without overflow */
.intro-panel .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.intro-panel .actions .btn{
  box-sizing:border-box;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* Large phones (e.g., iPhone 13 Pro Max) — keep two-up layout */
@media (max-width: 920px){
  .intro-logo{ display:none; } /* hide big logo on phablets */
  .intro-panel .actions .btn{
    flex:1 1 calc(50% - 10px);
    max-width:calc(50% - 10px);
  }
}

/* Very small phones — stack buttons full-width */
@media (max-width: 360px){
  .intro-panel .actions .btn{
    flex:1 1 100%;
    max-width:100%;
  }
}

/* === WLBT Intro Panel two-column layout fix === */
.intro-panel{
  background: linear-gradient(135deg, rgba(212,175,55,.08), rgba(212,175,55,.15));
  border: 0.5px solid rgba(212,175,55,.45);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  margin: 30px auto;
}
.intro-inner{ display:grid; grid-template-columns:1fr 2fr; gap:40px; padding:40px 28px; align-items:center; }
.intro-logo img{ max-width:220px; height:auto; display:block; margin:auto; }
.intro-copy h1{ margin:0 0 12px; color:var(--gold); font-size:1.8rem; line-height:1.25; }
.intro-copy p, .intro-copy ul{ margin:0 0 16px; color:var(--ink); font-size:1rem; }
.intro-copy ul{ list-style:disc inside; padding-left:0; }
.intro-copy .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
a.btn.btn-purple{ border-color:#7f3fbf; background:#7f3fbf; color:#fff; }
a.btn.btn-purple:hover{ background:#7f3fbf; color:#fff; border-color:#7f3fbf; }
@media(max-width:767.98px){
  .intro-inner{ grid-template-columns:1fr; text-align:center; }
  .intro-logo{ display:none; }
}

/* --- WLBT intro panel tweaks --- */

/* Desktop/tablet: give more space between logo and text */
.intro-panel .intro-inner{
  grid-template-columns: 300px 1fr;           /* was 280px */
  gap: clamp(24px, 5vw, 56px);                /* wider, responsive gap */
}

/* Keep bullets tidy and left-aligned */
.intro-panel .intro-bullets{
  padding-left: 1.2rem;
  text-align: left;
}
.intro-panel .intro-bullets li{ margin: 6px 0; line-height: 1.5; }

/* Mobile/phablet: stack and LEFT-align everything in the intro copy */
@media (max-width: 920px){
  .intro-panel .intro-inner{ grid-template-columns: 1fr; }
  .intro-panel .intro-logo{ display:none; }
  .intro-panel .intro-copy{ text-align:left; align-items:flex-start; }
  .intro-panel .intro-copy h1,
  .intro-panel .intro-copy p,
  .intro-panel .intro-bullets{ margin-left:0; }
  .intro-panel .actions{ justify-content:flex-start; } /* buttons start at left */
}

/* Very small phones: buttons full width, but still left-aligned visually */
@media (max-width: 600px){
  .intro-panel .actions .btn{ width:100%; }
}

/* spacing before Events */
.pre-events{ margin: 30px 0; }

/* =====================================================================
   WLBT — v25
   - Keep only lower CTA block; outline purple style; spacing intact
   - Header bar spans full width on desktop too
   ===================================================================== */

/* 0) Safety: never show CTAs in intro panel */
.intro-panel .actions,
.intro-panel .actions-center{ display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; }

/* 1) Correct CTA placement + spacing */
.actions-center{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  margin:15px 0 !important;  /* 15px above & 15px below */
  text-align:center !important;
}

/* Purple OUTLINE pill (no fill) */
.actions-center .btn.btn-purple{
  background:transparent !important;
  color:#7f3fbf !important;
  border:1px solid #7f3fbf !important;
}
.actions-center .btn.btn-purple:hover{
  background:rgba(127,63,191,0.12) !important; /* light wash */
  color:#7f3fbf !important;                     /* keep text purple on hover */
  border-color:#7f3fbf !important;
}

/* 2) Equalize bottom spacing inside three cards */
.pre-events .card{ padding-top:20px !important; padding-bottom:20px !important; }
.pre-events .card > :last-child{ margin-bottom:0 !important; }

/* 3) Header full-width on desktop */
.site-header{
  width:100% !important;
  min-width:100% !important;
  background:#0F0F10 !important;
}
.site-header .wrap.header-row{
  max-width:1200px !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:20px !important; padding-right:20px !important;
}

/* =====================================================================
   WLBT — v29 (Card subheading + tagline spacing)
   ===================================================================== */

/* 1) Bold lead sentence in cards = subheading line */
.card p strong:first-child{
  display:block !important;
  font-weight:800 !important;
  margin:0 0 8px 0 !important;
}

/* 2) Tighten "What is WLBT?" + tagline spacing */
.intro-panel .intro-copy h1{
  margin-bottom:0 !important;
}
.intro-panel .intro-copy h1 + .wlbt-tagline{
  margin-top:4px !important;
}


/* =====================================================================
   WLBT — v36 Container Alignment + Mobile Overflow Hardening (2025-09-25)
   - Align intro + pre-events exactly to container
   - Ensure all section headings align to container
   - Prevent mobile overflow on login (iOS zoom + footer 100vw issue)
   - Keep RSVP buttons compact/centered on mobile
   ===================================================================== */

/* 0) Global safety */
html, body{ overflow-x:hidden !important; }

/* 1) Constrain hero/intro + pre-events to container */
.intro-panel{ max-width: var(--container) !important; margin-left:auto !important; margin-right:auto !important; padding-left:20px !important; padding-right:20px !important; }
.pre-events{ max-width: var(--container) !important; margin: 30px auto !important; padding-left:20px !important; padding-right:20px !important; }
.pre-events .grid3{ max-width: var(--container) !important; margin:0 auto !important; padding-left:0 !important; padding-right:0 !important; }

/* 2) Headings should align with container */
#events-heading, #explore-heading{
  display:block; width:100%; box-sizing:border-box;
  max-width: var(--container) !important;
  margin: 30px auto 14px !important;
  padding-left: 20px !important; padding-right: 20px !important;
}

/* 3) Section wrapper standardization */
.section, .wrap, .inner{ max-width: var(--container) !important; margin-left:auto !important; margin-right:auto !important; }
.section{ padding-left:20px !important; padding-right:20px !important; }

/* 4) Event-card RSVP buttons: compact, centered on mobile */
@media (max-width: 767.98px){
  .card .actions{ left:0; right:0; text-align:center; }
  .card .actions .btn{
    width:auto !important; max-width: calc(100% - 120px) !important;
    padding-left:22px !important; padding-right:22px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
}

/* 5) Mobile login form hardening + iOS input zoom fix */
@supports (-webkit-touch-callout: none){
  input, select, textarea{ font-size:16px !important; }
}
@media (max-width: 767.98px){
  form, .auth, .auth-form, .login, .login-form{
    max-width:100% !important; width:100% !important; box-sizing:border-box !important;
    padding-left:12px !important; padding-right:12px !important;
  }
  input, select, textarea, button, .btn{
    max-width:100% !important; width:100% !important; box-sizing:border-box !important;
  }
  /* Footer wide strip can cause horizontal scroll when iOS zooms; neutralize on phones */
  .wlb-footer{ width:100% !important; margin-left:0 !important; margin-right:0 !important; }
}

/* 6) Just in case any 100vw element slips through */
@media (max-width: 767.98px){
  [style*="100vw"], .full-bleed, .bleed{
    width:100% !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important;
  }
}


/* =====================================================================
   WLBT — v36.1 Unified (Home stable + Mobile login harden)
   - Scoped ONLY to homepage sections (no bleed onto podcast/blog)
   - Mobile login overflow + iOS zoom guard (scoped to small screens)
   ===================================================================== */

/* HOME: keep intro + pre-events + home cards aligned to container */
main > section.intro-panel,
main > section.pre-events,
#events-heading, #explore-heading,
#home-cards, #home-cards.section{
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* HOME: RSVP buttons compact + centered on phones */
@media (max-width: 767.98px){
  #home-cards .card .actions{ text-align:center; }
  #home-cards .card .actions .btn{
    width:auto !important;
    max-width: calc(100% - 120px) !important;
    padding-left:22px !important; padding-right:22px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
}

/* MOBILE LOGIN: harden against overflow and iOS zoom */
@supports (-webkit-touch-callout: none){
  input, select, textarea{ font-size:16px !important; }
}
@media (max-width: 767.98px){
  form, .auth, .auth-form, .login, .login-form{
    max-width:100% !important; width:100% !important; box-sizing:border-box !important;
    padding-left:12px !important; padding-right:12px !important;
  }
  input, select, textarea, button, .btn{
    max-width:100% !important; width:100% !important; box-sizing:border-box !important;
  }
  /* Avoid horizontal scroll on phones */
  html, body{ overflow-x:hidden !important; }
}

/* Missing unified block marker; will append new rules below. */

/* =====================================================================
   WLBT — Unified Podcast Styles (2025-09-26) v2
   - One stylesheet only (scoped to .podcast-page)
   - Featured player is a strict 300x300 square on all breakpoints
   - Force iframe/object height to 300px so provider defaults can't shrink it
   - Tight mobile gutters to match homepage look
   ===================================================================== */
:root{
  --wlbt-gold: #D4AF37;
  --wlbt-radius: 14px;
}

@media (max-width: 767.98px){
  html, body{ overflow-x: hidden !important; }
  /* Match homepage tight edges */
  .podcast-page .podcast-card{ padding-left: 4px; padding-right: 4px; }
  .podcast-page .podcast-card .card-body{ padding: 6px; }
}

.podcast-page .card{ overflow: hidden; }

/* Featured player frame inside the card */


/* Optional gold border: toggle by adding 'has-gold-border' to .media */
.podcast-page .podcast-card .media.has-gold-border{
  border: 2px solid var(--wlbt-gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.25);
}

/* Fill the frame; FORCE provider height to 300px */


/* Defensive for Iono iframes (also force 300px) */


@media (max-width: 767.98px){ .podcast-index .card.placeholder{ display:none !important; } }

/* WLBT cleaned patch: baseline and mini override */
iframe[src*="iono.fm"], iframe[src*="iono"]{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: 0 !important;
  height: auto !important;
  max-height: none !important;
}
.podcast-index .podcast-card .media{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
}
.podcast-index .podcast-card .media iframe[src*="iframe.iono.fm"][src*="layout=mini"],
.podcast-index .podcast-card .media iframe[src*="iono.fm"][src*="layout=mini"]{
  height:50px !important;
  min-height:50px !important;
  max-height:50px !important;
}

/* === QUICK FIX (Option A): Mobile dropdown as fixed, scrollable overlay === */
@media (max-width: 767.98px){
  .menu-toggle:checked ~ .mobile-menu {
    position: fixed !important;
    top: calc(var(--header-height, 56px) + 6px) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99999 !important;
    display: block !important;
  }
}



/* WLBT Accessibility: hide skip link by default, show on focus */
.skip-link,
.visually-hidden-focusable {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.visually-hidden-focusable:focus {
  position: fixed;
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: .6rem 1rem;
  background: #000;
  color: #fff;
  border-radius: 6px;
  z-index: 10000;
  text-decoration: none;
  outline: 2px solid #fff;
}