/* The theme's own look: flat dark panels lifted by shadow.
   Everything here reads from theme.json presets, so a child theme that
   redefines the palette restyles the panels without resetting these rules. */

/* ============================================================
   Remedy: flat dark panels, lifted by shadow rather than by the
   sliced gradients the original used.
   ============================================================ */

:root {
	--bhbr-panel: var(--wp--preset--color--parchment-dim);
	--bhbr-rule: var(--wp--preset--color--paper-line);
	--bhbr-lift: 0 2px 6px rgba(0, 0, 0, .55);
	--bhbr-lift-strong: 0 6px 18px rgba(0, 0, 0, .65);
}

body { letter-spacing: .01em; }

/* Every panel shares one treatment: flat fill, hairline, drop shadow. */
.bhb-panel,
.bhb-feature,
.bhb-minis .bhb-mini,
.bhb-cards .bhb-mini,
.bhb-video,
.bhb-river,
.wp-block-search__input {
	background: var(--bhbr-panel);
	border: 1px solid var(--bhbr-rule);
	box-shadow: var(--bhbr-lift);
}

.bhb-panel, .bhb-feature, .bhb-video, .bhb-river { padding: 12px; margin-bottom: 16px; }

/* -- Masthead ------------------------------------------------ */
.wp-block-site-title a { color: var(--wp--preset--color--ink-text); text-decoration: none; }
.wp-block-site-title { line-height: 1.05; }
.wp-block-site-tagline { margin-top: 2px; }

.wp-block-navigation {
	--wp--preset--color--ink-text: #fff;
	padding: 0;
}
.wp-block-navigation a { color: #fff; text-decoration: none; padding: 9px 14px; display: block; }
.wp-block-navigation a:hover { background: rgba(0, 0, 0, .22); }

.wp-block-search__button {
	background: var(--wp--preset--color--brass);
	color: #fff;
	border: 1px solid var(--bhbr-rule);
	box-shadow: var(--bhbr-lift);
	font-weight: 600;
	padding: 7px 16px;
}
.wp-block-search__input {
	color: var(--wp--preset--color--ink-text);
	padding: 7px 10px;
}

/* -- Sliding panel ------------------------------------------- */
.bhb-panel__frame { position: relative; }
.bhb-panel__track {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--bhb-show, 4) - 1) * 12px) / var(--bhb-show, 4));
	gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.bhb-panel__track::-webkit-scrollbar { display: none; }
.bhb-panel__track > * { scroll-snap-align: start; }
.bhb-panel.show-2 { --bhb-show: 2; } .bhb-panel.show-3 { --bhb-show: 3; }
.bhb-panel.show-4 { --bhb-show: 4; } .bhb-panel.show-5 { --bhb-show: 5; }
.bhb-panel.show-6 { --bhb-show: 6; }

