/*
Theme Name: Toronto Rox
Theme URI: https://torontorox.com/
Author: Toronto Rox
Description: A lightweight, video-first theme for Toronto Rox. Landing page with a video grid and playlists showcase, a dedicated videos archive, and responsive YouTube and SoundCloud embeds. No build step, no framework, one stylesheet.
Version: 1.1.0
Requires at least: 6.3
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: toronto-rox
Tags: blog, video, music, one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Tokens

   Dark by default: this is a site made of video posters, and they sit better
   on a dark ground. Light mode follows the OS preference.
   Accent is taken from the equalizer bars in the logo.
   ========================================================================== */

:root {
	--rox-bg: #0f1012;
	--rox-surface: #17191c;
	--rox-surface-2: #202329;
	--rox-text: #e9eaec;
	--rox-text-dim: #a0a4ab;
	--rox-text-faint: #71757c;
	--rox-border: #2a2e34;
	--rox-accent: #ef8f2a;
	--rox-accent-hover: #ffa645;
	--rox-accent-contrast: #1a1205;
	--rox-focus: #7ab8ff;

	--rox-radius: 10px;
	--rox-radius-sm: 6px;

	--rox-wrap: 1180px;
	--rox-wrap-narrow: 46rem;
	--rox-gutter: clamp(1rem, 4vw, 2rem);

	--rox-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rox-font-alt: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--rox-audio-height: 166px;

	--rox-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
}

@media (prefers-color-scheme: light) {
	:root {
		--rox-bg: #ffffff;
		--rox-surface: #f7f8f9;
		--rox-surface-2: #eceef1;
		--rox-text: #16181c;
		--rox-text-dim: #565b63;
		--rox-text-faint: #797f88;
		--rox-border: #dfe2e7;
		--rox-accent: #c96a06;
		--rox-accent-hover: #a95605;
		--rox-accent-contrast: #ffffff;
		--rox-focus: #0b63ce;

		--rox-shadow: 0 1px 2px rgba(16, 18, 22, .06), 0 8px 24px rgba(16, 18, 22, .08);
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--rox-bg);
	color: var(--rox-text);
	font-family: var(--rox-font);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	line-height: 1.2;
	font-weight: 650;
	letter-spacing: -.015em;
	text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); }
h3 { font-size: 1.2rem; }

p, ul, ol, blockquote, figure, pre, table {
	margin: 0 0 1.15rem;
}

