/* ==========================================================================
   VideoHub — design tokens
   Bright, friendly light theme: white/near-white surfaces, warm red signature
   accent (logo, active states, primary buttons), dark secondary nav bar.
   Inter for everything — bold weights carry the display type, mono for
   numeric meta (views/duration).
   ========================================================================== */

:root {
	--bg-base: #ffffff;
	--bg-surface: #ffffff;
	--bg-elevated: #f0f0f0;
	--border: #e5e5e5;
	--text-primary: #0f0f0f;
	--text-muted: #5f5f5f;
	--text-faint: #909090;
	--accent: #ea3836;
	--accent-hover: #d32e2c;
	--accent-soft: #ea38361a;
	--accent-warm: #ffb020;
	--nav-dark: #262626;
	--nav-dark-text: #e7e7ea;
	--radius-sm: 4px;
	--radius-md: 10px;
	--font-display: 'Segoe UI', Roboto, Arial, sans-serif;
	--font-body: 'Segoe UI', Roboto, Arial, sans-serif;
	--font-mono: 'Segoe UI', Roboto, Arial, sans-serif;
	--header-h: 64px;

	/* Plyr theme override — matches the site's accent color */
	--plyr-color-main: #ea3836;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: #ffffff;
	color: var(--text-primary);
	font-family: var(--font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.videohub-app {
	max-width: 1350px;
	margin: 0 auto;
	background: #ffffff;
	box-shadow: 0 0 30px rgba(0,0,0,0.02);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.container {
	max-width: 1350px;
	margin: 0 auto;
	padding: 0 20px;
}

@media (max-width: 700px) {
	.container { padding: 0 12px; }
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Header — logo, centered search, auth actions on top row; dark nav bar below
   ========================================================================== */

.site-header {
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border);
}

.site-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: var(--header-h);
}

.site-header__logo {
	min-width: 0;
	flex-shrink: 0;
	overflow: hidden;
}

.site-header__logo .site-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.3px;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.site-title__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
}

.site-title__tagline {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.3px;
	color: var(--text-faint);
	top: -0.6em;
	margin-left: 2px;
}

.site-header__logo img { max-height: 40px; width: auto; max-width: 100%; }

.site-header__search { flex: 1 1 auto; max-width: 480px; }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.site-header__auth {
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.header-btn--ghost {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-primary);
}
.header-btn--ghost:hover { background: var(--bg-elevated); }
.header-btn--solid {
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #fff;
}
.header-btn--solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.header-upload-btn svg { flex-shrink: 0; }

@media (max-width: 900px) {
	.header-btn span { display: none; }
	.header-btn { padding: 9px 10px; }
	.header-upload-btn { padding: 9px; }
}
@media (max-width: 700px) {
	.header-btn--ghost:not(.header-upload-btn) { display: none; }
}

.videohub-search-form {
	display: flex;
	align-items: center;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 3px 3px 3px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.videohub-search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.videohub-search-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 12.5px;
	padding: 4px 0;
}
.videohub-search-input:focus { outline: none; }
.videohub-search-input::placeholder { color: var(--text-faint); }

.videohub-search-btn {
	background: var(--accent);
	border: none;
	color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.15s ease, background 0.15s ease;
}
.videohub-search-btn svg { width: 13px; height: 13px; }
.videohub-search-btn:hover { transform: scale(1.06); background: var(--accent-hover); }

.mobile-search-toggle {
	display: none;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	color: var(--text-primary);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.mobile-search-overlay { display: none; }
.mobile-search-overlay.is-open {
	display: flex;
	align-items: flex-start;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--bg-base);
	padding-top: 14px;
}
.mobile-search-overlay__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.mobile-search-overlay__inner .videohub-search-form { flex: 1; }
.mobile-search-close {
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
	flex-shrink: 0;
}

/* Menu bar: dark secondary nav sitting below the white header row */
.site-header__menubar {
	position: relative;
	background: var(--nav-dark);
}

.site-header__menubar-inner {
	display: flex;
	align-items: center;
	height: 46px;
}

.primary-menu {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}
.primary-menu::-webkit-scrollbar { display: none; }

.primary-menu li a {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--nav-dark-text);
	opacity: 0.75;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}
.primary-menu li a:hover { opacity: 1; }
.primary-menu li.current-menu-item a {
	opacity: 1;
	font-weight: 700;
}
.primary-menu li.current-menu-item a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 3px;
	background: var(--accent);
	border-radius: 3px 3px 0 0;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	color: var(--text-primary);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 8px;
	flex-shrink: 0;
}
.menu-toggle span { width: 16px; height: 2px; background: var(--text-primary); }