.bhb-panel__item {
	display: block; position: relative; text-decoration: none;
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift);
	background: var(--wp--preset--color--ink);
}
.bhb-panel__item img { display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bhb-panel__item:hover { box-shadow: var(--bhbr-lift-strong); }
.bhb-panel__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 6px 8px; font-size: var(--wp--preset--font-size--caption);
	color: #fff; background: rgba(10, 12, 13, .78);
	/* Two lines at most: the caption labels the picture, so it must never be
	   able to cover it however long the title runs. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.bhb-panel__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 26px; height: 46px; padding: 0; cursor: pointer; line-height: 1; font-size: 20px;
	color: #fff; background: rgba(18, 106, 155, .9);
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift);
}
.bhb-panel__nav--prev { left: -6px; }
.bhb-panel__nav--next { right: -6px; }
.bhb-panel__nav:disabled {
	opacity: .3;
	cursor: default;
	box-shadow: none;
}

/* -- Featured post ------------------------------------------- */
/* The three panel headings on the front page share one indigo bar, so they
   read as a single treatment. letter-spacing inherits rather than being set,
   which keeps them tracking with body text instead of the mono, uppercase
   styling blocks.css gives .bhb-river__head. */
.bhb-feature__title,
.bhb-river__head,
.bhb-video__heading,
.bhb-minis__head {
	margin: -12px -12px 12px; padding: 9px 12px;
	background: var(--wp--preset--color--indigo);
	border-bottom: 1px solid var(--bhbr-rule);
	color: var(--wp--preset--color--cream-text);
	font-size: var(--wp--preset--font-size--x-large); font-weight: 500;
	text-transform: none; letter-spacing: inherit;
}
/* Half and half: the 14px gutter sits between the two, so each side gives up
   7px of it - a flat 50% would leave the text narrower than the image. */
/* Contains the floated image. The footer's clear used to do this by accident,
   so hiding the Read More button let the image spill past the panel and the
   next section ride up into it. */
.bhb-feature__body { display: flow-root; }
/*
 * width, not max-width: a float shrinks to its contents, so a featured image
 * whose file is narrower than half the panel took only its own width - about
 * a third of a full-width panel rather than half. Fourteen posts have one.
 * Half is now the width, and the picture is scaled to fill it.
 */
.bhb-feature__media { display: block; float: left; margin: 0 14px 8px 0; width: calc(50% - 7px); }
.bhb-feature__media img { display: block; width: 100%; height: auto; border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift); }
.bhb-feature__text { margin: 0; }
/* Title, byline, then the text - all of it flowing beside the floated image. */
.bhb-feature__headline {
	margin: 0 0 5px;
	font-size: var(--wp--preset--font-size--xx-large); font-weight: 500; line-height: 1.2;
}
.bhb-feature__headline a { color: inherit; text-decoration: none; }
.bhb-feature__headline a:hover { color: var(--wp--preset--color--brass-bright); }
.bhb-feature__byline { margin: 0 0 16px; font-size: var(--wp--preset--font-size--caption); opacity: .7; }
.bhb-feature__who + .bhb-feature__when::before { content: "\00b7"; margin: 0 .45em; }
/* Only the button lives here now, and it keeps to the right. */
.bhb-feature__more { clear: both; margin: 10px 0 0; text-align: right; }
.bhb-feature__more a {
	display: inline-block; padding: 5px 14px; text-decoration: none; color: #fff;
	background: var(--wp--preset--color--brass);
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift);
}

/* -- Mini posts ---------------------------------------------- */
.bhb-minis { display: grid; gap: 16px; margin-bottom: 16px; }
/* Spans the row; no negative margin because this grid has no padding of
   its own, and the grid gap already separates it from the cards. */
.bhb-minis__head { grid-column: 1 / -1; margin: 0; }
.bhb-minis.cols-1 { grid-template-columns: 1fr; }
.bhb-minis.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bhb-minis.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bhb-minis.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/*
 * A column, so the footer can sit at the foot of the card whatever the text
 * does, and the card itself grows to whatever the content needs. The picture
 * is floated inside the body rather than given a column of its own, which is
 * what lets the category and excerpt wrap around and under it.
 */
.bhb-mini { display: flex; flex-direction: column; padding: 10px; }
/* flow-root contains the float, so it cannot escape the card. */
.bhb-mini__body { display: flow-root; }
.bhb-mini__media {
	display: block; float: left;
	/* 20% wider than the river's 78px thumbnail, and always square. */
	width: 94px; height: 94px;
	margin: 0 12px 6px 0;
	overflow: hidden;
	/*
	 * Positioned so the whole picture takes clicks. The excerpt after it is a
	 * block whose box spans the full width and overlaps the float - only its
	 * lines are shortened - and it hit-tests above it, so without this the
	 * lower part of the picture belonged to the paragraph, not the link.
	 */
	position: relative; z-index: 1;
}
/* The first column exists to hold a thumbnail. With no featured image there
   is nothing to put in it, so the text takes the whole card rather than
   being laid into the 74px meant for the picture. */
.bhb-mini__media img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--bhbr-rule); }
/* The block sets --bhb-mini-title; large is what it was before the setting
   existed, and so is what an unset one still gives. */
