/* hawaagri build 124 */
/* ==========================================================================
   Hawa Agri — header & footer
   ========================================================================== */

/* ---------- Header ---------- */

/* The template-part wrapper is the sticky element: a sticky child cannot move
   inside a parent that is exactly its own height. */
header.wp-block-template-part {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
}

.ha-header {
	position: relative;
	background: var(--wp--preset--color--surface);
	transition: box-shadow .25s ease;
}

.ha-header.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,.12); }

/* Clear the WP admin bar (fixed only from 783px up). */
@media screen and (min-width: 783px) {
	body.admin-bar header.wp-block-template-part { top: 32px; }
}

.ha-header,
.ha-header > * {
	margin: 0;
}

.ha-topbar { padding-block: 6px; }
.ha-topbar__inner { gap: 24px; }
.ha-topbar__link { margin: 0; }
.ha-topbar__link a { color: #fff; text-decoration: none; opacity: .9; }
.ha-topbar__link a:hover { color: #fff; opacity: 1; text-decoration: underline; }

.ha-header__main {
	padding-block: 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: border-color .25s ease;
}

.ha-header__row { gap: 24px; }

.ha-logo { margin: 0; flex: 0 0 auto; }
.ha-logo img { display: block; height: auto; max-width: 190px; }

/* Navigation */

.ha-nav { flex: 1 1 auto; justify-content: center; }
.ha-nav .wp-block-navigation__container { gap: 26px; }

.ha-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-green);
	font-family: Ubuntu, sans-serif;
	font-weight: 400;
	font-size: 15.68px;
	line-height: 1.9;
	letter-spacing: normal;
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
}

.ha-nav .wp-block-navigation-item__content:hover,
.ha-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-green-dark);
}

.ha-nav .wp-block-navigation__submenu-container {
	min-width: 260px;
	padding: 8px 0;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	box-shadow: 0 12px 28px rgba(0,0,0,.1);
}

.ha-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 18px;
	font-weight: 500;
	white-space: normal;
}

.ha-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: var(--wp--preset--color--surface-alt);
}

/* CTA */

.ha-header__cta { flex: 0 0 auto; margin: 0; }
.ha-btn-catalog .wp-block-button__link { white-space: nowrap; }

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

.ha-footer__main { padding-block: 40px 28px; }
.ha-footer__cols { gap: 32px; }

.ha-footer__title {
	margin: 0 0 18px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.ha-footer__sub { gap: 16px; margin-bottom: 0; }

.ha-footer__list { margin: 0; padding: 0; list-style: none; }
.ha-footer__list li { margin-bottom: 0; line-height: 1.2; }

.ha-footer__list a {
	display: inline-block;
	color: #9AA1A9;
	font-size: .9375rem;
	text-decoration: none;
}

.ha-footer__list a:hover { color: var(--wp--preset--color--brand-green); }

.ha-footer__contact {
	margin: 0;
	color: #9AA1A9;
	font-size: .875rem;
	line-height: 1.9;
}

.ha-footer__contact a { color: #9AA1A9; text-decoration: none; }
.ha-footer__contact a:hover { color: var(--wp--preset--color--brand-green); }

/* Bottom bar */

.ha-footer__bottom {
	padding-block: 18px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.ha-footer__bottom-row { gap: 16px 28px; }
.ha-footer__copy { margin: 0; color: #9AA1A9; font-size: .875rem; }
.ha-footer__legal { gap: 22px; }
.ha-footer__legal p { margin: 0; }
.ha-footer__legal a { color: #9AA1A9; font-size: .875rem; text-decoration: none; }
.ha-footer__legal a:hover { color: var(--wp--preset--color--brand-green); text-decoration: underline; }

/* Outlined social icons */

.ha-footer__social { gap: 10px; margin: 0; }

.ha-footer__social .wp-social-link {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid #69727D;
	border-radius: 50%;
	transition: background-color .2s ease;
}

/* the anchor must fill the circle, otherwise most of it is not clickable */
.ha-footer__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 50%;
}

.ha-footer__social .wp-social-link svg { width: 17px; height: 17px; }

.ha-footer__social .wp-social-link,
.ha-footer__social .wp-social-link a,
.ha-footer__social .wp-social-link svg { color: #ABABAB !important; fill: #ABABAB !important; }

.ha-footer__social .wp-social-link:hover {
	background-color: var(--wp--preset--color--brand-green);
	border-color: var(--wp--preset--color--brand-green);
}

.ha-footer__social .wp-social-link:hover a,
.ha-footer__social .wp-social-link:hover svg { color: #fff !important; fill: #fff !important; }

.ha-footer__social .wp-social-link a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green);
	outline-offset: 3px;
}

/* Dark green strip */

.ha-footer {
	padding: 0;
}

.ha-footer__main,
.ha-footer__bottom {
	padding-inline: 2.375em;
}

.ha-footer__strip {
	height: 80px;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: none;
}

@media (max-width: 600px) {
	.ha-footer__main,
	.ha-footer__bottom { padding-inline: 20px; }
	.ha-footer__strip { height: 56px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
	.ha-nav .wp-block-navigation__container { gap: 16px; }
	.ha-nav .wp-block-navigation-item__content { font-size: 14px; }
}

@media (max-width: 900px) {
	.ha-header__row { flex-wrap: wrap; gap: 12px; }
	.ha-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
	.ha-footer__cols { flex-wrap: wrap; }
	.ha-footer__col { flex-basis: 100% !important; }
}

@media (max-width: 600px) {
	.ha-footer__sub { flex-wrap: wrap; }
	.ha-footer__sub > .wp-block-column { flex-basis: 100% !important; }
	.ha-footer__bottom-row { justify-content: flex-start; }
}

/* ---------- Header tools ---------- */

.ha-header__tools { flex: 0 0 auto; margin-left: auto; }

.ha-header__search { margin: 0; display: flex; }

.ha-header__search a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--brand-green);
	border-radius: 50%;
	color: var(--wp--preset--color--brand-green);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.ha-header__search a:hover {
	background: var(--wp--preset--color--brand-green);
	color: #fff;
}

/* Hide WooCommerce-injected header icons */
.ha-header .wc-block-mini-cart,
.ha-header .wp-block-woocommerce-customer-account,
.ha-header .wp-block-woocommerce-mini-cart { display: none !important; }

.ha-nav { flex: 0 1 auto; justify-content: flex-start; margin-left: 40px; }

/* Footer column widths tuned to live */
.ha-footer__col--contact { padding-left: 20px; }
.ha-footer__title { font-size: 1.0625rem; margin-bottom: 22px; }

/* Live typography & metrics */
.ha-footer, .ha-header { font-family: Ubuntu, sans-serif; }

.ha-footer__list a {
	font-size: 14px;
	line-height: 25px;
	white-space: normal;
}

.ha-footer__list li { margin-bottom: 6px; }

.ha-footer__title {
	font-size: 17px;
	font-weight: 700;
	color: #333333;
	margin-bottom: 14px;
}

.ha-footer__contact {
	font-size: 14px;
	line-height: 25px;
}

.ha-footer__main { padding-block: 34px 22px; }
.ha-footer__cols { gap: 0; }
.ha-footer__sub { gap: 0; }
.ha-footer__copy,
.ha-footer__legal a { font-size: 14px; }
.ha-footer__bottom { padding-block: 14px; }

@media (max-width: 1100px) {
	.ha-footer__list a { line-height: 1.6; }
	.ha-footer__list li { margin-bottom: 10px; }
}

/* ==========================================================================
   Search popup (replaces the old /?s= link)
   ========================================================================== */

.ha-header__tools { flex: 0 0 auto; margin-left: auto; }

.ha-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--brand-green);
	border-radius: 50%;
	color: var(--wp--preset--color--brand-green);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.ha-search-toggle:hover,
.ha-search-toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--brand-green);
	color: #fff;
}

.ha-search-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green-dark);
	outline-offset: 3px;
}

