/*
Theme Name: AIOB
Theme URI: https://aiontheballot.com/
Description: AI on the Ballot (AOB) — a custom, non-partisan WordPress theme for the Regulating AI 2026 US Midterm Elections series. Built with Bootstrap 5, Slick Slider, Font Awesome, and the Poppins font family.
Author: Knowledge Networks / Regulating AI
Author URI: https://regulatingai.org/
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aiob
Tags: custom-menu, featured-images, translation-ready, bootstrap, one-column, right-sidebar
*/

/* ==========================================================================
   AIOB — GLOBAL STYLESHEET
   This file holds the site-wide / global CSS. All responsive styling lives in
   assets/css/responsive.css (loaded after this file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables / Design Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand colors (from AOB homepage reference) */
	--aiob-navy: #0a1a3c;
	--aiob-navy-dark: #06122b;
	--aiob-blue: #1d4ed8;
	--aiob-blue-light: #3b82f6;
	--aiob-red: #c8102e;
	--aiob-red-dark: #a60d26;
	--aiob-gold: #f4b400;
	--aiob-white: #ffffff;
	--aiob-light: #f5f7fb;
	--aiob-gray: #6b7280;
	--aiob-gray-light: #e5e7eb;
	--aiob-dark: #111827;

	/* Typography */
	--aiob-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--aiob-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Layout */
	--aiob-container-max: 1200px;
	--aiob-radius: 8px;
	--aiob-radius-lg: 16px;
	--aiob-transition: all 0.3s ease;
	--aiob-shadow: 0 10px 30px rgba(10, 26, 60, 0.08);
}

/* --------------------------------------------------------------------------
   2. Base / Reset
   -------------------------------------------------------------------------- */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--aiob-font-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--aiob-dark);
	background-color: var(--aiob-white);
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--aiob-font-heading);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.5em;
	color: var(--aiob-navy);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
	margin: 0 0 1rem;
}

a {
	color: var(--aiob-blue);
	text-decoration: none;
	transition: var(--aiob-transition);
}

a:hover,
a:focus {
	color: var(--aiob-red);
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

ul, ol {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.aiob-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 100px;
	padding-right: 100px;
}

.aiob-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

.section-title {
	text-align: center;
	margin-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn-aiob-primary {
	display: inline-block;
	background-color: var(--aiob-red);
	color: var(--aiob-white);
	font-weight: 500;
	padding: 12px 28px;
	border-radius: var(--aiob-radius);
	border: 2px solid var(--aiob-red);
	transition: var(--aiob-transition);
	cursor: pointer;
}

.btn-aiob-primary:hover,
.btn-aiob-primary:focus {
	background-color: var(--aiob-red-dark);
	border-color: var(--aiob-red-dark);
	color: var(--aiob-white);
}

.btn-aiob-outline {
	display: inline-block;
	background-color: transparent;
	color: var(--aiob-navy);
	font-weight: 500;
	padding: 12px 28px;
	border-radius: var(--aiob-radius);
	border: 2px solid var(--aiob-navy);
	transition: var(--aiob-transition);
	cursor: pointer;
}

.btn-aiob-outline:hover,
.btn-aiob-outline:focus {
	background-color: var(--aiob-navy);
	color: var(--aiob-white);
}

/* --------------------------------------------------------------------------
   6. Header / Navigation (base = desktop >= 991px)
   -------------------------------------------------------------------------- */
.site-header {
	background-color: var(--aiob-white);
	border-bottom: 1px solid #ececec;
	position: relative;
	z-index: 1000;
}

.aiob-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 24px;
	padding: 12px 0;
}

/* Branding / logo */
.site-branding {
	flex: 0 0 auto;
}

.aiob-logo-link {
	display: inline-block;
	line-height: 0;
}

.aiob-logo {
	display: block;
	width: auto;
	max-height: 60px;
}

.site-branding .site-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--aiob-navy);
	line-height: 1.1;
}

/* Primary menu */
.main-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.aiob-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
}

.aiob-menu li {
	position: relative;
}

.aiob-menu a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	letter-spacing: 0;
	color: #000000;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	padding: 6px 2px;
	transition: color 0.25s ease;
}

/* Animated accent bar on hover / current (not a text underline) */
.aiob-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: #dd141a;
	transition: width 0.28s ease;
}

.aiob-menu a:hover,
.aiob-menu a:focus,
.aiob-menu .current-menu-item > a,
.aiob-menu .current_page_item > a {
	color: #dd141a;
}

.aiob-menu a:hover::after,
.aiob-menu a:focus::after,
.aiob-menu .current-menu-item > a::after,
.aiob-menu .current_page_item > a::after {
	width: 100%;
}

/* Parent items with a dropdown — caret indicator */
.aiob-menu .menu-item-has-children > a {
	padding-right: 16px;
}

.aiob-menu .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 45%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.25s ease;
}

.aiob-menu .menu-item-has-children:hover > a::before,
.aiob-menu .menu-item-has-children:focus-within > a::before {
	transform: translateY(-20%) rotate(-135deg);
}

/* Dropdown submenu (desktop) */
.aiob-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1050;
	min-width: 210px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(10, 26, 60, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.aiob-menu li:hover > .sub-menu,
.aiob-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Nested (3rd level) flies out to the side */
.aiob-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.aiob-menu .sub-menu li {
	width: 100%;
	border: 0;
}

.aiob-menu .sub-menu a {
	display: block;
	width: 100%;
	padding: 9px 18px;
	font-size: 15px;
	font-weight: 500;
	color: #000000;
	text-align: left;
	white-space: nowrap;
}

.aiob-menu .sub-menu a::after {
	display: none;
}

.aiob-menu .sub-menu a:hover,
.aiob-menu .sub-menu a:focus,
.aiob-menu .sub-menu .current-menu-item > a {
	color: #dd141a;
	background-color: #f6f7f9;
}

/* Mobile submenu toggle button — hidden on desktop (hover handles dropdowns) */
.aiob-submenu-toggle {
	display: none;
}

/* Discuss Participation button */
.btn-discuss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #ffffff;
	background-color: #dd141a;
	border: 0;
	border-radius: 25px;
	padding: 12px 30px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-discuss:hover,
.btn-discuss:focus {
	color: #ffffff;
	background-color: #b8100f;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(221, 20, 26, 0.35);
}

.btn-discuss:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(221, 20, 26, 0.3);
}

.aiob-cta--bar {
	flex: 0 0 auto;
}

/* Off-canvas controls hidden on desktop; shown < 991px in responsive.css */
.aiob-menu-toggle,
.aiob-menu-close,
.aiob-nav-overlay,
.aiob-cta--panel {
	display: none;
}

/* --------------------------------------------------------------------------
   7. Footer (base = desktop)
   -------------------------------------------------------------------------- */
.site-footer {
	position: relative;
	color: #ffffff;
	background-color: var(--aiob-navy);
	background-image: url("assets/images/footer-background.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

.site-footer a {
	color: #ffffff;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #e23b3b;
}

/* --- Top row --- */
.aiob-footer-main {
	padding: 90px 0 50px;
}

.aiob-footer-grid {
	display: grid;
	grid-template-columns: 3fr 2fr 2fr 4fr;
	gap: 30px;
	align-items: start;
}

/* Column spacing fine-tune: more room after the brand column, tighter
   between Quick links and Address; Address <-> Newsletter stays at the
   base grid gap. */
.footer-col--brand {
	margin-right: 30px;
}

.footer-col.footer-col--links {
	padding-left: 25px;
}

.footer-col--address {
	margin-left: -14px;
}

.footer-heading {
	color: #d51318;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 1.1rem;
}

/* Column 1 — brand */
.footer-logo {
	display: block;
	width: auto;
	max-height: 66px;
	margin-bottom: 22px;
}

.footer-desc {
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.9;
	margin: 0 0 22px;
	max-width: 320px;
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: #ffffff;
	transition: color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover,
.footer-social a:focus {
	color: #e23b3b;
	transform: translateY(-2px);
}

/* Column 2 — quick links */
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu li {
	margin-bottom: 2px;
}

.footer-menu a {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
}

/* Column 3 — address */
.footer-contact {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.footer-contact li {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 20px;
	margin-bottom: 16px;
}

.footer-contact a {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.footer-produced {
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.8;
	margin: 0;
	max-width: 320px;
}

/* Column 4 — newsletter card (red tag) */
.footer-col--newsletter {
	position: relative;
}

/* Newsletter card: the red-tag.png (native 438x320) is shown whole, at its
   own aspect ratio, so nothing in it is ever stretched or distorted. The
   title/input/button sit in an absolutely-positioned layer on top, inset to
   match the artwork's flat red body (percentages so it re-aligns at any
   card size — no per-breakpoint recalculation needed). */
.footer-newsletter {
	position: relative;
	z-index: 2;
	margin-top: -133px;
	margin-left: auto;
	width: 100%;
	max-width: 530px;
}

.footer-newsletter__bg {
	display: block;
	width: 100%;
	height: 350px;
}

.footer-newsletter__content {
	position: absolute;
	left: 9.6%;
	right: 9.6%;
	top: 12%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 25px 25px 0;
}

.footer-newsletter__title {
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
	margin: 0 0 30px;
}

.newsletter-form__field {
	margin-bottom: 37px;
}

.newsletter-form__field input {
	width: 100%;
	padding: 15px 18px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: #000000;
	background: #ffffff;
	border: 0;
	border-radius: 6px;
	outline: none;
}

.newsletter-form__field input::placeholder {
	color: #000000;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	opacity: 1;
}

.newsletter-form__btn {
	width: 100%;
	padding: 15px 18px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	text-align: center;
	color: #ffffff;
	background: #111111;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.newsletter-form__btn:hover,
.newsletter-form__btn:focus {
	background: #000000;
}

/* --- Bottom bar --- */
.aiob-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 24px 0;
}

.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.footer-copyright {
	margin: 0;
	color: #ffffff;
	opacity: 0.898;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
}

.footer-policy-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-policy-menu a {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	line-height: 26px;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   8. WordPress core / accessibility helpers
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}

.skip-link:focus {
	left: 6px;
	top: 6px;
	z-index: 100000;
	background: var(--aiob-white);
	padding: 8px 16px;
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.875rem;
	color: var(--aiob-gray);
	text-align: center;
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* required by Theme Check */
}

/* Pagination */
.pagination {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 2rem 0;
	justify-content: center;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--aiob-gray-light);
	border-radius: var(--aiob-radius);
	color: var(--aiob-navy);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background-color: var(--aiob-navy);
	color: var(--aiob-white);
	border-color: var(--aiob-navy);
}


/* ==========================================================================
   HEADER MARQUEE
   Full-width scrolling bar at the top of the header. Text managed in
   wp-admin -> Marquee Text. 100px left/right gutter (overridden responsively
   in responsive.css). Persistent gutter = padding on the outer element, with
   overflow:hidden on the inner viewport.
   ========================================================================== */
.aiob-marquee {
	width: 100%;
	background-color: #022b82;
	padding-left: 100px;
	padding-right: 100px;
	box-sizing: border-box;
	overflow: hidden;
}

.aiob-marquee__viewport {
	width: 100%;
	overflow: hidden;
}

.aiob-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	animation: aiob-marquee-scroll 32s linear infinite;
}

/* Pause on hover for readability. */
.aiob-marquee:hover .aiob-marquee__track {
	animation-play-state: paused;
}

.aiob-marquee__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.aiob-marquee__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.aiob-marquee__text {
	font-size: 16px;
	color: #ffffff;
	font-weight: 300;
	font-family: "Poppins", sans-serif;
	line-height: 1.2;
	padding: 14px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.aiob-marquee__star {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0 20px;
	object-fit: contain;
}

@keyframes aiob-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Respect users who prefer reduced motion — stop the scroll. */
@media (prefers-reduced-motion: reduce) {
	.aiob-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
}


/* ==========================================================================
   HOMEPAGE HERO SECTION
   Built in Elementor; these rules target the IDs/classes assigned to the
   widgets there (#homepage-hero-section, #home-hero-red-section,
   #home-hero-heading-section, #home-hero-content-section,
   .red-design-button / .blue-design-button). No markup here — content is
   fully managed from the Elementor editor.
   ========================================================================== */

#homepage-hero-section {
	padding: 50px 100px;
	overflow: hidden;
}

#homepage-hero-content-section {
	max-width: 800px;
}

/* Eyebrow badge — "A Regulating AI Series · 2026 US Midterm Elections" */
#home-hero-red-section {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	padding: 10px 20px;
	border-radius: 2px;
	background-color: #dd141a;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #ffffff;
	line-height: 1.3;
}

#home-hero-red-section::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: url("assets/images/star-image.png") no-repeat center / contain;
}

