/*
Theme Name: FamousTube Child
Theme URI: https://www.wp-script.com/adult-wordpress-themes/famoustube/
Template: famoustube
Description: Child theme for FamousTube that adds an actor profile section (photo, name, birth info, country) to the actor taxonomy pages.
Author:
Version: 1.2.0
Text Domain: famoustube-child
*/

/* ==========================================================================
   Shared country-flag component (famoustube_child_render_country_flag_span()
   in inc/country-flags.php) — the ONE place this is styled, used by both
   the Actors directory rows and the actor profile page's Country row.

   This is a real <img> pointing at a local SVG (assets/flags/{code}.svg),
   not a Unicode emoji — Unicode regional-indicator flags don't render as
   flags on Windows/Chrome (they show as bare letters, e.g. "US"), and
   the previous WordPress-emoji-to-<img> conversion this replaced pulled
   from a third-party CDN unreliably. A local SVG has no such dependency
   and renders identically everywhere.

   Explicit width/height/max-width/max-height (not just the img's own
   width/height HTML attributes) so no generic FamousTube image rule can
   stretch it — scoped to this class only, never a bare `img` selector.
   ========================================================================== */

.ftc-country-flag {
	display: inline-block;
	width: 20px;
	height: 14px;
	max-width: 20px;
	max-height: 14px;
	margin-right: 6px;
	vertical-align: middle;
	object-fit: contain;
}

/* Actor profile Country row only: flag now renders AFTER the country
   name in the markup (template-parts/actor-profile.php), so the gap
   needs to flip sides here without touching the shared .ftc-country-flag
   rule above, which the Actors directory rows still use with the flag
   first. */
.ftc-actor-profile__value .ftc-country-flag {
	margin-right: 0;
	margin-left: 6px;
}

/* ==========================================================================
   Birthday Today cake icon (Stats Bar, template-actors.php) — same
   technique as .ftc-country-flag above and for the same reason: the
   emoji character lives in a data-emoji attribute rather than as element
   text, drawn via `content: attr(data-emoji)`, so WordPress's
   client-side emoji script (which only scans real DOM text nodes) has
   nothing to find and can't convert it into an oversized <img class=
   "emoji"> pulled from a third-party CDN. The img.emoji rule is a
   defensive fallback only — with no emoji text present, WordPress has
   nothing to convert, so it should never actually apply.
   ========================================================================== */

.ftc-birthday-icon {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
	line-height: 1;
	vertical-align: middle;
}

.ftc-birthday-icon::before {
	content: attr(data-emoji);
}

.ftc-birthday-icon img.emoji {
	width: 1.1em !important;
	height: 1.1em !important;
	max-width: 1.1em !important;
	max-height: 1.1em !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
}

/* ==========================================================================
   Actor profile section (taxonomy-actors.php)
   Scoped entirely to .ftc-actor-profile and, for the heading/filter
   handoff below it, to body.tax-actors so nothing here leaks onto other
   archive pages (category, tag, search) that reuse the same page-header
   and #filters markup.
   ========================================================================== */

.ftc-actor-profile {
	--ftc-accent: #fc8fd2;
	--ftc-bg: #0c0c0c;
	--ftc-bg-alt: #151515;
	--ftc-border: rgba(255, 255, 255, 0.08);
	--ftc-text: #ffffff;
	--ftc-text-muted: #a3a3a3;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 20px 0 0;
	padding: 16px;
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
	box-sizing: border-box;
}

.ftc-actor-profile__image {
	flex: 0 0 auto;
	width: 160px;
}

.ftc-actor-profile__image .ftc-actor-profile__image-el {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--ftc-border);
	background: var(--ftc-bg-alt);
}

.ftc-actor-profile__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ftc-actor-profile__name {
	margin: 0;
	color: var(--ftc-text);
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.01em;
	word-break: break-word;
}

.ftc-actor-profile__accent {
	display: block;
	width: 44px;
	height: 3px;
	margin: 10px 0 12px;
	background: var(--ftc-accent);
	border-radius: 2px;
}

.ftc-actor-profile__details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.ftc-actor-profile__row {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
	font-size: 0.95rem;
	line-height: 1.6;
}

.ftc-actor-profile__label {
	flex: 0 0 auto;
	color: var(--ftc-accent);
	font-weight: 600;
}

.ftc-actor-profile__value {
	color: var(--ftc-text);
	font-weight: 400;
}

/* Missing-data fallback: muted, not accent, never a link. */
.ftc-actor-profile__value--na {
	color: var(--ftc-text-muted);
}

/* Name self-link: purely functional, must not change how the name looks. */
.ftc-actor-profile__name-link {
	color: inherit;
	text-decoration: none;
}

/* Country value link: light text normally, accent on hover/focus. */
.ftc-actor-profile__country-link {
	color: var(--ftc-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.ftc-actor-profile__country-link:hover,
.ftc-actor-profile__country-link:focus-visible {
	color: var(--ftc-accent);
	border-bottom-color: var(--ftc-accent);
	outline: none;
}

.ftc-actor-profile__count {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ftc-text-muted);
}

.ftc-actor-profile__count-num {
	color: var(--ftc-accent);
	font-weight: 600;
}

@media (min-width: 768px) {
	.ftc-actor-profile {
		flex-direction: row;
		align-items: flex-start;
		gap: 20px;
		padding: 18px 24px;
	}

	.ftc-actor-profile__image {
		width: 200px;
	}

	.ftc-actor-profile__info {
		flex: 0 1 560px;
		max-width: 560px;
		align-items: flex-start;
		text-align: left;
	}

	.ftc-actor-profile__accent {
		margin: 10px 0 14px;
	}

	.ftc-actor-profile__details {
		align-items: flex-start;
	}

	.ftc-actor-profile__row {
		justify-content: flex-start;
	}

	/* Wide enough for "Age at death" (shown for deceased performers) without wrapping. */
	.ftc-actor-profile__label {
		width: 110px;
	}
}

/* ==========================================================================
   Visual handoff from the profile into the existing video section.
   Recolors/tightens the parent theme's page-header + filters so they read
   as a continuation of the profile above, and puts the heading + existing
   sort control in one aligned row on desktop. No markup, text-format,
   query, sort, or pagination logic is touched here — only positioning and
   color of the existing elements. Scoped to the actor archive only.
   ========================================================================== */

body.tax-actors .page-header {
	position: relative;
	margin-top: 0;
	padding-top: 14px;
	padding-bottom: 16px;
	border-top: 1px solid rgba(252, 143, 210, 0.18);
}

body.tax-actors .page-header .widget-title {
	margin: 0 0 12px;
	color: #ffffff;
	font-size: 1.375rem;
	font-weight: 600;
}

body.tax-actors #filters .filters-options a {
	color: #e5e5e5;
}

