/*
Theme Name: Heal Bite by Byte
Theme URI: https://healbitebybyte.co.in
Author: Heal Bite by Byte LLP
Author URI: https://healbitebybyte.co.in
Description: Fully customisable block theme for Heal Bite by Byte LLP that also runs a blog: a Site type switch turns it into a post-first blog with a sidebar, code highlighting, share buttons, related posts and SEO tags built in. Every colour, font, size, layout choice and piece of home-page content is set in Appearance → Customize. Fluid layout fills any window from phones to 21:9 ultrawides while keeping paragraphs at a readable length.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 3.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healbitebybyte
Tags: block-patterns, full-site-editing, custom-colors, custom-logo, style-variations, wide-blocks
*/

/*
 * Defaults for the variables the Customizer overrides (inc/dynamic-css.php).
 * They keep the editor and a fresh install looking right before any setting
 * is saved.
 */
:root {
	--hbbb-gutter: clamp(1rem, 4vw, 10rem);
	--hbbb-block-gap: 1.25rem;
	--hbbb-card-min: 18rem;
	--hbbb-hero-min: 0vh;
	--hbbb-hero-art: 34vh;
	--hbbb-hero-pad: min(3rem, 8vh);
	--hbbb-max: 1600px;
	--hbbb-radius-btn: 8px;
	--hbbb-radius-card: 10px;
	--hbbb-header-pad: 1rem;
	--hbbb-logo-width: 44px;
	--hbbb-font-heading: "Times New Roman", Times, "Liberation Serif", serif;
	--hbbb-font-body: Arial, Helvetica, "Helvetica Neue", "Liberation Sans", sans-serif;
	--hbbb-font-mono: "Courier New", Courier, "Liberation Mono", monospace;
	--hbbb-heading-weight: 700;
	--hbbb-heading-lh: 1.15;
	--hbbb-heading-ls: 0em;
	--hbbb-heading-transform: none;
	--hbbb-body-lh: 1.65;
	--hbbb-btn-transform: none;
}

/* Sections butt against each other; their own padding provides the rhythm. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Long words and URLs must never force sideways scrolling on narrow screens. */
body {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Layout modes
   ========================================================================== */

/* Boxed: the page sits in a frame on a Sand background. */
body.hbbb-layout-boxed {
	background-color: var(--wp--preset--color--sand);
}
.hbbb-layout-boxed .wp-site-blocks {
	max-width: var(--hbbb-max);
	margin-inline: auto;
	background-color: var(--wp--preset--color--paper);
	box-shadow: 0 0 60px -20px rgba(43, 33, 56, 0.25);
}

/* ==========================================================================
   Grids — the core of "use the space you have"
   ========================================================================== */

.hbbb-grid,
.hbbb-split,
.hbbb-hero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}
/* html raises specificity over core's ":root :where(.is-layout-flow) > *" block-gap margin, which would push every item but the first down. */
html .hbbb-grid > *,
html .hbbb-split > *,
html .hbbb-hero__grid > *,
html .hbbb-cols > * {
	margin-block: 0;
	min-width: 0;
}

/* Auto grid: adds a column whenever another card fits. */
.hbbb-grid {
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--hbbb-card-min), 100%), 1fr));
}

