/* =============================================================================
   brand.css — LLB Student Adda brand components + the hand-coded header chrome.
   Ported from the prototype :root/components (01-RESEARCH "Brand CSS variables")
   and styled to 01-UI-SPEC "Header (sticky, hand-coded header.php)".
   Enqueued by functions.php after style.css. NO BLUE anywhere (FND-02).
   ============================================================================= */

/* ---- Layout helpers --------------------------------------------------------- */
.container-custom {
	margin: 0 auto;
	max-width: 80rem;
	padding: 0 1rem;
}
@media (min-width: 640px) {
	.container-custom { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
	.container-custom { padding: 0 2rem; }
}

/* ---- Buttons ---------------------------------------------------------------- */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(var(--radius) - 2px);
	background: var(--primary);
	color: var(--primary-foreground);
	font-weight: 500;
	transition: background-color .15s ease;
	padding: .5rem 1rem;
}
.btn-primary:hover { background: var(--primary-hover); color: var(--primary-foreground); }

.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(var(--radius) - 2px);
	background: var(--secondary);
	color: var(--secondary-foreground);
	font-weight: 500;
	transition: background-color .15s ease;
	padding: .5rem 1rem;
}
.btn-secondary:hover { background: var(--secondary-hover); color: var(--secondary-foreground); }

/* ---- Cards (crimson-tinted shadows) ---------------------------------------- */
.card-shadow {
	box-shadow: 0 4px 6px -1px rgba(181, 38, 30, .08), 0 2px 4px -1px rgba(181, 38, 30, .04);
}
.card-shadow-hover { transition: all .3s ease; }
.card-shadow-hover:hover {
	box-shadow: 0 20px 25px -5px rgba(181, 38, 30, .12), 0 10px 10px -5px rgba(181, 38, 30, .06);
	transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
	.card-shadow-hover:hover { transform: none; }
}

/* =============================================================================
   Sticky brand header (01-UI-SPEC "Header"): crimson bg, white text, sticky,
   gold logo badge, wordmark + tagline, nav, WhatsApp affordance.
   ============================================================================= */
.llb-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--primary);
	color: #FFFFFF;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	border-bottom: 1px solid var(--primary-hover);
}

.llb-site-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 64px;
}

/* Brand cluster (badge + wordmark + tagline) */
.llb-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: #FFFFFF;
}
.llb-brand:hover { color: #FFFFFF; }

.llb-brand__badge {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 12px;                 /* rounded-xl */
	background: var(--secondary);        /* gold badge */
	color: var(--secondary-foreground);  /* dark mark */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.llb-brand__badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.llb-brand__badge svg { width: 24px; height: 24px; }

.llb-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.llb-brand__name { font-weight: 700; font-size: 1.05rem; }
.llb-brand__tagline { font-size: .72rem; color: var(--secondary); }  /* gold accent */

@media (max-width: 639px) {
	.llb-brand__name,
	.llb-brand__tagline { display: none; }  /* wordmark/tagline hidden < sm */
}

/* Primary navigation */
.llb-nav { margin-left: auto; }
.llb-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
}
.llb-nav a {
	color: #FFFFFF;
	padding: .5rem 1rem;
	border-radius: .5rem;
	font-size: .875rem;
	font-weight: 500;
	transition: background-color .15s ease, color .15s ease;
}
.llb-nav a:hover { background: rgba(255, 255, 255, .08); color: var(--secondary); }
.llb-nav .current-menu-item > a,
.llb-nav .current_page_item > a {
	background: rgba(255, 255, 255, .12);
	color: var(--secondary);
}

/* Hamburger toggle — hidden on desktop, shown < lg */
.llb-nav-toggle {
	display: none;
	margin-left: .25rem;
	background: transparent;
	border: 0;
	color: #FFFFFF;
	padding: .35rem;
	cursor: pointer;
	border-radius: .5rem;
	line-height: 0;
}
.llb-nav-toggle:hover { background: rgba(255, 255, 255, .08); }

@media (max-width: 1023px) {
	.llb-nav ul { display: none; }   /* desktop nav hidden; drawer takes over */
	.llb-nav-toggle { display: inline-flex; }
}

/* Mobile slide-down drawer (crimson), same menu as desktop */
.llb-mobile-drawer {
	background: var(--primary);
	border-top: 1px solid var(--primary-hover);
	max-height: 0;
	overflow: hidden;
	transition: max-height .2s ease;
}
.llb-mobile-drawer.is-open { max-height: 80vh; }
@media (prefers-reduced-motion: reduce) {
	.llb-mobile-drawer { transition: none; }
}
.llb-mobile-drawer .llb-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: .5rem 0;
}
.llb-mobile-drawer .llb-mobile-nav a {
	display: block;
	color: #FFFFFF;
	padding: .75rem 1.25rem;
	font-weight: 500;
}
.llb-mobile-drawer .llb-mobile-nav a:hover,
.llb-mobile-drawer .current-menu-item > a {
	background: rgba(255, 255, 255, .08);
	color: var(--secondary);
}
.llb-mobile-drawer__whatsapp {
	display: block;
	margin: .5rem 1.25rem 1rem;
	padding: .6rem 1rem;
	text-align: center;
	background: var(--secondary);
	color: var(--secondary-foreground);
	border-radius: 999px;
	font-weight: 600;
}
.llb-mobile-drawer__whatsapp:hover { background: var(--secondary-hover); color: var(--secondary-foreground); }
@media (min-width: 1024px) {
	.llb-mobile-drawer { display: none; }   /* drawer is mobile-only */
}

