/* Andersens redesigned site header (v1.0.0) — built to the Figma nav frame.
   Deploy to child theme css/header-nav.css.

   Measured off the Figma at a 1440 frame: bar content 71px tall, 187x33 logo,
   16px/600 nav at 34px gaps, 70px search circle, 307x71 CTA cluster.

   --anh-sans now maps to --and-text (Inter). Inter is variable, so the 400-700
   400 weight, so the 600 nav weight renders as synthesised bold.
   --anh-cream is #f6f5ef, sampled from the Figma. Note the store finder shipped
   with #f4f2ea (--asf-cream) — align the two or /stores/ shows a seam. */

.anh {
	--anh-cream: #f6f5ef;
	--anh-green: #00833f;
	--anh-green-dark: #006330;
	--anh-gold: #ffa300;
	--anh-ink: #3a3a3a;
	--anh-line: #e6e2d6;
	--anh-sans: var(--and-text);

	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--anh-cream);
	font-family: var(--anh-sans);
	text-align: left;
	transition: box-shadow 0.2s ease;
}

.anh.is-stuck {
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}

.anh *,
.anh *::before,
.anh *::after {
	box-sizing: border-box;
}

/* Full width, gutter only.
   7 September 2026: the 1400px cap plus auto margins put the logo at 43px while
   the page content sits at 30px, so the nav never lined up with the H1 beneath
   it. The Figma runs the bar edge to edge with a 30px gutter (logo at x=30,
   right-hand pill ending 30 from the right) and 21px on the 402 artboard. */
.anh-bar {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 26px 30px;
}

/* Logo ------------------------------------------------------------------- */

.anh-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.anh-logo-img {
	display: block;
	width: 187px;
	height: auto;
}

.anh-logo-text {
	font-size: 26px;
	font-weight: 700;
	color: var(--anh-green);
	line-height: 1;
}

/* Main nav --------------------------------------------------------------- */

.anh-nav {
	flex: 1 1 auto;
	margin-left: 28px;
}

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

.anh-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.anh-link {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--anh-green);
	text-decoration: none;
	white-space: nowrap;
}

.anh-link:hover,
.anh-link:focus-visible {
	color: var(--anh-green-dark);
	text-decoration: none;
}

.anh-item.is-current > .anh-link {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

.anh-caret {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--anh-green);
	cursor: pointer;
}

.anh-caret-icon {
	width: 11px;
	height: auto;
	transition: transform 0.18s ease;
}

.anh-item.is-open .anh-caret-icon {
	transform: rotate(180deg);
}

/* Dropdown panel --------------------------------------------------------- */

.anh-panel {
	position: absolute;
	top: 100%;
	left: -20px;
	z-index: 10;
	margin-top: 18px;
	padding: 18px 10px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.anh-panel[hidden] {
	display: none;
}

.anh-sublist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 24px;
	min-width: 210px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --anh-rows is set per panel by header-nav.php: exactly ceil(children / 2), so
   the second column fills rather than orphaning the last item. */
.anh-panel--wide .anh-sublist {
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--anh-rows, 7), auto);
	min-width: 420px;
}

.anh-sublist li {
	margin: 0;
	padding: 0;
}

.anh-sublist a {
	display: block;
	padding: 9px 18px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--anh-green);
	text-decoration: none;
	border-radius: 8px;
	white-space: nowrap;
}

.anh-sublist a:hover,
.anh-sublist a:focus-visible {
	background: var(--anh-cream);
	color: var(--anh-green-dark);
	text-decoration: none;
}

/* Right-hand actions ------------------------------------------------------ */

.anh-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

/* The call button is the search button's twin: same circle, same icon box.
   Shared selectors rather than a copy, so the two cannot drift apart. */
.anh-search-toggle,
.anh-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--anh-green);
	cursor: pointer;
	transition: background 0.15s ease;
	/* .anh-phone is an <a>, so it needs the underline off. */
	text-decoration: none;
}

.anh-search-toggle:hover,
.anh-search-toggle:focus-visible,
.anh-phone:hover,
.anh-phone:focus-visible {
	background: #fff;
	color: var(--anh-green-dark);
}

.anh-search-icon,
.anh-phone-icon {
	width: 24px;
	height: 24px;
}

.anh-cta {
	display: flex;
	align-items: center;
	height: 71px;
	padding: 8px;
	background: #fff;
	border-radius: 999px;
}

.anh-cta-secondary {
	padding: 0 24px;
	font-size: 16px;
	font-weight: 600;
	color: var(--anh-green);
	text-decoration: none;
	white-space: nowrap;
}