/* Fixed four / two across on large screens, never an orphan in between. */
.hbbb-grid--4,
.hbbb-grid--2 {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
	.hbbb-grid--4,
	.hbbb-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1100px) {
	.hbbb-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Two-part split: text + panel. */
.hbbb-split {
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
	.hbbb-split {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
}

/*
 * Post grid (query loops). Cards never get narrower than the Customizer
 * minimum, and grow with the window (13vw) so ultrawide screens get more,
 * larger cards rather than a strip of tiny ones.
 */
.wp-block-post-template.hbbb-cards {
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fill, minmax(min(max(var(--hbbb-card-min), 13vw), 100%), 1fr));
}
/* Fixed-count grids (home page): stretch cards so the row is always full. */
.wp-block-post-template.hbbb-cards--fit {
	grid-template-columns: repeat(auto-fit, minmax(min(max(var(--hbbb-card-min), 13vw), 100%), 1fr));
}

/* Wide sections can span 3000px+; paragraphs inside them keep a readable measure. */
.alignwide p,
.hbbb-split p {
	max-width: var(--wp--style--global--content-size);
}
.hbbb-form p {
	max-width: none;
}

/*
 * Page content: the reading column lines up with the left edge of the title
 * and wide blocks instead of floating in the middle of a wide window.
 */
.hbbb-page-content.is-layout-constrained > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* ==========================================================================
   Labels & identity
   ========================================================================== */

.hbbb-eyebrow,
.hbbb-label,
.is-style-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.hbbb-label,
.is-style-label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.hbbb-label::before,
.is-style-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: currentColor;
	flex: none;
}
.hbbb-mono {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.02em;
}
.hbbb-details p {
	margin: 0 0 0.35rem;
}
.hbbb-details p + .hbbb-label {
	margin-top: 1.25rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.hbbb-header {
	padding-block: var(--hbbb-header-pad);
	color: var(--hbbb-header-text, var(--wp--preset--color--ink));
	background-color: var(--hbbb-header-bg, var(--wp--preset--color--paper));
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.hbbb-header__inner {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}
.hbbb-header__brand {
	gap: 0.75rem;
}
/* Sized by height, so square marks and wide wordmarks both fit the header. */
.hbbb-header .wp-block-site-logo img {
	display: block;
	/* Display width from hbbb_logo_size(); the height follows the image's proportions, also when a phone narrows it. */
	width: min(var(--hbbb-logo-w, var(--hbbb-logo-width)), 55vw, 32rem);
	height: auto;
}
.hbbb-header .hbbb-eyebrow {
	font-size: 0.6rem;
	letter-spacing: 0.4em;
	margin: 0;
}
.hbbb-header__nav {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.hbbb-header-sticky .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on phones. */
	.hbbb-header-sticky .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}
.hbbb-header-centered .hbbb-header__inner {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* ==========================================================================
   Tri-colour rule (coral / amber / plum, in that order)
   ========================================================================== */

.wp-block-separator.is-style-tricolour {
	border: 0;
	height: 4px;
	width: 220px;
	max-width: 100%;
	opacity: 1;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--coral) 0 31%,
		transparent 31% 34.5%,
		var(--wp--preset--color--amber) 34.5% 65.5%,
		transparent 65.5% 69%,
		var(--wp--preset--color--plum) 69% 100%
	);
}
.is-layout-flow > .wp-block-separator.is-style-tricolour {
	margin-left: 0;
}
.is-layout-constrained > .wp-block-separator.is-style-tricolour {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}
.has-text-align-center + .wp-block-separator.is-style-tricolour,
.hbbb-cta .wp-block-separator.is-style-tricolour {
	margin-inline: auto;
}
.hbbb-no-tricolour .wp-block-separator.is-style-tricolour {
	display: none;
}

/* ==========================================================================
   Page heads (page, blog, archive, search, 404)
   ========================================================================== */

.hbbb-page-head {
	padding-block: var(--wp--preset--spacing--60);
	background-color: var(--hbbb-hero-bg, var(--wp--preset--color--sand));
	color: var(--hbbb-hero-text, inherit);
}
.hbbb-page-head h1 {
	margin-block: 0.25em 0;
	max-width: 24ch;
}
.hbbb-page-head .wp-block-search {
	max-width: 40rem;
}
.hbbb-main {
	padding-bottom: var(--wp--preset--spacing--70);
}
.hbbb-main > .wp-block-post-featured-image,
.hbbb-main > .hbbb-page-content {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hbbb-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--hbbb-hero-min);
	padding-block: var(--hbbb-hero-pad);
	color: var(--hbbb-hero-text, inherit);
	background-color: var(--hbbb-hero-bg, var(--wp--preset--color--sand));
}
/* Auto inline margins on a flex child would shrink it to its content; keep it full width. */
.hbbb-hero > * {
	width: 100%;
	box-sizing: border-box;
}
.hbbb-hero__grid {
	gap: var(--wp--preset--spacing--70);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 782px) {
	.hbbb-hero__grid--with-media {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
	.hbbb-hero__grid--media-left {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	}
	.hbbb-hero__grid--media-left .hbbb-hero__media {
		order: -1;
	}
}
.hbbb-hero h1 {
	max-width: 18ch;
	margin-block: 0.3em 0;
}
.hbbb-hero__lead {
	max-width: 60ch;
	color: var(--hbbb-hero-text, var(--wp--preset--color--ink-soft));
}
/* Scale the artwork with both width and height so short ultrawide windows don't overflow. */
.hbbb-hero__media img {
	display: block;
	width: min(100%, var(--hbbb-hero-art), 760px);
	height: auto;
	margin-inline: auto;
}

/* ==========================================================================
   Sections, pillar cards, post cards
   ========================================================================== */

.hbbb-section {
	padding-block: var(--wp--preset--spacing--80);
}
.hbbb-section--alt {
	background-color: var(--wp--preset--color--cream);
}
.hbbb-section__head {
	margin-bottom: var(--wp--preset--spacing--50);
}
.hbbb-section__head h2 {
	margin-block: 0.25em 0;
	max-width: 24ch;
}

.hbbb-pillar,
[class*="is-style-pillar-"] {
	--hbbb-pillar: var(--wp--preset--color--coral);
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 4px solid var(--hbbb-pillar);
	border-radius: var(--hbbb-radius-card);
}
.hbbb-split > .hbbb-pillar,
.hbbb-split > [class*="is-style-pillar-"] {
	height: auto;
}
.hbbb-section--alt .hbbb-pillar,
.hbbb-section--alt [class*="is-style-pillar-"] {
	background: var(--wp--preset--color--paper);
}
.hbbb-pillar--amber { --hbbb-pillar: var(--wp--preset--color--amber); }
.hbbb-pillar--plum { --hbbb-pillar: var(--wp--preset--color--plum); }
.hbbb-pillar--ink { --hbbb-pillar: var(--wp--preset--color--ink); }
/* Card styles picked in the editor (Group → Styles). Listed last so the picked style wins over old classes. */
.is-style-pillar-coral { --hbbb-pillar: var(--wp--preset--color--coral); }
.is-style-pillar-amber { --hbbb-pillar: var(--wp--preset--color--amber); }
.is-style-pillar-plum { --hbbb-pillar: var(--wp--preset--color--plum); }
.is-style-pillar-ink { --hbbb-pillar: var(--wp--preset--color--ink); }
.hbbb-pillar > :first-child,
[class*="is-style-pillar-"] > :first-child {
	margin-top: 0;
}
.hbbb-pillar > :last-child,
[class*="is-style-pillar-"] > :last-child {
	margin-bottom: 0;
}
/* Brand hues fail contrast as small text, so only the dot takes the pillar colour. */
.hbbb-pillar .hbbb-label::before,
.hbbb-pillar .is-style-label::before,
[class*="is-style-pillar-"] .hbbb-label::before,
[class*="is-style-pillar-"] .is-style-label::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hbbb-pillar);
}