/* Headline */
#home-hero-heading-section {
	position: relative;
	margin: 0 0 34px;
	padding-bottom: 24px;
	font-family: "Sora", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 700;
	color: #000000;
}

/* Short red divider under the headline (not a full-width border) */
#home-hero-heading-section::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #dd141a;
}

/* Body paragraph */
#home-hero-content-section {
	margin: 0 0 36px;
	max-width: 650px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	color: #000000;
}

/* Buttons row */
#home-hero-redirection-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 25px;
}

/* !important throughout this block: Elementor writes its own per-widget CSS
   (from the Style tab / global button defaults) directly into the page, at a
   specificity/order that can otherwise beat a plain external stylesheet rule
   — without it, the button showed unstyled by default and only picked up
   our color on :hover. Default and hover are still two distinct, explicit
   states below, not the same rule reused. */
.red-design-button .elementor-button,
.blue-design-button .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 15px 32px !important;
	border-radius: 25px !important;
	border: 0 !important;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.red-design-button .elementor-button-text,
.blue-design-button .elementor-button-text {
	font-family: "Poppins", sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* Default (not hovered) */
.red-design-button .elementor-button {
	background-color: #dd141a !important;
}

.blue-design-button .elementor-button {
	background-color: #022b82 !important;
}

/* Hover / focus — distinct styling from the default state above */
.red-design-button .elementor-button:hover,
.red-design-button .elementor-button:focus {
	background-color: #b8100f !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(221, 20, 26, 0.35);
}

.blue-design-button .elementor-button:hover,
.blue-design-button .elementor-button:focus {
	background-color: #011f61 !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(2, 43, 130, 0.35);
}

/* "Track where every candidate..." hero variant — .tracker-title /
   .tracker-text-content / .btn-explore-stats are extra classes layered on
   top of the existing hero elements above, not new markup. The title/text
   overrides use an ID+class combo selector (not a plain class) since a
   plain class alone can't out-specificity the #home-hero-heading-section /
   #home-hero-content-section ID rules above. Font sizes and responsive
   scaling are untouched and already handled by those ID rules — only
   weight/color differ here, so no separate responsive block is needed. */
#home-hero-heading-section.tracker-title {
	font-weight: 400;
	color: #ffffff;
}

#home-hero-content-section.tracker-text-content {
	color: #ffffff;
}

.btn-explore-stats .elementor-button {
	background-color: #ffffff !important;
}

.btn-explore-stats .elementor-button-text {
	color: #dd141a !important;
}

.btn-explore-stats .elementor-button:hover,
.btn-explore-stats .elementor-button:focus {
	background-color: #f2f2f2 !important;
}


/* ==========================================================================
   [among-our-guests] SHORTCODE
   "Among our guests: <text> • <text> • <text> • <text>" — pulls the first 4
   lines from the Marquee Text admin screen. Wraps at every breakpoint; the
   previous "single line on tablet and up" nowrap assumption overflowed its
   card once real (long) guest text was added, since the responsive tiers
   between mobile and desktop never reset it back to wrapping.
   ========================================================================== */
.aiob-among-guests {
	margin: 0;
	text-align: center;
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	line-height: 29px;
	font-weight: 500;
	color: #dd141a;
	white-space: normal;
}

.aiob-among-guests__dot {
	display: inline-block;
	margin: 0 6px;
}


/* ==========================================================================
   HOMEPAGE — "Why Appear" stats strip (4-column) + featured-policy callout
   Built in Elementor. Rules use structural selectors from the shared parent
   (#home-second-four-col > div, .home-second-four-col-image) rather than the
   individual non-partisan-section-N IDs, because that ID is duplicated on
   both column 3 and column 4 in the exported markup — a structural selector
   sidesteps that instead of depending on it.
   ========================================================================== */
#homepage-section-blue-second {
	padding: 60px 100px;
	background-color: #022b82;
}

#home-second-four-col {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 0 50px;
}

#home-second-four-col > div {
	position: relative;
	flex: 1 1 25%;
	max-width: 25%;
	box-sizing: border-box;
	padding: 0 30px;
	text-align: center;
}

/* Vertical divider between columns (not after the last one) */
#home-second-four-col > div:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	right: 0;
	border-right: 2px solid #ffffff;
	opacity: 0.302;
}

.home-second-four-col-image {
	margin: 0 0 22px;
}

/* !important here and below: Elementor's own image-widget CSS is generated
   per-page and can load after (or at equal specificity to) a plain theme
   rule, which is why these were "not reflecting" without it — same cause as
   the red/blue buttons earlier in this build. */
.home-second-four-col-image img {
	display: block !important;
	width: 70px !important;
	height: 70px !important;
	margin: 0 auto 20px !important;
	padding: 10px !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
	border-radius: 10px !important;
	background-color: #ffffff !important;
}

/* Broader safety net: Elementor always puts this class on every image
   widget's wrapper, regardless of whether a custom class like
   .home-second-four-col-image also made it through. */
.elementor-widget-image img {
	display: inline-block !important;
	vertical-align: middle;
	border-radius: 10px !important;
	margin-bottom: 20px;
}

#home-second-four-col h2 {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 14px;
	font-family: "Poppins", sans-serif;
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
}

/* Short red divider under each heading */
#home-second-four-col h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 80px;
	height: 0;
	transform: translateX(-50%);
	border-top: 1px solid #dd141a;
}

#home-second-four-col p {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #ffffff;
	text-align: center;
	line-height: 1.6;
}

/* White callout card — shortcode text + italic line */
#home-four-column-section {
	border-radius: 10px;
	background-color: #ffffff;
	padding: 34px 40px;
	text-align: center;
}

#home-four-column-section .elementor-shortcode {
	margin-bottom: 14px;
}

#featured-poilcy-text-italic {
	margin: 0 auto;
	max-width: 860px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 500;
	font-style: italic;
	color: #000000;
	text-align: center;
	line-height: 1.6;
}


/* ==========================================================================
   HOMEPAGE — "Two Ways to Hold This Election Accountable"
   Built in Elementor. #conversation-section-image / #conversation-section-content
   / #conversation-title / #episodes-wednesday are each reused on BOTH rows in
   the exported markup (duplicate IDs), so structural selectors are used
   instead of relying on uniqueness: the big photo is always a DIRECT child of
   the row wrapper, while the small icon is nested inside the card — that
   distinction alone is enough to style each correctly regardless of the ID
   reuse, and it also naturally handles row 2's reversed [card, photo] order
   since no flex `order` is needed — the DOM order already alternates.
   ========================================================================== */
#homepage-section-election {
	padding: 80px 100px;
	background-color: #ffffff;
}

#homepage-section-election-title {
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

#homepage-conversation-section {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Row: photo + card side by side (or card + photo, per DOM order) */
/* Fixed row height (both this row's photo+card AND the other row's
   photo+card, since this ID is reused on both) so every box lines up to
   the same height instead of the card stretching to match an oversized
   photo. This fixed-height design applies at >=1200px (desktop) only —
   below that, responsive.css switches the row/photo/card to height:auto +
   flex stretch instead, since a fixed 452px either clipped a card whose
   wrapped text needed more room, or left the photo at its own unrelated
   aspect-ratio height when the card was short at narrower widths. */
#conversation-section-image {
	display: flex;
	align-items: stretch;
	gap: 24px;
	height: 452px;
}

/* The big photo — direct child of the row */
#conversation-section-image > .elementor-widget-image {
	flex: 1 1 58%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
}

#conversation-section-image > .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The white info card */
#conversation-section-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 38%;
	height: 100%;
	box-sizing: border-box;
	padding: 36px 32px;
	border-radius: 15px;
	background-color: #ffffff;
	border: 1px solid #000000;
	overflow: hidden;
}

/* The small icon — nested inside the card, not a direct row child */
#conversation-section-content .elementor-widget-image {
	margin: 0 0 10px;
}

#conversation-section-content .elementor-widget-image img {
	display: block !important;
	width: 92px !important;
	height: 92px !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	background-color: #dd141a !important;
}

#conversation-title {
	margin: 0 0 16px;
	font-family: "Poppins", sans-serif;
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	color: #112259;
}

#episodes-wednesday,
#focused-conversation-text {
	margin: 0 0 16px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #000000;
	line-height: 1.6;
}

.conversation-btn {
	margin-top: 10px;
}

.watch-episodes-btn.conversation-btn {
	margin: 0;
}

/* "View the Tracker" only — pin it to the bottom of its card. Requires the
   card to be a flex column (set on #conversation-section-content below);
   .watch-episodes-btn keeps the normal margin-top:10px above (source order:
   this rule comes after .conversation-btn's, so it wins for this button). */
.view-tracker-btn {
	margin-top: auto;
}

.conversation-btn .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0 !important;
	background-color: #ffffff !important;
	border: 0 !important;
	text-decoration: none !important;
}

.conversation-btn .elementor-button-text {
	font-family: "Poppins", sans-serif !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: #000000 !important;
	transition: color 0.25s ease;
}

/* Red arrow after the button text — a plain Unicode arrow, not an icon-font
   glyph, so it renders with zero dependency risk. */
.conversation-btn .elementor-button::after {
	content: "\2192";
	display: inline-block;
	margin-left: 10px;
	font-size: 20px;
	line-height: 1;
	color: #dd141a;
	transition: transform 0.25s ease;
}

/* Hover / focus — both buttons */
.conversation-btn .elementor-button:hover .elementor-button-text,
.conversation-btn .elementor-button:focus .elementor-button-text {
	color: #dd141a !important;
}

.conversation-btn .elementor-button:hover::after,
.conversation-btn .elementor-button:focus::after {
	transform: translateX(5px);
}


/* ==========================================================================
   HOMEPAGE — Featured Guests slider
   Built in Elementor (title/heading) + [featured-guest-slider] shortcode
   (Slick carousel, see assets/js/custom.js for the init: 4 slides shown,
   scrolls 1 at a time, autoplay, dots).
   ========================================================================== */
#home-featured-guest-section {
	padding: 80px 100px;
	background-color: #ffffff;
}

#featured-guest-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

#featured-section-heading {
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

/* Slick gutter technique: negative margin on the viewport compensates for
   the horizontal margin added to each card below. */
.featured-guest-slider .slick-list {
	margin: 0 -12px;
}

.featured-guest-slider .slick-track {
	display: flex !important;
}

.featured-guest-slider .slick-slide {
	height: auto;
}

.featured-guest-card {
	margin: 0 12px;
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	background-color: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.featured-guest-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: #d9d9d9;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.featured-guest-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.featured-guest-card__body {
	padding: 16px 18px 20px;
	background-color: #eaecf5 !important;
}

/* Homepage slider — explicit here even though it now matches the #eaecf5
   base above, so the slider's grey card body reads clearly against the
   section's white background regardless of any future base-rule change. */
.featured-guest-slider .featured-guest-card__body {
	background-color: #eaecf5 !important;
}

