/*
Theme Name: 4oz to Freedom
Theme URI: https://www.4oztofreedom.com/
Author: 4oz to Freedom
Author URI: https://www.4oztofreedom.com/
Description: Lightweight custom theme for the 4oz to Freedom podcast site.
Version: 0.2.0
License: GNU General Public License v2 or later
Text Domain: fouroz
*/

/* ========= Palette / Base ========= */
:root{
  --red:#E00000;
  --redHover:#C00000;
  --dark:#111111;
  --medium:#333333;
  --light:#CCCCCC;
  --white:#FFFFFF;
  --panel:#1a1a1a;
  --content-max: 80rem; /* ~1280px */
}

html,body{
  margin:0; padding:0;
  background:var(--dark); color:var(--white);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,sans-serif
}

a{ color:var(--white); text-decoration:none }
img{ max-width:100%; display:block }

/* ========= Layout helpers ========= */
.container{ max-width:var(--content-max); margin:0 auto; padding:0 1rem }
.section{ padding:3.5rem 0 }               /* page rhythm */
.section.border{ border-top:1px solid var(--medium) }

.small{ color:var(--light); font-size:.9rem }

/* Headings */
h1,h2,h3,h4{ margin:.5rem 0; line-height:1.15 }
h1{ font-size:2.75rem; font-weight:800 }
h2{ font-size:2rem;   font-weight:800 }
h3{ font-size:1.25rem;font-weight:700 }

/* Cards / media */
.card{ background:var(--panel); border:1px solid var(--medium); border-radius:1rem; overflow:hidden }
.aspect-video{ position:relative; width:100%; padding-top:56.25%; background:black }
.aspect-video > *{ position:absolute; inset:0; width:100%; height:100% }

/* Grid */
.grid{ display:grid; gap:1.5rem }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }

/* Form primitives */
input,select,textarea{
  background:#1f1f1f; border:1px solid var(--medium);
  color:var(--white); border-radius:.5rem; padding:.75rem; width:100%
}
label{ font-size:.9rem; margin-bottom:.25rem; display:block }
.form-row{ display:grid; gap:1rem; grid-template-columns:1fr 1fr }

/* Buttons */
.btn{ display:inline-block; padding:.6rem 1rem; border-radius:.6rem; font-weight:700 }
.btn-primary{ background:var(--red); color:var(--white) }
.btn-primary:hover{ background:var(--redHover) }
.btn-outline{ background:var(--panel); border:1px solid var(--medium); color:var(--white) }

/* ========= Header ========= */
.site-header{
  background:var(--dark);
  border-bottom:1px solid var(--medium);
  position:sticky; top:0; z-index:10;
}
.header-inner{ height:64px; display:flex; align-items:center; gap:1.25rem }
.brand{ display:flex; align-items:center; gap:.5rem }
.brand-logo{ width:34px; height:34px; object-fit:contain }
.brand-name{ font-weight:800 }

/* nav uses either <a> directly (fallback) or <li><a> from wp_nav_menu */
.main-nav{ margin-left:auto; display:flex; gap:1rem }
.main-nav a{ color:var(--white); opacity:.92; padding:.25rem .35rem }
.main-nav li{ list-style:none; display:inline }
.main-nav li a{ color:var(--white); opacity:.92; padding:.25rem .35rem }

/* ========= Footer (full) ========= */
.site-footer{ background:var(--dark)
  color: #ccc;
  padding: 20px 0 20px;
  border-top: 1px solid #333; /* Top divider */
}

/* upper block */
.footer-top{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr; /* brand | col | col | subscribe */
  gap:2rem; padding:2rem 1rem;
}
.footer-brand .footer-logo{
  width:84px; height:84px; object-fit:contain; border-radius:.75rem
}
.footer-brand h3{ margin:.5rem 0 .25rem; font-weight:800 }
.footer-brand p{ max-width:40ch; color:var(--light) }

.footer-col h4{ font-weight:800; margin:0 0 .75rem }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.footer-col a{ color:var(--white); opacity:.9 }

.subscribe-form{ display:flex; gap:.5rem }
.subscribe-form input{
  flex:1; background:#1f1f1f; border:1px solid var(--medium);
  color:var(--white); border-radius:.5rem; padding:.7rem .85rem
}