.hbbb-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--hbbb-radius-card);
}
.hbbb-card > * {
	margin-block: 0;
}
.hbbb-card .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}
.hbbb-card__body {
	flex: 1;
	padding: var(--wp--preset--spacing--40);
}
.hbbb-card__body > :first-child {
	margin-top: 0;
}
.hbbb-card__meta {
	gap: 0.25rem 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.hbbb-card__meta > * {
	margin: 0;
}
.hbbb-card .wp-block-post-title {
	margin-block: 0.4em;
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Call to action
   ========================================================================== */

.hbbb-cta {
	padding-block: var(--wp--preset--spacing--80);
	color: var(--hbbb-cta-text, var(--wp--preset--color--paper));
	background-color: var(--hbbb-cta-bg, var(--wp--preset--color--ink));
	text-align: center;
}
.hbbb-cta > * {
	margin-inline: auto;
}
.hbbb-cta h2 {
	max-width: 22ch;
	color: inherit;
}
.hbbb-cta p {
	max-width: 60ch;
}
.hbbb-cta .wp-element-button:hover {
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
}

/* ==========================================================================
   Columns: content with left / right sidebars (post lists, posts, pages)

   The content comes first in the HTML. Side by side from 1100 px with one
   side column, from 1280 px with two, so the content never gets squeezed;
   narrower windows stack: post details / "On this page" on top, then the
   content, then the left and the right sidebar.
   ========================================================================== */

.hbbb-cols {
	/* Sidebars give up width on mid-size windows so the content keeps a comfortable measure. */
	--hbbb-left-w: max(13rem, min(var(--hbbb-sidebar-left-max, 18rem), 18vw));
	--hbbb-right-w: max(15rem, min(var(--hbbb-sidebar-right-max, 22rem), 20vw));
	--hbbb-slim-w: min(14rem, 13vw);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--60);
}
.hbbb-cols__main {
	order: 0;
}
/* Stacked: the left column dissolves so its parts can sit above and below the content. */
.hbbb-cols__left {
	display: contents;
}
.hbbb-cols__left > * {
	order: 1;
}
.hbbb-cols__left > .hbbb-single__meta {
	order: -1;
}
.hbbb-cols__right {
	order: 2;
}
.hbbb-cols__left > .hbbb-sidebar,
.hbbb-cols__right {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* Side-by-side rules for two and three columns: generated once from a single template by hbbb_columns_css() (inc/dynamic-css.php). */

/* Post details (date, author, categories, tags). */
.hbbb-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.hbbb-single__meta > * {
	margin: 0;
}
@media (min-width: 1100px) {
	.hbbb-cols__left .hbbb-single__meta {
		flex-direction: column;
	}
	/* Alone in a slim column, the details follow the reader down the page. */
	.hbbb-cols__left--slim > .hbbb-single__meta {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
	}
}
.hbbb-single__aside .wp-block-post-template.hbbb-cards {
	--hbbb-card-min: 15rem;
}
.hbbb-single__aside .wp-block-search {
	max-width: 36rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.hbbb-footer {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--hbbb-footer-text, var(--wp--preset--color--ink));
	background-color: var(--hbbb-footer-bg, var(--wp--preset--color--cream));
	border-top: 1px solid var(--wp--preset--color--rule);
}
.hbbb-footer .hbbb-grid {
	--hbbb-card-min: 14rem;
	margin-top: var(--wp--preset--spacing--40);
}
.hbbb-footer__bottom {
	margin-top: var(--wp--preset--spacing--50);
	color: var(--hbbb-footer-text, var(--wp--preset--color--muted));
}
.hbbb-social {
	gap: 0.75rem;
}

/* ==========================================================================
   Contact form
   ========================================================================== */

.hbbb-form {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
	/* Name and email side by side; message and button span the row. */
	.hbbb-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hbbb-form__full {
		grid-column: 1 / -1;
	}
}
.hbbb-form p {
	margin: 0;
}
.hbbb-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.hbbb-form input,
.hbbb-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: min(var(--hbbb-radius-btn), 12px);
}
.hbbb-form input:focus,
.hbbb-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
.hbbb-form button {
	border: 0;
	cursor: pointer;
}
.hbbb-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.hbbb-form__notice {
	padding: 0.8rem 1rem;
	border-left: 4px solid;
	border-radius: 8px;
}
.hbbb-form__notice--ok {
	color: #1f3f1e;
	background: #eef6ec;
	border-color: #3d7a3a;
}
.hbbb-form__notice--error {
	color: #7a2414;
	background: #fbece9;
	border-color: #c7452f;
}


/* ==========================================================================
   Blog page topic sections
   ========================================================================== */

.hbbb-blog-section {
	padding-block: var(--wp--preset--spacing--60);
	scroll-margin-top: 6rem;
}
.hbbb-blog-section + .hbbb-blog-section {
	border-top: 1px solid var(--wp--preset--color--rule);
}
.hbbb-blog-section__head {
	margin-bottom: var(--wp--preset--spacing--40);
}
.hbbb-blog-section__head h2 {
	margin-block: 0.2em 0;
}
.hbbb-blog-section__all {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.hbbb-blog-section .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
}
/* Keep the section from collapsing while the next page is fetched. */
.hbbb-blog-section .wp-block-query {
	min-height: 10rem;
}

/* ==========================================================================
   Advertisements — in normal flow, height reserved up front (no layout
   shift), styled as a quiet panel, never fixed or overlaid.
   ========================================================================== */

.hbbb-ad {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-block: var(--wp--preset--spacing--40);
	padding: 0.75rem;
	overflow: hidden;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--hbbb-radius-card);
	contain: layout;
}
.hbbb-ad__label {
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.hbbb-ad__slot {
	/* Reserve the ad unit's own height so nothing moves when it loads. */
	min-height: var(--hbbb-ad-min, 90px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.hbbb-ad__slot > * {
	max-width: 100%;
}
/* Isolated ads: the sandboxed frame takes the slot's width and reserved height. */
.hbbb-ad__frame {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
}
.hbbb-ad-band {
	padding-inline: var(--hbbb-gutter);
}
.hbbb-ad-band .hbbb-ad {
	margin-block: var(--wp--preset--spacing--30);
}
/* In-feed ads take one card cell in the grid. */
li.hbbb-ad {
	list-style: none;
	height: 100%;
	margin: 0;
}
.hbbb-single__aside > .hbbb-ad:first-child {
	margin-top: 0;
}

/* ==========================================================================
   Blog site: post list or page beside the sidebar
   ========================================================================== */

.hbbb-site-blog .hbbb-front {
	padding-bottom: var(--wp--preset--spacing--70);
}
.hbbb-front > .wp-block-post-featured-image,
.hbbb-front > .hbbb-page-content {
	margin-block-start: var(--wp--preset--spacing--60);
}
.hbbb-cols__main > .wp-block-query,
.hbbb-cols__main > .hbbb-blog-section:first-child {
	margin-top: 0;
}
.hbbb-cols__main .hbbb-blog-section:first-child {
	padding-top: 0;
}
.hbbb-cols--list .hbbb-page-content > * {
	max-width: var(--wp--style--global--content-size);
}
.hbbb-cols--list .hbbb-page-content > .alignwide,
.hbbb-cols--list .hbbb-page-content > .alignfull {
	max-width: none;
}

/* ==========================================================================
   Sidebar items
   ========================================================================== */

.hbbb-sidebar {
	container-type: inline-size;
}
.hbbb-sidebar > .wp-block-group,
.hbbb-sidebar > .hbbb-ad {
	margin-block: 0 var(--wp--preset--spacing--50);
}
/* A wide side column (three-column post layout, or below the content on tablets) lays items out in columns. */
@container (min-width: 36rem) {
	.hbbb-sidebar {
		display: grid;
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		align-items: start;
	}
	.hbbb-sidebar > .wp-block-group,
	.hbbb-sidebar > .hbbb-ad {
		margin: 0;
	}
	.hbbb-sidebar > .hbbb-ad {
		grid-column: 1 / -1;
	}
}
.hbbb-widget {
	font-size: var(--wp--preset--font-size--small);
}
.hbbb-widget > * {
	margin-block: 0;
}
.hbbb-widget > * + * {
	margin-top: 0.85rem;
}
.hbbb-widget__title {
	padding-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem !important;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.hbbb-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.hbbb-widget li + li {
	margin-top: 0.6rem;
}
.hbbb-widget .wp-block-latest-posts__post-title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.hbbb-widget .wp-block-latest-posts__post-title:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}
.hbbb-widget .wp-block-latest-posts__post-author,
.hbbb-widget .wp-block-latest-posts__post-date,
.hbbb-widget .wp-block-latest-comments__comment-date {
	display: inline;
	margin-right: 0.5rem;
	font-size: 0.8em;
	color: var(--wp--preset--color--muted);
}
.hbbb-widget .wp-block-latest-posts__post-excerpt {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--ink-soft);
}
.hbbb-widget .wp-block-latest-comments {
	padding: 0;
}
.hbbb-widget .wp-block-latest-comments__comment {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	line-height: 1.4;
}
.hbbb-widget .wp-block-latest-comments__comment-avatar {
	flex: none;
	border-radius: 50%;
}
.hbbb-widget .wp-block-latest-comments__comment-meta {
	margin: 0;
}
.hbbb-widget .wp-block-categories-list li,
.hbbb-widget .wp-block-archives-list li {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding-bottom: 0.45rem;
	margin: 0;
	border-bottom: 1px dashed var(--wp--preset--color--rule);
}
.hbbb-widget .wp-block-categories-list li + li,
.hbbb-widget .wp-block-archives-list li + li {
	padding-top: 0.45rem;
}
.hbbb-widget .wp-block-categories-list .children {
	display: none;
}
.hbbb-widget select {
	width: 100%;
}
.hbbb-widget--disclaimer {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--cream);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--hbbb-radius-card) var(--hbbb-radius-card) 0;
}
.hbbb-widget--disclaimer .hbbb-widget__title {
	border: 0;
	padding: 0;
}
.hbbb-widget--disclaimer p {
	color: var(--wp--preset--color--ink-soft);
}
/* Popular posts (most commented). */
.hbbb-popular {
	counter-reset: hbbb-popular;
}
.hbbb-popular li {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	column-gap: 0.4rem;
	counter-increment: hbbb-popular;
}
.hbbb-popular li::before {
	content: counter(hbbb-popular);
	grid-row: span 2;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--accent);
}
.hbbb-popular__title {
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.hbbb-popular__title:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}
.hbbb-popular__meta {
	font-size: 0.8em;
	color: var(--wp--preset--color--muted);
}
/* Tags as small chips. */
.hbbb-widget .wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.hbbb-widget .wp-block-tag-cloud a {
	margin: 0 !important;
	padding: 0.2rem 0.6rem;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--rule) !important;
	border-radius: 999px;
}
.hbbb-widget .wp-block-tag-cloud a:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent) !important;
}
/* Custom text / button block shown as a highlighted box. */
.hbbb-widget--custom-boxed {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 4px solid var(--wp--preset--color--coral);
	border-radius: var(--hbbb-radius-card);
}
.hbbb-widget--custom-boxed .hbbb-widget__title {
	border: 0;
	padding: 0;
}
.hbbb-widget .wp-block-loginout form p {
	margin: 0 0 0.6rem;
}

