/*
Theme Name: Top Five Media
Theme URI: https://topfive-media.com
Author: Top Five Media
Description: Block theme for Top Five Media and the Top 5: Heated Rivalry podcast. Each episode is a regular post.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: topfive
*/

/* Sections sit flush against each other */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Wordmark: lavender label block, like the logo */
.tf-wordmark {
	display: inline-block;
	margin: 0;
	padding: 0.15rem 0.6rem;
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	line-height: 1.2;
	text-transform: uppercase;
	transform: rotate(-2deg);
}

.tf-wordmark a {
	color: inherit;
	text-decoration: none;
}

.tf-wordmark a:hover {
	color: inherit;
}

/* Label/sticker blocks used for headline words */
.tf-label {
	display: inline-block;
	padding: 0 0.18em;
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--black);
}

.tf-label--orchid {
	background: var(--wp--preset--color--orchid);
	transform: rotate(-2deg);
}

/* Film-grain texture echoing the logo's distressed print */
.tf-grain {
	position: relative;
	isolation: isolate;
}

.tf-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.12;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tf-logo img {
	transform: rotate(-3deg);
}

.tf-kicker {
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Big outlined numerals for the Top 5 countdown */
.tf-rank {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 8vw, 6rem);
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--lavender);
	margin: 0;
	min-width: 0.9em;
	flex-shrink: 0;
	text-align: center;
}

.tf-countdown > .wp-block-group {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tf-countdown > .wp-block-group:last-child {
	border-bottom: 0;
}

/* Responsive 16:9 video frame */
.tf-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 3px solid var(--wp--preset--color--black);
	box-shadow: 10px 10px 0 var(--wp--preset--color--black);
	background: var(--wp--preset--color--black);
}

.tf-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Cards: episodes, partnership offers, platforms */
.tf-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tf-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--lavender);
}

.tf-card .wp-block-post-title a {
	text-decoration: none;
}

.tf-stat {
	border-left: 4px solid var(--wp--preset--color--lavender);
	padding-left: 1.25rem;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--lavender);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.wp-block-embed iframe {
	border-radius: 12px;
}

.wp-block-column > .tf-card {
	height: 100%;
}