/*
Theme Name: Jazz Happening Now
Theme URI: https://jazzhappeningnow.com
Author: Jeff Hanley
Description: Underpass — dark concrete, bone, glacier cyan. Jost display, Public Sans body, DM Mono labels.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: jhn
*/

/* ---------- ground: poured concrete ---------- */
body {
	background-color: var(--wp--preset--color--concrete);
	background-image: url("assets/img/grain.svg"), url("assets/img/concrete.svg");
	background-size: 320px 320px, cover;
	background-repeat: repeat, no-repeat;
	background-attachment: scroll, fixed;
	-webkit-font-smoothing: antialiased;
}
.jhn-hero, .jhn-hero__grid, .jhn-listen, .jhn-philosophy, .jhn-more, .jhn-footer__row { box-sizing: border-box; }
.wp-site-blocks { padding-inline: clamp(1rem, 5vw, 4.5rem); overflow-x: clip; }
::selection { background: var(--wp--preset--color--cyan); color: var(--wp--preset--color--concrete-deep); }

/* small caps-lock labels in mono: the site's "slate" text */
.jhn-label {
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0;
}
.jhn-label.is-cyan { color: var(--wp--preset--color--cyan); }
.jhn-more-link {
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cyan) !important;
}

/* ---------- header ---------- */
.jhn-header { min-height: 104px; position: relative; z-index: 2; max-width: 1296px; margin: 0 auto; }
.jhn-wordmark {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 500;
	font-size: 1.375rem;
	letter-spacing: 0.3em;
	text-decoration: none;
}
.jhn-header .wp-block-navigation a:hover { color: var(--wp--preset--color--cyan); }
.jhn-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--cyan); }
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--concrete-deep) !important;
	color: var(--wp--preset--color--bone) !important;
}

/* ---------- hero ---------- */
.jhn-hero { position: relative; isolation: isolate; }
.jhn-hero::before {          /* the cyan slash */
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%; width: 100vw; transform: translateX(-50%);   /* full bleed */
	top: -104px;                      /* start behind the header */
	height: calc(100% + 104px + var(--jhn-slash-tail, 3rem));   /* tail drops out below the photo */
	background: var(--wp--preset--color--cyan);
	opacity: 0.92;
	clip-path: polygon(84% 0, 91% 0, 67% 100%, 60% 100%);   /* steep: lands behind the photo, clear of NOW */
	pointer-events: none;
}
.jhn-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: end;
	max-width: 1296px;
	margin: 0 auto;
	padding-top: clamp(1rem, 4vw, 3.5rem);
}
.jhn-hero h1 {
	font-size: clamp(3rem, 6vw, 5.25rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 2rem 0 0;
}
.jhn-hero h1 .jhn-now {
	display: block;
	font-weight: 200;
	font-size: 2.62em;          /* ~220px at full width */
	line-height: 0.85;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--cyan);
	margin: 0.08em 0 0 -0.04em;
}
.jhn-hero__photo { margin: 0; position: relative; }
.jhn-hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1280 / 1520;
	max-height: min(760px, 70vh);
	object-position: 50% 30%;
	object-fit: cover;
}
.jhn-credit {
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: right;
	margin-top: 0.6rem;
}

