/*
Theme Name: The Matt & Ben Show
Theme URI: https://mattbenshow.com
Author: The Matt & Ben Show
Description: Block theme for The Matt & Ben Show. Indigo field, parchment type, a little gold, drawn by one shaky hand. Built from the Matt & Ben brand guidelines v3.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
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: mattben
*/

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(.wp-site-blocks) > * { margin-block-start: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--mist);
	outline-offset: 3px;
}

.screen-reader-text:not(:focus) {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------
   Header / lockup
   ------------------------------------------------------------------ */
.mbs-header { position: relative; z-index: 20; }
.mbs-header .wp-block-site-title { font-family: var(--wp--preset--font-family--hanken); font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.mbs-header-cta .wp-block-button__link { white-space: nowrap; }
/* "Subscribe" lives in the header button; the menu copy only shows inside the opened phone menu. */
.mbs-nav-subscribe { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .mbs-nav-subscribe { display: flex !important; }
@media (max-width: 400px) { .mbs-header .wp-block-buttons.mbs-header-cta { display: none; } }
@media (max-width: 420px) {
	.mbs-header-cta .wp-block-button__link { letter-spacing: .08em; padding-left: .75rem !important; padding-right: .75rem !important; }
	.mbs-header .wp-block-site-title { font-size: 1rem; }
}
.mbs-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--parchment); }

.mbs-mark { display: inline-flex; width: 40px; height: 40px; flex: none; }
.mbs-mark svg, .mbs-mark img { width: 100%; height: 100%; display: block; }

/* Hand-lettered lockup in place of the site title text */
.wp-block-site-title:has(.mbs-lockup) { line-height: 0; }
.mbs-lockup { display: block; height: 26px; width: auto; max-width: none; }
@media (max-width: 420px) { .mbs-lockup { height: 19px; } }

/* Navigation labels are DM Mono caps (guidelines: "Label") */
.wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--mist); }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--50); }

/* ------------------------------------------------------------------
   Block style: Label (DM Mono caps, wide tracking)
   ------------------------------------------------------------------ */
.is-style-mbs-label {
	font-family: var(--wp--preset--font-family--dm-mono) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.5;
}
/* On dark fields the episode label may be gold; on light fields it is ink. */
.is-style-mbs-label:not(.has-text-color) { color: var(--wp--preset--color--gold); }
.has-parchment-background-color .is-style-mbs-label:not(.has-text-color),
.mbs-page .is-style-mbs-label:not(.has-text-color) { color: var(--wp--preset--color--indigo); }

/* ------------------------------------------------------------------
   Block style: Hand-drawn underline (headings)
   Thin pen line in the text colour, never gold.
   ------------------------------------------------------------------ */
.is-style-mbs-underline { position: relative; padding-bottom: 0.32em; }
.is-style-mbs-underline::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: min(70%, 9em); height: 0.22em; min-height: 8px;
	background: currentColor;
	-webkit-mask: url("assets/svg/underline.svg") no-repeat left center / 100% 100%;
	        mask: url("assets/svg/underline.svg") no-repeat left center / 100% 100%;
}
.is-style-mbs-underline.has-text-align-center::after { left: 50%; transform: translateX(-50%); }

/* ------------------------------------------------------------------
   Block style: Keyline (group) - thin gold hand-inked frame
   The wobble filter is applied to a pseudo element only, so text stays crisp.
   ------------------------------------------------------------------ */
