/* ==========================================================================
   Public site styles
   - Works for Arabic (RTL) and English (LTR) using logical properties
     (margin-inline-start instead of margin-left, etc.)
   - Change brand colours in :root below.
   ========================================================================== */

@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-400.woff2") format("woff2"), url("../fonts/tajawal-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-500.woff2") format("woff2"), url("../fonts/tajawal-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-700.woff2") format("woff2"), url("../fonts/tajawal-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-800.woff2") format("woff2"), url("../fonts/tajawal-800.woff") format("woff"); font-weight: 800; font-display: swap; }
/* Same size as Tajawal while it loads, so the text does not jump when the real font arrives */
/* English: Manrope (headings) + Inter (text), the DC Talks brand fonts. Arabic pages use Tajawal. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Tajawal Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 87.5%; ascent-override: 73.5%; descent-override: 40.8%; line-gap-override: 22.8%; }

:root {
  /* DC Talks brand: Midnight #0A1F3D, Turquoise #00D9C6, Ivory #F8F6EE, Amber #FFB020 */
  --midnight: #0A1F3D;
  --midnight-2: #071630;
  --turquoise: #00D9C6;
  --ivory: #F8F6EE;
  --amber: #FFB020;
  --ink: #0A1F3D;
  --ink-2: #1d3150;
  --text: #22324a;
  --muted: #5a6b80;
  --bg: #F8F6EE;
  --surface: #ffffff;
  --line: #e3e6ea;
  --accent: #007A70;          /* turquoise, darkened for readable text on white */
  /* Extra shades used by Admin > Colour theme (a theme other than "DC Talks" overrides all of these) */
  --accent-2: #00665d;
  --turquoise-2: #3be6d6;
  --amber-2: #ffc24d;
  --on-amber: var(--midnight);
  --on-bright: var(--midnight);
  --midnight-3: #12305a;
  --on-dark: #dbe3ee;
  --on-dark-2: #c3cddb;
  --on-dark-muted: #9fb0c4;
  --midnight-rgb: 10, 31, 61;
  --deep-rgb: 7, 22, 48;
  --night-rgb: 4, 12, 26;
  --turquoise-rgb: 0, 217, 198;
  --amber-rgb: 255, 176, 32;
  --ivory-rgb: 248, 246, 238;
  --accent-soft: #E6F8F6;
  --accent-line: #bfeae5;
  --hero-overlay: linear-gradient(180deg, rgba(var(--deep-rgb), .70), rgba(var(--deep-rgb), .86));
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 6px 20px rgba(16, 24, 32, .06);
  --shadow-lg: 0 12px 34px rgba(16, 24, 32, .12);
  --container: 1180px;
  --narrow: 820px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
