/**
 * Harbor Coffee Roasters — Controls layer
 *
 * Buttons, form controls, focus states and the nav toggle. Depends on
 * assets/css/design-tokens.css for every colour, space and motion value.
 *
 * Accessibility contract for this layer:
 *   - Every interactive element keeps a :focus-visible outline of at least
 *     2px (3px here) with >= 3:1 contrast against both the element and the
 *     surface behind it. `outline: none` is never used without a replacement.
 *   - Buttons, inputs and tap targets are at least 44x44px on mobile.
 *   - Labels are always rendered; a placeholder is never the only label.
 *
 * Mobile-first: every media query is min-width only (600px / 900px / 1200px).
 */

/* ---------- Focus ring tokens ---------- */

:root {
	/* 3px ring, offset 2px: visible against cream, surface and dark bands. */
	--focus-ring-width: 3px;
	--focus-ring-offset: 2px;
	--focus-ring-color: var(--color-primary-700);
	--focus-ring-color-inverse: var(--color-accent-200);
	/* Dark ink reads >= 3:1 against copper AND against the cream page. */
	--focus-ring-color-on-primary: var(--color-neutral-900);

	--control-min-height: 44px;
	--control-padding-inline: var(--space-5);
	--control-border: var(--border-width) solid var(--color-neutral-300);
}

/* Global ring. base.css sets the default; these raise contrast on the
   surfaces where the copper ring would sit too close to its backdrop. */
:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.harbor-skip-link:focus,
.harbor-skip-link:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
	outline-offset: var(--focus-ring-offset);
}

/* Keep the ring clear of the element it belongs to on scrollable panels. */
:focus-visible {
	scroll-margin-block: var(--space-8);
}

/* The skip link must appear on plain :focus too — some browsers and most
   screen-reader "move to link" actions do not set :focus-visible. */
.harbor-skip-link:focus {
	transform: translateY(0);
}

/* ---------- Button system ---------- */

.btn,
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart,
.wpcf7-submit,
.gform_button,
.submit input[type="submit"],
input[type="submit"],
input[type="button"],
input[type="reset"],
button.submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--control-min-height);
	min-width: var(--control-min-height);
	padding: var(--space-3) var(--control-padding-inline);
	border: 2px solid transparent;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-600);
	color: var(--color-on-primary);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--letter-normal);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

/* Buttons are their own measure — never clipped by the prose max-width. */
.btn {
	max-width: 100%;
}

.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wpcf7-submit:hover,
.gform_button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background-color: var(--color-primary-700);
	color: var(--color-on-primary);
	box-shadow: var(--shadow-md);
}

.btn:active,
.wp-block-button__link:active,
.wp-element-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.wpcf7-submit:active,
.gform_button:active,
input[type="submit"]:active,
input[type="button"]:active {
	background-color: var(--color-primary-800);
	box-shadow: none;
	transform: translateY(1px);
}

.btn:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wpcf7-submit:focus-visible,
.gform_button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color-on-primary);
	outline-offset: var(--focus-ring-offset);
}

/* --- Primary (copper): the only conversion colour --- */

.btn--primary {
	background-color: var(--color-primary-600);
	border-color: var(--color-primary-600);
	color: var(--color-on-primary);
}

.btn--primary:hover {
	background-color: var(--color-primary-700);
	border-color: var(--color-primary-700);
}

.btn--primary:active {
	background-color: var(--color-primary-800);
	border-color: var(--color-primary-800);
}

/* --- Secondary (brown outline) --- */

.btn--secondary {
	background-color: transparent;
	border-color: var(--color-neutral-700);
	color: var(--color-neutral-800);
}

.btn--secondary:hover {
	background-color: var(--color-neutral-800);
	border-color: var(--color-neutral-800);
	color: var(--color-neutral-50);
	box-shadow: var(--shadow-md);
}

.btn--secondary:active {
	background-color: var(--color-neutral-900);
	border-color: var(--color-neutral-900);
	color: var(--color-neutral-50);
}

.btn--secondary:focus-visible {
	outline-color: var(--focus-ring-color);
}

/* --- Ghost / text link button --- */

.btn--ghost {
	min-height: var(--control-min-height);
	padding-inline: var(--space-3);
	border-color: transparent;
	border-radius: var(--radius-md);
	background-color: transparent;
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.btn--ghost:hover {
	background-color: var(--color-primary-50);
	color: var(--color-link-hover);
	box-shadow: none;
	text-decoration-thickness: 2px;
}

.btn--ghost:active {
	background-color: var(--color-primary-100);
	color: var(--color-primary-800);
}

.btn--ghost:focus-visible {
	outline-color: var(--focus-ring-color);
}

/* --- Variants on dark bands --- */

.section--dark .btn--secondary,
.site-footer .btn--secondary {
	border-color: var(--color-neutral-300);
	color: var(--color-neutral-50);
}

.section--dark .btn--secondary:hover,
.site-footer .btn--secondary:hover {
	background-color: var(--color-neutral-50);
	border-color: var(--color-neutral-50);
	color: var(--color-neutral-900);
}

.section--dark .btn--ghost,
.site-footer .btn--ghost {
	color: var(--color-accent-300);
}

.section--dark .btn--ghost:hover,
.site-footer .btn--ghost:hover {
	background-color: rgba(250, 250, 249, 0.1);
	color: var(--color-accent-200);
}

/* --- Sizes --- */

.btn--sm {
	min-height: var(--control-min-height);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
}

.btn--lg {
	min-height: 52px;
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-lg);
}

