/*
Theme Name: Frost Unfiltered
Theme URI: https://frostunfiltered.tv
Description: Child theme of Twenty Twenty-Five for frostunfiltered.tv. Dark, bold, broadcast look. Colors and fonts live in theme.json; this file holds the few touches theme.json can't express.
Template: twentytwentyfive
Version: 0.4.5
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frost-unfiltered
*/

/* ---------- Header ---------- */
.fu-header {
	border-top: 4px solid var(--wp--preset--color--accent-1);
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

/* ---------- Hero ---------- */
.fu-hero {
	position: relative;
	overflow: hidden;
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0 22px,
			rgb(255 255 255 / 0.025) 22px 23px
		),
		radial-gradient(ellipse at 30% 0%, #222 0%, var(--wp--preset--color--base) 70%);
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

/* Cover art banner: full width, fading into the page at the bottom. */
.fu-hero-art {
	margin-bottom: var(--wp--preset--spacing--50);
}

.fu-hero-art img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent);
	mask-image: linear-gradient(to bottom, #000 94%, transparent);
}
/* Visually hidden, still read by screen readers and search engines. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Text and latest-episode player side by side on wide screens; player stacks under the text on phones. */
.fu-hero-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (min-width: 960px) {
	.fu-hero-grid:has(.fu-latest) {
		grid-template-columns: 1fr 1.25fr;
	}

}

/* Small uppercase label above headings ("NEW EVERY WEEK") */
.fu-kicker {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

/* ---------- Buttons: slanted broadcast edge ---------- */
.wp-element-button,
.wp-block-button__link {
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* Outline buttons: the slant would clip a normal border at two corners, so
   hide it and draw a 1px slanted frame instead (outer shape minus inner). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	position: relative;
	border-color: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: -1px;
	background: var(--wp--preset--color--contrast);
	clip-path: polygon(evenodd,
		10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 10px 0,
		10.8px 1px, 1.2px calc(100% - 1px), calc(100% - 10.8px) calc(100% - 1px), calc(100% - 1.2px) 1px, 10.8px 1px);
	pointer-events: none;
}

/* Fill in on hover (core's outline hover left dark text on a clear button). */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------- Tables: dark stripes (core's are light grey, meant for white pages) ---------- */
.wp-block-table table {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--accent-2);
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--accent-2);
}

.wp-block-table td,
.wp-block-table th {
	padding: 0.75em 1em;
	vertical-align: top;
}

.wp-block-table.is-style-stripes {
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--accent-3);
}

/* Let columns size to their content so a short "Year" column doesn't take a third of a phone screen. */
.wp-block-table table.has-fixed-layout {
	table-layout: auto;
}

.wp-block-table td:first-child,
.wp-block-table th:first-child {
	width: 1%;
	white-space: nowrap;
}

/* ---------- Episode / post cards ---------- */
.fu-cards .wp-block-post {
	background: var(--wp--preset--color--accent-3);
	border: 1px solid var(--wp--preset--color--accent-4);
	padding: 0 0 var(--wp--preset--spacing--30);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.fu-cards .wp-block-post > :not(.wp-block-post-featured-image) {
	padding-inline: var(--wp--preset--spacing--30);
}

.fu-cards .wp-block-post:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--accent-2);
}

@media (prefers-reduced-motion: reduce) {
	.fu-cards .wp-block-post { transition: none; }
	.fu-cards .wp-block-post:hover { transform: none; }
}

/* ---------- Forms (WPForms) on the dark background ---------- */
div.wpforms-container-full {
	--wpforms-field-background-color: var(--wp--preset--color--accent-3);
	--wpforms-field-border-color: var(--wp--preset--color--accent-4);
	--wpforms-field-border-color-spare: var(--wp--preset--color--accent-2);
	--wpforms-field-text-color: var(--wp--preset--color--contrast);
	--wpforms-field-border-radius: 0;
	--wpforms-label-color: var(--wp--preset--color--accent-1);
	--wpforms-label-sublabel-color: var(--wp--preset--color--accent-2);
	--wpforms-label-error-color: #ff7a7a;
	--wpforms-button-background-color: var(--wp--preset--color--accent-1);
	--wpforms-button-text-color: var(--wp--preset--color--base);
	--wpforms-button-border-radius: 0;
	--wpforms-field-size-font-size: 1rem;
	--wpforms-label-size-font-size: 1rem;
}

div.wpforms-container-full .wpforms-form button[type="submit"] {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

div.wpforms-container-full .wpforms-confirmation-container-full {
	background: var(--wp--preset--color--accent-3);
	border: 1px solid var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Email signup band (footer) ---------- */
.fu-signup {
	padding-bottom: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

.fu-signup div.wpforms-container-full {
	margin: 0;
	max-width: 36rem;
}

/* Email box and button on one line where there's room. */
@media (min-width: 600px) {
	.fu-signup .wpforms-form {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0.75rem;
	}

	/* Turnstile check goes on its own row under the email box and button. */
	.fu-signup .wpforms-recaptcha-container {
		order: 3;
		flex-basis: 100%;
		padding: 0 !important;
	}

	.fu-signup .wpforms-field-container {
		flex: 1;
	}

	.fu-signup .wpforms-field,
	.fu-signup .wpforms-submit-container {
		padding: 0 !important;
		margin: 0 !important;
	}
}

/* ---------- Footer ---------- */
.fu-footer {
	border-top: 1px solid var(--wp--preset--color--accent-4);
}

/* Visible keyboard focus on the dark background */
:where(a, button, input, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}