[dir="rtl"] { --font: "Tajawal", "Tajawal Fallback", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; --font-head: var(--font); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.7; color: var(--text); background: var(--surface); text-rendering: optimizeLegibility; }
[dir="rtl"] body { font-size: 18px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; margin: 0 0 .6em; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.35; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: var(--narrow); }
.center { text-align: center; justify-content: center; }
.muted { color: var(--muted); }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; padding: .72em 1.3em; border-radius: 999px; background: var(--midnight); color: #fff; font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; border: 2px solid var(--midnight); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; transform: translateY(-1px); }
.btn-amber { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.btn-amber:hover { background: var(--amber-2); border-color: var(--amber-2); color: var(--on-amber); }
.btn-turq { background: var(--turquoise); border-color: var(--turquoise); color: var(--on-bright); }
.btn-turq:hover { background: var(--turquoise-2); border-color: var(--turquoise-2); color: var(--on-bright); }
.btn-outline { background: transparent; color: var(--midnight); }
.btn-outline:hover { background: var(--midnight); color: #fff; }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: #eaeaea; border-color: #eaeaea; color: var(--ink); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-block { width: 100%; justify-content: center; margin-top: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(var(--midnight-rgb), .96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--ivory); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
/* DC Talks logo (site/partials/brand.php): vector symbol + DC TALKS wordmark, tagline as live text in the page language */
.brand-mark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.brand-logo, .brand img.brand-logo { display: block; height: 40px; width: auto; border-radius: 0; object-fit: contain; }
.brand-tagline { font-family: var(--font-head); font-size: .74rem; font-weight: 600; letter-spacing: .14em; color: rgba(var(--ivory-rgb), .78); white-space: nowrap; padding-inline-start: 2px; }
[dir="rtl"] .brand-tagline { letter-spacing: 0; font-size: .8rem; }
.brand-footer .brand-logo { height: 46px; }
@media (max-width: 420px) { .brand-tagline { display: none; } .brand-logo { height: 34px; } }
.site-nav { display: flex; align-items: center; gap: 12px; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav ul a { display: block; padding: .45em .9em; border-radius: 999px; color: rgba(var(--ivory-rgb), .88); text-decoration: none; font-weight: 600; font-size: .96rem; }
.site-nav ul a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.site-nav ul a[aria-current="page"] { background: var(--turquoise); color: var(--on-bright); }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; padding: .4em .9em; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: var(--ivory); text-decoration: none; font-weight: 700; font-size: .92rem; }
.lang-switch:hover { border-color: var(--turquoise); color: #fff; }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-sm); padding: 8px; color: #fff; cursor: pointer; }
.nav-toggle .icon-close { display: none; }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; inset-inline: 0; top: 100%; background: var(--midnight); border-bottom: 1px solid rgba(255, 255, 255, .1); flex-direction: column; align-items: stretch; padding: 12px 20px 18px; display: none; box-shadow: var(--shadow); }
  .site-nav ul { flex-direction: column; }
  .site-nav ul a { padding: .7em 1em; }
  .lang-switch { align-self: flex-start; margin-top: 8px; }
  .nav-open .site-nav { display: flex; }
  .nav-open .nav-toggle .icon-open { display: none; }
  .nav-open .nav-toggle .icon-close { display: inline; }
  .no-js .site-nav { display: flex; position: static; box-shadow: none; }
}

/* ---------- Hero ---------- */
/* --hero-img-lg (1920 px) on large screens, --hero-img-sm (800 px) on phones and tablets: set by the page templates */
.hero, .page-hero, .article-hero { --hero-img: var(--hero-img-lg, none); }
@media (max-width: 800px) { .hero, .page-hero, .article-hero { --hero-img: var(--hero-img-sm, var(--hero-img-lg, none)); } }
.hero, .page-hero, .article-hero { position: relative; color: #fff; background-color: var(--midnight); background-image: var(--hero-overlay), var(--hero-img, none), radial-gradient(ellipse at 85% 10%, rgba(var(--turquoise-rgb), .16) 0, transparent 55%), radial-gradient(circle at 15% 85%, rgba(var(--amber-rgb), .08) 0, transparent 45%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 56px), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 28px); background-size: cover; background-position: center; }
.hero { min-height: min(78vh, 680px); display: flex; align-items: center; text-align: center; }
.hero-inner { padding-block: 90px; }
.hero-greeting { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--turquoise); margin-bottom: .6em; letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .hero-greeting { letter-spacing: 0; font-size: 1.1rem; }
.hero-title { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); margin-bottom: .35em; }
.hero-desc { font-size: 1.2rem; max-width: 720px; margin-inline: auto; opacity: .9; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.page-hero { padding-block: 64px 56px; }
.page-hero h1, .article-hero h1 { color: #fff; }
.page-hero .lead, .article-hero .lead { color: rgba(255,255,255,.88); max-width: 760px; font-size: 1.15rem; }
.page-hero-plain { background: var(--bg); color: var(--ink); background-image: none; border-bottom: 1px solid var(--line); }
.page-hero-plain h1 { color: var(--ink); }
.page-hero-plain .lead { color: var(--muted); }
.page-hero-plain .breadcrumbs a, .page-hero-plain .breadcrumbs { color: var(--muted); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; margin-bottom: 18px; color: rgba(255,255,255,.75); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Sections ---------- */
.section { padding-block: 72px; }
.section-alt { background: var(--bg); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--accent); margin-bottom: .4em; }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .95rem; }
.lead { font-size: 1.15rem; color: var(--muted); }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.about-media img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--bg); }
.quote { margin: 24px 0 0; padding: 14px 22px; border-inline-start: 4px solid var(--ink-2); background: var(--bg); border-radius: var(--radius-sm); font-size: 1.15rem; font-weight: 700; }
.checklist { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { color: var(--accent); margin-top: .3em; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { background: var(--accent-soft); color: var(--accent); padding: .3em .8em; border-radius: 999px; font-size: .9rem; font-weight: 500; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } .about-media { max-width: 420px; } }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; border: 1px solid var(--line); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: #dfe5ec; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-placeholder { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(var(--turquoise-rgb), .25), transparent 60%), linear-gradient(135deg, var(--midnight-3), var(--midnight)); }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 1.15rem; margin-bottom: .45em; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card-title a:hover { color: var(--accent); }
.card-excerpt { color: var(--muted); font-size: .97rem; flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: .85rem; margin: 0; }

/* ---------- Glass carousel (Admin > Settings > General > Homepage articles display / Articles page
   display). Colours come entirely from the site's own theme variables (set by App\Services\Theme), so
   switching the colour theme in Admin > Colour theme restyles this too, with no extra work. ---------- */
.articles-glass { position: relative; }
.articles-glass::before {
  content: ""; position: absolute; inset: -28px -4% auto; height: calc(100% + 56px); z-index: 0; pointer-events: none;
  border-radius: 28px;
  background:
    radial-gradient(560px 320px at 15% 10%, var(--accent-soft), transparent 65%),
    radial-gradient(560px 320px at 85% 90%, var(--accent-soft), transparent 65%);
}
.articles-glass-track {
  position: relative; z-index: 1; display: flex; gap: 26px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
  padding-block: 14px 30px; touch-action: pan-y; user-select: none;
}
.articles-glass-track::-webkit-scrollbar { display: none; }
.articles-glass-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.articles-glass-track .card {
  flex: none; width: min(320px, 78vw); scroll-snap-align: center;
  background: rgba(255, 255, 255, .6); border-color: var(--accent-line);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  transform: scale(var(--s, .88)); opacity: var(--o, .65);
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.articles-glass-track .card.is-center {
  background: rgba(255, 255, 255, .85); border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.articles-glass-track .card:hover { transform: scale(var(--s, .88)); box-shadow: var(--shadow); }
.articles-glass-track .card.is-center:hover { box-shadow: var(--shadow-lg); }
/* Cards contain a link + image; browsers make those draggable by default, which hijacked the drag
   gesture whenever it started on the card itself (dragging only worked from the empty gaps). This,
   together with the "dragstart" prevention in site.js, makes the whole card draggable too. */
.articles-glass-track .card,
.articles-glass-track .card img,
.articles-glass-track .card a { -webkit-user-drag: none; user-drag: none; }
.articles-glass-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.articles-glass-dots button { width: 8px; height: 8px; border-radius: 999px; background: var(--line); border: none; padding: 0; cursor: pointer; transition: background .2s, width .2s; }
.articles-glass-dots button.is-active { background: var(--accent); width: 22px; }
@media (prefers-reduced-motion: reduce) { .articles-glass-track .card { transition: none; } }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; }
.badge-pin { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--amber); color: var(--on-amber); }
.badge-lang { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.badge-cat { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.35); }
.group-title { display: flex; align-items: center; gap: 8px; font-size: 1.35rem; margin: 10px 0 20px; }
.group-title + .card-grid { margin-bottom: 44px; }

/* Articles page */
.search { display: flex; max-width: 560px; margin-top: 26px; background: #fff; border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-lg); }
.search input { flex: 1; border: 0; padding: .9em 1.3em; font: inherit; color: var(--ink); min-width: 0; background: transparent; }
.search input:focus { outline: none; }
.search button { border: 0; background: var(--ink-2); color: #fff; padding: 0 22px; cursor: pointer; }
.search:focus-within { outline: 3px solid var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip { padding: .4em 1em; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 500; background: #fff; }
.chip span { color: var(--muted); font-size: .85em; }
.chip.is-active, .chip:hover { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }
.chip.is-active span, .chip:hover span { color: rgba(255,255,255,.75); }
.result-note { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.pagination a { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-weight: 700; }
.pagination a[aria-current="page"], .pagination a:hover { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }

/* ---------- Article ---------- */
.article-hero { padding-block: 56px 60px; }
.article-hero h1 { max-width: 900px; }
.article-hero .lead { max-width: 820px; }
.article-hero.is-plain { background-color: var(--midnight); background-image: none; }
/* Article cover: framed photo under the title (Option B: light brand-blue frame) */
.cover-frame { max-width: 880px; margin: 34px auto 0; padding: 22px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 18px; }
.cover-frame img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(var(--midnight-rgb), .18); background: #dfe7ef; }
@media (max-width: 640px) { .cover-frame { margin-top: 20px; padding: 10px; border-radius: 14px; } .cover-frame img { border-radius: 9px; } }
.card-meta .reads { display: inline-flex; align-items: center; gap: 4px; }
.card-meta .reads .icon { width: 15px; height: 15px; }
.article-hero.no-image { background-image: var(--hero-overlay), radial-gradient(ellipse at 85% 10%, rgba(var(--turquoise-rgb), .16) 0, transparent 55%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 56px); }
.article-meta { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .92rem; color: rgba(255,255,255,.85); }
.article-meta li { display: inline-flex; align-items: center; gap: 6px; }
.article-meta a { color: #fff; }
.article-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding-block: 48px 64px; align-items: start; }
.article-layout:not(:has(.toc)) { grid-template-columns: minmax(0, 1fr); max-width: var(--narrow); }
.article-main { max-width: 780px; min-width: 0; }
.toc { position: sticky; top: 90px; font-size: .92rem; }
.toc details { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); }
.toc summary { font-weight: 800; cursor: pointer; display: flex; gap: 8px; align-items: center; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; max-height: 65vh; overflow: auto; }
.toc a { color: var(--muted); text-decoration: none; display: block; line-height: 1.45; padding: 2px 0; }
.toc a:hover, .toc a.is-active { color: var(--accent); }
.toc .toc-l3 { padding-inline-start: 14px; font-size: .95em; }
@media (max-width: 980px) { .article-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; } .toc { position: static; } .toc details:not([open]) { padding-block: 10px; } }

.takeaways { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 32px; }
.takeaways h2 { font-size: 1.2rem; display: flex; gap: 8px; align-items: center; color: var(--accent); }
.takeaways ul { margin: 0; padding-inline-start: 1.2em; }
.takeaways li { margin-bottom: .35em; }
.content-figure { margin: 0 0 32px; }
.content-figure img { border-radius: var(--radius); width: 100%; }

/* Rich text from the editor */
.prose { font-size: 1.06rem; overflow-wrap: anywhere; }
.prose h2 { margin-top: 1.9em; padding-top: .2em; }
.prose h3 { margin-top: 1.6em; }
.prose h4 { margin-top: 1.4em; font-size: 1.08rem; }
.prose ul, .prose ol { padding-inline-start: 1.5em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li > ul, .prose li > ol { margin-top: .4em; }
.prose img { border-radius: var(--radius-sm); margin: 1.4em auto; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: -.6em; }
.prose blockquote { margin: 1.5em 0; padding: 14px 22px; border-inline-start: 4px solid var(--accent); background: var(--bg); border-radius: var(--radius-sm); color: var(--ink-2); }
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose pre { background: var(--midnight); color: #f3f4f6; padding: 16px 18px; border-radius: var(--radius-sm); overflow: auto; direction: ltr; text-align: left; }
.prose code { background: var(--bg); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
.prose pre code { background: none; padding: 0; }
.prose mark { background: #fff1a8; padding: 0 .15em; }
.prose a { word-break: break-word; }
.table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--line); border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 520px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: start; vertical-align: top; }
.prose th { background: var(--bg); font-weight: 700; }
.prose tr:nth-child(even) td { background: #fbfbfb; }
.prose caption { caption-side: bottom; padding: 8px; color: var(--muted); font-size: .88rem; }
.embed { position: relative; aspect-ratio: 16 / 9; margin: 1.5em 0; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); }

.faq { margin-top: 44px; }
.faq h2 { display: flex; gap: 8px; align-items: center; font-size: 1.45rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; background: #fff; }
.faq summary { cursor: pointer; padding: 14px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq-answer { padding: 0 18px 16px; color: var(--ink-2); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 40px 0 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.share-label { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; margin-inline-end: 6px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: .45em 1em; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: .9rem; color: var(--ink-2); background: #fff; text-decoration: none; cursor: pointer; }
.share-btn:hover { border-color: var(--ink-2); color: var(--ink); }
/* "Download PDF": the main action of the share row, in the brand colour */
.share-btn[data-print] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.share-btn[data-print]:hover, .share-btn[data-print]:focus-visible { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.author-box { display: flex; gap: 20px; padding: 24px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--line); }
.author-box img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; }
.author-name { font-weight: 800; font-size: 1.1rem; margin: 0; }
.author-name a { color: var(--ink); text-decoration: none; }
.author-role { color: var(--accent); font-weight: 700; margin: 0 0 .5em; font-size: .95rem; }
.author-box p:last-child { margin-bottom: 0; }
.author-links { font-size: .92rem; }
.copyright { color: var(--muted); font-size: .88rem; margin-top: 18px; }
@media (max-width: 560px) { .author-box { flex-direction: column; } }

/* ---------- Contact ---------- */
.contact-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; background: var(--bg); border-radius: var(--radius); padding: 40px; border: 1px solid var(--line); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: var(--radius-sm); padding: 12px 16px; border: 1px solid var(--line); }
.contact-list .icon { color: var(--accent); }
.contact-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--accent); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.contact-grid .contact-band { grid-template-columns: 1fr; padding: 28px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.form-card label { display: block; font-weight: 700; margin: 14px 0 6px; font-size: .95rem; }
.form-card input, .form-card textarea { width: 100%; font: inherit; padding: .75em 1em; border: 1px solid #cfd4da; border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.form-card input:focus, .form-card textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-card .btn { margin-top: 18px; }
.form-card .cf-turnstile { margin-top: 16px; }
.form-note { font-size: .85rem; margin-top: 12px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.alert-success { background: #e8f6ee; color: #14532d; border: 1px solid #bfe5cd; }
.alert-error { background: #fdecec; color: #7f1d1d; border: 1px solid #f5c2c2; }
@media (max-width: 860px) { .contact-band, .contact-grid { grid-template-columns: 1fr; padding: 24px; } .contact-grid { padding: 0 20px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--midnight-2); color: var(--on-dark-2); padding-top: 48px; margin-top: 0; border-top: 3px solid var(--turquoise); }
.site-footer a { color: #e7eaee; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 32px; padding-bottom: 32px; }
.footer-brand { color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: .3em; }
.site-footer .muted { color: var(--on-dark-muted); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-contact { display: grid; gap: 10px; align-content: start; }
.footer-contact a { display: inline-flex; gap: 8px; align-items: center; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 18px; font-size: .9rem; color: var(--on-dark-muted); }
.footer-bottom p { margin: 0; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Error page ---------- */
.error-page { padding-block: 100px; }
.error-code { font-size: 5rem; font-weight: 800; color: var(--line); margin: 0; line-height: 1; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding-block: 52px; }
  .hero-inner { padding-block: 64px; }
  .form-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.print-only { display: none; }
/* ---- Images & videos placed in the editor (Word-style): left/right with text wrap, centre, width % ---- */
.prose { display: flow-root; }
.prose h2, .prose h3, .prose h4, .prose hr, .prose .table-wrap, .prose blockquote { clear: both; }
.prose figure[class*="obj-"], .prose .embed[class*="obj-"] { margin-top: .35em; margin-bottom: 1em; box-sizing: border-box; }
.prose figure[class*="obj-"] { display: block; }
.prose figure[class*="obj-"] img { display: block; width: 100%; height: auto; margin: 0; }
.prose .obj-left { float: left; margin-left: 0; margin-right: 1.5em; }
.prose .obj-right { float: right; margin-right: 0; margin-left: 1.5em; }
.prose .obj-center { float: none; margin-left: auto; margin-right: auto; }
.prose .obj-w25 { width: 25%; }
.prose .obj-w33 { width: 33.333%; }
.prose .obj-w50 { width: 50%; }
.prose .obj-w75 { width: 75%; }
.prose .obj-w100 { width: 100%; float: none; margin-left: 0; margin-right: 0; }
/* Phones: no text wrap (too narrow); small objects stay centred at a readable size */
@media (max-width: 640px) {
  .prose .obj-left, .prose .obj-right { float: none; margin-left: auto; margin-right: auto; }
  .prose .obj-w25, .prose .obj-w33 { width: 60%; }
  .prose .obj-w50, .prose .obj-w75 { width: 100%; }
}
/* The extra image above the text: same light frame as the cover */
.content-figure { padding: 16px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 16px; }
.content-figure img { display: block; border-radius: 10px; }

@media print {
  @page { size: A4; margin: 16mm 15mm 18mm; @bottom-center { content: "DC Talks  |  dctalks.com  |  " counter(page) " / " counter(pages); font: 9pt Inter, Tajawal, Arial, sans-serif; color: #5a6b80; } }
  html, body { background: #fff !important; }
  body { font-size: 11.5pt; }
  .site-header, .site-footer, .share, .toc, .btn-row, .related, .send-article, .subscribe, .ad, .ad-box, .skip-link, .section-alt, .footer-subscribe { display: none !important; }
  .print-only { display: block !important; }
  .print-head { padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid #c9d3d6; }
  .print-head .brand-tagline { color: var(--midnight); }
  .print-meta { margin: 10px 0 0; color: #4a545c; font-size: 10pt; }
  .article-hero, .page-hero { background: none !important; color: #000; padding: 0; }
  .article-hero .breadcrumbs, .article-hero .badge, .article-meta { display: none !important; }
  .article-hero h1 { color: #1f2328 !important; font-size: 22pt; margin: 0 0 8px; }
  .article-hero .lead { color: #333 !important; }
  .print-cover { width: 100%; height: auto; border-radius: 6px; margin: 12px 0 6px; }
  /* Images keep a light brand-blue frame on paper too (printed even when "Background graphics" is off) */
  .cover-frame, .content-figure, .prose figure, .prose > p > img:only-child {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 10px; padding: 8px; break-inside: avoid; box-shadow: none;
  }
  .cover-frame { max-width: none; margin: 4px 0 14px; }
  .cover-frame img, .content-figure img, .prose figure img { box-shadow: none; border-radius: 6px; margin: 0; }
  .prose > p > img:only-child { display: block; margin: 1em auto; box-sizing: border-box; }
  .prose figure figcaption { margin-top: 6px; }
  .container:has(> .cover-frame) { padding: 0; }
  .article-layout { display: block; padding: 0; }
  .prose h2, .prose h3 { break-after: avoid; }
  .prose img, .prose figure, .prose table, .takeaways, .author-box { break-inside: avoid; }
  .prose a { color: var(--accent); text-decoration: none; }
  .author-box { border: 1px solid #e4e6ea; box-shadow: none; }
  /* FAQ: printed fully open (site.js opens every answer before printing), no +/− signs */
  .faq h2 { break-after: avoid; }
  .faq details { border: 0; border-bottom: 1px solid #e4e6ea; border-radius: 0; margin: 0; background: none; break-inside: avoid; }
  .faq summary { padding: 12px 0 4px; cursor: auto; }
  .faq summary::after { content: none !important; display: none !important; }
  .faq-answer { padding: 0 0 12px; color: #333; }
  .faq details::details-content { content-visibility: visible; display: block; }
}

/* ---- Version 3 additions ---- */
/* Home banner video (loaded by site.js on larger screens only) */
.hero.has-video { overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; z-index: 0; pointer-events: none; }
.hero-video.is-ready { opacity: 1; }
.hero.has-video::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); z-index: 1; pointer-events: none; }
.hero.has-video .hero-inner { position: relative; z-index: 2; }

/* Spotlight (VIP) row */
.spotlight { padding: 36px 0 8px; background: linear-gradient(180deg, var(--accent-soft), transparent 85%); }
.spotlight-title { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; color: var(--accent); margin-bottom: 16px; }
.spotlight-grid { display: grid; gap: 18px; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
.spotlight-n1 { grid-template-columns: 1fr; }
.spotlight-n2 { grid-template-columns: 1fr 1fr; }
.spotlight-n3 .spot-main { grid-row: span 2; }
.spot-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.spot-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.spot-link img, .spot-link .card-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.spotlight-n3 .spot-card:not(.spot-main) .spot-link { flex-direction: row; }
.spotlight-n3 .spot-card:not(.spot-main) img, .spotlight-n3 .spot-card:not(.spot-main) .card-placeholder { width: 42%; aspect-ratio: auto; min-height: 100%; }
.spot-body { padding: 14px 18px 18px; display: grid; gap: 6px; }
.spot-title { font-weight: 800; font-size: 1.12rem; line-height: 1.35; }
.spot-main .spot-title { font-size: 1.4rem; }
.spot-excerpt { color: var(--muted); font-size: .95rem; }
.spot-link:hover .spot-title { color: var(--accent); }
@media (max-width: 760px) {
  .spotlight-grid, .spotlight-n2 { grid-template-columns: 1fr; }
  .spotlight-n3 .spot-main { grid-row: auto; }
  .spotlight-n3 .spot-card:not(.spot-main) .spot-link { flex-direction: column; }
  .spotlight-n3 .spot-card:not(.spot-main) img, .spotlight-n3 .spot-card:not(.spot-main) .card-placeholder { width: 100%; aspect-ratio: 16 / 9; min-height: 0; height: auto; }
}

/* Articles per page */
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.list-foot .pagination { margin: 0; }
.per-page { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .95rem; margin-inline-start: auto; }
.per-page select { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }

/* Newsletter sign-up */
.subscribe { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px 28px; align-items: center; padding: 22px 24px; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); margin: 28px 0; }
.subscribe-title { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; margin: 0 0 4px; color: var(--ink); }
.subscribe-text p { margin: 0; color: var(--muted); }
.subscribe-form { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe-form input[type=email] { flex: 1 1 200px; min-width: 0; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.site-footer .subscribe { background: rgba(255, 255, 255, .06); color: #fff; margin: 0 0 32px; }
.site-footer .subscribe-title { color: #fff; }
.site-footer .subscribe-text p { color: rgba(255, 255, 255, .75); }
.footer-subscribe { padding-top: 8px; }
@media (max-width: 760px) { .subscribe { grid-template-columns: 1fr; } }

/* Ads: clearly labelled, fixed size (no layout jump), never inside the article text */
.ad { margin: 28px 0; text-align: center; }
.ad-label { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ad a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.ad img { width: 100%; height: auto; object-fit: cover; display: block; }
.ad-article_end img { aspect-ratio: 800 / 250; }
.ad-footer { max-width: 970px; margin-inline: auto; }
.ad-footer img { aspect-ratio: 970 / 120; }

/* "Send this article by email" (closed by default) */
.send-article { margin: 6px 0 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.send-article > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; gap: 8px; align-items: center; list-style: none; }
.send-article > summary::-webkit-details-marker { display: none; }
.send-article[open] > summary { border-bottom: 1px solid var(--line); }
.send-article-form { padding: 16px 18px 18px; display: grid; gap: 14px; }
.sa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.sa-grid label { display: grid; gap: 6px; font-weight: 500; font-size: .95rem; }
.sa-grid .sa-wide { grid-column: 1 / -1; }
.sa-grid input, .sa-grid textarea { font: inherit; padding: .6em .8em; border: 1px solid #c9d3d6; border-radius: var(--radius-sm); background: #fff; width: 100%; box-sizing: border-box; }
.sa-grid input:focus, .sa-grid textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.send-article-form .btn { justify-self: start; }
.form-note { margin: 12px 18px 0; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 500; }
.form-note.is-ok { background: #e7f6ec; color: #13582f; }
.form-note.is-error { background: #fdecea; color: #8a1c13; }
@media (max-width: 600px) { .sa-grid { grid-template-columns: 1fr; } }
.small { font-size: .875rem; }

/* Sponsors & Partners (Admin > Sponsors). Columns follow the number of cards; fixed logo boxes = no layout shift. */
.sponsors h2 { margin-bottom: 18px; }
.sponsor-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-soft); margin-bottom: 20px; }
.sponsor-cta-title { font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; }
.sponsor-cta-text { margin: 0; color: var(--ink-2); max-width: 720px; }
.sponsor-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sponsor-n1 { grid-template-columns: minmax(0, 360px); }
.sponsor-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sponsor-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sponsor-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: box-shadow .15s, border-color .15s; }
a.sponsor-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.sponsor-logo { width: 160px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.sponsor-logo img { max-width: 160px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.sponsor-logo.is-empty { border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px dashed var(--accent-line); }
.sponsor-name { font-weight: 800; }
.sponsor-type { color: var(--muted); font-size: .92rem; }
@media (max-width: 900px) { .sponsor-grid, .sponsor-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sponsor-n1 { grid-template-columns: minmax(0, 360px); } }
@media (max-width: 520px) { .sponsor-grid, .sponsor-n2, .sponsor-n3 { grid-template-columns: 1fr; } }

/* "View sample" preview strip (admins only) */
.preview-bar { position: sticky; top: 0; z-index: 60; background: #fff4e0; color: #5c3b00; border-bottom: 1px solid #f0d49b; padding: 8px 16px; text-align: center; font-weight: 600; font-size: .95rem; }

/* Contact form: built-in captcha question */
.captcha-q { margin: 4px 0 6px; }
.captcha-q label { display: block; }
.captcha-sum { display: inline-block; margin-inline-start: 4px; padding: 1px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 1.05rem; letter-spacing: .5px; }
.captcha-q input[name="captcha"] { max-width: 120px; text-align: center; font-size: 1.05rem; }

/* ==========================================================================
   DC Talks: podcast, episodes and videos
   ========================================================================== */
.eyebrow-turq { color: var(--turquoise); }
.section-dark { background: var(--midnight); color: var(--on-dark); }
.section-dark h2 { color: #fff; }
.section-dark .card { border-color: rgba(255, 255, 255, .08); }
.about-media img.about-logo { background: var(--midnight); object-fit: contain; padding: 6%; }
.empty-state { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.empty-state .icon { width: 42px; height: 42px; color: var(--accent); }
.empty-state p { margin: 0; font-size: 1.05rem; }

/* Card extras */
.play-badge { position: absolute; inset-inline-end: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--on-amber); box-shadow: 0 6px 18px rgba(var(--deep-rgb), .35); transition: transform .2s; }
.play-badge .icon { width: 26px; height: 26px; }
.card:hover .play-badge { transform: scale(1.08); }
.badge-ep { position: absolute; top: 12px; inset-inline-start: 12px; background: rgba(var(--midnight-rgb), .88); color: #fff; border: 1px solid rgba(var(--turquoise-rgb), .55); }
.ep-guest { display: flex; gap: 6px; align-items: flex-start; font-size: .93rem; font-weight: 600; color: var(--ink-2); margin: -.15em 0 .5em; }
.ep-guest .icon { color: var(--accent); margin-top: .2em; }
.card-grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.video-card .card-title { font-size: 1.05rem; }
.yt-label { display: inline-flex; align-items: center; gap: 4px; }
.yt-label .icon { width: 14px; height: 14px; }
.more-on-yt { margin-top: 36px; }

/* Podcast page hero */
.podcast-hero { padding-block: 56px; }
.podcast-hero-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 44px; align-items: center; }
.podcast-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); background: var(--midnight); }
.hosted-by { display: inline-flex; gap: 8px; align-items: center; color: var(--ivory); font-weight: 600; margin: 4px 0 0; }
.hosted-by .icon { color: var(--amber); }
@media (max-width: 760px) { .podcast-hero-grid { grid-template-columns: 1fr; gap: 26px; } .podcast-art { max-width: 220px; } }

/* "Listen on" buttons */
.listen { margin-top: 24px; }
.listen-label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
[dir="rtl"] .listen-label { letter-spacing: 0; font-size: .92rem; }
.listen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.listen-btn { display: inline-flex; align-items: center; gap: 8px; padding: .55em 1.05em; border-radius: 999px; font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.listen-btn:hover { transform: translateY(-1px); }
.listen-dark .listen-label { color: rgba(var(--ivory-rgb), .7); }
.listen-dark .listen-btn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.listen-dark .listen-btn:hover { border-color: var(--turquoise); background: rgba(var(--turquoise-rgb), .12); color: #fff; }
.listen-light { margin: 22px 0 8px; }
.listen-light .listen-label { color: var(--muted); }
.listen-light .listen-btn { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.listen-light .listen-btn:hover { border-color: var(--accent); color: var(--accent); }
.listen-btn .icon { width: 18px; height: 18px; color: var(--turquoise); }
.listen-light .listen-btn .icon { color: var(--accent); }
.listen-youtube .icon { color: #ff4e45 !important; }
.listen-spotify .icon { color: #1ed760 !important; }
.listen-apple .icon { color: #b46cf0 !important; }

/* Host card */
.host-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.host-photo { width: 220px; height: 220px; object-fit: cover; border-radius: 50%; border: 6px solid var(--accent-soft); background: var(--midnight); }
.host-name { margin: 0 0 .15em; }
.host-role { color: var(--accent); font-weight: 700; margin-bottom: .8em; }
@media (max-width: 700px) { .host-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px; } .host-card .btn-row { justify-content: center; } .host-photo { width: 160px; height: 160px; } }

/* Episode page */
.episode-hero { padding-block: 48px 52px; }
.episode-body { padding-block: 36px 64px; }
.player { margin: 0 0 18px; }
.yt-facade { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--midnight); box-shadow: var(--shadow-lg); }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s, opacity .3s; }
.yt-facade:hover img { transform: scale(1.02); opacity: .92; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-play svg { width: 84px; height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .4)); transition: transform .2s; }
.yt-facade:hover .yt-play svg, .yt-facade:focus-visible .yt-play svg { transform: scale(1.1); }
.player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }
.spotify-embed { margin: 0 0 12px; }
.spotify-embed iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
.guest-card { display: flex; gap: 18px; align-items: center; margin: 28px 0; padding: 18px 22px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.guest-card img, .guest-initial { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.guest-initial { display: grid; place-items: center; background: var(--midnight); color: var(--turquoise); font-family: var(--font-head); font-weight: 800; font-size: 2rem; }
.guest-card .eyebrow { margin: 0; }
.guest-name { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--ink); margin: 0; }
.guest-card .muted { margin: 0; }
.show-notes { margin-top: 30px; }
.show-notes > h2 { display: flex; align-items: center; gap: 8px; font-size: 1.35rem; }
.show-notes > h2 .icon { color: var(--accent); }
.ep-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 44px 0 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.ep-nav-link { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); background: var(--surface); }
.ep-nav-link:hover { border-color: var(--accent); }
.ep-nav-link.is-next { text-align: end; grid-column: 2; }
@media (max-width: 600px) { .ep-nav { grid-template-columns: 1fr; } .ep-nav-link.is-next { grid-column: auto; } }

/* Video player window (streams from YouTube) */
.video-modal { width: min(1100px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 14px; background: #000; color: #fff; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.video-modal::backdrop { background: rgba(var(--night-rgb), .82); backdrop-filter: blur(3px); }
.video-modal-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--midnight); border-bottom: 2px solid var(--turquoise); }
.video-modal-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-modal-yt { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark); font-size: .88rem; text-decoration: none; white-space: nowrap; }
.video-modal-yt:hover { color: #fff; text-decoration: underline; }
.video-modal-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; flex: none; }
.video-modal-close:hover, .video-modal-close:focus-visible { background: var(--amber); color: var(--on-amber); }
.video-modal-frame { aspect-ratio: 16 / 9; background: #000; }
.video-modal-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-modal.is-short { width: min(420px, 94vw); }
.video-modal.is-short .video-modal-frame { aspect-ratio: 9 / 16; max-height: 80vh; }
@media (max-width: 600px) { .video-modal-yt span { display: none; } }

/* Video card: "Read more" (opens the same player window, which shows the full description) */
.video-more { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; gap: 2px; margin: -4px 0 12px; color: var(--accent); font-weight: 700; font-size: .92rem; text-decoration: none; }
.video-more:hover, .video-more:focus-visible { text-decoration: underline; }

/* Player window with title, date and full description */
.video-modal[open] { display: flex; flex-direction: column; max-height: 94vh; }
.video-modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.video-modal.has-info .video-modal-title { visibility: hidden; }
.video-modal-info { padding: 20px 22px 24px; background: var(--midnight-2); color: var(--on-dark); font-size: .98rem; line-height: 1.75; }
.video-modal-info[hidden] { display: none; }
.video-info-title { color: #fff; font-size: 1.2rem; margin: 0 0 .35em; }
.video-info-meta { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--turquoise); font-size: .85rem; font-weight: 600; }
.video-info-desc p { margin: 0 0 .9em; overflow-wrap: anywhere; }
.video-info-desc p:last-child { margin-bottom: 0; }
.video-info-desc a { color: var(--turquoise); text-decoration: underline; text-underline-offset: 2px; }
.video-info-desc a:hover { color: #fff; }

/* Shorts: vertical video beside the text on wide screens, stacked on phones */
.video-modal.is-short.has-info { width: min(960px, 94vw); }
.video-modal.is-short.has-info .video-modal-frame { height: min(70vh, 640px); max-height: none; width: auto; margin-inline: auto; }
@media (min-width: 760px) {
  .video-modal.is-short.has-info .video-modal-body { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; }
  .video-modal.is-short.has-info .video-modal-frame { height: min(80vh, 720px); }
  .video-modal.is-short.has-info .video-modal-info { overflow-y: auto; overscroll-behavior: contain; max-height: min(80vh, 720px); }
}
@media (max-width: 759px) {
  .video-modal.is-short.has-info { width: min(480px, 94vw); }
  .video-modal.is-short.has-info .video-modal-frame { height: min(58vh, 560px); }
}

/* "Back to top" button (Admin > General settings). Colour comes from the theme's own --accent /
   --accent-2 tokens (the same ones links, icons and soft boxes already use), so it recolours
   automatically whenever the colour theme changes - nothing here is theme-specific. */
.back-to-top {
  position: fixed;
  z-index: 60;
  inset-inline-end: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.back-to-top .icon { width: 22px; height: 22px; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--accent-2); }
.back-to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .back-to-top { inset-inline-end: 14px; bottom: 14px; width: 44px; height: 44px; } }
@media print { .back-to-top { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .01s linear; } }