.btn--block {
	display: flex;
	width: 100%;
}

@media (min-width: 600px) {
	.btn--block {
		display: inline-flex;
		width: auto;
	}
}

/* --- Disabled / busy --- */

.btn[disabled],
.btn[aria-disabled="true"],
.btn--disabled,
.wp-block-button__link[disabled],
.wp-element-button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
.woocommerce button.button:disabled,
.woocommerce a.button.disabled {
	background-color: var(--color-neutral-200);
	border-color: var(--color-neutral-200);
	color: var(--color-neutral-500);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

/* A disabled control is still focusable when it is aria-disabled, so the
   ring must survive the disabled styling. */
.btn[aria-disabled="true"]:focus-visible {
	pointer-events: auto;
	outline-color: var(--focus-ring-color);
}

/* ---------- Button groups ---------- */

.btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

/* ---------- Form controls ---------- */

.harbor-form {
	display: grid;
	gap: var(--space-5);
	max-width: var(--container-narrow);
}

.form-field {
	display: grid;
	gap: var(--space-2);
}

/* Labels are always visible. A placeholder is a hint, never the label. */
.form-field__label,
.harbor-form label,
.comment-form label,
.woocommerce form .form-row label,
.wpcf7-form label {
	display: block;
	color: var(--color-neutral-800);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-normal);
	line-height: var(--leading-snug);
}

.form-field__required {
	color: var(--color-primary-700);
	font-weight: var(--weight-bold);
}

.form-field__hint {
	margin: 0;
	max-width: none;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="month"],
select,
textarea {
	display: block;
	width: 100%;
	min-height: var(--control-min-height);
	padding: var(--space-3) var(--space-4);
	border: var(--control-border);
	border-radius: var(--radius-md);
	background-color: var(--color-neutral-50);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

textarea {
	min-height: 8rem;
	line-height: var(--leading-normal);
	resize: vertical;
}

select {
	/* Room for the chevron drawn below. */
	padding-right: var(--space-10);
	background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-700) 50%),
		linear-gradient(135deg, var(--color-neutral-700) 50%, transparent 50%);
	background-position: calc(100% - 1.4rem) 50%, calc(100% - 1.05rem) 50%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

select[multiple] {
	padding-right: var(--space-4);
	background-image: none;
}

