/*
 * Harvest Bakery — component styles theme.json cannot express.
 *
 * Values come from theme.json presets (--wp--preset--*) and custom tokens
 * (--wp--custom--*); nothing here introduces a new colour or size. Short
 * aliases keep the rules readable.
 */

:root {
	--hb-navy: var(--wp--preset--color--navy);
	--hb-navy-900: var(--wp--preset--color--navy-900);
	--hb-navy-100: var(--wp--preset--color--navy-100);
	--hb-harbor: var(--wp--preset--color--harbor);
	--hb-harbor-700: var(--wp--preset--color--harbor-700);
	--hb-harbor-100: var(--wp--preset--color--harbor-100);
	--hb-slate: var(--wp--preset--color--slate);
	--hb-muted: var(--wp--preset--color--slate-400);
	--hb-slate-300: var(--wp--preset--color--slate-300);
	--hb-mist: var(--wp--preset--color--mist);
	--hb-mist-200: var(--wp--preset--color--mist-200);
	--hb-cloud: var(--wp--preset--color--cloud);
	--hb-white: var(--wp--preset--color--white);
	--hb-green: var(--wp--preset--color--green);
	--hb-green-700: var(--wp--preset--color--green-700);
	--hb-green-100: var(--wp--preset--color--green-100);
	--hb-border-strong: var(--wp--preset--color--border-strong);
	--hb-danger: var(--wp--preset--color--danger);
	--hb-danger-100: var(--wp--preset--color--danger-100);
	--hb-warning: var(--wp--preset--color--warning);
	--hb-warning-100: var(--wp--preset--color--warning-100);
	--hb-field-border: var(--wp--custom--color--field-border);
	--hb-border-inverse: var(--wp--custom--color--border-inverse);
	--hb-focus-ring: var(--wp--custom--color--focus-ring);
	--hb-font-display: var(--wp--preset--font-family--display);
	--hb-font-sans: var(--wp--preset--font-family--sans);
	--hb-fast: var(--wp--custom--duration--fast);
	--hb-base: var(--wp--custom--duration--base);
	--hb-ease: var(--wp--custom--ease--standard);
	--hb-transition-color: color var(--hb-fast) var(--hb-ease), background-color var(--hb-fast) var(--hb-ease), border-color var(--hb-fast) var(--hb-ease);
	--hb-radius-xs: var(--wp--custom--radius--xs);
	--hb-radius-sm: var(--wp--custom--radius--sm);
	--hb-radius-md: var(--wp--custom--radius--md);
	--hb-radius-lg: var(--wp--custom--radius--lg);
	--hb-control: var(--wp--custom--control--height);
	--hb-control-sm: var(--wp--custom--control--height-sm);
	--hb-control-lg: var(--wp--custom--control--height-lg);
	--hb-shadow-sm: var(--wp--preset--shadow--sm);
	--hb-shadow-md: var(--wp--preset--shadow--md);
	--hb-shadow-lg: var(--wp--preset--shadow--lg);
}

/* ── Base ───────────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }
body { text-wrap: pretty; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: var(--hb-harbor-100); color: var(--hb-navy); }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--hb-transition-color); }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--hb-harbor);
	outline-offset: 2px;
}
/* On navy (hero, navy bands, footer) the harbor ring disappears; a white one shows. */
:where(.hb-hero, .hb-band.is-navy, .hb-footer, body.home .hb-header:not(.is-solid):not(:has(.harvest-mega-menu.is-open))) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--hb-white);
}

hr, .wp-block-separator { border: 0; border-top: 1px solid var(--hb-mist); margin: 32px 0; opacity: 1; }

.is-style-display {
	font: 700 52px/1.15 var(--hb-font-display);
}

/* ── Labels: the 12px uppercase eyebrow / form label / table head ── */

.is-style-label,
.is-style-eyebrow,
.hb-label {
	font: 600 12px/1.2 var(--hb-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hb-navy);
}

