/*
Theme Name: Herring Media
Theme URI: https://herringm.com
Author: Herring Media
Description: Custom minimal block theme for Herring Media. Montserrat, near-black on white, lots of whitespace.
Version: 1.3.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: herringmedia
*/

/* Visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline-offset: 4px;
}

/* Header: logo keeps its aspect ratio. */
.hm-logo img,
.hm-logo svg {
	display: block;
	height: auto;
	width: 100%;
}

/* Outline button variant. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--muted);
}

/* Cards (services, work). */
.hm-card {
	border: 1px solid var(--wp--preset--color--line);
	transition: border-color .2s ease;
	height: 100%;
}
.hm-card:hover,
.hm-card:focus-within {
	border-color: var(--wp--preset--color--ink);
}

/* Header Client Videos button stays compact next to the menu. */
.hm-header .wp-block-button__link {
	padding: .6em 1.1em;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}
@media (max-width: 599px) {
	.hm-header .hm-header__cta .wp-block-button__link {
		padding: .5em .8em;
	}
}

/* Responsive 16:9 video embeds (YouTube facade / iframes). */
.hm-embed {
	aspect-ratio: 16 / 9;
	width: 100%;
	background: var(--wp--preset--color--ink);
	position: relative;
	overflow: hidden;
}
.hm-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------
   Home hero: full-width photo slideshow (a Gallery block with the
   class hm-hero__slides) with the tagline overlaid. Swipe on touch,
   arrows/dots/pause added by assets/js/hero.js.
------------------------------------------------------------------ */
.hm-hero {
	position: relative;
	margin-top: 0 !important;
}
.hm-hero__slides.wp-block-gallery {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	margin: 0 !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	height: clamp(26rem, 82vh, 58rem);
}
.hm-hero__slides.wp-block-gallery::-webkit-scrollbar { display: none; }
.hm-hero__slides.wp-block-gallery > figure.wp-block-image {
	flex: 0 0 100% !important;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	scroll-snap-align: start;
}
.hm-hero__slides.wp-block-gallery > figure.wp-block-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}
.hm-hero__slides figcaption { display: none; }
.hm-hero__slides:not(:has(img)) { display: none !important; }

/* Without photos the hero is plain text on white; with photos the text sits on the image. */
.hm-hero__content {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}
.hm-hero:has(.hm-hero__slides img) .hm-hero__content {
	position: absolute;
	inset: auto 0 0 0;
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: calc(var(--wp--preset--spacing--50) + 3rem);
	background: linear-gradient(to top, rgba(20, 18, 18, .72) 0%, rgba(20, 18, 18, .35) 55%, rgba(20, 18, 18, 0) 100%);
	pointer-events: none;
}
.hm-hero:has(.hm-hero__slides img) .hm-hero__content :is(h1, p) { color: #fff; }
.hm-hero:has(.hm-hero__slides img) .hm-hero__content .wp-block-buttons { pointer-events: auto; }
.hm-hero:has(.hm-hero__slides img) .hm-hero__content .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.hm-hero:has(.hm-hero__slides img) .hm-hero__content .wp-block-button__link:hover,
.hm-hero:has(.hm-hero__slides img) .hm-hero__content .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--line);
}
.hm-hero:has(.hm-hero__slides img) .hm-hero__content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
}
.hm-hero:has(.hm-hero__slides img) .hm-hero__content .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
}
.hm-hero:has(.hm-hero__slides img) :focus-visible { outline-color: #fff; }

.hm-hero__controls {
	position: absolute;
	right: clamp(1rem, 4vw, 2.5rem);
	bottom: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	gap: .5rem;
	z-index: 2;
}
.hm-hero__controls button {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.hm-hero__controls button:hover { opacity: .75; }
.hm-hero__controls svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.hm-hero__dots { display: flex; gap: 0; }
.hm-hero__dots button { min-width: 28px; }
.hm-hero__dots button::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1.5px solid #fff;
}
.hm-hero__dots button[aria-current="true"]::before { background: #fff; }
@media (max-width: 599px) {
	.hm-hero__prev, .hm-hero__next { display: none !important; }
	.hm-hero__controls { left: 0; right: 0; justify-content: center; bottom: .5rem; }
}

/* Services dropdown in the header. */
.hm-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important;
	padding: .5rem 0;
	min-width: 15rem !important;
}
.hm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .55rem 1.1rem;
}