/* Shared input look: search, login, comments, MailPoet. */
.wp-block-search__input,
.wp-block-loginout input[type="text"],
.wp-block-loginout input[type="password"],
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea,
.mailpoet_form input.mailpoet_text,
.mailpoet_form input[type="email"],
.mailpoet_form select,
.hbbb-widget select {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.6rem 0.8rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: min(var(--hbbb-radius-btn), 12px);
}
.wp-block-loginout input[type="text"],
.wp-block-loginout input[type="password"],
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
	width: 100%;
}
.wp-block-loginout input[type="submit"],
.wp-block-post-comments-form input[type="submit"],
.mailpoet_form input.mailpoet_submit {
	padding: 0.65rem 1.25rem;
	font: inherit;
	font-weight: 600;
	text-transform: var(--hbbb-btn-transform, none);
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: var(--hbbb-radius-btn);
	cursor: pointer;
}
.wp-block-search__button {
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: min(var(--hbbb-radius-btn), 12px);
}

/* MailPoet form: inherit the theme instead of the plugin's own look. */
.mailpoet_form {
	padding: 0 !important;
}
.mailpoet_form .mailpoet_paragraph {
	margin-bottom: 0.75rem;
}
.mailpoet_form input.mailpoet_text,
.mailpoet_form input[type="email"] {
	width: 100% !important;
}
.mailpoet_form .mailpoet_message p {
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Single post: related, share, comments, side column
   ========================================================================== */

.hbbb-related--below {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.hbbb-related--below .wp-block-post-template.hbbb-cards {
	--hbbb-card-min: 14rem;
}
.hbbb-related__title {
	margin-top: 0;
}
.hbbb-related--aside {
	margin-bottom: var(--wp--preset--spacing--50);
}
/*
 * Article column wider than the reading width (any window size): text lines
 * up on the left with the header, at reading width; images, code, tables,
 * embeds and wide layouts use the whole column.
 */
.hbbb-single--fluid .hbbb-single__main.is-layout-constrained > *,
.hbbb-single--fluid .wp-block-post-content.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.hbbb-single--fluid .hbbb-single__main > :is(.wp-block-post-content, .hbbb-related, .wp-block-comments, .hbbb-share, .wp-block-post-featured-image) {
	max-width: none;
}
.hbbb-single--fluid .wp-block-post-content > :is(pre, .hbbb-code-wrap, .wp-block-image, .wp-block-table, .wp-block-embed, .wp-block-gallery, .wp-block-coblocks-gallery-masonry, figure, .alignwide, .alignfull) {
	max-width: none;
}
/* "Fill the column" (Customize → Layout & screen sizes): article and page text spans the whole content column. */
.hbbb-text-fill .hbbb-single--fluid .hbbb-single__main.is-layout-constrained > *,
.hbbb-text-fill .hbbb-single--fluid .wp-block-post-content.is-layout-constrained > *,
.hbbb-text-fill .hbbb-single--fluid .wp-block-post-content > .wp-block-columns:not(.alignwide):not(.alignfull),
.hbbb-text-fill .hbbb-single--fluid .wp-block-post-content p {
	max-width: none;
}
/* Ordinary columns (text beside a photo, say) stay together: the text column keeps about a reading width. */
.hbbb-single--fluid .wp-block-post-content > .wp-block-columns:not(.alignwide):not(.alignfull) {
	max-width: min(100%, calc(var(--wp--style--global--content-size) * 1.5));
}

/* "On this page" */
.hbbb-toc__title {
	margin: 0 0 0.6rem;
}
.hbbb-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.hbbb-toc__list li + li {
	margin-top: 0.5rem;
}
.hbbb-toc__list a {
	display: block;
	padding-left: 0.75rem;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	border-left: 2px solid var(--wp--preset--color--rule);
}
.hbbb-toc__list a:hover,
.hbbb-toc__list a:focus-visible {
	color: var(--wp--preset--color--accent);
	border-left-color: var(--wp--preset--color--accent);
}
.hbbb-page-toc-col {
	display: none;
}
.hbbb-cols__right > .hbbb-page-toc-col {
	margin-bottom: var(--wp--preset--spacing--50);
}
/*
 * Narrow windows: the column version would land above the title, so a
 * collapsible copy under the title takes its place.
 */
.hbbb-toc--inline {
	padding: 0.6rem 0.9rem;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: min(var(--hbbb-radius-card), 12px);
}
.hbbb-toc--inline summary {
	margin: 0;
	cursor: pointer;
}
.hbbb-toc--inline[open] summary {
	margin-bottom: 0.6rem;
}
:target {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
}

.hbbb-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: var(--wp--preset--spacing--50);
}
.hbbb-share__label {
	margin: 0;
}
.hbbb-share__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.hbbb-share .wp-block-social-links {
	gap: 0.5rem;
	margin: 0;
	font-size: 0.85rem;
}
.hbbb-share .wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
}
.hbbb-share .wp-block-social-links .wp-social-link:hover {
	border-color: var(--wp--preset--color--ink);
	transform: none;
}
.hbbb-share__copy {
	padding: 0.45rem 0.9rem;
	font: inherit;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	cursor: pointer;
}
.hbbb-share__copy:hover {
	border-color: var(--wp--preset--color--ink);
}