.featured-guest-card__meta {
	margin: 0 0 8px;
	font-family: "Poppins", sans-serif;
	font-size: 10px;
	line-height: 12px;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

.featured-guest-card__title {
	margin: 0 0 6px;
	max-height: 60px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: "Poppins", sans-serif;
	font-size: 25px;
	line-height: 30px;
	font-weight: 600;
	color: #000000;
}

/* Reserved to 2 lines (same technique as .episode-card__title) so every
   slide's body ends up the same total height regardless of how long its
   subtitle actually is — without this, Slick's equal-height row (via
   .featured-guest-card { height:100% }) stretched shorter cards' white
   background past their own content, leaving a blank gap at the bottom. */
.featured-guest-card__subtitle {
	margin: 0;
	max-height: 28px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-weight: 400;
	color: #000000;
}

/* Homepage slider only — max-height above only caps a 1-line subtitle, it
   doesn't reserve the space, so a card whose subtitle happens to be one
   line ends up with a visibly shorter grey body than its 2-line neighbours.
   Fixed height forces every card's subtitle to reserve the same space
   regardless of how much it actually wraps. Title is left at its natural
   height (not fixed) per a follow-up request. */
.featured-guest-slider .featured-guest-card__title {
	height: auto;
}

.featured-guest-slider .featured-guest-card__subtitle {
	height: 28px;
}

/* Dots */
.featured-guest-slider .slick-dots {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	list-style: none;
	gap: 8px;
	margin: 34px auto 0;
	padding: 8px 14px;
	border-radius: 20px;
	background-color: #aeadad;
}

.featured-guest-slider .slick-dots li {
	width: auto;
	height: auto;
	margin: 0;
	line-height: 1;
}

.featured-guest-slider .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #191e45;
	text-indent: -9999px;
	overflow: hidden;
	transition: width 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
}

.featured-guest-slider .slick-dots li button:before {
	content: none;
}

.featured-guest-slider .slick-dots li.slick-active button {
	width: 20px;
	border-radius: 4px;
	background-color: #ffffff;
}


/* ==========================================================================
   HOMEPAGE — "Key AI Policy Issues"
   Built in Elementor (eyebrow/heading) + [ai-policy-issue-list] shortcode
   (3-per-row card grid, data from the "Key AI Policy Issues" admin screen).

   Note on the card background: the PSD gave `background-color:#000000` and
   `opacity:0.161` as two separate properties. Applied literally to the card
   element that would fade the title/description text to 16% opacity too
   (unreadable) — so it's implemented as `rgba(0,0,0,0.161)` instead, which
   gives the same translucent-black panel while keeping the white text at
   full opacity, matching what the reference image actually shows.
   ========================================================================== */
#ai-policy-issue-section {
	position: relative;
	padding: 80px 100px;
	color: #ffffff;
	background-color: var(--aiob-navy);
	background-image: url("assets/images/footer-background.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
}

#ai-policy-issue-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

#ai-policy-issue-heading {
	position: relative;
	z-index: 1;
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #ffffff;
}

.ai-policy-issue-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ai-policy-issue-card {
	box-sizing: border-box;
	padding: 28px 26px;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, 0.161);
	border: 1px solid #ffffff;
}

.ai-policy-issue-card__icon {
	margin: 0 0 18px;
}

.ai-policy-issue-card__icon img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.ai-policy-issue-card__title {
	position: relative;
	margin: 0 0 16px;
	padding-bottom: 14px;
	font-family: "Poppins", sans-serif;
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	color: #ffffff;
}

/* Short red divider under the title (not a full-width border) */
.ai-policy-issue-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #db2e2e;
}

.ai-policy-issue-card__desc {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #ffffff;
	line-height: 1.6;
}


/* ==========================================================================
   HOMEPAGE — "Where AI Policy Meets Voters"
   Built in Elementor (eyebrow/heading/paragraph). The map is a single static
   image supplied by the design — apply id="policy-meets-voter-map" to that
   Elementor image widget, and id="policy-meets-voter-legend" to a container
   wrapping the two legend rows (see markup shape in the comments below) so
   these rules pick them up; neither ID existed in the markup provided, so
   these are new, sensibly-named hooks rather than something already built.

   Expected legend markup (build with two Elementor "Icon Box" / basic divs,
   or a text widget with this HTML via a Shortcode widget):
     <div id="policy-meets-voter-legend">
       <div class="policy-map-legend__item">
         <span class="policy-map-legend__swatch policy-map-legend__swatch--senate"></span>
         <span class="policy-map-legend__label">Senate Races</span>
       </div>
       <div class="policy-map-legend__item">
         <span class="policy-map-legend__swatch policy-map-legend__swatch--governor"></span>
         <span class="policy-map-legend__label">Governor Races</span>
       </div>
     </div>
   ========================================================================== */
#policy-meets-voter-section {
	padding: 80px 100px;
	background-color: #ffffff;
}

#policy-meets-voter-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

#policy-meets-voter-heading {
	margin: 0 0 16px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

#policy-meets-voter-paragraph {
	margin: 0 0 40px;
	max-width: 700px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #000000;
	line-height: 1.6;
}

/* Map image */
#policy-meets-voter-map {
	margin: 0 0 40px;
}

#policy-meets-voter-map img {
	display: block;
	width: 100%;
	height: auto;
}

/* Legend */
#policy-meets-voter-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 48px;
}

.policy-map-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.policy-map-legend__swatch {
	display: inline-block;
	width: 36px;
	height: 36px;
	border-radius: 4px;
}

.policy-map-legend__swatch--senate {
	background-color: #f5a623;
}

.policy-map-legend__swatch--governor {
	background-color: #112259;
}

.policy-map-legend__label {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000000;
}


/* ==========================================================================
   HOMEPAGE — "Reach. Influence. On the Record." impact stats
   No Elementor markup was supplied for this section, so the following DOM
   shape is assumed from the class/ID names given (document/adjust in
   Elementor if the actual build differs):

     #homepage-impact-statistics-section
       p#homepage-impact-statistics-text        "Our Impact"
       h2#homepage-impact-statistics-heading    "Reach. Influence. On the Record."
       div#stats-section                        (grid, 8 direct-child items)
         div#stats-count-1 .. #stats-count-8
           div.stats-count
             span               (e.g. "200")
             span.stats-red-text (e.g. "K+")
           p                    (label, e.g. "Owned Subscribers")

   Note on the divider spec: the PSD gave `opacity:0.302` + `border:2px solid
   #ffffff` as separate properties on the cell. Applied literally to the cell
   that fades the numbers/labels to 30% opacity too (unreadable) — so it's
   implemented as an rgba border color instead, matching what the reference
   image shows (fully opaque white text, only the divider lines are faint).
   ========================================================================== */
#homepage-impact-statistics-section {
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 60px;
	padding: 80px 100px;
	background-color: #132a5a;
}

#homepage-impact-statistics-text {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

#homepage-impact-statistics-heading {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	width: 262px;
	height: 232px;
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #ffffff;
}

#stats-section {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 0;
}

#stats-section > div {
	box-sizing: border-box;
	padding: 20px 28px;
}

/* Vertical dividers — columns 1-3, both rows */
#stats-section > div:not(:nth-child(4n)) {
	border-right: 2px solid rgba(255, 255, 255, 0.302);
}

/* Horizontal divider — row 1 only */
#stats-section > div:nth-child(-n+4) {
	border-bottom: 2px solid rgba(255, 255, 255, 0.302);
}

#stats-section > div:first-child {
	padding-left: 0;
}

.stats-count {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	white-space: nowrap;
	padding: 0 !important;
}

.stats-count span {
	font-family: "Poppins", sans-serif;
	font-size: 54px;
	line-height: 65px;
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
}

span.stats-red-text {
	color: #dd141a;
}

#stats-count-1 p,
#stats-count-2 p,
#stats-count-3 p,
#stats-count-4 p,
#stats-count-5 p,
#stats-count-6 p,
#stats-count-7 p,
#stats-count-8 p {
	margin: 8px 0 0;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 23px;
	font-weight: 500;
	color: #ffffff;
}


/* ==========================================================================
   HOMEPAGE — "Discuss Participation" (Contact Form 7)
   Built in Elementor. #discuss-participation-left is an empty div in the
   markup — apply the ballot-box photo via Elementor's own Background Image
   control on that container (same pattern as the "Where AI Policy Meets
   Voters" map); this CSS just makes sure it fills its column and crops
   nicely at any size. The CF7 form uses a custom template
   (.contact-form-wrapper / .form-group / .cf7-submit-wrap) with each
   label's text and its input both nested inside a single <label>, separated
   by manual <br> tags — those are hidden below so spacing is controlled
   purely by this CSS instead of the extra blank lines they'd otherwise add.
   ========================================================================== */
#discuss-participation-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 100px;
}

#discuss-participation-left {
	min-height: 540px;
	background-color: #d9d9d9;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#discuss-participation-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 60px;
	background-color: #eaecf5;
}

/* Homepage only — the About Us page reuses #discuss-participation-right
   verbatim (see the "GET STARTED" block further below) and keeps the
   vertically-centered/wider-padding version above; only the homepage form
   gets the tighter side padding + fixed top-aligned spacing here. Using
   justify-content:flex-start + a fixed padding-top (instead of the shared
   rule's justify-content:center) means the heading always starts the same
   distance from the top regardless of how tall the photo on the left
   renders at a given viewport width. */
body.home #discuss-participation-right {
	justify-content: flex-start;
	padding: 50px 55px;
}

#discuss-participation-title {
	position: relative;
	margin: 0 0 34px;
	padding-bottom: 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #223b8f;
}

/* Short red divider under the title */
#discuss-participation-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #db2e2e;
}

/* Form */
.discuss-form .form-group {
	margin: 0 0 24px;
}

.discuss-form label {
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	line-height: 26px;
	font-weight: 400;
	color: #000000;
}

/* Collapse CF7's manual <br> tags — spacing is handled by this CSS instead */
.discuss-form label br {
	display: none;
}

.discuss-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 2px;
}

.discuss-form input[type="text"],
.discuss-form input[type="email"],
.discuss-form input[type="tel"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid #dcdfef;
	border-radius: 6px;
	background-color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #000000;
	transition: border-color 0.25s ease;
}

.discuss-form input[type="text"]:focus,
.discuss-form input[type="email"]:focus,
.discuss-form input[type="tel"]:focus {
	outline: none;
	border-color: #223b8f;
}

.discuss-form input::placeholder {
	opacity: 0.502;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 300;
	color: #000000;
}

.discuss-form .cf7-submit-wrap {
	margin-top: 28px;
}

.discuss-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 170px;
	padding: 15px 40px;
	border: 0;
	border-radius: 25px;
	background-color: #dd141a;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.discuss-form input[type="submit"]:hover,
.discuss-form input[type="submit"]:focus {
	background-color: #b8100f;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(221, 20, 26, 0.35);
}

.discuss-form .wpcf7-spinner {
	margin-left: 10px;
}

.discuss-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	color: #dd141a;
}

.discuss-form .wpcf7-response-output {
	margin: 16px 0 0;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
}


/* ==========================================================================
   HOMEPAGE — "Want your campaign's position on the record?" CTA strip
   Built in Elementor.
   ========================================================================== */
#join-campaign-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 24px;
	padding: 40px;
	background-color: #223b8f;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Homepage only — every other page (About Us, Blog CTA, etc.) keeps the
   uniform 40px padding above. */
body.home #join-campaign-section {
	padding: 40px 100px;
}

#join-campaign-section-title {
	margin: 0;
	max-width: 65%;
	min-width: 0;
	flex: 1 1 65%;
	font-family: "Poppins", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 500;
	color: #ffffff;
}

.participate-btn {
	flex: 0 0 auto;
}

.participate-btn .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px 42px !important;
	border: 0 !important;
	border-radius: 25px !important;
	background-color: #dd141a !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.participate-btn .elementor-button-text {
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 20px !important;
	line-height: 24px !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: #ffffff !important;
}

.participate-btn .elementor-button:hover,
.participate-btn .elementor-button:focus {
	background-color: #b8100f !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(221, 20, 26, 0.35);
}