/* Desktop/tablet: the wrapper is transparent to layout when closed */
.mobile-nav-panel { display: contents; }

/* ==========================================================================
   Layout: sidebar + main content
   ========================================================================== */

.layout-with-sidebar {
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	border-top: 1px solid var(--border);
}

.site-sidebar {
	width: 220px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: auto;
	background: #fcfcfc;
	border: none;
	border-right: 1px solid var(--border);
	border-radius: 0;
	padding: 18px 10px 20px 12px;
}

.site-main {
	flex: 1;
	min-width: 0;
	padding: 20px 24px 30px;
}

.sidebar-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	padding: 12px 16px;
	margin-bottom: 16px;
	cursor: pointer;
}
.sidebar-toggle__icon { transition: transform 0.2s ease; flex-shrink: 0; }
.sidebar-toggle[aria-expanded="true"] .sidebar-toggle__icon { transform: rotate(180deg); }

@media (max-width: 1000px) {
	.sidebar-toggle { display: flex; margin-bottom: 10px; }
}

.widget-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0 0 10px;
	color: var(--text-faint);
}
.widget { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.widget:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Quick links (Newest / Most Viewed / Longest / All Categories / All Tags) */
.sidebar-quicklinks li { margin-bottom: 1px; }
.sidebar-quicklinks li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	transition: background 0.15s ease;
}
.sidebar-quicklinks li a:hover { background: var(--bg-elevated); }
.sidebar-quicklinks li.is-active a { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar-quicklinks__icon { display: flex; flex-shrink: 0; color: var(--text-muted); }
.sidebar-quicklinks li.is-active .sidebar-quicklinks__icon { color: var(--accent); }

/* Category filter search box */
.category-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 8px 12px;
	margin-bottom: 10px;
	color: var(--text-faint);
}
.category-filter:focus-within { border-color: var(--accent); }
.category-filter__input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 13px;
}
.category-filter__input:focus { outline: none; }
.category-filter__input::placeholder { color: var(--text-faint); }
.category-filter__empty { font-size: 13px; color: var(--text-faint); padding: 6px 10px; }

.category-list li { margin-bottom: 1px; }
.category-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--text-primary);
	transition: background 0.15s ease, color 0.15s ease;
}
.category-list li a .cat-name { flex: 1; }
.category-list li a:hover,
.category-list li.is-active a {
	background: var(--accent-soft);
	color: var(--accent);
}
.cat-count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
}

.view-all-categories {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--accent);
	font-weight: 600;
}

/*
 * Homepage banner ad. Height is capped and content is centered/clipped so
 * whatever the ad network's script or iframe tries to render at, it can
 * never push page content down or overflow on small screens. min-height on
 * the outer wrapper reserves the space immediately (before the ad script
 * finishes loading) so there's no layout jump once it renders.
 */