body.tax-actors #filters .filters-options a:hover,
body.tax-actors #filters .filters-options a.active {
	color: #fc8fd2;
}

/* Desktop: heading left, existing sort control right, same row. */
@media (min-width: 768px) {
	body.tax-actors .page-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 20px;
	}

	body.tax-actors .page-header .widget-title {
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * #filters is position:absolute in the parent theme (it anchors its
	 * own hover dropdown, .filters-options, at top:100%; right:-9px).
	 * Switching it to position:relative keeps that same anchor behavior
	 * (relative elements are still a valid containing block) while
	 * letting it flow as a normal flex item next to the heading instead
	 * of floating in the top-right corner of the whole page-header.
	 */
	body.tax-actors .page-header #filters {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		margin: 0;
		flex: 0 0 auto;
	}
}

/*
 * The parent theme hides #filters entirely below 768px on every archive
 * page (custom.css, @media max-width: 767.98px). That existing rule is
 * untouched. This override re-enables and re-flows just the actor pages'
 * copy of the same control (identical markup/links/hover dropdown) so it
 * stacks under the heading instead of staying hidden.
 *
 * It also fixes the dropdown overflowing past the left edge of the
 * viewport: the parent's .filters-options is anchored by its RIGHT edge
 * (right:-9px) to .filters-select, which on narrow screens sits close to
 * the left of the screen, so the ~200px-wide panel expanded off-screen
 * to the left. Re-anchoring to left:0 on the (now full-width)
 * .filters-select container keeps it inside the viewport.
 */
@media (max-width: 767.98px) {
	body.tax-actors {
		overflow-x: hidden;
	}

	body.tax-actors #filters {
		display: block;
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		margin: 0;
	}

	body.tax-actors #filters .filters-select {
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 14px;
		background: #151515;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		color: #ffffff;
		font-size: 0.9rem;
		line-height: 1.4;
		height: auto;
	}

	body.tax-actors #filters .filters-options {
		left: 0;
		right: auto;
		top: 100%;
		margin-top: 6px;
		min-width: 220px;
		width: max-content;
		max-width: calc(100vw - 40px);
		box-sizing: border-box;
	}

	body.tax-actors #filters .filters-options span {
		width: 100%;
	}

	body.tax-actors #filters .filters-options span a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 16px;
		box-sizing: border-box;
		white-space: normal;
	}
}

/* ==========================================================================
   Main Actors directory (template-actors.php) — text-only performer list
   with search/autocomplete, A–Z browsing, sort, and country filter.
   Scoped to body.page-template-template-actors-php, the class WordPress
   adds automatically for pages using this specific template, so nothing
   here affects the Categories directory or any other page.
   ========================================================================== */

body.page-template-template-actors-php .ftc-directory {
	--ftc-accent: #fc8fd2;
	--ftc-bg: #0c0c0c;
	--ftc-bg-alt: #151515;
	--ftc-border: rgba(255, 255, 255, 0.08);
	--ftc-text: #ffffff;
	--ftc-text-muted: #a3a3a3;
	color: var(--ftc-text);
}

body.page-template-template-actors-php .ftc-directory-summary {
	margin: 4px 0 28px;
	color: var(--ftc-text-muted);
	font-size: 0.9375rem;
}

/* ==========================================================================
   Archive Stats Bar — replaces the old "N performers in the archive"
   line. Always visible (independent of the active filters), sits below
   the H1 and above the search/filter toolbar.
   ========================================================================== */

body.page-template-template-actors-php .ftc-stats-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 4px 0 28px;
	padding: 16px 20px;
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
}