.ha-search-popup {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(23, 67, 52, .94);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.ha-search-popup[hidden] { display: flex; }

.ha-search-popup.is-open {
	opacity: 1;
	visibility: visible;
}

.ha-search-popup__wrap {
	position: relative;
	width: 100%;
	max-width: 680px;
}

.ha-search-popup__close {
	position: absolute;
	top: -64px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.ha-search-popup__close:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

.ha-search-popup__form {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 2px solid rgba(255, 255, 255, .55);
	padding-bottom: 10px;
}

.ha-search-popup__field {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	color: #fff;
	font-family: Ubuntu, sans-serif;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 300;
	padding: 4px 0;
}

.ha-search-popup__field::placeholder { color: rgba(255, 255, 255, .6); }

.ha-search-popup__submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	opacity: .85;
}

.ha-search-popup__submit:hover { opacity: 1; }

body.ha-search-open { overflow: hidden; }

/* ==========================================================================
   Back to top
   ========================================================================== */

.ha-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--wp--preset--color--brand-green);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background-color .2s ease;
}

.ha-scroll-top[hidden] { display: flex; }

.ha-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ha-scroll-top:hover { background: var(--wp--preset--color--brand-green-dark); }

.ha-scroll-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green-dark);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.ha-scroll-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

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

@media (prefers-reduced-motion: reduce) {
	.ha-header,
	.ha-search-popup,
	.ha-scroll-top { transition: none; }
}

/* Matching-category chips on the search results page */

.ha-search-cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
}

.ha-search-cats__label {
	color: #6B7280;
	font-size: 14px;
}

.ha-search-cats__link {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--brand-green);
	border-radius: 999px;
	color: var(--wp--preset--color--brand-green);
	font-size: 14px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.ha-search-cats__link:hover {
	background: var(--wp--preset--color--brand-green);
	color: #fff;
}

/* ---------- Live search results ---------- */

/* White focus ring inside the dark overlay (the theme-wide green ring is
   invisible against the green backdrop). */
.ha-search-popup input:focus-visible,
.ha-search-popup button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Chrome's native clear button is invisible on the dark backdrop. */
.ha-search-popup__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.ha-search-popup__results {
	max-height: min(48vh, 420px);
	margin-top: 14px;
	overflow-y: auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.ha-search-popup__results.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ha-search-popup__group {
	margin: 0;
	padding: 12px 18px 6px;
	color: #9AA1A9;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ha-search-popup__result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 18px;
	color: var(--wp--preset--color--text);
	font-size: 15px;
	text-decoration: none;
}

.ha-search-popup__result:hover,
.ha-search-popup__result.is-active {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand-green);
}

.ha-search-popup__result img,
.ha-search-popup__thumb-ph {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--wp--preset--color--surface-alt);
}

.ha-search-popup__result--cat {
	justify-content: space-between;
	font-weight: 500;
}

.ha-search-popup__result--cat small {
	color: #9AA1A9;
	font-size: 13px;
}

.ha-search-popup__empty {
	margin: 0;
	padding: 20px 18px;
	color: #6B7280;
	font-size: 15px;
	text-align: center;
}

.ha-search-popup__all {
	display: block;
	padding: 13px 18px;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--brand-green);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
}

.ha-search-popup__all:hover,
.ha-search-popup__all.is-active {
	background: var(--wp--preset--color--surface-alt);
}

/* ==========================================================================
   Transparent-over-hero header (matches hawaagri.com)
   --------------------------------------------------------------------------
   At the very top of a page that opens with a hero, the header sits over the
   hero with a white logo, white nav and white search icon. As soon as the
   page scrolls, .is-stuck restores the solid white bar with green type.
   The body class is added by header.js only when a hero is actually present,
   so pages with a light first section keep the solid header.
   ========================================================================== */

body.ha-header-transparent .wp-site-blocks > main {
	margin-top: calc(-1 * var(--ha-header-main-h, 0px));
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-header__main {
	background-color: transparent !important;
	box-shadow: none;
	/* The 1px bottom rule reads as a white line drawn across the hero. It only
	   belongs to the solid bar, so it is dropped while the header is over the
	   hero and fades back in with the rest of the swap. */
	border-bottom-color: transparent;
}

body.ha-header-transparent .ha-header:not(.is-stuck) {
	background: transparent;
}

/* Nav + top-bar links */
body.ha-header-transparent .ha-header:not(.is-stuck) .wp-block-navigation-item__content {
	color: #fff;
}

body.ha-header-transparent .ha-header:not(.is-stuck) .wp-block-navigation-item__content:hover,
body.ha-header-transparent .ha-header:not(.is-stuck) .current-menu-item > .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, .78);
}

body.ha-header-transparent .ha-header:not(.is-stuck) .wp-block-navigation__submenu-icon {
	color: #fff;
	fill: #fff;
}

/* Logo: the theme ships one green logo, so invert it rather than shipping a
   second asset. brightness(0) flattens it to black, invert(1) to pure white.

   The resting state declares the same two functions at their identity values.
   CSS only interpolates filter lists function-for-function, so going to or
   from `none` snaps or dips through a dark frame; matching the lists makes the
   white -> green swap a true fade. */
