/* ====================================================================
 * IH Videos — site-wide dark mode override
 *
 * Repaints any FSE theme (built around the same WP preset CSS variables)
 * to a YouTube-style dark palette WITHOUT touching the theme files.
 *
 * Strategy:
 *  1. Re-declare WP preset variables at :root so every block that
 *     references --wp--preset--color--* picks up the dark values.
 *  2. Force body text to white (theme.json's body color references a
 *     non-existent slug, so default would be browser black on dark).
 *  3. Targeted fixes for theme elements that semantically use the
 *     mono-1 slug as a BACKGROUND (e.g. Idea Flow footer copyright
 *     bar) — flipping mono-1 globally would make them invisible.
 * ==================================================================== */
:root {
	--wp--preset--color--base: #0F0F0F;
	--wp--preset--color--mono-1: #FFFFFF;
	--wp--preset--color--mono-2: #AAAAAA;
	--wp--preset--color--mono-3: #272727;
	--wp--preset--color--mono-4: #181818;
	--wp--preset--color--featured: #212121;
	--wp--preset--color--primary: #FF0000;
	--wp--preset--color--primary-hover: #CC0000;
	--wp--preset--color--contrast-light: #FFFFFF;
	--wp--preset--color--contrast-dark: #000000;
}

html, body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--mono-1);
}

/* Theme.json sets body { color: var(--wp--preset--color--contrast) } which
 * doesn't exist in the palette — falls back to browser black. Force white. */
body,
body p,
.wp-site-blocks {
	color: #FFFFFF;
}

/* Headings — theme.json explicitly colors h1 with mono-1; h2-h6 inherit.
 * After flip, mono-1 = white, so h1 is fine. Make sure h2-h6 are too. */
h1, h2, h3, h4, h5, h6 {
	color: var(--wp--preset--color--mono-1);
}

/* ---- Targeted fixes for theme elements that use mono-1 as BACKGROUND ----
 * Idea Flow's footer copyright bar wraps the white text inside a group
 * with backgroundColor:"mono-1". With mono-1 now white, the bar would
 * become invisible white-on-white. Force a dark surface there. */
.wp-block-template-part .has-mono-1-background-color,
footer .has-mono-1-background-color {
	background-color: #212121 !important;
}

/* Inputs (comments, search) — dark fields with light text. */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	background-color: var(--wp--preset--color--mono-4);
	color: var(--wp--preset--color--mono-1);
	border-color: var(--wp--preset--color--mono-3);
}
input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--mono-2);
}

/* Tame post-content links — theme styles them as primary (now bright
 * red) with underline. Keep red, remove the underline. */
.wp-block-post-content a,
.wp-block-post-content a:visited {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.wp-block-post-content a:hover {
	text-decoration: underline;
}

/* Borders / dividers across blocks pick this up. */
hr, .wp-block-separator {
	border-color: var(--wp--preset--color--mono-3);
	background-color: var(--wp--preset--color--mono-3);
}

/* ====== IH Videos — frontend styles ====== */

.ih-videos-topbar {
	border-bottom: 1px solid var(--wp--preset--color--mono-3);
	position: sticky;
	top: 0;
	z-index: 100;
	gap: 24px;
}
.ih-videos-topbar .ih-videos-search { flex: 1; max-width: 640px; }

/* ====== Search bar ====== */
.ih-videos-search { position: relative; width: 100%; }
.ih-videos-search-form {
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--mono-4);
	border: 1px solid var(--wp--preset--color--mono-3);
	border-radius: 999px;
	padding: 4px 4px 4px 16px;
	gap: 8px;
}
.ih-videos-search-form:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px rgba(255,0,0,0.15);
}
.ih-videos-search-icon { color: var(--wp--preset--color--mono-2); flex-shrink: 0; }
.ih-videos-search-input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--mono-1);
	font-size: 16px;
	outline: none;
	padding: 8px 0;
}
.ih-videos-search-input::placeholder { color: var(--wp--preset--color--mono-2); }
.ih-videos-search-submit {
	background: var(--wp--preset--color--featured);
	color: var(--wp--preset--color--mono-1);
	border: none;
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	font-weight: 600;
}
.ih-videos-search-submit:hover { background: var(--wp--preset--color--mono-3); }
.ih-videos-search-hero .ih-videos-search-form { padding: 8px 8px 8px 24px; font-size: 18px; }
.ih-videos-search-hero .ih-videos-search-input { font-size: 18px; padding: 14px 0; }

.ih-videos-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--wp--preset--color--mono-4);
	border: 1px solid var(--wp--preset--color--mono-3);
	border-radius: 12px;
	max-height: 500px;
	overflow-y: auto;
	z-index: 200;
	padding: 8px;
}
.ih-videos-search-result {
	display: flex;
	gap: 12px;
	padding: 8px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--mono-1);
}
.ih-videos-search-result:hover { background: var(--wp--preset--color--mono-3); }
.ih-videos-search-thumb-wrap { position: relative; width: 120px; flex-shrink: 0; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: var(--wp--preset--color--mono-3); }
.ih-videos-search-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ih-videos-search-duration { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.8); color: #fff; padding: 1px 4px; font-size: 11px; border-radius: 3px; }
.ih-videos-search-result-title { font-weight: 600; line-height: 1.3; }
.ih-videos-search-result-meta { color: var(--wp--preset--color--mono-2); font-size: 13px; margin-top: 4px; }
.ih-videos-search-empty { padding: 16px; text-align: center; color: var(--wp--preset--color--mono-2); }