.videohub-banner-ad {
	/* Mobile-only ad: hidden by default (tablet/desktop), switched on
	   inside the max-width:700px media query below. This fully stops the
	   ad slot from rendering on larger screens — no iframe/script is
	   requested there at all, not just visually resized. */
	display: none;
	max-width: 100%;
	margin: 0 0 18px;
	min-height: 90px;
	max-height: 250px;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.videohub-banner-ad__label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted, #888);
	padding: 4px 0 0;
}
.videohub-banner-ad__slot {
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Whatever the ad network injects (img, iframe, ins, div) is forced to fit
   the slot instead of dictating the page's layout. */
.videohub-banner-ad__slot > * {
	max-width: 100% !important;
	height: auto !important;
}
.videohub-banner-ad__slot iframe {
	max-height: 250px !important;
}

@media (max-width: 700px) {
	.videohub-banner-ad {
		display: flex;
		width: 320px;
		max-width: 100%;
		min-height: 50px;
		max-height: 50px;
		margin: 0 auto 12px;
	}
	/* No room for the "Advertisement" label at 50px tall — the border around
	   the slot already makes it visually distinct as an ad unit. */
	.videohub-banner-ad__label { display: none; }
	.videohub-banner-ad__slot iframe {
		max-height: 50px !important;
	}
}

.page-heading {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.3px;
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.page-heading span { color: var(--accent); }

.term-description { color: var(--text-muted); margin-top: -12px; margin-bottom: 20px; }

.error-404-header {
	text-align: center;
	padding: 40px 16px 36px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 28px;
}
.error-404-code {
	font-family: var(--font-display);
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
	margin: 0 0 8px;
}
.error-404-header .page-heading {
	justify-content: center;
	margin-bottom: 10px;
}
.error-404-message {
	color: var(--text-muted);
	font-size: 14px;
	margin: 0;
}
.error-404-message a { color: var(--accent); font-weight: 600; }
.error-404-subheading { text-align: left; }

@media (max-width: 1000px) {
	.error-404-code { font-size: 56px; }
	.error-404-header { padding: 30px 16px 26px; margin-bottom: 22px; }
}

@media (max-width: 700px) {
	.error-404-code { font-size: 44px; }
	.error-404-header { padding: 22px 12px 20px; margin-bottom: 16px; }
	.error-404-message { font-size: 12.5px; }
}

/* ==========================================================================
   Video grid — 4 desktop / 3 tablet / 2 mobile
   ========================================================================== */

/* Column counts come from Appearance -> VideoHub Settings, injected as CSS
   custom properties (--videohub-cols-*) in <head>. Falls back to 4/3/2 if
   the variables aren't present for any reason. */
.video-grid {
	display: grid;
	grid-template-columns: repeat(var(--videohub-cols-desktop, 4), 1fr);
	gap: 24px 14px;
}

@media (max-width: 1100px) {
	.video-grid { grid-template-columns: repeat(var(--videohub-cols-tablet, 3), 1fr); }
}

/* Below full desktop width, the sidebar becomes a collapsible panel (toggled
   via the "Categories & Tags" button) instead of a fixed side column — all
   the same content (categories + tags widgets) stays reachable, it's just
   tucked away by default so it doesn't eat space next to the video grid. */
@media (max-width: 1000px) {
	.layout-with-sidebar { flex-direction: column; }
	.layout-with-sidebar .site-sidebar {
		display: none;
		position: static;
		width: 100%;
		max-height: none;
		border-right: none;
		border-bottom: 1px solid var(--border);
	}
	.layout-with-sidebar .site-sidebar.is-open { display: block; }
	.page-heading { margin-bottom: 14px; }
}
@media (max-width: 700px) {
	.video-grid { grid-template-columns: repeat(var(--videohub-cols-mobile, 2), 1fr); gap: 10px 8px; }
	.site-main { padding: 14px 8px 40px; }
	.video-card__title { font-size: 12px; margin-bottom: 4px; }
	.video-card__meta { font-size: 10px; }

	.page-heading { font-size: 16px; margin-bottom: 6px; }

	/* Categories & Tags toggle is only for the tablet range (701-1000px).
	   On phones, Categories is already reachable via the bottom nav, and
	   Tags via the "Browse all tags" links, so hide it here to avoid
	   duplicating the bottom nav and to tighten vertical space. */
	.sidebar-toggle { display: none; }
}

.video-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	transition: 0.1s;
}

.video-card__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #d9d9d9;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 0;
}
.video-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--bg-elevated), var(--border));
}

.video-card__duration {
	position: absolute;
	right: 6px;
	bottom: 6px;
	background: rgba(0,0,0,0.8);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.3px;
}

.video-card__body {
	display: block;
	padding: 0;
}

.video-card__avatar { display: none; }

.video-card__info { min-width: 0; flex: 1; }

.video-card__title {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 8px 0 0;
	color: var(--text-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.video-card__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--text-muted);
	overflow: hidden;
	flex-wrap: wrap;
}
.video-card__author { display: none; }
.video-card__meta-line {
	font-size: 12.5px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
}
.video-card__views,
.video-card__date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.video-card__dot { color: #ccc; flex-shrink: 0; }

/* ==========================================================================
   Pagination
   ========================================================================== */

.videohub-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 44px 0 20px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}
.videohub-pagination__links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.videohub-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 38px;
	height: 38px;
	padding: 0 13px;
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 700;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
a.videohub-pagination .page-numbers,
.videohub-pagination a.page-numbers {
	cursor: pointer;
}
.videohub-pagination a.page-numbers:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-1px);
}
.videohub-pagination .page-numbers.current {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	box-shadow: 0 4px 12px var(--accent-soft);
}
.videohub-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--text-faint);
	min-width: 20px;
	padding: 0 2px;
}
.videohub-pagination .page-numbers.prev,
.videohub-pagination .page-numbers.next {
	color: var(--text-primary);
	font-weight: 700;
	padding: 0 16px;
}
.videohub-pagination .page-numbers.prev svg,
.videohub-pagination .page-numbers.next svg {
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.videohub-pagination .page-numbers.prev,
	.videohub-pagination .page-numbers.next { padding: 0 12px; }
	.page-numbers__label { display: none; }
	.videohub-pagination .page-numbers.prev,
	.videohub-pagination .page-numbers.next { min-width: 38px; padding: 0; }
}