.ha-header .ha-logo img,
.ha-header .wp-block-site-logo img {
	filter: brightness(1) invert(0);
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-logo img,
body.ha-header-transparent .ha-header:not(.is-stuck) .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* Search toggle */
body.ha-header-transparent .ha-header:not(.is-stuck) .ha-search-toggle {
	color: #fff;
	border-color: rgba(255, 255, 255, .9);
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-search-toggle:hover {
	background: rgba(255, 255, 255, .16);
}

/* Mobile burger */
body.ha-header-transparent .ha-header:not(.is-stuck) .wp-block-navigation__responsive-container-open {
	color: #fff;
}

/* Smooth the swap both ways. */
.ha-header .ha-header__main,
.ha-header .wp-block-navigation-item__content,
.ha-header .ha-search-toggle,
.ha-header .ha-logo img,
.ha-header .wp-block-site-logo img {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, filter .3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ha-header .ha-header__main,
	.ha-header .wp-block-navigation-item__content,
	.ha-header .ha-search-toggle,
	.ha-header .wp-block-site-logo img { transition: none; }
}

/* ==========================================================================
   Exact match to hawaagri.com header (measured from live)
   --------------------------------------------------------------------------
   Core ships
     .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
     { color: inherit }
   with the class deliberately doubled (0,3,0) so it beats theme rules. Every
   nav colour below is written at (0,4,0) to win cleanly.
   ========================================================================== */

/* ---------- Top bar: 42px, #2C6E35, links 14px/500 ---------- */

.ha-header .ha-topbar {
	padding-top: 0;
	padding-bottom: 0;
}

.ha-header .ha-topbar__inner {
	max-width: 1230px;
	min-height: 42px;
	margin-inline: auto;
	align-items: center;
	gap: 32px;
}

.ha-header .ha-topbar__link,
.ha-header .ha-topbar__link a {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
}

.ha-header .ha-topbar__link a:hover {
	opacity: .8;
}

/* ---------- Main bar: 87px tall, 1230px container ---------- */

.ha-header .ha-header__main {
	padding-top: 0;
	padding-bottom: 0;
}

.ha-header .ha-header__row {
	max-width: 1230px;
	min-height: 87px;
	margin-inline: auto;
	gap: 24px;
}

/* ---------- Logo: 216 x 56 ---------- */

.ha-header .ha-logo,
.ha-header .wp-block-site-logo {
	width: 216px;
}

.ha-header .ha-logo img,
.ha-header .wp-block-site-logo img {
	width: 216px;
	height: auto;
}

/* ---------- Nav: Ubuntu 16px / 400 / #2C6E35, padding 7px 16px ---------- */

.ha-header .ha-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-family: Ubuntu, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.875;
	letter-spacing: normal;
	text-transform: capitalize;
	padding: 7px 16px;
	color: var(--wp--preset--color--brand-green);
}

.ha-header .ha-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.ha-header .ha-nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-green-dark);
}

/* Spacing comes from the link padding on live, so zero the flex gap. */
.ha-header .ha-nav .wp-block-navigation__container {
	gap: 0;
}

.ha-header .ha-nav .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--brand-green);
	fill: currentColor;
}

/* Submenus keep readable dark type on their white panel. */
.ha-header .ha-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: 15px;
	padding: 8px 16px;
	color: var(--wp--preset--color--text);
}

.ha-header .ha-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-green);
}

/* ---------- Search: 43px ring, 1.5px border, 20px glyph ---------- */

.ha-header .ha-search-toggle {
	width: 43px;
	height: 43px;
	border-width: 1.5px;
	border-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--brand-green);
}

.ha-header .ha-search-toggle svg {
	width: 20px;
	height: 20px;
}

/* ---------- Transparent state overrides (also at 0,4,0) ---------- */

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #fff;
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav .wp-block-navigation__submenu-icon {
	color: #fff;
}

/* ---------- Small screens ---------- */

@media (max-width: 1100px) {
	.ha-header .ha-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		font-size: 15px;
		padding: 7px 11px;
	}
}

@media (max-width: 781px) {
	.ha-header .ha-logo,
	.ha-header .ha-logo img,
	.ha-header .wp-block-site-logo,
	.ha-header .wp-block-site-logo img { width: 168px; }

	.ha-header .ha-header__row { min-height: 68px; }
	.ha-header .ha-topbar__inner { min-height: 36px; gap: 20px; }
}

/* ---------- Row layout: logo, nav beside it, search hard right ----------
   Live does NOT centre the nav. It sits just after the logo (~75px gap) and
   the search icon is pushed to the container edge. */

.ha-header .ha-header__row {
	justify-content: flex-start;
	gap: 56px;
}

.ha-header .ha-nav {
	margin-right: auto;
	flex: 0 1 auto;
}

.ha-header .ha-nav .wp-block-navigation__container {
	justify-content: flex-start;
}

.ha-header .ha-header__tools {
	margin-left: 0;
}

/* The site-logo block prints its own width, so this needs to outrank it. */
.ha-header .ha-logo,
.ha-header .wp-block-site-logo,
.ha-header .ha-logo img,
.ha-header .wp-block-site-logo img {
	width: 216px !important;
	max-width: 216px !important;
	height: auto !important;
}

@media (max-width: 1100px) {
	.ha-header .ha-header__row { gap: 28px; }
}

@media (max-width: 781px) {
	.ha-header .ha-logo,
	.ha-header .wp-block-site-logo,
	.ha-header .ha-logo img,
	.ha-header .wp-block-site-logo img {
		width: 168px !important;
		max-width: 168px !important;
	}
}

/* ---------- Pull header content further in from the edges ---------- */

.ha-header .ha-topbar,
.ha-header .ha-header__main {
	padding-inline: clamp(24px, 5vw, 96px);
}

.ha-header .ha-topbar__inner,
.ha-header .ha-header__row {
	max-width: 1230px;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.ha-header .ha-topbar,
	.ha-header .ha-header__main {
		padding-inline: 20px;
	}
}

/* ---------- Top-bar links: exact live rendering ----------
   Staging was dimming these to opacity .9 (white over green reads greenish)
   and using subpixel smoothing, which makes light-on-dark type look heavier.
   Live uses full white with antialiased smoothing. */