/* ====== Sidebar ====== */
.ih-videos-sidebar {
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}
.ih-videos-sidebar-list { list-style: none; margin: 0; padding: 0; }
.ih-videos-sidebar-item a {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--wp--preset--color--mono-1);
	text-decoration: none;
	font-size: 14px;
}
.ih-videos-sidebar-item a:hover { background: var(--wp--preset--color--mono-4); }
.ih-videos-sidebar-item.is-active a { background: var(--wp--preset--color--mono-3); font-weight: 600; }
.ih-videos-sidebar-item svg { color: var(--wp--preset--color--mono-2); flex-shrink: 0; }
.ih-videos-sidebar-count { margin-left: auto; color: var(--wp--preset--color--mono-2); font-style: normal; font-size: 12px; }

/* ====== Grid ====== */
.ih-videos-grid { width: 100%; }
.ih-videos-grid-heading { margin: 0 0 16px; font-weight: 600; }
.ih-videos-grid-items {
	display: grid;
	gap: 24px 16px;
	grid-template-columns: repeat(var(--ih-videos-cols, 4), minmax(0, 1fr));
}
.ih-videos-grid-cols-1 { --ih-videos-cols: 1; }
.ih-videos-grid-cols-2 { --ih-videos-cols: 2; }
.ih-videos-grid-cols-3 { --ih-videos-cols: 3; }
.ih-videos-grid-cols-4 { --ih-videos-cols: 4; }
.ih-videos-grid-cols-5 { --ih-videos-cols: 5; }
.ih-videos-grid-cols-6 { --ih-videos-cols: 6; }

@media (max-width: 1024px) { .ih-videos-grid-items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ih-videos-grid-items { grid-template-columns: 1fr; } }

/* ====== Card ====== */
.ih-videos-card { display: flex; flex-direction: column; }
.ih-videos-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16/9;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--mono-4);
}
.ih-videos-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ih-videos-card-thumb:hover img { transform: scale(1.03); }
.ih-videos-card-duration {
	position: absolute; bottom: 8px; right: 8px;
	background: rgba(0,0,0,0.85); color: #fff;
	font-size: 12px; font-weight: 600;
	padding: 2px 6px; border-radius: 4px;
}
.ih-videos-card-thumb-placeholder { width: 100%; height: 100%; background: var(--wp--preset--color--mono-3); }
.ih-videos-card-meta { padding: 12px 4px 0; }
.ih-videos-card-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ih-videos-card-title a { color: var(--wp--preset--color--mono-1); text-decoration: none; }
.ih-videos-card-title a:hover { color: var(--wp--preset--color--mono-2); }
.ih-videos-card-info { margin: 6px 0 0; color: var(--wp--preset--color--mono-2); font-size: 13px; }
.ih-videos-card-cat { color: var(--wp--preset--color--mono-2); }

/* ====== Single layout ====== */
.ih-videos-single,
.ih-videos-archive {
	padding: 20px 24px;
}
.ih-videos-single-cols,
.ih-videos-archive-cols {
	gap: 24px;
}
@media (max-width: 900px) {
	.ih-videos-col-sidebar,
	.ih-videos-col-related { display: none; }
}
.ih-videos-col-main { min-width: 0; }
.ih-videos-single-content { line-height: 1.6; }
.ih-videos-single-meta { margin: 12px 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--wp--preset--color--mono-3); gap: 12px; }
.ih-videos-single-tags { margin-top: 20px; font-size: 13px; color: var(--wp--preset--color--mono-2); }

/* ====== Player ====== */
.ih-videos-player { margin: 0; }
.ih-videos-player-video { width: 100%; max-height: 78vh; background: #000; border-radius: 12px; }
.ih-videos-player-empty { padding: 40px; background: var(--wp--preset--color--mono-4); border-radius: 12px; text-align: center; color: var(--wp--preset--color--mono-2); }
.ih-videos-chapters-wrap { margin-top: 14px; }
.ih-videos-chapters-wrap summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.ih-videos-chapters { list-style: none; padding: 0; margin: 8px 0 0; max-height: 240px; overflow-y: auto; }
.ih-videos-chapters li { margin: 0; }
.ih-videos-chapter {
	display: flex; gap: 12px; width: 100%;
	background: transparent; border: 0;
	color: var(--wp--preset--color--mono-1);
	padding: 8px 10px; border-radius: 6px;
	cursor: pointer; text-align: left;
}
.ih-videos-chapter:hover { background: var(--wp--preset--color--mono-4); }
.ih-videos-chapter-time { font-variant-numeric: tabular-nums; color: var(--wp--preset--color--mono-2); min-width: 50px; }

/* ====== Related ====== */
.ih-videos-related { position: sticky; top: 80px; }
.ih-videos-related-heading { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ih-videos-related-list { display: flex; flex-direction: column; gap: 12px; }
.ih-videos-related .ih-videos-card { flex-direction: row; gap: 10px; }
.ih-videos-related .ih-videos-card-thumb { width: 160px; flex-shrink: 0; }
.ih-videos-related .ih-videos-card-meta { padding: 0; flex: 1; min-width: 0; }
.ih-videos-related .ih-videos-card-title { font-size: 14px; }

/* ====== Home ====== */
.ih-videos-home-hero { text-align: center; }
.ih-videos-home-hero .ih-videos-search-form { margin-top: 24px; }