/* "About Us" page reuses this same #join-campaign-section CTA, but wants
   it inset from the page edges (white space showing on both sides) instead
   of running edge-to-edge like the homepage version — matching the site's
   standard .aiob-container gutter (100px here; see the matching per-tier
   values in responsive.css). Internal text padding is reduced accordingly
   since the outer margin now provides the visual gutter instead. The ID+
   class combo keeps this scoped to the About Us instance only.
   Elementor's own container CSS sets width:100% on this element — adding
   margins on top of that pushed the box 200px wider than its container and
   off the right edge of the screen, so width has to explicitly shrink by
   the same amount the margins add. */
#join-campaign-section.about-us-join-campaign {
	width: calc(100% - 200px);
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom: 130px;
	padding-left: 60px;
	padding-right: 60px;
}


/* ==========================================================================
   HOMEPAGE — "Featured Episodes"
   Built in Elementor (eyebrow/heading) + [featured-episodes-listing]
   shortcode (2-per-row card grid + Explore More button).
   ========================================================================== */
#homepage-episodes-section {
	padding: 80px 100px;
	background-color: #eaecf5;
}

#homepage-episodes-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

#homepage-episodes-heading {
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

.episodes-listing__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

/* "No episodes found" empty state — spans both grid columns so it reads
   as a single centered message instead of sitting in one card's slot. */
.episode-listing-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 60px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: #000000;
	text-align: center;
}

.episode-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	background-color: #ffffff;
	text-decoration: none !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.episode-card:hover,
.episode-card:focus {
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
	transform: translateY(-3px);
}

/* Media: fixed aspect-ratio + object-fit:cover so every card's image is the
   exact same height with zero blank space below it, regardless of the
   source photo's own dimensions. */
.episode-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 7;
	background-color: #d9d9d9;
}

/* position:absolute + inset:0 (not width/height:100% on a normal-flow img)
   so the image is sized strictly by this container, immune to the global
   `img { height:auto }` reset elsewhere fighting for the same box. */
.episode-card__media img,
.episode-card__media-placeholder {
	display: block;
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	object-fit: cover;
}

.episode-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	pointer-events: none;
}

/* Red circle sits behind the play icon on its own layer, sized smaller than
   the 56px hit area so it doesn't touch the icon's own image bounds. */
.episode-card__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #dd141a;
	z-index: 0;
}

.episode-card__play img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.episode-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 24px;
	background-color: #ffffff !important;
}

.episode-card__date {
	margin: 0 0 6px;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 600;
	color: #dd141a;
}

.episode-card__title {
	margin: 0;
	max-width: 486px;
	max-height: 60px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
	color: #000000;
}

/* Explore More button */
.episodes-listing__cta {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.episodes-explore-more {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 8px 8px 8px 28px;
	border-radius: 30px;
	background-color: #ffffff;
	border: 1.5px solid #000000;
	text-decoration: none !important;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.episodes-explore-more:hover,
.episodes-explore-more:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.episodes-explore-more__text {
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #000000;
	white-space: nowrap;
}

.episodes-explore-more__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background-color: #dd141a;
	flex: 0 0 auto;
	transition: transform 0.3s ease;
}

/* Arrow drawn with CSS `content` (a plain Unicode arrow, not an icon-font
   glyph or literal character in the markup) — same technique used for the
   "Watch Episodes" / "View the Tracker" button arrows earlier. */
.episodes-explore-more__arrow::after {
	content: "\2192";
	display: block;
	line-height: 1;
	font-size: 30px;
	color: #ffffff;
}

.episodes-explore-more:hover .episodes-explore-more__arrow,
.episodes-explore-more:focus .episodes-explore-more__arrow {
	transform: translateX(4px);
}

/* Reused as a <button> for the AJAX "Load More" pagination on
   [episode-listing-filters-with-pagination] — same look, disabled state
   added while a request is in flight. */
.episodes-explore-more:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}


/* ==========================================================================
   EPISODES PAGE — filter bar + AJAX-paginated listing
   ([episode-listing-filters-with-pagination] shortcode). The card grid
   below reuses .episodes-listing__grid / .episode-card / .episodes-explore-more
   verbatim from [featured-episodes-listing] — only the filter bar itself is
   new styling.

   Two full-width bands stacked on top of each other: a white band holding
   the navy filter bar, and a #eaecf5 grey band holding the episode grid.
   Each band is 100% width with its own 100px padding on every side —
   that padding is what insets its content (the navy bar / the grid) from
   the band's own edges, it's not padding on the navy bar or grid
   themselves.

   The navy bar itself straddles the white/grey seam (half on each) —
   .episode-filter-section's own background is a hard-stop gradient
   (white top half, grey bottom half, split at the section's own 50% line)
   with the navy bar flex-centered inside it. Centering always puts the
   bar's middle exactly on that 50% line regardless of the bar's actual
   rendered height (which changes across breakpoints/content), so this
   doesn't depend on a fragile negative-margin pixel calculation — as long
   as the section's own padding stays symmetric top/bottom, the math is
   self-correcting. The gradient's bottom half color matches
   .episode-listing-section's background exactly, so the seam between the
   two sections themselves is invisible; only the intentional split behind
   the bar shows.
   ========================================================================== */
.episode-filter-section {
	width: 100%;
	box-sizing: border-box;
	padding: 50px 100px;
	background: linear-gradient(to bottom, #ffffff 50%, #eaecf5 50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.episode-listing-section {
	width: 100%;
	box-sizing: border-box;
	padding: 0 100px 100px;
	background-color: #eaecf5;
}

.episode-filter-bar {
	width: 100%;
	box-sizing: border-box;
	padding: 32px 60px;
	background-color: #022b82;
}

.episode-filter-bar__form {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
}

.episode-filter-bar__field {
	display: flex;
	flex-direction: column;
	flex: 1 1 220px;
	gap: 10px;
}

.episode-filter-bar__field label {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 400;
	color: #ffffff;
}

.episode-filter-bar__field select,
.episode-filter-bar__field input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	border: 0;
	border-radius: 4px;
	background-color: #f5f0eb;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.6);
	appearance: none;
	-webkit-appearance: none;
}

.episode-filter-bar__field select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3e%3cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='1.5' fill='none' fill-rule='evenodd' opacity='.6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 40px;
}

.episode-filter-bar__field input::placeholder {
	opacity: 0.6;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: #000000;
}

.episode-filter-bar__submit {
	flex: 0 0 auto;
	padding: 14px 40px;
	border: 0;
	border-radius: 2px;
	background-color: #dd141a;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.episode-filter-bar__submit:hover,
.episode-filter-bar__submit:focus {
	background-color: #b8100f;
}


/* ==========================================================================
   GUESTS PAGE — [guest-listing-with-pagination]
   #guest-listing-section / #guests-featured-text / #guest-featured-heading
   are built in Elementor (same pattern as #home-featured-guest-section on
   the homepage) and wrap the shortcode below. The card grid reuses
   .featured-guest-card verbatim from [featured-guest-slider] — only the
   grid container + AJAX "Load More" button are new. The button itself
   reuses .episodes-listing__cta / .episodes-explore-more verbatim from the
   episode listing for an identical look.
   ========================================================================== */
#guest-listing-section {
	width: 100%;
	box-sizing: border-box;
	padding: 80px 100px;
	background-color: #ffffff;
}

#guests-featured-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
	text-align: center;
}

#guest-featured-heading {
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
	text-align: center;
}

/* Flexbox (not CSS Grid) so an incomplete last row (1 or 2 cards) centers
   itself instead of grid's default left-alignment. */
.guest-listing__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.guest-listing__grid .featured-guest-card {
	margin: 0;
	flex: 1 1 calc((100% - 64px) / 3);
	max-width: calc((100% - 64px) / 3);
}


/* ==========================================================================
   HOMEPAGE — FAQ + "Where to listen & watch"
   Built in Elementor (eyebrow/heading) + [homepage-faq-list] shortcode
   (2-col accordion grid) + [where-listen-watch] shortcode (logo row).

   No ID was supplied for the "Where to listen & watch" heading shown below
   the FAQ grid in the reference image, so a new one is used here —
   #where-listen-watch-heading — apply that to the Elementor heading widget.
   ========================================================================== */
#homepage-faq-section {
	padding: 80px 100px 130px;
	background-color: #ffffff;
	text-align: center;
}

#homepage-faq-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
	text-align: center;
}

#homepage-faq-heading {
	margin: 0 0 44px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
	text-align: center;
}

/* Accordion columns.
   Two independent flex columns (not a CSS grid) — a grid forces every item
   in the same row to share that row's height, so opening one FAQ left a
   blank gap under its shorter row partner. Independent columns each stack
   top-to-bottom on their own, so opening an item in one column never
   affects the other column's layout at all. */
.faq-accordion-grid {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	text-align: left;
	margin-bottom: 100px;
}

.faq-accordion-col {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	gap: 18px;
}

.faq-item {
	border-radius: 12px;
	background-color: #eaecf5;
	overflow: hidden;
}

.faq-item__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 20px;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
}

.faq-item__question {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	line-height: 29px;
	font-weight: 400;
	color: #000000;
}

.faq-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background-color: #ffffff;
	transition: transform 0.3s ease;
}

.faq-item__icon img {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.faq-item.is-open .faq-item__icon {
	transform: rotate(45deg);
}

.faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.faq-item__answer-inner {
	padding: 0 20px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #000000;
	text-align: center;
}

.faq-item__answer-inner p:last-child {
	margin-bottom: 0;
}

/* "Where to listen & watch" heading — see note above about the missing ID */
#where-listen-watch-heading {
	margin: 64px 0 32px;
	font-family: "DM Sans", sans-serif;
	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;
	color: #000000;
	text-align: center;
}

/* Logo row */
.listen-watch-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.listen-watch-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25px 30px;
	width: 200px;
	min-height: 56px;
	box-sizing: border-box;
	border-radius: 12px;
	background-color: #ffffff;
	border: 1px solid #000000;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.listen-watch-card:hover,
.listen-watch-card:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.listen-watch-card img {
	display: block;
	max-width: 100%;
	max-height: 32px;
	width: auto;
	height: auto;
	object-fit: contain;
}


/* ==========================================================================
   HOMEPAGE — "Amplify Your Voice. Shape the Future"
   Built in Elementor (eyebrow/heading) + [amplify-your-voice] shortcode
   (3-per-row white card grid, data from the "Amplify Voice" admin screen).
   ========================================================================== */
#amplify-your-voice-section {
	padding: 80px 100px;
	background-color: #eaecf5;
}

#amplify-your-voice-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

#amplify-your-voice-heading {
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

.amplify-voice-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.amplify-voice-card {
	box-sizing: border-box;
	padding: 36px 28px;
	border-radius: 12px;
	background-color: #ffffff;
	text-align: center;
}

.amplify-voice-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	padding: 14px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #f8cdce;
}

.amplify-voice-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.amplify-voice-card__title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 16px;
	font-family: "Poppins", sans-serif;
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	color: #000000;
	text-align: center;
}

/* Short red divider under the title */
.amplify-voice-card__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 80px;
	height: 0;
	transform: translateX(-50%);
	border-top: 2px solid #db2e2e;
}

.amplify-voice-card__desc {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #000000;
	text-align: center;
	line-height: 1.6;
}


/* ==========================================================================
   ABOUT US — "Who We Are"
   Built in Elementor. #about-us-right-section is an empty div in the
   markup — apply the panel photo via Elementor's own Background Image
   control on that container (same pattern as the "Discuss Participation"
   photo column); this CSS just makes sure it fills its column and crops
   nicely at any size. Likewise #about-us-hero-section's subtle wave-line
   texture over the navy background is an Elementor Background Image
   control, not something hardcoded here (same pattern as
   #join-campaign-section's background).

   #who-we-are-text: the given spec only describes the "INTRODUCTION" text
   itself (white/16px/uppercase) — the red pill box and star icon around it
   in the reference image aren't in the markup at all, so both are added
   here: the paragraph itself becomes the pill (background-color + padding
   + radius), and the star is a ::before pseudo-element (matching the
   "content" arrow-icon pattern already used elsewhere in this file) rather
   than an <img>, since no icon asset was provided.
   ========================================================================== */
