/*
 * PollyVox v0.11 additions.
 *
 * Loaded after main + editorial + v010 so these rules cascade over them.
 * Every colour references a CSS variable so dark mode auto-inherits.
 */

/* -------------------------------------------------------------
 * Card border: driven by --pv-card-border and --pv-card-border-width.
 * When "Show card border outline" is off, the width falls to 0 and the
 * ring disappears without touching layout.
 * ------------------------------------------------------------- */
.pv-card,
.pv-related-card,
.pv-story-row,
.pv-story-lead,
.pv-latest-timeline__card,
.pv-movie-news-card,
.pv-inline-related-block .pv-related-card,
.pv-review-tile {
	border-width: var(--pv-card-border-width, 1px);
	border-style: solid;
	border-color: var(--pv-card-border);
}

/* Sidebar widgets and comment area pick up the same variable. */
.pv-layout__aside > *,
.pv-comments-section {
	border-color: var(--pv-card-border);
}

/* -------------------------------------------------------------
 * Movie Reviews homepage module.
 *
 * Larger cards than the standard grid — the user asked for "slightly bigger"
 * so the poster and rating can breathe.
 * ------------------------------------------------------------- */
.pv-reviews-section {
	margin-top: var(--pv-home-section-gap, 48px);
}
.pv-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.pv-review-tile {
	display: flex;
	flex-direction: column;
	background: var(--pv-surface);
	border-radius: var(--pv-media-radius, 10px);
	overflow: hidden;
	min-width: 0;
}
.pv-review-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: color-mix(in srgb, var(--pv-ink) 8%, transparent);
}
.pv-review-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pv-review-tile__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 6px 10px;
	background: rgba(15, 17, 21, .85);
	color: #ffd75f;
	border-radius: 999px;
	font-family: var(--pv-font-head, system-ui);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -.01em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.pv-review-tile__badge strong { font-size: 1.1rem; color: #fff; }
.pv-review-tile__badge small { color: rgba(255,255,255,.7); font-weight: 500; }
.pv-review-tile__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pv-review-tile__kicker {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	color: var(--pv-accent);
}
.pv-review-tile__kicker a {
	color: inherit;
	text-decoration: none;
}
.pv-review-tile__title {
	margin: 0;
	font-size: 1.18rem;
	line-height: 1.28;
	font-family: var(--pv-font-head, system-ui);
	font-weight: 700;
}
.pv-review-tile__title a {
	color: inherit;
	text-decoration: none;
}
.pv-review-tile__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: .82rem;
	color: color-mix(in srgb, var(--pv-ink) 60%, transparent);
	margin-top: 4px;
}
.pv-review-tile__inline-rating {
	margin-left: auto;
	color: #f0a800;
	font-weight: 700;
}
@media (max-width: 1024px) {
	.pv-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.pv-reviews-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.pv-review-tile__body { padding: 14px 16px 16px; }
}

/* -------------------------------------------------------------
 * Author-page coloured social icons (upgrade to Person-page treatment).
 * ------------------------------------------------------------- */
