/*
Theme Name: Monoreel
Theme URI: https://example.com/monoreel
Author: Monoreel
Description: A quiet, typewriter-set portfolio theme for directors, editors and cinematographers. Washed-out stills that come alive on hover, colored highlighter navigation, a full-screen video lightbox, a bio template and a category index. Projects are a custom post type with client, video URL and hover-preview fields.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monoreel
Tags: portfolio, grid-layout, one-column, custom-menu, featured-images, theme-options, minimal
*/

/* ---------- Tokens (overridden by Customizer output in <head>) ---------- */
:root {
	--mr-bg: #ffffff;
	--mr-ink: #111111;
	--mr-muted: #6b6b6b;
	--mr-font: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--mr-size: 11px;
	--mr-leading: 1.55;
	--mr-max: 1180px;
	--mr-gutter: 28px;
	--mr-cols: 4;
	--mr-wash: 0.42;          /* white veil over idle thumbnails */
	--mr-wash-sat: 0.75;      /* idle saturation */
	--mr-hl-1: #7fb5a8;       /* teal   */
	--mr-hl-2: #e8ad16;       /* mustard*/
	--mr-hl-3: #e9b3d4;       /* pink   */
	--mr-hl-4: #f4e61b;       /* yellow */
	--mr-hl-5: #9fb4e6;       /* blue   */
	--mr-hl-brand: #e4251b;   /* red, site title */
	--mr-ease: cubic-bezier(.2,.7,.2,1);
}

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

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

body {
	margin: 0;
	background: var(--mr-bg);
	color: var(--mr-ink);
	font-family: var(--mr-font);
	font-size: var(--mr-size);
	line-height: var(--mr-leading);
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* lets full-width video break out without a sideways scrollbar */
}

a { color: inherit; text-decoration: none; }
img, video, iframe { max-width: 100%; display: block; }
p { margin: 0 0 1.2em; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 1000;
	top: 8px; left: 8px; padding: 6px 10px; background: var(--mr-hl-4);
}

:focus-visible { outline: 1px dashed var(--mr-ink); outline-offset: 3px; }

.mr-wrap {
	max-width: var(--mr-max);
	margin: 0 auto;
	padding: 0 var(--mr-gutter);
}

/* ---------- Header ---------- */
.mr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 28px;
	padding-bottom: 22px;
}

.mr-brand,
.mr-nav a {
	display: inline-block;
	padding: 6px 9px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background-color .12s linear;
}
.mr-brand { margin-left: -9px; }
.mr-brand-group .custom-logo-link { display: inline-block; }

/* Social icons (after the site title) */
.mr-brand-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 14px;
}
.mr-social {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
}
.mr-social a {
	display: flex; align-items: center; justify-content: center;
	padding: 6px;
	color: var(--mr-ink);
	transition: background-color .12s linear;
}
.mr-social svg {
	width: var(--mr-social-size, 14px);
	height: var(--mr-social-size, 14px);
	fill: currentColor;
}
.mr-social li:nth-child(5n+1) a { --hl: var(--mr-hl-1); }
.mr-social li:nth-child(5n+2) a { --hl: var(--mr-hl-2); }
.mr-social li:nth-child(5n+3) a { --hl: var(--mr-hl-3); }
.mr-social li:nth-child(5n+4) a { --hl: var(--mr-hl-4); }
.mr-social li:nth-child(5n+5) a { --hl: var(--mr-hl-5); }
.mr-social a:hover,
.mr-social a:focus-visible { background: var(--hl); }
.mr-brand:hover, .mr-brand:focus-visible { background: var(--mr-hl-brand); }
.mr-brand--logo { display: inline-flex; align-items: center; }
.mr-brand .mr-logo { display: block; height: var(--mr-logo-h, 22px); width: auto; max-width: 60vw; }

.mr-nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 6px 22px;
	margin-right: -9px;
}
.mr-nav li:nth-child(5n+1) a { --hl: var(--mr-hl-1); }
.mr-nav li:nth-child(5n+2) a { --hl: var(--mr-hl-2); }
.mr-nav li:nth-child(5n+3) a { --hl: var(--mr-hl-3); }
.mr-nav li:nth-child(5n+4) a { --hl: var(--mr-hl-4); }
.mr-nav li:nth-child(5n+5) a { --hl: var(--mr-hl-5); }
.mr-nav a:hover,
.mr-nav a:focus-visible,
.mr-nav .current-menu-item > a,
.mr-nav .current-menu-ancestor > a,
.mr-nav .current_page_item > a { background: var(--hl); }

.mr-menu-toggle {
	display: none;
	font: inherit; text-transform: uppercase; letter-spacing: .04em;
	background: none; border: 0; padding: 6px 9px; margin-right: -9px;
	color: inherit; cursor: pointer;
}
.mr-menu-toggle:hover { background: var(--mr-hl-4); }

/* ---------- Project grid ---------- */
.mr-grid {
	display: grid;
	grid-template-columns: repeat(var(--mr-cols), minmax(0, 1fr));
	gap: 26px 20px;
	margin: 0; padding: 0; list-style: none;
}

.mr-card a { display: block; }

