/* ===========================================================
   LIGHT MODE + SHARED GLOBAL STYLESHEET
   ThiccFliX + DiccFliX (Allusion Media LLC)
   Loaded site-wide via include_header_general.tpl
   ===========================================================
   This file is the SINGLE SOURCE OF TRUTH for two things:

     1. SHARED / GLOBAL COMPONENTS (BASE / DARK)
        Cross-page component rules that load on every page
        regardless of theme. Lives at the top of this file.
        Pages should NOT redeclare these in their own inline
        <style> blocks — strip and let this file own them.

     2. LIGHT-MODE OVERRIDES (body.light-mode rules)
        All body.light-mode rules. If you're adding a
        light-mode override anywhere else (a .tpl inline
        <style>, another stylesheet) — STOP and add it here.

   Naming note: file is still called light-mode.css for
   historical reasons + zero-migration convenience. It already
   loads on every page, so it's the natural home for shared
   rules. Rename later if desired; no urgency.

   Design rules locked in:
   - Header + footer stay BLACK ALWAYS (handled in their own
     .tpl files; not overridden here).
   - Hero section stays DARK by design (image-based; dark
     gradient is part of the brand).
   - ADS are NEVER altered in light mode (mobile or desktop).
     Partner creative and sponsored brand assets keep their
     original dark treatment regardless of theme.
   =========================================================== */


/* ===========================================================
   SHARED / GLOBAL COMPONENTS  (BASE / DARK)
   ===========================================================
   Site-wide component rules. These load on every page and
   replace the per-page inline copies that used to live in
   each .tpl's <style> block. Light-mode overrides for these
   components live in the body.light-mode section below.
   =========================================================== */


/* ============ View All pill ============
   Sitewide row-header CTA. Dark mode = white text, white
   outline ring, soft white halo on a black pill. Mobile
   hides the button entirely (touch users scroll the row
   directly — no need for a tap target). Light-mode override
   flips this to a black-outlined white pill with white halo —
   see the body.light-mode .view-all rules below. */
.view-all {
	color: #fff;
	font-weight: 900;
	text-decoration: none;
	font-size: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	transition: opacity 0.2s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
}

@media (min-width: 901px) {
	.view-all {
		color: #fff !important;
		background: #000;
		box-shadow:
			0 0 0 1px #fff,
			0 0 18px rgba(255,255,255,0.22);
	}
	.view-all:hover {
		color: #fff !important;
		background: #000;
		box-shadow:
			0 0 0 1.5px #fff,
			0 0 24px rgba(255,255,255,0.5),
			0 0 44px rgba(255,255,255,0.32);
		opacity: 1;
	}
}

/* Mobile View All is now rendered as a scaled-down pill — the rules
   live inline in each page's index.tpl @media (max-width: 900px) block.
   Light-mode mobile override is in the body.light-mode section below. */


/* ============ Legal pages — unified red scrollbar ============
   Single rule, both desktop and mobile, both dark and light mode.
   Scoped via :has(.legal-page) so it only paints on legal pages
   (Terms, DMCA, 2257, any future page wrapped in
   <main class="legal-page">). Video pages, the index, categories,
   and everywhere else keep their native browser scrollbar.

   Transparent track + 50%-opacity brand-red thumb reads against
   both the dark default surface AND the light-mode surface, so no
   dark/light override is needed. Hover bumps to 75% opacity,
   active state goes solid brand red.

   Browser support: :has(), scrollbar-width, scrollbar-color and
   ::-webkit-scrollbar are all supported in current Chrome / Edge /
   Safari / Firefox. Older browsers fall back to the native scrollbar. */
