/*
 * Abbey The Food Scientist - front-end structural/layout.
 */

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

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

/* "Skip to content" (header.php): hidden until it receives keyboard focus, then shown above the fixed header. */
.skip-link:focus {
	position: fixed;
	top: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	z-index: 100;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--brand-teal);
	color: var(--wp--preset--color--brand-purple);
	font-family: var(--wp--preset--font-family--eyebrow);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	outline: 3px solid var(--wp--preset--color--brand-purple);
	outline-offset: 2px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

:root {
	--site-header-height: 90px;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 50;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.site-header.is-scrolled {
	background-color: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--border);
}

.site-main {
	padding-top: var(--site-header-height);
}

.site-header__inner {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.site-branding {
	grid-column: 1;
}

.main-navigation {
	grid-column: 2;
	justify-self: end;
}

.site-branding img {
	display: block;
	height: 56px;
	width: auto;
}

.site-branding .site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.menu-toggle {
	display: none;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	width: 1.5rem;
	height: 2px;
	background: currentColor;
}

.menu-toggle__bars {
	position: relative;
	display: block;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars {
	transition: background-color 0.2s ease;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	transition: top 0.2s ease, transform 0.2s ease;
}

.menu-toggle__bars::before {
	top: -6px;
}

.menu-toggle__bars::after {
	top: 6px;
}

/* Open state: the three bars fold into an X. */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	display: inline-block;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wp--preset--font-size--medium);
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
	color: var(--wp--preset--color--brand-purple);
}

.menu-link-text {
	position: relative;
}

.primary-menu > li:not(.menu-cta) > a > .menu-link-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--brand-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.primary-menu > li:not(.menu-cta) > a:hover > .menu-link-text::after,
.primary-menu > li:not(.menu-cta) > a:focus-visible > .menu-link-text::after,
.primary-menu > .current-menu-item:not(.menu-cta) > a > .menu-link-text::after,
.primary-menu > .current-menu-ancestor:not(.menu-cta) > a > .menu-link-text::after,
.primary-menu > .current_page_parent:not(.menu-cta) > a > .menu-link-text::after {
	transform: scaleX(1);
}

.primary-menu .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a,
.primary-menu > .current_page_parent > a {
	color: var(--wp--preset--color--brand-purple);
}

.primary-menu .menu-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: 999px;
	background-color: var(--wp--preset--color--brand-teal);
	color: var(--wp--preset--color--brand-purple);
	font-family: var(--wp--preset--font-family--eyebrow);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-transform: none;
	letter-spacing: 0.02em;
	padding: 0.75rem 1.4rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.primary-menu .menu-cta > a:hover,
.primary-menu .menu-cta > a:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.site-menu-backdrop {
	display: none;
}

@media (max-width: 880px) {

	.site-header {
		background-color: var(--wp--preset--color--base);
		border-bottom-color: var(--wp--preset--color--border);
	}

	.menu-toggle {
		display: inline-flex;
		order: 2;
	}

	.site-branding img {
		height: 42px;
	}

	.site-header__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		justify-self: stretch; /* undo desktop's `end`, which shrink-wraps abspos boxes */
		max-height: calc(100vh - var(--site-header-height));
		max-height: calc(100dvh - var(--site-header-height));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.main-navigation.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	body.has-mobile-menu-open {
		overflow: hidden;
	}

	.site-menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 49; /* just under .site-header */
		background: rgba(50, 49, 51, 0.55); 
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}

	body.has-mobile-menu-open .site-menu-backdrop {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.2s ease, visibility 0s;
	}
	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-menu > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.primary-menu > li:last-child {
		border-bottom: 0;
	}

	.primary-menu > li > a {
		flex: 1;
		display: flex;
		align-items: center;
		min-height: 3rem;
		padding: 0.75rem 0;
	}

	.primary-menu .menu-cta {
		border-bottom: 0;
		margin-top: var(--wp--preset--spacing--30);
	}

	.primary-menu .menu-cta > a {
		display: flex;
		width: 100%;
	}
}

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
	.main-navigation,
	.main-navigation.is-open,
	.site-menu-backdrop,
	body.has-mobile-menu-open .site-menu-backdrop,
	.menu-toggle__bars,
	.menu-toggle__bars::before,
	.menu-toggle__bars::after {
		transition: none;
	}
}

