/**
 * tma-child-theme/assets/css/theme.css
 *
 * Front-end component CSS. Cascades off CSS custom properties defined here
 * (which mirror the values in theme.json) so block-editor previews and the
 * front-end render identically.
 *
 * Section order:
 *   1. Tokens
 *   2. Self-hosted Arabic fonts
 *   3. Element resets / base
 *   4. Header / footer template parts
 *   5. Patterns
 *      - Hero
 *      - Verse banner (used by tma/verse-banner block + pattern)
 *      - Video banner (auto-prepended to transcripts)
 *      - Transcript notice
 *      - Post card
 *      - Pull quote
 *      - FAQ
 *      - Author block
 *      - Recent videos / YouTube grid
 *   6. Layout helpers
 *   7. Reduced-motion overrides
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
	/* gold scale */
	--tma-gold-deep:   #B8920E;
	--tma-gold-muted:  #D4A810;
	--tma-gold:        #F5C518;
	--tma-gold-light:  #F7D54A;

	/* dark scale */
	--tma-black:       #0A0A0A;
	--tma-near-black:  #0F0F0F;
	--tma-deep-black:  #0A0A0A; /* alias of --tma-black for button hover overrides */
	--tma-charcoal:    #1A1A1A;
	--tma-dark-gray:   #2A2A2A;
	--tma-mid-gray:    #4A4A4A;
	--tma-warm-gray:   #A0A0A0;
	--tma-off-white:   #F0F0F0;

	/* type families */
	--tma-font-heading: 'Playfair Display', Georgia, serif;
	--tma-font-display: 'Playfair Display', Georgia, serif; /* alias of heading for carousel + widget titles */
	--tma-font-body:    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--tma-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
	--tma-font-quran:   'MSHQ', 'Noto Naskh Arabic', serif;
	--tma-font-arabic:  'Noto Naskh Arabic', serif;

	/* motion */
	--tma-ease: 0.18s ease;
}

/* ============================================================
   2. SELF-HOSTED ARABIC FONTS
   (Latin faces are declared by theme.json so the editor finds them.)
   ============================================================ */
@font-face {
	font-family: 'MSHQ';
	src: url('../fonts/mushaf-uthmani-regular.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'HQPB';
	src: url('../fonts/hafs-quranic-bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'Noto Naskh Arabic';
	src: url('../fonts/noto-naskh-arabic-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Noto Naskh Arabic';
	src: url('../fonts/noto-naskh-arabic-bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

/* ============================================================
   3. ELEMENT RESETS / BASE
   ============================================================ */
body {
	background: var(--tma-black);
	color: var(--tma-off-white);
	font-family: var(--tma-font-body);
	-webkit-font-smoothing: antialiased;
}

/* The brand's tracked-uppercase voice — H6 by default. Reusable as a class. */
.tma-eyebrow,
.wp-block-heading.is-style-eyebrow {
	font-family: var(--tma-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--tma-gold);
}

/* Arabic / Quranic helper classes */
.tma-quran  { font-family: var(--tma-font-quran);  direction: rtl; }
.tma-arabic { font-family: var(--tma-font-arabic); direction: rtl; }

/* ----- Wordmark — text-based reproduction of the TMA lockup -------------
 *   THE [MUSLIM] APOLOGIST — middle word reversed in a black/white block.
 *   Use:
 *     <span class="tma-wordmark">
 *       THE <span class="tma-wordmark__inv">MUSLIM</span> APOLOGIST
 *     </span>
 *   By default the inverted block is white-on-black (matches the dark
 *   canvas). Override --tma-wordmark-inv-bg/-fg on the parent for light
 *   surfaces.
 * ---------------------------------------------------------------------- */
/* ---- Circular brand logo (header + footer) ---- */
.tma-logo-link,
.wp-block-site-logo a,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	transition: transform var(--tma-ease);
	text-decoration: none;
}
.tma-logo-link:hover,
.wp-block-site-logo a:hover,
.custom-logo-link:hover { transform: rotate(-4deg) scale(1.04); }
.tma-logo-link:focus-visible,
.wp-block-site-logo a:focus-visible,
.custom-logo-link:focus-visible {
	outline: 2px solid var(--tma-gold);
	outline-offset: 3px;
}
.tma-logo-circle,
.wp-block-site-logo img,
.custom-logo {
	display: block;
	height: auto;          /* derive from HTML width attribute via aspect ratio */
	max-width: 100%;
	border-radius: 50%;
}

.tma-wordmark {
	font-family: var(--tma-font-heading);
	font-weight: 900;
	letter-spacing: 0.005em;
	line-height: 1;
	color: var(--tma-off-white);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.18em;
	text-decoration: none;
	--tma-wordmark-inv-bg: var(--tma-off-white);
	--tma-wordmark-inv-fg: var(--tma-black);
}
.tma-wordmark__inv {
	display: inline-block;
	background: var(--tma-wordmark-inv-bg);
	color: var(--tma-wordmark-inv-fg);
	padding: 0.08em 0.18em 0.10em;
	line-height: 1;
}
.tma-brand-lockup {
	display: flex;
	align-items: center;
	gap: 18px;
	text-decoration: none;
}
.tma-brand-lockup img,
.tma-brand-lockup .wp-block-site-logo img {
	flex-shrink: 0;
}

/* ============================================================
   4. HEADER / FOOTER (template parts)
   ============================================================ */
.wp-block-template-part.site-header,
.wp-site-blocks > header.wp-block-template-part {
	background: var(--tma-charcoal);
	border-bottom: 1px solid var(--tma-mid-gray);
}
.wp-block-site-logo img {
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--tma-charcoal),
				0 0 0 4px rgba(245, 197, 24, 0.25);
	transition: box-shadow var(--tma-ease), transform var(--tma-ease);
}
.wp-block-site-logo a:hover img {
	box-shadow: 0 0 0 2px var(--tma-charcoal),
				0 0 0 4px rgba(245, 197, 24, 0.55);
	transform: scale(1.04);
}
.wp-block-site-title a {
	color: var(--tma-off-white);
	text-decoration: none;
	font-family: var(--tma-font-heading);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.wp-block-site-tagline {
	font-size: 0.625rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(240, 240, 240, 0.55);
	margin: 0;
}
.wp-block-navigation {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--tma-off-white);
	border-bottom: 2px solid transparent;
	padding: 4px 0;
	text-decoration: none;
	transition: color var(--tma-ease), border-color var(--tma-ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--tma-gold);
	border-bottom-color: var(--tma-gold);
	text-decoration: none;
}

footer.wp-block-template-part {
	background: var(--tma-charcoal);
	border-top: 1px solid var(--tma-mid-gray);
	padding: 1.5rem var(--wp--preset--spacing--60);
}
footer .wp-block-social-links .wp-social-link {
	background: transparent;
	color: var(--tma-off-white);
	transition: background var(--tma-ease), color var(--tma-ease);
}
footer .wp-block-social-links .wp-social-link:hover {
	background: var(--tma-gold);
	color: var(--tma-black);
}

/* ----- Header end-cluster (v1.4.17) -------------------------
   Wrapper around the primary nav and the search toggle. Lets the
   two sit as a single right-aligned unit while keeping the brand
   lockup on the left edge. */
.tma-header-end {
	gap: 24px;
}

/* ----- Header navigation custom-menu integration (v1.4.38) -----
   When an operator assigns a menu via Appearance → Menus → "Header
   (main navigation)", inc/header-menu.php injects:
     - <body class="tma-has-header-menu ..."> flag
     - <nav class="tma-header-nav tma-header-nav--custom"> output

   The fallback group <div class="tma-header-nav tma-header-nav--fallback">
   in parts/header.html stays in the DOM and CSS hides it when the body
   class is present. Same shape as the footer-secondary toggle. */
body.tma-has-header-menu .tma-header-nav--fallback {
	display: none;
}

/* The fallback wrapper is inert structurally — it just exists to give
   the CSS a hide-target. Make sure its display contents stay flush
   with the rest of the header flex row. */
.tma-header-nav-fallback-wrap {
	display: contents;
}

/* The custom-menu container. Sits where the wp:navigation block would
   have rendered, inside .tma-header-end's flex row alongside the search
   toggle. */
.tma-header-nav--custom {
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tma-header-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 32px;
}
.tma-header-nav__list li {
	margin: 0;
	padding: 0;
}
.tma-header-nav__list a {
	color: var(--tma-off-white);
	text-decoration: none;
	transition: color var(--tma-ease, 220ms ease);
}
.tma-header-nav__list a:hover,
.tma-header-nav__list a:focus-visible {
	color: var(--tma-gold);
	outline: none;
}
.tma-header-nav__list .current-menu-item > a,
.tma-header-nav__list .current_page_item > a {
	color: var(--tma-gold);
}

/* Hamburger toggle button — hidden on desktop, shown below 600px to
   match the wp:navigation block's default mobile overlay breakpoint. */
.tma-header-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--tma-off-white);
	cursor: pointer;
	transition:
		color var(--tma-ease, 220ms ease),
		border-color var(--tma-ease, 220ms ease),
		background-color var(--tma-ease, 220ms ease);
	flex-direction: column;
	gap: 4px;
}
.tma-header-nav__toggle:hover {
	color: var(--tma-gold);
	border-color: var(--tma-mid-gray);
	background-color: rgba(245, 197, 24, 0.06);
}
.tma-header-nav__toggle:focus-visible {
	outline: none;
	color: var(--tma-gold);
	border-color: var(--tma-gold);
	background-color: rgba(245, 197, 24, 0.08);
}
.tma-header-nav__toggle-bar {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 220ms ease, opacity 220ms ease;
}
/* When the menu is open, transform the three bars into an X. */
.tma-header-nav.is-open .tma-header-nav__toggle-bar:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}
.tma-header-nav.is-open .tma-header-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}
.tma-header-nav.is-open .tma-header-nav__toggle-bar:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* Mobile overlay — replicates the wp:navigation block's "Mobile (default)"
   overlay behaviour. Below 600px the menu list is hidden by default and
   the hamburger button appears. Tapping the hamburger reveals the list
   as a full-width charcoal panel below the header. */
