/*
 * Anurakti components — only what theme.json can't express.
 * Source of truth: the Claude Design pages (teal + amber, Young Serif / Hanken Grotesk / JetBrains Mono).
 * Always use theme.json variables, never raw hex:
 *   colours  var(--wp--preset--color--<slug>)
 *   type     var(--wp--preset--font-family--serif|sans|mono), var(--wp--preset--font-size--<slug>)
 *   spacing  var(--wp--preset--spacing--<1|2|3|4|6|10|16|20>)
 *   radius   var(--wp--custom--radius--<sm|md|lg|xl|pill>)
 *   shadow   var(--wp--preset--shadow--card|lift)
 */

/* ---------- Eyebrow label (small, tracked, uppercase) ---------- */
.an-eyebrow,
.has-label-font-size.an-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0;
}
.has-ink-background-color .an-eyebrow,
.has-teal-background-color .an-eyebrow {
	color: var(--wp--preset--color--amber-light);
}
/* Eyebrow with the short amber rule in front, as in the hero */
.an-eyebrow.is-style-ruled,
.an-eyebrow--ruled {
	display: flex;
	align-items: center;
	gap: 10px;
}
.an-eyebrow.is-style-ruled::before,
.an-eyebrow--ruled::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--amber);
	flex-shrink: 0;
}

/* ---------- Mono meta text (prices per weight, codes, small facts) ---------- */
.is-style-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	color: var(--wp--preset--color--teal);
}

/* ---------- Announcement bar ---------- */
.an-announce {
	padding-block: 10px;
}
.an-announce p {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
}

/* ---------- Header ---------- */
.an-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
	padding-block: 14px;
}
/* The translucent blur sits on a layer behind the header, not on the header itself:
   backdrop-filter on the header would make it the containing block for the mobile menu
   overlay (position: fixed), trapping the open menu inside the header bar. */
.an-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(251, 248, 241, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.admin-bar .an-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
.an-header__row {
	gap: 24px;
}
.an-header__logo {
	display: flex;
	flex-shrink: 0;
}
.an-header__logo img {
	height: clamp(30px, 3.4vw, 40px);
	width: auto;
	display: block;
}
.an-header__nav {
	flex: 1 1 auto;
	gap: clamp(10px, 1.2vw, 20px);
	margin-inline: clamp(8px, 2vw, 40px);
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 600;
	white-space: nowrap;
}
.an-header__nav .wp-block-navigation__container {
	justify-content: space-evenly;
	width: 100%;
}
.an-header__nav .wp-block-navigation-item__content {
	padding-block: 6px;
	border-bottom: 2px solid transparent;
}
.an-header__nav .wp-block-navigation-item:hover,
.an-header__nav .current-menu-item {
	color: var(--wp--preset--color--teal);
}
.an-header__nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.an-header__nav .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--amber);
}
.an-nav-dot > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 7px;
}
.an-nav-dot > .wp-block-navigation-item__content::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--amber);
}
@media (max-width: 1180px) {
	.an-header__nav .an-nav-secondary {
		display: none;
	}
	.an-header__nav .wp-block-navigation__responsive-container.is-menu-open .an-nav-secondary {
		display: block;
	}
}
.an-header__actions {
	gap: 10px;
	flex-shrink: 0;
	margin-left: auto;
}

/* Search pill */
.an-search .wp-block-search__inside-wrapper {
	height: 44px;
	min-width: 200px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
}
.an-search .wp-block-search__inside-wrapper:hover,
.an-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--teal-bright);
}
.an-search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	padding: 0;
}
@media (max-width: 1399px) {
	.an-search {
		display: none;
	}
}

/* Mini cart pill: dark, amber count */
.an-cart .wc-block-mini-cart__button {
	height: 44px;
	padding: 0 18px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-size: 14px;
	font-weight: 700;
}
.an-cart .wc-block-mini-cart__button:hover {
	background: var(--wp--preset--color--teal);
}
.an-cart .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--on-amber);
}

/* Phones and tablets: the nav block collapses to its menu button, which sits at the far right after search and cart */
@media (max-width: 1180px) {
	.an-header__nav {
		flex: 0 0 auto;
		order: 3;
		margin: 0;
	}
	.an-header__nav .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Mobile menu overlay */
.an-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--surface);
	font-size: 18px;
}
.an-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
}

/* ---------- Footer ---------- */
.an-footer {
	padding-top: var(--wp--preset--spacing--16);
	padding-bottom: 40px;
	font-size: 15px;
}
.an-footer__cols {
	gap: 40px;
	margin-bottom: 56px;
}
.an-footer__brand,
.an-footer__col {
	gap: 12px;
}
.an-footer__brand {
	gap: 18px;
}
.an-footer__logo {
	height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
}
.an-footer__brand p {
	margin: 0;
	line-height: 1.6;
	max-width: 280px;
}
/* Core forces nav links to `color: inherit`, so colour the nav and its items, not the links. */
.an-footer .wp-block-navigation {
	gap: 12px;
	font-size: 15px;
	font-weight: 400;
	color: var(--wp--preset--color--on-dark);
}
.an-footer a {
	color: var(--wp--preset--color--on-dark);
}
.an-footer a:hover,
.an-footer .wp-block-navigation-item:hover {
	color: var(--wp--preset--color--surface-raised);
}
.an-footer__legal {
	gap: 12px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--subtle);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 24px;
}
.an-footer__legal p {
	margin: 0;
}
.an-footer .an-footer__legal .wp-block-navigation {
	gap: 20px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--subtle);
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	min-height: var(--wp--custom--button-height);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
/* Amber: the main shop call to action */
.wp-block-button.is-style-amber .wp-block-button__link {
	background: var(--wp--preset--color--amber);
	border-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--on-amber);
	box-shadow: 0 10px 24px -10px rgba(246, 168, 0, 0.7);
}
.wp-block-button.is-style-amber .wp-block-button__link:hover {
	background: var(--wp--preset--color--amber-hover);
	border-color: var(--wp--preset--color--amber-hover);
	color: var(--wp--preset--color--on-amber);
}
/* Dark: ink pill (cart, secondary solid) */
.wp-block-button.is-style-dark .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.wp-block-button.is-style-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
}
/* On dark: white outline on teal or ink bands */
.wp-block-button.is-style-on-dark .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--surface-raised);
}
.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--teal);
}