.is-style-mbs-keyline { position: relative; isolation: isolate; }
.is-style-mbs-keyline::before {
	content: "";
	position: absolute;
	inset: var(--mbs-keyline-inset, 14px);
	border: 1.5px solid var(--wp--preset--color--gold);
	filter: url(#mbs-wobble);
	pointer-events: none;
	z-index: 2;
}
.has-parchment-background-color.is-style-mbs-keyline::before { border-color: var(--wp--preset--color--indigo); }

/* ------------------------------------------------------------------
   Block styles: Sun (group). One sun per piece.
   Noon = centred and high, for title frames and banners.
   Dawn = left, first half of a season. Dusk = right, second half.
   ------------------------------------------------------------------ */
/* .mbs-sun-* classes are the same thing, for combining with the keyline style. */
.is-style-mbs-noon, .mbs-sun-noon,
.is-style-mbs-dawn, .mbs-sun-dawn,
.is-style-mbs-dusk, .mbs-sun-dusk { position: relative; overflow: hidden; isolation: isolate; }

.is-style-mbs-noon::after, .mbs-sun-noon::after,
.is-style-mbs-dawn::after, .mbs-sun-dawn::after,
.is-style-mbs-dusk::after, .mbs-sun-dusk::after {
	content: "";
	position: absolute;
	bottom: var(--mbs-keyline-inset, 14px);
	width: clamp(220px, 34vw, 420px);
	aspect-ratio: 2 / 1;
	background: var(--wp--preset--color--gold);
	-webkit-mask: url("assets/svg/sun-noon.svg") no-repeat center bottom / contain;
	        mask: url("assets/svg/sun-noon.svg") no-repeat center bottom / contain;
	pointer-events: none;
	z-index: -1;
}
.is-style-mbs-noon::after, .mbs-sun-noon::after { left: 50%; margin-left: calc(clamp(220px, 34vw, 420px) / -2); }
.is-style-mbs-dawn::after, .mbs-sun-dawn::after { left: 8%; width: clamp(160px, 24vw, 300px); -webkit-mask-image: url("assets/svg/sun-low.svg"); mask-image: url("assets/svg/sun-low.svg"); }
.is-style-mbs-dusk::after, .mbs-sun-dusk::after { right: 8%; width: clamp(140px, 20vw, 260px); -webkit-mask-image: url("assets/svg/sun-low.svg"); mask-image: url("assets/svg/sun-low.svg"); }

/* Watermark: a giant Mercury, one flat tint close to the field, cropped on purpose. */
/* Which watermark: Mercury by default. A tiny script in <head> picks one at random per
   page view (functions.php) and sets html[data-wm]; these swap the image, its proportions
   and size. Every option is one flat tint close to the field. */
:root {
	--mbs-wm: url("assets/svg/mercury-watermark.svg");
	--mbs-wm-ratio: 562 / 815;
	--mbs-wm-scale: 1;
}
html[data-wm="hepta"] {
	--mbs-wm: url("assets/svg/heptagram-watermark.svg");
	--mbs-wm-ratio: 1 / 1;
	--mbs-wm-scale: 1.05;
}
html[data-wm="hepta-sharp"] {
	--mbs-wm: url("assets/svg/heptagram-sharp-watermark.svg");
	--mbs-wm-ratio: 1 / 1;
	--mbs-wm-scale: 1.05;
}

/* Uses a background image (not a pseudo element) so it can share a block with keyline + sun.
   Cropped at the bottom (the cross foot), never through the horns. */
.mbs-watermark {
	position: relative;
	overflow: hidden;
	background-image: var(--mbs-wm);
	background-repeat: no-repeat;
	background-size: clamp(440px, 58vw, 860px) auto;
	background-position: right 1vw top 36px;
}
/* Home hero: the watermark straddles the right gold line and its horns rise above
   the top line (behind the header). The cross shows in full; the right horn may run
   off the screen edge, which is clipped without causing sideways scrolling. */
.wp-site-blocks { overflow-x: clip; }
.mbs-hero-watermark {
	--wm-w: calc(clamp(380px, 44vw, 640px) * var(--mbs-wm-scale, 1));
	--wm-pad: var(--wp--preset--spacing--30);
	/* distance from this section's right edge to the frame's gold line */
	--wm-line: calc(var(--wm-pad) + max(0px, (100% - 2 * var(--wm-pad) - 1200px) / 2) + var(--mbs-keyline-inset, 14px));
	position: relative;
}
/* Episode pages: same idea, straddling the right edge of the 960px content column and
   rising behind the site header. The video, player and notes below the title are solid,
   so the glyph is sized to the title area: it ends just above the player and shows whole. */
.mbs-ep {
	--wm-w: calc(clamp(200px, 18vw, 236px) * var(--mbs-wm-scale, 1));
	--wm-pad: var(--wp--style--root--padding-right, 16px);
	--wm-line: calc(var(--wm-pad) + max(0px, (100% - 2 * var(--wm-pad) - 960px) / 2));
	position: relative;
}
.mbs-ep::before { top: -96px !important; }
.mbs-ep > * { position: relative; z-index: 1; }

.mbs-hero-watermark::before,
.mbs-ep::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: -96px;
	right: calc(var(--wm-line) - var(--wm-w) * 0.3); /* gold line crosses ~70% of the way across the glyph */
	width: var(--wm-w);
	aspect-ratio: var(--mbs-wm-ratio);
	background: var(--mbs-wm) no-repeat center / contain;
	transform: rotate(var(--mbs-wm-rot, 0deg)); /* heptagrams get a random tilt */
	pointer-events: none;
}
.mbs-hero-watermark > * { position: relative; z-index: 1; }
@media (max-width: 600px) {
	.mbs-hero-watermark { --wm-w: calc(82vw * var(--mbs-wm-scale, 1)); --mbs-keyline-inset: 8px; }
	.mbs-hero-watermark::before { top: -60px; }
	.mbs-ep { --wm-w: calc(60vw * var(--mbs-wm-scale, 1)); }
	.mbs-ep::before { top: -40px !important; }
}

