/* Shared live look (Gumbo): logo and uppercase menu over a full-width banner, charcoal #1B1B1B.
   The header stays pinned and darkens once the page scrolls past it (assets/js/header.js). */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent;
}

.site-header.is-scrolled {
	background-color: rgba(27, 27, 27, 0.95);
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent-1);
}

@media (prefers-reduced-motion: no-preference) {
	.site-header {
		transition: background-color 0.35s ease-in-out;
	}

	.site-header .wp-block-navigation-item__content {
		transition: color 0.25s ease-in-out;
	}
}

/* The banner and the home hero sit behind the header, so main starts flush with the page top. */
main.wp-block-group {
	margin-top: 0;
}

/* The banner part's wrapper div sits inside main's constrained layout, so let it run edge to edge (core's auto margins
   on that layout are !important, hence the offset). */
.wp-block-template-part:has(> .page-banner) {
	position: relative;
	left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	max-width: none;
	width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
}

.page-banner .page-banner__title {
	font-size: 48px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.page-banner {
		min-height: 300px !important;
		padding-top: 160px !important;
		padding-bottom: 80px !important;
	}

	.page-banner .page-banner__title {
		font-size: 32px;
	}
}

/* Seriously Simple Podcasting player in the theme's charcoal and orange instead of its purple-grey and red.
   The plugin's stylesheet loads after this one, so the overrides that aren't variables need the extra `body`. */
.castos-player {
	--ssp-dark-mode-bg1-color: #1B1B1B;
	--ssp-dark-mode-bg2-color: #1B1B1B;
	--ssp-dark-mode-player-panel-bg: #2A2A2A;
	--ssp-progress-bar-color: #FD5B44;
	--ssp-play-btn-color: #FD5B44;
	--ssp-player-btns-opacity: 1;
	font-family: var(--wp--preset--font-family--montserrat);
}

body .castos-player .ssp-progress {
	background-color: #4A4A4A;
}

body .castos-player .player-panels-nav button {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Star rating: five stars, orange up to the rating (set inline by the block) and grey after. */
.star-rating {
	width: fit-content;
	margin: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-1) var(--mindframes-rating-fill), rgba(127, 127, 127, 0.55) var(--mindframes-rating-fill));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 20px;
	line-height: 1.2;
}