html:has(.legal-page) {
	scrollbar-width: thin;
	scrollbar-color: rgba(229,9,20,0.5) transparent;
}
html:has(.legal-page)::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
html:has(.legal-page)::-webkit-scrollbar-track {
	background: transparent;
}
html:has(.legal-page)::-webkit-scrollbar-thumb {
	background: rgba(229,9,20,0.5);
	border-radius: 999px;
}
html:has(.legal-page)::-webkit-scrollbar-thumb:hover {
	background: rgba(229,9,20,0.75);
}
html:has(.legal-page)::-webkit-scrollbar-thumb:active {
	background: #e50914;
}


/* ===========================================================
   LIGHT-MODE OVERRIDES  (body.light-mode)
   =========================================================== */


/* ============ Page surface ============ */
body.light-mode { background: #fff !important; color: #111 !important; }
html.light-mode,
html.light-mode body { background: #fff !important; color: #111 !important; }

body.light-mode .content,
body.light-mode .main-content,
body.light-mode .main-container,
body.light-mode .main-container-inner { background: #fff !important; }


/* ============ Headers + titles + body text ============ */
body.light-mode .row-header h2 { color: #111 !important; }
body.light-mode .row-icon { color: #111 !important; }
body.light-mode .row-sublabel { color: rgba(0,0,0,0.5) !important; }

body.light-mode .cw-title,
body.light-mode .nr-title,
body.light-mode .tr-title,
body.light-mode .shorts-title { color: #111 !important; }

body.light-mode .creator-tag { color: rgba(0,0,0,0.7) !important; }
body.light-mode .text,
body.light-mode p.text { color: rgba(0,0,0,0.7) !important; }


/* ============ In-frame card titles — carve-out from broad rule ============
   The .cw-title / .nr-title / .tr-title / .shorts-title block above
   darkens card titles that sit UNDER the thumb in the meta / info
   area. But some "titles" live INSIDE the card frame, positioned
   absolutely over the thumb image, and need to read WHITE on the
   dark image in both modes:

     - .category-row .nr-title   index Categories-row card titles
     - .tfx-cat-title            categories landing card titles
     - .tfx-cat-count            categories landing card counts

   These rules pin them back to white in light mode. Selectors are
   prefixed with `html` so they carry specificity 0,3,2 — higher
   than any equal-importance `body.light-mode ...` rule (0,3,1) that
   might still be in flight from a stale inline <style> in a page
   template or from an older cached external stylesheet. Defensive
   but harmless if no such rule exists. */
html body.light-mode .category-row .nr-title,
html body.light-mode .tfx-cat-card .tfx-cat-title {
	color: #fff !important;
}
html body.light-mode .tfx-cat-card .tfx-cat-count {
	color: rgba(255,255,255,0.75) !important;
}


/* ============ Continue Watching cards ============ */
body.light-mode .cw-card {
	background: #f5f5f5;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
body.light-mode .cw-card:hover {
	box-shadow:
		0 10px 28px rgba(0,0,0,0.18),
		0 0 22px rgba(229,9,20,0.28);
}
body.light-mode .cw-meta { background: #f5f5f5 !important; }


/* ============ Standard video cards (NR / Trending / Shorts) ============
   Lighten base drop-shadow — the dark default is too harsh on white.
   Hover glow: tight (22px) + brand-red, kept subtle so it stays
   contained and doesn't bleed visually onto neighbouring cards
   or row-header text. Applies on mobile AND desktop. */
body.light-mode .nr-thumb,
body.light-mode .tr-thumb,
body.light-mode .shorts-thumb {
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
body.light-mode .nr-card:hover .nr-thumb,
body.light-mode .tr-card:hover .tr-thumb,
body.light-mode .shorts-card:hover .shorts-thumb {
	box-shadow:
		0 10px 28px rgba(0,0,0,0.18),
		0 0 22px rgba(229,9,20,0.28);
}


/* ============ Trending rank — bright red Playfair ============ */
body.light-mode .tr-rank {
	color: #e50914 !important;
	filter:
		drop-shadow(0 4px 18px rgba(229,9,20,0.22))
		drop-shadow(0 2px 6px rgba(229,9,20,0.32)) !important;
}


/* ============ Row scroll arrows — bright red chevrons ============ */
body.light-mode .row-arrow { color: #e50914 !important; }
body.light-mode .row-arrow svg {
	filter: drop-shadow(0 2px 8px rgba(229,9,20,0.35));
}


/* ============================================================
   View All pill — Phase 14 item 9
   PC sitewide: full red→white conversion. Black outline ring,
   white pill interior, black text, WHITE outer halo glow.
   No red anywhere on this button in light mode (background
   tint flipped from rgba(229,9,20,0.08) to solid #fff;
   halo flipped from red to white).
   Mobile keeps black text only — no halo on small viewports
   to keep the touch target clean.
   ============================================================ */
body.light-mode .view-all { color: #111 !important; }

@media (min-width: 901px) {
	body.light-mode .view-all {
		color: #111 !important;
		background: #fff !important;
		box-shadow:
			0 0 0 1px rgba(0,0,0,0.85),
			0 0 18px rgba(255,255,255,0.6) !important;
	}
	body.light-mode .view-all:hover {
		color: #111 !important;
		background: #fff !important;
		box-shadow:
			0 0 0 1px #000,
			0 0 24px rgba(255,255,255,0.8),
			0 0 44px rgba(255,255,255,0.5) !important;
	}
}

/* Mobile light-mode View All — mirrors the desktop pill (white interior,
   black outline, white halo) scaled to the mobile font/padding/halo size.
   Needed because index.tpl now renders the pill on mobile; without this
   override the dark-mode mobile rule (bg #000 + white halo + color #fff
   !important) leaks through into light mode. */
@media (max-width: 900px) {
	body.light-mode .row-header .view-all {
		color: #111 !important;
		background: #fff !important;
		box-shadow:
			0 0 0 1px rgba(0,0,0,0.85),
			0 0 12px rgba(255,255,255,0.6) !important;
	}
	body.light-mode .row-header .view-all:hover {
		color: #111 !important;
		background: #fff !important;
		box-shadow:
			0 0 0 1px #000,
			0 0 18px rgba(255,255,255,0.8),
			0 0 30px rgba(255,255,255,0.5) !important;
	}
}

@media (max-width: 520px) {
	body.light-mode .row-header .view-all {
		box-shadow:
			0 0 0 1px rgba(0,0,0,0.85),
			0 0 10px rgba(255,255,255,0.6) !important;
	}
}


/* ============ Header search bar ============
   Search row bg flips white; without these overrides the input text
   and caret render white-on-white (invisible). Applies on mobile AND
   desktop — same treatment everywhere. */
body.light-mode .tfx-search-input {
	color: #111 !important;
	caret-color: #111 !important;
}
body.light-mode .tfx-search-input::placeholder {
	color: rgba(0,0,0,0.5) !important;
}


/* ============ Studio TV badge ============
   Inner checkmark stroke flips from white to bright red — without
   this it disappears against light card-meta backgrounds. TV outline,
   antennas, and stand stay red as in dark mode. Applies on mobile AND
   desktop. */
body.light-mode .studio-tag-tv svg polyline {
	stroke: #e50914 !important;
}


/* ============================================================
   Footer nav hover parity — Phase 14 item 14
   The footer stays dark in light mode (header/footer rule), so
   the link text is white-ish at rest. On hover, dark mode turns
   the text + underline + border red — but in light mode some
   global rule was overriding the red back to its base color.
   Force the same red-hover treatment as dark mode so the
   interaction reads identically across themes.

   Triple-target (color + text-decoration + border-bottom)
   matches the existing dark-mode rule in footer.tpl exactly —
   straight parity, no new effect added.
   ============================================================ */
body.light-mode .footer .nav li a:hover {
	color: #ff0000 !important;
	text-decoration-color: #ff0000 !important;
	border-bottom-color: #ff0000 !important;
}


/* ============ HERO SECTION ============
   No overrides — stays dark by design across themes. */


/* ============================================================
   VIDEO PAGE COMMENTS — light-mode text-only override
   ============================================================
   Inside the Comments tab on the video page (.vp-comments-host),
   only the TEXT in comments turns black on body.light-mode —
   comment body, usernames, timestamps, and other text strings.
   Avatars, like-buttons, action icons, backgrounds, and the
   surrounding chrome stay untouched so the visual design holds.

   This is a TEXT-ONLY flip: every wildcard targets readable
   text nodes, never structural or interactive surfaces.
   ============================================================ */
body.light-mode .vp-comments-host,
body.light-mode .vp-comments-host * {
	/* fall-through: avatars/icons/backgrounds keep their own colors via more specific
	   rules; this base sets text content to black for any plain text descendant */
}
body.light-mode .vp-comments-host,
body.light-mode .vp-comments-host p,
body.light-mode .vp-comments-host span,
body.light-mode .vp-comments-host a,
body.light-mode .vp-comments-host time,
body.light-mode .vp-comments-host .comment-text,
body.light-mode .vp-comments-host .comment-body,
body.light-mode .vp-comments-host .comment-author,
body.light-mode .vp-comments-host .comment-username,
body.light-mode .vp-comments-host .comment-handle,
body.light-mode .vp-comments-host .comment-timestamp,
body.light-mode .vp-comments-host .comment-meta,
body.light-mode .vp-comments-host .comment-reply-text {
	color: #111 !important;
}
/* Username links keep red on hover for affordance, but rest are black */
body.light-mode .vp-comments-host a:hover { color: #e50914 !important; }
/* Do NOT recolor avatars, icons, like buttons, or surface backgrounds */
body.light-mode .vp-comments-host .comment-avatar,
body.light-mode .vp-comments-host img,
body.light-mode .vp-comments-host svg,
body.light-mode .vp-comments-host .comment-actions,
body.light-mode .vp-comments-host .comment-like,
body.light-mode .vp-comments-host button { color: inherit !important; }


/* ============ ADS — CONTENT UNTOUCHED, CONTAINER HOVER ALLOWED ============
   POLICY:
   Ad CONTENT — backgrounds, text colors, labels, CTAs, headlines,
   network logos, partner creative imagery — stays exactly as the
   advertiser/network supplies it. Dark by default, untouched in
   light mode, never recolored.

   ALLOWED:
   A hover halo painted on the thumb wrapper of row-style ad cards
   (.ad-card-thumb inside .ad-card, .ad-shorts-card-thumb inside
   .ad-shorts-card) so they read as visually consistent with the
   surrounding video/short cards on hover. Mirrors how .nr-thumb /
   .tr-thumb / .shorts-thumb hover halos are painted above (same
   box-shadow values, same target depth). Halo replaces the white
   halo from each card's inline base CSS in light mode only — the
   ad creative inside the thumb (image, label, headline, CTA) is
   never recolored or repositioned.

   DO NOT add any body.light-mode rules touching the INTERIOR or
   any other property of these classes:
     .ad-slot, .ad-card-network, .ad-card-thumb, .ad-shorts-card-thumb,
     .ad-slot-between, .ad-slot-row, .ad-placeholder, .sponsored-label,
     .ad-between-house, .ad-between-house-*, .ad-card-label,
     .ad-card-headline, .ad-card-cta
   (Note: .ad-card and .ad-shorts-card are removed from the do-not-touch
   list only for the hover-glow rule below — do NOT add any other
   body.light-mode rules to those classes either.)

   Full-width banner ads (.ad-slot-between) are NOT included — they
   are a different visual shape from row cards and don't need parity. */
body.light-mode .ad-card:hover .ad-card-thumb,
body.light-mode .ad-shorts-card:hover .ad-shorts-card-thumb {
	box-shadow:
		0 10px 28px rgba(0,0,0,0.18),
		0 0 22px rgba(229,9,20,0.28);
}