#about-us-hero-section {
	display: flex;
	align-items: center;
	gap: 80px;
	padding: 100px;
	background-color: #132a5a;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

#about-us-left-section {
	flex: 1 1 50%;
	min-width: 0;
	box-sizing: border-box;
}

#about-us-right-section {
	flex: 1 1 50%;
	min-width: 0;
	min-height: 560px;
	box-sizing: border-box;
	border-radius: 12px;
	overflow: hidden;
	background-color: #22345f;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#who-we-are-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 10px 18px;
	box-sizing: border-box;
	border-radius: 6px;
	background-color: #dd141a;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 400;
	color: #ffffff;
}

#who-we-are-text::before {
	content: "\2605";
	font-size: 14px;
	line-height: 1;
	color: #ffffff;
}

#who-we-are-heading {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 54px;
	line-height: 65px;
	font-weight: 400;
	color: #ffffff;
}

/* Short red divider under the heading */
#who-we-are-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #dd141a;
}

#who-we-are-content {
	margin: 0;
	max-width: 100%;
	font-family: "DM Sans", sans-serif;
	font-size: 25px;
	line-height: 32px;
	font-weight: 400;
	color: #ffffff;
	overflow-wrap: break-word;
}


/* ==========================================================================
   ABOUT US — "Our Values"
   Heading (#our-values-title) built in Elementor + [our-values-list]
   shortcode (numbered list, aiob_get_our_values() rows).

   Every row sits on the plain light #eaecf5 card by default. Rows with an
   uploaded "Image" (--photo modifier) reveal that photo — dark overlay,
   white text — only on hover; the image URL is carried on the element via
   the --our-values-photo custom property (set inline in the shortcode)
   rather than a plain background-image, so it can stay switched off until
   :hover.
   ========================================================================== */
#our-values-section {
	padding: 80px 100px;
	box-sizing: border-box;
}

#our-values-title {
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
	text-align: center;
}

.our-values-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.our-values-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 40px 65px;
	box-sizing: border-box;
	background-color: #eaecf5;
	overflow: hidden;
	transition: background-color 0.4s ease;
}

.our-values-item--photo {
	cursor: pointer;
}

.our-values-item--photo:hover {
	background-color: #1a1a1a;
}

/* Photo layer — a separate animated pseudo-element (not a plain
   background-image on :hover) because background-image can't be
   transitioned; this fades and zooms in instead of just popping in. */
.our-values-item--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--our-values-photo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.our-values-item--photo:hover::after {
	opacity: 1;
	transform: scale(1);
}

/* Dark overlay so white text stays readable once the photo shows on hover */
.our-values-item--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.1);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.our-values-item--photo:hover::before {
	opacity: 1;
}

.our-values-item--photo > * {
	position: relative;
	z-index: 2;
}

.our-values-item__number {
	flex: 0 0 100px;
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 60px;
	font-weight: 300;
	color: #dd141a;
	text-align: center;
	line-height: 1;
}

.our-values-item__title {
	flex: 0 0 220px;
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	line-height: 41px;
	font-weight: 600;
	color: #112259;
	transition: color 0.3s ease;
}

.our-values-item__desc {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	line-height: 1.6;
	overflow-wrap: break-word;
	transition: color 0.3s ease;
}

.our-values-item--photo:hover .our-values-item__title,
.our-values-item--photo:hover .our-values-item__desc {
	color: #ffffff;
}


/* ==========================================================================
   ABOUT US — "Our Mission"
   Built in Elementor. #our-mission-left-section is an empty div — apply the
   photo via Elementor's own Background Image control (same pattern as
   "Discuss Participation" / "Who We Are"). Note: the heading and paragraph
   in the exported markup have no id attributes at all, so structural
   selectors (#our-mission-right-section h2 / p) are used instead — add
   id="our-mission-title" / id="our-mission-content" to those two Elementor
   widgets if you want to target them independently later; the structural
   selectors below will keep working either way.

   ========================================================================== */
#our-mission-section {
	display: flex;
	align-items: stretch;
	background-color: #ffffff;
	padding: 20px 100px 0;
}

#our-mission-left-section {
	flex: 1 1 50%;
	min-width: 0;
	min-height: 100%;
	position: relative;
	overflow: hidden;
	background-color: #ffffff;
	padding: 0;
}

/* Overrides .elementor-widget-image img's sitewide
   display:inline-block/border-radius:10px/margin-bottom:20px — without
   this, the actual <img> here would sit at its natural size instead of
   filling the column, with rounded corners and stray bottom spacing. */
#our-mission-left-section img {
	display: block !important;
	position: relative;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 0 !important;
}

#our-mission-right-section {
	flex: 1 1 50%;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
}

#our-mission-right-section h2,
#our-mission-title {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

/* Short red divider under the heading (the given "border: 2px solid
   #dd141a" spec matches the short line seen in the reference image, not a
   box border around the whole heading — same pattern used everywhere else
   in this file). */
#our-mission-right-section h2::after,
#our-mission-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #dd141a;
}

#our-mission-right-section p,
#our-mission-content {
	margin: 0;
	max-width: 100%;
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	line-height: 23px;
	font-weight: 400;
	color: #000000;
	overflow-wrap: break-word;
}


/* ==========================================================================
   ABOUT US — "Our Commitment" / "Our Partnership" / "Our Global Reach"
   Three more copies of the same "Our Mission" section (content left / image
   right, mirrored). All three reuse #our-mission-left-section /
   #our-mission-right-section verbatim for their inner divs (same IDs as the
   original section and as each other), so all of that CSS already applies
   to each of them automatically; DOM order alone (content div first, image
   div second) produces the mirrored layout, no flex `order` needed. Only
   each outer wrapper ID needs its own rule, mirroring #our-mission-section.

   Stacking multiple sections back-to-back means each one's own top padding
   would double up with the previous section's bottom padding — so these
   three (everything after the original "Our Mission") drop their top
   padding to 0, and "Our Global Reach" (the last one) carries the closing
   100px of bottom breathing room for the whole stack instead.
   ========================================================================== */
#our-commitment-section,
#our-partnership-section,
#our-global-reach-section {
	display: flex;
	align-items: stretch;
	background-color: #ffffff;
	padding: 0 100px;
}

#our-global-reach-section {
	padding-bottom: 100px;
}


/* ==========================================================================
   ABOUT US — "Why Participate"
   Built in Elementor. The photo + navy overlay seen in the reference image
   is applied via Elementor's own Background Image + Background Overlay
   controls on #why-participate-section (same pattern as
   #join-campaign-section) — background-color below is just the fallback
   shown before/without an image.
   ========================================================================== */
#why-participate-section {
	padding: 50px 100px;
	background-color: #16215c;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
}

#why-participate-title {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 54px;
	line-height: 65px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}

/* Short red divider under the heading */
#why-participate-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 80px;
	height: 0;
	transform: translateX(-50%);
	border-top: 2px solid #dd141a;
}

#why-participate-text {
	max-width: 1100px;
	margin: 0 auto;
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	line-height: 1.6;
}


/* ==========================================================================
   ABOUT US — "Why Should I Do This?" chat list
   Built in Elementor as a real Nested Accordion widget (only one item open
   at a time — data-settings max_items_expended:"one"), not a static list —
   the <details>/<summary> markup already shows/hides each item's content,
   this file only handles appearance:
     - #why-should-talk-image contains a real <img> (same situation as "Our
       Mission") — its fill/override rules follow the same pattern.
     - Elementor's own chrome (the +/- icon, <summary> default styling) is
       stripped; only the title text, divider and paragraph are styled.
     - Every item (open or collapsed) gets the same red divider.
     - #why-should-talk-image is an empty div — the photo is applied via
       Elementor's own Background Image control, same pattern as "Who We
       Are". It's given a fixed height (align-items:center, not the
       stretch this section used before) so it stays put regardless of
       which accordion item is open — with a real accordion, only one
       item's text is visible at a time, so the chat column's own height
       now varies item to item; stretching the image to match it caused
       the photo to visibly resize/recrop on every click. The !important
       is needed because the 3 mobile/tablet tiers that stack these
       columns (flex-direction:column) restate align-items:stretch (also
       !important) to keep both columns full-width there — without it,
       this base declaration would win regardless of media query and
       collapse the stacked image/chat columns to 0 width.
   ========================================================================== */
#why-should-talk-section {
	display: flex;
	align-items: center !important;
	gap: 40px;
	padding: 100px;
	background-color: #ffffff;
}

#why-should-talk-image {
	flex: 1 1 50%;
	min-width: 0;
	min-height: 450px;
	border-radius: 16px;
	overflow: hidden;
	background-color: #d9d9d9;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	max-height: stretch;
}

#why-should-talk-chat {
	flex: 1 1 50%;
	min-width: 0;
}

#why-should-talk-chat .e-n-accordion {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Elementor's own nested-accordion default skin draws a full 4-side border
   around both the <summary> and the content region (the boxed look seen
   before this reset) — every element below is stripped back to border:0/
   background:transparent/box-shadow:none first, then the one divider this
   design actually wants is added back. That divider is a ::after (not a
   plain border-bottom) so it can stop at 70% width and fade out at its
   right edge via a gradient — a solid border can't do either. */
#why-should-talk-chat .e-n-accordion-item {
	position: relative;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding-bottom: 25px;
}

#why-should-talk-chat .e-n-accordion-item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 70%;
	height: 1px;
	background: linear-gradient(to right, #dd141a, rgba(221, 20, 26, 0));
}

#why-should-talk-chat .e-n-accordion-item:last-child::after {
	display: none;
}

#why-should-talk-chat .e-n-accordion-item-title {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	border: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
}

#why-should-talk-chat .e-n-accordion-item-title::marker,
#why-should-talk-chat .e-n-accordion-item-title::-webkit-details-marker {
	display: none;
}

#why-should-talk-chat .e-n-accordion-item-title-header {
	display: block;
	border: 0;
	background: transparent;
}

#why-should-talk-chat .e-n-accordion-item-title-text {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	line-height: 29px;
	font-weight: 600;
	color: #000000;
}

/* No +/- icon in the reference design */
#why-should-talk-chat .e-n-accordion-item-title-icon {
	display: none;
}

#why-should-talk-chat [role="region"] {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#why-should-talk-chat .e-con-inner {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#why-should-talk-chat .e-paragraph-base {
	margin: 15px 0 0;
	max-width: 100%;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
	line-height: 1.6;
	overflow-wrap: break-word;
}


/* ==========================================================================
   ABOUT US — "Why Appearing on AI on the Ballot is worth your time"
   Heading (#appearing-on-aiob-title) built in Elementor + [appearing-on-aiob]
   shortcode (3-per-row card grid, aiob_get_appearing_on_aiob() rows).

   The card spec's "opacity: 0.161" applied literally to the whole card
   would fade the white count/title/description text to near-invisibility
   too — translated to rgba() on the background and border only (matching
   the pattern used for every other opacity+background-color spec in this
   file), text stays fully opaque white as shown in the reference image.
   The subtle Capitol-silhouette texture on the section background is an
   Elementor Background Image control, same pattern as #join-campaign-section.
   ========================================================================== */
#appearing-on-aiob-section {
	padding: 100px;
	background-color: #132a5a;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#appearing-on-aiob-title {
	max-width: 1050px;
	margin: 0 auto 60px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}

.appearing-on-aiob-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.appearing-on-aiob-card {
	box-sizing: border-box;
	padding: 36px 32px;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.161);
	border: 1px solid rgba(255, 255, 255, 0.161);
}

.appearing-on-aiob-card__count {
	margin: 0 0 12px;
	font-family: "Poppins", sans-serif;
	font-size: 50px;
	line-height: 60px;
	font-weight: 600;
	color: #ffffff;
}