.pv-author-socials--colored a {
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.pv-author-socials--colored a:hover,
.pv-author-socials--colored a:focus-visible {
	background: var(--pv-brand, var(--pv-accent));
	border-color: var(--pv-brand, var(--pv-accent));
	color: #fff;
	transform: translateY(-1px);
}
.pv-author-socials--colored svg {
	fill: currentColor;
	stroke: currentColor;
}

/* -------------------------------------------------------------
 * Share bar positions.
 * ------------------------------------------------------------- */
.pv-share--above,
.pv-share--below {
	margin-block: 18px;
}
.pv-share--above { margin-top: 0; }
.pv-share--below { margin-top: 24px; }

/* Sticky rail — desktop only. */
.pv-share--side {
	display: none;
}
@media (min-width: 1080px) {
	.pv-share--side {
		display: flex;
		position: sticky;
		top: 96px;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		float: left;
		margin-left: -76px;
		width: 56px;
	}
	.pv-share--side .pv-share__label { display: none; }
	.pv-share--side .pv-share__icons {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}

/* -------------------------------------------------------------
 * Brand-coloured share icons (social.php sets --pv-brand per link).
 * ------------------------------------------------------------- */
.pv-share--brand .pv-share__link {
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.pv-share--brand .pv-share__link:hover,
.pv-share--brand .pv-share__link:focus-visible {
	background: var(--pv-brand, var(--pv-accent));
	border-color: var(--pv-brand, var(--pv-accent));
	color: #fff;
	transform: translateY(-1px);
}

/* -------------------------------------------------------------
 * Google News follow card (social.php: .pv-gnews-cta).
 * ------------------------------------------------------------- */
.pv-gnews-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 30px 0;
	padding: 18px 22px;
	background: var(--pv-surface);
	border: 1px solid var(--pv-card-border);
	border-radius: var(--pv-media-radius, 10px);
}
.pv-gnews-cta__body { display: flex; align-items: center; gap: 14px; }
.pv-gnews-cta__icon { display: inline-flex; flex-shrink: 0; }
.pv-gnews-cta__body strong {
	display: block;
	font-family: var(--pv-font-head, system-ui);
	font-size: 1.02rem;
	color: var(--pv-ink);
}
.pv-gnews-cta__body span {
	font-size: .88rem;
	color: color-mix(in srgb, var(--pv-ink) 62%, transparent);
}
.pv-gnews-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--pv-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: .92rem;
	border-radius: 999px;
	transition: transform .18s ease, filter .18s ease;
}
.pv-gnews-cta__button:hover,
.pv-gnews-cta__button:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.05);
	color: #fff;
}
@media (max-width: 560px) {
	.pv-gnews-cta { flex-direction: column; align-items: flex-start; }
	.pv-gnews-cta__button { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------
 * Header / Footer custom CTA buttons.
 * ------------------------------------------------------------- */
.pv-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--pv-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: .88rem;
	transition: transform .15s ease, filter .15s ease;
}
.pv-cta:hover,
.pv-cta:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.05);
	color: #fff;
}
.pv-cta svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.pv-cta--header {
	margin-inline-start: 12px;
}
.pv-cta--footer {
	margin-top: 12px;
}

/* -------------------------------------------------------------
 * Dark mode toggle button.
 * ------------------------------------------------------------- */
.pv-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	color: var(--pv-header-ink, var(--pv-ink));
	border: 1px solid var(--pv-card-border);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.pv-theme-toggle:hover,
.pv-theme-toggle:focus-visible {
	background: color-mix(in srgb, var(--pv-ink) 6%, transparent);
	transform: translateY(-1px);
}
.pv-theme-toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.pv-theme-toggle__sun { display: none; }
.pv-theme-toggle__moon { display: block; }
[data-pv-theme="dark"] .pv-theme-toggle__sun { display: block; }
[data-pv-theme="dark"] .pv-theme-toggle__moon { display: none; }

/* -------------------------------------------------------------
 * Dark-mode media adjustments.
 * Images at very high brightness look wrong on dark backgrounds; a mild
 * saturation trim helps posters and stills blend without altering colour.
 * ------------------------------------------------------------- */
[data-pv-theme="dark"] .pv-entity__backdrop img,
[data-pv-theme="dark"] .pv-hero img {
	filter: brightness(.9);
}

/* Also relax the crisp white border-fills that look harsh in dark mode. */
[data-pv-theme="dark"] .pv-review-tile__badge {
	background: rgba(255, 255, 255, .12);
}

/* =============================================================
 * v0.11.1 — Dark mode corrections + Latest Stories width
 *
 * Several homepage sections were authored with hard-coded light-theme
 * colours (navy #071f5f text, warm gradient grounds, translucent white
 * card fills). Those are invisible or glaring in dark mode. Rather than
 * rewrite editorial.css (risking light mode), we override the specific
 * offenders under [data-pv-theme="dark"] using the palette variables.
 * ============================================================= */