.anh-cta-secondary:hover,
.anh-cta-secondary:focus-visible {
	color: var(--anh-green-dark);
	text-decoration: none;
}

.anh-cta-primary {
	display: flex;
	align-items: center;
	height: 55px;
	padding: 0 26px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: var(--anh-green);
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.anh-cta-primary:hover,
.anh-cta-primary:focus-visible {
	background: var(--anh-green-dark);
	color: #fff;
	text-decoration: none;
}

/* Search panel ------------------------------------------------------------ */

.anh-search {
	border-top: 1px solid var(--anh-line);
	background: var(--anh-cream);
}

.anh-search[hidden] {
	display: none;
}

/* Matches .anh-bar so the open search drawer lines up with the bar above it. */
.anh-search-form {
	display: flex;
	gap: 10px;
	padding: 18px 30px 24px;
}

.anh-search-field {
	flex: 1 1 auto;
	height: 55px;
	padding: 0 22px;
	font-family: inherit;
	font-size: 16px;
	color: var(--anh-ink);
	background: #fff;
	border: 1px solid var(--anh-line);
	border-radius: 999px;
}

.anh-search-field:focus {
	outline: 2px solid var(--anh-green);
	outline-offset: 1px;
}

.anh-search-submit {
	height: 55px;
	padding: 0 30px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--anh-green);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.anh-search-submit:hover {
	background: var(--anh-green-dark);
}

/* Burger + drawer (below the desktop breakpoint) -------------------------- */

.anh-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.anh-burger-bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.anh-burger-bars i {
	display: block;
	height: 2px;
	background: var(--anh-green);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.anh-burger[aria-expanded='true'] .anh-burger-bars i:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.anh-burger[aria-expanded='true'] .anh-burger-bars i:nth-child(2) {
	opacity: 0;
}

.anh-burger[aria-expanded='true'] .anh-burger-bars i:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.anh-drawer {
	background: var(--anh-cream);
	border-top: 1px solid var(--anh-line);
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.anh-drawer[hidden] {
	display: none;
}

.anh-drawer-menu {
	margin: 0;
	padding: 6px 20px 0;
	list-style: none;
}

.anh-drawer-item {
	margin: 0;
	border-bottom: 1px solid var(--anh-line);
}

.anh-drawer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.anh-drawer-row a {
	flex: 1 1 auto;
	padding: 16px 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--anh-green);
	text-decoration: none;
}

.anh-acc-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--anh-green);
	cursor: pointer;
}

.anh-acc-toggle .anh-caret-icon {
	width: 13px;
}

.anh-acc-toggle[aria-expanded='true'] .anh-caret-icon {
	transform: rotate(180deg);
}

.anh-drawer-sub {
	margin: 0;
	padding: 0 0 12px 14px;
	list-style: none;
}

.anh-drawer-sub[hidden] {
	display: none;
}

.anh-drawer-sub a {
	display: block;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--anh-green);
	text-decoration: none;
}

.anh-drawer-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px;
}

.anh-drawer-cta .anh-cta-secondary,
.anh-drawer-cta .anh-cta-primary {
	display: flex;
	flex: 1 1 160px;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 20px;
	border-radius: 999px;
}

.anh-drawer-cta .anh-cta-secondary {
	background: #fff;
}

@media (max-width: 1180px) {
	.anh-nav,
	.anh-cta {
		display: none;
	}

	.anh-burger {
		display: flex;
	}

	.anh-bar {
		gap: 16px;
		padding: 18px 20px;
	}

	.anh-search-toggle,
	.anh-phone {
		width: 52px;
		height: 52px;
	}

	.anh-search-icon,
	.anh-phone-icon {
		width: 21px;
		height: 21px;
	}

	.anh-logo-img {
		width: 150px;
	}
}

@media (max-width: 480px) {
	.anh-logo-img {
		width: 128px;
	}

	.anh-search-form {
		flex-wrap: wrap;
		padding: 14px 20px 20px;
	}

	.anh-search-submit {
		width: 100%;
	}
}

/* The redesigned header replaces OceanWP's #site-header, so the theme's own
   sticky spacer and mobile menu never render. Anything still targeting them is
   dead weight — left to the plugin cleanup, not patched here. */

@media (prefers-reduced-motion: reduce) {
	.anh,
	.anh-caret-icon,
	.anh-burger-bars i,
	.anh-cta-primary {
		transition: none;
	}
}

/* Mobile gutter matches the page body (20px) and the Figma's 21px at 402. */
@media (max-width: 767px) {
	.anh-bar {
		padding-left: 20px;
		padding-right: 20px;
	}

	.anh-search-form {
		padding-left: 20px;
		padding-right: 20px;
	}
}