.wp-block-comments {
	margin-top: var(--wp--preset--spacing--60);
}
.wp-block-comment-template {
	padding: 0;
	list-style: none;
}
.wp-block-comment-template li {
	margin: 0 0 var(--wp--preset--spacing--40);
}
.wp-block-comment-template ol {
	margin-top: var(--wp--preset--spacing--40);
	padding-left: clamp(1rem, 4vw, 3.5rem);
	border-left: 2px solid var(--wp--preset--color--rule);
	list-style: none;
}
.hbbb-comment {
	gap: 0.85rem;
}
.hbbb-comment .wp-block-avatar img {
	border-radius: 50%;
}
.hbbb-comment__body {
	flex: 1;
	min-width: 0;
}
.hbbb-comment__body > * {
	margin-block: 0;
}
.hbbb-comment__meta {
	gap: 0.25rem 0.75rem;
	font-size: var(--wp--preset--font-size--small);
}
.hbbb-comment__meta .wp-block-comment-author-name {
	font-weight: 700;
}
.hbbb-comment__meta .wp-block-comment-date {
	color: var(--wp--preset--color--muted);
}
.wp-block-comment-reply-link {
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Code
   ========================================================================== */

.hbbb-code-wrap {
	position: relative;
}
.wp-block-post-content pre:not(.wp-block-verse),
.hbbb-code {
	position: relative;
	overflow-x: auto;
	padding: 1rem 1.15rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.85em;
	line-height: 1.6;
	tab-size: 4;
	white-space: pre;
	color: #e9e5f0;
	background: #241d2f;
	border-radius: min(var(--hbbb-radius-card), 12px);
}
.hbbb-code code,
.wp-block-post-content pre code {
	font: inherit;
	color: inherit;
	background: none;
	white-space: inherit;
}
.hbbb-code-copy {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.25rem 0.6rem;
	font: 600 0.72rem/1.4 var(--wp--preset--font-family--body);
	color: #e9e5f0;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.75;
}
.hbbb-code-copy:hover,
.hbbb-code-copy:focus-visible {
	opacity: 1;
}
.hbbb-code[data-lang]::before {
	content: attr(data-lang);
	position: absolute;
	top: 0.55rem;
	right: 4.5rem;
	font: 0.65rem/1.4 var(--wp--preset--font-family--body);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(233, 229, 240, 0.5);
}
/* Prism tokens, tuned to the brand palette on the dark ink background. */
.hbbb-code .token.comment,
.hbbb-code .token.prolog,
.hbbb-code .token.doctype,
.hbbb-code .token.cdata {
	color: #9a90a8;
	font-style: italic;
}
.hbbb-code .token.punctuation,
.hbbb-code .token.operator {
	color: #c9c2d6;
}
.hbbb-code .token.keyword,
.hbbb-code .token.boolean,
.hbbb-code .token.important,
.hbbb-code .token.atrule {
	color: #ff8a7d;
}
.hbbb-code .token.string,
.hbbb-code .token.char,
.hbbb-code .token.attr-value,
.hbbb-code .token.regex {
	color: #f4c66b;
}
.hbbb-code .token.function,
.hbbb-code .token.class-name,
.hbbb-code .token.selector {
	color: #c6a2e0;
}
.hbbb-code .token.number,
.hbbb-code .token.constant,
.hbbb-code .token.symbol {
	color: #f7a35c;
}
.hbbb-code .token.variable,
.hbbb-code .token.property,
.hbbb-code .token.parameter,
.hbbb-code .token.attr-name,
.hbbb-code .token.tag {
	color: #8fd3c7;
}
.hbbb-code .token.builtin,
.hbbb-code .token.namespace {
	color: #9fc3ff;
}
/* Prism line-highlight plugin. */
.hbbb-code .line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	margin-top: 1rem;
	padding: inherit 0;
	pointer-events: none;
	line-height: inherit;
	white-space: pre;
	background: linear-gradient(to right, rgba(242, 179, 61, 0.18) 70%, rgba(242, 179, 61, 0));
	border-left: 3px solid var(--wp--preset--color--amber);
}
.hbbb-code .line-highlight::before,
.hbbb-code .line-highlight[data-end]::after {
	content: none;
}