/* =============================================================================
   Announcement bar (01-UI-SPEC "Announcement bar") — gold strip, dark text,
   above the sticky header.
   ============================================================================= */
.llb-announce {
	background: var(--secondary);
	color: var(--secondary-foreground);
}
.llb-announce__text {
	margin: 0;
	padding: .5rem 0;
	text-align: center;
	font-size: .85rem;
	font-weight: 600;
}
.llb-announce__link {
	color: var(--secondary-foreground);
	text-decoration: underline;
}
.llb-announce__link:hover { color: var(--primary); }

/* WhatsApp affordance in the header */
.llb-header__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--secondary);
	color: var(--secondary-foreground);
	padding: .45rem .8rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	transition: background-color .15s ease;
}
.llb-header__whatsapp:hover { background: var(--secondary-hover); color: var(--secondary-foreground); }

/* =============================================================================
   4-column crimson footer (01-UI-SPEC "Footer").
   Columns stack 1 -> 2 -> 4 responsively.
   ============================================================================= */
.llb-site-footer {
	background: var(--primary);
	color: #FFFFFF;
	border-top: 1px solid var(--primary-hover);
}
.llb-site-footer a { color: var(--secondary); }
.llb-site-footer a:hover { color: var(--secondary-hover); }

.llb-footer-grid {
	display: grid;
	grid-template-columns: 1fr;            /* mobile: 1 column */
	gap: 2rem;
	padding: 3rem 0 2rem;
}
@media (min-width: 640px) {
	.llb-footer-grid { grid-template-columns: repeat(2, 1fr); }   /* 2 columns */
}
@media (min-width: 1024px) {
	.llb-footer-grid { grid-template-columns: repeat(4, 1fr); }   /* 4 columns */
}

.llb-footer-badge {
	margin-bottom: .75rem;
}
.llb-footer-wordmark {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
	color: #FFFFFF;
}
.llb-footer-tagline {
	margin: .5rem 0 0;
	font-size: .85rem;
	color: rgba(255, 255, 255, .82);
}

.llb-footer-heading {
	color: var(--secondary);               /* gold heading */
	font-size: .95rem;
	font-weight: 700;
	margin: 0 0 .75rem;
}

.llb-footer-menu,
.llb-footer-connect {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-size: .9rem;
}
.llb-footer-muted {
	margin: 0;
	font-size: .85rem;
	color: rgba(255, 255, 255, .82);
}

/* Bottom bar */
.llb-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--primary-hover);
	font-size: .82rem;
	color: rgba(255, 255, 255, .85);
}
.llb-footer-legal {
	display: flex;
	gap: 1rem;
}

/* =============================================================================
   Floating WhatsApp FAB (01-UI-SPEC "Floating WhatsApp FAB").
   ============================================================================= */
.llb-fab {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 50;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--secondary);          /* gold circle */
	color: var(--secondary-foreground);    /* dark icon */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
	transition: transform .15s ease, background-color .15s ease;
}
.llb-fab:hover {
	background: var(--secondary-hover);
	color: var(--secondary-foreground);
	transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
	.llb-fab:hover { transform: none; }
}