.bhb-mini__title { margin: 0 0 6px; font-size: var(--bhb-mini-title, var(--wp--preset--font-size--large)); font-weight: 500; }
.bhb-mini__title a { color: var(--wp--preset--color--ink-text); text-decoration: none; }
.bhb-mini__title a:hover { color: var(--wp--preset--color--brass-bright); }
.bhb-mini__cats { margin: 2px 0 4px; font-size: var(--wp--preset--font-size--caption); }
.bhb-mini__cats a { color: var(--wp--preset--color--brass-bright); text-decoration: none; }
.bhb-mini__text { margin: 8px 0 0; color: inherit; opacity: .72; font-size: var(--wp--preset--font-size--small); }
/* Cards in a row are the same height, but the footer used to sit directly
   under the excerpt - so a short entry put its button halfway up the card and
   a long one put it at the bottom. Making the body a column and letting the
   footer take the leftover space pins it to the bottom of every card. */
.bhb-mini__foot {
	display: flex; align-items: center;
	margin-top: auto; padding-top: 8px;
	clear: both;
}
/* Keeps its corner whether or not the comment count is beside it. */
.bhb-mini__more { margin-left: auto; }
.bhb-mini__comments { font-size: var(--wp--preset--font-size--caption); color: inherit; opacity: .6; text-decoration: none; }
.bhb-mini__more {
	font-size: var(--wp--preset--font-size--caption); text-decoration: none; color: #fff;
	padding: 4px 10px; background: var(--wp--preset--color--brass);
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift);
}

/* -- River (the river, restyled) -------------------- */
/* 78px is exactly half the 156px source, so the picture renders at 2x on a
   dense screen, and it fills the height of the text beside it: blocks.css
   pins the thumbnail square, which left it stopping short of the date. */
.bhb-river__item { grid-template-columns: 78px 1fr; border-bottom: 1px solid var(--bhbr-rule); }
/* Taking the picture out of the flow is what makes the text set the height.
   Left in it, a portrait photograph contributes its own intrinsic height and
   the row grows to fit the picture instead - which stretched the text and put
   the thumbnail's bottom edge below the date. */
.bhb-river__thumb { aspect-ratio: auto; position: relative; }
.bhb-river__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bhb-river__meta { color: var(--wp--preset--color--brass-bright); }
.bhb-river__title { font-size: var(--wp--preset--font-size--body); font-weight: 500; }
.bhb-river__byline { margin-top: 3px; font-size: var(--wp--preset--font-size--caption); color: inherit; opacity: .6; }
.bhb-river__when { display: block; }

/* -- Video panel --------------------------------------------- */
.bhb-video__inner { display: block; }
.bhb-video__embed iframe, .bhb-video__media img {
	display: block; width: 100%; height: auto; aspect-ratio: 16/9;
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift);
}
.bhb-video__title { margin: 8px 0 0; font-size: var(--wp--preset--font-size--large); font-weight: 500; }
.bhb-video__title a { color: var(--wp--preset--color--ink-text); text-decoration: none; }

/* -- Responsive: the one thing the original never had --------- */
@media (max-width: 900px) {
	.bhb-minis.cols-2, .bhb-minis.cols-3 { grid-template-columns: 1fr; }
	/* Four folds to two here rather than straight to one, and to one at
	   the phone breakpoint below with everything else. */
	.bhb-minis.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bhb-feature__media { float: none; width: auto; max-width: 100%; margin: 0 0 14px; }
	.bhb-panel.show-4, .bhb-panel.show-5, .bhb-panel.show-6 { --bhb-show: 2.2; }
	.bhb-panel__nav { display: none; }
}
@media (max-width: 560px) {
	/*
	 * One tile plus a slice of the next, whatever the panel is set to show.
	 * Only show-2 and show-3 used to drop this far, so a panel set to 4 still
	 * tried to fit 2.2 tiles into a phone - about 200px each, at which point
	 * the caption covered the picture it was labelling.
	 */
	.bhb-panel.show-2, .bhb-panel.show-3,
	.bhb-panel.show-4, .bhb-panel.show-5, .bhb-panel.show-6 { --bhb-show: 1.2; }
	.bhb-minis.cols-4 { grid-template-columns: 1fr; }
}