.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--brand-purple);
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--wp--preset--color--brand-teal);
}

.site-footer__decor {
	position: absolute;
	pointer-events: none;
}

.site-footer__decor img {
	display: block;
	max-width: 100%;
	height: auto;
}

.site-footer__decor--tomato {
	left: -40px;
	bottom: -20px;
}

.site-footer__decor--hex {
	right: -60px;
	bottom: -60px;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Newsletter switched off (Customizer → Footer Newsletter): no empty 4th column. */
.site-footer__top--no-newsletter {
	grid-template-columns: 1.4fr 1fr 1fr;
}

.site-footer__bottom {
	position: relative;
	z-index: 1;
}

.footer-brand__logo img {
	height: 70px;
	width: auto;
	margin-bottom: var(--wp--preset--spacing--30);
}

.footer-brand__logo .site-title {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	text-decoration: none;
}

.footer-brand p {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
}

.footer-links__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--brand-teal);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--small);
}

.footer-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.footer-links li {
	position: relative;
	padding-left: 1rem;
}

.footer-links li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-teal);
}

.footer-newsletter {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--brand-purple-light);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
}

.footer-newsletter__decor {
	position: absolute;
	top: -34px;
	right: -14px;
	z-index: -1;
	pointer-events: none;
}

/*
 * The decor image (90px wide, offset right: -14px) reaches into the box's
 * top-right corner, so the heading keeps clear of it and wraps instead of
 * running underneath when the column gets narrow.
 */
.footer-newsletter h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-right: calc(90px - 14px - var(--wp--preset--spacing--40));
	font-size: var(--wp--preset--font-size--large);
}

.footer-newsletter p {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
}

.footer-newsletter__form {
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 0.3rem 0.3rem 0.3rem 1.1rem;
}

.footer-newsletter__field {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
}

/*
 * The prompt itself has no outline (it would be clipped by the pill), so the
 * whole pill gets the focus ring instead — teal reads clearly on the purple
 * footer.
 */
.footer-newsletter__form:has(.footer-newsletter__prompt:focus-visible) {
	outline: 3px solid var(--wp--preset--color--brand-teal);
	outline-offset: 3px;
}

/*
 * Looks like the pill's text field, but it is a button: subscribers sign up
 * in the Grow popup it opens, so there is no email to type here.
 */
.footer-newsletter__prompt {
	width: 100%;
	appearance: none;
	border: 0;
	outline: 0;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.footer-newsletter__form.is-rolling .footer-newsletter__prompt,
.footer-newsletter__form.is-cracked .footer-newsletter__prompt {
	opacity: 0;
}

.footer-newsletter__thanks {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding-left: 2.7rem;
	opacity: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	pointer-events: none;
}

.footer-newsletter__thanks-heart {
	margin-left: 0.3em;
	color: var(--wp--preset--color--brand-purple-light);
}

.footer-newsletter__submit {
	position: relative;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	width: 2.1rem;
	height: 2.6rem;
	flex-shrink: 0;
	cursor: pointer;
}

/* Purple, not teal: the button sits on the white pill, where teal is too faint. Egg-shaped to match the button. */
.footer-newsletter__submit:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-purple);
	outline-offset: 2px;
	border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
}

.egg-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.egg-btn__arrow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--brand-teal);
	color: var(--wp--preset--color--brand-purple);
	border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
}

.egg-btn__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
}

.egg-btn__shell,
.egg-btn__fried {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.egg-btn__shell {
	inset: 0;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--brand-purple-light);
}

.egg-btn__shell--top {
	border-radius: 50% 50% 4px 4px / 58% 58% 8px 8px;
	clip-path: polygon(0 0, 100% 0, 100% 46%, 72% 53%, 56% 45%, 40% 56%, 22% 46%, 0 53%);
}

.egg-btn__shell--bottom {
	border-radius: 4px 4px 50% 50% / 8px 8px 42% 42%;
	clip-path: polygon(0 53%, 22% 46%, 40% 56%, 56% 45%, 72% 53%, 100% 46%, 100% 100%, 0 100%);
}