/* ------------------------------------------------------------------
   Work: click-to-play videos and filter tabs.
------------------------------------------------------------------ */
.hm-video {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	background: var(--wp--preset--color--ink);
	overflow: hidden;
}
.hm-video__play {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
}
.hm-video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease, opacity .2s ease;
}
.hm-video__play:hover img { transform: scale(1.03); opacity: .9; }
.hm-video__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(35, 31, 32, .78);
	transition: background .2s ease;
}
.hm-video__icon::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 21px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}
.hm-video__play:hover .hm-video__icon,
.hm-video__play:focus-visible .hm-video__icon { background: var(--wp--preset--color--muted); }
.hm-video__play:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.hm-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hm-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.hm-filter a {
	padding: .5em 1.1em;
	border: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}
.hm-filter a:hover { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.hm-filter a[aria-current="page"] {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Work cards: "3 videos" badge; work item page: stacked videos with titles. */
.hm-video__badge {
	position: absolute;
	top: .75rem;
	right: .75rem;
	padding: .3em .7em;
	background: rgba(35, 31, 32, .85);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
}
.wp-block-herringm-work-video { width: 100%; }
.hm-video-item + .hm-video-item { margin-top: var(--wp--preset--spacing--50); }
.hm-video-item__title { margin: 0 0 var(--wp--preset--spacing--30); }

/* ------------------------------------------------------------------
   Contact form
------------------------------------------------------------------ */
.hm-form { display: grid; gap: 1.25rem; }
.hm-form:focus { outline: none; }
.hm-form__row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.hm-form__field { display: grid; gap: .4rem; }
.hm-form label { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.hm-form input[type="text"],
.hm-form input[type="email"],
.hm-form select,
.hm-form textarea {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid #8a8687; /* 3:1 against white for form controls */
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 1rem; /* 16px+ stops iOS zooming into fields */
}
.hm-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.hm-form textarea { resize: vertical; min-height: 10rem; }
.hm-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 1px; border-color: var(--wp--preset--color--ink); }
.hm-form [aria-invalid="true"] { border-color: #b32d2e; border-width: 2px; }
.hm-form__error { margin: 0; color: #b32d2e; font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.hm-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hm-form__note { margin: 0; color: var(--wp--preset--color--muted); }
.hm-form button.wp-element-button { border: 0; cursor: pointer; font-family: inherit; }
.hm-form-message { padding: 1.25rem 1.5rem; border-left: 3px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--base); }
.hm-form-message.is-error { border-left-color: #b32d2e; }
.hm-form-message.is-error a { color: #b32d2e; }
.hm-form-message h2 { margin-top: 0; }
.hm-form-message ul { margin: .25rem 0 0; padding-left: 1.2rem; }

/* ------------------------------------------------------------------
   Homepage work carousel
------------------------------------------------------------------ */
.hm-carousel { position: relative; }
.hm-carousel .wp-block-post-template {
	display: flex !important;
	gap: 1.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: none;
	padding-bottom: .25rem;
}
.hm-carousel .wp-block-post-template::-webkit-scrollbar { display: none; }
.hm-carousel .wp-block-post-template > li {
	flex: 0 0 calc((100% - 3rem) / 3);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}
@media (max-width: 960px) {
	.hm-carousel .wp-block-post-template > li { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 600px) {
	.hm-carousel .wp-block-post-template > li { flex-basis: 85%; }
}
.hm-carousel .wp-block-post-template:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 4px; }
.hm-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-bottom: 1rem;
}
.hm-carousel__nav[hidden] { display: none; }
.hm-carousel__nav button {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.hm-carousel__nav button:hover:not(:disabled) { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }
.hm-carousel__nav button:disabled { opacity: .3; cursor: default; }
.hm-carousel__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }