/**
 * Mobile flyout panel — block area styles (Figma 823:11836).
 * Scoped to .mobile-flyout-panel only; does not affect global block styles.
 */

/* -------------------------------------------------------------------------
   Flyout chrome — logo, close, search (independent from main header nav)
   ------------------------------------------------------------------------- */

.mobile-flyout-panel__chrome {
	flex-shrink: 0;
	padding: 12px 0 0;
	width: 100%;
}

.mobile-flyout-panel__logo,
.mobile-flyout-panel__actions,
.mobile-flyout-panel__content {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0s;
}

html.is-mobile-flyout-open .mobile-flyout-panel__logo {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

html.is-mobile-flyout-open .mobile-flyout-panel__actions {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.16s;
}

html.is-mobile-flyout-open .mobile-flyout-panel__content {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.22s;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-flyout-panel,
	.mobile-flyout-panel__logo,
	.mobile-flyout-panel__actions,
	.mobile-flyout-panel__content {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

.mobile-flyout-panel__logo {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: min(414px, 85vw);
	padding: 0 20px;
	width: 100%;
}

.mobile-flyout-panel__logo-link {
	color: var(--wp--preset--color--coffee, #3c1f10);
	display: block;
	line-height: 0;
	text-decoration: none;
	width: 100%;
}

.mobile-flyout-panel__logo-words {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: center;
	width: 100%;
}

.mobile-flyout-panel__logo .logo-img {
	filter: none;
	height: auto;
	max-height: 78px;
	object-fit: contain;
	width: auto;
}

.mobile-flyout-panel__logo .logo-img--mallory {
	flex: 215 1 auto;
	max-width: calc((100% - 12px) * 215 / 390);
}

.mobile-flyout-panel__logo .logo-img--oniki {
	flex: 175 1 auto;
	max-width: calc((100% - 12px) * 175 / 390);
}

.mobile-flyout-panel__actions {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 16px 20px;
	width: 100%;
}

.mobile-flyout-panel__close {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--coffee, #3c1f10);
	border-radius: 40px;
	box-shadow: var(--lg-shadow-outline, inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.3));
	box-sizing: border-box;
	color: var(--wp--preset--color--coffee, #3c1f10);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--gt-maru-mono, ui-monospace, Consolas, Menlo, monospace);
	font-size: 14px;
	font-weight: 500;
	height: 36px;
	justify-content: center;
	letter-spacing: 0.7px;
	line-height: 1;
	min-height: 36px;
	padding: 8px 17px;
	text-transform: uppercase;
	transition: opacity 200ms ease, visibility 200ms ease;
	white-space: nowrap;
}

/* Open search covers the Close pill — hide it instantly so it never shows through. */
.mobile-flyout-panel__actions:has(.header-search:focus-within) .mobile-flyout-panel__close,
.mobile-flyout-panel__actions:has(.header-search.has-query) .mobile-flyout-panel__close,
.mobile-flyout-panel__actions:has(.header-search.is-open) .mobile-flyout-panel__close {
	opacity: 0;
	pointer-events: none;
	transition: none;
	visibility: hidden;
}

.mobile-flyout-panel__search-slot {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}

.mobile-flyout-panel .header-search {
	--header-search-chrome: var(--wp--preset--color--coffee, #3c1f10);
	--header-search-collapsed-width: calc(6.5em + 19px);
	/* Open search spans the full actions row (20px side padding). */
	--header-search-open-width: calc(100vw - 40px);
	--header-search-fg: var(--wp--preset--color--coffee, #3c1f10);
	--nav-pill-height: 36px;
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--coffee, #3c1f10);
	box-shadow: var(--lg-shadow-outline-search, inset 3px 3px 1px -3px rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.5));
	color: var(--wp--preset--color--coffee, #3c1f10);
	flex-shrink: 0;
	font-size: 14px;
	height: 36px;
	min-height: 36px;
	padding: 0 16px 0 20px;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.mobile-flyout-panel .header-search .liquid-glass-lenses,
.mobile-flyout-panel .header-search .liquid-glass-specular {
	display: none !important;
}

.mobile-flyout-panel .header-search input[type="search"].header-search-input,
.mobile-flyout-panel .header-search input[type="search"].header-search-input::placeholder {
	color: var(--wp--preset--color--coffee, #3c1f10);
}

.mobile-flyout-panel .header-search-submit {
	color: var(--wp--preset--color--coffee, #3c1f10);
}

.mobile-flyout-panel .header-search:not(:focus-within):not(.has-query):not(.is-open) .header-search-input {
	padding-left: calc((100% - 6.5em) / 2) !important;
}

.mobile-flyout-panel .block-area-mobile-flyout {
	box-sizing: border-box;
	color: var(--wp--preset--color--coffee, #3c1f10);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 20px 24px;
	width: 100%;
}

.mobile-flyout-panel .block-area-mobile-flyout > * {
	min-width: 0;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Navigation pills — core/navigation is-style-buttons
   ------------------------------------------------------------------------- */

.mobile-flyout-panel .wp-block-navigation.is-style-buttons {
	--navigation-buttons-gap: 18px;
	margin: 0;
	padding: 16px 0;
	width: 100%;
}

.mobile-flyout-panel .wp-block-navigation.is-style-buttons .wp-block-navigation__container,
.mobile-flyout-panel .wp-block-navigation.is-style-buttons .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--navigation-buttons-gap);
	justify-content: flex-start;
	width: 100%;
}

.mobile-flyout-panel .wp-block-navigation.is-style-buttons .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

.mobile-flyout-panel .wp-block-navigation.is-style-buttons .wp-block-navigation-item__content {
	border-radius: 40px;
	font-family: var(--wp--preset--font-family--pp-neue-montreal, Georgia, "Times New Roman", serif);
	font-size: 36px;
	font-weight: 400;
	justify-content: center;
	letter-spacing: -0.36px;
	line-height: 1.1;
	padding: 8px 17px;
	text-transform: capitalize;
	width: 100%;
}

.mobile-flyout-panel .wp-block-navigation.is-style-buttons .wp-block-navigation-item__content:not(:first-child) {
	padding-bottom: 6px;
	padding-top: 8px;
}

/* -------------------------------------------------------------------------
   Arrow link group — core/button is-style-arrow
   ------------------------------------------------------------------------- */

.mobile-flyout-panel .wp-block-buttons {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
	padding: 0 0 16px 20px;
	width: 100%;
}

.mobile-flyout-panel .wp-block-buttons .wp-block-button {
	margin: 0;
	width: 100%;
}

.mobile-flyout-panel .wp-block-button.is-style-arrow .wp-block-button__link,
.mobile-flyout-panel .wp-block-button.is-style-link-button .wp-block-button__link {
	font-size: 14px;
	letter-spacing: -0.56px;
	line-height: 0.9;
	padding: 0;
	text-transform: uppercase;
}

.mobile-flyout-panel .wp-block-button.is-style-arrow .wp-block-button__link::before,
.mobile-flyout-panel .wp-block-button.is-style-link-button .wp-block-button__link::before {
	height: 21px;
	width: 20px;
}

/* -------------------------------------------------------------------------
   Single Post Highlight — mini recipe card
   ------------------------------------------------------------------------- */

.mobile-flyout-panel .single-post-highlight {
	background: transparent;
	padding: 10px 0 0;
	width: 100%;
}

.mobile-flyout-panel .single-post-highlight__inner {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	grid-template-rows: auto auto auto auto;
	column-gap: 10px;
	row-gap: 6px;
	align-items: start;
	padding: 0;
	width: 100%;
}

.mobile-flyout-panel .single-post-highlight__inner::before,
.mobile-flyout-panel .single-post-highlight__inner::after {
	background-color: currentColor;
	content: "";
	display: block;
	height: 1px;
	width: 100%;
}

.mobile-flyout-panel .single-post-highlight__inner::before {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: 4px;
}

.mobile-flyout-panel .single-post-highlight__inner::after {
	grid-column: 1 / -1;
	grid-row: 4;
	margin-top: 4px;
}

.mobile-flyout-panel .single-post-highlight__media {
	grid-column: 1;
	grid-row: 2 / span 2;
	align-self: start;
	flex: 0 0 100px;
	max-width: 100px;
	width: 100px;
}

.mobile-flyout-panel .single-post-highlight__image {
	aspect-ratio: 1;
	height: 100px;
	width: 100px;
}

.mobile-flyout-panel .single-post-highlight__content,
.mobile-flyout-panel .single-post-highlight__main {
	display: contents;
}

.mobile-flyout-panel .single-post-highlight__main > .single-post-highlight__rule:first-child,
.mobile-flyout-panel .single-post-highlight__excerpt,
.mobile-flyout-panel .single-post-highlight__footer {
	display: none;
}

.mobile-flyout-panel .single-post-highlight__category {
	display: block;
	font-family: var(--wp--preset--font-family--gt-maru-mono, ui-monospace, Consolas, Menlo, monospace);
	font-size: 12px;
	font-weight: 500;
	grid-column: 2;
	grid-row: 2;
	letter-spacing: 0.72px;
	line-height: 1.25;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.mobile-flyout-panel .single-post-highlight__category-bracket {
	display: inline;
}

.mobile-flyout-panel .single-post-highlight__title {
	font-family: var(--wp--preset--font-family--pp-neue-montreal, Georgia, "Times New Roman", serif);
	font-size: 24px;
	grid-column: 2;
	grid-row: 3;
	align-self: start;
	letter-spacing: -0.48px;
	line-height: 1.1;
	margin: 0;
}

@media (max-width: 480px) {
	.mobile-flyout-panel .wp-block-navigation.is-style-buttons .wp-block-navigation-item__content {
		font-size: clamp(28px, 8vw, 36px);
	}
}