/* About page frontispiece: key art framed by the keyline */
.mbs-frontispiece .is-style-mbs-keyline img { display: block; width: 100%; height: auto; border-radius: 2px; }
.mbs-frontispiece .is-style-mbs-keyline { max-width: 480px; }

/* ------------------------------------------------------------------
   Hosts: small round duotone portraits with a gold ring
   ------------------------------------------------------------------ */
.is-style-mbs-host { margin: 0; flex: none; }
.is-style-mbs-host img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--wp--preset--color--indigo), 0 0 0 3.5px var(--wp--preset--color--gold);
}

/* ------------------------------------------------------------------
   Episode cards
   ------------------------------------------------------------------ */
/* Grid items stretch to the row; the card fills its item. */
.wp-block-post-template.is-layout-grid > li { display: flex; flex-direction: column; }
.mbs-card {
	flex: 1 1 auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	transition: border-color .2s ease;
}
.mbs-card:hover, .mbs-card:focus-within { border-color: var(--wp--preset--color--mist); }
.mbs-card .wp-block-post-featured-image { margin: 0; }
.mbs-card .wp-block-post-featured-image img { border-radius: 4px; aspect-ratio: 1; object-fit: cover; }
.mbs-card .wp-block-post-title a { text-decoration: none; }
.mbs-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.mbs-card { position: relative; }
.mbs-card .wp-block-post-excerpt__more-text { display: none; }

.mbs-card > * { flex-shrink: 0; }

/* Cover placeholder when an episode has no featured image yet */
.mbs-cover-fallback { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; }
.wp-block-post-featured-image .mbs-cover-fallback { border-radius: inherit; }

/* ------------------------------------------------------------------
   Parchment "page of the book" panels for long reading
   ------------------------------------------------------------------ */
.mbs-page {
	color: var(--wp--preset--color--indigo);
	border-radius: 6px;
}
.mbs-page :where(h1,h2,h3,h4,h5,h6) { color: var(--wp--preset--color--indigo); }
.mbs-page a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--indigo); text-decoration-color: rgba(27,31,75,.45); }
.mbs-page a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; }
.mbs-page .wp-element-button,
.mbs-page .wp-block-button__link {
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--parchment);
}
.mbs-page blockquote { border-left-color: var(--wp--preset--color--indigo); }
.mbs-page hr, .mbs-page .wp-block-separator { color: rgba(27,31,75,.25); }
.mbs-page code { background: rgba(27,31,75,.07); }

/* Previous / next links: mono label above a title */
.mbs-post-nav > * { flex: 1 1 260px; max-width: 48%; }
.mbs-post-nav a { text-decoration: none; font-family: var(--wp--preset--font-family--hanken); font-weight: 800; font-size: var(--wp--preset--font-size--large); line-height: 1.2; }
.mbs-post-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mbs-post-nav .post-navigation-link__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--dm-mono);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
@media (max-width: 600px) { .mbs-post-nav > * { max-width: 100%; } }

/* ------------------------------------------------------------------
   Episode page: one column. Small cover beside the title, then video,
   audio, show notes and prev/next all share the same width.
   ------------------------------------------------------------------ */
.mbs-ep-cover { flex: none; width: clamp(112px, 17vw, 176px); margin: 0; }
.mbs-ep-cover img, .mbs-ep-cover .mbs-cover-fallback { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.mbs-ep-head > .wp-block-group { min-width: 0; }
/* Every gap in the episode column is the same (the group's block gap). */
.mbs-ep .mbs-player { margin-bottom: 0; }
/* pod.co's player card stops growing at ~750px and centres itself; size the frame to the
   card, and use the space beside it for the "Also on" links. */
.mbs-player--audio { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); }
.mbs-player--audio .mbs-player__frame { flex: 1 1 auto; max-width: 750px; min-width: 0; }
.mbs-player > p:empty { display: none; }
.mbs-listen { flex: 0 0 auto; }
.mbs-listen__label {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.mbs-listen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mbs-listen a {
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink-soft);
}
.mbs-listen a:hover { color: var(--wp--preset--color--parchment); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
	.mbs-player--audio { flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--20); }
	.mbs-listen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
	.mbs-listen__label { margin: 0; }
	.mbs-listen ul { display: flex; flex-wrap: wrap; gap: 6px 16px; }
}

/* Footer listen list (from Settings > Show links) */
.mbs-listen-list { list-style: none; padding: 0; margin: 0; line-height: 2; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 600px) {
	.mbs-ep-head { flex-direction: column; align-items: flex-start !important; }
	.mbs-ep-cover { width: 120px; }
}

/* Coming-soon page (plugin: Settings > Coming soon) */
.mbs-cs__mark { text-align: center; margin: 0; }
.mbs-cs__mark img { width: 88px; height: 88px; display: inline-block; }
.mbs-cs .wp-block-site-title .mbs-lockup { height: 30px; }
.mbs-cs .mbs-platforms { justify-content: center; }

/* ------------------------------------------------------------------
   Player embed
   ------------------------------------------------------------------ */
.mbs-player { margin-block: var(--wp--preset--spacing--40); }
.mbs-player iframe { width: 100%; border: 0; border-radius: 6px; display: block; }
.mbs-player--video { aspect-ratio: 16 / 9; }
.mbs-player--video iframe { height: 100%; }
.mbs-player--placeholder {
	border: 1.5px dashed var(--wp--preset--color--line);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wp--preset--color--mist);
	text-align: center;
}

/* ------------------------------------------------------------------
   Newsletter form (placeholder until a provider is chosen)
   ------------------------------------------------------------------ */
.mbs-signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.mbs-signup.is-centered { margin-inline: auto; justify-content: center; }
.mbs-signup label { flex-basis: 100%; }
.mbs-signup input[type="email"] {
	flex: 1 1 240px;
	min-height: 48px;
	padding: 10px 14px;
	font: inherit;
	color: var(--wp--preset--color--indigo);
	background: #fff8ec;
	border: 1.5px solid var(--wp--preset--color--indigo);
	border-radius: 4px;
}
.mbs-signup button {
	min-height: 48px;
	padding: 10px 22px;
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wp--preset--color--parchment);
	background: var(--wp--preset--color--indigo);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}
.mbs-signup button:hover { background: var(--wp--preset--color--indigo-deep); }
.mbs-signup .mbs-signup__note { flex-basis: 100%; margin: 0; font-size: var(--wp--preset--font-size--small); opacity: .8; }
.mbs-signup .mbs-signup__note a { color: inherit; }
/* SendFox's embedded form sits centred in the parchment band */
.mbs-sendfox { max-width: 520px; margin-inline: auto; min-height: 60px; }

/* ------------------------------------------------------------------
   Platform links (Apple, Spotify, YouTube, RSS...)
   ------------------------------------------------------------------ */
.mbs-platforms .wp-block-button__link {
	font-family: var(--wp--preset--font-family--dm-mono);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: var(--wp--preset--font-size--x-small);
}

/* ------------------------------------------------------------------
   Support tiers
   ------------------------------------------------------------------ */
.mbs-tier { border: 1px solid var(--wp--preset--color--line); border-radius: 6px; height: 100%; }
.mbs-tier .wp-block-buttons { margin-top: auto; }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.mbs-footer a { text-decoration: none; }
.mbs-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------
   Motion: lines draw in like a pen, then settle. Nothing bounces.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.is-style-mbs-underline::after { animation: mbs-draw 1.1s cubic-bezier(.6,.05,.3,1) .2s both; }
	.is-style-mbs-noon::after, .is-style-mbs-dawn::after, .is-style-mbs-dusk::after,
	.mbs-sun-noon::after, .mbs-sun-dawn::after, .mbs-sun-dusk::after { animation: mbs-rise 2.4s cubic-bezier(.3,.1,.2,1) both; }
}
@keyframes mbs-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mbs-rise { from { translate: 0 18%; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.is-style-mbs-keyline { --mbs-keyline-inset: 8px; }
	.mbs-watermark { background-size: 78vw auto; background-position: center bottom -110px; }
}