/*
 * Narrow cards stack instead of wrapping.
 *
 * The width is the card's content box, inside its padding. At 240px there is
 * about 130px beside a 94px picture - roughly eighteen characters a line, the
 * point where it stops being a paragraph - so below that the picture spans the
 * card and everything else sits beneath it.
 *
 * Set generously on purpose: three columns without the sidebar make a card of
 * about the same width as two columns with it, and the two should look alike
 * rather than land either side of the switch.
 *
 * A container query, not a media query: what matters is how wide the card
 * turned out, not how wide the window is or how many columns were asked for.
 * Three columns beside the sidebar and three columns without it are different
 * cards, and this follows the card. Where container queries are unsupported
 * the block below is skipped and every card keeps the floated layout.
 */
.bhb-mini { container-type: inline-size; }

@container (max-width: 240px) {
	.bhb-mini__media {
		float: none;
		width: 100%;
		height: auto;
		/* Still square, whatever the card's width turns out to be. */
		aspect-ratio: 1 / 1;
		margin: 0 0 8px;
	}
}

/* -- Category bar -------------------------------------------------------- */
.bhb-catbar {
	/* The strip can be filled by the category list or by a navigation menu, and
	   the two must look identical - so both read their size from here. */
	--bhbr-catbar-size: 16px;
	background: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--bhbr-rule);
	box-shadow: var(--bhbr-lift);
}
.bhb-catbar__list {
	display: flex; flex-wrap: wrap; justify-content: center;
	list-style: none; margin: 0 auto; padding: 0;
	max-width: var(--wp--style--global--wide-size, 1000px);
}
.bhb-catbar__link {
	display: block; padding: 6px 13px; text-decoration: none;
	font-size: var(--bhbr-catbar-size);
	color: var(--wp--preset--color--cream-text);
	opacity: .78;
}
.bhb-catbar__link:hover,
.bhb-catbar__link:focus-visible { opacity: 1; background: rgba(255, 255, 255, .07); }
.bhb-catbar__link.is-current {
	opacity: 1;
	color: var(--wp--preset--color--brass-bright);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--brass-bright);
}
.bhb-catbar__count { opacity: .55; margin-left: 5px; font-size: .75em; }

@media (max-width: 560px) {
	.bhb-catbar__link { padding: 5px 9px; }
}

/* -- Query results as cards ---------------------------------------------- */
/* Archives, search and the blog index list posts through a Query Loop, which
   renders bare list items. Give them the same panel treatment the front page
   uses so the boundary between one post and the next is visible. */

.wp-block-post-template > li.wp-block-post {
	background: var(--bhbr-panel);
	border: 1px solid var(--bhbr-rule);
	box-shadow: var(--bhbr-lift);
	padding: 10px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-post-template > li.wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--bhbr-lift-strong);
}

/* The image sits inside the padding with everything else. */
.wp-block-post-template > li.wp-block-post > .wp-block-post-featured-image {
	margin: 0 0 12px;
}
.wp-block-post-template > li.wp-block-post > .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--bhbr-rule);
}

.wp-block-post-template > li.wp-block-post .wp-block-post-title { margin-bottom: 4px; }

/* Titles and taxonomy terms are links, so without this they take the link
   colour and an underline - a grid of blue underlined headings reads as a page
   of unvisited links rather than a set of cards. */
.wp-block-post-template > li.wp-block-post .wp-block-post-title a,
.wp-block-post-template > li.wp-block-post .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
.wp-block-post-template > li.wp-block-post .wp-block-post-title a:hover,
.wp-block-post-template > li.wp-block-post .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--brass-bright);
	text-decoration: underline;
}

/* -- Front page body ----------------------------------------------------- */
.bhb-frontbody {
	display: grid;
	grid-template-columns: 69% 1fr;
	gap: 16px;
	align-items: start;
}
/* One column switched off means the other gets the whole width. */
.bhb-frontbody.has-no-side,
.bhb-frontbody.has-no-main { grid-template-columns: 1fr; }

@media (max-width: 900px) {
	.bhb-frontbody { grid-template-columns: 1fr; }
}

