/*
Theme Name: Barfield
Theme URI: https://www.heatherbarfield.com
Description: Playbill-meets-black-box child theme for Heather L. Barfield, Ph.D. Warm bone paper, deep ink, curtain-crimson accent, and dark "stage" panels for production photography.
Author: Heather L. Barfield
Template: twentytwentyfive
Version: 1.0.4
Requires at least: 6.6
Text Domain: barfield
License: GNU General Public License v2 or later
*/

:root {
	--hb-ink: var(--wp--preset--color--contrast);
	--hb-crimson: var(--wp--preset--color--accent-1);
	--hb-paper: var(--wp--preset--color--accent-2);
	--hb-stage: var(--wp--preset--color--accent-3);
	--hb-muted: var(--wp--preset--color--accent-4);
	--hb-line: var(--wp--preset--color--accent-5);
	--hb-mono: var(--wp--preset--font-family--plex-mono);
	--hb-serif: var(--wp--preset--font-family--fraunces);
}

/* ---------- small type ---------- */
.hb-eyebrow,
.hb-meta,
.hb-roles,
.hb-num,
.hb-dt,
.hb-back,
.hb-more,
.hb-count,
.hb-footer-links a {
	font-family: var(--hb-mono);
	font-size: 0.72rem !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.8;
}
.hb-eyebrow, .hb-num, .hb-count, .hb-more a { color: var(--hb-crimson); }
.hb-meta, .hb-roles, .hb-dt { color: var(--hb-muted); }
.hb-back a, .hb-more a { text-decoration: none; }
.hb-back a { color: var(--hb-muted); }
.hb-back a:hover { color: var(--hb-crimson); }

/* ---------- header ---------- */
.hb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--hb-line);
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}
.admin-bar .hb-header { top: 32px; }
.hb-wordmark { margin: 0; font-family: var(--hb-serif); font-size: 1.35rem; }
.hb-wordmark a { color: var(--hb-ink); text-decoration: none; }
.hb-wordmark em { color: var(--hb-crimson); font-size: 0.75em; }
.hb-header .wp-block-navigation a { color: var(--hb-muted); text-decoration: none; }
.hb-header .wp-block-navigation a:hover,
.hb-header .wp-block-navigation .current-menu-item a { color: var(--hb-crimson); }