.appearing-on-aiob-card__title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 18px;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
}

/* Short red divider under the title (moved from the count) */
.appearing-on-aiob-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #dd141a;
}

.appearing-on-aiob-card__desc {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #ffffff;
	line-height: 1.6;
}


/* ==========================================================================
   ABOUT US — "What Your Campaign Receives"
   Heading (#campaign-receives-title) + intro (#campaign-receives-text)
   built in Elementor + [campaign-receive-list] shortcode (3-per-row dot +
   title cards, aiob_get_campaign_receive() lines). A short final row (7
   items = 2 full rows + 1) naturally stays left-aligned via CSS grid, no
   special-casing needed.
   ========================================================================== */
#campaign-receives-section {
	padding: 100px;
	background-color: #eaecf5;
}

#campaign-receives-title {
	margin: 0 0 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
	text-align: center;
}

#campaign-receives-text {
	max-width: 700px;
	margin: 0 auto 60px;
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	line-height: 23px;
	font-weight: 400;
	color: #000000;
	text-align: center;
}

/* flex + flex-basis (not CSS Grid) so a partial last row (e.g. a single
   leftover card) centers itself via justify-content instead of sticking to
   the left — Grid alone can't center just the items in an incomplete row. */
.campaign-receive-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.campaign-receive-item {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 calc((100% - 48px) / 3);
	max-width: calc((100% - 48px) / 3);
	box-sizing: border-box;
	padding: 28px 32px;
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.campaign-receive-item__dot {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #dd141a;
}

.campaign-receive-item__title {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	line-height: 31px;
	font-weight: 400;
	color: #000000;
}


/* ==========================================================================
   ABOUT US — "Interested in appearing on AI on the Ballot?"
   Reuses #discuss-participation-section/left/right verbatim from the
   homepage's "Discuss Participation" CF7 form section — no distinguishing
   class was added this time (unlike "About Us Join Campaign"), so the
   container layout/padding/colors below (grid, photo column, light-gray
   box) already apply automatically; only the content-specific rules below
   are new. The <h2>/description <p> have no id in the markup either, so
   structural selectors are used (#discuss-participation-right h2 / h2 + p)
   — add id="get-started-title" if you want to target the heading directly
   later, the structural selector keeps working either way. No spec was
   given for the description paragraph, so it reuses the site's standard
   body-copy treatment (Poppins 16px/300, matching "Who We Are" etc.).
   ========================================================================== */
#get-started-text {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: #dd141a;
}

#discuss-participation-right h2,
#get-started-title {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 18px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

/* Short red divider under the title */
#discuss-participation-right h2::after,
#get-started-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #dd141a;
}

#discuss-participation-right h2 + p {
	margin: 0 0 28px;
	max-width: 100%;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #000000;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.contact-us-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-us-btn .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px 42px !important;
	border: 0 !important;
	border-radius: 25px !important;
	background-color: #dd141a !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-us-btn .elementor-button-text {
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 20px !important;
	line-height: 24px !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: #ffffff !important;
}

.contact-us-btn .elementor-button:hover,
.contact-us-btn .elementor-button:focus {
	background-color: #b8100f !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(221, 20, 26, 0.35);
}

/* Closing bottom breathing room for the About Us page specifically —
   scoped via WordPress's own body.page-id-19 class (page ID 19 = About
   Us) rather than an Elementor class, since #discuss-participation-section
   is shared verbatim with the homepage's CF7 form section and shouldn't
   get this extra spacing there too. */
body.page-id-19 #discuss-participation-section {
	padding-bottom: 130px !important;
}


/* ==========================================================================
   TRACKER PAGE — legal/note copy blocks
   Two sibling containers sharing the same .tracker-content-desc class, with
   no id on either the heading or any paragraph — styled entirely through
   that shared class + structural selectors, which cleanly covers both
   blocks (the plain-paragraph block and the heading+text-editor block)
   without needing to distinguish between them.
   ========================================================================== */
.tracker-content-desc {
	padding: 100px 100px 50px !important;
	margin-bottom: 48px;
}

.tracker-content-desc:last-of-type {
	margin-bottom: 80px;
	padding-top: 0 !important;
}

.tracker-content-desc p {
	margin: 0;
	margin-bottom: 20px !important;
	max-width: 100%;
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	line-height: 31px;
	font-weight: 400;
	color: #000000;
	overflow-wrap: break-word;
}

.tracker-content-desc p:last-child {
	margin-bottom: 0;
}

.tracker-content-desc h2 {
	position: relative;
	margin: 0 0 24px !important;
	padding-bottom: 18px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

/* Short red divider under the heading */
.tracker-content-desc h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #dd141a;
}


/* ==========================================================================
   Full-width tracker modal (footer.php + assets/js/custom.js)
   Opened by clicking .view-condidate-tracker.
   ========================================================================== */
.aiob-tracker-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1200;
}

.aiob-tracker-modal.is-open {
	display: block;
}

.aiob-tracker-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.aiob-tracker-modal__panel {
	position: absolute;
	top: 40px;
	left: 40px;
	right: 40px;
	bottom: 40px;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.aiob-tracker-modal__close {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 1;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background-color: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	font-size: 26px;
	line-height: 1;
	color: #000000;
	cursor: pointer;
}

.aiob-tracker-modal__close:hover,
.aiob-tracker-modal__close:focus {
	background-color: #eaecf5;
}

.aiob-tracker-modal__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Lock page scroll while the modal is open */
body.aiob-tracker-modal-open {
	overflow: hidden;
}


/* ==========================================================================
   EPISODES PAGE — "The Conversations" hero
   Built in Elementor. The photo + navy overlay is applied via Elementor's
   own Background Image + Background Overlay controls on #episode-hero-section
   (same pattern as #why-participate-section) — background-color below is
   just the fallback shown before/without an image. #episode-hero-text
   (the "20 episodes..." subtitle) isn't in the markup yet — this is styled
   ahead of time so it's ready the moment that paragraph is added.
   ========================================================================== */
#episode-hero-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 450px;
	padding: 100px;
	box-sizing: border-box;
	background-color: #dd141a;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
}

#episode-hero-heading {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 54px;
	line-height: 65px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}

/* Short red divider under the heading (the given "border: 2px solid
   #dd141a" spec matches the short line seen in the reference image, not a
   box border around the whole heading — same pattern used everywhere else
   in this file). */
#episode-hero-heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 80px;
	height: 0;
	transform: translateX(-50%);
	border-top: 2px solid #dd141a;
}

#episode-hero-text {
	margin: 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}

/* Elementor-added Container wrapping [episode-listing-filters-with-pagination]
   (CSS ID set in the editor's Advanced tab) — Elementor gives its own
   containers default padding, overriding that here. */
#episode-listing-filter {
	padding: 0 !important;
}


/* ==========================================================================
   PRESS CENTER PAGE — hero section
   Built in Elementor. The navy-to-red gradient + capitol-building watermark
   is applied via Elementor's own Background controls on #press-hero-section
   itself (same pattern as #episode-hero-section) — background-color below
   is just the fallback shown before/without it. The spokesperson photo is a
   SEPARATE Background Image set directly on #press-hero-right-section (an
   otherwise-empty Elementor div), so that div needs its own explicit
   background sizing/position below to render correctly. The section has no
   horizontal padding (full-bleed, edge-to-edge gradient/photo); the text
   inset lives on #press-hero-left-section instead. Right section is hidden
   on mobile where the layout stacks to a single column.
   ========================================================================== */
#press-hero-section {
	display: flex;
	align-items: stretch;
	min-height: 640px;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #16215c;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#press-hero-left-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 50%;
	min-width: 320px;
	box-sizing: border-box;
	padding: 60px 60px 60px 100px;
}

#press-hero-right-section {
	flex: 0 0 45%;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: auto;
}

#press-hero-section-title {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 54px;
	line-height: 65px;
	font-weight: 400;
	color: #ffffff;
}

/* Short red divider under the heading (the given "border: 2px solid
   #dd141a" spec matches the short line seen in the reference image, not a
   box border around the whole heading — same pattern used everywhere else
   in this file). */
#press-hero-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #dd141a;
}

#press-hero-section-text {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 25px;
	line-height: 32px;
	font-weight: 400;
	color: #ffffff;
}


/* ==========================================================================
   PRESS CENTER PAGE — press listing section
   Built in Elementor.
   ========================================================================== */
#press-listing-section {
	padding: 80px 100px 100px;
}

#press-listing-section-heading {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
	text-align: center;
}

/* [press-listing-shortcode] — category tab bar.
   Each tab is an equal-width column (flex:1 on the <li>), not sized to its
   own text — this is what makes the active tab's red underline read as a
   wide block spanning the whole column instead of a thin line hugging just
   the word. The 1px black line is a full-width border-bottom on the nav
   itself (it runs continuously under every column); each tab link then
   draws its own full-width border-bottom (transparent by default, red when
   active) pulled up 1px via negative margin so it sits exactly on top of
   that line instead of adding a second line below it. */
.press-tabs__nav {
	display: flex;
	width: 100%;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	border-bottom: 1px solid #000000;
}

.press-tabs__item {
	flex: 1 1 0;
}

.press-tabs__link {
	display: block;
	width: 100%;
	margin: 0 0 -1px;
	padding: 0 0 20px;
	border: none;
	border-bottom: 3px solid transparent;
	background: none;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	line-height: 41px;
	font-weight: 500;
	color: #112259;
	text-align: center;
	transition: border-color 0.3s ease;
}

.press-tabs__link.is-active {
	border-bottom-color: #dd141a;
}

.press-tabs__listing {
	margin-top: 48px;
	transition: opacity 0.3s ease;
}

/* ==========================================================================
   [press-listing-shortcode] — default category tab (Blog / any category
   that isn't News or Media Releases). 2 per row, 6 per page, AJAX "Load
   More" (aiob_render_default_category_layout() in inc/shortcodes.php).
   Flexbox (not CSS Grid) so an incomplete last row centers/left-aligns
   predictably, same technique used elsewhere in this file.
   ========================================================================== */
.default-post-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.default-post-card {
	display: block;
	flex: 1 1 calc((100% - 32px) / 2);
	max-width: calc((100% - 32px) / 2);
	text-decoration: none !important;
}

.default-post-card__media {
	margin-bottom: 16px;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background-color: #d9d9d9;
}

.default-post-card__media img,
.default-post-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.default-post-card:hover .default-post-card__media img,
.default-post-card:focus .default-post-card__media img {
	transform: scale(1.05);
}

.default-post-card__title {
	position: relative;
	margin: 0 0 14px;
	padding-bottom: 10px;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: #000000;
	transition: color 0.3s ease;
}

.default-post-card:hover .default-post-card__title,
.default-post-card:focus .default-post-card__title {
	color: #dd141a;
}

/* Short underline below the title (same "::after" pattern used everywhere
   else in this file), 2px navy per spec. */
.default-post-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 2px solid #1b2455;
}

.default-post-card__excerpt {
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: #000000;
}

.default-post-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	color: #dd141a;
	text-align: center;
	text-transform: uppercase;
}

.default-post-card__arrow {
	display: inline-block;
	line-height: 1;
	transition: transform 0.3s ease;
}

/* Arrow drawn with CSS `content` (a plain Unicode arrow, not an icon-font
   glyph or literal character in the markup), same technique used
   throughout this file. */
.default-post-card__arrow::after {
	content: "\2192";
}

.default-post-card:hover .default-post-card__arrow,
.default-post-card:focus .default-post-card__arrow {
	transform: translateX(4px);
}


/* ==========================================================================
   [press-listing-shortcode] — "News" category tab
   Only the category whose slug is "news" gets this two-column-listing +
   sidebar layout (aiob_press_is_news_category() in inc/shortcodes.php);
   Media Releases reuses the same layout (see further below); every other
   category (Blog, etc.) uses .default-post-grid above instead.
   ========================================================================== */