.egg-btn__fried {
	left: 50%;
	top: 50%;
	width: 2.6rem;
	height: 2.4rem;
	margin: -1.2rem 0 0 -1.3rem;
	overflow: visible;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.egg-btn__fried-yolk {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
}

/* Two full turns, so the egg lands upright and the crack doesn't flip it. */
@keyframes egg-roll {
	0% {
		transform: translateX(0) rotate(0deg);
	}

	100% {
		transform: translateX(calc(-1 * var(--egg-roll-distance, 6.5rem))) rotate(-720deg);
	}
}

@keyframes egg-spread {
	0% {
		transform: scale(0.3);
		opacity: 0;
	}

	60% {
		transform: scale(1.08);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes egg-thanks-in {
	0% {
		opacity: 0;
		transform: translateX(10px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes egg-crack-top {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	40% {
		transform: translate(-3px, -5px) rotate(-10deg);
		opacity: 1;
	}

	100% {
		transform: translate(-6px, -12px) rotate(-28deg);
		opacity: 0;
	}
}

@keyframes egg-crack-bottom {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	40% {
		transform: translate(3px, 5px) rotate(9deg);
		opacity: 1;
	}

	100% {
		transform: translate(6px, 12px) rotate(24deg);
		opacity: 0;
	}
}

@keyframes egg-yolk-in {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	60% {
		transform: scale(1.15);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.footer-newsletter__form.is-rolling .footer-newsletter__submit {
	animation: egg-roll 0.9s cubic-bezier(0.55, 0, 0.4, 1) forwards;
}

.footer-newsletter__form.is-rolling .footer-newsletter__thanks {
	animation: egg-thanks-in 0.5s ease 0.15s forwards;
}

/*
 * Once cracked, the egg is pinned to the pill's left edge in layout instead
 * of being held there by the roll's pixel translate, so resizing the window
 * can't strand it. left: 6px matches the leftInset in main.js, so the swap
 * from translated to pinned is seamless. The min-height keeps the pill from
 * collapsing now the button is out of flow.
 */
.footer-newsletter__form.is-cracked {
	position: relative;
	min-height: 3.2rem;
}

.footer-newsletter__form.is-cracked .footer-newsletter__submit {
	position: absolute;
	left: 6px;
	top: 50%;
	margin-top: -1.3rem;
	animation: none;
	pointer-events: none;
}

.footer-newsletter__form.is-cracked .egg-btn__arrow {
	opacity: 0;
}

.footer-newsletter__form.is-cracked .egg-btn__shell--top {
	opacity: 1;
	animation: egg-crack-top 0.6s ease forwards;
}

.footer-newsletter__form.is-cracked .egg-btn__shell--bottom {
	opacity: 1;
	animation: egg-crack-bottom 0.6s ease forwards;
}

.footer-newsletter__form.is-cracked .egg-btn__fried {
	animation: egg-spread 0.5s ease-out 0.1s forwards;
}

.footer-newsletter__form.is-cracked .egg-btn__fried-yolk {
	animation: egg-yolk-in 0.45s ease 0.35s forwards;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.75);
}

/* Copyright with the developer credit stacked underneath. */
.site-footer__meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.site-footer__meta p {
	margin: 0;
}

/*
 * Meant to be easy to miss: smaller and dimmer than the copyright, but
 * 0.55 white on brand-purple is still ~5.4:1, so it stays readable.
 */
.site-credit {
	font-size: var(--wp--preset--font-size--x-small);
	color: rgba(255, 255, 255, 0.55);
}

.site-credit__heart {
	color: var(--wp--preset--color--category-coral);
}

.site-credit a {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 2px;
}

.footer-legal ul {
	list-style: none;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
}

/* Wraps on narrow screens: the icons drop below the label instead of squeezing it onto two lines. */
.footer-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.footer-social__label {
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-style: italic;
	border-bottom: 2px solid var(--wp--preset--color--brand-teal);
	padding-bottom: 0.25rem;
}

.footer-social ul {
	list-style: none;
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.footer-social svg {
	width: 1.1rem;
	height: 1.1rem;
}

@media (max-width: 1880px) {
	.site-footer__bottom {
		background: color-mix(in srgb, var(--wp--preset--color--brand-purple) 50%, transparent);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		border-radius: 12px;
		border-top: 0;
		margin-top: var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}

@media (max-width: 960px) {
	.site-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand,
	.footer-newsletter {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.site-footer__top {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}
}