/* ==========================================================================
   Header: drop-down menus and search
   ========================================================================== */

.hbbb-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 14rem;
	padding: 0.4rem 0;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: min(var(--hbbb-radius-card), 12px);
	box-shadow: 0 12px 32px rgba(43, 33, 56, 0.12);
}
.hbbb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 1rem;
}
.hbbb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--cream);
}
.hbbb-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--hbbb-gutter);
	color: var(--hbbb-header-text, var(--wp--preset--color--ink));
	background: var(--hbbb-header-bg, var(--wp--preset--color--paper));
}
.hbbb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	color: inherit;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 1rem;
}
.hbbb-header__search .wp-block-search__button {
	color: inherit;
	background: transparent;
}
.hbbb-header__search.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
	border: 0;
}

/* Footer menu column. */
.hbbb-footer__menu {
	gap: 0.35rem;
}
.hbbb-footer__menu .wp-block-navigation-item__content {
	padding: 0;
}

/* ==========================================================================
   Content from the classic editor and older plugins
   ========================================================================== */

.wp-block-post-content .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}
.wp-block-post-content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}
.wp-block-post-content .aligncenter {
	display: block;
	margin-inline: auto;
}
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}
.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}
@media (max-width: 600px) {
	.wp-block-post-content .alignleft,
	.wp-block-post-content .alignright {
		float: none;
		margin-inline: auto;
	}
}
.wp-caption {
	max-width: 100%;
}
.wp-caption-text,
.wp-block-image figcaption,
.gallery-caption {
	margin-top: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-align: center;
}
.gallery {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.gallery-item {
	margin: 0;
}
.gallery-item img {
	width: 100%;
	height: auto;
}
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-post-content :where(table) th,
.wp-block-post-content :where(table) td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border: 1px solid var(--wp--preset--color--rule);
}
.wp-block-post-content :where(table) th {
	background: var(--wp--preset--color--cream);
}
.wp-block-table {
	overflow-x: auto;
}
.wp-block-post-content blockquote:not(.wp-block-pullquote blockquote) {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-post-content :not(pre) > code {
	padding: 0.1em 0.35em;
	font-size: 0.9em;
	background: var(--wp--preset--color--cream);
	border-radius: 4px;
}
.wp-block-post-content iframe {
	max-width: 100%;
}
.wp-block-embed__wrapper iframe {
	width: 100%;
}

/*
 * Fixed-width columns holding one short paragraph (a row of links, say) were
 * sized for another theme's font: let them grow to fit instead of breaking words.
 */
@media (min-width: 782px) {
	.wp-block-column[style*="flex-basis"][style*="px"]:has(> p:only-child) {
		flex-shrink: 0;
		min-width: max-content;
	}
}

/* Old AMP plugin wrappers left in post content. */
amp-fit-text {
	display: contents;
}

/* CoBlocks leftovers, so the plugin can be removed. */
.coblocks-animate {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.wp-block-coblocks-gallery-masonry ul,
.wp-block-coblocks-gallery-masonry .coblocks-gallery {
	columns: 3 12rem;
	column-gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-coblocks-gallery-masonry li,
.wp-block-coblocks-gallery-masonry .coblocks-gallery--item {
	break-inside: avoid;
	margin: 0 0 0.75rem;
}
.wp-block-coblocks-gallery-masonry img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.wp-block-coblocks-shape-divider {
	position: relative;
	overflow: hidden;
	line-height: 0;
}
.wp-block-coblocks-shape-divider svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 6rem;
	fill: currentColor;
}
.wp-block-coblocks-shape-divider__alt-wrapper {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

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