.news-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.news-layout__main {
	flex: 1 1 auto;
	min-width: 0;
}

.news-layout__sidebar {
	flex: 0 0 380px;
	max-width: 380px;
}

/* Listing cards: featured image as the card's own background (not an
   <img>), title + date pinned to the bottom over a dark gradient overlay —
   matches .featured-guest-card's "photo-as-background" technique but with
   text laid directly on top instead of a separate white body. */
.news-post-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.news-post-card {
	position: relative;
	display: block;
	flex: 1 1 calc((100% - 24px) / 2);
	max-width: calc((100% - 24px) / 2);
	aspect-ratio: 5 / 5;
	border-radius: 10px;
	overflow: hidden;
	background-color: #d9d9d9;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-decoration: none !important;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.news-post-card:hover,
.news-post-card:focus {
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
	transform: translateY(-4px);
}

.news-post-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	background-image: linear-gradient(180deg, rgba(17, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9999999999999999) 100%);
}

.news-post-card__title {
	margin: 0 0 6px;
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	line-height: 29px;
	font-weight: 600;
	color: #ffffff;
}

.news-post-card__date {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 600;
	color: #dd141a;
}

/* Sidebar — search widget */
.news-search-widget {
	margin-bottom: 32px;
	padding: 28px 24px;
	border-radius: 12px;
	background-color: #eaecf5;
}

.news-search-widget__heading {
	margin: 0 0 16px;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	line-height: 41px;
	font-weight: 500;
	color: #000000;
}

.news-search-widget__form {
	display: flex;
	align-items: center;
	border-radius: 8px;
	background-color: #ffffff;
	border: 1px solid #ababab;
	overflow: hidden;
}

.news-search-widget__form input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: none;
	background: none;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: #000000;
}

.news-search-widget__form input[type="text"]::placeholder {
	color: #858080;
}

.news-search-widget__submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 18px;
	color: #dd141a;
}

/* Sidebar — "Latest News" widget */
.news-latest-widget {
	padding: 28px 24px;
	border-radius: 12px;
	background-color: #eaecf5;
}

.news-latest-widget__heading {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 16px;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	line-height: 41px;
	font-weight: 500;
	color: #000000;
}

/* Short red divider under the heading (same "::after" underline pattern
   used everywhere else in this file), 4px thick per spec. */
.news-latest-widget__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80px;
	height: 0;
	border-top: 4px solid #dd141a;
}

.news-latest-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.news-latest-widget__item {
	padding: 16px 0;
	border-bottom: 1px solid #e2e2e2;
}

.news-latest-widget__item:first-child {
	padding-top: 0;
}

.news-latest-widget__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.news-latest-widget__link {
	display: flex;
	align-items: center;
	gap: 15px;
	text-decoration: none !important;
}

.news-latest-widget__media {
	flex: 0 0 auto;
	width: 70px;
	height: 60px;
	border-radius: 6px;
	background-color: #d9d9d9;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: opacity 0.3s ease;
}

.news-latest-widget__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.news-latest-widget__date {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #858080;
}

.news-latest-widget__title {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: #160000;
	transition: color 0.3s ease;
}

.news-latest-widget__link:hover .news-latest-widget__media,
.news-latest-widget__link:focus .news-latest-widget__media {
	opacity: 0.8;
}

.news-latest-widget__link:hover .news-latest-widget__title,
.news-latest-widget__link:focus .news-latest-widget__title {
	color: #dd141a;
}


/* [press-listing-shortcode] — "Media Releases" category tab.
   Renders inside the same #aiob-news-listing-grid/.news-post-grid
   container as the News tab (aiob_render_news_category_layout() in
   inc/shortcodes.php); flex-basis:100% here is what turns that flex-wrap
   grid into a single, full-width card per row. */
.media-release-card {
	display: block;
	flex: 1 1 100%;
	max-width: 100%;
	padding-bottom: 24px;
	border-bottom: 1px solid #c1bcbc;
	text-decoration: none !important;
}

.media-release-card:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.media-release-card__media {
	margin-bottom: 16px;
	aspect-ratio: 2 / 1;
	border-radius: 10px;
	overflow: hidden;
	background-color: #d9d9d9;
}

.media-release-card__media img,
.media-release-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.media-release-card:hover .media-release-card__media img,
.media-release-card:focus .media-release-card__media img {
	transform: scale(1.05);
}

.media-release-card__title {
	margin: 0 0 8px;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: #000000;
	transition: color 0.3s ease;
}

.media-release-card:hover .media-release-card__title,
.media-release-card:focus .media-release-card__title {
	color: #dd141a;
}

.media-release-card__excerpt {
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	color: #000000;
}

.media-release-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	color: #dd141a;
	text-align: center;
	text-transform: uppercase;
}

.media-release-card__arrow {
	display: inline-block;
	line-height: 1;
	transition: transform 0.3s ease;
}

/* Arrow drawn with CSS `content` (a plain Unicode arrow, not an icon-font
   glyph or literal character in the markup) — same technique used for the
   "Load More" / hero button arrows elsewhere in this file. */
.media-release-card__arrow::after {
	content: "\2192";
}

.media-release-card:hover .media-release-card__arrow,
.media-release-card:focus .media-release-card__arrow {
	transform: translateX(4px);
}


/* ==========================================================================
   SINGLE POST — News / Media Releases / Blog article detail page
   (template-parts/content-single.php). Full-width, no sidebar/comments/
   prev-next nav: a full-bleed hero image with title overlaid, a social
   share row, then the article content in a comfortable reading column.
   ========================================================================== */
.single-post {
	display: block;
}

.single-post__hero {
	position: relative;
	width: 100%;
	min-height: 560px;
	background-color: #16215c;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.single-post__hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
}

.single-post__hero-inner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 60px 100px 50px;
	box-sizing: border-box;
}

.single-post__category {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 16px;
	border-radius: 20px;
	background-color: #dd141a;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.single-post__title {
	margin: 0 0 14px;
	font-family: "DM Sans", sans-serif;
	font-size: 42px;
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
}

.single-post__title--dark {
	color: #000000;
}

.single-post__date {
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

.single-post__date--dark {
	color: #666666;
}

/* Fallback header shown only when the post has no featured image (so
   there's still a title/date/category even without a hero). */
.single-post__header {
	max-width: 100%;
	margin: 0 auto;
	padding: 60px 100px 0;
	box-sizing: border-box;
}

.single-post__body {
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 100px 120px;
	box-sizing: border-box;
}

/* Social share row */
.single-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e2e2e2;
}

.single-post__share-label {
	margin-right: 4px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #000000;
}

.single-post__share-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
	color: #1b2455;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.single-post__share-btn:hover,
.single-post__share-btn:focus {
	background-color: #dd141a;
	border-color: #dd141a;
	color: #ffffff;
	transform: translateY(-2px);
}

.single-post__share-btn--copy.is-copied {
	background-color: #1b2455;
	border-color: #1b2455;
	color: #ffffff;
}

.single-post__share-copied-label {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	border-radius: 4px;
	background-color: #1b2455;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.single-post__share-btn--copy.is-copied .single-post__share-copied-label {
	opacity: 1;
}

/* Article body typography */
.single-post__content {
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 1.8;
	font-weight: 300;
	color: #222222;
}

.single-post__content > *:first-child {
	margin-top: 0;
}

.single-post__content p {
	margin: 0 0 24px;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4,
.single-post__content h5,
.single-post__content h6 {
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	color: #000000;
}

.single-post__content h2 {
	margin: 48px 0 20px;
	font-size: 32px;
	line-height: 1.3;
}

.single-post__content h3 {
	margin: 40px 0 16px;
	font-size: 26px;
	line-height: 1.35;
}

.single-post__content h4,
.single-post__content h5,
.single-post__content h6 {
	margin: 32px 0 14px;
	font-size: 20px;
	line-height: 1.4;
}

.single-post__content a {
	color: #dd141a;
	text-decoration: underline;
}

.single-post__content a:hover,
.single-post__content a:focus {
	color: #b8100f;
}

.single-post__content ul,
.single-post__content ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.single-post__content li {
	margin-bottom: 10px;
}

.single-post__content blockquote {
	margin: 32px 0;
	padding: 20px 28px;
	border-left: 4px solid #dd141a;
	background-color: #f7f7fa;
	font-style: italic;
	color: #333333;
}

.single-post__content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.single-post__content figure {
	margin: 24px 0;
}

.single-post__content figcaption {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #777777;
	text-align: center;
}

.single-post__content table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
}

.single-post__content table th,
.single-post__content table td {
	padding: 10px 14px;
	border: 1px solid #e2e2e2;
	text-align: left;
}

.single-post__content .page-links {
	margin-top: 32px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #000000;
}


/* ==========================================================================
   SINGLE POST — Blog article detail page (or any category that isn't News
   or Media Releases), template-parts/content-single-blog.php. Title-first,
   no hero overlay: title, author/date + share row, a plain contained
   featured image, article content, then a "Participate" CTA banner.
   ========================================================================== */
.single-post-blog__body {
	max-width: 100%;
	margin: 0 auto;
	padding: 60px 100px 120px;
	box-sizing: border-box;
}

.single-post-blog__title {
	margin: 0 0 20px;
	font-family: "Poppins", sans-serif;
	font-size: 48px;
	line-height: 67px;
	font-weight: 600;
	color: #160000;
}

.single-post-blog__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
}

.single-post-blog__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.single-post-blog__avatar {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.single-post-blog__byline {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	color: #747787;
}

.single-post-blog__byline-date {
	color: #dd141a;
}

.single-post-blog__share {
	display: flex;
	align-items: center;
	gap: 14px;
}

.single-post-blog__share-label {
	margin-right: 4px;
	font-family: "Poppins", sans-serif;
	font-size: 22px;
	line-height: 34px;
	font-weight: 300;
	color: #000000;
	text-align: center;
}

.single-post-blog__share-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
	color: #1b2455;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.single-post-blog__share-btn:hover,
.single-post-blog__share-btn:focus {
	background-color: #dd141a;
	border-color: #dd141a;
	color: #ffffff;
	transform: translateY(-2px);
}

/* Featured image — a plain contained <img>, not a background/overlay
   (that's the News/Media Releases hero variant in style.css above). */
.single-post-blog__media {
	margin-bottom: 40px;
	border-radius: 10px;
	overflow: hidden;
}

.single-post-blog__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Article body typography */
.single-post-blog__content {
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: #000000;
}

.single-post-blog__content > *:first-child {
	margin-top: 0;
}

.single-post-blog__content p {
	margin: 0 0 24px;
}

.single-post-blog__content h1,
.single-post-blog__content h2,
.single-post-blog__content h3,
.single-post-blog__content h4,
.single-post-blog__content h5,
.single-post-blog__content h6 {
	margin: 40px 0 20px;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	line-height: 1.3;
	font-weight: 600;
	color: #000000;
}

.single-post-blog__content a {
	color: #dd141a;
	text-decoration: underline;
}

.single-post-blog__content a:hover,
.single-post-blog__content a:focus {
	color: #b8100f;
}

.single-post-blog__content ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.single-post-blog__content ol li {
	margin-bottom: 10px;
}

/* Filled red square bullets instead of the browser default. */
.single-post-blog__content ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.single-post-blog__content ul li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 26px;
}

.single-post-blog__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 10px;
	height: 10px;
	background-color: #db2e2e;
}

.single-post-blog__content blockquote {
	margin: 32px 0;
	padding: 20px 28px;
	border-left: 4px solid #dd141a;
	background-color: #f7f7fa;
	font-style: italic;
	color: #333333;
}

.single-post-blog__content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.single-post-blog__content figure {
	margin: 24px 0;
}

.single-post-blog__content figcaption {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #777777;
	text-align: center;
}

.single-post-blog__content table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
}

.single-post-blog__content table th,
.single-post-blog__content table td {
	padding: 10px 14px;
	border: 1px solid #e2e2e2;
	text-align: left;
}

