/*
Theme Name: Barefoot Habitat
Theme URI: https://barefootdesign.co
Author: Barefoot Sustainable Design
Description: Editorial block theme for Barefoot Sustainable Design — passive buildings in hempcrete, strawbale, bamboo and rammed earth. Built from the Barefoot Habitat design system: warm paper neutrals, forest green, clay accent, Spectral and Archivo.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barefoot-habitat
Tags: block-patterns, full-site-editing, editor-style, custom-colors, custom-menu, featured-images, portfolio, blog
*/

/* --------------------------------------------------------------------------
   Element defaults the design system sets that theme.json cannot express.
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--clay-200);
	color: var(--wp--preset--color--ink-0);
}

/* Carried over from the design system's base.css. Without it the raw <img> elements inside
   the theme's wp:html blocks render at intrinsic width and overflow the viewport. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where([tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--clay-500);
	outline-offset: 2px;
}

.bh-prose p {
	max-width: var(--wp--custom--measure--prose);
}

/* --------------------------------------------------------------------------
   Brand utilities
   -------------------------------------------------------------------------- */

.bh-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	margin-bottom: var(--wp--preset--spacing--50);
}

.bh-hand {
	font-family: var(--wp--preset--font-family--hand);
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--clay-600);
	line-height: 1.4;
}

/* A constrained container centres every child on its own max-width, so a 66ch paragraph ends
   up indented relative to the full-width heading above it. Re-align it to the same 1240px
   column edge: the offset collapses to 0 whenever the container is narrower than the column.
   WP writes its centring as `margin-inline: auto !important`, so this has to match it. */
.bh-lead,
.bh-muted,
.bh-footer-ack {
	margin-left: max(0px, (100% - 1240px) / 2) !important;
	margin-right: auto !important;
}
.bh-lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--leading--snug);
	color: var(--wp--preset--color--ink-1);
	max-width: var(--wp--custom--measure--prose);
}

.bh-muted {
	color: var(--wp--preset--color--ink-2);
	max-width: var(--wp--custom--measure--prose);
}

.bh-light-heading :where(h1, h2, h3) {
	font-weight: 300;
	letter-spacing: var(--wp--custom--tracking--display);
}

.bh-tabular {
	font-variant-numeric: tabular-nums;
}

/* Section rule that sits above a heading block. */
.bh-topline {
	border-top: 1px solid var(--wp--custom--line--rule);
	padding-top: var(--wp--preset--spacing--70);
}

/* --------------------------------------------------------------------------
   Dark editorial scope — full-bleed image sections, CTA band and footer.
   -------------------------------------------------------------------------- */

.bh-dark {
	color: rgba(246, 242, 233, 0.86);
}

.bh-dark :where(h1, h2, h3, h4, h5) {
	color: var(--wp--preset--color--paper-1);
}

.bh-dark .bh-eyebrow {
	color: rgba(246, 242, 233, 0.46);
}

.bh-dark .bh-muted,
.bh-dark :where(p) {
	color: rgba(246, 242, 233, 0.72);
}

.bh-dark :where(a) {
	color: var(--wp--preset--color--paper-1);
}

.bh-dark :where(a):hover {
	color: var(--wp--preset--color--bamboo);
}

.bh-dark .bh-topline,
.bh-dark .bh-divider {
	border-color: var(--wp--custom--line--inverse);
}

.bh-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--paper-1);
	color: var(--wp--preset--color--forest-900);
}

.bh-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--paper-0);
}

.bh-dark .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--paper-1);
	border-color: rgba(246, 242, 233, 0.4);
}

.bh-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--paper-1);
	background-color: transparent;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.bh-header {
	position: relative;
	z-index: 40;
	min-height: var(--wp--custom--header-height);
	background-color: var(--wp--preset--color--forest-900);
}

/* Outline artwork needs size to stay legible — 52px keeps the design's 76px header height
   once the reduced vertical padding is counted. */
.bh-header .wp-block-site-logo img {
	height: 52px;
	width: auto;
}

.bh-header .wp-block-navigation {
	color: rgba(246, 242, 233, 0.82);
}

.bh-header .wp-block-navigation a {
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
	text-decoration: none;
}

.bh-header .wp-block-navigation a:hover,
.bh-header .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--paper-0);
	border-bottom-color: var(--wp--preset--color--paper-0);
}

/* On the front page the header floats over the hero image. */
.home .bh-header {
	position: absolute;
	inset: 0 0 auto 0;
	background-color: transparent;
}

.bh-header .wp-block-button__link {
	background-color: transparent;
	border: 1px solid rgba(246, 242, 233, 0.45);
	color: var(--wp--preset--color--paper-1);
	padding: 9px 18px;
}