.ha-header .ha-topbar__link,
.ha-header .ha-topbar__link a {
	opacity: 1;
	color: #fff;
	line-height: 26.6px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ha-header .ha-topbar__link a:hover {
	opacity: .8;
}

/* ==========================================================================
   MOBILE REFINEMENTS
   --------------------------------------------------------------------------
   These come last so they outrank the desktop rules added above, several of
   which (.ha-header .ha-header__row, .ha-header .ha-nav) carry (0,2,0) and
   were leaking past the older single-class mobile rules.
   ========================================================================== */

/* ---------- Tablet: 782px - 1024px ---------- */

@media (max-width: 1024px) {
	.ha-header .ha-header__row { gap: 24px; }

	.ha-header .ha-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		font-size: 14px;
		padding: 7px 10px;
	}

	.ha-header .ha-logo,
	.ha-header .wp-block-site-logo,
	.ha-header .ha-logo img,
	.ha-header .wp-block-site-logo img {
		width: 180px !important;
		max-width: 180px !important;
	}
}

/* ---------- Mobile: up to 781px ---------- */

@media (max-width: 781px) {

	/* --- Header shell --- */

	.ha-header .ha-topbar,
	.ha-header .ha-header__main { padding-inline: 20px; }

	.ha-header .ha-topbar__inner {
		min-height: 38px;
		gap: 20px;
		justify-content: flex-end;
	}

	.ha-header .ha-topbar__link,
	.ha-header .ha-topbar__link a {
		font-size: 13px;
		line-height: 20px;
	}

	.ha-header .ha-header__row {
		min-height: 64px;
		gap: 12px;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	/* Logo must not squash the burger + search off the row. */
	.ha-header .ha-logo,
	.ha-header .wp-block-site-logo,
	.ha-header .ha-logo img,
	.ha-header .wp-block-site-logo img {
		width: 150px !important;
		max-width: 150px !important;
	}

	/* Nav collapses to the burger — stop it claiming a row of its own. */
	.ha-header .ha-nav {
		order: 0;
		flex: 0 0 auto;
		flex-basis: auto;
		margin-right: 0;
		margin-left: auto;
	}

	.ha-header .ha-header__tools { margin-left: 0; }

	/* Burger button */
	.ha-header .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		color: var(--wp--preset--color--brand-green);
	}

	.ha-header .wp-block-navigation__responsive-container-open svg {
		width: 26px;
		height: 26px;
		fill: currentColor;
	}

	body.ha-header-transparent .ha-header:not(.is-stuck) .wp-block-navigation__responsive-container-open {
		color: #fff;
	}

	/* Search sits left of the burger, slightly smaller */
	.ha-header .ha-search-toggle {
		width: 38px;
		height: 38px;
	}

	.ha-header .ha-search-toggle svg { width: 18px; height: 18px; }

	/* --- Overlay menu --- */

	.ha-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 24px 20px 40px;
		background-color: var(--wp--preset--color--surface);
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		font-size: 17px;
		padding: 10px 0;
		color: var(--wp--preset--color--brand-green);
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
		font-size: 15px;
		padding: 7px 0 7px 14px;
		color: var(--wp--preset--color--text);
	}

	.ha-header .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--brand-green);
	}

	/* --- Search popup --- */

	.ha-search-popup { padding: 20px; align-items: flex-start; padding-top: 90px; }
	.ha-search-popup__close { top: -56px; right: -4px; width: 40px; height: 40px; }
	.ha-search-popup__field { font-size: 1.15rem; }
	.ha-search-popup__results { max-height: 56vh; }
	.ha-search-popup__result { padding: 10px 14px; font-size: 14px; }
	.ha-search-popup__result img,
	.ha-search-popup__thumb-ph { width: 34px; height: 34px; }

	/* --- Footer --- */

	.ha-footer__main { padding-block: 32px 20px; }
	.ha-footer__main,
	.ha-footer__bottom { padding-inline: 20px; }

	/* Stack the three top-level columns */
	.ha-footer__cols {
		flex-wrap: wrap;
		gap: 28px;
	}

	.ha-footer__col {
		flex-basis: 100% !important;
		width: 100%;
	}

	/* Keep Quick Links / Products as two readable sub-columns */
	.ha-footer__sub {
		flex-wrap: nowrap;
		gap: 16px;
	}

	.ha-footer__sub > .wp-block-column {
		flex-basis: 50% !important;
		min-width: 0;
	}

	.ha-footer__title {
		margin-bottom: 12px;
		font-size: .9375rem;
	}

	.ha-footer__list a { font-size: 13.5px; line-height: 22px; }
	.ha-footer__list li { margin-bottom: 8px; }
	.ha-footer__contact { font-size: 13.5px; line-height: 22px; }

	/* Bottom bar: stack, centred, socials last */
	.ha-footer__bottom { padding-block: 18px; }

	.ha-footer__bottom-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		text-align: center;
	}

	.ha-footer__legal {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 18px;
	}

	.ha-footer__copy,
	.ha-footer__legal a { font-size: 13px; }

	.ha-footer__social { justify-content: center; gap: 12px; }

	/* Bigger tap targets than desktop's 34px */
	.ha-footer__social .wp-social-link { width: 38px; height: 38px; }
	.ha-footer__social .wp-social-link svg { width: 18px; height: 18px; }

	.ha-footer__strip { height: 56px; }

	/* Back-to-top must not cover the social row */
	.ha-scroll-top { right: 16px; bottom: 76px; }
}

/* ---------- Small phones: up to 400px ---------- */

@media (max-width: 400px) {
	.ha-header .ha-topbar,
	.ha-header .ha-header__main { padding-inline: 16px; }

	.ha-header .ha-topbar__inner { gap: 14px; }
	.ha-header .ha-topbar__link,
	.ha-header .ha-topbar__link a { font-size: 12px; }

	.ha-header .ha-logo,
	.ha-header .wp-block-site-logo,
	.ha-header .ha-logo img,
	.ha-header .wp-block-site-logo img {
		width: 130px !important;
		max-width: 130px !important;
	}

	.ha-header .ha-search-toggle { width: 34px; height: 34px; }
	.ha-header .ha-search-toggle svg { width: 16px; height: 16px; }
	.ha-header .wp-block-navigation__responsive-container-open { width: 36px; height: 36px; }

	.ha-footer__main,
	.ha-footer__bottom { padding-inline: 16px; }

	/* Below this width two sub-columns get too cramped */
	.ha-footer__sub { flex-wrap: wrap; gap: 0; }
	.ha-footer__sub > .wp-block-column { flex-basis: 100% !important; }

	.ha-footer__strip { height: 44px; }
}

/* ==========================================================================
   FOOTER LINK COLUMNS — grid rebuild
   --------------------------------------------------------------------------
   The sub-columns were flex children with percentage bases, so long labels
   ("Agro pharmacy and Protective textiles") pushed into the next column and
   the two lists never shared a baseline. A grid with equal tracks and a real
   column-gap fixes the collision and keeps every link left-aligned.
   ========================================================================== */