.no-videos { color: var(--text-muted); }

/* ==========================================================================
   Sort bar
   ========================================================================== */

.videohub-sort-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}
.videohub-sort-bar__label {
	font-size: 13px;
	color: var(--text-faint);
	font-weight: 600;
}
.videohub-sort-bar__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.videohub-sort-bar__option {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	padding: 6px 14px;
	border-radius: 999px;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.videohub-sort-bar__option:hover { color: var(--text-primary); border-color: var(--accent); }
.videohub-sort-bar__option.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Sort/orderby options are hidden on desktop; still shown on tablet/mobile
   (<=1000px, same breakpoint where the sidebar collapses). */
@media (min-width: 1001px) {
	.videohub-sort-bar { display: none; }
}

/* Phones: label + all options squeezed onto one scrollable line to save
   vertical space. Must come after the base .videohub-sort-bar rules above
   (same selector specificity — source order decides the winner). */
@media (max-width: 700px) {
	.videohub-sort-bar {
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		margin-bottom: 10px;
		padding-bottom: 2px;
	}
	.videohub-sort-bar::-webkit-scrollbar { display: none; }
	.videohub-sort-bar__label {
		font-size: 10px;
		flex-shrink: 0;
	}
	.videohub-sort-bar__options {
		flex-wrap: nowrap;
		gap: 4px;
		flex-shrink: 0;
	}
	.videohub-sort-bar__option {
		font-size: 10px;
		padding: 3px 8px;
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Tag clouds (sidebar widget + All Tags page)
   ========================================================================== */

.sidebar-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.tag-index__row {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}
.tag-index__row:last-child { border-bottom: none; }
.tag-index__letter {
	flex-shrink: 0;
	width: 30px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 800;
	color: var(--accent);
	line-height: 1.6;
}
.tag-index__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1;
	min-width: 0;
}
.video-tag--lg {
	font-size: 14px;
	padding: 9px 16px;
}
.video-tag__count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
	margin-left: 6px;
}

.view-all-tags-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
}

/* ==========================================================================
   Single video page
   ========================================================================== */

.single-video-layout {
	padding-top: 28px;
	padding-bottom: 36px;
}

.single-video-top {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 360px);
	gap: 14px;
	align-items: start;
}

@media (max-width: 1024px) {
	.single-video-top { grid-template-columns: 1fr; }
	.single-video-related { display: none; }
}

.videohub-player-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 0;
	overflow: hidden;
}
.videohub-video-el,
.videohub-player-embed,
.videohub-player-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.videohub-video-el {
	object-fit: contain;
	object-position: center;
	margin: 0 auto;
}
/* Plyr wraps our <video> in its own markup — make it fill the same box
   instead of using its default intrinsic-ratio sizing (we already control
   the ratio via .videohub-player-wrap above). */
.videohub-player-wrap .plyr,
.videohub-player-wrap .plyr__video-wrapper {
	width: 100%;
	height: 100%;
}
.videohub-player-placeholder {
	width: 100%;
	aspect-ratio: 16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-elevated);
	color: var(--text-muted);
	border-radius: var(--radius-md);
}

.videohub-player-playbtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: none;
	background: var(--accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}
.videohub-player-playbtn:hover { transform: translate(-50%, -50%) scale(1.06); }
.videohub-player-playbtn svg { margin-left: 3px; }

@media (max-width: 700px) {
	.videohub-player-playbtn {
		width: 48px;
		height: 48px;
	}
	.videohub-player-playbtn svg {
		width: 20px;
		height: 20px;
	}
}

/* Double-tap-to-seek zones, left/right thirds of the player.
   Sit above the video but below the Plyr controls bar so the controls
   still get their own clicks (they have their own stacking context). */
.videohub-seek-zone {
	position: absolute;
	top: 0;
	bottom: 60px; /* keep clear of the controls bar */
	width: 33%;
	z-index: 5;
	cursor: pointer;
}
.videohub-seek-zone--left { left: 0; }
.videohub-seek-zone--right { right: 0; }