.bh-header .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--paper-1);
	color: var(--wp--preset--color--forest-900);
	border-color: var(--wp--preset--color--paper-1);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.bh-hero {
	min-height: 78vh;
}

/* Top stop is heavier than the design system's scrim-image-soft: the header logo and nav
   sit over it, and the hero photograph is bright sky at exactly that height. */
.bh-hero.wp-block-cover .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(20, 38, 28, 0.52) 0%, rgba(20, 38, 28, 0.08) 42%, rgba(20, 38, 28, 0.58) 100%);
	opacity: 1;
}

.bh-hero .bh-hero-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--display-2);
	line-height: var(--wp--custom--leading--display);
	letter-spacing: var(--wp--custom--tracking--display);
	color: var(--wp--preset--color--paper-0);
	max-width: 12ch;
}

.bh-hero .bh-hero-lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--leading--snug);
	color: rgba(252, 250, 245, 0.88);
	max-width: var(--wp--custom--measure--lead);
}

.bh-hero .bh-eyebrow {
	color: rgba(252, 250, 245, 0.78);
}

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */

/* WP gives every `is-layout-flow` container a `> * + * { margin-block-start }` rule. Inside a
   CSS grid that stacks on top of the grid gap and knocks later cells out of alignment, so the
   theme's own grids opt out of it. */
.bh-stats > * + *,
.bh-stat > * + *,
.bh-card-grid-3 > * + *,
.bh-card-grid-4 > * + *,
.bh-material > * + *,
.bh-project-card > * + *,
.bh-post-row > * + * {
	margin-block-start: 0;
}

.bh-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--90);
}

.bh-stat {
	border-top: 1px solid var(--wp--custom--line--inverse);
	padding-top: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.bh-stat-figure {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--heading-1);
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
	color: var(--wp--preset--color--paper-0);
	font-variant-numeric: tabular-nums;
}

.bh-stat-label {
	font-size: var(--wp--preset--font-size--caption);
	color: rgba(246, 242, 233, 0.66);
	line-height: var(--wp--custom--leading--snug);
}

/* --------------------------------------------------------------------------
   Material / project / post cards
   -------------------------------------------------------------------------- */

.bh-card-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--70);
}

.bh-card-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--80);
}

.bh-material {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.bh-material-media {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--linen);
}

.bh-material-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-material-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	color: var(--wp--preset--color--forest-900);
}

.bh-material-note {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-2);
}

/* Query-loop project cards */
.bh-project-card {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.bh-project-card .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--linen);
	margin-bottom: var(--wp--preset--spacing--40);
}

.bh-project-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--duration--image) var(--wp--custom--ease--out);
}

.bh-project-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.bh-project-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	margin: 0;
}

.bh-project-card .wp-block-post-title a {
	border-bottom: 0;
	text-decoration: none;
	color: var(--wp--preset--color--forest-900);
}

.bh-project-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--clay-600);
}

.bh-project-meta {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.bh-project-materials {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-2);
}

.bh-project-materials a {
	border-bottom: 0;
	color: inherit;
	text-decoration: none;
}

.bh-project-materials a:hover {
	color: var(--wp--preset--color--clay-600);
}

/* Journal rows */
.bh-post-row {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	gap: var(--wp--preset--spacing--80);
	align-items: start;
	padding: var(--wp--preset--spacing--70) 0;
	border-top: 1px solid var(--wp--custom--line--rule);
}

.bh-post-row .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--linen);
	margin: 0;
}

.bh-post-row .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-post-row .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.bh-post-row .wp-block-post-title a {
	border-bottom: 0;
	text-decoration: none;
	color: var(--wp--preset--color--forest-900);
}

.bh-post-row .wp-block-post-title a:hover {
	color: var(--wp--preset--color--clay-600);
}

.bh-post-row .wp-block-post-excerpt {
	color: var(--wp--preset--color--ink-2);
	font-size: var(--wp--preset--font-size--body-sm);
}

.bh-post-row .wp-block-post-date {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-3);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Tags, spec lists, figures
   -------------------------------------------------------------------------- */

.bh-tag,
.bh-taglist a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--custom--line--hairline);
	text-decoration: none;
}

.bh-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.bh-taglist a:hover {
	background: var(--wp--preset--color--forest-100);
	color: var(--wp--preset--color--forest-700);
}

.bh-specs {
	display: grid;
	gap: 0;
	margin: 0;
}

.bh-specs > div {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--custom--line--hairline);
	font-size: var(--wp--preset--font-size--body-sm);
}

.bh-specs dt {
	color: var(--wp--preset--color--ink-3);
}

.bh-specs dd {
	margin: 0;
	text-align: right;
	color: var(--wp--preset--color--ink-1);
	font-variant-numeric: tabular-nums;
}

.bh-figure figcaption {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-3);
}