/* =============================================================================
   PHASE 2 — Content Library components (Plan 02-02).
   Single appended section (sole owner of brand.css this phase so Wave 3 slices
   never collide here). All surfaces: video/resource/news cards, modal, library
   filter, single-material PDF reader, Fluent Forms overrides.
   Tokens only (crimson/gold/off-white/neutral). ZERO blue values (FND-02).
   Styled to 02-UI-SPEC component specs; AA contrast; prefers-reduced-motion.
   ============================================================================= */

/* ---- Shared text helpers ---------------------------------------------------- */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Badges (gold subject / file-type / category) --------------------------- */
.llb-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: var(--secondary);          /* gold */
	color: var(--secondary-foreground);    /* dark text */
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	padding: .3rem .55rem;
	border-radius: 999px;
	letter-spacing: .01em;
}
/* A neutral, lower-emphasis chip for secondary meta (semester etc.) */
.llb-badge--muted {
	background: var(--background);
	color: var(--foreground);
	border: 1px solid var(--border);
	font-weight: 600;
}
/* Crimson tag variant (news category) */
.llb-badge--crimson {
	background: var(--primary);
	color: var(--primary-foreground);
}

/* ---- Card grids (responsive) ----------------------------------------------- */
.llb-card-grid {
	display: grid;
	grid-template-columns: 1fr;            /* mobile: 1 col */
	gap: 1.5rem;
	padding: 1.5rem 0;
}
@media (min-width: 640px) {
	.llb-card-grid { grid-template-columns: repeat(2, 1fr); }   /* 2 cols */
}
/* Videos: 1 -> 2 -> 4 */
@media (min-width: 1024px) {
	.llb-card-grid--videos { grid-template-columns: repeat(4, 1fr); }
}
/* Materials + news: 1 -> 2 -> 3 */
@media (min-width: 1024px) {
	.llb-card-grid--materials,
	.llb-card-grid--news { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Card shell (shared by video/resource/news) ----------------------------- */
.llb-card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	color: var(--card-foreground);
	border-left: 4px solid var(--primary); /* crimson left-border-4 */
	border-radius: 12px;                   /* rounded-xl */
	overflow: hidden;
}
.llb-card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	flex: 1 1 auto;
}
.llb-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--foreground);
	margin: 0;
}
.llb-card__title a { color: var(--foreground); }
.llb-card__title a:hover,
.llb-card__title a:focus { color: var(--primary); }
.llb-card__excerpt {
	font-size: .875rem;
	line-height: 1.45;
	color: rgba(26, 26, 26, .7);
	margin: 0;
}
.llb-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin-top: auto;
	padding-top: .5rem;
	font-size: .78rem;
	color: rgba(26, 26, 26, .65);
}
.llb-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}
.llb-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.llb-card__date { white-space: nowrap; }

/* ---- Video card facade box -------------------------------------------------- */
.llb-video-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: rgba(0, 0, 0, .05);
	overflow: hidden;
}
.llb-video-card__media lite-youtube { width: 100%; height: 100%; max-width: none; }
/* Duration badge — absolute bottom-right, black/80 bg, white text */
.llb-duration-badge {
	position: absolute;
	bottom: .5rem;
	right: .5rem;
	z-index: 2;
	background: rgba(0, 0, 0, .8);
	color: #FFFFFF;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1;
	padding: .2rem .45rem;
	border-radius: .35rem;
}
/* A play-trigger anchoring the modal — invisible overlay button over the media */
.llb-video-card__trigger {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: transparent;
	border: 0;
	cursor: pointer;
	/* The facade renders its own play button beneath; this captures the click. */
}
.llb-video-card__trigger:focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: -2px;
}

/* ---- Video modal (lightbox) ------------------------------------------------- */
body.llb-modal-open { overflow: hidden; }
/* Honor the [hidden] attribute the JS toggles. Without this, the class rule
   `.llb-modal-overlay { display:flex }` overrides the UA `[hidden]{display:none}`
   so the invisible (opacity:0) fixed/inset:0 overlay stays in the layer and
   swallows EVERY click site-wide — making the page feel completely dead. */