body.page-template-template-actors-php .ftc-stats-bar__item {
	flex: 1 1 150px;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.page-template-template-actors-php .ftc-stats-bar__label {
	color: var(--ftc-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body.page-template-template-actors-php .ftc-stats-bar__value {
	color: var(--ftc-accent);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

body.page-template-template-actors-php .ftc-stats-bar__value--text {
	color: var(--ftc-text);
	font-size: 0.9375rem;
	font-weight: 600;
}

body.page-template-template-actors-php .ftc-stats-bar__value--text a {
	color: var(--ftc-text);
	text-decoration: none;
}

body.page-template-template-actors-php .ftc-stats-bar__value--text a:hover,
body.page-template-template-actors-php .ftc-stats-bar__value--text a:focus-visible {
	color: var(--ftc-accent);
	outline: none;
}

body.page-template-template-actors-php .ftc-stats-bar__lifespan,
body.page-template-template-actors-php .ftc-stats-bar__meta {
	color: var(--ftc-text-muted);
	font-weight: 400;
	font-size: 0.8125rem;
}

body.page-template-template-actors-php .ftc-stats-bar__more {
	margin-top: 2px;
}

body.page-template-template-actors-php .ftc-stats-bar__more summary {
	color: var(--ftc-text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	cursor: pointer;
	list-style: none;
}

body.page-template-template-actors-php .ftc-stats-bar__more summary::-webkit-details-marker {
	display: none;
}

body.page-template-template-actors-php .ftc-stats-bar__more summary:hover,
body.page-template-template-actors-php .ftc-stats-bar__more summary:focus-visible {
	color: var(--ftc-accent);
	outline: none;
}

body.page-template-template-actors-php .ftc-stats-bar__more ul {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.page-template-template-actors-php .ftc-stats-bar__more li a {
	color: var(--ftc-text);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}

body.page-template-template-actors-php .ftc-stats-bar__more li a:hover,
body.page-template-template-actors-php .ftc-stats-bar__more li a:focus-visible {
	color: var(--ftc-accent);
	outline: none;
}

/* Toolbar: search + country + sort + apply/clear. */
body.page-template-template-actors-php .ftc-directory-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 18px;
	padding: 16px;
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
}

body.page-template-template-actors-php .ftc-directory-search {
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
}

body.page-template-template-actors-php .ftc-directory-search input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	background: var(--ftc-bg-alt);
	border: 1px solid var(--ftc-border);
	border-radius: 8px;
	color: var(--ftc-text);
	font-size: 0.9375rem;
}

body.page-template-template-actors-php .ftc-directory-search input[type="text"]:focus-visible {
	outline: 2px solid var(--ftc-accent);
	outline-offset: 1px;
}

/*
 * top/left/width are set inline by js/actors-directory.js, computed
 * from the search input's own getBoundingClientRect() — see that file.
 * Only position:absolute and the visual styling live here.
 */
body.page-template-template-actors-php .ftc-directory-suggestions {
	position: absolute;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #1b1b1b;
	border: 1px solid var(--ftc-border);
	border-radius: 8px;
	max-height: 320px;
	overflow-y: auto;
	z-index: 9999;
	box-sizing: border-box;
	max-width: calc(100vw - 20px);
}

body.page-template-template-actors-php .ftc-directory-suggestions__item {
	padding: 10px 12px;
	min-height: 40px;
	display: flex;
	align-items: center;
	border-radius: 6px;
	color: #e5e5e5;
	font-size: 0.9375rem;
	cursor: pointer;
}

body.page-template-template-actors-php .ftc-directory-suggestions__item.is-active {
	background: rgba(252, 143, 210, 0.12);
	color: var(--ftc-accent);
}

body.page-template-template-actors-php .ftc-directory-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.8125rem;
	color: var(--ftc-text-muted);
}

body.page-template-template-actors-php .ftc-directory-field select {
	padding: 9px 10px;
	background: var(--ftc-bg-alt);
	border: 1px solid var(--ftc-border);
	border-radius: 8px;
	color: var(--ftc-text);
	font-size: 0.9375rem;
	min-height: 44px;
}

body.page-template-template-actors-php .ftc-directory-apply {
	padding: 10px 18px;
	min-height: 44px;
	background: transparent;
	border: 1px solid var(--ftc-accent);
	border-radius: 8px;
	color: var(--ftc-accent);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

body.page-template-template-actors-php .ftc-directory-apply:hover,
body.page-template-template-actors-php .ftc-directory-apply:focus-visible {
	background: rgba(252, 143, 210, 0.1);
	outline: none;
}

body.page-template-template-actors-php .ftc-directory-clear {
	align-self: center;
	color: var(--ftc-text-muted);
	font-size: 0.875rem;
	text-decoration: underline;
}

body.page-template-template-actors-php .ftc-directory-clear:hover,
body.page-template-template-actors-php .ftc-directory-clear:focus-visible {
	color: var(--ftc-accent);
}

/* A–Z bar. Explicit top margin (rather than relying on the toolbar
   card's own bottom margin to collapse into this gap) so ALL doesn't
   sit flush against the toolbar's border above it. Horizontal padding
   matches .ftc-directory-toolbar's own 16px inset above, so ALL lines up
   with the search/filter controls rather than sitting further left. */
body.page-template-template-actors-php .ftc-directory-alphabet {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 18px 0 18px;
	padding: 0 16px;
}

body.page-template-template-actors-php .ftc-directory-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 4px 8px;
	border-radius: 6px;
	color: var(--ftc-text);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

a.ftc-directory-letter:hover,
a.ftc-directory-letter:focus-visible {
	background: rgba(252, 143, 210, 0.1);
	color: var(--ftc-accent);
	outline: none;
}

body.page-template-template-actors-php .ftc-directory-letter.is-active {
	background: var(--ftc-accent);
	color: #0c0c0c;
}

body.page-template-template-actors-php .ftc-directory-letter.is-disabled {
	color: #555555;
	cursor: default;
}

/* Text-only actor list. */
body.page-template-template-actors-php .ftc-directory-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--ftc-border);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
	overflow: hidden;
}

/*
 * Grid, not flex/space-between: with space-between, the metadata block's
 * start position depends on each row's own name length, so flags/country
 * names/counts land at a different x-position on every row. A fixed-width
 * second column (rather than content-sized) is what actually makes them
 * line up from row to row within a given masonry column above — sized to
 * comfortably fit "🇬🇧 United Kingdom · 12 videos" without wrapping. The
 * name column stays flexible (minmax(0, 1fr)) so long names are never
 * truncated, only wrapped in the rare case they don't fit.
 */
body.page-template-template-actors-php .ftc-directory-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	align-items: baseline;
	column-gap: 16px;
	row-gap: 4px;
	padding: 14px 16px;
	min-height: 44px;
	background: var(--ftc-bg);
}

body.page-template-template-actors-php .ftc-directory-row__name {
	color: var(--ftc-text);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

body.page-template-template-actors-php .ftc-directory-row__name:hover,
body.page-template-template-actors-php .ftc-directory-row__name:focus-visible {
	color: var(--ftc-accent);
	outline: none;
}

/* Age shown only in age-sorted views (see $show_age in template-actors.php) — kept muted, never pink, even when the name link is hovered/focused. */
body.page-template-template-actors-php .ftc-directory-row__age {
	color: var(--ftc-text-muted);
	font-weight: 400;
	margin-left: 4px;
}

body.page-template-template-actors-php .ftc-directory-row__name:hover .ftc-directory-row__age,
body.page-template-template-actors-php .ftc-directory-row__name:focus-visible .ftc-directory-row__age {
	color: var(--ftc-text-muted);
}

/* Deceased-performer lifespan, shown only in age-sorted views alongside the age above — slightly smaller/secondary to it, never pink, never pink on hover. */
body.page-template-template-actors-php .ftc-directory-row__lifespan {
	color: var(--ftc-text-muted);
	font-weight: 400;
	font-size: 0.85em;
	margin-left: 4px;
}

body.page-template-template-actors-php .ftc-directory-row__name:hover .ftc-directory-row__lifespan,
body.page-template-template-actors-php .ftc-directory-row__name:focus-visible .ftc-directory-row__lifespan {
	color: var(--ftc-text-muted);
}

body.page-template-template-actors-php .ftc-directory-row__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ftc-text-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

body.page-template-template-actors-php .ftc-directory-row__country {
	color: var(--ftc-text-muted);
	text-decoration: none;
}

body.page-template-template-actors-php .ftc-directory-row__country:hover,
body.page-template-template-actors-php .ftc-directory-row__country:focus-visible {
	color: var(--ftc-accent);
	outline: none;
}

body.page-template-template-actors-php .ftc-directory-empty {
	padding: 40px 16px;
	text-align: center;
	color: var(--ftc-text-muted);
}

body.page-template-template-actors-php .ftc-directory-empty p {
	margin: 0 0 6px;
}


@media (min-width: 768px) {
	body.page-template-template-actors-php .ftc-directory-list {
		grid-template-columns: 1fr 1fr;
	}

	body.page-template-template-actors-php .ftc-directory-row {
		border-right: 1px solid var(--ftc-border);
	}
}

@media (min-width: 1200px) {
	body.page-template-template-actors-php .ftc-directory-list {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 767.98px) {
	body.page-template-template-actors-php .ftc-directory-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * .ftc-directory-search keeps `flex: 1 1 240px` for the desktop row
	 * layout, where 240px sensibly caps its minimum WIDTH. Once the
	 * toolbar above switches to flex-direction: column, flex-basis
	 * applies to the main axis instead — which is now vertical — so that
	 * same 240px forces the search field's wrapper to be at least 240px
	 * TALL around a ~44px input, leaving a large empty gap before the
	 * Country control. Resetting it to `flex: 0 0 auto` here makes it
	 * size to its actual content again; the explicit margin-bottom adds
	 * to the toolbar's existing 12px flex `gap` for a ~24px total gap
	 * after the search field specifically, while Country/Sort/Filter
	 * keep the tighter 12px spacing between each other.
	 */
	body.page-template-template-actors-php .ftc-directory-search {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 12px;
	}

	body.page-template-template-actors-php .ftc-directory-field,
	body.page-template-template-actors-php .ftc-directory-apply {
		width: 100%;
	}

	body.page-template-template-actors-php .ftc-directory-clear {
		align-self: flex-start;
	}

	/* The fixed 190px metadata column above is a desktop-only alignment
	   aid — on a narrow single-column mobile list there's no second
	   masonry column for anything to align WITH, and reserving 190px
	   fixed would needlessly cramp the name. Stack instead: name on its
	   own line, metadata on the next, both full width. */
	body.page-template-template-actors-php .ftc-directory-row {
		grid-template-columns: 1fr;
		row-gap: 2px;
	}
}

/* ==========================================================================
   Main header search autocomplete (site-wide — the header search form is
   present on every page via header.php).

   The dropdown (js/search-autocomplete.js) is appended to document.body,
   NOT nested inside the header, and positioned in JS purely from the
   search input's own getBoundingClientRect() (2px below its bottom
   edge) — not #wrapper-navbar or any other header-level element — so it
   attaches directly to the input regardless of the header's own height.
   Nothing here touches .header-search, .navbar, nav, or any other
   generic header selector — an earlier version of this fix set
   `.header-search { position: relative }`, which collided with the
   parent's own absolute positioning for that element and broke the
   header layout; that's removed entirely now that the dropdown no
   longer needs it as an anchor.
   ========================================================================== */

/*
 * top/left/width are set inline by js/search-autocomplete.js, computed
 * from the search input's own getBoundingClientRect() — see that file.
 * Only position:absolute and the visual styling live here.
 */
.ftc-global-search-autocomplete {
	position: absolute;
	display: flex;
	flex-direction: column;
	background: #1b1b1b;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	max-height: 380px;
	overflow: hidden;
	/* Above the parent theme's mobile .navbar-collapse (z-index 99999,
	   the highest value used anywhere in the parent theme's CSS) so the
	   dropdown can never render underneath an open mobile nav panel.
	   Well below the site's actual modal layer (login/register uses
	   Bootstrap's own ~1050 default), so this never covers a real dialog. */
	z-index: 100000;
	box-sizing: border-box;
	max-width: calc(100vw - 20px);
}

/* Scrollable suggestions area — the only part that scrolls. */
.ftc-search-suggestions {
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}

.ftc-search-suggestion {
	padding: 10px 12px;
	min-height: 44px;
	display: flex;
	align-items: center;
	border-radius: 6px;
	color: #ffffff;
	font-size: 0.9375rem;
	line-height: 1.4;
	cursor: pointer;
	white-space: normal;
	word-break: break-word;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	font-family: inherit;
}

.ftc-search-suggestion.is-active {
	background: rgba(252, 143, 210, 0.12);
	color: #fc8fd2;
}

/* Performers / Videos group headings — subtle, not clickable, not part
   of keyboard navigation (a different class than .ftc-search-suggestion,
   see js/search-autocomplete.js). */
.ftc-search-suggestions__group-label {
	padding: 8px 12px 4px;
	color: #7a7a7a;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

.ftc-search-suggestions__group-label:first-child {
	padding-top: 4px;
}

/* Fixed footer — always visible, never part of the scrollable area. */
.ftc-search-suggestions__footer {
	flex: 0 0 auto;
	padding: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ftc-search-suggestion--searchfor {
	font-weight: 600;
}

.ftc-search-suggestions__query {
	color: #fc8fd2;
}

@media (max-width: 767.98px) {
	.ftc-global-search-autocomplete {
		max-height: min(360px, 50vh);
	}
}

/* ==========================================================================
   Years hub (template-years.php) — deliberately styled as a sibling of
   the Actors directory above. These rules are scoped under a SEPARATE
   body class (body.page-template-template-years-php) with the same
   colors/spacing/radius duplicated rather than broadening the Actors
   selectors — this page can never affect the Actors page's appearance,
   even if these rules are edited later.
   ========================================================================== */

body.page-template-template-years-php .ftc-years {
	--ftc-accent: #fc8fd2;
	--ftc-bg: #0c0c0c;
	--ftc-bg-alt: #151515;
	--ftc-border: rgba(255, 255, 255, 0.08);
	--ftc-text: #ffffff;
	--ftc-text-muted: #a3a3a3;
	color: var(--ftc-text);
}

/* Extra inset beyond .container's own 15px, matching the horizontal
   padding already used inside the Stats Bar / toolbar cards (16px 20px /
   16px) below — lines the bare subtitle/decade text up with the text
   inside those cards, rather than with the cards' own outer edge. */
body.page-template-template-years-php .ftc-years-subtitle {
	margin: 4px 0 28px;
	padding: 0 20px;
	color: var(--ftc-text-muted);
	font-size: 0.9375rem;
}

/* Stats Bar — identical values to the Actors directory's own Stats Bar,
   duplicated under this page's own body-class scope. */
body.page-template-template-years-php .ftc-stats-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 4px 0 28px;
	padding: 16px 20px;
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
}

body.page-template-template-years-php .ftc-stats-bar__item {
	flex: 1 1 150px;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.page-template-template-years-php .ftc-stats-bar__label {
	color: var(--ftc-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body.page-template-template-years-php .ftc-stats-bar__value {
	color: var(--ftc-accent);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Decade filter pills. Pill shape (rather than the Actors A–Z square
   buttons) is a deliberate small variation — same accent-fill active
   state (background + dark text, not color alone) so active state never
   depends on color perception by itself. */
body.page-template-template-years-php .ftc-years-decades {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 18px;
	padding: 0 20px;
}

body.page-template-template-years-php .ftc-years-decade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--ftc-border);
	color: var(--ftc-text);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

body.page-template-template-years-php .ftc-years-decade:hover,
body.page-template-template-years-php .ftc-years-decade:focus-visible {
	border-color: var(--ftc-accent);
	color: var(--ftc-accent);
	outline: none;
}

body.page-template-template-years-php .ftc-years-decade.is-active {
	background: var(--ftc-accent);
	border-color: var(--ftc-accent);
	color: #0c0c0c;
}

/* Sort toolbar — reuses the Actors directory's .ftc-directory-toolbar /
   .ftc-directory-field / .ftc-directory-apply CLASS NAMES for markup
   consistency, but every value below is re-declared under this page's own
   scope so nothing here can regress the Actors toolbar. */
body.page-template-template-years-php .ftc-directory-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 18px;
	padding: 16px;
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
}

/* Tighter vertically than the general toolbar rule above — this form
   only ever holds one field + a button, so the full Actors-style padding
   left a lot of empty vertical space either side of it. Horizontal
   padding is kept the same for family resemblance with the Actors
   toolbar and the Stats Bar. */
body.page-template-template-years-php .ftc-years-toolbar {
	padding: 10px 16px;
	margin: 0 0 20px;
}

body.page-template-template-years-php .ftc-directory-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.8125rem;
	color: var(--ftc-text-muted);
}

body.page-template-template-years-php .ftc-directory-field select {
	padding: 9px 10px;
	background: var(--ftc-bg-alt);
	border: 1px solid var(--ftc-border);
	border-radius: 8px;
	color: var(--ftc-text);
	font-size: 0.9375rem;
	min-height: 44px;
}

body.page-template-template-years-php .ftc-directory-apply {
	padding: 10px 18px;
	min-height: 44px;
	background: transparent;
	border: 1px solid var(--ftc-accent);
	border-radius: 8px;
	color: var(--ftc-accent);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

body.page-template-template-years-php .ftc-directory-apply:hover,
body.page-template-template-years-php .ftc-directory-apply:focus-visible {
	background: rgba(252, 143, 210, 0.1);
	outline: none;
}

body.page-template-template-years-php .ftc-directory-empty {
	padding: 40px 16px;
	text-align: center;
	color: var(--ftc-text-muted);
}

body.page-template-template-years-php .ftc-directory-empty p {
	margin: 0 0 6px;
}

/* Year grid + cards. No thumbnail, so the year itself carries the visual
   weight; count is secondary/muted. */
body.page-template-template-years-php .ftc-years-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

body.page-template-template-years-php .ftc-year-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 20px 12px;
	min-height: 80px;
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

body.page-template-template-years-php .ftc-year-card:hover,
body.page-template-template-years-php .ftc-year-card:focus-visible {
	border-color: var(--ftc-accent);
	background: rgba(252, 143, 210, 0.08);
	transform: translateY(-2px);
	outline: none;
}

body.page-template-template-years-php .ftc-year-card__year {
	color: var(--ftc-text);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s ease;
}

body.page-template-template-years-php .ftc-year-card:hover .ftc-year-card__year,
body.page-template-template-years-php .ftc-year-card:focus-visible .ftc-year-card__year {
	color: var(--ftc-accent);
}

@media (prefers-reduced-motion: reduce) {
	body.page-template-template-years-php .ftc-year-card {
		transition: none;
	}

	body.page-template-template-years-php .ftc-year-card:hover,
	body.page-template-template-years-php .ftc-year-card:focus-visible {
		transform: none;
	}
}

body.page-template-template-years-php .ftc-year-card__count {
	color: var(--ftc-text-muted);
	font-size: 0.8125rem;
}

@media (min-width: 600px) {
	body.page-template-template-years-php .ftc-years-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	body.page-template-template-years-php .ftc-years-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1200px) {
	body.page-template-template-years-php .ftc-years-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 767.98px) {
	body.page-template-template-years-php .ftc-directory-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	body.page-template-template-years-php .ftc-directory-field,
	body.page-template-template-years-php .ftc-directory-apply {
		width: 100%;
	}
}

/* ==========================================================================
   Year archive page (year-archive.php, served for /years/YYYY/). The video
   grid below this is completely untouched FamousTube (thumbnails,
   durations, pagination, etc.) — only this header panel is new, styled to
   match the dark-panel/pink-accent language already established on
   /actors/ and /years/, scoped to its own unique classes so nothing here
   can collide with or regress either of those pages.

   The #filters sort control below is the parent theme's own — same
   markup/behavior as everywhere else on the site. It ships position:
   absolute (anchoring its own hover dropdown) and hidden entirely below
   768px site-wide, which is exactly why it used to float disconnected in
   the corner. taxonomy-actors.php already solved this identical problem
   for the Actors page (see body.tax-actors .page-header above); the rules
   below are that same proven technique, ported to this page's own scope.
   ========================================================================== */

.ftc-year-archive-header__back {
	display: inline-block;
	margin-bottom: 14px;
	color: #a3a3a3;
	font-size: 0.875rem;
	text-decoration: none;
}

.ftc-year-archive-header__back:hover,
.ftc-year-archive-header__back:focus-visible {
	color: #fc8fd2;
	outline: none;
}

.ftc-year-archive-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 20px;
	background: #0c0c0c;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}

.ftc-year-archive-panel__title {
	margin: 0;
	color: #ffffff;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
}

.ftc-year-archive-panel__year {
	color: #fc8fd2;
}

.ftc-year-archive-panel__count {
	margin: 4px 0 0;
	color: #a3a3a3;
	font-size: 0.9375rem;
}

/* Desktop: titles left, sort control right, vertically centered in the panel. */
@media (min-width: 768px) {
	.ftc-year-archive-panel {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 20px;
	}

	.ftc-year-archive-panel__titles {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* #filters anchors its own dropdown via position, so it stays
	   "positioned" (relative, not static) rather than removing position
	   entirely — it just flows as a normal flex item now instead of
	   floating in the corner of the whole page-header. */
	.ftc-year-archive-panel #filters {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		margin: 0;
		flex: 0 0 auto;
	}
}

/* The parent theme hides #filters entirely below 768px on every archive
   page. This re-enables and re-flows just this page's copy of it
   (identical markup/links/hover dropdown to everywhere else on the site)
   so it stacks under the title/count instead of staying hidden — same
   fix already proven on the Actors page. */
@media (max-width: 767.98px) {
	.ftc-year-archive-header {
		overflow-x: hidden;
	}

	.ftc-year-archive-panel #filters {
		display: block;
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		margin: 0;
	}

	.ftc-year-archive-panel #filters .filters-select {
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 14px;
		background: #151515;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		color: #ffffff;
		font-size: 0.9rem;
		line-height: 1.4;
		height: auto;
	}

	.ftc-year-archive-panel #filters .filters-options {
		left: 0;
		right: auto;
		top: 100%;
		margin-top: 6px;
		min-width: 220px;
		width: max-content;
		max-width: calc(100vw - 40px);
		box-sizing: border-box;
	}

	.ftc-year-archive-panel #filters .filters-options span {
		width: 100%;
	}

	.ftc-year-archive-panel #filters .filters-options span a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 16px;
		box-sizing: border-box;
		white-space: normal;
	}
}

/* ==========================================================================
   Video watch page — generated one-line description
   (loop-templates/content-single-video.php). Deliberately plain: no box,
   no icon, no accent color, small muted body text so it reads as an
   ordinary description line rather than an SEO block.
   ========================================================================== */

.ftc-video-description {
	margin: 6px 0 14px;
	color: #a3a3a3;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* ==========================================================================
   Main navigation — active / hover / focus (inc/nav-active-state.php sets
   current-menu-item on exactly one item; this only styles it). Every
   selector is scoped under #wrapper-navbar so its ID-level specificity
   reliably wins over the parent theme's own .nav-link:hover (dark
   box-fill) and .active > .nav-link rules, on both desktop and mobile,
   regardless of stylesheet load order.

   Desktop already reserves a transparent 2px border-bottom on every
   .nav-link (see famoustube/css/custom.css) — recoloring it means the
   active underline costs zero layout shift. Mobile explicitly zeroes
   that same border (it uses top-borders as row dividers instead), so
   the active rule below sets the full border-bottom shorthand, not just
   its color, so it renders correctly in both contexts.
   ========================================================================== */

/* Parent theme's own .nav-link is 11px (famoustube/css/custom.css) — a
   modest bump, not the 15-16px that would suit a 13-14px starting point;
   uppercase/weight/spacing are all left exactly as the parent set them. */
#wrapper-navbar .navbar-nav .nav-link {
	font-size: 13px;
}