.videohub-seek-indicator {
	position: absolute;
	top: 50%;
	width: 96px;
	height: 96px;
	margin-top: -48px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	opacity: 0;
	pointer-events: none;
	transform: scale(0.8);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 6;
}
.videohub-seek-indicator--left { left: 8%; }
.videohub-seek-indicator--right { right: 8%; }
.videohub-seek-indicator.is-active {
	opacity: 1;
	transform: scale(1);
	animation: videohub-seek-flash 0.6s ease;
}
.videohub-seek-indicator__icon { font-size: 15px; letter-spacing: 2px; }
.videohub-seek-indicator__amount { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }

@keyframes videohub-seek-flash {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25); }
	100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
}

@media (max-width: 700px) {
	.videohub-seek-indicator { width: 76px; height: 76px; margin-top: -38px; }
	.videohub-seek-indicator__icon,
	.videohub-seek-indicator__amount { font-size: 13px; }
}

.single-video-title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	margin: 20px 0 10px;
}

.single-video-meta {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 0px;
}
.single-video-cats a { color: var(--accent); }
.single-video-cats a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.single-video-layout { padding-top: 0; }
	.single-video-main { margin: 0 auto; }
	/* Player is centered with a small side margin instead of bleeding
	   edge-to-edge, so it reads as a centered card on small screens. */
	.videohub-player-wrap {
		margin: 0 auto;
		width: 100%;
		max-width: 100%;
	}
	.single-video-title {
		font-size: 20px;
		line-height: 1.3;
		margin: 10px 0 5px;
		/* Clamp long titles to 2 lines instead of growing the page. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.single-video-meta {
		font-size: 11px;
		gap: 5px;
		margin-bottom: 14px;
	}
}

.single-video-description {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	color: var(--text-muted);
	font-size: 14.5px;
	line-height: 1.7;
}
.single-video-description p:first-child { margin-top: 0; }
.single-video-description p:last-child { margin-bottom: 0; }

.single-video-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.video-tag {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.video-tag:hover { border-color: var(--accent); color: var(--accent); }
.video-tag--cat { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.video-tag--cat:hover { border-color: var(--accent); }

.related-video-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (max-width: 1000px) {
	.related-video-list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
	.related-video-list { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
}

/* ==========================================================================
   Single video page — "More Video / Related Video / Description" tabs
   ========================================================================== */

.video-tabs {
	margin-top: 22px;
	padding-top: 5px;
	border-top: 1px solid var(--border);
}

.video-tabs__nav {
	display: inline-flex;
	gap: 4px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 20px;
	max-width: 100%;
	overflow-x: auto;
}
.video-tabs__btn {
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	padding: 9px 20px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}
.video-tabs__btn:hover { color: var(--text-primary); }
.video-tabs__btn.is-active { background: var(--accent); color: #fff; }

.video-tabs__panel[hidden] { display: none; }

.video-tabs__empty { color: var(--text-muted); font-size: 14px; }

.video-tabs__panel .video-grid {
	margin-top: 0;
	gap: 18px 10px;
}

/* Tabs now span the full container width (not squeezed next to the
   sidebar), so there's room for 2 extra columns at the same card size
   as the home page grid — fills the row instead of leaving space empty. */
@media (min-width: 1101px) {
	.video-tabs__panel .video-grid {
		grid-template-columns: repeat( calc( var(--videohub-cols-desktop, 4) + 2 ), 1fr );
	}
}

@media (max-width: 700px) {
	.video-tabs { margin-top: 14px; padding-top: 12px; }
	.video-tabs__nav {
		width: 100%;
		padding: 3px;
		margin-bottom: 12px;
	}
	.video-tabs__btn {
		flex: 1;
		text-align: center;
		font-size: 11.5px;
		padding: 6px 6px;
	}
}

/* ==========================================================================
   All Categories index page
   ========================================================================== */

.categories-index { padding-top: 28px; padding-bottom: 60px; }

/* Column counts come from Appearance -> VideoHub Settings (Category List
   section), injected as CSS custom properties (--videohub-cat-cols-*) in
   <head>. Falls back to 5/3/2 if the variables aren't present. */
.category-grid {
	display: grid;
	grid-template-columns: repeat(var(--videohub-cat-cols-desktop, 5), 1fr);
	gap: 20px;
}

@media (max-width: 1100px) {
	.category-grid { grid-template-columns: repeat(var(--videohub-cat-cols-tablet, 3), 1fr); }
}
@media (max-width: 700px) {
	.category-grid { grid-template-columns: repeat(var(--videohub-cat-cols-mobile, 2), 1fr); gap: 10px 8px; }
}

.category-card {
	display: block;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.category-card:hover {
	border-color: var(--accent);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.category-card__cover {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-elevated);
}
.category-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}
.category-card:hover .category-card__cover img { transform: scale(1.06); }
.category-card__cover-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
}
.category-card__overlay { display: none; }
.category-card__body {
	background: var(--bg-surface);
	padding: 12px 14px 14px;
	border-top: 1px solid var(--border);
}
.category-card__name {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.2px;
	margin: 0 0 4px;
	color: var(--text-primary);
}
.category-card__count {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	background: var(--bg-elevated);
	padding: 3px 9px;
	border-radius: 999px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--border);
	background: var(--bg-base);
	color: var(--text-faint);
	text-align: center;
	padding-top: 32px;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 28px;
}

