/*
Theme Name: Polish Canadian Arts Institute
Theme URI: https://polishcanadianartsinstitute.ca
Author: Polish Canadian Arts Institute
Author URI: https://polishcanadianartsinstitute.ca
Description: A light red-and-white WordPress theme for the Polish Canadian Arts Institute. White canvas with soft red atmospheric tints, plain system fonts, and a barless header.
Version: 9.1
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pcai
*/

:root{
  --white:#FFFFFF;
  --off-white:#FDFCFB;
  --red:#F0230D;            /* logo red */
  --red-dark:#C31A08;
  --red-tint:rgba(240,35,13,0.05);
  --teal:#068591;           /* logo teal */
  --teal-deep:#013E4D;      /* logo deep teal-navy */
  --orange:#F99214;         /* logo orange accent */
  --text:#2A2A2A;
  --text-soft:#5C5C5C;
  --line:rgba(240,35,13,0.18);
  --hairline:rgba(0,0,0,0.09);
  --max:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* light atmosphere: white with the gentlest red washes */
body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color:var(--text);
  line-height:1.7;
  background:
    radial-gradient(ellipse 80% 50% at 10% -5%, rgba(240,35,13,0.07), transparent 60%),
    radial-gradient(ellipse 70% 45% at 100% 20%, rgba(240,35,13,0.045), transparent 60%),
    radial-gradient(ellipse 90% 55% at 50% 105%, rgba(240,35,13,0.06), transparent 65%),
    linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
  background-attachment:fixed;
  min-height:100vh;
}

h1,h2,h3,h4{
  font-family:inherit;
  font-weight:700;
  margin:0 0 0.4em;
  line-height:1.15;
  color:var(--text);
  letter-spacing:-0.015em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
.eyebrow{
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--red);
}

/* ---------- barless header: just a logo and plain links ---------- */
header{padding:34px 0 10px;}
.nav{
  max-width:var(--max); margin:0 auto; padding:0 32px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
}
.brand img{height:64px; width:auto; margin:0 auto;}
#primary-nav{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 26px;
}
#primary-nav li a{
  font-size:0.9rem; font-weight:500; color:var(--text-soft);
  padding-bottom:3px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
#primary-nav li a:hover{color:var(--red); border-color:var(--red);}
#primary-nav li a.nav-cta{color:var(--red); font-weight:700;}
#primary-nav li a.nav-cta:hover{color:var(--red-dark); border-color:var(--red-dark);}
.menu-toggle{display:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:13px 30px; border-radius:6px;
  font-weight:600; font-size:0.92rem;
  border:2px solid var(--red);
  transition:background .15s ease, color .15s ease, box-shadow .2s ease;
}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark); border-color:var(--red-dark); box-shadow:0 8px 22px rgba(240,35,13,0.25);}
.btn-ghost{background:#fff; color:var(--red);}
.btn-ghost:hover{background:var(--red); color:#fff;}

/* ---------- hero ---------- */
.hero{position:relative; padding:70px 0 90px; overflow:hidden;}
.hero-photo{position:absolute; inset:0; z-index:-1;}
.hero-photo img{
  width:100%; height:100%; object-fit:cover;
  opacity:0.14;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 70% 40%, #000 25%, transparent 75%);
          mask-image:radial-gradient(ellipse 85% 80% at 70% 40%, #000 25%, transparent 75%);
}
.hero h1{
  font-size:clamp(2.6rem, 5.6vw, 4.4rem);
  max-width:16ch; margin-top:0.35em;
}
.hero h1 em{font-style:normal; color:var(--red);}
.hero p{max-width:54ch; font-size:1.08rem; color:var(--text-soft); margin-top:1.1em;}
.hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}

/* ---------- sections ---------- */
section{position:relative; padding:90px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);}
.section-head p{color:var(--text-soft); margin-top:14px;}

/* soft red washes behind sections (replaces old tints; no purple) */
.tint-amber::before, .tint-violet::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 65% 70% at 20% 25%, var(--red-tint), transparent 65%);
}
.tint-violet::before{background:radial-gradient(ellipse 70% 70% at 80% 60%, var(--red-tint), transparent 65%);}

/* cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{
  padding:34px 28px; border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(240,35,13,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(240,35,13,0.14);}
.card .num{font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:14px;}
.card h3{font-size:1.3rem;}
.card p{color:var(--text-soft); font-size:0.95rem; margin-top:10px;}

/* pillars */
.pillar{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:48px 0;
}
.pillar:nth-of-type(even) .pillar-text{order:-1;}
.pillar-img{border-radius:14px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,0.12);}
.pillar-img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}
.pillar-img.natural img{aspect-ratio:auto; height:auto;}
.pillar-text .eyebrow{display:block; margin-bottom:12px;}
.pillar-text h3{font-size:1.7rem;}
.pillar-text p{color:var(--text-soft);}

/* spotlight: red-washed chamber, light */
.spotlight::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 55% 70% at 28% 45%, rgba(240,35,13,0.10), transparent 65%),
    radial-gradient(ellipse 45% 55% at 80% 60%, rgba(240,35,13,0.06), transparent 65%);
}
.spotlight-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
.spotlight-img{
  border-radius:14px; overflow:hidden;
  box-shadow:0 20px 50px rgba(240,35,13,0.18);
  border:1px solid var(--line);
}
.spotlight h2{font-size:clamp(1.8rem,3.2vw,2.4rem); margin-top:0.3em;}
.spotlight p{color:var(--text-soft);}
.spotlight .btn{margin-top:20px;}

/* newsletter */
.cta{text-align:center;}
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 55% 80% at 50% 35%, rgba(240,35,13,0.08), transparent 70%);
}
.cta .wrap{max-width:620px;}
.cta h2{font-size:clamp(1.8rem,3.4vw,2.4rem);}
.cta p{color:var(--text-soft); margin-top:12px;}
.cta-form{
  display:flex; margin:30px auto 0; max-width:440px;
  border-radius:8px; overflow:hidden;
  border:2px solid var(--red);
  background:#fff;
  box-shadow:0 10px 30px rgba(240,35,13,0.12);
}
.cta-form input{
  flex:1; border:none; padding:15px 18px; background:#fff;
  font-family:inherit; font-size:0.95rem; color:var(--text);
}
.cta-form input:focus{outline:none; background:rgba(240,35,13,0.03);}
.cta-form button{
  border:none; cursor:pointer; padding:0 26px;
  font-family:inherit; font-weight:700; color:#fff;
  background:var(--red);
}
.cta-form button:hover{background:var(--red-dark);}

/* ---------- footer ---------- */
footer{position:relative; padding:76px 0 40px; border-top:1px solid var(--line);}
footer::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 80% 90% at 50% 110%, rgba(240,35,13,0.06), transparent 70%);
}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:42px; border-bottom:1px solid var(--hairline);}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand img{height:40px;}
.footer-brand span{font-weight:700; font-size:1.05rem;}
footer h4{font-size:0.74rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--red); margin-bottom:16px;}
footer p{color:var(--text-soft);}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer ul li a{color:var(--text-soft);}
footer ul li a:hover{color:var(--red);}
.social{display:flex; gap:12px; margin-top:10px;}
.social a{
  width:38px; height:38px; border-radius:50%;
  border:2px solid var(--red); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700;
  transition:background .15s ease, color .15s ease;
}
.social a:hover{background:var(--red); color:#fff;}
.footer-bottom{padding-top:26px; font-size:0.84rem; color:var(--text-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- inner pages ---------- */
.page-hero{position:relative; padding:64px 0 48px;}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 60% 90% at 18% 0%, rgba(240,35,13,0.08), transparent 65%);
}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem); margin-top:0.3em;}
.page-content{padding:24px 0 100px;}
.page-body{max-width:720px;}
.page-body p{color:var(--text-soft); font-size:1.02rem;}
.page-body h2{font-size:1.9rem; margin-top:1.4em;}
.page-body h3{font-size:1.4rem; margin-top:1.5em;}
.page-body img{border-radius:12px; margin:1.5em 0; box-shadow:0 14px 36px rgba(0,0,0,0.12);}
.page-body a{color:var(--red); border-bottom:1px solid rgba(240,35,13,0.4);}
.page-body a:hover{color:var(--red-dark); border-color:var(--red-dark);}
.page-body blockquote{
  border-left:3px solid var(--red);
  margin:1.5em 0; padding:0.2em 0 0.2em 1.2em;
  font-style:italic; font-size:1.12rem; color:var(--text-soft);
}
.page-body ul, .page-body ol{color:var(--text-soft); padding-left:1.3em;}
.page-body .btn{margin-top:12px;}