@media (max-width: 600px) {
	.tma-header-nav__toggle {
		display: inline-flex;
	}
	.tma-header-nav--custom .tma-header-nav__list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--tma-charcoal);
		border-bottom: 1px solid var(--tma-mid-gray);
		padding: 8px 0;
		z-index: 900;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
	}
	.tma-header-nav--custom.is-open .tma-header-nav__list {
		display: flex;
	}
	.tma-header-nav__list li {
		display: block;
		width: 100%;
	}
	.tma-header-nav__list a {
		display: block;
		padding: 14px 40px;
		border-bottom: 1px solid var(--tma-mid-gray);
	}
	.tma-header-nav__list li:last-child a {
		border-bottom: 0;
	}
	.tma-header-nav__list a:hover,
	.tma-header-nav__list a:focus-visible {
		background-color: rgba(245, 197, 24, 0.06);
	}
}

/* Lock body scroll while the mobile overlay is open — prevents the
   page below the dropdown from scrolling under the user's finger. */
html.tma-header-nav-open body {
	overflow: hidden;
}

/* The custom <nav> needs position: relative for the absolutely-positioned
   <ul> dropdown to anchor correctly. The header itself isn't positioned,
   so we anchor on the nav element specifically. */
@media (max-width: 600px) {
	.tma-header-nav--custom {
		position: static;
	}
	.tma-header-end {
		position: relative;
	}
}

/* Reduced-motion: disable hamburger bar transitions for users who
   request it. */
@media (prefers-reduced-motion: reduce) {
	.tma-header-nav__toggle-bar {
		transition: none;
	}
}

/* ----- Search toggle button (v1.4.17) -----------------------
   Icon-only button in the header that opens the slide-down search
   overlay. Modernist editorial register: thin-stroke magnifying
   glass, no background until hover, gold ring on focus. */
.tma-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--tma-off-white);
	cursor: pointer;
	transition:
		background-color var(--tma-ease),
		border-color var(--tma-ease),
		color var(--tma-ease);
}
.tma-search-toggle:hover {
	color: var(--tma-gold);
	border-color: var(--tma-mid-gray);
	background-color: rgba(245, 197, 24, 0.06);
}
.tma-search-toggle:focus-visible {
	outline: none;
	color: var(--tma-gold);
	border-color: var(--tma-gold);
	background-color: rgba(245, 197, 24, 0.08);
}
.tma-search-toggle__icon {
	display: block;
	pointer-events: none;
}

/* ----- Search overlay (v1.4.17) -----------------------------
   Full-viewport-width slide-down panel anchored to the top of
   the page. Backdrop covers everything below the panel.
*/
.tma-search-overlay[hidden] {
	display: none;
}
.tma-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.tma-search-overlay__inner {
	position: relative;
	background: var(--tma-charcoal);
	border-bottom: 1px solid var(--tma-mid-gray);
	padding: 28px 40px;
	display: flex;
	align-items: center;
	gap: 20px;
	transform: translateY(-12px);
	opacity: 0;
	transition:
		transform 200ms var(--tma-ease, ease),
		opacity 200ms var(--tma-ease, ease);
}
.tma-search-overlay.is-open .tma-search-overlay__inner {
	transform: translateY(0);
	opacity: 1;
}
.tma-search-overlay__backdrop {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 84px; /* roughly the height of the inner panel */
	background: rgba(10, 10, 10, 0.7);
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms var(--tma-ease, ease);
}
.tma-search-overlay.is-open .tma-search-overlay__backdrop {
	opacity: 1;
}

html.tma-search-open {
	overflow: hidden;
}

/* The form occupies the full row, with the magnifying-glass icon on
   the left, the input filling all remaining space, and the submit
   button on the right. The X close-button is a sibling of the form
   so it sits flush with the right edge of the header padding. */
.tma-search-form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--tma-gold-deep);
	padding-bottom: 12px;
	transition: border-color var(--tma-ease);
}
.tma-search-form:focus-within {
	border-bottom-color: var(--tma-gold);
}
.tma-search-form__label {
	display: inline-flex;
	color: var(--tma-warm-gray);
	transition: color var(--tma-ease);
}
.tma-search-form:focus-within .tma-search-form__label {
	color: var(--tma-gold);
}
.tma-search-form__input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	padding: 8px 0;
	font-family: var(--tma-font-display, 'Playfair Display', serif);
	font-style: italic;
	font-size: 24px;
	font-weight: 400;
	color: var(--tma-off-white);
	letter-spacing: -0.005em;
}
.tma-search-form__input::placeholder {
	color: var(--tma-warm-gray);
	opacity: 1;
}
.tma-search-form__input::-webkit-search-cancel-button,
.tma-search-form__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.tma-search-form__submit {
	background: transparent;
	border: 1px solid var(--tma-mid-gray);
	color: var(--tma-off-white);
	border-radius: 999px;
	padding: 8px 18px;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--tma-ease),
		border-color var(--tma-ease),
		color var(--tma-ease);
}
.tma-search-form__submit:hover,
.tma-search-form__submit:focus-visible {
	outline: none;
	background: var(--tma-gold);
	border-color: var(--tma-gold);
	color: var(--tma-black);
}

/* X close button — sits right-flush with the panel padding. */
.tma-search-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--tma-warm-gray);
	cursor: pointer;
	transition:
		color var(--tma-ease),
		border-color var(--tma-ease),
		background-color var(--tma-ease);
}
.tma-search-close:hover,
.tma-search-close:focus-visible {
	outline: none;
	color: var(--tma-off-white);
	border-color: var(--tma-mid-gray);
	background: rgba(255, 255, 255, 0.04);
}

/* Mobile breakpoint — slim horizontal padding, stacked form. */
@media (max-width: 720px) {
	.tma-search-overlay__inner {
		padding: 20px 24px;
		gap: 12px;
	}
	.tma-search-form {
		gap: 12px;
	}
	.tma-search-form__input {
		font-size: 18px;
	}
	.tma-search-form__submit {
		padding: 6px 12px;
		font-size: 10px;
		letter-spacing: 0.10em;
	}
}

/* ============================================================
   5. PATTERNS
   ============================================================ */