.ha-footer__cols {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.ha-footer__col { min-width: 0; }

.ha-footer__sub {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 36px;
	row-gap: 0;
	margin-bottom: 0;
}

.ha-footer__sub > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
	margin: 0;
}

.ha-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ha-footer__list li {
	margin: 0;
	line-height: inherit;
}

.ha-footer__list a {
	display: inline-block;
	color: #9AA1A9;
	font-size: 14px;
	line-height: 22px;
	text-decoration: none;
	transition: color .18s ease, transform .18s ease;
}

.ha-footer__list a:hover {
	color: var(--wp--preset--color--brand-green);
	transform: translateX(3px);
}

.ha-footer__title {
	margin: 0 0 20px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
}

.ha-footer__col--contact .ha-footer__contact {
	font-size: 14px;
	line-height: 25px;
}

/* Products column holds the longest labels — give it room to breathe. */
.ha-footer__col:nth-child(2) .ha-footer__sub { column-gap: 28px; }

@media (max-width: 1024px) {
	.ha-footer__cols { gap: 28px; }
	.ha-footer__sub { column-gap: 24px; }
	.ha-footer__list a { font-size: 13.5px; }
}

@media (max-width: 781px) {
	.ha-footer__cols { flex-wrap: wrap; gap: 30px; }
	.ha-footer__col { flex-basis: 100% !important; width: 100%; }
	.ha-footer__sub { column-gap: 20px; row-gap: 10px; }
	.ha-footer__list { gap: 10px; }
	.ha-footer__title { margin-bottom: 14px; }
}

@media (max-width: 420px) {
	.ha-footer__sub { grid-template-columns: minmax(0, 1fr); }
	.ha-footer__sub > .wp-block-column + .wp-block-column { margin-top: 10px; }
}

/* ==========================================================================
   MOBILE DRAWER MENU
   ========================================================================== */

@media (max-width: 781px) {

	/* --- Burger: three animated bars, replaces the core SVG --- */

	.ha-header .wp-block-navigation__responsive-container-open {
		position: relative;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--brand-green);
	}

	.ha-header .wp-block-navigation__responsive-container-open svg { display: none; }

	.ha-header .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 24px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
	}

	body.ha-header-transparent .ha-header:not(.is-stuck) .wp-block-navigation__responsive-container-open {
		color: #fff;
	}

	/* --- Drawer --- */

	.ha-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		flex-direction: column;
		padding: 0;
		background: var(--wp--preset--color--surface);
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		margin: 0;
		overflow: hidden;
	}

	/* Green header strip inside the drawer */
	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: static;
		align-self: flex-end;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 12px 14px 0 0;
		background: var(--wp--preset--color--brand-green);
		border-radius: 50%;
		color: #fff;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 22px;
		height: 22px;
		fill: currentColor;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex: 1 1 auto;
		gap: 0;
		padding: 18px 22px 40px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
		border-bottom: 0;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 15px 0;
		font-size: 17px;
		font-weight: 500;
		color: var(--wp--preset--color--brand-green);
	}

	/* --- Accordion submenus (toggled by header.js) --- */

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-rows: 0fr;
		gap: 0;
		padding: 0;
		margin: 0;
		border: 0;
		background: transparent;
		opacity: 0;
		overflow: hidden;
		transition: grid-template-rows .28s ease, opacity .22s ease;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .has-child.ha-open > .wp-block-navigation__submenu-container {
		grid-template-rows: 1fr;
		opacity: 1;
		padding-bottom: 10px;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
		min-height: 0;
		border: 0;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
		padding: 9px 0 9px 16px;
		font-size: 15px;
		font-weight: 400;
		color: #6B7280;
		border-left: 2px solid var(--wp--preset--color--border);
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--brand-green);
		border-left-color: var(--wp--preset--color--brand-green);
	}

	/* Chevron rotates when open */
	.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		position: absolute;
		right: 0;
		top: 18px;
		padding: 0;
		color: var(--wp--preset--color--brand-green);
		transition: transform .25s ease;
	}

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .has-child { position: relative; }

	.ha-header .wp-block-navigation__responsive-container.is-menu-open .has-child.ha-open > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
	.ha-header .wp-block-navigation__responsive-container.is-menu-open .has-child.ha-open > .wp-block-navigation__submenu-icon {
		transform: rotate(180deg);
	}

	/* --- Drawer footer: contact + socials --- */

	.ha-drawer-extras {
		flex: 0 0 auto;
		padding: 18px 22px 26px;
		border-top: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--surface-alt);
	}

	.ha-drawer-extras a {
		display: block;
		color: var(--wp--preset--color--brand-green);
		font-size: 15px;
		font-weight: 500;
		text-decoration: none;
		margin-bottom: 8px;
	}

	.ha-drawer-extras__meta {
		margin: 12px 0 0;
		color: #6B7280;
		font-size: 13px;
		line-height: 20px;
	}

	@media (prefers-reduced-motion: reduce) {
		.ha-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container,
		.ha-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { transition: none; }
	}
}

body.ha-drawer-open { overflow: hidden; }

/* ==========================================================================
   MOBILE OFF-CANVAS MENU (matches hawaagri.com) — mobile only
   ========================================================================== */

.ha-mobile-menu__head { display: none; }