/* ---------- listen ---------- */
.jhn-listen { max-width: 1296px; margin: clamp(2.5rem, 4vw, 4rem) auto 0; scroll-margin-top: 2rem; }
.jhn-listen__bar {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr) 280px;
	border: 2px solid var(--wp--preset--color--bone);
}
.jhn-play {
	display: flex; align-items: center; justify-content: center;
	min-height: 148px;
	background: var(--wp--preset--color--cyan);
	border: 0; cursor: pointer;
	color: var(--wp--preset--color--concrete);
}
.jhn-play:hover { filter: brightness(1.08); }
.jhn-play svg { width: 44px; height: 48px; }
.jhn-listen__meta { padding: 2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.jhn-listen__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.jhn-listen__title strong {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 400; font-size: 2.125rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
}
.jhn-listen__title span { font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.jhn-progress { display: flex; align-items: center; gap: 1rem; font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.75rem; }
.jhn-progress i { flex: 1; height: 2px; background: rgba(232,233,228,0.3); position: relative; }
.jhn-progress i b { position: absolute; left: 0; top: -2px; height: 6px; width: 0; background: var(--wp--preset--color--cyan); }
.jhn-listen__out {
	border-left: 2px solid var(--wp--preset--color--bone);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.jhn-icon-pause, .is-playing .jhn-icon-play { display: none; }
.is-playing .jhn-icon-pause { display: block; }
.jhn-play:disabled { opacity: 0.55; cursor: default; filter: none; }
.jhn-play:focus-visible, .jhn-track:focus-visible { outline: 2px solid var(--wp--preset--color--bone); outline-offset: 3px; }
.jhn-nowplaying {
	margin: 0; min-height: 1.4em;
	font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.875rem;
	color: var(--wp--preset--color--cyan);
}
.jhn-progress i { cursor: pointer; }
.jhn-progress i::after { content: ""; position: absolute; inset: -8px 0; }   /* a bigger hit area */
.jhn-tracks {
	list-style: none; margin: 2.5rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem;
	grid-auto-flow: column; grid-template-rows: repeat(var(--jhn-rows, 6), auto);
}
.jhn-track {
	all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
	display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.15rem;
	padding: 0.9rem 0; border-bottom: 1px solid rgba(232,233,228,0.2);
	font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.875rem; line-height: 1.4;
}
.jhn-track-n { color: var(--wp--preset--color--muted); grid-row: span 2; }
.jhn-track-a { color: var(--wp--preset--color--bone); }
.jhn-track-s { grid-column: 2; color: var(--wp--preset--color--bone-soft); font-family: var(--wp--preset--font-family--public-sans); }
.jhn-track-t { grid-column: 3; grid-row: 1; color: var(--wp--preset--color--muted); font-size: 0.75rem; }
.jhn-track:hover .jhn-track-a, .jhn-track:hover .jhn-track-s { color: var(--wp--preset--color--cyan); }
.is-current .jhn-track-n, .is-current .jhn-track-a { color: var(--wp--preset--color--cyan); }

/* ---------- viewfinder motif (Philosophy, About) ---------- */
.jhn-viewfinder { position: relative; }
.jhn-viewfinder::before,
.jhn-viewfinder::after { content: ""; position: absolute; width: 160px; height: 160px; pointer-events: none; }
.jhn-viewfinder::before { left: 0; top: 8px; border: 2px solid var(--wp--preset--color--cyan); }
.jhn-viewfinder::after { left: 40px; top: 48px; background: var(--wp--preset--color--cyan); opacity: 0.18; }

/* ---------- philosophy ---------- */
.jhn-statement { max-width: 1296px; margin: clamp(6rem, 12vw, 12.5rem) auto 0; padding-left: 240px; scroll-margin-top: 2rem; box-sizing: border-box; }
.jhn-statement .jhn-label { margin-bottom: 1.75rem; }
.jhn-statement--page { margin-top: clamp(3rem, 7vw, 6rem); }
.jhn-statement--page h1.jhn-label { font-weight: 400; }
.jhn-statement__body h2 {
	font-size: var(--wp--preset--font-size--statement);
	font-weight: 300; line-height: 1.1; max-width: 960px; margin: 0;
}
.jhn-statement__body p { max-width: 600px; color: var(--wp--preset--color--bone-soft); font-size: 1.1875rem; }
.jhn-statement__body h2 + p { margin-top: 2.5rem; }

/* ---------- playlists + about ---------- */
.jhn-more {
	max-width: 1296px;
	margin: clamp(6rem, 12vw, 12.5rem) auto 0;
	padding-top: 3.5rem;
	border-top: 2px solid var(--wp--preset--color--bone);
}
.jhn-more .jhn-label { margin-bottom: 1.75rem; }
.jhn-dates {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
	background: rgba(232,233,228,0.25); border: 2px solid rgba(232,233,228,0.25);
}
.jhn-dates a {
	background: var(--wp--preset--color--concrete);
	padding: 1.75rem;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 300; font-size: 1.875rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.jhn-dates--row { grid-template-columns: repeat(4, minmax(0, 1fr)); background: transparent; border: 0; gap: 0; }
.jhn-dates--row a { box-shadow: inset 0 0 0 1px rgba(232,233,228,0.25); }
.jhn-dates a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.jhn-dates--row a:last-child:nth-child(odd) { grid-column: auto; }
.jhn-dates a:hover { color: var(--wp--preset--color--cyan); }
.jhn-about { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.jhn-portrait { position: relative; }
.jhn-portrait::before {        /* the viewfinder, second use */
	content: ""; position: absolute; inset: -24px 24px 24px -24px;
	border: 2px solid var(--wp--preset--color--cyan); pointer-events: none;
}
.jhn-portrait img, .jhn-portrait .jhn-ph { position: relative; display: block; width: 100%; height: 320px; object-fit: cover; }
.jhn-portrait img, .jhn-page .wp-block-post-featured-image img, .jhn-page main .wp-block-image img { filter: grayscale(1) contrast(1.05); }   /* every photo sits in the page's black and white */
.jhn-ph {
	background: repeating-linear-gradient(135deg, #2a2e32 0 2px, #24282c 2px 14px);
	display: flex !important; align-items: center; justify-content: center;
}
.jhn-about p { color: var(--wp--preset--color--bone-soft); font-size: 1.125rem; margin: 0; }
.jhn-about .jhn-more-link { display: inline-block; margin-top: 1.75rem; }

/* ---------- inner pages ---------- */
.jhn-page-title {
	font-size: clamp(2.5rem, 5vw, 4rem) !important;
	letter-spacing: 0.06em;
	margin-top: clamp(2rem, 6vw, 5rem) !important;
}
.jhn-page p { color: var(--wp--preset--color--bone-soft); max-width: 680px; }

/* ---------- about page ---------- */
.jhn-about-page { max-width: 1296px; margin: 0 auto; }
.jhn-about-grid {
	display: grid; grid-template-columns: 320px minmax(0, 680px); gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start; margin-top: 2.5rem;
}
.jhn-portrait--page { margin: 24px 0 0 24px; }   /* room for the frame, offset up-left */
.jhn-portrait--page .wp-block-post-featured-image { margin: 0; position: relative; }
.jhn-portrait--page img { height: auto !important; }
.jhn-about-body > *:first-child { margin-top: 0; }
.jhn-about-body p { font-size: 1.1875rem; }
@media (max-width: 760px) {
	.jhn-about-grid { grid-template-columns: 1fr; }
	.jhn-portrait--page { max-width: 260px; }
}

/* ---------- playlists ---------- */
.jhn-playlists { max-width: 1296px; margin: clamp(2rem, 6vw, 5rem) auto 0; }
.jhn-pl-title {
	font-size: clamp(2.25rem, 4.5vw, 3.75rem) !important; font-weight: 300;
	letter-spacing: 0.04em; text-transform: uppercase; margin: 1rem 0 2.5rem;
}
.jhn-pl-dir { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wp--preset--color--bone); max-width: 720px; }
.jhn-pl-dir li { border-bottom: 1px solid rgba(232,233,228,0.2); }
.jhn-pl-dir a {
	display: block; padding: 1.1rem 0;
	font-family: var(--wp--preset--font-family--jost); font-weight: 300; font-size: 1.75rem; letter-spacing: 0.03em;
}
.jhn-pl-dir a:hover { color: var(--wp--preset--color--cyan); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.jhn-pl { border-top: 2px solid var(--wp--preset--color--bone); }
.jhn-pl-row {
	display: grid; grid-template-columns: 1.2fr 1.2fr 1.2fr 0.8fr; column-gap: 2rem;
	padding: 1rem 0; border-bottom: 1px solid rgba(232,233,228,0.2); font-size: 1rem;
}
.jhn-pl-head {
	font-family: var(--wp--preset--font-family--dm-mono); font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--muted); padding: 0.75rem 0;
}
.jhn-pl-artist { color: var(--wp--preset--color--bone); }
.jhn-pl-song { color: var(--wp--preset--color--bone); font-family: var(--wp--preset--font-family--jost); font-size: 1.125rem; }
.jhn-pl-album, .jhn-pl-label { color: var(--wp--preset--color--bone-soft); }
.jhn-pl-label { font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.jhn-pl-back { margin-top: 2.5rem; }
@media (max-width: 760px) {
	.jhn-pl-head { display: none; }
	.jhn-pl-row { grid-template-columns: 1fr; row-gap: 0.15rem; }
	.jhn-pl-song { order: -1; }
}

/* ---------- stations ---------- */
.jhn-stations { max-width: 1296px; margin: clamp(2rem, 6vw, 5rem) auto 0; }
.jhn-stations > .jhn-label:not(.is-cyan) { margin-bottom: 2.5rem; color: var(--wp--preset--color--muted); }
.jhn-state { max-width: 900px; margin-bottom: 2.5rem; }
.jhn-state-name {
	font-family: var(--wp--preset--font-family--dm-mono) !important; font-size: var(--wp--preset--font-size--label) !important;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--cyan); font-weight: 400;
	margin: 0 0 0.5rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--wp--preset--color--bone);
}
.jhn-station {
	display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 2rem;
	padding: 0.9rem 0; border-bottom: 1px solid rgba(232,233,228,0.2);
}
.jhn-call { font-family: var(--wp--preset--font-family--jost); font-size: 1.25rem; letter-spacing: 0.06em; }
.jhn-market { color: var(--wp--preset--color--bone-soft); }
.jhn-slot { font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); padding-top: 0.2rem; }
.jhn-stations-note { font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.75rem; color: var(--wp--preset--color--muted); }
@media (max-width: 640px) { .jhn-station { grid-template-columns: 1fr; row-gap: 0.2rem; } }

/* ---------- submit + contact (Contact Form 7) ---------- */
.jhn-page .jhn-lede { font-size: var(--wp--preset--font-size--lede); color: var(--wp--preset--color--bone); max-width: 720px; line-height: 1.5; }
.jhn-page h3 { margin-top: 2.5rem; }
.jhn-page ul:not([class*="jhn-"]) { color: var(--wp--preset--color--bone-soft); max-width: 680px; padding-left: 1.2rem; }
.jhn-page ul:not([class*="jhn-"]) li { margin: 0.35rem 0; }
.wpcf7 { max-width: 680px; margin-top: 2.5rem; }
.wpcf7 label {
	display: block; margin-bottom: 1.5rem;
	font-family: var(--wp--preset--font-family--dm-mono); font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 textarea {
	display: block; width: 100%; box-sizing: border-box; margin-top: 0.5rem;
	background: rgba(20, 22, 25, 0.6); color: var(--wp--preset--color--bone);
	border: 0; border-bottom: 2px solid var(--wp--preset--color--rule); border-radius: 0;
	padding: 0.85rem 0.9rem; font: 400 1.0625rem/1.5 var(--wp--preset--font-family--public-sans);
	letter-spacing: 0; text-transform: none;
}
.wpcf7 textarea { min-height: 9rem; resize: vertical; }
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #7d8286; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-bottom-color: var(--wp--preset--color--cyan); background: rgba(20, 22, 25, 0.85); }
.wpcf7 input[type="submit"] {
	cursor: pointer; border: 0; border-radius: 0; min-height: 52px; padding: 0 2.25rem;
	background: var(--wp--preset--color--cyan); color: var(--wp--preset--color--concrete-deep);
	font-family: var(--wp--preset--font-family--dm-mono); font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.wpcf7 input[type="submit"]:hover { filter: brightness(1.08); }
.wpcf7 .wpcf7-not-valid-tip { color: #F2A65A; font-family: var(--wp--preset--font-family--public-sans); font-size: 0.875rem; letter-spacing: 0; text-transform: none; margin-top: 0.4rem; }
.wpcf7 form .wpcf7-response-output { margin: 1.5rem 0 0; padding: 1rem 1.2rem; border: 2px solid var(--wp--preset--color--cyan); color: var(--wp--preset--color--bone); }
.wpcf7 .wpcf7-spinner { background-color: var(--wp--preset--color--cyan); }

/* ---------- footer ---------- */
.jhn-footer {
	margin-top: clamp(6rem, 12vw, 10rem);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.jhn-footer__row {
	max-width: 1296px; margin: 0 auto; padding: 2rem 0;
	border-top: 2px solid var(--wp--preset--color--bone);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
}
.jhn-footer__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.jhn-footer a { color: var(--wp--preset--color--muted); }
.jhn-footer a:hover { color: var(--wp--preset--color--cyan); }

/* ---------- phone and tablet ---------- */
@media (max-width: 900px) {
	.jhn-hero__grid { grid-template-columns: 1fr; }
	.jhn-hero::before { --jhn-slash-tail: 0px; clip-path: polygon(84% 0, 97% 0, 89% 15%, 76% 15%); opacity: 0.9;   /* a short slash in the header, clear of NOW */ }
	.jhn-hero__photo img { max-height: 48vh; aspect-ratio: auto; }
	.jhn-hero h1 { margin-top: 1.25rem; }
	.jhn-listen__bar { grid-template-columns: 96px minmax(0, 1fr); }
	.jhn-play { min-height: 96px; }
	.jhn-listen__meta { padding: 1.25rem; }
	.jhn-listen__out { grid-column: 1 / -1; border-left: 0; border-top: 2px solid var(--wp--preset--color--bone); min-height: 56px; }
	.jhn-tracks { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
	/* phone: a smaller viewfinder stacked above the label, clear of the text */
	.jhn-statement { padding-left: 0; padding-top: 136px; }
	.jhn-viewfinder::before, .jhn-viewfinder::after { width: 88px; height: 88px; }
	.jhn-viewfinder::before { top: 0; }
	.jhn-viewfinder::after { left: 22px; top: 22px; }
	.jhn-dates--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.jhn-about { grid-template-columns: 1fr; }
	.jhn-portrait { max-width: 260px; margin: 24px 0 0 24px; }
	.jhn-listen__title strong { font-size: 1.5rem; }
}