input::placeholder,
textarea::placeholder {
	color: var(--color-neutral-500);
	opacity: 1;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
select:hover,
textarea:hover {
	border-color: var(--color-neutral-500);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--color-primary-600);
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* Safari/Firefox fire :focus without :focus-visible on text fields, so give
   plain :focus the same ring rather than leaving it unstyled. Submit/button
   inputs are excluded — they keep the button ring defined above. */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
	border-color: var(--color-primary-600);
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
textarea[readonly] {
	border-color: var(--color-neutral-200);
	background-color: var(--color-neutral-100);
	color: var(--color-neutral-500);
	cursor: not-allowed;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.form-field--error input,
.form-field--error select,
.form-field--error textarea {
	border-color: var(--color-error);
	box-shadow: 0 0 0 1px var(--color-error);
}

/* --- Checkbox & radio: 44px tap row, 24px control --- */

.form-field--check,
.form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	min-height: var(--control-min-height);
	padding-block: var(--space-2);
}

.form-check label,
.form-field--check label {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	/* Centres the 24px box on the 44px row without shifting the label. */
	margin: 0.3rem 0 0;
	accent-color: var(--color-primary-600);
	cursor: pointer;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

input[type="file"],
input[type="range"] {
	min-height: var(--control-min-height);
	width: 100%;
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: var(--space-5);
	border: var(--control-border);
	border-radius: var(--radius-md);
}

legend {
	padding-inline: var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

/* --- Messages: error / success / info --- */

.form-message {
	display: flex;
	gap: var(--space-3);
	margin: 0;
	max-width: none;
	padding: var(--space-4) var(--space-5);
	border-left: var(--space-1) solid var(--color-neutral-400);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
}

.form-message--error,
.wpcf7-not-valid-tip,
.woocommerce-error {
	border-left-color: var(--color-error);
	background-color: #fdeceb;
	color: #8a1b16;
}

.form-message--success,
.woocommerce-message {
	border-left-color: var(--color-success);
	background-color: #eaf7ee;
	color: #11592c;
}

.form-message--info,
.woocommerce-info {
	border-left-color: var(--color-info);
	background-color: #ebf1fd;
	color: #1b3f8a;
}

/* Inline per-field error text, announced next to its control. */
.form-field__error {
	margin: 0;
	max-width: none;
	color: #8a1b16;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

/* --- Core search / comment / post-password forms --- */

.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: stretch;
	border: 0;
}

.search-form label,
.wp-block-search__label {
	flex: 1 1 100%;
}

.search-form input[type="search"],
.wp-block-search__input {
	flex: 1 1 12rem;
	min-width: 0;
}

.comment-form {
	display: grid;
	gap: var(--space-5);
	max-width: var(--container-narrow);
}

.comment-form p {
	margin: 0;
	max-width: none;
}

/* ---------- Nav toggle (mobile menu button) ---------- */

.site-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: var(--control-min-height);
	height: var(--control-min-height);
	min-height: var(--control-min-height);
	padding: 0;
	border: var(--border-width) solid var(--color-neutral-300);
	border-radius: var(--radius-md);
	background-color: transparent;
	color: var(--color-neutral-800);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

.site-nav__toggle:hover {
	background-color: var(--color-surface);
	border-color: var(--color-neutral-500);
}

.site-nav__toggle:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: var(--radius-full);
	background-color: currentColor;
	content: "";
}

.site-nav__toggle-bars {
	position: relative;
}

.site-nav__toggle-bars::before {
	position: absolute;
	top: -6px;
}

.site-nav__toggle-bars::after {
	position: absolute;
	top: 6px;
}

/* Progressive enhancement: the menu only collapses once nav-toggle.js has
   marked the header as ready. Without JS the links stay visible, so the nav
   can never become unreachable. The collapsed state is driven by the
   button's own aria-expanded, which keeps markup and styling in step. */
.site-header[data-nav-js="ready"] .site-nav__toggle {
	display: inline-flex;
}

.site-header[data-nav-js="ready"] .site-nav {
	display: none;
}

.site-header[data-nav-js="ready"] .site-nav__toggle[aria-expanded="true"] + .site-nav {
	display: block;
	flex-basis: 100%;
	padding-top: var(--space-2);
	border-top: var(--border-width) solid var(--color-border);
}

.site-header[data-nav-js="ready"] .site-nav .site-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.site-header[data-nav-js="ready"] .site-nav .site-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--control-min-height);
	padding-inline: var(--space-2);
	border-bottom: var(--border-width) solid var(--color-border);
}

/* Above the mobile breakpoint the inline nav is always shown and the toggle
   is hidden — the two are never visible at the same time. */
@media (min-width: 900px) {
	.site-header[data-nav-js="ready"] .site-nav__toggle {
		display: none;
	}

	.site-header[data-nav-js="ready"] .site-nav,
	.site-header[data-nav-js="ready"] .site-nav__toggle[aria-expanded="true"] + .site-nav {
		display: block;
		flex-basis: auto;
		padding-top: 0;
		border-top: 0;
	}

	.site-header[data-nav-js="ready"] .site-nav .site-nav__list {
		flex-direction: row;
		align-items: center;
		gap: var(--space-3) var(--space-5);
	}

	.site-header[data-nav-js="ready"] .site-nav .site-nav__list a {
		display: inline-block;
		min-height: 0;
		padding-inline: 0;
		border-bottom: 2px solid transparent;
	}
}

/* Without JS (and on every phone-width menu row) nav links still get a
   comfortable 44px tap target. */
@media (max-width: 599px) {
	.site-nav a {
		display: inline-flex;
		align-items: center;
		min-height: var(--control-min-height);
	}
}

/* ---------- Pagination & post-link tap targets ---------- */

.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.pagination .page-numbers,
.post-navigation .nav-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-min-height);
	min-height: var(--control-min-height);
	padding-inline: var(--space-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.pagination a.page-numbers:hover,
.post-navigation .nav-links a:hover {
	border-color: var(--color-primary-600);
	color: var(--color-primary-700);
}

.pagination .page-numbers.current {
	background-color: var(--color-primary-600);
	border-color: var(--color-primary-600);
	color: var(--color-on-primary);
}

/* Card action row: the ghost button sits flush with the card's text. */
.post-card__actions {
	margin: var(--space-1) 0 0;
	max-width: none;
}

.post-card__actions .btn--ghost {
	padding-inline: 0;
}

/* ---------- Core button block alignment helpers ---------- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	list-style: none;
	padding: 0;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background-color: transparent;
	border-color: var(--color-neutral-700);
	color: var(--color-neutral-800);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
	background-color: var(--color-neutral-800);
	border-color: var(--color-neutral-800);
	color: var(--color-neutral-50);
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.wp-block-button__link,
	.wp-element-button,
	.site-nav__toggle,
	input,
	select,
	textarea {
		transition: none;
	}

	.btn:active {
		transform: none;
	}
}