.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.about-img{border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(240,35,13,0.16); border:1px solid var(--line);}

.episode-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.episode-card{
  border-radius:12px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(240,35,13,0.06);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.episode-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(240,35,13,0.14);}
.episode-card > img{width:100%; aspect-ratio:16/9; object-fit:cover;}
.episode-info{padding:24px;}
.episode-info h3{font-size:1.25rem; margin:6px 0 14px;}
.episode-card audio, .episode-row audio{width:100%;}

.episode-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.episode-row{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;
  padding:22px 26px; border-radius:12px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(240,35,13,0.05);
  transition:box-shadow .2s ease;
}
.episode-row:hover{box-shadow:0 10px 28px rgba(240,35,13,0.12);}
.episode-row h3{font-size:1.15rem; margin:4px 0 0;}

.listen-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;}
.listen-link{
  display:block; padding:22px; border-radius:12px;
  background:#fff; border:1px solid var(--line);
  font-weight:700; font-size:1.05rem;
  transition:background .15s ease, color .15s ease, transform .2s ease;
}
.listen-link span{display:block; font-weight:400; font-size:0.82rem; color:var(--text-soft); margin-top:6px;}
.listen-link:hover{background:var(--red); color:#fff; transform:translateY(-3px);}
.listen-link:hover span{color:rgba(255,255,255,0.85);}

.report-stack img{margin:0 auto 28px; border-radius:10px; max-width:820px; width:100%; box-shadow:0 14px 36px rgba(0,0,0,0.12); border:1px solid var(--hairline);}

.issue-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,340px)); gap:20px;}
.issue-card{
  display:block; padding:28px; border-radius:12px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(240,35,13,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.issue-card h3{font-size:1.3rem; margin:8px 0 14px;}
.issue-download{color:var(--red); font-weight:700; font-size:0.86rem;}
.issue-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(240,35,13,0.15);}

/* ---------- responsive ---------- */
@media (max-width: 940px){
  header{padding:24px 0 6px;}
  .brand img{height:52px;}
  #primary-nav{gap:6px 18px;}
  .cards, .pillar, .spotlight-grid, .about-grid, .footer-top, .episode-grid, .episode-row{grid-template-columns:1fr;}
  .pillar:nth-of-type(even) .pillar-text{order:0;}
  .pillar{gap:24px;}
  .episode-row{gap:12px;}
  .hero{padding:50px 0 70px;}
  .hero-photo img{-webkit-mask-image:none; mask-image:none; opacity:0.08;}
}

/* ---------- SoundCloud embed (homepage) ---------- */
.soundcloud-box{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(240,35,13,0.10);
  background:#fff;
}
.soundcloud-box iframe{display:block; width:100%; border:0;}
.soundcloud-note{font-size:0.85rem; color:#8a8a8a; margin-top:14px;}

/* =========================================================
   v4.2 — RED PROMINENCE OVERRIDES
   Red moves from accent to lead: red headline color, strong
   red washes, and deep-red gradient bands with white text.
   ========================================================= */

/* stronger red atmosphere on the white canvas */
body{
  background:
    radial-gradient(ellipse 80% 50% at 10% -5%, rgba(240,35,13,0.16), transparent 60%),
    radial-gradient(ellipse 70% 45% at 100% 20%, rgba(240,35,13,0.10), transparent 60%),
    radial-gradient(ellipse 90% 55% at 50% 105%, rgba(240,35,13,0.14), transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, #FDF7F7 100%);
  background-attachment:fixed;
}

/* headlines carry the red */
h1,h2,h3,h4{color:var(--red-dark);}
.hero h1{color:var(--red-dark);}
.hero h1 em{color:var(--red);}

/* stronger washes behind white sections */
.tint-amber::before{background:radial-gradient(ellipse 65% 70% at 20% 25%, rgba(240,35,13,0.10), transparent 65%);}
.tint-violet::before{background:radial-gradient(ellipse 70% 70% at 80% 60%, rgba(240,35,13,0.10), transparent 65%);}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 15% 30%, rgba(240,35,13,0.14), transparent 65%);
}

/* cards: red-edged */
.card{border-top:5px solid var(--red);}
.episode-card, .issue-card, .listen-link{border:1px solid rgba(240,35,13,0.3);}

/* ---- deep-red gradient band: radio spotlight ---- */
.spotlight{
  background:
    radial-gradient(ellipse 60% 80% at 22% 40%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 70%, rgba(0,0,0,0.25), transparent 65%),
    linear-gradient(135deg, var(--red) 0%, var(--red-dark) 70%, #013E4D 100%);
  color:#fff;
}
.spotlight::before{display:none;}
.spotlight h2, .spotlight h3{color:#fff;}
.spotlight p{color:rgba(255,255,255,0.88);}
.spotlight .eyebrow{color:rgba(255,255,255,0.85);}
.spotlight-img{border-color:rgba(255,255,255,0.35); box-shadow:0 24px 60px rgba(0,0,0,0.35);}
.spotlight .btn-ghost{background:transparent; border-color:#fff; color:#fff;}
.spotlight .btn-ghost:hover{background:#fff; color:var(--red-dark);}

/* ---- deep-red gradient band: newsletter ---- */
.cta{
  background:
    radial-gradient(ellipse 55% 90% at 50% 0%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(160deg, var(--red) 0%, var(--red-dark) 65%, #013E4D 100%);
  color:#fff;
}
.cta::before{display:none;}
.cta h2{color:#fff;}
.cta p{color:rgba(255,255,255,0.88);}
.cta .eyebrow{color:rgba(255,255,255,0.85);}
.cta-form{border-color:#fff; box-shadow:0 14px 40px rgba(0,0,0,0.3);}
.cta-form button{background:var(--red-dark);}
.cta-form button:hover{background:#013E4D;}

/* ---- deep-red gradient band: footer ---- */
footer{
  border-top:none;
  background:
    radial-gradient(ellipse 75% 90% at 15% 0%, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(170deg, var(--red-dark) 0%, #013E4D 100%);
  color:rgba(255,255,255,0.85);
}
footer::before{display:none;}
footer h4{color:#fff;}
footer p{color:rgba(255,255,255,0.75);}
footer ul li a{color:rgba(255,255,255,0.8);}
footer ul li a:hover{color:#fff;}
.footer-brand span{color:#fff;}
.footer-top{border-bottom-color:rgba(255,255,255,0.2);}
.social a{border-color:rgba(255,255,255,0.7); color:#fff;}
.social a:hover{background:#fff; color:var(--red-dark);}
.footer-bottom{color:rgba(255,255,255,0.6);}

/* ---- deep-red banner: inner page heroes ---- */
.page-hero{
  background:
    radial-gradient(ellipse 60% 90% at 80% 10%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(120deg, var(--red) 0%, var(--red-dark) 70%, #013E4D 100%);
  padding:80px 0 60px;
  margin-bottom:48px;
}
.page-hero::before{display:none;}
.page-hero h1{color:#fff;}
.page-hero .eyebrow{color:rgba(255,255,255,0.85);}

/* =========================================================
   v4.3 — CLEAN SEPARATION OVERRIDES
   White areas are plain white; red areas are solid red.
   No red-to-white gradient washes in between.
   ========================================================= */

/* solid white canvas — no atmospheric washes */
body{background:#FFFFFF;}
.tint-amber::before, .tint-violet::before{display:none;}
.hero-photo::after{display:none;}
.hero-photo img{opacity:0.10;}
.page-hero::before, .spotlight::before, .cta::before, footer::before{display:none;}

/* solid red bands — flat color, no internal glows */
.spotlight{background:var(--red-dark);}
.cta{background:var(--red-dark);}
footer{background:#013E4D;}
.page-hero{background:var(--red-dark);}

/* trim gradient details elsewhere */
.btn-primary{box-shadow:none;}
.btn-primary:hover{box-shadow:none;}
.card{box-shadow:0 3px 12px rgba(0,0,0,0.06);}
.card:hover{box-shadow:0 8px 20px rgba(0,0,0,0.10);}
.episode-card, .issue-card, .episode-row{box-shadow:none;}
.episode-card:hover, .issue-card:hover{box-shadow:0 8px 20px rgba(0,0,0,0.10);}
.spotlight-img, .about-img{box-shadow:0 14px 34px rgba(0,0,0,0.25);}
.cta-form{box-shadow:none;}
.soundcloud-box{box-shadow:none;}
.pillar-img, .page-body img, .report-stack img{box-shadow:0 8px 24px rgba(0,0,0,0.12);}

/* header: nav links only, centered */
header{padding:26px 0 6px;}
.nav{justify-content:center;}

/* v4.9 — buttons inside page text must not inherit the red link color */
.page-body a.btn{border-bottom:none;}
.page-body a.btn-primary{color:#fff;}
.page-body a.btn-primary:hover{color:#fff;}
.page-body a.btn-ghost{color:var(--red);}
.page-body a.btn-ghost:hover{color:#fff;}

/* v4.13 — Polonia photo layouts */
.photo-pair, .photo-trio{display:grid; gap:16px; margin-top:28px;}
.photo-pair{grid-template-columns:repeat(2,1fr);}
.photo-trio{grid-template-columns:repeat(3,1fr);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px;}
.photo-pair img, .photo-trio img, .gallery-grid img, .wide-photo img{
  width:100%; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.gallery-grid img{height:200px; object-fit:cover;}
.wide-photo{margin-top:16px;}
@media (max-width: 940px){
  .photo-trio, .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .photo-pair{grid-template-columns:1fr;}
}

/* =========================================================
   v4.15 — Polonia photos display at native size (no upscaling,
   no forced crops), so they stay sharp.
   ========================================================= */
.photo-pair img, .photo-trio img, .gallery-grid img, .wide-photo img{
  width:auto; max-width:100%; height:auto;
  margin:0 auto; display:block;
}
.gallery-grid img{height:auto; object-fit:unset;}
.photo-pair, .photo-trio, .gallery-grid{justify-items:center; align-items:center;}
.wide-photo{text-align:center;}
.wide-photo img{display:inline-block;}

/* natural pillar images: size the frame to the photo, not the column */
.pillar-img.natural{
  box-shadow:none; border-radius:0; overflow:visible;
  display:flex; justify-content:center;
}
.pillar-img.natural img{
  width:auto; max-width:100%; height:auto;
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12);
}

/* =========================================================
   v4.17 — night mode
   ========================================================= */
header{position:relative;}
#theme-toggle{
  position:absolute; top:50%; right:20px; transform:translateY(-50%); z-index:200;
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--red); background:#fff;
  font-size:1.15rem; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
  transition:transform .15s ease;
}
#theme-toggle:hover{transform:translateY(-50%) scale(1.08);}

body.dark{background:#0F1B2D; color:#E8EDF5;}
body.dark #theme-toggle{background:#1C2B45; border-color:var(--red); color:#fff;}

body.dark h1, body.dark h2, body.dark h3, body.dark h4{color:#F08894;}
body.dark .page-hero h1, body.dark .spotlight h2, body.dark .spotlight h3, body.dark .cta h2{color:#fff;}

body.dark #primary-nav li a{color:#C3CCDC;}
body.dark #primary-nav li a:hover{color:#F08894; border-color:#F08894;}
body.dark #primary-nav li a.nav-cta{color:#F08894;}

body.dark .hero p, body.dark .section-head p, body.dark .card p,
body.dark .pillar-text p, body.dark .page-body p,
body.dark .page-body ul, body.dark .page-body ol,
body.dark .listen-link span, body.dark p[style*="text-align:center"],
body.dark p[style*="text-align:right"]{color:#B9C3D4;}

body.dark .card, body.dark .episode-card, body.dark .episode-row,
body.dark .listen-link, body.dark .issue-card, body.dark .soundcloud-box{
  background:#1C2B45;
  border-color:rgba(240,35,13,0.45);
  color:#E8EDF5;
}
body.dark .card{box-shadow:0 3px 12px rgba(0,0,0,0.35);}
body.dark .listen-link:hover{background:var(--red); color:#fff;}
body.dark .issue-card:hover{box-shadow:0 8px 20px rgba(0,0,0,0.5);}

body.dark .btn-ghost{background:transparent; color:#F08894; border-color:var(--red);}
body.dark .btn-ghost:hover{background:var(--red); color:#fff;}

body.dark .cta-form{border-color:var(--red);}
body.dark .cta-form input{background:#1C2B45; color:#E8EDF5;}
body.dark .cta-form input::placeholder{color:rgba(237,228,230,0.45);}

body.dark .hero-photo img{opacity:0.16;}
body.dark .footer-bottom, body.dark footer p{color:rgba(255,255,255,0.65);}

/* =========================================================
   v4.20 — split hero
   ========================================================= */
.hero{padding:64px 0 84px;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
.hero-copy h1{font-size:clamp(2.4rem, 4.8vw, 3.8rem); max-width:14ch;}
.hero-rule{width:76px; height:5px; background:var(--red); margin:18px 0 22px;}
.hero-copy p{max-width:52ch; font-size:1.05rem; color:var(--text-soft); margin:0 0 30px;}
.hero-actions{margin-top:0;}
.hero-side{position:relative;}
.hero-side::before{
  content:""; position:absolute; inset:18px -18px -18px 18px;
  background:var(--red); border-radius:12px; z-index:-1;
}
.hero-side img{
  width:100%; border-radius:12px; display:block;
  box-shadow:0 14px 34px rgba(0,0,0,0.18);
}
body.dark .hero-copy p{color:#B9C3D4;}
@media (max-width: 940px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-side{margin-right:18px;}
  .hero{padding:44px 0 64px;}
}

/* =========================================================
   v5.0 — Heritage Month dropdown menu
   ========================================================= */
#primary-nav li{position:relative;}
#primary-nav .sub-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin:0; padding:8px 0; list-style:none; min-width:120px; z-index:150;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 10px 26px rgba(0,0,0,0.14);
}
#primary-nav li.has-dropdown:hover > .sub-menu,
#primary-nav li.menu-item-has-children:hover > .sub-menu,
#primary-nav li:focus-within > .sub-menu{display:block;}
#primary-nav .sub-menu li a{
  display:block; padding:8px 18px; border-bottom:none;
  text-align:center; color:var(--text-soft);
}
#primary-nav .sub-menu li a:hover{color:var(--red); background:rgba(240,35,13,0.06);}
body.dark #primary-nav .sub-menu{background:#1C2B45; border-color:rgba(240,35,13,0.45);}
body.dark #primary-nav .sub-menu li a{color:#C3CCDC;}
body.dark #primary-nav .sub-menu li a:hover{color:#F08894; background:rgba(240,35,13,0.15);}
@media (max-width: 940px){
  #primary-nav .sub-menu{
    display:block; position:static; transform:none;
    border:none; box-shadow:none; background:transparent; padding:2px 0 2px 16px;
  }
  #primary-nav .sub-menu li a{text-align:left; padding:4px 0;}
}

/* =========================================================
   v5.6 — left brand: mic + What's Up Windsor? Polish Radio
   ========================================================= */
.nav{
  flex-direction:row; justify-content:space-between; align-items:center;
  text-align:left; gap:24px; flex-wrap:wrap;
}
.brand-left{
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:1rem; color:var(--red-dark);
  white-space:nowrap;
}
.brand-left:hover{color:var(--red);}
.brand-mic{font-size:1.35rem; line-height:1;}
body.dark .brand-left{color:#F08894;}
body.dark .brand-left:hover{color:#fff;}
@media (max-width: 940px){
  .nav{flex-direction:column; align-items:center; gap:12px;}
  .brand-left{white-space:normal; text-align:center;}
}

/* v5.8 — initiative cards: no hover movement */
.card:hover{transform:none; box-shadow:0 3px 12px rgba(0,0,0,0.06);}
body.dark .card:hover{box-shadow:0 3px 12px rgba(0,0,0,0.35);}

/* =========================================================
   v5.9 — softer light background, lighter night background
   ========================================================= */

/* light mode: warm off-white instead of pure white.
   Cards stay pure white so they lift off the page. */
body{background:#F7F3F1;}
.card, .episode-card, .episode-row, .listen-link,
.issue-card, .soundcloud-box, .cta-form input{background:#FFFFFF;}

/* night mode: lighter navy */
body.dark{background:#22344F;}
body.dark .card, body.dark .episode-card, body.dark .episode-row,
body.dark .listen-link, body.dark .issue-card, body.dark .soundcloud-box,
body.dark .cta-form input{background:#2C4160;}
body.dark #primary-nav .sub-menu{background:#2C4160;}
body.dark #theme-toggle{background:#2C4160;}

/* v6.0 — twin-flag brand mark replaces the mic */
.brand-flag{height:20px; width:auto; display:block; flex:none;}

/* v6.1 — drop the Heritage Month submenu lower.
   The ::before strip bridges the new gap so the menu
   stays open while the mouse travels down to it. */
#primary-nav .sub-menu{top:calc(100% + 14px);}
#primary-nav .sub-menu::before{
  content:""; position:absolute;
  left:0; right:0; top:-16px; height:16px;
}
@media (max-width: 940px){
  #primary-nav .sub-menu{top:auto;}
  #primary-nav .sub-menu::before{display:none;}
}

/* =========================================================
   v6.2 — May 30 banquet gallery: uniform 4-up photo grid
   ========================================================= */
.banquet-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  grid-auto-rows:220px;
  margin-top:28px;
}
.banquet-grid a{display:block; line-height:0; height:100%;}
.banquet-grid img{
  width:100%; height:100%; object-fit:cover;
  border-radius:8px; display:block;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
  transition:box-shadow .15s ease;
}
.banquet-grid a:hover img{box-shadow:0 0 0 2px var(--red), 0 6px 18px rgba(0,0,0,0.2);}
@media (max-width: 940px){
  .banquet-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; gap:8px;}
}

/* =========================================================
   v6.3 — song audio block
   ========================================================= */
.song-block{
  max-width:720px; margin-top:28px; padding:22px 24px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:12px;
}
.song-label{margin:0 0 14px; font-weight:700; color:var(--red-dark);}
.song-block audio{width:100%; display:block;}
body.dark .song-block{background:#2C4160; border-color:rgba(240,35,13,0.45);}
body.dark .song-label{color:#F08894;}

/* =========================================================
   v6.9 — linked photos in heritage groups + song video
   ========================================================= */
/* images are now wrapped in <a>; make the link fill the cell */
.photo-pair a, .photo-trio a, .gallery-grid a, .wide-photo a{
  display:block; line-height:0;
}
.gallery-grid a{height:100%;}
.gallery-grid a img{height:100%; width:100%; object-fit:cover;}
.photo-pair a img, .photo-trio a img, .wide-photo a img{width:100%; height:auto;}
.photo-pair a:hover img, .photo-trio a:hover img,
.gallery-grid a:hover img, .wide-photo a:hover img{
  box-shadow:0 0 0 2px var(--red), 0 6px 18px rgba(0,0,0,0.2);
}

.song-video{
  width:100%; max-width:640px; display:block;
  border-radius:10px; background:#000;
}

/* v6.9b — newsletter cover card */
.issue-card-cover{padding:0; overflow:hidden;}
.issue-card-cover .issue-cover{width:100%; height:auto; display:block; border-bottom:1px solid var(--line);}
.issue-card-cover .eyebrow{display:block; padding:20px 24px 0;}
.issue-card-cover h3{padding:6px 24px 0;}
.issue-card-cover .issue-download{display:block; padding:8px 24px 24px;}

/* =========================================================
   v7.6 — May heritage announcement intro
   ========================================================= */
.announce-block{
  display:grid; grid-template-columns:1.4fr 0.9fr; gap:40px; align-items:center;
  margin-bottom:48px; padding-bottom:40px; border-bottom:1px solid var(--line);
}
.announce-text p{color:var(--text-soft); font-size:1.05rem; margin:0 0 14px;}
.announce-text p:last-child{margin-bottom:0;}
.announce-photo img{
  width:100%; border-radius:12px; display:block;
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
}
@media (max-width: 940px){
  .announce-block{grid-template-columns:1fr; gap:24px;}
}

/* v7.7 — programme block spacing */
.programme-block{margin-bottom:48px; padding-bottom:40px; border-bottom:1px solid var(--line);}
.programme-block h3{margin-top:1.5em; color:var(--red-dark);}
.programme-block p{margin:0.4em 0;}

/* =========================================================
   v7.9 — logo colors woven through as accents
   ========================================================= */

/* hero logo: no red backing block, let it sit on its own with breathing room */
.hero-side-logo::before{display:none;}
.hero-side-logo{
  background:var(--cream, #F8F4EE);
  border-radius:18px; padding:24px;
  box-shadow:0 14px 34px rgba(1,62,77,0.12);
  display:flex; align-items:center; justify-content:center;
}
.hero-side-logo img{width:100%; max-width:420px; height:auto; box-shadow:none; border-radius:0;}

/* teal as the secondary accent */
.section-head .eyebrow, .chapter-num{color:var(--red);}
.card .num{color:var(--orange);}
.pillar-text .eyebrow:nth-of-type(1){color:var(--orange);}

/* the "Celebrate" style pillars alternate a teal eyebrow for variety */
.pillar:nth-of-type(2) .pillar-text .eyebrow{color:var(--orange);}

/* orange used sparingly on hover underlines for nav */
#primary-nav li a:hover{border-color:var(--red);}
.hero-rule{background:linear-gradient(90deg, var(--red) 60%, var(--orange) 60%);}

/* teal accents on the initiative card top edges, cycling red/teal/orange */
.cards .card:nth-child(1){border-top-color:var(--red);}
.cards .card:nth-child(2){border-top-color:var(--orange);}
.cards .card:nth-child(3){border-top-color:var(--teal);}

/* listen-link + issue-card hovers pick up teal glow instead of pure red */
.listen-link:hover{background:var(--orange); color:#fff;}
.listen-link:hover span{color:rgba(255,255,255,0.85);}

/* footer stays teal-navy (via --red-dark swap to #013E4D on the deepest band);
   give footer eyebrow headings the orange accent for warmth */
footer h4{color:var(--orange);}

/* dark mode: keep navy base but let teal show through */
body.dark #primary-nav li a:hover{color:var(--orange); border-color:var(--orange);}

/* v8.8 — responsive YouTube embed */
.video-embed{
  position:relative; width:100%; max-width:640px;
  aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000;
}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* =========================================================
   v8.9 — Projects participants (We Learn From Each Other)
   ========================================================= */
.project-participant{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;
  margin-top:28px; padding:20px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 6px 24px rgba(240,35,13,0.06);
}
.project-participant a{display:block; line-height:0; border-radius:10px; overflow:hidden;}
.project-participant img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .2s ease;
}
.project-participant a:hover img{transform:scale(1.02);}
.project-participant .pp-card img,
.project-participant .pp-photo img{border-radius:10px;}
@media (max-width: 700px){
  .project-participant{grid-template-columns:1fr; gap:16px;}
}