/* ----- Hero ----- */
.tma-hero {
	text-align: center;
	padding: 4.5rem 1.5rem 3.5rem;
}
.tma-hero__eyebrow {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--tma-gold);
	margin: 0 0 1.25rem;
}
.tma-hero__title {
	font-family: var(--tma-font-heading);
	font-weight: 900;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--tma-off-white);
	margin: 0 auto 1.25rem;
	max-width: 880px;
	text-wrap: balance;
}
.tma-hero__title em {
	color: var(--tma-gold);
	font-style: italic;
	font-weight: 700;
}
.tma-hero__sub {
	/* Editorial subhead — justified body type with a quiet gold left
	   accent so the paragraph reads as deliberate editorial framing
	   rather than a bare line of text. The constrained-layout rule
	   centres the box; we cap the width and let the justified prose
	   carry the weight. The first line is set in italics for a small
	   serif lead-in that anchors the paragraph to the heading above. */
	font-family: var(--tma-font-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgba(240, 240, 240, 0.78);
	margin: 0 auto 2.25rem;
	max-width: 720px;
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	padding: 0.5rem 0 0.5rem 18px;
	border-left: 2px solid var(--tma-gold);
}
.tma-hero__sub::first-line {
	font-style: italic;
	color: rgba(240, 240, 240, 0.92);
	letter-spacing: 0.005em;
}
@media (max-width: 600px) {
	.tma-hero__sub {
		text-align: left;
		hyphens: none;
		-webkit-hyphens: none;
	}
}

/* ----- Hero CTAs (v1.4.6) -----
   Custom anchors rather than core/button blocks — owns its own hover
   behaviour cleanly without fighting WP core's .wp-element-button:hover
   cascade. Two variants: primary (gold-filled) and secondary (outline).
*/
.tma-hero__cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.tma-hero__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-family: var(--tma-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	will-change: transform;
}
.tma-hero__cta-btn:focus-visible {
	outline: 2px solid var(--tma-gold);
	outline-offset: 3px;
}

/* Primary — gold filled. Hover: slight lift + warmer-gold + soft shadow. */
.tma-hero__cta-btn--primary {
	background: var(--tma-gold);
	color: var(--tma-black);
	border-color: var(--tma-gold);
}
.tma-hero__cta-btn--primary:hover {
	background: var(--tma-gold-light, #FFE066);
	border-color: var(--tma-gold-light, #FFE066);
	color: var(--tma-black);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(245, 197, 24, 0.25);
}
.tma-hero__cta-btn--primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(245, 197, 24, 0.20);
}

/* Secondary — outlined. Hover: gold-tinted bg + gold border/text, no harsh inversion. */
.tma-hero__cta-btn--secondary {
	background: transparent;
	color: var(--tma-off-white);
	border-color: var(--tma-mid-gray);
}
.tma-hero__cta-btn--secondary:hover {
	background: rgba(245, 197, 24, 0.08);
	border-color: var(--tma-gold);
	color: var(--tma-gold);
	transform: translateY(-1px);
}
.tma-hero__cta-btn--secondary:active {
	transform: translateY(0);
	background: rgba(245, 197, 24, 0.12);
}

/* YouTube glyph — inherits currentColor so it matches the button text state */
.tma-yt-glyph {
	flex-shrink: 0;
	transform: translateY(-1px); /* optical baseline alignment */
}

@media (max-width: 480px) {
	.tma-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.tma-hero__cta-btn {
		width: 100%;
	}
}

/* ----- Verse banner ----- */
.tma-verse-banner {
	background: var(--tma-charcoal);
	border-top: 1px solid var(--tma-mid-gray);
	border-bottom: 1px solid var(--tma-mid-gray);
	padding: 2.5rem 1.5rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.tma-verse-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(245, 197, 24, 0.06) 0%, transparent 70%);
	pointer-events: none;
}
.tma-verse-banner > * { position: relative; z-index: 1; }
.tma-verse-banner__rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 1.5rem;
}
.tma-verse-banner__rule:last-child {
	margin-bottom: 0;
	margin-top: 1.5rem;
}
.tma-verse-banner__rule::before,
.tma-verse-banner__rule::after {
	content: '';
	flex: 1;
	max-width: 180px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--tma-gold-muted));
}
.tma-verse-banner__rule::after {
	background: linear-gradient(to left, transparent, var(--tma-gold-muted));
}
.tma-verse-banner__star {
	color: var(--tma-gold);
	opacity: 0.7;
	font-size: 1rem;
}
.tma-verse-banner__arabic {
	font-family: var(--tma-font-quran);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.8;
	direction: rtl;
	color: var(--tma-gold-light);
	margin: 0 auto 1rem;
	max-width: 640px;
	text-shadow: 0 0 32px rgba(245, 197, 24, 0.18);
}
.tma-verse-banner__transliteration {
	font-family: var(--tma-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--tma-warm-gray);
	max-width: 560px;
	margin: 0 auto 0.75rem;
}
.tma-verse-banner__translation {
	font-family: var(--tma-font-body);
	font-size: 0.875rem;
	font-style: italic;
	color: var(--tma-off-white);
	max-width: 560px;
	margin: 0 auto 0.5rem;
}
.tma-verse-banner__ref {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tma-gold-muted);
	margin: 0;
}

/* ----- Video banner (transcript hero, auto-prepended) ----- */
.tma-video-banner {
	margin: 1.5rem 0 2rem;
}
.tma-video-banner__label {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tma-gold);
	margin: 0 0 0.75rem;
	display: flex;
	align-items: center;
	gap: 8px;
}
.tma-video-banner__icon {
	color: var(--tma-gold);
	font-size: 0.875rem;
}
.tma-video-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--tma-mid-gray);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(245, 197, 24, 0.10);
}
.tma-video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ----- Transcript notice (auto-prepended) ----- */
.tma-transcript-notice {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--tma-dark-gray);
	border-left: 4px solid var(--tma-gold);
	border-radius: 0 12px 12px 0;
	padding: 14px 18px;
	margin: 0 0 2rem;
}
.tma-transcript-notice__icon {
	color: var(--tma-gold);
	font-size: 1rem;
	line-height: 1.5;
}
.tma-transcript-notice p {
	font-family: var(--tma-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: rgba(240, 240, 240, 0.7);
	margin: 0;
}
.tma-transcript-notice strong { color: var(--tma-off-white); font-weight: 700; }
.tma-transcript-notice a {
	color: var(--tma-gold);
	font-weight: 600;
	text-decoration: none;
}
.tma-transcript-notice a:hover { text-decoration: underline; }

/* ----- Post card (signature 4 px gold left border) ----- */
.tma-card {
	background: var(--tma-dark-gray);
	border-left: 4px solid var(--tma-gold);
	border-radius: 0 12px 12px 0;
	padding: 1.5rem 1.5rem 1.5rem 1.625rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform var(--tma-ease), box-shadow var(--tma-ease);
}
.tma-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
}

/* Equal-height cards inside core/post-template grids; pin the date to the bottom */
.wp-block-post-template.is-layout-grid {
	align-items: stretch;
}
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}
.wp-block-post-template.is-layout-grid > li > .tma-card,
.wp-block-post-template.is-layout-grid > li > .wp-block-group.tma-card {
	flex: 1;
	width: 100%;
}
.tma-card > .wp-block-post-date,
.tma-card .wp-block-post-date {
	margin-top: auto;
}

/* Card thumbnail (v1.4.7) — sits above the eyebrow, nested inside the gold-bordered
   card. Smaller radius (8px) than the card's right radius (12px) so it reads as
   a contained element rather than fighting the card frame. The YouTube fallback
   in inc/youtube-thumb-fallback.php substitutes the channel thumbnail when a
   transcript post has a video ID but no manually-attached featured image. */