/* divider + bottom bar */
.footer-divider{ border-top:1px solid var(--medium) }
.footer-bottom{
  display:flex; justify-content:center; align-items:center;
  height:48px; color:var(--light)
}

/* Legacy slim footer (if used anywhere) */
.footer{ border-top:1px solid var(--medium) }
.footer-inner{
  padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between; min-height:44px
}
.footer-copy{ margin:0; color:var(--light); font-size:.9rem }
.footer-nav a{ color:var(--white); font-weight:600; font-size:.95rem }
.footer-nav .dot{ opacity:.4; margin:0 .75rem; color:var(--white) }

/* ========= Utilities ========= */
hr{ border:0; border-top:1px solid var(--medium) }

/* ========= Responsive ========= */
@media (max-width: 1080px){
  h1{ font-size:2.25rem }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns:1fr }
  .form-row{ grid-template-columns:1fr }
}
@media (max-width: 980px){
  .footer-top{ grid-template-columns:1fr }
  .main-nav{ display:none } /* keep header clean on small screens */
}

/* Latest Episodes – heading & eyebrow */
.eyebrow{
  letter-spacing:.22em; text-transform:uppercase; color:var(--light);
  margin:0 0 .4rem 0; font-size:.9rem
}
.le-heading{ font-size:2.75rem; font-weight:800; margin:.25rem 0 1.25rem }
.le-grid{ gap:2rem } /* a bit more breathing room */

/* Episode card */
.episode-card{
  background:var(--panel); border:1px solid var(--medium);
  border-radius:18px; overflow:hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.episode-card:hover{
  transform: translateY(-2px);
  border-color:#444;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Thumbnail */
.episode-thumb{ display:block; background:#000 }
.episode-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Body */
.episode-body{ padding:1rem 1rem 1.25rem }
.badge{
  display:inline-block; background:#1f1f1f; border:1px solid var(--medium);
  color:var(--white); font-weight:700; font-size:.8rem; border-radius:.5rem;
  padding:.25rem .55rem; margin-bottom:.6rem
}
.episode-title{
  font-size:1.35rem; line-height:1.25; margin:.25rem 0 .35rem 0; font-weight:800
}
.episode-title a{ color:var(--white) }
.episode-meta{ margin:.2rem 0 0 }

/* Section CTA */
.le-cta{ text-align:center; margin-top:1.25rem }

/* Listen card */
.listen-card{
  padding: 1.25rem;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--medium);
}

/* Clean heading spacing inside card */
.listen-card h3{ margin: 0 0 .75rem 0; }

/* Vertical stack of buttons with tight rhythm (no thick dark bars) */
.btn-stack{ display:flex; flex-direction:column; gap:.5rem; }          /* ~8px */
.btn-wide{ width:90%; text-align:center; border-radius:12px; padding: .9rem 1rem; }

/* Top CTA a touch stronger but same width */
.btn-cta{ font-weight:800; }

/* Keep each link above neighbors (prevents overlap anywhere) */
.btn-stack a{ position:relative; z-index:1; }

/* Guest block spacing + label style */
.listen-guest{ margin-top:1rem; }
.listen-guest-label{ text-transform:uppercase; letter-spacing:.08em; margin:0 0 .25rem 0; }


/* ======================
   Mobile Responsiveness
   ====================== */
@media (max-width: 768px){
  /* Global rhythm */
  .section{ padding: 2rem 0; }
  h1{ font-size: 2rem; }
  h2{ font-size: 1.6rem; }
  .btn{ width:100%; text-align:center; }

  /* Collapse any 2-column inline grids used in templates */
  .container[style*="grid-template-columns:2fr 1fr"],
  .container[style*="grid-template-columns:1.25fr 1fr"],
  .container[style*="grid-template-columns:1fr 1fr"]{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }

  /* Episode cards grid to single column */
  .grid-3{ grid-template-columns:1fr; }

  /* Hero image/video fits nicely */
  .aspect-video{ border-radius: 12px; overflow:hidden; }

  /* Listen card spacing */
  .listen-card{ padding: 1rem; }
  .btn-stack{ gap:.5rem; }
}

@media (max-width: 480px){
  h1{ font-size: 1.75rem; }
  h2{ font-size: 1.4rem; }
  .brand-logo{ width:28px; height:28px; }
  .header-inner{ height:56px; }
  .episode-title{ font-size:1.2rem; }

  /* Tighten footer */
  .footer-bottom{ height: 44px; }
}

/* ===== Accessible Hamburger (pseudo-elements) ===== */
.menu-toggle{
  display:none;                 /* shown on mobile in media query */
  position:relative;
  width:44px; height:44px;
  margin-left:auto;
  background:none; border:0; padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus { outline:2px solid var(--light); outline-offset:2px; }

/* The middle bar */
.hamburger{
  position:absolute;
  top:50%; left:11px; right:11px;
  height:2px; background:var(--white);
  transform:translateY(-50%);
  transition:transform .2s ease, opacity .2s ease, background-color .2s ease;
}

/* Top & bottom bars */
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; background:var(--white);
  transition:transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.hamburger::before{ transform:translateY(-8px); }
.hamburger::after { transform:translateY( 8px); }

/* Mobile-only visibility */
@media (max-width: 980px){
  .menu-toggle{ display:block; }

  /* Nav closed by default (same as earlier) */
  .main-nav{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    background:var(--dark);
    border-top:1px solid var(--medium);
    padding:.75rem 1rem;
    z-index:20;
    flex-direction:column; gap:.5rem;
  }
  .site-header.nav-open .main-nav{ display:flex; }

  /* Animate to “X” when open */
  .site-header.nav-open .hamburger{ background:transparent; }
  .site-header.nav-open .hamburger::before{ transform:rotate(45deg); }
  .site-header.nav-open .hamburger::after { transform:rotate(-45deg); }
}


/* Mobile layout */
@media (max-width: 980px){
  .menu-toggle{ display:flex; }
  .header-cta{ display:none; } /* hide big CTA on tiny screens; optional */

  /* Nav closed by default */
  .main-nav{
    display:none;
    position:absolute;
    top:64px;               /* below header */
    left:0; right:0;
    background:var(--dark);
    border-top:1px solid var(--medium);
    padding: .75rem 1rem;
    flex-direction:column;
    gap:.5rem;
    z-index: 20;
  }
  .main-nav a{ padding:.6rem .25rem; display:block; }

  /* When open */
  .site-header.nav-open .main-nav{ display:flex; }

  /* Animate icon to "X" */
  .site-header.nav-open .menu-bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .site-header.nav-open .menu-bar:nth-child(2){ opacity:0; }
  .site-header.nav-open .menu-bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

/* No-JS fallback: show nav if JS disabled */
noscript .main-nav{ display:block !important; position:static !important; }

/* Listen card container (single-episode sidebar) */
.listen-card{
  background: var(--dark);
  border: 1px solid var(--medium);
  border-radius: 16px;
  padding: 16px;
}

/* Vertical stack + spacing */
.listen-card .btn-stack,
.listen-card .listen-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Normalize anchor/button styles inside the card */
.listen-card a,
.listen-card .btn,
.listen-card .listen-btn,
.listen-card .app-link{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--red);
  color: var(--white) !important;
  border: 1px solid transparent;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hover/active */
.listen-card a:hover,
.listen-card .btn:hover,
.listen-card .listen-btn:hover,
.listen-card .app-link:hover{
  background: var(--redHover);
}

.listen-card a:active,
.listen-card .btn:active,
.listen-card .listen-btn:active,
.listen-card .app-link:active{
  transform: translateY(1px);
}

/* Optional: “Open this episode in your app” can be emphasized */
.listen-card .open-anywhere{
  background: linear-gradient(0deg, var(--red), var(--red));
  border: 1px solid rgba(255,255,255,.08);
}

/* Small print/section titles inside the card */
.listen-card .subtle{
  color: var(--light);
  font-size: .95rem;
  margin-top: 14px;
}

/* Mobile tightening */
@media (max-width: 768px){
  .listen-card{ padding: 14px; }
  .listen-card a,
  .listen-card .btn,
  .listen-card .listen-btn,
  .listen-card .app-link{ padding: 13px 14px; }
}

/* =========================
   Footer Subscribe (Mailchimp)
   ========================= */
.site-footer .mc4wp-form,
.site-footer .mc4wp-form .mc4wp-form-fields{
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.site-footer .mc4wp-form .mc4wp-form-fields p{
  margin: 0;              /* remove paragraph gaps in inline forms */
}

.site-footer .mc4wp-form input[type="email"]{
  flex: 1 1 auto;         /* grow to fill space */
  min-width: 0;           /* avoid overflow in flex */
  height: 48px;
  background: #151515;
  color: var(--white);
  border: 1px solid var(--medium);
  border-radius: 12px;
  padding: 0 14px;
}

/* Button should be only as wide as its text, not full width on desktop */
.site-footer .mc4wp-form input[type="submit"]{
  width: auto !important;     /* override any global 100% */
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--red);
  color: var(--white);
  border: 0;
  font-weight: 700;
  white-space: nowrap;
}

/* Stack on mobile */
@media (max-width: 768px){
  .site-footer .mc4wp-form,
  .site-footer .mc4wp-form .mc4wp-form-fields{
    flex-direction: column;
  }
  .site-footer .mc4wp-form input[type="submit"]{
    width: 100% !important;   /* full width on small screens */
  }
}

/* ==============================
   Footer subscribe (Mailchimp) — mobile fix
   ============================== */

/* Ensure the wrapper can expand */
.site-footer .mc4wp-form,
.site-footer .mc4wp-form .mc4wp-form-fields{
  width: 100%;
}

/* Desktop: inline layout (email grows, button auto width) */
.site-footer .mc4wp-form .mc4wp-form-fields{
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.site-footer .mc4wp-form .mc4wp-form-fields p{
  margin: 0; /* kill default <p> spacing inside Mailchimp */
}

/* Email input expands */
.site-footer .mc4wp-form input[type="email"]{
  flex: 1 1 260px;
  width: 100%;
  min-width: 0;          /* prevent overflow in flex */
  height: 48px;
  box-sizing: border-box;
  background: #151515;
  color: var(--white);
  border: 1px solid var(--medium);
  border-radius: 12px;
  padding: 0 14px;
}

/* Button is only as wide as its text on desktop */
.site-footer .mc4wp-form input[type="submit"]{
  width: auto !important;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--red);
  color: var(--white);
  border: 0;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Mobile: stack & make both 100% ---------- */
@media (max-width: 768px){
  .site-footer .mc4wp-form .mc4wp-form-fields{
    display: block !important;           /* force stacking */
  }
  .site-footer .mc4wp-form .mc4wp-form-fields p{
    margin: 0 0 10px;
  }
  .site-footer .mc4wp-form input[type="email"],
  .site-footer .mc4wp-form input[type="submit"]{
    display: block;
    width: 100% !important;              /* full width on mobile */
  }
}

/* ========== Footer Subscribe (Mailchimp) — hard override ========== */
/* Target common footer containers in case the theme uses different wrappers */
.site-footer .mc4wp-form .mc4wp-form-fields,
footer .mc4wp-form .mc4wp-form-fields,
#colophon .mc4wp-form .mc4wp-form-fields{
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

.site-footer .mc4wp-form .mc4wp-form-fields > p,
footer .mc4wp-form .mc4wp-form-fields > p,
#colophon .mc4wp-form .mc4wp-form-fields > p{
  margin: 0 !important;             /* kill default <p> spacing */
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Email input must expand (cover text & email just in case) */
.site-footer .mc4wp-form input[type="email"],
footer .mc4wp-form input[type="email"],
#colophon .mc4wp-form input[type="email"],
.site-footer .mc4wp-form input[type="text"],
footer .mc4wp-form input[type="text"],
#colophon .mc4wp-form input[type="text"]{
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 48px !important;
  box-sizing: border-box !important;
  background: #151515 !important;
  color: var(--white) !important;
  border: 1px solid var(--medium) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
}

/* Button should not take the whole row on desktop */
.site-footer .mc4wp-form input[type="submit"],
footer .mc4wp-form input[type="submit"],
#colophon .mc4wp-form input[type="submit"]{
  width: auto !important;
  height: 48px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  background: var(--red) !important;
  color: var(--white) !important;
  border: 0 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Stack on mobile and make both controls full width */
@media (max-width: 768px){
  .site-footer .mc4wp-form .mc4wp-form-fields,
  footer .mc4wp-form .mc4wp-form-fields,
  #colophon .mc4wp-form .mc4wp-form-fields{
    display: block !important;
  }
  .site-footer .mc4wp-form .mc4wp-form-fields > p,
  footer .mc4wp-form .mc4wp-form-fields > p,
  #colophon .mc4wp-form .mc4wp-form-fields > p{
    margin: 0 0 10px !important;
  }
  .site-footer .mc4wp-form input[type="email"],
  footer .mc4wp-form input[type="email"],
  #colophon .mc4wp-form input[type="email"],
  .site-footer .mc4wp-form input[type="text"],
  footer .mc4wp-form input[type="text"],
  #colophon .mc4wp-form input[type="text"],
  .site-footer .mc4wp-form input[type="submit"],
  footer .mc4wp-form input[type="submit"],
  #colophon .mc4wp-form input[type="submit"]{
    width: 100% !important;
  }
}

/* =========================
   Footer > .subscribe-form
   ========================= */
.site-footer .subscribe-form{
  display: grid;
  grid-template-columns: 1fr auto; /* email grows, button fits */
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.site-footer .subscribe-form input[type="email"]{
  width: 100%;
  min-width: 0;            /* prevent flex/grid overflow */
  height: 48px;
  box-sizing: border-box;
  background: #151515;
  color: var(--white);
  border: 1px solid var(--medium);
  border-radius: 12px;
  padding: 0 14px;
}

.site-footer .subscribe-form .btn,
.site-footer .subscribe-form button[type="submit"]{
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  white-space: nowrap;
  width: auto;             /* inline on desktop */
}

/* Mobile: stack both full-width */
@media (max-width: 768px){
  .site-footer .subscribe-form{
    grid-template-columns: 1fr;     /* stack */
  }
  .site-footer .subscribe-form .btn,
  .site-footer .subscribe-form button[type="submit"],
  .site-footer .subscribe-form input[type="email"]{
    width: 100%;
  }
}

/* ================================
   Fix: "View all episodes" button overflow
   ================================ */
.le-cta {
  text-align: center;
  margin-top: 2rem;
}

.le-cta .btn {
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 0.9em 2em;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  border: none;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
}

.le-cta .btn:hover {
  background: var(--redHover);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .le-cta {
    padding: 0 1rem;
  }
  .le-cta .btn {
    width: 100%;
    font-size: 0.95rem;
    padding: 1em;
    border-radius: 10px;
  }
}

/* Latest Episodes — keep CTA contained on small screens */
@media (max-width: 768px){
  /* Make sure the container has side padding */
  .section .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* If the grid uses negative margins, neutralize them in this section */
  .le-grid{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Center the CTA and keep it inside the container */
  .le-cta{
    margin-top: 24px;
    padding-left: 0;   /* can safely add 16px if your theme has zero container padding */
    padding-right: 0;
    text-align: center;
  }

  /* Make the button fill the width WITHOUT overflowing */
  .le-cta .btn{
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;  /* prevents 100% + padding overflow */
    padding: 16px 18px;
    border-radius: 12px;
    white-space: normal;
  }
}

/* Defensive: images and thumbs never exceed their card */
.episode-thumb img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Global Mobile Fixes */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  .grid,
  .le-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  h1, h2, h3 {
    line-height: 1.2;
    word-wrap: break-word;
  }

  .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  footer .footer-col {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .footer-col form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col input[type="email"] {
    width: 100%;
    border-radius: 10px;
  }

  .footer-col button {
    width: 100%;
    border-radius: 10px;
  }
}

/* ======================================
   Single Episode – Desktop listen sidebar
   ====================================== */

/* 1) Make sure the episode page uses a two-column layout with a fixed sidebar */
@media (min-width: 1080px){
  /* If you already have a layout class, keep it; this is a defensive fallback */
  body.single-episode .episode-layout,
  body.single-episode .container-episode,
  body.single-episode .content-with-aside {
    display: grid;
    grid-template-columns: 1fr 360px;   /* main | sidebar */
    gap: 28px;
    align-items: start;
  }
}

/* 2) Listen card: tidy spacing and containment */
body.single-episode .listen-card {
  background: var(--dark);
  border: 1px solid var(--medium);
  border-radius: 16px;
  padding: 16px;
}

body.single-episode .listen-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

/* 3) Button stack – consistent, full-width inside the card on desktop too */
body.single-episode .listen-card .btn-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Normalize anchors as block buttons */
body.single-episode .listen-card .btn-stack a {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background: var(--red);
  color: var(--white) !important;
  border: 1px solid transparent;
  white-space: normal;              /* prevent overflow if a label wraps */
  transition: background-color .15s ease, transform .06s ease;
}
body.single-episode .listen-card .btn-stack a:hover {
  background: var(--redHover);
}
body.single-episode .listen-card .btn-stack a:active {
  transform: translateY(1px);
}

/* Optional: slightly emphasize the top CTA */
body.single-episode .listen-card .btn-stack .btn-cta {
  border: 1px solid rgba(255,255,255,.08);
}

/* 4) Guest block spacing */
body.single-episode .listen-guest {
  margin-top: 14px;
}
body.single-episode .listen-guest .listen-guest-label {
  color: var(--light);
  margin: 4px 0;
}

/* 5) Mobile fallback (keeps what you like on phones) */
@media (max-width: 980px){
  body.single-episode .listen-card { padding: 14px; }
  body.single-episode .listen-card .btn-stack a {
    padding: 13px 14px;
  }
}

/* ===== Contact page polish ===== */

/* Compact hero spacing */
.section-compact{ padding-top: 24px; padding-bottom: 12px; }
.section-compact .lead{ margin-top: 6px; color: var(--light); }

/* Two-column content with sidebar; auto-stacks on mobile */
.contact-wrap{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 980px){
  .contact-wrap{ grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Cards in contact area */
.contact-card{ padding: 16px; border-radius: 16px; }

/* Form layout */
.contact-form .form-row{ margin-bottom: 14px; }
.contact-form .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px){
  .contact-form .grid-2{ grid-template-columns: 1fr; }
}

.contact-form .form-field label{
  color: var(--white);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

/* Inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea{
  width: 100%;
  background: #151515;
  color: var(--white);
  border: 1px solid var(--medium);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.35;
  box-sizing: border-box;
}
.contact-form select{ height: 48px; }
.contact-form textarea{ min-height: 160px; }

/* Actions: checkbox + button on one line (stack on mobile) */
.contact-form .form-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 768px){
  .contact-form .form-actions{ flex-direction: column; align-items: flex-start; }
  .contact-form .form-actions .btn{ width: 100%; }
}

/* Checkbox */
.inline-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.inline-checkbox input[type="checkbox"]{
  width: 18px; height: 18px;
  accent-color: var(--red);
}

/* Small muted helper text */
.contact-form .muted{ color: var(--light); }

/* Make the submit look like primary button if not already */
.contact-form .btn.btn-primary{
  background: var(--red);
  color: var(--white);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  transition: background-color .15s ease, transform .06s ease;
}
.contact-form .btn.btn-primary:hover{ background: var(--redHover); }
.contact-form .btn.btn-primary:active{ transform: translateY(1px); }

/* Styled dropdown with custom caret */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #111;
  color: #fff;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 12px 2.5rem 12px 1rem;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position:
    right 1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* optional hover/focus polish */
select:hover, select:focus {
  border-color: #e53935;
  outline: none;
}

/* Contact select caret — tighter inboard position */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #111;
  color: var(--white);
  border: 1px solid var(--medium);
  border-radius: 12px;
  padding: 12px 2.75rem 12px 1rem; /* extra right padding for the caret */
  width: 100%;
  font: inherit;

  /* two-triangle caret */
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 8px 8px, 8px 8px; /* a hair larger for retina crispness */

  /* move both triangles further in from the right */
  background-position:
    right 1.25rem center,  /* left triangle */
    right 0.9rem  center;  /* right triangle */
}

.contact-form select:hover,
.contact-form select:focus {
  border-color: var(--red);
  outline: none;
}