.bh-figure-drawing img {
	background: var(--wp--preset--color--paper-0);
	border: 1px solid var(--wp--custom--line--hairline);
}

/* --------------------------------------------------------------------------
   Accordion (details/summary — no JavaScript)
   -------------------------------------------------------------------------- */

.bh-accordion details {
	border-top: 1px solid var(--wp--custom--line--rule);
}

.bh-accordion details:last-child {
	border-bottom: 1px solid var(--wp--custom--line--rule);
}

.bh-accordion summary {
	cursor: pointer;
	list-style: none;
	padding: var(--wp--preset--spacing--60) 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	color: var(--wp--preset--color--forest-900);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.bh-accordion summary::-webkit-details-marker {
	display: none;
}

.bh-accordion summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--heading-4);
	color: var(--wp--preset--color--clay-500);
	line-height: 1;
	transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
}

.bh-accordion details[open] summary::after {
	transform: rotate(45deg);
}

.bh-accordion details > p {
	margin: 0 0 var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--ink-2);
	max-width: var(--wp--custom--measure--prose);
}

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

.bh-pullquote {
	border-left: 2px solid var(--wp--preset--color--clay-500);
	padding-left: var(--wp--preset--spacing--80);
}

.bh-pullquote p {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: var(--wp--custom--leading--snug);
	color: var(--wp--preset--color--forest-900);
	margin: 0 0 var(--wp--preset--spacing--60);
}

.bh-pullquote cite {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	font-style: normal;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.bh-form label {
	display: block;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-2);
	margin-bottom: var(--wp--preset--spacing--30);
}

.bh-form input[type="text"],
.bh-form input[type="email"],
.bh-form input[type="tel"],
.bh-form select,
.bh-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink-1);
	background: var(--wp--preset--color--paper-0);
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--custom--radius--control);
	padding: 11px 14px;
}

.bh-form .bh-field-hint {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-3);
}

.bh-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
}

.bh-form button[type="submit"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	background: var(--wp--preset--color--forest-700);
	color: var(--wp--preset--color--paper-0);
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	padding: 16px 28px;
	cursor: pointer;
}

.bh-form button[type="submit"]:hover {
	background: var(--wp--preset--color--forest-800);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.bh-footer .wp-block-site-logo img {
	height: 64px;
	width: auto;
}

/* Constrained layout would centre this once max-width kicks in; the design keeps it on the
   left margin with the rest of the footer. */
.bh-footer-ack {
	font-size: var(--wp--preset--font-size--caption);
	color: rgba(246, 242, 233, 0.52);
	max-width: 70ch;
}

.bh-divider {
	border: 0;
	border-top: 1px solid var(--wp--custom--line--rule);
	height: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive — the design system is specified at 1440px; these are the
   collapse points that keep it honest on tablet and phone.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.bh-stats,
	.bh-card-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.bh-card-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.bh-post-row {
		grid-template-columns: 160px 1fr;
	}

	.bh-post-row .wp-block-post-date {
		grid-column: 2;
	}
}

@media (max-width: 782px) {
	.bh-stats,
	.bh-card-grid-4,
	.bh-card-grid-3,
	.bh-form-grid {
		grid-template-columns: 1fr;
	}

	.bh-post-row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.bh-hero {
		min-height: 62vh;
	}

	.bh-pullquote {
		padding-left: var(--wp--preset--spacing--60);
	}

	.home .bh-header {
		position: relative;
		background-color: var(--wp--preset--color--forest-900);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bh-project-card .wp-block-post-featured-image img,
	.bh-accordion summary::after {
		transition: none;
	}

	.bh-project-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* Footer link columns render as plain stacked links, not bullets. */
.bh-footer ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	line-height: 2;
}

.bh-footer ul a {
	border-bottom: 0;
	text-decoration: none;
	color: rgba(246, 242, 233, 0.78);
}

.bh-footer ul a:hover {
	color: var(--wp--preset--color--bamboo);
}

/* Category eyebrows and breadcrumbs are links; the design draws them as plain labels. */
.bh-eyebrow a,
.wp-block-post-terms.bh-eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}

.bh-eyebrow a:hover,
.wp-block-post-terms.bh-eyebrow a:hover {
	color: var(--wp--preset--color--clay-600);
}

/* Top-level sections and full-bleed bands butt directly against each other — their own
   padding does the spacing. Without this, WP's 16px block gap paints a strip of page
   background above the hero, between every band, and above the footer. */
.wp-site-blocks > * + *,
main > .alignfull + .alignfull,
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* The logo is outline artwork: serve it from a source several times the display size or the
   strokes merge into a dark smudge. The block requests 320px; this caps how tall it draws. */
.bh-header .wp-block-site-logo img,
.bh-footer .wp-block-site-logo img {
	width: auto;
	max-width: none;
}