.tma-card .wp-block-post-featured-image,
.tma-card .tma-card__thumb {
	margin: 0 0 1rem;
	overflow: hidden;
	border-radius: 8px;
	background: var(--tma-charcoal);
	aspect-ratio: 16 / 9;
}
.tma-card .wp-block-post-featured-image:empty,
.tma-card .tma-card__thumb:empty {
	display: none;
}
.tma-card .wp-block-post-featured-image img,
.tma-card .wp-block-post-featured-image figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 320ms ease;
}
.tma-card .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}
.tma-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.tma-card__label {
	font-family: var(--tma-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tma-gold-muted);
	margin: 0 0 0.625rem;
}
.tma-card__title {
	font-family: var(--tma-font-heading);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--tma-off-white);
	line-height: 1.25;
	margin: 0 0 0.5rem;
}
.tma-card__title a {
	color: inherit;
	text-decoration: none;
}
.tma-card__title a:hover { color: var(--tma-gold); }

/* WP block-rendered cards (front-page query loop) — make them look like .tma-card */
.tma-card .wp-block-post-title {
	font-family: var(--tma-font-heading);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0;
	color: var(--tma-off-white);
}
.tma-card .wp-block-post-title a {
	color: var(--tma-off-white);
	text-decoration: none;
}
.tma-card .wp-block-post-title a:hover { color: var(--tma-gold); }
.tma-card .wp-block-post-terms {
	font-family: var(--tma-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tma-gold-muted);
}
.tma-card .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
	cursor: default;
}
.tma-card .wp-block-post-excerpt p {
	font-family: var(--tma-font-body);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--tma-warm-gray);
	margin: 0;
}
.tma-card .wp-block-post-date {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--tma-gold);
}
.tma-card__body {
	font-family: var(--tma-font-body);
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(240, 240, 240, 0.6);
	margin: 0;
}
.tma-card__footer {
	margin-top: 0.875rem;
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--tma-gold);
}

/* ----- Pull quote (overrides the bare core/pullquote in theme.json) ----- */
.wp-block-pullquote {
	text-align: center;
}
.wp-block-pullquote cite {
	font-family: var(--tma-font-body);
	font-style: normal;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tma-gold-muted);
}

/* ----- FAQ accordion ----- */
.tma-faq { border-top: 1px solid var(--tma-mid-gray); }
.tma-faq__item {
	border-bottom: 1px solid var(--tma-mid-gray);
	padding: 1.125rem 0;
}
.tma-faq__item summary {
	font-family: var(--tma-font-heading);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--tma-off-white);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1.3;
}
.tma-faq__item summary::-webkit-details-marker { display: none; }
.tma-faq__item summary::after {
	content: '+';
	font-size: 1.75rem;
	font-weight: 300;
	color: var(--tma-gold);
	margin-left: 0.875rem;
}
.tma-faq__item[open] summary::after { content: '−'; }
.tma-faq__item p {
	font-family: var(--tma-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(240, 240, 240, 0.7);
	padding-top: 0.75rem;
	margin: 0;
}

/* ----- Author block ----- */
.tma-author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--tma-charcoal);
	border-left: 4px solid var(--tma-gold);
	border-radius: 0 12px 12px 0;
	padding: 1.5rem;
	margin-top: 3rem;
}
.tma-author__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tma-gold);
	color: var(--tma-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tma-font-heading);
	font-weight: 900;
	font-size: 1.375rem;
	flex-shrink: 0;
}
.tma-author__label {
	font-family: var(--tma-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tma-gold-muted);
	margin: 0 0 4px;
}
.tma-author__name {
	font-family: var(--tma-font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--tma-off-white);
	margin: 0;
}
.tma-author__bio {
	font-family: var(--tma-font-body);
	font-size: 0.8125rem;
	color: rgba(240, 240, 240, 0.6);
	margin: 4px 0 0;
}

/* ----- Recent videos / YouTube grid ----- */
.tma-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.tma-section-title {
	font-family: var(--tma-font-heading);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.15;
	color: var(--tma-off-white);
	letter-spacing: -0.01em;
	margin: 0;
}
.tma-section-link {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tma-gold);
	text-decoration: none;
}
.tma-section-link:hover { text-decoration: underline; }

.tma-yt-grid { margin: 0; }
.tma-yt-grid__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
@media (max-width: 720px) {
	.tma-yt-grid__row { grid-template-columns: 1fr; }
}
.tma-yt-card {
	display: flex;
	flex-direction: column;
	background: var(--tma-dark-gray);
	border: 1px solid var(--tma-mid-gray);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--tma-ease), border-color var(--tma-ease);
}
.tma-yt-card:hover {
	transform: translateY(-3px);
	border-color: var(--tma-gold);
}
.tma-yt-card__thumb {
	aspect-ratio: 16 / 9;
	position: relative;
	background: #1a1a1a center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tma-yt-card__play {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.7);
	border: 2px solid var(--tma-gold);
	color: var(--tma-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	transition: background var(--tma-ease), color var(--tma-ease);
}
.tma-yt-card:hover .tma-yt-card__play {
	background: var(--tma-gold);
	color: var(--tma-black);
}
.tma-yt-card__meta { padding: 0.875rem 1rem 1rem; }
.tma-yt-card__date {
	font-family: var(--tma-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--tma-gold-muted);
	margin: 0 0 4px;
}
.tma-yt-card__title {
	font-family: var(--tma-font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--tma-off-white);
	margin: 0;
	line-height: 1.3;
	text-wrap: balance;
}

/* ----- Recent articles list ----- */
.tma-recent-articles {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tma-recent-articles li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--tma-mid-gray);
}
.tma-recent-articles a {
	color: var(--tma-off-white);
	text-decoration: none;
	font-family: var(--tma-font-heading);
	font-weight: 700;
}
.tma-recent-articles a:hover { color: var(--tma-gold); }
.tma-recent-articles__date {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(240, 240, 240, 0.5);
	flex-shrink: 0;
}