/* ---- Stories showcase: proportion + full-width feel ---- */
/* Give the lead a touch less width so the stacked rows breathe and the
   whole section reads as wide as the carousels below it. */
.pv-stories-showcase__grid {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 26px;
}
@media (min-width: 1200px) {
	.pv-stories-showcase__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}
}

/* ---- Dark mode: stories showcase ---- */
[data-pv-theme="dark"] .pv-stories-showcase {
	background: linear-gradient(125deg,
		color-mix(in srgb, var(--pv-accent) 14%, var(--pv-surface)),
		color-mix(in srgb, #6c5ce7 16%, var(--pv-surface)));
}
[data-pv-theme="dark"] .pv-stories-showcase__head h2 {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-stories-showcase__head span {
	background: rgba(255, 255, 255, .18);
}
[data-pv-theme="dark"] .pv-stories-topics__list a {
	color: var(--pv-ink);
	border-color: rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
}
[data-pv-theme="dark"] .pv-story-lead__content {
	background: rgba(18, 20, 26, .82);
	color: var(--pv-ink);
	backdrop-filter: blur(9px);
}
[data-pv-theme="dark"] .pv-story-lead__content h3,
[data-pv-theme="dark"] .pv-story-row__content,
[data-pv-theme="dark"] .pv-story-row__content h3 {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-story-row {
	background: rgba(255, 255, 255, .05);
}

/* ---- Dark mode: Latest Stories timeline ---- */
[data-pv-theme="dark"] .pv-latest-timeline__head h2 {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-latest-timeline__item > time {
	color: color-mix(in srgb, var(--pv-accent) 80%, #fff);
}
[data-pv-theme="dark"] .pv-latest-timeline__item::before {
	border-left-color: var(--pv-card-border);
}
[data-pv-theme="dark"] .pv-latest-timeline__item > time::before {
	background: var(--pv-accent);
}

/* ---- Dark mode: section titles + card meta legibility ---- */
[data-pv-theme="dark"] .pv-section__title,
[data-pv-theme="dark"] .pv-section__title a,
[data-pv-theme="dark"] .pv-card__title,
[data-pv-theme="dark"] .pv-card__title a {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-card__kicker {
	color: color-mix(in srgb, var(--pv-accent) 82%, #fff);
}
[data-pv-theme="dark"] .pv-card__excerpt,
[data-pv-theme="dark"] .pv-byline,
[data-pv-theme="dark"] .pv-card__meta {
	color: color-mix(in srgb, var(--pv-ink) 68%, transparent);
}

/* ---- Dark mode: Summary + Key Details blocks (were ghost boxes) ---- */
[data-pv-theme="dark"] .pv-article-summary,
[data-pv-theme="dark"] .pv-key-details,
[data-pv-theme="dark"] .pv-review-verdict,
[data-pv-theme="dark"] .pv-scorecard,
[data-pv-theme="dark"] .pv-sources,
[data-pv-theme="dark"] .pv-corrections {
	background: var(--pv-sidebar-bg, #171a21);
	border-color: var(--pv-card-border);
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-article-summary *,
[data-pv-theme="dark"] .pv-key-details * {
	color: inherit;
}

/* ---- Dark mode: author card + credentials ---- */
[data-pv-theme="dark"] .pv-authorpage__credentials,
[data-pv-theme="dark"] .pv-author-card {
	background: var(--pv-sidebar-bg, #171a21);
	border-color: var(--pv-card-border);
}

/* ---- Dark mode: sidebar "Latest Posts" widget numbers ---- */
[data-pv-theme="dark"] .pv-sidebar-latest__item::before,
[data-pv-theme="dark"] .pv-sidebar-latest__index {
	color: color-mix(in srgb, var(--pv-accent) 80%, #fff);
}

/* ---- Dark mode: comments summary bar ---- */
[data-pv-theme="dark"] .pv-comments__summary {
	background: var(--pv-sidebar-bg, #171a21);
	border-color: var(--pv-card-border);
	color: var(--pv-ink);
}

/* =============================================================
 * v0.11.2 — Remaining dark-mode hard-coded-white fixes
 *
 * These editorial.css blocks ship fixed light backgrounds
 * (#fff / #f8f8f9 / warm gradients) and navy text that the earlier
 * dark overrides didn't reach. Re-derive each from palette vars.
 * ============================================================= */

/* ---- Related Articles block (was a glaring white box) ---- */
[data-pv-theme="dark"] .pv-related-posts {
	background: var(--pv-sidebar-bg, #171a21);
	border-color: var(--pv-card-border);
}
[data-pv-theme="dark"] .pv-related-posts__head h2 {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-related-posts__head span {
	background: var(--pv-accent);
	opacity: .8;
}
[data-pv-theme="dark"] .pv-related-card {
	background: color-mix(in srgb, var(--pv-ink) 6%, var(--pv-surface));
	border-color: var(--pv-card-border);
}
[data-pv-theme="dark"] .pv-related-card__body,
[data-pv-theme="dark"] .pv-related-card__title,
[data-pv-theme="dark"] .pv-related-card__title a {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-related-card__meta {
	color: color-mix(in srgb, var(--pv-ink) 62%, transparent);
}

/* ---- Review Verdict block (white panel + invisible verdict text) ---- */
[data-pv-theme="dark"] .pv-review-verdict {
	background: var(--pv-sidebar-bg, #171a21);
	border-color: color-mix(in srgb, var(--pv-accent) 55%, var(--pv-card-border));
}
[data-pv-theme="dark"] .pv-review-verdict__summary {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-review-verdict__badge span { color: color-mix(in srgb, var(--pv-accent) 70%, #fff); }
[data-pv-theme="dark"] .pv-review-verdict__badge strong { color: #fff; }
[data-pv-theme="dark"] .pv-review-verdict__badge small { color: color-mix(in srgb, var(--pv-ink) 60%, transparent); }
[data-pv-theme="dark"] .pv-review-verdict__columns {
	background: color-mix(in srgb, var(--pv-ink) 5%, var(--pv-surface));
	border-color: var(--pv-card-border);
}
[data-pv-theme="dark"] .pv-review-verdict__column li { color: color-mix(in srgb, var(--pv-ink) 78%, transparent); }
[data-pv-theme="dark"] .pv-review-verdict__column--pros h3 { color: #4ade80; }
[data-pv-theme="dark"] .pv-review-verdict__column--cons h3 { color: #f87171; }
[data-pv-theme="dark"] .pv-review-verdict__column--pros li::before { color: #4ade80; }
[data-pv-theme="dark"] .pv-review-verdict__column--cons li::before { color: #f87171; }

/* ---- Verdict block (Gutenberg variant) ---- */
[data-pv-theme="dark"] .pv-review-verdict-block {
	background: var(--pv-sidebar-bg, #171a21);
	border-color: var(--pv-card-border);
	color: var(--pv-ink);
}

/* ---- Stories showcase second row / interviews lead panel ---- */
/* The lead card content area and any white-media placeholder must not
   read as a white slab on dark. */
[data-pv-theme="dark"] .pv-story-row {
	background: color-mix(in srgb, var(--pv-ink) 7%, var(--pv-surface));
}
[data-pv-theme="dark"] .pv-card--lead {
	border-bottom-color: var(--pv-card-border);
}

/* ---- Key details block body ---- */
[data-pv-theme="dark"] .pv-key-detail {
	color: var(--pv-ink);
}
[data-pv-theme="dark"] .pv-key-detail__label {
	color: color-mix(in srgb, var(--pv-ink) 62%, transparent);
}

/* ---- Article body tables ---- */
[data-pv-theme="dark"] .pv-article__body table th,
[data-pv-theme="dark"] .pv-article__body table td {
	border-color: var(--pv-card-border);
}
[data-pv-theme="dark"] .pv-article__body table th {
	background: color-mix(in srgb, var(--pv-ink) 8%, var(--pv-surface));
	color: var(--pv-ink);
}

/* =============================================================
 * v0.11.2 — Beebom-style pill header
 *
 * Opt-in via PollyVox → Header → "Rounded pill outline". Each nav
 * item gets a rounded circular outline that fills on hover. Also
 * rounds the search and menu toggles to match, and gives the topic
 * bar chips the same pill treatment. Classic header is untouched.
 * ============================================================= */

.pv-header-pill .pv-nav__list {
	gap: 8px;
	align-items: center;
}
.pv-header-pill .pv-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid color-mix(in srgb, var(--pv-header-ink, var(--pv-ink)) 22%, transparent);
	border-radius: 999px;
	font-weight: 600;
	line-height: 1;
	color: var(--pv-header-ink, var(--pv-ink));
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.pv-header-pill .pv-nav__list > li > a:hover,
.pv-header-pill .pv-nav__list > li > a:focus-visible {
	transform: translateY(-1px);
}

/* Hover fill variants */
.pv-header-pill.pv-header-pillhover-accent .pv-nav__list > li > a:hover,
.pv-header-pill.pv-header-pillhover-accent .pv-nav__list > li > a:focus-visible,
.pv-header-pill.pv-header-pillhover-accent .pv-nav__list > li.current-menu-item > a {
	background: var(--pv-accent);
	border-color: var(--pv-accent);
	color: #fff;
}
.pv-header-pill.pv-header-pillhover-outline .pv-nav__list > li > a:hover,
.pv-header-pill.pv-header-pillhover-outline .pv-nav__list > li > a:focus-visible,
.pv-header-pill.pv-header-pillhover-outline .pv-nav__list > li.current-menu-item > a {
	border-color: var(--pv-accent);
	color: var(--pv-accent);
}
.pv-header-pill.pv-header-pillhover-soft .pv-nav__list > li > a:hover,
.pv-header-pill.pv-header-pillhover-soft .pv-nav__list > li > a:focus-visible,
.pv-header-pill.pv-header-pillhover-soft .pv-nav__list > li.current-menu-item > a {
	background: color-mix(in srgb, var(--pv-accent) 14%, transparent);
	border-color: color-mix(in srgb, var(--pv-accent) 40%, transparent);
	color: var(--pv-accent);
}

/* Rounded search + menu toggles to match the pill language */
.pv-header-pill .pv-search-toggle,
.pv-header-pill .pv-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid color-mix(in srgb, var(--pv-header-ink, var(--pv-ink)) 22%, transparent);
	border-radius: 50%;
	background: transparent;
	color: var(--pv-header-ink, var(--pv-ink));
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.pv-header-pill .pv-search-toggle:hover,
.pv-header-pill .pv-menu-toggle:hover,
.pv-header-pill .pv-search-toggle:focus-visible,
.pv-header-pill .pv-menu-toggle:focus-visible {
	border-color: var(--pv-accent);
	color: var(--pv-accent);
	transform: translateY(-1px);
}

/* Topic bar chips become pills too */
.pv-header-pill .pv-topicbar__list > li > a {
	display: inline-flex;
	padding: 5px 14px;
	border: 1px solid color-mix(in srgb, var(--pv-topic-ink, var(--pv-ink)) 18%, transparent);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--pv-topic-ink, var(--pv-ink));
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.pv-header-pill .pv-topicbar__list > li > a:hover,
.pv-header-pill .pv-topicbar__list > li > a:focus-visible {
	background: var(--pv-accent);
	border-color: var(--pv-accent);
	color: #fff;
}

/* Dropdown submenus keep readable in pill mode */
.pv-header-pill .pv-nav__list .sub-menu {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--pv-card-border);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pv-header-pill .pv-nav__list > li > a,
	.pv-header-pill .pv-search-toggle,
	.pv-header-pill .pv-menu-toggle { transition: none; }
	.pv-header-pill .pv-nav__list > li > a:hover { transform: none; }
}

/* Mobile: pills wrap cleanly */
@media (max-width: 1024px) {
	.pv-header-pill .pv-nav__list { gap: 6px; }
	.pv-header-pill .pv-nav__list > li > a { padding: 7px 13px; font-size: .85rem; }
}