a {
	color: var(--rox-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: .16em;
}

a:hover,
a:focus-visible {
	color: var(--rox-accent-hover);
}

:focus-visible {
	outline: 2px solid var(--rox-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Anything that can carry an intrinsic width is capped, so no template can
   push the document sideways on a narrow screen. */
img,
video,
iframe,
embed,
object,
svg {
	max-width: 100%;
}

img,
video {
	height: auto;
}

pre {
	overflow-x: auto;
	padding: 1rem;
	background: var(--rox-surface-2);
	border-radius: var(--rox-radius-sm);
	font-family: var(--rox-font-alt);
	font-size: .9rem;
}

code {
	padding: .12em .38em;
	background: var(--rox-surface-2);
	border-radius: 4px;
	font-family: var(--rox-font-alt);
	font-size: .9em;
}

pre code {
	padding: 0;
	background: none;
}

blockquote {
	margin-inline: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--rox-accent);
	color: var(--rox-text-dim);
}

hr {
	height: 1px;
	margin: 2rem 0;
	border: 0;
	background: var(--rox-border);
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rox-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .7rem 1.1rem;
	background: var(--rox-accent);
	color: var(--rox-accent-contrast);
	font-weight: 600;
	border-radius: 0 0 var(--rox-radius-sm) 0;
}

.rox-skip-link:focus {
	left: 0;
	top: 0;
	color: var(--rox-accent-contrast);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.rox-wrap {
	width: 100%;
	max-width: var(--rox-wrap);
	margin-inline: auto;
	padding-inline: var(--rox-gutter);
}

.rox-wrap--narrow {
	max-width: var(--rox-wrap-narrow);
}

.rox-main {
	display: block;
	min-height: 50vh;
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.rox-section {
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.rox-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--rox-border);
}

.rox-section__title {
	margin: 0;
}

.rox-section__more {
	font-size: .92rem;
	font-weight: 600;
	white-space: nowrap;
}

.rox-page-header {
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.rox-page-header__title {
	margin-bottom: .25rem;
}

.rox-page-header__desc {
	margin: 0;
	color: var(--rox-text-dim);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.rox-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Solid first: a browser without color-mix() would otherwise drop the
	   declaration entirely and leave the sticky header transparent. */
	background: var(--rox-bg);
	background: color-mix(in srgb, var(--rox-bg) 88%, transparent);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--rox-border);
}

@supports not (backdrop-filter: blur(1px)) {
	.rox-header {
		background: var(--rox-bg);
	}
}

.rox-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 62px;
}

.rox-brand {
	flex: 0 1 auto;
	min-width: 0;
}

.rox-brand__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.rox-brand__mark,
.custom-logo {
	width: auto;
	height: 34px;
	display: block;
}

.rox-nav {
	margin-left: auto;
}

.rox-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rox-nav__list a {
	display: block;
	padding: .45rem .7rem;
	border-radius: var(--rox-radius-sm);
	color: var(--rox-text-dim);
	font-size: .95rem;
	font-weight: 550;
	text-decoration: none;
	white-space: nowrap;
}

.rox-nav__list a:hover,
.rox-nav__list a:focus-visible {
	background: var(--rox-surface-2);
	color: var(--rox-text);
}

.rox-nav__list .current-menu-item > a,
.rox-nav__list .current_page_item > a {
	color: var(--rox-accent);
}

/* Submenus stay simple: revealed on hover and on focus, no JS. */
.rox-nav__list .sub-menu {
	position: absolute;
	margin: 0;
	padding: .3rem;
	list-style: none;
	background: var(--rox-surface);
	border: 1px solid var(--rox-border);
	border-radius: var(--rox-radius-sm);
	box-shadow: var(--rox-shadow);
	opacity: 0;
	visibility: hidden;
}

.rox-nav__list li {
	position: relative;
}

.rox-nav__list li:hover > .sub-menu,
.rox-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.rox-nav-toggle {
	display: none;
	margin-left: auto;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 1px solid var(--rox-border);
	border-radius: var(--rox-radius-sm);
	color: var(--rox-text);
	cursor: pointer;
}

.rox-nav-toggle__bars,
.rox-nav-toggle__bars::before,
.rox-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	margin-inline: auto;
	background: currentColor;
	border-radius: 2px;
}

.rox-nav-toggle__bars {
	position: relative;
}

.rox-nav-toggle__bars::before,
.rox-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.rox-nav-toggle__bars::before { top: -6px; }
.rox-nav-toggle__bars::after { top: 6px; }

/* Progressive enhancement: the collapsed menu only exists when the script that
   opens it does. Without JS the list simply renders inline and stays reachable,
   and no dead toggle button is shown. The .rox-js class is set by an inline
   snippet in header.php so this resolves before first paint. */
@media (max-width: 43.75em) {
	.rox-js .rox-nav-toggle {
		display: block;
	}

	.rox-js .rox-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: .5rem var(--rox-gutter) .9rem;
		background: var(--rox-bg);
		border-bottom: 1px solid var(--rox-border);
	}

	.rox-js .rox-nav.is-open {
		display: block;
	}

	.rox-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.rox-nav__list a {
		padding: .6rem .25rem;
	}

	.rox-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		border: 0;
		box-shadow: none;
		padding-left: .75rem;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.rox-hero {
	padding-block: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 3vw, 1.75rem);
}

.rox-hero__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.25rem);
	letter-spacing: -.03em;
}

.rox-hero__tagline {
	margin: .4rem 0 0;
	max-width: 46ch;
	color: var(--rox-text-dim);
	font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
}

/* ==========================================================================
   Card grid
   ========================================================================== */

.rox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.6rem);
}

.rox-card {
	min-width: 0;
}

.rox-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: var(--rox-radius);
}

.rox-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rox-surface-2);
	border-radius: var(--rox-radius);
}