#wrapper-navbar .navbar-nav .nav-link:hover,
#wrapper-navbar .navbar-nav .nav-link:focus-visible,
#wrapper-navbar .navbar-nav .menu-item.current-menu-item > .nav-link {
	background: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	color: #fc8fd2;
}

/* Active only — never on mere hover, so active and hover stay visually
   distinct from each other, not just from the default state. */
#wrapper-navbar .navbar-nav .menu-item.current-menu-item > .nav-link {
	border-bottom: 2px solid #fc8fd2;
}

/* Keyboard focus: same accent color as hover, plus a visible outline so
   a keyboard user can tell focus apart from a merely-hovered link. */
#wrapper-navbar .navbar-nav .nav-link:focus-visible {
	outline: 2px solid #fc8fd2;
	outline-offset: 2px;
}

/* ==========================================================================
   Main nav submenu panels (js/nav-submenus.js) — additive dropdown/mega
   menu content for Videos/Actors/Years/Categories. The existing .nav-link
   elements above are untouched; this only styles the new sibling markup
   that script injects.

   Desktop: one shared floating panel, appended to document.body (same
   convention as .ftc-global-search-autocomplete above, so it's never
   clipped by the header's own layout) and positioned in JS via
   getBoundingClientRect() against #wrapper-navbar. Background/border
   match that same search panel for visual consistency.

   z-index sits comfortably above normal page content but below both the
   parent theme's mobile .navbar-collapse (99999) and the global search
   dropdown (100000, see above) — those two already have their own
   established ordering and this panel should never contend with either.
   ========================================================================== */