/* ----- YouTube video carousel (horizontal scroll) ----- */
.tma-carousel {
	margin: 3rem 0;
	--card-w: 320px;
}
.tma-carousel__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0.5rem 1rem 1.5rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--tma-gold) var(--tma-near-black);
}
.tma-carousel__track::-webkit-scrollbar { height: 8px; }
.tma-carousel__track::-webkit-scrollbar-track { background: var(--tma-near-black); }
.tma-carousel__track::-webkit-scrollbar-thumb {
	background: var(--tma-gold);
	border-radius: 4px;
}
.tma-carousel__card {
	flex: 0 0 var(--card-w);
	scroll-snap-align: start;
	background: var(--tma-near-black);
	border: 1px solid var(--tma-mid-gray);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 200ms ease, border-color 200ms ease;
}
.tma-carousel__card:hover { transform: translateY(-2px); border-color: var(--tma-gold); }
.tma-carousel__card.tma-is-playing {
	flex: 0 0 calc(var(--card-w) * 1.5);
	border-color: var(--tma-gold);
}
.tma-carousel__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--tma-near-black);
}
.tma-carousel__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.tma-carousel__thumb {
	position: relative;
	width: 100%;
	height: 100%;
}
.tma-carousel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tma-carousel__play-btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	border: 0;
	color: var(--tma-off-white);
	font-size: 3rem;
	cursor: pointer;
	transition: background 200ms ease;
}
.tma-carousel__play-btn:hover { background: rgba(0, 0, 0, 0.6); }
.tma-carousel__play-btn::before {
	content: '';
	position: absolute;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tma-gold);
	opacity: 0.9;
	z-index: 0;
}
.tma-carousel__play-btn { font-size: 2rem; }
.tma-carousel__play-btn > * { position: relative; z-index: 1; }
.tma-carousel__meta { padding: 0.875rem 1rem 1.125rem; }
.tma-carousel__title {
	font-family: var(--tma-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.5rem;
	color: var(--tma-off-white);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tma-carousel__date {
	font-family: var(--tma-font-body);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tma-warm-gray);
}
.tma-carousel__more {
	flex: 0 0 calc(var(--card-w) * 0.6);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem 1rem;
	background: transparent;
	border: 2px dashed var(--tma-mid-gray);
	border-radius: 12px;
	color: var(--tma-warm-gray);
	font-family: var(--tma-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color 200ms ease, border-color 200ms ease;
}
.tma-carousel__more:hover { color: var(--tma-gold); border-color: var(--tma-gold); }
.tma-carousel__more-icon {
	font-size: 2rem;
	color: var(--tma-gold);
}
.tma-carousel__footer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0 1rem;
	flex-wrap: wrap;
}
.tma-carousel__hint {
	font-size: 0.8125rem;
	color: var(--tma-warm-gray);
	margin: 0;
	font-style: italic;
}
.tma-yt-channel-link {
	font-family: var(--tma-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tma-gold);
	text-decoration: none;
}
.tma-yt-channel-link:hover { text-decoration: underline; }
/* Empty-state panel — used when the channel feed returns no results.
   Section never silently disappears; visitors keep a path to the channel,
   and admins see a console-style hint pointing to Theme Options. */
.tma-yt-empty {
	padding: 3rem 1.5rem;
	background: linear-gradient(180deg, var(--tma-charcoal) 0%, var(--tma-near-black) 100%);
	border: 1px solid var(--tma-mid-gray);
	border-radius: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.tma-yt-empty__lede {
	font-size: 1rem;
	color: var(--tma-warm-gray);
	margin: 0;
	max-width: 36ch;
}
.tma-yt-empty__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.5rem;
	background: var(--tma-gold);
	color: var(--tma-black);
	font-family: var(--tma-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 8px;
	border: 2px solid var(--tma-gold);
	transition: background var(--tma-ease), color var(--tma-ease);
}
.tma-yt-empty__cta:hover,
.tma-yt-empty__cta:focus-visible {
	background: transparent;
	color: var(--tma-gold);
	text-decoration: none;
	outline: none;
}
.tma-yt-empty__icon {
	font-size: 0.75rem;
	transform: translateY(-1px);
}
.tma-yt-empty__admin {
	margin: 0.5rem 0 0;
	padding: 0.625rem 1rem;
	background: rgba(245, 197, 24, 0.06);
	border: 1px dashed var(--tma-gold-deep);
	border-radius: 6px;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--tma-warm-gray);
	max-width: 48ch;
}
.tma-yt-empty__admin a {
	color: var(--tma-gold);
}

/* Legacy class kept for back-compat — older posts using inline error markup */
.tma-yt-error {
	padding: 1.5rem;
	background: var(--tma-near-black);
	border: 1px solid var(--tma-mid-gray);
	border-radius: 12px;
	color: var(--tma-warm-gray);
	font-style: italic;
	text-align: center;
}

/* ============================================================
   6.7 TRANSCRIPT CATALOGUE (v1.4.0)
   Used on home.html (the assigned Posts Page) — styles transcripts
   as a video catalogue rather than a generic blog list.
   ============================================================ */

.tma-catalogue-title {
	margin: 0 0 1rem;
	color: var(--tma-off-white);
}
.tma-catalogue-lede,
.tma-catalogue-lede p {
	color: var(--tma-warm-gray);
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 64ch;
}

.tma-archive-title {
	color: var(--tma-off-white);
}
.tma-archive-lede {
	/* Width-cap for comfortable reading. */
	max-width: 64ch;
}
/* The WP block layout system applies
   `.is-layout-constrained > * { margin-inline: auto !important }` which
   would centre our 64ch column inside the 1100px content region. The
   `!important` in core's rule beats specificity alone, so we have to
   match it with `!important` on our override. The selector is tightened
   so the override only applies in this specific archive context. */
.is-layout-constrained > .tma-archive-lede {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.tma-transcript-card {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}
.tma-transcript-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	background: var(--tma-charcoal);
	aspect-ratio: 16 / 9;
}
.tma-transcript-card .wp-block-post-featured-image img,
.tma-transcript-card .wp-block-post-featured-image figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 320ms ease;
}
.tma-transcript-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.tma-transcript-card .wp-block-post-featured-image a {
	display: block;
	position: relative;
}
.tma-transcript-card .wp-block-post-featured-image a::after {
	content: "\25B6";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.65);
	color: var(--tma-gold);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px;
	box-shadow: 0 0 0 2px var(--tma-gold);
	transition: background var(--tma-ease), transform var(--tma-ease);
}
.tma-transcript-card .wp-block-post-featured-image a:hover::after {
	background: var(--tma-gold);
	color: var(--tma-black);
	transform: translate(-50%, -50%) scale(1.06);
}

.tma-transcript-card__body {
	display: flex !important;
	flex-direction: column;
	flex: 1;
}
.tma-transcript-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}
.tma-transcript-card__title a:hover,
.tma-transcript-card__title a:focus-visible {
	color: var(--tma-gold) !important;
}
.tma-transcript-card__meta {
	margin-top: auto !important;
	padding-top: 8px;
}
.tma-transcript-card__meta .tma-meta-readingtime,
.tma-transcript-card__meta .tma-meta-updated {
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--tma-warm-gray);
}

/* Equal-height cards inside the post-template grid (catalogue uses post-template
   not the wp-block-post wrapper, so we target both forms). */
.tma-transcript-grid > li {
	display: flex;
}
.tma-transcript-grid > li > .tma-transcript-card {
	width: 100%;
}

/* YouTube thumbnail fallback — used by inc/youtube-thumb-fallback.php
   when a transcript has a video ID but no featured image attached. */
.tma-yt-fallback {
	background: var(--tma-charcoal);
}

/* When YouTube returns its 120×90 "video unavailable" placeholder
   (private/deleted/unlisted videos respond HTTP 200 with this
   placeholder rather than 404 — onerror never fires), the onload
   handler in the rendered img inspects naturalWidth and adds
   .is-unavailable when ≤ 120. CSS then hides the img and reveals the
   inline <svg> sibling that ships alongside it. The SVG renders the
   theme-bundled "TMA / VIDEO TRANSCRIPT" placeholder. */
.tma-yt-fallback img.is-unavailable {
	display: none;
}
.tma-yt-fallback img.is-unavailable + .tma-yt-fallback__svg {
	display: block !important;
}

@media (max-width: 720px) {
	.tma-transcript-card .wp-block-post-featured-image a::after {
		width: 48px;
		height: 48px;
		font-size: 16px;
	}
}