.llb-modal-overlay[hidden] { display: none; }
.llb-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(139, 31, 24, .55);    /* crimson-tinted overlay */
	opacity: 0;
	transition: opacity .2s ease;
}
.llb-modal-overlay.is-open { opacity: 1; }
.llb-modal__panel {
	position: relative;
	width: 100%;
	max-width: 56rem;
	background: var(--card);
	color: var(--card-foreground);
	border-radius: 16px;                   /* rounded-xl */
	padding: 1.25rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.llb-modal__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 1rem;
}
.llb-modal__media lite-youtube { width: 100%; height: 100%; max-width: none; }
.llb-modal__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	color: var(--foreground);
}
.llb-modal__fulllink {
	display: inline-block;
	font-weight: 600;
	color: var(--primary);
}
.llb-modal__fulllink:hover { color: var(--primary-hover); }
.llb-modal__close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: var(--primary-foreground);
	border: 0;
	border-radius: 999px;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}
.llb-modal__close:hover { background: var(--primary-hover); }
@media (max-width: 639px) {
	/* Full-width sheet on mobile */
	.llb-modal-overlay { padding: 0; align-items: stretch; }
	.llb-modal__panel {
		max-width: none;
		border-radius: 16px 16px 0 0;
		margin-top: auto;
		padding: 1rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.llb-modal-overlay { transition: none; }
}

/* ---- Library filter + search ------------------------------------------------ */
.llb-library-filter {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}
.llb-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}
.llb-filter-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1 1 12rem;
	min-width: 0;
}
.llb-filter-field label {
	font-size: .78rem;
	font-weight: 700;
	color: var(--foreground);
}
.llb-filter-field select,
.llb-filter-field input[type="search"],
.llb-filter-field input[type="text"] {
	width: 100%;
	padding: .55rem .7rem;
	font-size: .9rem;
	color: var(--foreground);
	background: #FFFFFF;
	border: 1px solid var(--input);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Crimson focus ring — explicitly NOT blue */
.llb-filter-field select:focus,
.llb-filter-field input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(181, 38, 30, .25);
}
.llb-filter-actions {
	display: flex;
	gap: .5rem;
	flex: 0 0 auto;
}
/* Empty-state hint for a filtered library with no results */
.llb-empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: rgba(26, 26, 26, .7);
}
.llb-empty-state__title {
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 .35rem;
}

/* ---- Single material — inline PDF reader ------------------------------------ */
.llb-pdf-reader {
	width: 100%;
	height: 70vh;
	min-height: 420px;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--card);
}
.llb-pdf-reader iframe,
.llb-pdf-reader embed,
.llb-pdf-reader object {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
@media (max-width: 639px) {
	.llb-pdf-reader { height: 60vh; min-height: 320px; }
}
.llb-pdf-download {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 1rem 0;
	padding: .6rem 1.1rem;
	background: var(--secondary);          /* gold download CTA */
	color: var(--secondary-foreground);
	border-radius: 999px;
	font-weight: 700;
	transition: background-color .15s ease;
}
.llb-pdf-download:hover { background: var(--secondary-hover); color: var(--secondary-foreground); }

/* =============================================================================
   Fluent Forms brand overrides (apply once 02-07 embeds the forms).
   Gold submit, crimson focus, no blue on inputs/buttons/focus.
   ============================================================================= */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="search"],
.fluentform textarea,
.fluentform select {
	border: 1px solid var(--input) !important;
	border-radius: 8px !important;
	color: var(--foreground) !important;
	background: #FFFFFF !important;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
	outline: none !important;
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgba(181, 38, 30, .25) !important;  /* crimson ring */
}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	background: var(--secondary) !important;   /* gold submit */
	color: var(--secondary-foreground) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	transition: background-color .15s ease !important;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
	background: var(--secondary-hover) !important;
	color: var(--secondary-foreground) !important;
}
/* Success / error states in brand colors (never default blue/green-blue) */
.fluentform .ff-message-success,
.ff-message-success {
	color: var(--primary) !important;
	border-color: var(--primary) !important;
}
.fluentform .error,
.fluentform .text-danger {
	color: var(--primary-hover) !important;
}

/* ---------------------------------------------------------------------------
   Tutor LMS brand remap — NO BLUE.
   Tutor ships its own design tokens defaulting to blue (#3E64DE). Redefine its
   CSS custom properties to the LLB crimson/gold palette so every Tutor
   component (buttons, progress bars, links, course/dashboard accents) inherits
   the brand instead of Tutor's blue. Site-wide so it applies on all LMS pages.
   --------------------------------------------------------------------------- */