@media (max-width: 781px) {

	.ha-header .ha-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0;
		background-color: #fff;
	}

	.ha-header .ha-nav .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	/* --- Panel head: logo + "main menu" --- */

	.ha-mobile-menu__head {
		display: block;
		flex: 0 0 auto;
		padding: 20px 20px 0;
	}

	.ha-mobile-menu__logo {
		display: inline-block;
		line-height: 0;
	}

	.ha-mobile-menu__logo img {
		width: 168px;
		height: auto;
	}

	.ha-mobile-menu__label {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 20px 0 0;
		padding: 12px 0;
		border-block: 1px solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--brand-green);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: .06em;
		text-transform: uppercase;
	}

	.ha-mobile-menu__label::before {
		content: "";
		width: 18px;
		height: 12px;
		background:
			linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
	}

	/* --- Close button --- */

	.ha-header .ha-nav .wp-block-navigation__responsive-container-close {
		top: 22px;
		right: 18px;
		width: 40px;
		height: 40px;
		color: var(--wp--preset--color--brand-green);
	}

	/* --- Menu list --- */

	.ha-header .ha-nav .is-menu-open .wp-block-navigation__container {
		flex: 1 1 auto;
		display: block;
		gap: 0;
		padding: 4px 20px 40px;
		overflow-y: auto;
	}

	.ha-header .ha-nav .is-menu-open .wp-block-navigation-item {
		position: relative;
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.ha-header .ha-nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: block;
		padding: 15px 44px 15px 0;
		font-size: 16px;
		font-weight: 500;
		color: var(--wp--preset--color--brand-green);
	}

	/* Core prints its own chevron; ours replaces it. */
	.ha-header .ha-nav .is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	.ha-mobile-menu__toggle {
		position: absolute;
		top: 6px;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--brand-green);
		cursor: pointer;
		transition: transform .22s ease;
	}

	.ha-header .ha-nav .is-menu-open .has-child.ha-is-open > .ha-mobile-menu__toggle {
		transform: rotate(180deg);
	}

	/* --- Submenu accordion --- */

	.ha-header .ha-nav .is-menu-open .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-rows: 0fr;
		width: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		opacity: 0;
		visibility: hidden;
		transition: grid-template-rows .26s ease, opacity .26s ease, visibility .26s ease;
	}

	.ha-header .ha-nav .is-menu-open .wp-block-navigation__submenu-container > * {
		min-height: 0;
	}

	.ha-header .ha-nav .is-menu-open .has-child.ha-is-open > .wp-block-navigation__submenu-container {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
	}

	.ha-header .ha-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	.ha-header .ha-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
		padding: 9px 0 9px 16px;
		font-size: 14.5px;
		font-weight: 400;
		color: var(--wp--preset--color--text);
	}

	.ha-header .ha-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--brand-green);
	}

	/* Last item shouldn't leave a dangling rule above the fold. */
	.ha-header .ha-nav .is-menu-open > .wp-block-navigation__responsive-dialog .wp-block-navigation__container > .wp-block-navigation-item:last-child {
		border-bottom: 0;
	}
}

/* ==========================================================================
   FOOTER COLUMN ALIGNMENT
   Grid instead of flex columns so every link column starts on the same
   vertical line and rows share a baseline.
   ========================================================================== */

.ha-footer__cols {
	display: grid;
	grid-template-columns: 31% 47% 22%;
	gap: 32px 40px;
	align-items: start;

	/* Centre the footer content instead of letting it hug the left edge. */
	max-width: 1230px;
	margin-left: auto;
	margin-right: auto;
}

.ha-footer__cols > .ha-footer__col {
	flex-basis: auto !important;
	margin: 0;
	min-width: 0;
}

.ha-footer__sub {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
	align-items: start;
	margin: 0;
}

.ha-footer__sub > .wp-block-column {
	flex-basis: auto !important;
	margin: 0;
	min-width: 0;
}

.ha-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One shared rhythm across every column, so rows line up even when a label
   wraps to a second line. */
.ha-footer__list li {
	margin: 0;
	min-height: 31px;
	display: flex;
	align-items: flex-start;
}

.ha-footer__list a {
	display: block;
	padding-block: 3px;
}

.ha-footer__title {
	min-height: 24px;
}

@media (max-width: 900px) {
	.ha-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 28px 24px;
	}

	.ha-footer__col--contact { grid-column: 1 / -1; }
}

@media (max-width: 781px) {
	.ha-footer__cols {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ha-footer__col--contact { grid-column: auto; }

	.ha-footer__list li { min-height: 0; }
	.ha-footer__list a { padding-block: 4px; }
}

@media (max-width: 400px) {
	.ha-footer__sub { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HARD-CODED NAVIGATION
   Replaces core/navigation, which was pulling its items from a wp_navigation
   post in the database instead of the template file. Everything below is
   self-contained: desktop bar + mobile off-canvas panel.
   ========================================================================== */

.ha-nav {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	margin-right: auto;
}

.ha-nav__open,
.ha-nav__close,
.ha-nav__backdrop { display: none; }

.ha-nav__head { display: none; }

.ha-menu {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ha-menu__item {
	position: relative;
	list-style: none;
}

.ha-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	font-family: Ubuntu, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.875;
	color: var(--wp--preset--color--brand-green);
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
}

.ha-menu__link:hover,
.ha-menu__item:hover > .ha-menu__link {
	color: var(--wp--preset--color--brand-green-dark);
}

/* Desktop chevron sits inside the row, not as a separate button */
.ha-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: -12px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--brand-green);
	cursor: pointer;
	pointer-events: none;
}

/* --- Desktop dropdown --- */

.ha-submenu {
	position: absolute;
	top: 100%;
	left: 8px;
	z-index: 60;
	min-width: 250px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(0, 14, 40, .1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.ha-menu__item--parent:hover > .ha-submenu,
.ha-menu__item--parent:focus-within > .ha-submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ha-submenu li { list-style: none; }

.ha-submenu a {
	display: block;
	padding: 8px 18px;
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	white-space: nowrap;
}

.ha-submenu a:hover {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand-green);
}

/* --- Transparent-header state --- */

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-menu__link,
body.ha-header-transparent .ha-header:not(.is-stuck) .ha-menu__toggle {
	color: #fff;
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-submenu a {
	color: var(--wp--preset--color--text);
}

/* --- Narrower desktops --- */

@media (max-width: 1100px) {
	.ha-menu__link { font-size: 14px; padding: 7px 10px; }
}

/* ==========================================================================
   MOBILE OFF-CANVAS PANEL
   ========================================================================== */

@media (max-width: 781px) {

	.ha-nav { margin-left: auto; margin-right: 0; }

	/* Burger */
	.ha-nav__open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--brand-green);
		cursor: pointer;
	}

	.ha-nav__bars,
	.ha-nav__bars::before,
	.ha-nav__bars::after {
		display: block;
		width: 24px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	.ha-nav__bars {
		position: relative;
	}

	.ha-nav__bars::before,
	.ha-nav__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.ha-nav__bars::before { top: -7px; }
	.ha-nav__bars::after { top: 7px; }

	body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__open { color: #fff; }

	/* Panel */
	.ha-nav__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99997;
		width: min(86vw, 360px);
		padding: 22px 22px 40px;
		background: #fff;
		box-shadow: -8px 0 34px rgba(0, 0, 0, .16);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(102%);
		transition: transform .3s ease;
	}

	.ha-nav__panel.is-open { transform: none; }

	.ha-nav__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99996;
		background: rgba(23, 67, 52, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
	}

	.ha-nav__backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}

	body.ha-menu-open { overflow: hidden; }

	/* Panel head */
	.ha-nav__head { display: block; }

	.ha-nav__logo { display: inline-block; line-height: 0; }
	.ha-nav__logo img { width: 160px; height: auto; }
	.ha-nav__logo img[src=""] { display: none; }

	.ha-nav__label {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 18px 0 4px;
		padding: 11px 0;
		border-block: 1px solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--brand-green);
		font-size: 12.5px;
		font-weight: 500;
		letter-spacing: .07em;
		text-transform: uppercase;
	}

	.ha-nav__label::before {
		content: "";
		width: 17px;
		height: 11px;
		background:
			linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
	}

	.ha-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 18px;
		right: 16px;
		width: 38px;
		height: 38px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--brand-green);
		cursor: pointer;
	}

	/* Menu list */
	.ha-menu {
		display: block;
		width: 100%;
	}

	.ha-menu__item {
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.ha-menu__item:last-child { border-bottom: 0; }

	.ha-menu__link {
		display: block;
		padding: 14px 44px 14px 0;
		font-size: 16px;
		font-weight: 500;
		white-space: normal;
	}

	.ha-menu__toggle {
		position: absolute;
		top: 8px;
		right: 0;
		width: 40px;
		height: 40px;
		margin: 0;
		pointer-events: auto;
		transition: transform .24s ease;
	}

	.ha-menu__item--parent.is-open > .ha-menu__toggle { transform: rotate(180deg); }

	/* Transparent-header pages (home): the white link colour is meant for the
	   desktop nav sitting over the hero. Inside the off-canvas panel the
	   background is #fff, so restore the normal colour there. */
	body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .ha-menu__link,
	body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .ha-menu__toggle {
		color: var(--wp--preset--color--brand-green);
	}

	/* Submenu accordion */
	.ha-submenu {
		position: static;
		display: grid;
		grid-template-rows: 0fr;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		overflow: hidden;
		transition: grid-template-rows .28s ease, padding .28s ease;
	}

	.ha-submenu > * { min-height: 0; }

	.ha-menu__item--parent.is-open > .ha-submenu {
		grid-template-rows: 1fr;
		padding-bottom: 10px;
	}

	.ha-submenu a {
		padding: 9px 0 9px 16px;
		font-size: 14.5px;
		white-space: normal;
	}

	.ha-submenu a:hover { background: transparent; }
}

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