.ftc-nav-submenu {
	position: absolute;
	z-index: 20000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 32px;
	padding: 14px 20px;
	background: #1b1b1b;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0 0 8px 8px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.ftc-nav-submenu:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.ftc-nav-submenu__link {
	color: #e5e5e5;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ftc-nav-submenu__link:hover,
.ftc-nav-submenu__link:focus-visible {
	color: #fc8fd2;
	outline: none;
}

/* Mobile chevron + inline submenu — hidden entirely on desktop, where
   the floating panel above is used instead. */
.ftc-nav-chevron {
	display: none;
}

.ftc-nav-mobile-submenu {
	display: none;
}

@media (max-width: 767.98px) {
	.ftc-nav-submenu {
		display: none !important;
	}

	#wrapper-navbar .navbar-nav > li.menu-item {
		position: relative;
	}

	.ftc-nav-chevron {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		background: transparent;
		border: none;
		padding: 0;
		color: #ccc;
		font-size: 14px;
		cursor: pointer;
	}

	.ftc-nav-chevron.is-open {
		color: #fc8fd2;
	}

	.ftc-nav-mobile-submenu {
		list-style: none;
		margin: 0;
		padding: 4px 15px 12px;
		background: #151515;
	}

	.ftc-nav-mobile-submenu:not([hidden]) {
		display: block;
	}

	.ftc-nav-mobile-submenu a {
		display: block;
		padding: 8px 10px;
		color: #e5e5e5;
		font-size: 0.875rem;
		text-decoration: none;
	}

	.ftc-nav-mobile-submenu a:hover,
	.ftc-nav-mobile-submenu a:focus-visible {
		color: #fc8fd2;
		outline: none;
	}
}