.rox-card__img {
	width: 100%;
	height: 100%;
	/* YouTube's hqdefault is 4:3 with letterbox bars; cover trims them back to
	   the 16:9 frame rather than showing black bands in the grid. */
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

/* The logo placeholder is a wordmark, not a photo: contain it and give it room
   so it never crops or stretches. Password-protected posts land here too --
   deriving a poster from locked content would show what is inside it. */
.rox-card__img--placeholder,
.rox-card__img--protected {
	object-fit: contain;
	padding: 18% 16%;
	opacity: .5;
}

.rox-card__badge--locked {
	background: rgba(10, 11, 13, .82);
}

.rox-card__link:hover .rox-card__img:not(.rox-card__img--placeholder),
.rox-card__link:focus-visible .rox-card__img:not(.rox-card__img--placeholder) {
	transform: scale(1.04);
}

.rox-card__badge {
	position: absolute;
	right: .55rem;
	bottom: .55rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: rgba(10, 11, 13, .78);
	color: #fff;
	border-radius: 50%;
	backdrop-filter: blur(4px);
}

.rox-card__body {
	display: block;
	padding: .7rem .1rem 0;
}

.rox-card__title {
	display: block;
	font-weight: 620;
	line-height: 1.35;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.rox-card__link:hover .rox-card__title,
.rox-card__link:focus-visible .rox-card__title {
	color: var(--rox-accent);
}

.rox-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .3rem;
	color: var(--rox-text-faint);
	font-size: .84rem;
}

.rox-card__tag {
	padding: .05rem .45rem;
	background: var(--rox-surface-2);
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.rox-card__img {
		transition: none;
	}

	.rox-card__link:hover .rox-card__img,
	.rox-card__link:focus-visible .rox-card__img {
		transform: none;
	}
}

/* ==========================================================================
   Embeds

   The wrapper owns sizing. --rox-ratio is set inline by inc/embeds.php for
   providers whose shape is not 16:9 -- the imported Facebook posts are
   portrait 500x806, for instance.
   ========================================================================== */

.rox-embed {
	position: relative;
	width: 100%;
	margin-block: 1.5rem;
	aspect-ratio: var(--rox-ratio, 16 / 9);
	background: #000;
	border-radius: var(--rox-radius-sm);
	overflow: hidden;
}

.rox-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Audio players are fixed-height widgets, not ratio-based frames. Forcing a
   video ratio on a SoundCloud embed leaves a dead band under the waveform. */
.rox-embed--audio {
	aspect-ratio: auto;
	height: var(--rox-audio-height);
	background: none;
}

.rox-embed--generic {
	background: var(--rox-surface-2);
}

/* ==========================================================================
   Post content
   ========================================================================== */

.rox-feed {
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 4vw, 2.75rem);
}

.rox-post__header {
	margin-bottom: 1rem;
}

.rox-post__title {
	margin-bottom: .3rem;
	overflow-wrap: anywhere;
}

.rox-post__title a {
	color: inherit;
	text-decoration: none;
}

.rox-post__title a:hover,
.rox-post__title a:focus-visible {
	color: var(--rox-accent);
}

.rox-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .75rem;
	margin: 0;
	color: var(--rox-text-faint);
	font-size: .875rem;
}

.rox-post__meta a {
	color: var(--rox-text-dim);
}

/* Imported content is fifteen years of mixed markup; keep it inside its
   column no matter what it contains. */
.rox-post__content,
.rox-post__excerpt {
	overflow-wrap: break-word;
}

.rox-post__content > *:last-child {
	margin-bottom: 0;
}

.rox-post__content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.rox-post__content th,
.rox-post__content td {
	padding: .5rem .7rem;
	border: 1px solid var(--rox-border);
	text-align: left;
}

.rox-post__more a {
	font-weight: 600;
	text-decoration: none;
}

.rox-post__more a:hover,
.rox-post__more a:focus-visible {
	text-decoration: underline;
}

.rox-feed .rox-post + .rox-post {
	padding-top: clamp(1.75rem, 4vw, 2.75rem);
	border-top: 1px solid var(--rox-border);
}