/* Self-hosted video gets the same frame as an embed. */
.bhb-video__player {
	display: block; width: 100%; height: auto; aspect-ratio: 16/9;
	background: #000;
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift);
}

/* -- Video player, on a video's own page --------------------------------- */
.bhb-player { margin: 0; }
.bhb-player iframe,
.bhb-player video,
.bhb-player img {
	display: block; width: 100%; height: auto; aspect-ratio: 16/9;
	background: #000;
	border: 1px solid var(--bhbr-rule);
	box-shadow: var(--bhbr-lift-strong);
}
.bhb-player.is-poster img { aspect-ratio: auto; }

/* -- Video thumbnails ---------------------------------------------------- */
.bhb-thumb { position: relative; margin: 0 0 10px; }
.bhb-thumb__link { display: block; position: relative; }
.bhb-thumb img {
	display: block; width: 100%; height: auto; aspect-ratio: 16/9;
	object-fit: cover; background: #000;
	border: 1px solid var(--bhbr-rule);
}
/* A play badge, so a still reads as a video rather than a photo. */
.bhb-thumb__play {
	position: absolute; inset: 0; margin: auto;
	width: 52px; height: 36px; border-radius: 8px;
	background: rgba(0, 0, 0, .62);
	transition: background .2s ease;
}
.bhb-thumb__play::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}
.bhb-thumb__link:hover .bhb-thumb__play { background: rgba(200, 30, 30, .85); }

/* A navigation menu in the secondary strip gets the same treatment the
   category links do, so the two sources are indistinguishable to a reader. */
.bhb-catbar.is-menu .wp-block-navigation {
	justify-content: center;
	max-width: var(--wp--style--global--wide-size, 1000px);
	margin: 0 auto;
}
.bhb-catbar.is-menu .wp-block-navigation__container { gap: 0; }
.bhb-catbar.is-menu .wp-block-navigation-item__content {
	display: block;
	padding: 6px 13px;
	font-size: var(--bhbr-catbar-size);
	color: var(--wp--preset--color--cream-text);
	opacity: .78;
	text-decoration: none;
}
.bhb-catbar.is-menu .wp-block-navigation-item__content:hover,
.bhb-catbar.is-menu .wp-block-navigation-item__content:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, .07);
}
.bhb-catbar.is-menu .current-menu-item .wp-block-navigation-item__content {
	opacity: 1;
	color: var(--wp--preset--color--brass-bright);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--brass-bright);
}

/* -- Mobile menu drawer --------------------------------------------------- */
/* The copy of the secondary strip that header.js puts inside the overlay. It
   exists at every width, so it is hidden until the overlay is the only way to
   reach those links - see the breakpoint below, which is core's own. */
.bhb-drawer__extra { display: none; }
.bhb-drawer__label {
	margin: 22px 0 6px;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase; letter-spacing: .12em;
	opacity: .6;
}
.bhb-drawer__list { list-style: none; margin: 0; padding: 0; }
.bhb-drawer__list li { margin: 0; }
.bhb-drawer__list a {
	display: block; padding: 9px 0; text-decoration: none;
	font-size: var(--bhbr-catbar-size);
	color: inherit;
}

/*
 * 600px is where the core Navigation block swaps its menu for the hamburger,
 * so it is the width at which the strip's links stop being reachable any other
 * way. Matching it exactly means there is never a width showing both copies,
 * nor one showing neither.
 */