.mr-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e9e9e9;
}
.mr-media img,
.mr-media video,
.mr-media .mr-ph {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.mr-media img { filter: saturate(var(--mr-wash-sat)); transition: filter .35s var(--mr-ease); }
.mr-media::after {
	content: "";
	position: absolute; inset: 0;
	background: #fff;
	opacity: var(--mr-wash);
	transition: opacity .35s var(--mr-ease);
	pointer-events: none;
}
.mr-media video { opacity: 0; transition: opacity .3s linear; }

.mr-card a:hover .mr-media::after,
.mr-card a:focus-visible .mr-media::after { opacity: 0; }
.mr-card a:hover .mr-media img,
.mr-card a:focus-visible .mr-media img { filter: saturate(1.05) contrast(1.04); }
.mr-card.is-previewing .mr-media video { opacity: 1; }

.mr-caption { padding-top: 7px; }
.mr-caption .mr-client { display: block; text-transform: uppercase; letter-spacing: .04em; }
.mr-caption .mr-title { display: block; }

/* Category tiles (index page) */
.mr-grid--tiles {
	--mr-cols: 2;
	max-width: 700px;
	margin: 0 auto;
	gap: 30px 60px;
}
.mr-grid--tiles .mr-caption { text-align: center; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Content pages ---------- */
.mr-main { min-height: 52vh; }

.mr-page > * {
	max-width: 640px;
}

/* Full-width / wide blocks (e.g. a YouTube embed set to "Full width" in the editor) */
.mr-page > .alignwide { max-width: none; }
.mr-page > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.mr-page .wp-block-embed { margin-top: 2em; margin-bottom: 2em; }
.mr-page .wp-block-embed iframe { width: 100%; border: 0; }
.mr-page h1, .mr-page h2, .mr-page h3 {
	font-size: inherit; font-weight: 400;
	text-transform: uppercase; letter-spacing: .04em;
	margin: 2em 0 .8em;
}
.mr-page h1:first-child, .mr-page h2:first-child { margin-top: 0; }
.mr-page a { text-decoration: underline; text-underline-offset: 2px; }
.mr-page a:hover { background: var(--mr-hl-4); text-decoration: none; }

/* Bio template: text + photo */
.mr-bio {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4.6fr);
	gap: 20px 32px;
	align-items: start;
}
.mr-bio__text { max-width: 470px; }
.mr-bio__photo { margin: 18px 0 0; }
.mr-bio__photo img { width: 100%; height: auto; filter: grayscale(1) contrast(1.05); }
.mr-bio__photo figcaption { color: var(--mr-muted); padding-top: 6px; }

/* Single project */
/* Project video: full width of the screen, edge to edge */
.mr-single__player {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	aspect-ratio: 16/9;
	max-height: calc(100vh - 80px); /* never taller than the screen */
	background: #000;
}
.mr-single__player iframe, .mr-single__player video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.mr-single__meta {
	display: flex; justify-content: space-between; gap: 20px;
	padding: 10px 0 0;
}
.mr-single__meta .mr-client { text-transform: uppercase; letter-spacing: .04em; }
.mr-single__body { margin-top: 28px; }
.mr-single__nav {
	display: flex; justify-content: space-between; margin-top: 40px;
	text-transform: uppercase; letter-spacing: .04em;
}
.mr-single__nav a { padding: 6px 9px; margin: 0 -9px; }
.mr-single__nav a:hover { background: var(--mr-hl-2); }

/* Pagination */
.mr-pagination { margin-top: 40px; text-align: center; }
.mr-pagination .page-numbers { display: inline-block; padding: 4px 8px; }
.mr-pagination .current,
.mr-pagination a:hover { background: var(--mr-hl-4); }

/* ---------- Footer ---------- */
.mr-footer {
	text-align: center;
	padding: 34px 0 40px;
}

/* ---------- Lightbox ---------- */
.mr-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	background: #000;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden;
	transition: opacity .25s linear, visibility 0s linear .25s;
}
.mr-lightbox.is-open {
	opacity: 1; visibility: visible;
	transition: opacity .25s linear;
}
.mr-lightbox__frame {
	position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16/9;
}
.mr-lightbox__frame iframe,
.mr-lightbox__frame video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.mr-lightbox__close {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	font: inherit; text-transform: uppercase; letter-spacing: .04em;
	color: #fff; background: transparent; border: 0;
	padding: 6px 9px; cursor: pointer;
}
.mr-lightbox__close:hover, .mr-lightbox__close:focus-visible { background: var(--mr-hl-brand); color: #000; }
.mr-lightbox__label {
	position: absolute; bottom: 14px; left: 23px; color: #fff; opacity: .7; z-index: 2;
	text-transform: uppercase; letter-spacing: .04em; pointer-events: none;
}
.mr-spinner {
	position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
	border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%;
	animation: mr-spin .9s linear infinite;
}
@keyframes mr-spin { to { transform: rotate(360deg); } }
body.mr-locked { overflow: hidden; }

/* ---------- WordPress core classes ---------- */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-element-caption { color: var(--mr-muted); padding-top: 6px; }
.sticky, .bypostauthor, .gallery-caption { }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	:root { --mr-cols: 3; }
}
@media (max-width: 760px) {
	:root { --mr-cols: 2; --mr-gutter: 16px; }
	.mr-bio { grid-template-columns: 1fr; }
	.mr-bio__photo { margin-top: 0; order: -1; }
	.mr-menu-toggle { display: inline-block; order: 2; margin-left: auto; }
	/* Phone header: logo + MENU on one row, social icons underneath */
	.mr-brand-group { display: contents; }
	.mr-brand { order: 1; }
	.mr-social { order: 3; width: 100%; margin: 6px 0 0 -6px; }
	.mr-nav { order: 4; }
	.mr-header { gap: 0 12px; }
	.mr-header { flex-wrap: wrap; }
	.mr-nav { width: 100%; display: none; }
	.mr-nav.is-open { display: block; }
	.mr-nav ul { flex-direction: column; gap: 2px; margin: 8px 0 0 -9px; }
	.mr-grid--tiles { gap: 24px 16px; }
}
@media (max-width: 420px) {
	:root { --mr-cols: 1; }
	.mr-grid--tiles { --mr-cols: 1; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0s !important; animation-duration: 0s !important; }
}