/* ==========================================================================
   Standard video-card grid -- desktop column count, 6 -> 5
   (loop-templates/loop-video.php, rendered via
   get_template_part( 'loop-templates/loop', 'video' )).

   Shared by every page that renders that template: homepage (index.php),
   category, tag, author, search, actor taxonomy pages, year archive,
   404 suggested videos, and the related-videos block on single-video
   pages. One rule here covers all of them since they all emit the exact
   same .col-xl-2 / .video-block markup -- no page-specific duplicates.

   Two other grids reuse the IDENTICAL col-xl-2 column class and
   .video-block markup for their own, unrelated cards: the Categories
   directory (loop-templates/loop-category.php) and the parent theme's
   Actors directory (template-actors.php, superseded on this site by the
   child theme's own template-actors.php rewrite, but kept excluded here
   too in case that parent template is ever reached). Both mark their
   cards with an extra video-block-cat modifier class that real video
   cards never have, so :has() is used to widen only real video cards and
   leave those two directory grids at their original 6-per-row width.

   Only the parent theme's own xl breakpoint (>=1200px) is touched --
   md/lg/mobile column counts are untouched.
   ========================================================================== */

@media (min-width: 1200px) {
	.col-xl-2:has(> .video-block:not(.video-block-cat)) {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

/* ==========================================================================
   Single video post -- desktop-only (>=1200px) right sidebar: "Top
   Celebrities" + "Explore More" (famoustube-child/inc/single-video-sidebar.php,
   rendered from loop-templates/content-single-video.php).

   Renders in the DOM only when that template's own existing condition is
   true (no beside-player ad zone configured, no widget placed in
   FamousTube's own "Video Sidebar" widget area -- see that file's
   docblock) -- when FamousTube's built-in sidebar/banner system is active
   instead, none of this markup exists at all, so none of these selectors
   ever match anything, and the existing col-md-9/col-md-3 ad-zone layout
   is completely unaffected.

   Every selector below is scoped to the .ftc-celeb-* / .ftc-explore-more-*
   classes that ONLY ever appear in that one piece of markup -- nothing
   here is a broad/global selector, so none of it can affect any other
   page even though, like every other rule in this file, the CSS itself
   loads site-wide.

   Below 1200px .ftc-celeb-sidebar is display:none -- zero layout impact,
   so every viewport under this breakpoint renders pixel-for-pixel
   identical to before this feature existed. The 74%/26% split, the ~26px
   gap (via the sidebar's own left padding, not a shared `gap` on the row
   -- so the untouched col-md-9 ad-zone layout can never be affected by
   it), and the sticky offset (30px, matching this theme's own existing
   .video-tracking sticky convention elsewhere on this same page) only
   ever apply at that same breakpoint.

   Related Videos, comments, and everything else inside the main content
   column are NOT touched by name here -- but since they live inside the
   same .ftc-main-with-celeb-sidebar column being narrowed to 74%, they
   naturally render at that narrower width too (already-percentage-based
   internal grids, like the related-videos card row above, simply reflow
   to it) -- an unavoidable, purely geometric consequence of adding a
   sidebar at all, not a change to their own code/behavior/breakpoints.
   ========================================================================== */

.ftc-celeb-sidebar {
	display: none;
}

@media (min-width: 1200px) {
	.ftc-main-with-celeb-sidebar {
		flex: 0 0 74%;
		max-width: 74%;
	}

	/*
	 * THE FIX for the "sidebar falls below the page" bug: FamousTube's own
	 * .video-sidebar column keeps its Bootstrap col-md-3 width (flex: 0 0
	 * 25%, confirmed in famoustube/css/theme.css) even when it renders
	 * completely empty -- which it always does whenever
	 * .ftc-celeb-sidebar is present, by construction (see
	 * inc/single-video-sidebar.php's should_show_celeb_sidebar(): the two
	 * can never both have real content). Left alone, the row's three flex
	 * children summed to 74% + 25% + 26% = 125%, past 100%, and .row's
	 * own flex-wrap: wrap (theme.css) pushed the last child -- this
	 * sidebar -- onto a new line below the (very tall) main column. That
	 * was the entire bug: not a template-nesting problem (the sidebar was
	 * always a correctly-placed sibling inside the row -- verified by
	 * tracing the real <div> depth line by line), a flex-width-budget one.
	 *
	 * :has() (already used elsewhere in this file, see the related-videos
	 * card-width rule above) scopes this to EXACTLY that one situation --
	 * a .video-sidebar immediately followed by a real .ftc-celeb-sidebar
	 * sibling -- so this can never fire, and never needs to, in the
	 * col-md-9 ad-zone/widget-active case: this plugin's own sidebar
	 * doesn't render there at all, so the :has() simply never matches,
	 * and .video-sidebar's Bootstrap width is completely untouched.
	 * FamousTube's built-in sidebar/banner system itself is never
	 * modified -- this only ever hides an already-guaranteed-empty
	 * instance of it from the flex layout.
	 */
	.single-video-player .video-sidebar:has(~ .ftc-celeb-sidebar) {
		display: none;
	}

	.ftc-celeb-sidebar {
		display: block;
		flex: 0 0 26%;
		max-width: 26%;
		padding-left: 26px;
	}

	/*
	 * Sticky removed per explicit follow-up request -- was
	 * `position: sticky; top: 30px;` here (matching this theme's own
	 * .video-tracking convention elsewhere on this page). Now a plain
	 * block: begins aligned with the top of the player (it's the first
	 * thing in this column, same as before) and scrolls away normally
	 * with the rest of the page. .video-tracking itself, and every other
	 * sticky element in FamousTube, is untouched -- this rule only ever
	 * matched this one sidebar's own wrapper.
	 */
}

/*
 * The visual panel. Same design language as this site's own Actor
 * profile card and Actors-directory stats bar (famoustube-child/style.css,
 * see .ftc-actor-profile / .ftc-stats-bar above) -- same background,
 * border, and 12px radius, and the identical locally-scoped custom
 * properties those two components already declare (not a new global
 * :root palette -- matching how they themselves scope it). Reused as
 * reference only; neither of those components is modified.
 */
.ftc-celeb-sidebar-inner {
	--ftc-accent: #fc8fd2;
	--ftc-bg: #0c0c0c;
	--ftc-border: rgba(255, 255, 255, 0.08);
	--ftc-text: #ffffff;
	--ftc-text-muted: #a3a3a3;

	background: var(--ftc-bg);
	border: 1px solid var(--ftc-border);
	border-radius: 12px;
	padding: 18px;
	box-sizing: border-box;
}

/* Accent underline is a real text-decoration on the heading itself (not a
   fixed-width sibling element) so it always spans exactly the rendered
   width of "Top Celebrities" -- including letter-spacing -- with no JS and
   no shrink-to-fit/inline-block side effects. Replaces the old fixed
   36px .ftc-celeb-sidebar-accent span (also removed from
   inc/single-video-sidebar.php in the same change). */
.ftc-celeb-sidebar-heading {
	font-size: 16px;
	font-weight: 700;
	color: var(--ftc-text);
	margin: 0 0 14px;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration-line: underline;
	text-decoration-color: var(--ftc-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 10px;
}

.ftc-celeb-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.ftc-celeb-row {
	margin: 0;
	padding: 0;
}

/* Subtle separator between rows -- never on the first row (no preceding
   sibling to match), never a "card" border around any single row. */
.ftc-celeb-row + .ftc-celeb-row {
	border-top: 1px solid var(--ftc-border);
}

.ftc-celeb-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 4px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color .15s ease-in-out;
	/* Sized by .ftc-celeb-row-main (flex) below, alongside the new
	   .ftc-celeb-toggle button -- min-width:0 keeps long names wrapping
	   (word-break, unchanged) instead of forcing the row wider. */
	flex: 1 1 auto;
	min-width: 0;
}

.ftc-celeb-link:hover,
.ftc-celeb-link:focus {
	background-color: rgba(252, 143, 210, 0.08);
	outline: none;
}

.ftc-celeb-link:hover .ftc-celeb-name,
.ftc-celeb-link:focus .ftc-celeb-name {
	color: var(--ftc-accent);
}

.ftc-celeb-portrait-wrap {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 4px;
	overflow: hidden;
	background-color: #181818;
}

.ftc-celeb-portrait {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ftc-celeb-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ftc-celeb-name {
	color: var(--ftc-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	word-break: break-word;
	transition: color .15s ease-in-out;
}

.ftc-celeb-count {
	color: var(--ftc-text-muted);
	font-size: 12px;
	line-height: 1.3;
}

/* ==========================================================================
   Per-celebrity expandable recent-videos preview. .ftc-celeb-row-main holds
   the EXISTING .ftc-celeb-link (actor image/name -> archive, untouched)
   plus the new disclosure button, side by side -- the button is a sibling,
   never nested inside the link, so the two stay fully independent
   clickable targets. .ftc-celeb-expand is the panel itself, a second child
   of <li class="ftc-celeb-row"> alongside .ftc-celeb-row-main, so it
   naturally stacks below the row and pushes subsequent rows/Explore More
   down when open -- no absolute positioning, no layout hacks.
   ========================================================================== */

.ftc-celeb-row-main {
	display: flex;
	align-items: center;
}

.ftc-celeb-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 4px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 4px;
	color: var(--ftc-text-muted);
	cursor: pointer;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.ftc-celeb-toggle:hover,
.ftc-celeb-toggle:focus-visible {
	background-color: rgba(252, 143, 210, 0.08);
	color: var(--ftc-accent);
	outline: none;
}

.ftc-celeb-toggle-icon {
	font-size: 18px;
	line-height: 1;
	transform: rotate(0deg);
	/* The only animation here -- a plain icon rotation. The panel itself
	   uses instant show/hide via the `hidden` attribute (see
	   .ftc-celeb-expand below): a height/opacity reveal that stays fully
	   accessible (removed from the tab order and a11y tree while closed,
	   which native `hidden` guarantees) would need JS-measured heights or
	   a two-frame class handshake to animate cleanly from display:none --
	   exactly the "fragile JavaScript" the brief said to avoid in favor of
	   simple show/hide. */
	transition: transform 180ms ease;
}

.ftc-celeb-toggle.is-open .ftc-celeb-toggle-icon {
	transform: rotate(90deg);
}

.ftc-celeb-expand-inner {
	margin: 10px 0 4px;
	padding-top: 10px;
	border-top: 1px solid var(--ftc-border);
}

.ftc-celeb-expand-status {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--ftc-text-muted);
}

.ftc-celeb-expand-status--error {
	color: #e08a8a;
}

.ftc-celeb-preview-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.ftc-celeb-preview-item + .ftc-celeb-preview-item {
	margin-top: 8px;
}

.ftc-celeb-preview-link {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -4px;
	padding: 4px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color .15s ease-in-out;
}

.ftc-celeb-preview-link:hover,
.ftc-celeb-preview-link:focus {
	background-color: rgba(252, 143, 210, 0.08);
	outline: none;
}

.ftc-celeb-preview-link:hover .ftc-celeb-preview-title,
.ftc-celeb-preview-link:focus .ftc-celeb-preview-title {
	color: var(--ftc-accent);
}

.ftc-celeb-preview-thumb-wrap {
	flex: 0 0 auto;
	width: 90px;
	height: 55px;
	border-radius: 4px;
	overflow: hidden;
	background-color: #181818;
}

.ftc-celeb-preview-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ftc-celeb-preview-title {
	min-width: 0;
	color: var(--ftc-text);
	font-size: 12.5px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s ease-in-out;
}

.ftc-celeb-preview-viewall {
	display: inline-block;
	color: var(--ftc-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease-in-out;
}

.ftc-celeb-preview-viewall:hover,
.ftc-celeb-preview-viewall:focus {
	color: var(--ftc-accent);
	outline: none;
}

/* Visually secondary section: smaller, muted heading, no accent
   underline, separated from Top Celebrities by a thin top divider +
   its own top margin rather than another heavy element. */
.ftc-explore-more-heading {
	font-size: 12px;
	font-weight: 700;
	color: var(--ftc-text-muted);
	margin: 0 0 10px;
	padding-top: 16px;
	border-top: 1px solid var(--ftc-border);
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration-line: underline;
	text-decoration-color: var(--ftc-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.ftc-explore-more-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ftc-explore-more-list li {
	margin: 0 0 10px;
}

.ftc-explore-more-list a {
	color: #ccc;
	font-size: 13px;
	text-decoration: none;
	transition: color .15s ease-in-out;
}

.ftc-explore-more-list a:hover,
.ftc-explore-more-list a:focus {
	color: var(--ftc-accent);
	outline: none;
}