@media (max-width: 599px) {
	/* Its links live in the overlay at this width. */
	.bhb-catbar { display: none; }

	.bhb-drawer__extra { display: block; }

	/* A bare hamburger in an otherwise empty bar reads as decoration. Naming
	   it, and giving the whole thing a real tap target, does not. */
	header .wp-block-navigation__responsive-container-open {
		display: flex; align-items: center; gap: 9px;
		padding: 11px 4px;
		font-size: var(--bhbr-catbar-size);
		text-transform: uppercase; letter-spacing: .08em;
	}
	header .wp-block-navigation__responsive-container-open::after {
		content: "Menu";
	}

	/* Left, with the title above it, rather than adrift in the middle. */
	header > .wp-block-group .wp-block-navigation.is-responsive { justify-content: flex-start; }

	/*
	 * Core's overlay defaults to a white sheet with centred black text, which
	 * on a site this dark reads as a different website having opened.
	 *
	 * It paints that default through .wp-block-navigation:not(.has-background),
	 * which outweighs a plain override, so these mirror its shape to win on
	 * specificity rather than reaching for !important.
	 */
	header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background: var(--wp--preset--color--ink);
		padding: 16px clamp(16px, 5vw, 28px) 40px;
	}
	header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		color: var(--wp--preset--color--cream-text);
	}
	/* Full-width rows, so a tap anywhere on the line works and the rules below
	   them run the width of the panel instead of underlining the words. */
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
		gap: 0;
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.bhb-drawer__list a {
		display: block;
		width: 100%;
		padding: 12px 0;
		text-align: left;
		border-bottom: 1px solid var(--bhbr-rule);
		color: inherit;
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--cream-text);
	}
	/* The strip's links are the quieter of the two lists, not a second menu. */
	.bhb-drawer__list a { font-size: var(--bhbr-catbar-size); opacity: .82; }
	.bhb-drawer__list li:last-child a { border-bottom: 0; }
}

/* -- Post navigation ------------------------------------------------------ */
/*
 * Previous left, next right. space-between does that while both exist, but the
 * newest post has no previous and the oldest has no next - core renders
 * nothing at all for the missing one, and a lone child would sit on the left
 * whichever one it was. Pushing next right by its own margin makes each side
 * keep its place regardless of the other.
 */
.bhb-postnav { width: 100%; }
.bhb-postnav .post-navigation-link-next { margin-left: auto; text-align: right; }

/* -- The collection grid -------------------------------------------------- */
/* Holds whichever card design was picked, so the arrangement is stated once. */
.bhb-cards { display: grid; gap: 16px; margin-bottom: 16px; }
.bhb-cards .bhb-minis__head { grid-column: 1 / -1; margin: 0; }
.bhb-cards.cols-1 { grid-template-columns: 1fr; }
.bhb-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bhb-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bhb-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -- Card design: image --------------------------------------------------- */
.bhb-card--image {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift);
	background: var(--wp--preset--color--ink);
}
.bhb-card--image:hover { box-shadow: var(--bhbr-lift-strong); }
/* The picture is the card, so it fills it and is cropped rather than letterboxed. */
.bhb-card__bg {
	position: absolute; inset: 0;
	display: block;
	width: 100%; height: 100%;
}
.bhb-card__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
/*
 * Both card pictures sit inside post content, where the lightbox filter marks
 * every image data-lightbox and styles it cursor: zoom-in. These open a post,
 * not a photograph, so they take the cursor a link should have.
 */
.bhb-mini__media, .bhb-mini__media img,
.bhb-card__bg, .bhb-card__bg img { cursor: pointer; }
/* A solid band rather than a gradient, matching the slider's captions - and
   the reason the title stays legible over any photograph. */