/* Every line in the contact block is a link now, so it needs the same
   colour and rhythm as the list columns rather than inheriting body link
   styles. */
.ha-footer__contact a {
	color: #9AA1A9;
	text-decoration: none;
}

.ha-footer__contact a:hover {
	color: var(--wp--preset--color--brand-green);
	text-decoration: underline;
}

/* The contact column has no sub-columns, so its first line sat higher than
   the link columns beside it. Match the shared row rhythm. */
.ha-footer__col--contact .ha-footer__contact {
	margin: 0;
	padding-block: 3px;
}

@media (max-width: 781px) {
	/* Stacked: align the contact block to the same left edge and spacing as
	   the Quick Links / Products columns above it. */
	.ha-footer__col--contact {
		width: 100%;
		text-align: left;
	}

	.ha-footer__col--contact .ha-footer__title {
		margin-bottom: 12px;
	}

	.ha-footer__col--contact .ha-footer__contact {
		margin: 0;
		padding: 0;
		font-size: 13.5px;
		line-height: 22px;
	}

	.ha-footer__col--contact .ha-footer__contact a {
		display: inline-block;
		padding-block: 4px;
	}
}

/* ==========================================================================
   FIX: mobile submenu items stacking on top of each other
   --------------------------------------------------------------------------
   The grid-template-rows 0fr/1fr accordion needs exactly ONE child to
   collapse. <ul class="ha-submenu"> has many <li>, so every item landed in
   the same implicit row and drew over the others. Swap to a max-height
   transition, which has no such requirement.
   ========================================================================== */

@media (max-width: 781px) {

	.ha-submenu {
		display: block;
		grid-template-rows: none;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		transition: max-height .3s ease, padding .3s ease;
	}

	.ha-menu__item--parent.is-open > .ha-submenu {
		grid-template-rows: none;
		max-height: 1200px;
		padding-bottom: 10px;
	}

	.ha-submenu > li {
		display: block;
		width: 100%;
		margin: 0;
	}

	.ha-submenu a {
		display: block;
		width: 100%;
	}

	/* ==================================================================
	   FIX: footer columns not sharing a left edge on mobile
	   Core's .wp-block-column carries its own inline flex-basis and the
	   grid children were picking up stray padding, so Contact sat ~17px
	   further in than the link lists.
	   ================================================================== */

	.ha-footer__cols > .ha-footer__col,
	.ha-footer__sub > .wp-block-column {
		padding-inline: 0 !important;
		margin-inline: 0 !important;
		flex-basis: auto !important;
		width: 100%;
	}

	.ha-footer__col--contact,
	.ha-footer__col--contact .ha-footer__title,
	.ha-footer__col--contact .ha-footer__contact {
		padding-left: 0 !important;
		margin-left: 0 !important;
		text-align: left;
	}

	.ha-footer__title,
	.ha-footer__list,
	.ha-footer__list li,
	.ha-footer__list a {
		padding-left: 0;
		margin-left: 0;
	}
}


/* ==========================================================================
   Footer — fluid; fits 320px to 2560px
   Type and spacing scale with the viewport so nothing crowds or overflows.
   ========================================================================== */

.ha-footer .ha-footer__main {
	padding: clamp(32px, 4vw, 52px) clamp(18px, 5vw, 80px) clamp(18px, 2vw, 26px);
}

.ha-footer .ha-footer__bottom {
	padding-left: clamp(18px, 5vw, 80px);
	padding-right: clamp(18px, 5vw, 80px);
}