/* ---------- Diet badges (paragraph block styles) ---------- */
.is-style-badge,
.is-style-badge-zero,
.is-style-badge-seasonal,
.is-style-badge-gifting {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0;
}
/* No refined sugar (default) */
.is-style-badge {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid rgba(0, 124, 128, 0.3);
	color: var(--wp--preset--color--teal);
}
/* Zero sugar: amber */
.is-style-badge-zero {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--on-amber);
}
/* Seasonal: teal */
.is-style-badge-seasonal {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--surface-raised);
}
/* Gifting: ink */
.is-style-badge-gifting {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface-raised);
}

/* ---------- Card (group block style) ---------- */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}
.wp-block-group.is-style-card:hover {
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---------- Content links: underline inside long text for accessibility ---------- */
.wp-block-post-content p a,
.wp-block-post-content li a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--amber);
	text-underline-offset: 3px;
}

/* ---------- WooCommerce ---------- */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce-product-gallery img {
	border-radius: var(--wp--custom--radius--md);
}
.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	font-weight: 800;
	color: var(--wp--preset--color--ink);
}
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--on-amber);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
}
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: var(--wp--custom--radius--pill);
	min-height: var(--wp--custom--button-height);
	font-weight: 800;
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------- Accessibility ---------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Search icon that expands into a field (core expandable search), under 1400px: the full search pill
   doesn't fit next to the seven menu links on laptop widths. */
.an-search-mobile {
	display: none;
}
@media (max-width: 1399px) {
	.an-search-mobile {
		display: block;
		margin: 0;
	}
	.an-search-mobile .wp-block-search__inside-wrapper {
		border: 0;
		padding: 0;
		background: transparent;
	}
	.an-search-mobile .wp-block-search__button {
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 50%;
		background: transparent;
		color: var(--wp--preset--color--ink);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.an-search-mobile .wp-block-search__button svg {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}
	/* Expanded: the field takes the full header row under the logo bar */
	.an-search-mobile:not(.wp-block-search__searchfield-hidden) {
		position: absolute;
		left: var(--wp--custom--gutter);
		right: var(--wp--custom--gutter);
		top: calc(100% + 8px);
		z-index: 5;
	}
	.an-search-mobile:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		height: 48px;
		padding: 0 4px 0 16px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--surface-raised);
		box-shadow: var(--wp--preset--shadow--lift);
	}
	.an-search-mobile:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		border: 0;
		background: transparent;
		font-size: 16px; /* 16px stops iOS zooming in */
		color: var(--wp--preset--color--ink);
	}
	.an-search-mobile:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
		border: 0;
		width: 40px;
		height: 40px;
	}
}

/* Laptops: the expanded search field opens under the header on the right, not full width */
@media (min-width: 901px) and (max-width: 1399px) {
	.an-search-mobile:not(.wp-block-search__searchfield-hidden) {
		left: auto;
		width: min(440px, calc(100% - 2 * var(--wp--custom--gutter)));
	}
}

/* ---------- Phones: the header row must fit the screen ---------- */
@media (max-width: 600px) {
	.an-header__row {
		gap: 8px;
		min-width: 0;
	}
	.an-header__row > * {
		flex-shrink: 0;
	}
	.an-header__logo {
		flex-shrink: 1;
		min-width: 0;
		margin-right: auto;
	}
	.an-header__logo img {
		height: 28px;
		max-width: 100%;
	}
	.an-header__actions {
		gap: 6px;
		margin-left: 0;
	}
	.an-search-mobile .wp-block-search__button,
	.an-header__nav .wp-block-navigation__responsive-container-open {
		width: 40px;
		height: 40px;
	}
	.an-cart .wc-block-mini-cart__button {
		height: 40px;
		padding: 0 12px;
	}
}
@media (max-width: 379px) {
	.an-header__row .wp-block-woocommerce-customer-account {
		display: none;
	}
}
/* Safety net: nothing may widen the page beyond the screen (clip keeps sticky header working) */
html,
body {
	overflow-x: clip;
}

/* Tablets and small laptops (600–1180px): the menu doesn't fit in the bar, and WordPress only shows the
   menu button under 600px, so Wholesale / Our Story / Contact were unreachable. Show the button and open
   the full menu from it, as on phones. */
@media (min-width: 600px) and (max-width: 1180px) {
	.an-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.an-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.an-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}