:root {
	--tutor-color-primary: #B5261E;          /* crimson */
	--tutor-color-primary-rgb: 181, 38, 30;
	--tutor-color-primary-hover: #8B1F18;
	--tutor-color-primary-hover-rgb: 139, 31, 24;
	--tutor-color-warning: #F5C518;          /* gold */
	--tutor-color-brand: #B5261E;
}

/* =============================================================================
   SINGLE-POST TEMPLATES + shared parts (single-video / single-news /
   single-study_material, breadcrumb, reading layout, related rails, CTAs,
   archive headers). These structural classes were emitted by the templates but
   never styled, so single pages rendered as unstyled full-width text. Uses the
   brand tokens only — crimson/gold, NO blue.
   ============================================================================= */

/* ---- Single page shell ----------------------------------------------------- */
.llb-single { padding: 2.25rem 0 3.5rem; }
.llb-single > .container-custom { display: block; }

/* ---- Breadcrumb ------------------------------------------------------------ */
.llb-breadcrumb { margin: 0 0 1.25rem; font-size: .82rem; }
.llb-breadcrumb__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .1rem;
	color: rgba(26, 26, 26, .6);
}
.llb-breadcrumb__list li { display: inline-flex; align-items: center; }
.llb-breadcrumb__list li:not(:last-child)::after {
	content: "/"; margin: 0 .5rem; color: rgba(26, 26, 26, .35);
}
.llb-breadcrumb__list a { color: var(--primary); text-decoration: none; }
.llb-breadcrumb__list a:hover { text-decoration: underline; }
.llb-breadcrumb__list li[aria-current="page"] { color: rgba(26, 26, 26, .7); font-weight: 600; }

/* ---- Constrained reading column (news body + long-form) -------------------- */
.llb-reading-layout { max-width: 760px; margin-inline: auto; }
.llb-reading-body { font-size: 1.05rem; line-height: 1.75; color: rgba(26, 26, 26, .9); }
.llb-reading-body > * + * { margin-top: 1.1rem; }
.llb-reading-body h2 { font-size: 1.5rem; margin-top: 2rem; color: var(--foreground); }
.llb-reading-body h3 { font-size: 1.2rem; margin-top: 1.5rem; color: var(--foreground); }
.llb-reading-body a { color: var(--primary); }
.llb-reading-body img { max-width: 100%; height: auto; border-radius: 10px; }
.llb-reading-body blockquote {
	margin: 1.4rem 0; padding: .5rem 0 .5rem 1.1rem;
	border-left: 4px solid var(--secondary); color: rgba(26, 26, 26, .8); font-style: italic;
}

/* ---- Shared single header (title / meta / media / badges) ------------------ */
.llb-single-news__header,
.llb-single-material__header,
.llb-single-video__header { margin: 0 0 1.25rem; }

.llb-single-news__title,
.llb-single-material__title,
.llb-single-video__title {
	font-family: "Merriweather", Georgia, serif;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	line-height: 1.2; margin: .5rem 0; color: var(--foreground);
	text-wrap: balance;
}
/* News title sits in the constrained column; keep it left-aligned and tight. */
.llb-single-news__header { max-width: 760px; margin-inline: auto; }

.llb-single-news__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem;
	font-size: .88rem; color: rgba(26, 26, 26, .6);
}
.llb-single-news__date { font-weight: 600; }
.llb-single-news__author::before { content: "•"; margin-right: .6rem; color: rgba(26,26,26,.3); }