.site-footer__menu { width: 100%; }
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 28px;
}
.footer-menu li { margin: 0; }
.footer-menu a {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
}
.footer-menu a:hover { color: var(--accent); }

/* Short, centered divider between the footer menu and the copyright line. */
.site-footer__divider-short {
	border-top: 1px solid var(--border);
	width: 80px;
	margin: 18px 0;
}

.site-footer__bottom {
	margin: 0;
	font-size: 13px;
	color: var(--text-faint);
}

@media (max-width: 1000px) {
	.site-footer { padding-top: 26px; }
	.site-footer__inner { padding-bottom: 22px; }
	.footer-menu { gap: 6px 20px; }
	.footer-menu a { font-size: 13px; }
	.site-footer__divider-short { width: 64px; margin: 14px 0; }
	.site-footer__bottom { font-size: 12px; }
}

@media (max-width: 700px) {
	.site-footer { padding-top: 18px; }
	.site-footer__inner { padding-bottom: 16px; }
	.footer-menu { gap: 5px 14px; }
	.footer-menu a { font-size: 11.5px; }
	.site-footer__divider-short { width: 48px; margin: 10px 0; }
	.site-footer__bottom { font-size: 10.5px; }
}

/* ==========================================================================
   Mobile menu — hamburger + panel only kicks in on phones (<=700px). Down
   to tablet width (701-1000px) the primary menu stays visible directly in
   the menubar (it can scroll horizontally if it doesn't fit), so the bar
   never sits there empty aside from a lone hamburger icon.
   ========================================================================== */

@media (max-width: 700px) {
	.menu-toggle { display: flex; }
	.site-header__auth { display: none; }

	/* The dark bar itself takes no visible space on mobile — it only
	   exists as the positioning context for the overlay panel below. */
	.site-header__menubar { background: transparent; }
	.site-header__menubar-inner { height: 0; padding: 0; }

	.mobile-nav-panel {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(15, 15, 15, 0.5);
		z-index: 500;
		padding: 0;
		flex-direction: column;
	}
	.mobile-nav-panel.is-open { display: flex; }

	.primary-menu {
		flex-direction: column;
		gap: 0;
		padding: 8px;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 80vh;
		background: var(--nav-dark);
		box-shadow: 0 12px 24px rgba(0,0,0,0.35);
	}
	.primary-menu li a { display: block; height: auto; padding: 12px 10px; }
	.primary-menu li.current-menu-item a::after { display: none; }
	.primary-menu li.current-menu-item a { background: var(--accent-soft); border-radius: var(--radius-sm); }
}

body.videohub-menu-open { overflow: hidden; }

/* ==========================================================================
   Phone-only tweaks
   ========================================================================== */

@media (max-width: 700px) {
	.site-header__top { height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
	.site-header__logo .site-title { font-size: 19px; }
	.site-header__search { display: none; }
	.mobile-search-toggle { display: flex; }
}

/* ==========================================================================
   Mobile bottom nav (Home / Categories / Search)
   ========================================================================== */

.mobile-bottom-nav { display: none; }

@media (max-width: 700px) {
	body { padding-bottom: 60px; }

	.mobile-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 150;
		background: var(--bg-surface);
		border-top: 1px solid var(--border);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.mobile-bottom-nav__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		background: none;
		border: none;
		color: var(--text-muted);
		font-family: var(--font-body);
		font-size: 11px;
		font-weight: 500;
		cursor: pointer;
		padding: 8px 0 6px;
	}
	.mobile-bottom-nav__item.is-active { color: var(--accent); }
}