/* ---------- footer ---------- */
.hb-footer {
	background: var(--hb-stage);
	color: var(--wp--preset--color--accent-6);
	margin-top: 5rem;
	padding-top: 4rem;
	padding-bottom: 2rem;
}
.hb-footer a { color: var(--wp--preset--color--accent-6); text-decoration: none; }
.hb-footer a:hover { color: #e48a9a; }
.hb-footer-name { font-family: var(--hb-serif); font-size: 1.5rem; margin: 0; }
.hb-footer-tag { font-family: var(--hb-serif); font-style: italic; color: #a39a90; margin-top: 0.25rem; }
.hb-footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-end; }
.hb-footer-fine { border-top: 1px solid #2f2926; padding-top: 1.5rem; font-size: 0.8rem; color: #a39a90; }

/* ---------- page header ---------- */
.hb-main { padding-top: 0; }
.hb-page-header {
	padding-top: 4rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--hb-line);
}
.hb-display em, .hb-section-title em, .hb-hero-title .hb-phd { color: var(--hb-crimson); font-style: italic; }
.hb-lede {
	font-family: var(--hb-serif);
	font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
	line-height: 1.5;
	color: var(--hb-muted);
	max-width: 52ch;
}

/* ---------- home ---------- */
.hb-hero { padding-top: 4rem; padding-bottom: 3rem; gap: 3rem; }
.hb-hero-title {
	font-size: clamp(3rem, 8vw, 6.5rem) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.035em !important;
	font-weight: 350 !important;
}
.hb-hero-title .hb-phd { font-size: 0.55em; letter-spacing: -0.01em; }
.hb-roles { margin-top: 2rem; }
.hb-portrait { position: relative; margin: 0; }
.hb-portrait img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hb-hero .hb-portrait::before {
	content: "";
	position: absolute;
	inset: 1rem -1rem -1rem 1rem;
	border: 1px solid var(--hb-crimson);
}
.hb-now { background: var(--hb-paper); border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.hb-now p { font-size: 0.95rem; color: var(--hb-muted); margin: 0; }
.hb-now strong { color: var(--hb-ink); font-weight: 600; }
.hb-now-label { font-family: var(--hb-serif); font-size: 1.15rem !important; color: var(--hb-crimson) !important; }
.hb-featured { padding-top: 5rem; }
.hb-featured > .hb-section-title { margin-bottom: 0; }
.hb-practices { border-top: 1px solid var(--hb-line); margin-top: 3rem; padding-top: 1rem; }
.hb-practice { border-right: 1px solid var(--hb-line); padding-right: 1.5rem; }
.hb-practice:last-child { border-right: none; }
.hb-practice p { color: var(--hb-muted); font-size: 0.95rem; }
.hb-practice-title a { color: var(--hb-ink); text-decoration: none; }
.hb-practice-title a:hover { color: var(--hb-crimson); }

/* ---------- production cards ---------- */
.hb-cards { gap: 3rem 1.5rem; }
.hb-card > * { margin-block: 0.25rem !important; }
.hb-card-img { margin: 0 0 0.75rem !important; overflow: hidden; background: var(--hb-stage); aspect-ratio: 4 / 3; }
.hb-card-img a, .hb-card-img img { display: block; width: 100%; height: 100%; }
.hb-card-img img { object-fit: cover; transition: transform 0.6s ease; }
.hb-card:hover .hb-card-img img { transform: scale(1.035); }
.hb-card-title { font-size: 1.6rem !important; }
.hb-card-title a { color: var(--hb-ink); text-decoration: none; }
.hb-card:hover .hb-card-title a { color: var(--hb-crimson); }
.hb-card-sub, .hb-subtitle { font-family: var(--hb-serif); font-style: italic; color: var(--hb-muted); }
.hb-cat { padding-top: 2rem; }
.hb-group-title {
	font-style: italic;
	font-size: 1.75rem !important;
	border-bottom: 1px solid var(--hb-line);
	padding-bottom: 0.75rem;
	margin-bottom: 1.5rem !important;
}
.hb-count { font-style: normal; margin-left: 0.5rem; }

/* ---------- production page ---------- */
.hb-prod-head { padding-top: 2rem; padding-bottom: 3rem; }
.hb-subtitle { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 0.5rem; }
.hb-programme { border-top: 2px solid var(--hb-ink); padding-top: 1rem; }
.hb-programme > * { margin-block: 0 !important; }
.hb-dt { font-size: 0.65rem !important; margin-top: 0.9rem !important; }
.hb-dd { font-size: 0.95rem; line-height: 1.6; }
.hb-award { color: var(--hb-crimson); }

/* dark "stage" panel + masonry gallery */
.hb-stage { background: var(--hb-stage); padding: 1.5rem !important; }
.hb-stage > .wp-block-gallery.hb-masonry { max-width: none !important; }
.wp-block-gallery.has-nested-images.hb-masonry {
	display: block !important;
	columns: 3 280px;
	column-gap: 0.75rem;
}
.wp-block-gallery.has-nested-images.hb-masonry figure.wp-block-image:not(#individual-image) {
	width: 100% !important;
	margin: 0 0 0.75rem !important;
	break-inside: avoid;
	display: block;
}
.wp-block-gallery.has-nested-images.hb-masonry figure.wp-block-image img { width: 100%; height: auto; opacity: 0.92; transition: opacity 0.25s; }
.wp-block-gallery.has-nested-images.hb-masonry figure.wp-block-image:hover img { opacity: 1; }
.wp-block-gallery.hb-masonry figure.wp-block-image figcaption { font-family: var(--hb-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }

.hb-videos { gap: 2rem 1.5rem; }
.hb-video { margin: 0; }
.hb-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--hb-stage); }
.hb-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hb-video figcaption { font-size: 0.9rem; color: var(--hb-muted); margin-top: 0.75rem; line-height: 1.5; }
.hb-pager-wrap { margin-top: 4rem; border-top: 1px solid var(--hb-line); padding-top: 1.5rem; }
.hb-pager a { font-family: var(--hb-serif); font-size: 1.5rem; color: var(--hb-ink); text-decoration: none; line-height: 1.3; }
.hb-pager a:hover { color: var(--hb-crimson); }

/* ---------- editorial two-column sections ---------- */
.hb-split-wrap { border-bottom: 1px solid var(--hb-line); padding-top: 3rem; padding-bottom: 3rem; }
.hb-split { gap: 3rem; }
.hb-split > .wp-block-column:first-child { position: sticky; top: 6rem; align-self: flex-start; }
.hb-split-label { font-style: italic; font-size: 1.6rem !important; color: var(--hb-crimson) !important; margin: 0; }
.hb-split-label a { color: inherit; text-decoration: none; }
.hb-split .wp-block-heading:where(h4) strong { color: var(--hb-crimson); font-weight: 500; }
.hb-small { font-size: 0.95rem; color: var(--hb-muted); }
.hb-lead { font-family: var(--hb-serif); font-size: 1.4rem !important; line-height: 1.5; }
.hb-subhead { font-family: var(--hb-mono) !important; font-size: 0.72rem !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--hb-crimson) !important; margin-top: 3rem !important; }
.hb-note { font-size: 0.9rem; color: var(--hb-muted); }
.hb-linklist, .hb-numbered { list-style: none; padding: 0; columns: 2 260px; column-gap: 2rem; }
.hb-linklist li, .hb-numbered li { break-inside: avoid; border-bottom: 1px solid var(--hb-line); padding: 1rem 0; }
.hb-linklist a { font-family: var(--hb-serif); font-size: 1.35rem; color: var(--hb-ink); text-decoration: none; }
.hb-linklist a:hover { color: var(--hb-crimson); }
.hb-numbered { counter-reset: hb; }
.hb-numbered li { font-family: var(--hb-serif); font-size: 1.3rem; counter-increment: hb; }
.hb-numbered li::before { content: counter(hb, decimal-leading-zero); font-family: var(--hb-mono); font-size: 0.7rem; color: var(--hb-crimson); margin-right: 1rem; }
.hb-current { border-left: 2px solid var(--hb-crimson); padding-left: 1.5rem; }
.hb-current > * { margin-block: 0.25rem !important; }
.hb-role { font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; }
.hb-press-item { border-bottom: 1px solid var(--hb-line); padding-bottom: 1rem; }
.hb-press-item:last-child { border-bottom: none; }
.hb-press-item > * { margin-block: 0.25rem !important; }
.hb-press-item .hb-meta { color: var(--hb-crimson); }
.hb-press-title { font-family: var(--hb-serif); font-size: 1.25rem; line-height: 1.35; }
.hb-press-title a { color: var(--hb-ink); text-decoration: none; }
.hb-press-title a:hover { color: var(--hb-crimson); }
.hb-placeholder { border: 1px dashed var(--hb-crimson); padding: 1rem; color: var(--hb-crimson); }
.hb-signoff { font-family: var(--hb-serif); font-style: italic; font-size: 1.3rem; color: var(--hb-muted); margin-top: 3rem; }