.single-post-blog__content .page-links {
	margin-top: 32px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #000000;
}

/* "Participate" CTA banner — reuses #join-campaign-section /
   #join-campaign-section-title / .participate-btn verbatim from the
   homepage's "Want your campaign's position on the record?" strip (see
   that block earlier in this file) so it's pixel-identical; this modifier
   just rounds the corners and adds spacing since it sits inset inside the
   article column here instead of running edge-to-edge like the homepage. */
#join-campaign-section.single-post-blog__cta {
	margin-top: 48px;
	border-radius: 12px;
}


/* ==========================================================================
   404 PAGE (404.php) — no search form, just the message + a way back.
   ========================================================================== */
.error-404-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 100px 20px;
	text-align: center;
}

.error-404-page__inner {
	max-width: 620px;
}

.error-404-page__code {
	display: block;
	margin-bottom: 8px;
	font-family: "DM Sans", sans-serif;
	font-size: 130px;
	line-height: 1;
	font-weight: 700;
	color: #dd141a;
}

.error-404-page__title {
	margin: 0 0 16px;
	font-family: "DM Sans", sans-serif;
	font-size: 34px;
	line-height: 1.3;
	font-weight: 700;
	color: #1b2455;
}

.error-404-page__desc {
	margin: 0 0 36px;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 300;
	color: #555555;
}

.error-404-page__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 40px;
	border-radius: 25px;
	background-color: #dd141a;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none !important;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.error-404-page__btn:hover,
.error-404-page__btn:focus {
	background-color: #b8100f;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(221, 20, 26, 0.35);
}


/* ==========================================================================
   LEGAL / POLICY PAGE (page-templates/legal.php) — Privacy Policy, Terms
   of Use, etc. Assigned via Page Attributes -> Template.
   ========================================================================== */
/* Full-width gradient band (not a boxed/centered column) — the site's
   established "soft lavender tint" (#eaecf5, used for the guest listing,
   episode listing, etc.) fading to white, with the short red divider
   under the title used everywhere else on this site. */
.legal-page__header {
	width: 100%;
	box-sizing: border-box;
	padding: 90px 100px 50px;
	background: linear-gradient(180deg, #eaecf5 0%, #ffffff 100%);
	text-align: center;
}

.legal-page__title {
	position: relative;
	display: block;
	margin: 0 0 26px;
	padding-bottom: 26px;
	font-family: "DM Sans", sans-serif;
	font-size: 52px;
	line-height: 1.2;
	font-weight: 700;
	color: #1b2455;
}

.legal-page__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 80px;
	height: 0;
	transform: translateX(-50%);
	border-top: 3px solid #dd141a;
}

.legal-page__updated {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 7px 20px;
	border: 1px solid #dd141a;
	border-radius: 20px;
	background-color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #dd141a;
}

/* Article body typography — full width with generous padding, not a
   boxed/centered column. */
.legal-page__content {
	width: 100%;
	box-sizing: border-box;
	padding: 60px 100px 120px;
	background-color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 1.8;
	font-weight: 300;
	color: #222222;
}

.legal-page__content > *:first-child {
	margin-top: 0;
}

.legal-page__content p {
	margin: 0 0 20px;
}

.legal-page__content p b {
	font-weight: 600;
}

.legal-page__content h2,
.legal-page__content h3,
.legal-page__content h4 {
	position: relative;
	margin: 48px 0 22px;
	padding: 10px 0 10px 24px;
	border-left: 4px solid #dd141a;
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	color: #1b2455;
}

.legal-page__content h2 {
	font-size: 28px;
	line-height: 1.35;
}

.legal-page__content h3 {
	font-size: 23px;
	line-height: 1.4;
}

.legal-page__content h4 {
	font-size: 19px;
	line-height: 1.4;
	border-left-width: 3px;
}

.legal-page__content a {
	color: #dd141a;
	text-decoration: underline;
}

.legal-page__content a:hover,
.legal-page__content a:focus {
	color: #b8100f;
}

.legal-page__content ol {
	margin: 0 0 20px;
	padding-left: 28px;
	list-style: decimal;
}

.legal-page__content li {
	margin-bottom: 8px;
}

.legal-page__content li > ul,
.legal-page__content li > ol {
	margin-top: 8px;
	margin-bottom: 0;
}

/* Filled red square bullets — same technique used on the News/Media
   Releases/Blog single-post pages (.single-post-blog__content ul li). */
.legal-page__content ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.legal-page__content ul li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 26px;
}

.legal-page__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	background-color: #db2e2e;
}

/* "Clause" callout box — use the block editor's Quote block for these
   (matches the reference: italic, red left border, deep-red text), styled
   as a soft card so it stands out from the surrounding body copy. */
.legal-page__content blockquote {
	margin: 36px 0;
	padding: 22px 28px;
	border-left: 4px solid #dd141a;
	border-radius: 0 10px 10px 0;
	background-color: #fbf3f3;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	font-style: italic;
	font-size: 16px;
	line-height: 1.7;
	color: #8b1a1a;
}

.legal-page__content blockquote p {
	margin: 0;
}

.legal-page__content blockquote p + p {
	margin-top: 12px;
}

.legal-page__content blockquote strong {
	color: #6e1313;
}

.legal-page__content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.legal-page__content figure {
	margin: 24px 0;
}

.legal-page__content table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
}

.legal-page__content table th,
.legal-page__content table td {
	padding: 10px 14px;
	border: 1px solid #e2e2e2;
	text-align: left;
}

.legal-page__content hr {
	margin: 40px 0;
	border: none;
	border-top: 1px solid #e2e2e2;
}

.legal-page__content .page-links {
	margin-top: 32px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #000000;
}


/* ==========================================================================
   SINGLE EPISODE (single-episode.php / template-parts/content-single-episode.php)
   Full width, no sidebar/comments/prev-next nav: episode number + title,
   date + share row, featured image, "Listen & Watch on" platform links,
   content, "Participate" CTA, then a "More Episodes" slider.
   ========================================================================== */
.episode-single__body {
	width: 100%;
	box-sizing: border-box;
	padding: 80px 100px 120px;
}

.episode-single__header {
	max-width: 100%;
	margin: 0 auto 40px;
	text-align: center;
}

.episode-single__number {
	margin: 0 0 8px;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	line-height: 51px;
	font-weight: 600;
	color: #dd141a;
	text-align: center;
}

.episode-single__title {
	margin: 0 0 28px;
	font-family: "Poppins", sans-serif;
	font-size: 48px;
	line-height: 1.2;
	font-weight: 600;
	color: #000000;
	text-align: center;
}

.episode-single__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.episode-single__date {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #db2e2e;
}

.episode-single__share {
	display: flex;
	align-items: center;
	gap: 14px;
}

.episode-single__share-label {
	margin-right: 4px;
	font-family: "Poppins", sans-serif;
	font-size: 22px;
	line-height: 34px;
	font-weight: 300;
	color: #000000;
	text-align: center;
}

.episode-single__share-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
	color: #1b2455;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.episode-single__share-btn:hover,
.episode-single__share-btn:focus {
	background-color: #dd141a;
	border-color: #dd141a;
	color: #ffffff;
	transform: translateY(-2px);
}

/* Featured image — a plain contained <img>, matching the News/Media
   Releases/Blog single-post pages, not a hero/overlay treatment. */
.episode-single__media {
	position: relative;
	margin-bottom: 48px;
	border-radius: 10px;
	overflow: hidden;
}

.episode-single__media img {
	display: block;
	width: 100%;
	height: auto;
}

.episode-single__media--playable {
	cursor: pointer;
}

/* Click-to-play overlay (assets/js/custom.js swaps the image + this icon
   for a live YouTube iframe on click) — same red-circle-behind-the-icon
   technique as .episode-card__play, just sized up for the larger media. */
.episode-single__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	pointer-events: none;
}

.episode-single__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background-color: #dd141a;
	z-index: 0;
}

.episode-single__play img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.episode-single__media iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* "Listen & Watch on" platform links */
.episode-single__watch {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 48px;
}

.episode-single__watch-heading {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	letter-spacing: 2px;
	line-height: 37px;
	font-weight: 600;
	color: #000000;
}

.episode-single__watch-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.episode-single__watch-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 30px;
	border-radius: 25px;
	background-color: #022b82;
	text-decoration: none !important;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.episode-single__watch-btn i {
	font-size: 20px;
	color: #ffffff;
}

.episode-single__watch-btn span {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #ffffff;
}

.episode-single__watch-btn:hover,
.episode-single__watch-btn:focus {
	background-color: #011f61;
	transform: translateY(-2px);
}

/* Article body typography */
.episode-single__content {
	margin-bottom: 48px;
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 300;
	color: #000000;
}

.episode-single__content > *:first-child {
	margin-top: 0;
}

.episode-single__content p {
	margin: 0 0 20px;
}

.episode-single__content h1,
.episode-single__content h2,
.episode-single__content h3,
.episode-single__content h4,
.episode-single__content h5,
.episode-single__content h6 {
	margin: 40px 0 18px;
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	line-height: 1.3;
	font-weight: 600;
	color: #000000;
}

.episode-single__content a {
	color: #dd141a;
	text-decoration: underline;
}

.episode-single__content a:hover,
.episode-single__content a:focus {
	color: #b8100f;
}

.episode-single__content ol {
	margin: 0 0 20px;
	padding-left: 28px;
	list-style: decimal;
}

.episode-single__content li {
	margin-bottom: 8px;
}

/* Filled red square bullets — same technique used on the News/Media
   Releases/Blog single-post pages and the legal page. */
.episode-single__content ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.episode-single__content ul li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 26px;
}

.episode-single__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	background-color: #db2e2e;
}

.episode-single__content blockquote {
	margin: 32px 0;
	padding: 20px 26px;
	border-left: 4px solid #dd141a;
	background-color: #f7f7fa;
	font-style: italic;
	color: #333333;
}

.episode-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.episode-single__content figure {
	margin: 24px 0;
}

.episode-single__content table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
}

.episode-single__content table th,
.episode-single__content table td {
	padding: 10px 14px;
	border: 1px solid #e2e2e2;
	text-align: left;
}

.episode-single__content .page-links {
	margin-top: 32px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #000000;
}

/* "Participate" CTA banner — reuses #join-campaign-section /
   #join-campaign-section-title / .participate-btn verbatim (see the
   homepage's "Want your campaign's position on the record?" strip earlier
   in this file), same pattern as the Blog single-post page's CTA. */
#join-campaign-section.episode-single__cta {
	margin-bottom: 60px;
	border-radius: 12px;
}

/* "More Episodes" slider */
.episode-single__more-heading {
	margin: 0 0 40px;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 58px;
	font-weight: 400;
	color: #000000;
}

/* Slick gutter technique: negative margin on the viewport compensates for
   the horizontal margin added to each slide below — same technique used
   by .featured-guest-slider. */
.more-episodes-slider .slick-list {
	margin: 0 -16px;
}

.more-episodes-slider .slick-track {
	display: flex !important;
}

.more-episodes-slider .slick-slide {
	height: auto;
}

.more-episodes-slider__item {
	margin: 0 16px;
	height: 100%;
}

/* Dots — identical styling to .featured-guest-slider .slick-dots on the
   homepage. */
.more-episodes-slider .slick-dots {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	list-style: none;
	gap: 8px;
	margin: 34px auto 0;
	padding: 8px 14px;
	border-radius: 20px;
	background-color: #aeadad;
}

.more-episodes-slider .slick-dots li {
	width: auto;
	height: auto;
	margin: 0;
	line-height: 1;
}

.more-episodes-slider .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #191e45;
	text-indent: -9999px;
	overflow: hidden;
	transition: width 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
}

.more-episodes-slider .slick-dots li button:before {
	content: none;
}

.more-episodes-slider .slick-dots li.slick-active button {
	width: 20px;
	border-radius: 4px;
	background-color: #ffffff;
}