/* Core block and legacy alignment classes. */
.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: .3rem 1.2rem .8rem 0;
}

.alignright {
	float: right;
	margin: .3rem 0 .8rem 1.2rem;
}

.wp-caption,
figure {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	margin-top: .4rem;
	color: var(--rox-text-faint);
	font-size: .85rem;
	text-align: center;
}

.rox-pagelinks {
	margin-top: 1.5rem;
	font-size: .9rem;
}

/* ==========================================================================
   Pagination and post navigation
   ========================================================================== */

.pagination,
.navigation.pagination {
	margin-top: clamp(2rem, 5vw, 3rem);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
	justify-content: center;
}

.page-numbers {
	display: inline-block;
	min-width: 2.35rem;
	padding: .45rem .6rem;
	background: var(--rox-surface);
	border: 1px solid var(--rox-border);
	border-radius: var(--rox-radius-sm);
	color: var(--rox-text-dim);
	font-size: .92rem;
	text-align: center;
	text-decoration: none;
}

.page-numbers:hover,
.page-numbers:focus-visible {
	border-color: var(--rox-accent);
	color: var(--rox-text);
}

.page-numbers.current {
	background: var(--rox-accent);
	border-color: var(--rox-accent);
	color: var(--rox-accent-contrast);
	font-weight: 650;
}

.page-numbers.dots {
	background: none;
	border-color: transparent;
}

.rox-postnav {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--rox-border);
}

.rox-postnav .nav-links {
	justify-content: space-between;
	gap: 1rem;
}

.rox-postnav a {
	display: block;
	max-width: 22rem;
	font-weight: 600;
	text-decoration: none;
}

.rox-postnav__label {
	display: block;
	color: var(--rox-text-faint);
	font-size: .8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ==========================================================================
   Search form, notices, empty states
   ========================================================================== */

.rox-search {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block: 1.25rem;
}

.rox-search__field {
	flex: 1 1 14rem;
	min-width: 0;
	padding: .6rem .8rem;
	background: var(--rox-surface);
	border: 1px solid var(--rox-border);
	border-radius: var(--rox-radius-sm);
	color: var(--rox-text);
	font: inherit;
	font-size: .95rem;
}

.rox-search__submit {
	padding: .6rem 1.1rem;
	background: var(--rox-accent);
	border: 0;
	border-radius: var(--rox-radius-sm);
	color: var(--rox-accent-contrast);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.rox-search__submit:hover {
	background: var(--rox-accent-hover);
}

.rox-empty {
	padding: 2rem 0;
	color: var(--rox-text-dim);
}

.rox-notice {
	margin-bottom: 1.5rem;
	padding: .75rem 1rem;
	background: var(--rox-surface);
	border: 1px solid var(--rox-border);
	border-left: 3px solid var(--rox-accent);
	border-radius: var(--rox-radius-sm);
	color: var(--rox-text-dim);
	font-size: .92rem;
}

.rox-404__home {
	margin-top: 1.5rem;
	font-weight: 600;
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list ol {
	list-style: none;
	padding-left: 1.25rem;
}

.comment-body {
	padding-block: 1rem;
	border-top: 1px solid var(--rox-border);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: .55rem .75rem;
	background: var(--rox-surface);
	border: 1px solid var(--rox-border);
	border-radius: var(--rox-radius-sm);
	color: var(--rox-text);
	font: inherit;
	font-size: .95rem;
}

.comment-form .submit {
	padding: .6rem 1.2rem;
	background: var(--rox-accent);
	border: 0;
	border-radius: var(--rox-radius-sm);
	color: var(--rox-accent-contrast);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.rox-footer {
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-block: 1.75rem;
	border-top: 1px solid var(--rox-border);
	color: var(--rox-text-faint);
	font-size: .9rem;
}

.rox-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
}

.rox-footer__copy {
	margin: 0;
}

.rox-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rox-footer__list a {
	color: var(--rox-text-dim);
	text-decoration: none;
}

.rox-footer__list a:hover,
.rox-footer__list a:focus-visible {
	color: var(--rox-accent);
	text-decoration: underline;
}