.llb-single-news__media,
.llb-single-video__media { margin: 0 0 1.5rem; }
.llb-single-news__media { max-width: 760px; margin-inline: auto; }
.llb-single-news__image { width: 100%; height: auto; border-radius: 14px; display: block; }
/* 16:9 video frame on the canonical single-video page. */
.llb-single-video__media { border-radius: 14px; overflow: hidden; background: #000; }
.llb-single-video__media lite-youtube { width: 100%; border-radius: 14px; }

.llb-single-video__content,
.llb-single-material__notes {
	max-width: 760px; line-height: 1.7; color: rgba(26, 26, 26, .88);
}
.llb-single-video__content > * + *,
.llb-single-material__notes > * + * { margin-top: 1rem; }

.llb-single-material__summary {
	max-width: 760px; margin: 0 0 1.25rem; font-size: 1.08rem; line-height: 1.65;
	color: rgba(26, 26, 26, .82);
	border-left: 4px solid var(--secondary); padding-left: 1rem;
}

/* Badge rows on single pages */
.llb-single-news__badges,
.llb-single-material__badges,
.llb-single-video__badges { margin: .25rem 0 0; }

/* ---- File-type badge (gold = PDF, per UI spec) ----------------------------- */
.llb-file-type-badge {
	background: var(--secondary); color: var(--secondary-foreground);
	font-weight: 700; letter-spacing: .02em;
}

/* ---- Watch & Read teaser button row --------------------------------------- */
.llb-watch-read-teaser { max-width: 760px; margin: 1.75rem 0 0; }

/* ---- Article pagination (wp_link_pages) ----------------------------------- */
.llb-page-links {
	max-width: 760px; margin: 1.5rem auto 0; display: flex; flex-wrap: wrap;
	gap: .4rem; align-items: center; font-size: .9rem;
}
.llb-page-links a, .llb-page-links > span > span {
	display: inline-block; min-width: 2rem; text-align: center; padding: .25rem .5rem;
	border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--primary);
}
.llb-page-links a:hover { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--secondary); }

/* ---- Related rails (news + videos) ---------------------------------------- */
.llb-related,
.llb-related-videos {
	margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);
}
.llb-related__title,
.llb-related-videos__title {
	font-family: "Merriweather", Georgia, serif;
	font-size: 1.4rem; margin: 0 0 1.25rem; color: var(--foreground);
}
.llb-related__title::after,
.llb-related-videos__title::after {
	content: ""; display: block; width: 48px; height: 3px;
	background: var(--secondary); margin-top: .5rem; border-radius: 2px;
}

/* ---- Archive headers (videos / study material / news listings) ------------ */
.llb-archive { padding: 2.25rem 0 3.5rem; }
.llb-archive__header { text-align: center; margin: 0 0 2rem; }
.llb-archive__title {
	font-family: "Merriweather", Georgia, serif;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0 0 .5rem; color: var(--foreground);
}
.llb-archive__title::after {
	content: ""; display: block; width: 56px; height: 4px;
	background: var(--secondary); margin: .6rem auto 0; border-radius: 2px;
}
.llb-archive__subtitle { color: rgba(26, 26, 26, .7); margin: 0 auto; max-width: 50rem; }

/* ---- Newsletter CTA band --------------------------------------------------- */
.llb-newsletter-cta { text-align: center; }
.llb-newsletter-cta__heading {
	font-family: "Merriweather", Georgia, serif;
	font-size: 1.5rem; margin: 0 0 .5rem; color: var(--foreground);
}
.llb-newsletter-cta__copy { color: rgba(26, 26, 26, .7); margin: 0 auto 1.25rem; max-width: 36rem; }
.llb-newsletter-cta__form { max-width: 30rem; margin-inline: auto; }
.llb-form-fallback {
	background: var(--card); border: 1px dashed var(--border); border-radius: 10px;
	padding: .85rem 1rem; color: rgba(26, 26, 26, .7); font-size: .92rem;
}
/* In the crimson footer column the newsletter copy must stay legible on crimson. */
.llb-site-footer .llb-newsletter-cta { text-align: left; }
.llb-site-footer .llb-newsletter-cta__heading,
.llb-site-footer .llb-newsletter-cta__copy { color: var(--primary-foreground); }

/* ---- YouTube subscribe CTA band ------------------------------------------- */
.llb-youtube-cta { background: var(--primary); color: var(--primary-foreground); padding: 2.5rem 0; }
.llb-youtube-cta__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.25rem;
}
.llb-youtube-cta__heading {
	font-family: "Merriweather", Georgia, serif; font-size: 1.5rem; margin: 0 0 .35rem;
	color: var(--primary-foreground);
}
.llb-youtube-cta__copy { margin: 0; color: rgba(255, 255, 255, .9); max-width: 38rem; }
.llb-youtube-cta__btn {
	display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0;
	background: var(--secondary); color: var(--secondary-foreground);
	font-weight: 700; text-decoration: none; padding: .7rem 1.25rem; border-radius: 10px;
}
.llb-youtube-cta__btn:hover { background: #fff; color: var(--primary); }