/* ----- YouTube sidebar widget ----- */
.tma-yt-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.tma-yt-widget-item a {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 0.75rem;
	align-items: start;
	text-decoration: none;
	color: inherit;
	padding: 0.5rem;
	border-radius: 4px;
	transition: background 200ms ease;
}
.tma-yt-widget-item a:hover { background: rgba(218, 165, 32, 0.08); }
.tma-yt-widget-item img {
	width: 120px;
	height: 68px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.tma-yt-widget-title {
	display: block;
	font-family: var(--tma-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--tma-off-white);
	margin-bottom: 0.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tma-yt-widget-date {
	display: block;
	font-family: var(--tma-font-body);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tma-warm-gray);
}
.tma-yt-widget-cta {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background: var(--tma-gold);
	color: var(--tma-deep-black);
	font-family: var(--tma-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 8px;
	transition: filter 200ms ease;
}
.tma-yt-widget-cta:hover { filter: brightness(1.15); }

/* ============================================================
   6. LAYOUT HELPERS
   ============================================================ */

/* ----- Buttons (override parent theme hover) ----- */
.wp-block-button__link,
.wp-element-button {
	transition: filter 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
/* Solid gold CTA → brighten on hover, never go transparent */
.wp-block-button__link.has-tma-gold-background-color:hover,
.wp-block-button__link.has-tma-gold-background-color:focus-visible {
	background-color: var(--tma-gold-light) !important;
	color: var(--tma-deep-black) !important;
	filter: brightness(1.05);
}
/* Outline button → fill with off-white on hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--tma-off-white) !important;
	color: var(--tma-deep-black) !important;
	border-color: var(--tma-off-white) !important;
}
.wp-site-blocks > main {
	min-height: 60vh;
}

/* ============================================================
   6.5 SEO + AUTHORSHIP COMPONENTS (v1.3.0)
   ============================================================ */

/* ============================================================
   6.6 SEARCH RESULTS PAGE (v1.4.28)
   ============================================================
   Editorial list-style results with proper metadata, themed
   search form, and a clean empty state.
   See templates/search.html for the markup.
   ============================================================ */

/* --- Headline block ---------------------------------------- */
.tma-search-head {
	margin-bottom: 8px;
}
.tma-search-title {
	color: var(--tma-off-white);
}
/* Quote marks around the searched term — slightly muted so the
   search query reads as "the term you searched" rather than
   shouting at the reader. */
.tma-search-title em,
.tma-search-title i {
	color: var(--tma-off-white);
	font-style: normal;
}
.tma-search-count {
	margin-top: 4px !important;
}

/* --- Search form ------------------------------------------- */
/* Restyle WordPress's core search block to fit the dark editorial
   theme. Default WP search renders a white input + gray button
   that fights with the page; the rules below produce a dark input
   with a gold pill button instead. */
.tma-search-form .wp-block-search__inside-wrapper {
	background: var(--tma-charcoal);
	border: 1px solid var(--tma-mid-gray);
	border-radius: 999px;
	padding: 6px 6px 6px 22px;
	transition: border-color 200ms ease;
}
.tma-search-form .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--tma-gold);
}
.tma-search-form .wp-block-search__input {
	background: transparent !important;
	border: 0 !important;
	color: var(--tma-off-white) !important;
	font-family: var(--tma-font-body);
	font-size: 16px;
	padding: 12px 0;
	flex: 1;
	min-width: 0;
}
.tma-search-form .wp-block-search__input::placeholder {
	color: var(--tma-warm-gray);
	opacity: 0.6;
}
.tma-search-form .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}
.tma-search-form .wp-block-search__button {
	background: var(--tma-gold) !important;
	color: var(--tma-black) !important;
	border: 0 !important;
	border-radius: 999px;
	padding: 10px 24px !important;
	font-family: var(--tma-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}
.tma-search-form .wp-block-search__button:hover,
.tma-search-form .wp-block-search__button:focus-visible {
	background: var(--tma-off-white) !important;
}

/* --- Result list ------------------------------------------- */
/* Each result is a left-aligned article card with a flat
   background and a subtle hover lift. No gold-bordered "tma-card"
   styling here — that's reserved for featured content on the
   front page. Search results need to scan as a uniform list,
   not as a series of featured cards. */
.tma-search-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tma-search-results > li {
	margin: 0;
}
.tma-search-result {
	background: var(--tma-charcoal);
	border-radius: 6px;
	transition: background-color 200ms ease, transform 200ms ease;
}
.tma-search-result:hover {
	background: var(--tma-dark-gray);
}

/* Meta row — post-type label (gold) + date (warm-gray).
   Compact uppercase bar above the title, signalling at a glance
   what kind of content this result is. */
.tma-search-result__meta {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: var(--tma-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 !important;
}
.tma-search-result__type {
	color: var(--tma-gold);
}
.tma-search-result__date,
.tma-search-result__date a,
.tma-search-result__date time {
	color: var(--tma-warm-gray);
	margin: 0 !important;
}
/* Visual separator between type and date — a small gold dot */
.tma-search-result__meta .tma-search-result__type::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--tma-gold);
	margin: 0 0 2px 12px;
	vertical-align: middle;
	opacity: 0.75;
}

/* Title — Playfair, generous size, linked to the post.
   Default colour is off-white; hover takes it to gold. */
.tma-search-result__title {
	margin: 0 !important;
}
.tma-search-result__title a {
	color: var(--tma-off-white);
	text-decoration: none;
	transition: color 200ms ease;
}
.tma-search-result__title a:hover,
.tma-search-result__title a:focus-visible {
	color: var(--tma-gold);
	text-decoration: none;
}

/* Excerpt — warm-gray prose at editorial body size. */
.tma-search-result__excerpt {
	margin: 0 !important;
}

/* --- Empty state ------------------------------------------- */
.tma-search-empty {
	background: var(--tma-charcoal);
	border-radius: 6px;
	text-align: left;
}
.tma-search-empty__title {
	color: var(--tma-off-white);
}