/* CoBlocks contact form */
.wp-block-coblocks-form input[type="text"],
.wp-block-coblocks-form input[type="email"],
.wp-block-coblocks-form textarea {
	width: 100%;
	border: 1px solid var(--hb-line);
	background: #fbf9f5;
	border-radius: 2px;
	padding: 0.7rem 0.8rem;
	font: inherit;
}
.wp-block-coblocks-form input:focus,
.wp-block-coblocks-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--hb-crimson) 35%, transparent); border-color: var(--hb-crimson); }
.wp-block-coblocks-form .coblocks-label { font-family: var(--hb-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hb-muted); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.hb-split > .wp-block-column:first-child { position: static; }
	.hb-practice { border-right: none; border-bottom: 1px solid var(--hb-line); padding-bottom: 1rem; }
	.hb-footer-links { justify-content: flex-start; }
}
@media (max-width: 781px) {
	.hb-hero { padding-top: 2rem; }
	.hb-hero .hb-portrait { max-width: 420px; margin-right: 1rem; }
	.hb-page-header { padding-top: 2.5rem; }
	.hb-stage { padding: 0.75rem !important; }
	.wp-block-gallery.has-nested-images.hb-masonry { columns: 2; column-gap: 0.5rem; }
	.wp-block-gallery.has-nested-images.hb-masonry figure.wp-block-image:not(#individual-image) { margin-bottom: 0.5rem !important; }
	.hb-pager a { font-size: 1.1rem; }
}

/* ---------- mobile menu button (v1.0.1): make it obvious ---------- */
.hb-header .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--hb-ink);
	border-radius: 2px;
	color: var(--hb-ink);
	background: transparent;
}
.hb-header .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
	font-family: var(--hb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hb-header .wp-block-navigation__responsive-container-open svg { width: 20px; height: 20px; }
@media (min-width: 600px) {
	.hb-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
}

/* v1.0.2: full-screen mobile menu */
.hb-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	padding: 1.5rem;
	background: var(--wp--preset--color--base);
	color: var(--hb-ink);
	z-index: 100000;
}
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--hb-serif);
	font-size: 1.75rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hb-ink);
	padding: 0.4rem 0;
}
.admin-bar .hb-header .wp-block-navigation__responsive-container.is-menu-open { top: 46px; }
@media (min-width: 783px) { .admin-bar .hb-header .wp-block-navigation__responsive-container.is-menu-open { top: 32px; } }

/* v1.0.3: press clippings, poster, gallery credit */
.hb-stage-credit { font-family: var(--hb-mono); font-size: 0.65rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: #a39a90; margin-top: 0.5rem !important; }
.hb-press-grid { align-items: start; }
.hb-press-card > * { margin-block: 0.35rem !important; }
.hb-press-card .wp-block-quote { font-size: 1.1rem; margin-top: 0.75rem !important; padding-left: 1rem; }
.hb-clipping { margin: 0 0 0.75rem !important; background: var(--hb-paper); border: 1px solid var(--hb-line); }
.hb-clipping img { display: block; width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; }
.hb-poster img { width: 100%; height: auto; border: 1px solid var(--hb-line); }