/* Eyebrow = label plus the 40×2 rule beneath it (SectionLabel). */
.is-style-eyebrow {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}
.is-style-eyebrow::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--hb-border-strong);
}
.is-style-eyebrow.has-green-color::after { background: var(--hb-green); }
.is-style-eyebrow.has-white-color,
.is-style-label.has-white-color { color: rgba(255, 255, 255, 0.75) !important; }
.is-style-eyebrow.has-white-color::after { background: rgba(255, 255, 255, 0.35); }

/* ── Buttons ────────────────────────────────────────────────── */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--hb-control);
	box-sizing: border-box;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--hb-transition-color), transform var(--hb-fast) var(--hb-ease);
}
.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(1px); }

/* Sizes (add class is-size-sm / is-size-lg to the Button block). */
.wp-block-button.is-size-sm .wp-block-button__link,
.hb-button.is-size-sm {
	min-height: var(--hb-control-sm);
	padding: 0 16px;
	font-size: 12px;
}
.wp-block-button.is-size-lg .wp-block-button__link,
.hb-button.is-size-lg {
	min-height: var(--hb-control-lg);
	padding: 0 32px;
	font-size: 16px;
}

/* Variants (block styles registered in inc/block-styles.php). */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: var(--hb-white);
	color: var(--hb-harbor);
	border-color: var(--hb-harbor);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover { background: var(--hb-harbor-100); color: var(--hb-harbor); border-color: var(--hb-harbor); }

.wp-block-button.is-style-navy .wp-block-button__link {
	background: var(--hb-navy);
	color: var(--hb-white);
	border-color: var(--hb-navy);
}
.wp-block-button.is-style-navy .wp-block-button__link:hover { background: var(--hb-navy-900); border-color: var(--hb-navy-900); color: var(--hb-white); }

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--hb-harbor);
	border-color: transparent;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--hb-harbor-100); color: var(--hb-harbor); border-color: transparent; }

.wp-block-button.is-style-on-dark .wp-block-button__link {
	background: transparent;
	color: var(--hb-white);
	border-color: var(--hb-border-inverse);
}
.wp-block-button.is-style-on-dark .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); color: var(--hb-white); }

/* Same variants for buttons rendered by harvest-core blocks (class="wp-element-button hb-button is-…"). */
.hb-button.is-secondary { background: var(--hb-white); color: var(--hb-harbor); border-color: var(--hb-harbor); }
.hb-button.is-secondary:hover { background: var(--hb-harbor-100); color: var(--hb-harbor); }
.hb-button.is-navy { background: var(--hb-navy); color: var(--hb-white); border-color: var(--hb-navy); }
.hb-button.is-navy:hover { background: var(--hb-navy-900); border-color: var(--hb-navy-900); }
.hb-button.is-on-dark { background: transparent; color: var(--hb-white); border-color: var(--hb-border-inverse); }
.hb-button.is-on-dark:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }

.wp-element-button[disabled],
.wp-element-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Badges ─────────────────────────────────────────────────── */

.hb-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--hb-radius-xs);
	font: 600 12px/1.2 var(--hb-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--hb-mist-200);
	color: var(--hb-slate);
}
.hb-badge.is-navy { background: var(--hb-navy-100); color: var(--hb-navy); }
.hb-badge.is-info { background: var(--hb-harbor-100); color: var(--hb-harbor-700); }
.hb-badge.is-green { background: var(--hb-green-100); color: var(--hb-green-700); }
.hb-badge.is-warning { background: var(--hb-warning-100); color: var(--hb-warning); }
.hb-badge.is-danger { background: var(--hb-danger-100); color: var(--hb-danger); }
.hb-badge.is-solid { background: var(--hb-green); color: var(--hb-white); }

/* ── Form controls ──────────────────────────────────────────── */

.hb-field { display: flex; flex-direction: column; gap: 8px; }
.hb-field > label,
.hb-field > .hb-field__label {
	font: 600 12px/1.2 var(--hb-font-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hb-navy);
}
.hb-field .hb-required { color: var(--hb-danger); margin-left: 4px; }
.hb-field__hint { font-size: 15px; color: var(--hb-muted); }
.hb-field__error { font-size: 15px; color: var(--hb-danger); }

:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="search"], input[type="number"], input[type="password"], input[type="date"],
	select, textarea
) {
	width: 100%;
	box-sizing: border-box;
	height: var(--hb-control);
	padding: 0 12px;
	font: 400 16px/1.55 var(--hb-font-sans);
	color: var(--hb-slate);
	background: var(--hb-white);
	border: 1px solid var(--hb-field-border);
	border-radius: var(--hb-radius-md);
	transition: var(--hb-transition-color), box-shadow var(--hb-fast) var(--hb-ease);
}
:where(input, select, textarea)::placeholder { color: var(--hb-muted); opacity: 1; }
:where(input, select, textarea):focus,
:where(input, select, textarea):focus-visible {
	border-color: var(--hb-harbor);
	box-shadow: var(--hb-focus-ring);
	outline: none;
}
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--hb-danger); }
:where(input, select, textarea):disabled { background: var(--hb-mist-200); color: var(--hb-muted); }

:where(textarea) { height: auto; padding: 12px; resize: vertical; }

:where(select) {
	appearance: none;
	padding-right: 36px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%231B3A5C' d='M0 0h10L5 7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--hb-navy);
	flex: 0 0 auto;
}
.hb-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }

/* Switch: a real checkbox with role="switch", drawn as a 40×22 track. */
.hb-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.hb-switch input {
	appearance: none;
	position: relative;
	width: 40px;
	height: 22px;
	margin: 0;
	border-radius: 999px;
	background: var(--hb-border-strong);
	transition: background-color var(--hb-base) var(--hb-ease);
	cursor: inherit;
}
.hb-switch input::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--hb-white);
	box-shadow: var(--hb-shadow-sm);
	transition: left var(--hb-base) var(--hb-ease);
}
.hb-switch input:checked { background: var(--hb-navy); }
.hb-switch input:checked::after { left: 21px; }

/* ── Card ───────────────────────────────────────────────────── */

.hb-card,
.is-style-card {
	background: var(--hb-white);
	border: 1px solid var(--hb-mist);
	border-radius: var(--hb-radius-lg);
	box-shadow: var(--hb-shadow-sm);
	transition: box-shadow var(--hb-base) var(--hb-ease), border-color var(--hb-base) var(--hb-ease);
}
.hb-card.is-interactive:hover,
a.hb-card:hover { box-shadow: var(--hb-shadow-md); border-color: var(--hb-border-strong); }

/* ── Alert (the only component with a left accent bar) ────────── */

.hb-alert {
	display: flex;
	gap: 16px;
	background: var(--hb-harbor-100);
	border-left: 3px solid var(--hb-harbor);
	border-radius: var(--hb-radius-sm);
	padding: 16px 20px;
	font-size: 15px;
}
.hb-alert__title { font: 600 16px/1.4 var(--hb-font-sans); color: var(--hb-navy); margin-bottom: 4px; }
.hb-alert.is-warning { background: var(--hb-warning-100); border-color: var(--hb-warning); }
.hb-alert.is-warning .hb-alert__title { color: var(--hb-warning); }
.hb-alert.is-danger { background: var(--hb-danger-100); border-color: var(--hb-danger); }
.hb-alert.is-danger .hb-alert__title { color: var(--hb-danger); }
.hb-alert.is-success { background: var(--hb-green-100); border-color: var(--hb-green); }
.hb-alert.is-success .hb-alert__title { color: var(--hb-green-700); }

/* ── Breadcrumb ─────────────────────────────────────────────── */

.hb-breadcrumb,
.wp-block-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 15px;
}
.hb-breadcrumb [aria-current="page"] { color: var(--hb-muted); }
.hb-breadcrumb .hb-breadcrumb__sep { color: var(--hb-slate-300); }

/* ── Motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}