/* --- Pagination -------------------------------------------- */
.tma-search-pagination {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--tma-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.tma-search-pagination a,
.tma-search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	color: var(--tma-warm-gray);
	background: var(--tma-charcoal);
	border: 1px solid var(--tma-mid-gray);
	text-decoration: none;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.tma-search-pagination a:hover,
.tma-search-pagination a:focus-visible {
	color: var(--tma-gold);
	border-color: var(--tma-gold);
}
.tma-search-pagination .page-numbers.current {
	color: var(--tma-black);
	background: var(--tma-gold);
	border-color: var(--tma-gold);
}
.tma-search-pagination .wp-block-query-pagination-previous,
.tma-search-pagination .wp-block-query-pagination-next {
	color: var(--tma-warm-gray);
	background: var(--tma-charcoal);
	border: 1px solid var(--tma-mid-gray);
	border-radius: 999px;
	padding: 0 18px;
	text-decoration: none;
	transition: color 200ms ease, border-color 200ms ease;
}
.tma-search-pagination .wp-block-query-pagination-previous:hover,
.tma-search-pagination .wp-block-query-pagination-next:hover {
	color: var(--tma-gold);
	border-color: var(--tma-gold);
}

/* --- Mobile breakpoint ------------------------------------- */
@media (max-width: 600px) {
	.tma-search-result {
		padding: 20px 22px !important;
	}
	.tma-search-result__title {
		font-size: 20px !important;
	}
}

/* --- Footer (v1.4.21 redesign) -----------------------------
   Centered editorial composition that mirrors the verse-banner
   block at the top of the page. Single column stack:
   logo → wordmark → tagline → social row → ornamental rule →
   copyright + secondary nav. The page opens and closes with the
   same star-flanked rule pattern, giving the layout a deliberate
   editorial frame.

   The previous .tma-footer-identity grid is no longer used by
   the bundled footer markup but the rule is left in place for
   any operator who might have customised parts/footer.html
   directly and is using the legacy class.
*/

.tma-footer-v2 {
	text-align: center;
	border-top: 12px solid var(--tma-gold);
}

.tma-footer-stack {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.tma-footer-stack > .wp-block-site-logo,
.tma-footer-stack > .wp-block-social-links,
.tma-footer-stack > p {
	margin: 0;
}
.tma-footer-stack .wp-block-site-logo,
.tma-footer-stack .wp-block-site-logo a,
.tma-footer-stack .wp-block-site-logo img {
	display: inline-block;
}
.tma-footer-stack .wp-block-site-logo img {
	width: 72px;
	height: auto;
}
.tma-footer-stack .tma-wordmark {
	font-size: 28px;
	line-height: 1;
}

/* Tagline — Playfair italic, warm-gray, sits between the
   wordmark and the social row. Replaces the v1.4.20 and earlier
   "About the site" eyebrow + paragraph in the right column. */
.tma-footer-tagline {
	font-family: var(--tma-font-display, 'Playfair Display', serif);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.55;
	max-width: 540px;
	margin: 0 !important;
}

/* Social row — centered, slightly larger than v1.4.20 (36px touch
   target with 18px glyph) so it has visual weight as the only
   action affordance in the footer. */
.tma-footer-stack .wp-block-social-links {
	justify-content: center;
	flex-wrap: wrap;
}
.tma-footer-stack .wp-block-social-links .wp-social-link {
	width: 36px;
	height: 36px;
	border-radius: 999px;
}
.tma-footer-stack .wp-block-social-links .wp-social-link svg {
	width: 18px;
	height: 18px;
}

/* Footer main section — wraps the centered identity stack.
   Padding lives here rather than on the footer element itself so the
   sub-footer strip below can extend its background colour edge-to-edge
   without negative-margin tricks. */
.tma-footer-main {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

/* Sub-footer strip — full-width band with a darker background that
   sets it apart from the main footer as a distinct fine-print zone.
   Standard editorial pattern (WSJ, Bloomberg, NYT use variations).
   The bg-colour shift functions as the section separator; no
   horizontal rule needed. */
.tma-footer-substrip {
	width: 100%;
}

/* Inner container of the sub-footer strip — constrained to 1320px so
   the secondary nav and copyright align with the main section's
   content edges. */
.tma-footer-substrip__inner {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

/* Mobile breakpoint */
@media (max-width: 720px) {
	.tma-footer-main {
		padding: 56px 24px 48px !important;
	}
	.tma-footer-substrip {
		padding: 20px 24px !important;
	}
	.tma-footer-stack {
		gap: 20px;
	}
	.tma-footer-stack .tma-wordmark {
		font-size: 24px;
	}
	.tma-footer-tagline {
		font-size: 16px;
	}
}

/* --- Footer identity (legacy, v1.4.15 — v1.4.20) ------------
   Kept for backward compat with any custom footer.html that
   still references this class. Bundled markup as of v1.4.21
   uses .tma-footer-stack instead. */
.tma-footer-identity {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 18px;
	row-gap: 24px;
}
.tma-footer-identity > .wp-block-site-logo {
	grid-column: 1;
	grid-row: 1;
}
.tma-footer-identity > .tma-wordmark,
.tma-footer-identity > p:has(.tma-wordmark),
.tma-footer-identity > .wp-block-html .tma-wordmark {
	grid-column: 2;
	grid-row: 1;
}
.tma-footer-identity > .wp-block-social-links,
.tma-footer-identity > .tma-footer-social {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
}
@media (max-width: 720px) {
	.tma-footer-identity {
		grid-template-columns: auto auto;
	}
	.tma-footer-identity > .wp-block-social-links,
	.tma-footer-identity > .tma-footer-social {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* --- Quora social link (v1.4.15) ---------------------------
   WordPress core has no Quora service in core/social-link, so the
   footer markup uses service="chain" with className="tma-social-quora".
   We replace the chain icon's SVG content with a Quora "Q" glyph in
   inc/theme-options.php tma_render_social_links(), and the CSS here
   ensures the Quora-tinted background matches Quora's brand red.
*/
.wp-block-social-links.is-style-outline .wp-social-link.tma-social-quora,
.wp-block-social-links .wp-social-link.tma-social-quora {
	color: #B92B27;
}
.wp-block-social-links .wp-social-link.tma-social-quora:hover {
	background-color: #B92B27;
	color: #FFFFFF;
}

/* --- Footer bottom strip (v1.3.1, fixed v1.4.16) ----------- */

/* The full-width gradient rule that separates the brand-lockup from the
   bottom strip. WordPress's default .wp-block-separator is a short
   centered hairline (margin: 0 auto + ~100px width); the explicit
   width:100% + max-width:none below override that so our gradient
   spans edge-to-edge as designed. */
.tma-footer-rule {
	border: 0;
	height: 1px;
	width: 100%;
	max-width: none;
	margin: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--tma-gold-deep) 20%,
		var(--tma-gold) 50%,
		var(--tma-gold-deep) 80%,
		transparent 100%
	);
	opacity: 0.65;
}

/* Two-end horizontal layout: nav on the left, copy on the right.
   Sample reference: UP6 Suara Semasa footer's bottom strip.
   Mobile breakpoint collapses to centered column stack so neither
   end gets squeezed at narrow widths. */
.tma-footer-bottom {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	text-align: left;
}

.tma-footer-copy {
	margin: 0 !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: right;
}

@media (max-width: 720px) {
	.tma-footer-bottom {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	.tma-footer-copy {
		text-align: center;
	}
}

/* Secondary nav — pill rollovers with middot separators */
.tma-footer-secondary {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 2px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

.tma-footer-secondary a {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	color: var(--tma-warm-gray);
	text-decoration: none;
	border: 1px solid transparent;
	transition:
		color var(--tma-ease),
		background-color var(--tma-ease),
		border-color var(--tma-ease);
}

.tma-footer-secondary a:hover,
.tma-footer-secondary a:focus-visible {
	color: var(--tma-gold);
	background-color: rgba(245, 197, 24, 0.08); /* var(--tma-gold) at low alpha */
	border-color: var(--tma-gold);
	text-decoration: none;
	outline: none;
}

.tma-footer-sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 4px;
	border-radius: 50%;
	background: var(--tma-gold);
	flex-shrink: 0;
}

@media (max-width: 540px) {
	.tma-footer-secondary {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}
	.tma-footer-secondary a {
		padding: 0.35rem 0.7rem;
	}
	.tma-footer-sep {
		margin: 0 2px;
	}
}

/* When the operator assigns a custom menu to the "Footer secondary"
   location via Appearance → Menus, inc/footer-secondary-menu.php
   adds .tma-has-footer-secondary-menu to the <body> tag and the
   shortcode renders the menu via wp_nav_menu(). The hardcoded fallback
   <nav class="tma-footer-secondary--fallback"> in parts/footer.html
   then needs to be hidden so we don't render two copies. */
body.tma-has-footer-secondary-menu .tma-footer-secondary--fallback {
	display: none;
}

/* Style the wp_nav_menu output (a <ul> of <li><a>) to look like the
   hardcoded inline pill-row. Without this, wp_nav_menu's default <ul>
   renders as a vertical bulleted list. */
.tma-footer-secondary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 2px;
}
.tma-footer-secondary__list li {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
}
/* Gold-middot separator between items, matching the hardcoded
   <span class="tma-footer-sep"> dots. Skipped after the last item. */
.tma-footer-secondary__list li + li::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 4px;
	border-radius: 50%;
	background: var(--tma-gold);
	flex-shrink: 0;
}
@media (max-width: 540px) {
	.tma-footer-secondary__list li + li::before {
		margin: 0 2px;
	}
}

/* --- Breadcrumbs ------------------------------------------- */

.tma-breadcrumbs {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
}
.tma-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tma-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--tma-warm-gray);
}
.tma-breadcrumbs__link {
	color: var(--tma-gold-muted);
	text-decoration: none;
	transition: color var(--tma-ease);
}
.tma-breadcrumbs__link:hover,
.tma-breadcrumbs__link:focus-visible {
	color: var(--tma-gold);
}
.tma-breadcrumbs__current {
	color: var(--tma-off-white);
}
.tma-breadcrumbs__sep {
	color: var(--tma-mid-gray);
	font-weight: 400;
}

/* --- Post-meta inline elements ---------------------------- */

.tma-meta-readingtime,
.tma-meta-updated {
	color: var(--tma-warm-gray);
	font-weight: 700;
}
.tma-meta-updated time {
	color: inherit;
}

/* --- Author profile page ---------------------------------- */

.tma-author-profile {
	max-width: 880px;
}
.tma-author-profile__head {
	gap: 32px !important;
}
.tma-author-profile__avatar {
	width: 128px;
	height: 128px;
	flex: 0 0 128px;
	border-radius: 50%;
	background: var(--tma-charcoal);
	border: 2px solid var(--tma-gold);
	display: flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.tma-author-profile__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.tma-author-profile__avatar p {
	margin: 0;
}
.tma-author-profile__heading {
	flex: 1;
	min-width: 0;
}
.tma-author-profile__eyebrow {
	margin-bottom: 4px !important;
}
.tma-author-profile__name {
	margin: 0 !important;
	color: var(--tma-off-white);
	font-weight: 700;
	line-height: 1.05;
}
.tma-author-profile__credentials {
	margin: 0 !important;
}
.tma-author-profile__bio {
	color: var(--tma-off-white);
	max-width: 64ch;
}
.tma-author-profile__social {
	margin-top: 0 !important;
}

@media (max-width: 720px) {
	.tma-author-profile__head {
		flex-direction: column;
		align-items: flex-start !important;
	}
	.tma-author-profile__avatar {
		width: 96px;
		height: 96px;
		flex-basis: 96px;
	}
}

/* ============================================================
   7. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   8. LIGHTBOX2 THEME OVERRIDES (v1.4.8)
   Re-skin Lokesh Dhakar's Lightbox2 to match the TMA dark register.
   Overrides target the lb-* selectors emitted by lightbox.min.js;
   nothing here changes Lightbox2's behaviour, only its appearance.
   ============================================================ */

/* Backdrop — deeper than the default 0.8 so the image sits on true black */
.lightboxOverlay {
	background: var(--tma-deep-black, #050505) !important;
	opacity: 0.92 !important;
}

/* Image frame — match the theme's surface colour, lose the white bezel */
.lb-outerContainer {
	background: var(--tma-dark-gray) !important;
	border-radius: 12px !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}
.lb-container {
	padding: 8px !important;
}

/* Caption + counter strip — dark surface, off-white text, gold accents */
.lb-dataContainer {
	background: var(--tma-near-black) !important;
	border-radius: 0 0 12px 12px !important;
	margin-top: -4px;
	padding: 12px 16px !important;
}
.lb-data .lb-caption,
.lb-data .lb-number {
	color: var(--tma-off-white) !important;
	font-family: var(--tma-font-body) !important;
}
.lb-data .lb-caption {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
}
.lb-data .lb-number {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.10em !important;
	text-transform: uppercase !important;
	color: var(--tma-warm-gray) !important;
}

/* Close button — gold tint on hover instead of the default opacity bump */
.lb-data .lb-close {
	opacity: 0.7;
	transition: opacity 200ms ease, filter 200ms ease;
}
.lb-data .lb-close:hover {
	opacity: 1;
	filter: drop-shadow(0 0 6px rgba(245, 197, 24, 0.5));
}

/* Loading spinner — recolour the default spinner ring would require sprite
   replacement; instead we tint the loader area slightly so the GIF reads
   correctly against the darker backdrop. */
.lb-loader {
	filter: brightness(1.1);
}

/* Reduced-motion: kill lightbox animations for users who request it */
@media (prefers-reduced-motion: reduce) {
	.lightbox,
	.lightboxOverlay,
	.lb-outerContainer,
	.lb-image {
		transition: none !important;
		animation: none !important;
	}
}


/* ============================================================
   Front-end UI components — search highlighting, secondary
   title (dek), social share, Wikipedia preview popups, related
   posts grid, and voting widget. Each section's classes only
   take effect when the corresponding feature is toggled on
   in Theme Options → Features and emits markup.
   ============================================================ */


/* ----- Highlight Search Terms ------------------------------ */
mark.tma-mark,
.tma-search-result mark,
.entry-content mark {
	background: rgba(245, 197, 24, 0.14);
	color: var(--tma-off-white, #F0F0F0);
	font-weight: 700;
	padding: 0 2px;
	border-bottom: 1px solid var(--tma-gold, #F5C518);
	border-radius: 2px;
}


/* ----- Secondary Title (.tma-dek) -------------------------- */
.tma-dek {
	display: block;
	margin-top: 14px;
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.4;
	color: var(--tma-warm-gray, #A0A0A0);
	letter-spacing: 0.01em;
}


/* ----- Social Share ---------------------------------------- */
.tma-share {
	margin: 48px 0 8px;
	padding: 24px 0;
	border-top: 1px solid var(--tma-mid-gray, #4A4A4A);
	border-bottom: 1px solid var(--tma-mid-gray, #4A4A4A);
}
.tma-share__heading {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tma-gold, #F5C518);
	margin: 0 0 16px;
}
.tma-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tma-share__item {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tma-share__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--tma-off-white, #F0F0F0);
	background: var(--tma-charcoal, #1A1A1A);
	border: 1px solid var(--tma-mid-gray, #4A4A4A);
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tma-share__link:hover,
.tma-share__link:focus-visible {
	background: var(--tma-gold, #F5C518);
	border-color: var(--tma-gold, #F5C518);
	color: var(--tma-black, #0A0A0A);
}
.tma-share__link.is-copied {
	background: var(--tma-gold, #F5C518);
	border-color: var(--tma-gold, #F5C518);
	color: var(--tma-black, #0A0A0A);
}


/* ----- Wikipedia Preview ----------------------------------- */
.tma-wp-popup {
	position: absolute;
	z-index: 9999;
	background: var(--tma-charcoal, #1A1A1A);
	color: var(--tma-off-white, #F0F0F0);
	border: 1px solid var(--tma-mid-gray, #4A4A4A);
	border-radius: 6px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	font-family: 'Inter', system-ui, sans-serif;
}
.tma-wp-popup.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.tma-wp-popup__thumb {
	width: 100%;
	height: 140px;
	overflow: hidden;
	background: var(--tma-dark-gray, #2A2A2A);
}
.tma-wp-popup__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tma-wp-popup__body {
	padding: 16px 18px;
}
.tma-wp-popup__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--tma-off-white, #F0F0F0);
	line-height: 1.25;
}
.tma-wp-popup__extract {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--tma-warm-gray, #A0A0A0);
	margin: 0 0 12px;
}
.tma-wp-popup__footer {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--tma-mid-gray, #4A4A4A);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}
.tma-wp-popup__footer a {
	color: var(--tma-gold, #F5C518);
	text-decoration: none;
}
.tma-wp-popup__footer a:hover {
	text-decoration: underline;
}
.tma-wp-popup__loading,
.tma-wp-popup__error {
	padding: 18px;
}
.tma-wp-popup__error p {
	margin: 0 0 8px;
	font-size: 0.88rem;
	color: var(--tma-warm-gray, #A0A0A0);
}
.tma-wp-popup__error a {
	color: var(--tma-gold, #F5C518);
}
.tma-wp-popup__line {
	display: block;
	height: 10px;
	margin-bottom: 10px;
	background: linear-gradient(to right,
		var(--tma-mid-gray, #4A4A4A),
		var(--tma-dark-gray, #2A2A2A),
		var(--tma-mid-gray, #4A4A4A));
	background-size: 200% 200%;
	border-radius: 2px;
	animation: tma-wp-shimmer 1.6s ease infinite;
}
.tma-wp-popup__line--lg { width: 100%; }
.tma-wp-popup__line--md { width: 78%; }
.tma-wp-popup__line--sm { width: 56%; }
@keyframes tma-wp-shimmer {
	0%   { background-position: 0% 0%; }
	50%  { background-position: 100% 100%; }
	100% { background-position: 0% 0%; }
}


/* ----- Related Posts --------------------------------------- */
.tma-related {
	margin: 56px 0 8px;
	padding-top: 32px;
	border-top: 1px solid var(--tma-mid-gray, #4A4A4A);
}
.tma-related__heading {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tma-gold, #F5C518);
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}
.tma-related__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (max-width: 720px) {
	.tma-related__grid { grid-template-columns: 1fr; gap: 20px; }
}
.tma-related__card {
	background: var(--tma-charcoal, #1A1A1A);
	border: 1px solid var(--tma-mid-gray, #4A4A4A);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.tma-related__thumb-link {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--tma-dark-gray, #2A2A2A);
}
.tma-related__thumb-link img,
.tma-related__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}
.tma-related__card:hover .tma-related__thumb {
	transform: scale(1.03);
}
.tma-related__body {
	padding: 18px 20px 20px;
}
.tma-related__type {
	display: inline-block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	color: var(--tma-gold, #F5C518);
	margin-bottom: 8px;
}
.tma-related__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 10px;
}
.tma-related__title a {
	color: var(--tma-off-white, #F0F0F0);
	text-decoration: none;
}
.tma-related__title a:hover {
	color: var(--tma-gold, #F5C518);
}
.tma-related__date {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8rem;
	color: var(--tma-warm-gray, #A0A0A0);
}


/* ----- Vote It Up ------------------------------------------ */
.tma-vote {
	margin: 40px 0 8px;
	padding: 24px;
	background: var(--tma-charcoal, #1A1A1A);
	border: 1px solid var(--tma-mid-gray, #4A4A4A);
	border-radius: 4px;
}
.tma-vote__heading {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tma-gold, #F5C518);
	margin: 0 0 14px;
}
.tma-vote__buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.tma-vote__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tma-off-white, #F0F0F0);
	background: var(--tma-dark-gray, #2A2A2A);
	border: 1px solid var(--tma-mid-gray, #4A4A4A);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tma-vote__btn:hover {
	border-color: var(--tma-gold, #F5C518);
	color: var(--tma-gold, #F5C518);
}
.tma-vote__btn.is-active {
	background: var(--tma-gold, #F5C518);
	border-color: var(--tma-gold, #F5C518);
	color: var(--tma-black, #0A0A0A);
}
.tma-vote__icon {
	font-size: 1.05rem;
	line-height: 1;
}
.tma-vote__count {
	font-variant-numeric: tabular-nums;
}
.tma-vote__status {
	margin: 12px 0 0;
	min-height: 1.2em;
	font-size: 0.82rem;
	color: var(--tma-warm-gray, #A0A0A0);
}