.ha-footer .ha-footer__cols {
	display: grid;
	/* fr, not %, so column gaps are subtracted from the tracks. */
	grid-template-columns: repeat(3, minmax(0, max-content));
	justify-content: center;
	gap: 0 clamp(34px, 4.5vw, 88px);
	align-items: start;
	text-align: left;
	width: 100%;
	max-width: 1230px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ha-footer .ha-footer__col { min-width: 0; width: 100%; text-align: left; }

.ha-footer .ha-footer__sub {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: 0 clamp(22px, 2.6vw, 50px);
	width: 100%;
}

.ha-footer .ha-footer__title {
	font-family: Ubuntu, sans-serif;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 clamp(8px, .9vw, 13px);
	text-align: left;
}

.ha-footer .ha-footer__list { list-style: none; margin: 0; padding: 0; width: 100%; }
.ha-footer .ha-footer__list li { margin: 0; padding: 0 8px 0 0; line-height: normal; min-height: 0; }

.ha-footer .ha-footer__list a,
.ha-footer .ha-footer__col a,
.ha-footer .ha-footer__col p {
	font-family: Ubuntu, sans-serif;
	font-size: clamp(12.5px, .92vw, 14px);
	line-height: 1.45;
	color: #9AA1A9;
	padding: 2px 0;
	margin: 0;
	display: block;
	overflow-wrap: break-word;
}

.ha-footer .ha-footer__bottom-inner {
	width: 100%;
	max-width: 1230px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px clamp(14px, 2vw, 28px);
	flex-wrap: wrap;
}

.ha-footer .ha-footer__bottom-inner p,
.ha-footer .ha-footer__bottom-inner a {
	font-size: clamp(12px, .9vw, 14px);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 1200px) {
	.ha-footer .ha-footer__cols {
		grid-template-columns: repeat(2, minmax(0, max-content));
		justify-content: center;
		gap: clamp(20px, 3vw, 32px) clamp(28px, 4vw, 64px);
	}
	.ha-footer .ha-footer__col--contact { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	.ha-footer .ha-footer__cols { grid-template-columns: minmax(0, 1fr); justify-content: start; gap: 22px; }
	.ha-footer .ha-footer__col--contact { grid-column: auto; }
	.ha-footer .ha-footer__bottom-inner { justify-content: center; text-align: center; }
}

@media (max-width: 400px) {
	.ha-footer .ha-footer__sub { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Search overlay
   ========================================================================== */

.ha-search-popup {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 48, 37, .97);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ha-search-popup__form {
	width: min(720px, calc(100% - 40px));
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .08);
	border: 0;
	border-radius: 12px;
	padding: 6px 8px 6px 20px;
	box-shadow: none;
	transition: background .2s ease;
}

.ha-search-popup__form:focus-within { background: rgba(255, 255, 255, .13); }

.ha-search-popup__field,
.ha-search-popup__field:focus,
.ha-search-popup__field:focus-visible,
.ha-search-popup__field:active {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	border-width: 0;
	outline: 0;
	box-shadow: none;
	color: #fff;
	font-family: Ubuntu, sans-serif;
	font-size: clamp(1rem, 2vw, 1.3rem);
	padding: 13px 0;
}

.ha-search-popup__field::placeholder { color: rgba(255, 255, 255, .55); }

.ha-search-popup__submit {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 9px;
	background: #8BC53F;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: 0;
	box-shadow: none;
	transition: background .2s ease;
}

.ha-search-popup__submit:hover { background: #164333; }
.ha-search-popup__submit svg { width: 20px; height: 20px; }

.ha-search-popup__close {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
	transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.ha-search-popup__close:hover { background: rgba(255,255,255,.12); border-color: #8BC53F; transform: rotate(90deg); }

/* Contact block is a single <p> with <a>…<br><a>…<br><a>.
   Block-level links would double every break, so keep them inline. */
.ha-footer .ha-footer__col--contact p { line-height: 1.95; margin: 0; padding: 0; }
.ha-footer .ha-footer__col--contact p a { display: inline; padding: 0; margin: 0; line-height: inherit; }

/* ==========================================================================
   Mobile menu on the home page.

   The home page sets `body.ha-header-transparent`, which paints every nav link
   and the logo white so they read against the hero. The mobile nav panel lives
   inside .ha-header, so when it opened at the top of the home page its links
   and logo were white on a white panel — invisible. Other pages were fine
   because they never carry the transparent class.

   The panel is always a solid white sheet, so it opts out of the inversion.
   ========================================================================== */

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-green);
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .wp-block-navigation-item__content:hover,
body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-green-dark, #164333);
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--brand-green);
	fill: var(--wp--preset--color--brand-green);
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .ha-nav__logo img,
body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .wp-block-site-logo img,
body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .ha-logo img {
	filter: none;
}

body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .ha-nav__close,
body.ha-header-transparent .ha-header:not(.is-stuck) .ha-nav__panel .ha-nav__label {
	color: var(--wp--preset--color--brand-green);
}


/* ==========================================================================
   BUILD 109 — DESKTOP NAV: CHEVRON CENTRED WITH ITS LABEL
   --------------------------------------------------------------------------
   Client: "arrows not centered with the text".

   Measured on the page at 1280px before the change:

       .ha-menu__link    y 64 -> 108, centre 86
       .ha-menu__toggle  y 74 ->  92, centre 83     (3px high)

   Cause: the chevron is a sibling of the link inside the `<li>`, and the
   `<li>` is a plain `list-item`. Both children are therefore inline-level
   boxes on a text line and align on the BASELINE (`vertical-align: baseline`
   was the computed value). The toggle carries no text, so its bottom edge —
   not its middle — is what gets pinned to the label's baseline, and an 18px
   box parked on a baseline sits above the middle of a 30px line box.

   Fix: make the row a flex line, which is what it is being used as, and
   centre it. Nothing else about the item changes — the submenu is absolutely
   positioned, so it is out of flow either way, and the -12px pull on the
   toggle that tightens the gap is untouched.

   Scoped to >=782px on purpose. Below that the item is the off-canvas
   accordion row: `.ha-menu__item` is `display:block`, the toggle is
   `position:absolute` and the submenu is a static grid sibling, so flex there
   would put the submenu beside the label instead of under it. With the query
   scoped this way, a browser that never receives it keeps exactly today's
   rendering rather than a broken menu.
   ========================================================================== */

@media (min-width: 782px) {

	.ha-header .ha-menu__item {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	.ha-header .ha-menu__item > .ha-menu__link,
	.ha-header .ha-menu__item > .ha-menu__toggle {
		align-self: center;
	}

	/* The toggle is 18px against a 30px line box, so the flex line is sized by
	   the link and the chevron centres inside it. Kept explicit so a future
	   change to the icon size cannot reintroduce a baseline drop. */
	.ha-header .ha-menu__toggle { flex: 0 0 18px; }
}


/* ==========================================================================
   BUILD 109 — SEARCH PANEL: THE "PAGES" GROUP
   --------------------------------------------------------------------------
   Same row treatment as the category rows: the title on the left, a quiet
   grey label ("Page" / "Blog") on the right, so a visitor can see at a glance
   which of the three groups a result came from. No new row height, no new
   colour — the existing category rule is simply extended to the new class.
   ========================================================================== */

.ha-search-popup__result--page {
	justify-content: space-between;
	font-weight: 500;
}

.ha-search-popup__result--page small {
	flex: 0 0 auto;
	margin-left: 12px;
	color: #9AA1A9;
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
}