/* 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-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; }
.bhb-feature__media { display: block; float: left; margin: 0 14px 8px 0; max-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-mini { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 10px; }
.bhb-mini__media img { display: block; width: 100%; height: auto; border: 1px solid var(--bhbr-rule); }
.bhb-mini__title { margin: 0; font-size: 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: 0; color: inherit; opacity: .72; font-size: var(--wp--preset--font-size--small); }
.bhb-mini__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.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) -------------------- */
.bhb-river__item { grid-template-columns: 62px 1fr; border-bottom: 1px solid var(--bhbr-rule); }
.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; }
	.bhb-feature__media { float: none; 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-mini { grid-template-columns: 1fr; }
	.bhb-mini__media { max-width: 120px; }
}

/* -- 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; }
}