.bhb-card__band {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px;
	background: rgba(10, 12, 13, .82);
	color: var(--wp--preset--color--cream-text, #E8EBEE);
}
.bhb-card__title {
	margin: 0; min-width: 0;
	font-size: var(--bhb-mini-title, var(--wp--preset--font-size--large));
	font-weight: 500; line-height: 1.2;
	/* Two lines at most, so a long title cannot push the button off the card
	   or grow the band over the picture it sits on. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.bhb-card__title a { color: inherit; text-decoration: none; }
.bhb-card__more {
	margin-left: auto; flex: none;
	font-size: var(--wp--preset--font-size--caption); text-decoration: none; color: #fff;
	padding: 5px 12px; background: var(--wp--preset--color--brass);
	border: 1px solid var(--bhbr-rule);
}
.bhb-card__more:hover { background: var(--wp--preset--color--brass-bright); }

@media (max-width: 900px) {
	.bhb-cards.cols-3, .bhb-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.bhb-cards.cols-2, .bhb-cards.cols-3, .bhb-cards.cols-4 { grid-template-columns: 1fr; }
}

/* -- The reading overlay -------------------------------------------------- */
body.bhb-modal-open { overflow: hidden; }
.bhb-modal {
	position: fixed; inset: 0; z-index: 210; display: none;
	align-items: center; justify-content: center;
	background: rgba(10, 12, 13, .82);
	padding: clamp(8px, 3vw, 40px);
}
.bhb-modal.is-open { display: flex; }
.bhb-modal__panel {
	display: flex; flex-direction: column;
	width: min(var(--wp--style--global--wide-size, 1000px), 100%);
	/*
	 * A fixed height, not one that follows the post: paging from a short entry
	 * to a long one used to resize the window under the reader, moving the
	 * controls they were about to press. max-height keeps it inside very short
	 * viewports, where 70% plus the backdrop's padding would not fit.
	 */
	height: 70vh;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--wp--preset--color--paper, #16181a);
	border: 1px solid var(--bhbr-rule); box-shadow: var(--bhbr-lift-strong);
}
/* A phone has far less of it to spare, and the backdrop around the panel is
   doing less work there - so the reading area takes more of the screen. */
@media (max-width: 560px) {
	.bhb-modal__panel { height: 80vh; }
}
/*
 * Sideways gestures are ours; pan-y stays with the browser because the post
 * inside this panel is scrolled, and pinch-zoom because a reader still needs
 * to zoom into a photograph.
 */
.bhb-modal__panel { touch-action: pan-y pinch-zoom; }
/* Follows the finger, then carries on out and the next one enters behind it.
   The timing matches the wait in modal.js before the swap. */
.bhb-modal__body { transition: transform .2s ease; }
/* No easing while the finger is down - it should track exactly. */
.bhb-modal.is-dragging .bhb-modal__body { transition: none; }
/* Stays put while the post scrolls under it, so the way out is always there. */
.bhb-modal__bar {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px;
	background: var(--wp--preset--color--indigo);
	border-bottom: 1px solid var(--bhbr-rule);
	color: var(--wp--preset--color--cream-text);
}
.bhb-modal__counter {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--brass-bright);
	font-variant-numeric: tabular-nums;
}
.bhb-modal__close, .bhb-modal__nav {
	background: transparent; border: 1px solid rgba(239, 233, 218, .35);
	color: inherit; cursor: pointer; width: 34px; height: 34px;
	line-height: 1; font-size: 1rem;
}
.bhb-modal__close { margin-left: auto; }
.bhb-modal__close:hover, .bhb-modal__nav:hover:not(:disabled) {
	background: var(--wp--preset--color--brass); border-color: var(--wp--preset--color--brass);
}
/* Disabled rather than hidden, so the control never moves under the reader. */
.bhb-modal__nav:disabled { opacity: .35; cursor: default; }
/* flow-root so the floated picture below cannot escape the panel. */
.bhb-modal__body { padding: clamp(16px, 3vw, 32px); display: flow-root; }
/*
 * The featured image sits beside the article rather than above it: 40% of the
 * width, with the post wrapping around and continuing beneath.
 */
.bhb-modal__body .wp-block-post-featured-image {
	float: left;
	width: 40%;
	margin: 0 22px 12px 0;
}
.bhb-modal__body .wp-block-post-featured-image img { display: block; width: 100%; height: auto; }
/* After the rule above on purpose: same specificity, so source order decides. */
@media (max-width: 560px) {
	/* Too little left beside it at this width, so it goes back on top. */
	.bhb-modal__body .wp-block-post-featured-image {
		float: none; width: 100%; margin: 0 0 16px;
	}
}
.bhb-modal__body img { max-width: 100%; height: auto; }
.bhb-modal__note { margin: 0; opacity: .7; }

/* -- Interactive states --------------------------------------------------- */
/*
 * Every control answers the same three ways: brighter on hover, pressed on
 * click, and a visible ring when it is reached by keyboard. Gathered here
 * rather than scattered through each component, so a new control inherits the
 * vocabulary instead of inventing one - most of these had no hover at all, and
 * nothing in the theme had a focus or active state.
 */

/* Solid buttons: a brass fill that brightens and lifts. */
.bhb-mini__more,
.bhb-card__more,
.bhb-feature__more a,
.wp-block-search__button {
	transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.bhb-mini__more:hover,
.bhb-card__more:hover,
.bhb-feature__more a:hover,
.wp-block-search__button:hover {
	background: var(--wp--preset--color--brass-bright);
	box-shadow: var(--bhbr-lift-strong);
}
/* Pressed: down a pixel, and the shadow it was floating on goes. */
.bhb-mini__more:active,
.bhb-card__more:active,
.bhb-feature__more a:active,
.wp-block-search__button:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* Arrows over the panels. Disabled ones stay put and stay quiet. */
.bhb-panel__nav,
.bhb-builds__nav {
	transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.bhb-panel__nav:hover:not(:disabled),
.bhb-builds__nav:hover:not(:disabled) {
	background: var(--wp--preset--color--brass-bright);
	border-color: var(--wp--preset--color--brass-bright);
	color: #fff;
}
/* Its resting transform centres it, so the press is added to that, not
   instead of it. */
.bhb-panel__nav:active:not(:disabled) { transform: translateY(calc(-50% + 1px)); }
.bhb-builds__nav:active:not(:disabled) { transform: translateY(1px); }

/* Overlay controls already brighten; these give them the press. */
.bhb-modal__close:active,
.bhb-modal__nav:active:not(:disabled) { transform: translateY(1px); }

/* Quiet links carry their state in colour alone. */
.bhb-mini__comments,
.post-navigation-link a {
	transition: color .15s ease, opacity .15s ease;
}
.bhb-mini__comments:hover,
.post-navigation-link a:hover {
	color: var(--wp--preset--color--brass-bright);
	opacity: 1;
}

/*
 * One focus ring for everything reachable by keyboard. :focus-visible rather
 * than :focus, so it appears for a tab and not for a mouse click.
 */
.bhb-mini__more:focus-visible,
.bhb-card__more:focus-visible,
.bhb-feature__more a:focus-visible,
.bhb-mini__comments:focus-visible,
.bhb-mini__title a:focus-visible,
.bhb-card__title a:focus-visible,
.bhb-feature__headline a:focus-visible,
.post-navigation-link a:focus-visible,
.bhb-panel__nav:focus-visible,
.bhb-builds__nav:focus-visible,
.bhb-modal__nav:focus-visible,
.bhb-modal__close:focus-visible,
.wp-block-search__button:focus-visible,
.bhb-catbar__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brass-bright);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bhb-mini__more, .bhb-card__more, .bhb-feature__more a, .wp-block-search__button,
	.bhb-panel__nav, .bhb-builds__nav, .bhb-mini__comments, .post-navigation-link a {
		transition: none;
	}
	.bhb-mini__more:active, .bhb-card__more:active, .bhb-feature__more a:active,
	.wp-block-search__button:active, .bhb-builds__nav:active:not(:disabled),
	.bhb-modal__close:active, .bhb-modal__nav:active:not(:disabled) { transform: none; }
	.bhb-panel__nav:active:not(:disabled) { transform: translateY(-50%); }
}

/* -- Primary menu: no wrapping -------------------------------------------- */
/*
 * Core opens a submenu at min-width: 200px with width: auto, so an item longer
 * than that - "Would Build Again", or anything carrying the arrow that marks a
 * third level - wraps onto two lines instead of the panel widening.
 *
 * Scoped to the header's own navigation, and only while the responsive
 * container is closed. Inside the mobile drawer the items are full-width rows
 * and wrapping is the right behaviour there.
 */
header > .wp-block-group .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	white-space: nowrap;
}

/*
 * And the panel grows to its longest item rather than holding at 200px. These
 * mirror core's own three "submenu is open" selectors so they win on
 * specificity; the closed state keeps its width: 0.
 */
header > .wp-block-group .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
header > .wp-block-group .wp-block-navigation .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container,
header > .wp-block-group .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	width: max-content;
	max-width: none;
}