/*
Theme Name: Irish Boston (Growing Up Poor in Irish Boston)
Theme URI: https://irishbostonpodcast.com
Description: Lightweight Hello Elementor child theme for the "Growing Up Poor in Irish Boston" podcast homepage. Broadsheet / newsprint style, Source Serif 4, Ireland palette. Carries the design-system CSS plus the RSS shortcodes ([gupib_latest_episode], [gupib_cover], [gupib_shamrock]).
Author: Perri Digital Media
Template: hello-elementor
Version: 1.0.0
Text Domain: irish-boston-child
*/

/* ==========================================================================
   Design tokens (client "Ireland" palette over the Broadsheet newsprint style)
   ========================================================================== */
:root{
  --ib-paper:#f3f2f2;
  --ib-ink:#201e1d;            /* near-black body */
  --ib-ink-2:#33312f;          /* secondary text */
  --ib-muted:#6b6966;          /* muted */
  --ib-navy:#00005c;           /* primary brand ink, bands, borders */
  --ib-green:#169b62;          /* accent base */
  --ib-green-mid:#128052;
  --ib-green-700:#0f6e45;      /* hover / pressed */
  --ib-orange:#ff893f;
  --ib-orange-700:#c85a1a;
  --ib-gold:#f0ac01;
  --ib-hair:#c9c7c4;
  --ib-hair-2:#d7d5d2;
  --ib-serif:"Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   Shared components (usable in any Elementor widget via CSS class)
   ========================================================================== */

/* Kicker label — serif, uppercase, wide tracking */
.ib-kicker{
  font-family:var(--ib-serif);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12.5px;
  font-weight:700;
  line-height:1.2;
  display:block;
}

/* Subscribe / platform buttons */
.ib-sub-row{display:flex;flex-wrap:wrap;gap:12px;}
.ib-sub-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  font-family:var(--ib-serif);
  font-size:16px;
  letter-spacing:.01em;
  border:1.5px solid var(--ib-navy);
  color:var(--ib-navy);
  background:transparent;
  border-radius:2px;
  transition:all .15s ease;
  text-decoration:none;
  cursor:pointer;
}
.ib-sub-btn:hover{background:var(--ib-navy);color:#fff;}
.ib-sub-btn.primary{background:var(--ib-green);border-color:var(--ib-green);color:#fff;}
.ib-sub-btn.primary:hover{background:var(--ib-green-700);border-color:var(--ib-green-700);color:#fff;}
.ib-sub-btn.on-dark{border-color:rgba(255,255,255,.7);color:#fff;background:transparent;}
.ib-sub-btn.on-dark:hover{background:#fff;color:var(--ib-navy);border-color:#fff;}

/* Visible keyboard focus ring (accent green, 2px, 2px offset) */
.ib-sub-btn:focus-visible,
.gupib a:focus-visible{
  outline:2px solid var(--ib-green);
  outline-offset:2px;
}

.ib-hair{height:1px;background:var(--ib-hair);border:0;margin:0;}

/* ==========================================================================
   Homepage sections
   The whole page is wrapped in .gupib so nothing here can leak into the
   Elementor editor chrome or other pages.
   ========================================================================== */
.gupib{
  font-family:var(--ib-serif);
  color:var(--ib-ink);
  background:var(--ib-paper);
}
.gupib a{color:var(--ib-green-700);text-decoration:none;}
.gupib a:hover{color:var(--ib-green);}

/* Fixed 1240px content width helper (optional; Elementor can also set this
   via the section's Content Width control). */
.gupib .ib-shell{max-width:1240px;margin:0 auto;background:var(--ib-paper);}

/* ---- Header -------------------------------------------------------------- */
.ib-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 48px;
  border-bottom:2.5px solid var(--ib-navy);
}
.ib-brand{display:flex;align-items:center;gap:12px;}
.ib-brand svg{flex:0 0 auto;display:block;}
.ib-brand-lockup{
  display:flex;align-items:center;gap:12px;
  font-family:var(--ib-serif);font-weight:900;font-size:22px;
  color:var(--ib-navy);letter-spacing:-.01em;text-transform:uppercase;
}
.ib-brand-divider{width:1.5px;height:20px;background:var(--ib-hair);display:inline-block;}
.ib-brand-years{font-weight:700;font-size:16px;color:var(--ib-green-700);letter-spacing:.02em;}
.ib-nav{display:flex;gap:28px;font-family:var(--ib-serif);font-size:16px;}
.ib-nav a{color:var(--ib-navy);}
.ib-nav a.ib-support{color:var(--ib-green-700);font-weight:700;}

/* ---- Hero ---------------------------------------------------------------- */
.ib-hero{position:relative;width:100%;height:600px;overflow:hidden;}
.ib-hero .ib-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ib-hero .ib-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,54,.9) 0%,
    rgba(0,0,54,.72) 42%,
    rgba(0,0,54,.15) 72%,
    rgba(0,0,54,0) 100%);
}
.ib-hero .ib-hero-copy{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 48px;max-width:640px;pointer-events:none;
}
.ib-hero .ib-hero-copy a,
.ib-hero .ib-sub-row{pointer-events:auto;}
.ib-hero-kicker{color:var(--ib-gold);margin-bottom:18px;}
.ib-hero h1{
  font-family:var(--ib-serif);font-weight:900;color:#fff;
  font-size:66px;line-height:.96;letter-spacing:-.02em;margin:0 0 20px;
  text-shadow:0 2px 24px rgba(0,0,40,.5);
}
.ib-hero .ib-deck{
  font-family:var(--ib-serif);font-size:20px;line-height:1.55;
  color:#ecebf3;margin:0 0 28px;max-width:44ch;
}
.ib-hero .ib-hero-caption{
  font-family:var(--ib-serif);font-style:italic;color:#c8c7d8;font-size:15px;margin-top:16px;
}
/* Cover-art inset, bottom-right */
.ib-cover-inset{position:absolute;right:40px;bottom:36px;width:150px;pointer-events:none;}
.ib-cover-inset .ib-cover-img{
  width:150px;height:150px;object-fit:cover;display:block;
  box-shadow:0 12px 30px rgba(0,0,40,.5);
}
.ib-cover-inset .ib-kicker{color:#fff;font-size:10px;text-align:center;margin-top:8px;opacity:.85;}

/* ---- Latest Episode band ------------------------------------------------- */
.ib-latest{
  background:var(--ib-navy);color:#fff;padding:34px 48px;
  display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
}
.ib-latest .ib-ep-num-wrap{text-align:center;}
.ib-latest .ib-ep-num-kicker{color:var(--ib-gold);font-size:11px;}
.ib-latest .ib-ep-num{font-family:var(--ib-serif);font-weight:900;font-size:52px;line-height:.9;}
.ib-latest .ib-ep-body{border-left:1px solid rgba(255,255,255,.25);padding-left:32px;}
.ib-latest .ib-ep-kicker{color:var(--ib-gold);margin-bottom:8px;}
.ib-latest .ib-ep-title{font-family:var(--ib-serif);font-weight:800;font-size:26px;line-height:1.15;margin-bottom:6px;}
.ib-latest .ib-ep-meta{font-family:var(--ib-serif);font-style:italic;color:#c8c7d8;font-size:15px;}
.ib-latest .ib-ep-cta{
  border-color:var(--ib-gold);color:var(--ib-navy);background:var(--ib-gold);white-space:nowrap;
}
.ib-latest .ib-ep-cta:hover{background:#fff;border-color:#fff;color:var(--ib-navy);}
/* Graceful state when the feed can't be read */
.ib-latest.ib-latest--empty{grid-template-columns:1fr;text-align:center;}

/* ---- About + Support ----------------------------------------------------- */
.ib-about{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;padding:52px 48px;}
.ib-about .ib-host-kicker{color:var(--ib-green-700);margin-bottom:14px;}
.ib-about .ib-pullquote{
  font-family:var(--ib-serif);font-size:22px;line-height:1.55;color:var(--ib-navy);
  margin:0 0 18px;font-style:italic;
}
.ib-about .ib-host-body{
  font-family:var(--ib-serif);font-size:18px;line-height:1.6;color:var(--ib-ink-2);margin:0;max-width:58ch;
}
.ib-support{border-left:3px solid var(--ib-gold);padding-left:28px;}
.ib-support .ib-support-kicker{color:var(--ib-orange-700);margin-bottom:12px;}
.ib-support p{font-family:var(--ib-serif);font-size:16px;line-height:1.6;color:var(--ib-ink-2);margin:0 0 20px;}
.ib-support .ib-sub-btn{width:100%;justify-content:center;}

/* ---- Footer -------------------------------------------------------------- */
.ib-footer{
  border-top:2.5px solid var(--ib-navy);padding:22px 48px;
  display:flex;justify-content:space-between;
  font-family:var(--ib-serif);font-size:13px;color:var(--ib-muted);letter-spacing:.03em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .ib-hero h1{font-size:clamp(34px,7vw,66px);}
}
@media (max-width:768px){
  .ib-header{flex-direction:column;gap:14px;padding:18px 24px;}
  .ib-nav{gap:18px;flex-wrap:wrap;justify-content:center;}
  .ib-hero{height:520px;}
  .ib-hero .ib-scrim{
    background:linear-gradient(0deg,
      rgba(0,0,54,.92) 0%,
      rgba(0,0,54,.72) 38%,
      rgba(0,0,54,.15) 72%,
      rgba(0,0,54,0) 100%);
  }
  .ib-hero .ib-hero-copy{padding:0 24px;max-width:none;justify-content:flex-end;padding-bottom:40px;}
  .ib-cover-inset{display:none;}
  .ib-latest{grid-template-columns:1fr;gap:18px;text-align:left;padding:28px 24px;}
  .ib-latest .ib-ep-body{border-left:0;border-top:1px solid rgba(255,255,255,.25);padding-left:0;padding-top:18px;}
  .ib-about{grid-template-columns:1fr;gap:32px;padding:40px 24px;}
  .ib-support{border-left:0;border-top:3px solid var(--ib-gold);padding-left:0;padding-top:24px;}
  .ib-footer{flex-direction:column;gap:8px;text-align:center;padding:22px 24px;}
}

@media (min-width: 2400px) {
  .elementor .e-1ac6791-5292a7b { gap: 10px; }
}

.elementor .elementor-element-1ac6791 {
  gap: 20px;
}

/* Podcast episode list */
.ib-podcast { display:flex; flex-direction:column; gap:20px; max-width:820px; margin:0 auto; }
.ib-episode { display:flex; gap:16px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,.1); }
.ib-episode__art { flex:0 0 auto; width:120px; height:120px; border-radius:8px; object-fit:cover; }
.ib-episode__body { flex:1 1 auto; min-width:0; }
.ib-episode__title { margin:0 0 4px; line-height:1.3; }
.ib-episode__meta { margin:0 0 8px; font-size:.85rem; opacity:.7; }
.ib-episode__desc { margin:0 0 12px; line-height:1.5; }
.ib-episode__player { width:100%; height:40px; }
.ib-episode__link { font-weight:600; text-decoration:none; }
@media (max-width:600px){
  .ib-episode { flex-direction:column; }
  .ib-episode__art { width:100%; height:auto; aspect-ratio:1/1; max-width:200px; }
}