/* Mobile menu (navigation overlay template part): sticky bar, accordion items, Sign up.
   WordPress renders the part inside the Navigation block's fixed, full-screen container
   (.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay), which
   paints no background of its own; the part fills it. */

/* Logged in: the fixed container starts below the admin bar. */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 46px);
}

.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
	background: var(--wp--custom--color--surface--base);
	color: var(--wp--custom--color--text--default);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__overlay-container {
	display: block;
	width: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0;
}


.fyo-overlay {
	min-height: 100%;
	padding: 0 20px var(--wp--preset--spacing--90);
	background: var(--wp--custom--color--surface--base);
	color: var(--wp--custom--color--text--default);
}

/* The list starts right under the bar (Figma 175:6799); only the Sign up button keeps a gap. */
.fyo-overlay > * + * {
	margin-block-start: 0;
}

.fyo-overlay__bar {
	position: sticky;
	top: 0;
	z-index: 1;
	min-height: var(--wp--custom--header--height-mobile); /* 16px padding + 32px icons, like the header bar */
	margin: 0 -20px;
	padding: var(--wp--preset--spacing--40) 20px;
	background: inherit;
}

.fyo-overlay__search .wp-block-search__button,
.fyo-overlay .wp-block-navigation-overlay-close,
.fyo-overlay .wp-block-navigation-overlay-close button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.fyo-overlay__search .wp-block-search__button svg,
.fyo-overlay .wp-block-navigation-overlay-close svg {
	display: none;
}

.fyo-overlay__search .wp-block-search__button::before,
.fyo-overlay .wp-block-navigation-overlay-close button::before,
.fyo-overlay .wp-block-navigation-overlay-close:not(:has(button))::before {
	content: "";
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("../../icons/search.svg") no-repeat center / contain;
	mask: url("../../icons/search.svg") no-repeat center / contain;
}

.fyo-overlay .wp-block-navigation-overlay-close button::before,
.fyo-overlay .wp-block-navigation-overlay-close:not(:has(button))::before {
	-webkit-mask-image: url("../../icons/xmark.svg");
	mask-image: url("../../icons/xmark.svg");
}

.fyo-overlay__search .wp-block-search__inside-wrapper {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.fyo-overlay__search .wp-block-search__inside-wrapper,
.fyo-overlay__search .wp-block-search__input {
	height: 32px;
	min-height: 0;
}

.fyo-overlay__search .wp-block-search__input {
	padding: 0 var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--width--hairline) solid var(--wp--custom--color--border--subtle);
	border-radius: var(--wp--custom--radius--pill);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.fyo-overlay__logo .fyo-logo__color,
.fyo-overlay__logo .fyo-logo__inverse {
	display: none;
}

.fyo-overlay__logo .fyo-logo__compact {
	display: block;
	height: 32px;
}

/* ---- Accordion items (core/accordion) ---- */

/* Items touch: no flow gap between them (core adds the block gap to every sibling). */
.fyo-overlay .fyo-overlay__accordion > * + * {
	margin-block-start: 0;
}

/* Dividers (Figma 175:6830): a 2px dotted rule in 15% charcoal above each item and under the last one.
   Drawn as 2px dots with 4px gaps, which browsers' dashed borders cannot do. */
.fyo-overlay__accordion > .wp-block-accordion-item {
	--fyo-overlay-rule: repeating-linear-gradient(to right, var(--wp--custom--color--border--faint) 0 2px, transparent 2px 6px);

	background-image: var(--fyo-overlay-rule);
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: top;
}

.fyo-overlay__accordion > .wp-block-accordion-item:nth-last-child(1 of :not(.block-list-appender)) {
	background-image: var(--fyo-overlay-rule), var(--fyo-overlay-rule);
	background-size: 100% 2px, 100% 2px;
	background-position: top, bottom;
}

.fyo-overlay__accordion .wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--custom--color--text--default);
	font-size: 1.5rem; /* Figma: 24px on phones; the fluid "large" preset would shrink to 20px. */
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.fyo-overlay__accordion .wp-block-accordion-heading__toggle {
	padding: var(--wp--preset--spacing--50) 0;
	gap: var(--wp--preset--spacing--20);
}

.fyo-overlay__accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Replace core's "+" (rotated when open) with the plus and minus icons. */
.fyo-overlay__accordion .wp-block-accordion-heading__toggle-icon {
	width: 32px;
	height: 32px;
	font-size: 0;
	color: transparent;
	transform: none !important;
}

.fyo-overlay__accordion .wp-block-accordion-heading__toggle-icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background: var(--wp--custom--color--text--default);
	-webkit-mask: url("../../icons/plus.svg") no-repeat center / contain;
	mask: url("../../icons/plus.svg") no-repeat center / contain;
}

.fyo-overlay__accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before {
	-webkit-mask-image: url("../../icons/minus.svg");
	mask-image: url("../../icons/minus.svg");
}

.fyo-overlay__accordion .wp-block-accordion-panel {
	padding: 0 0 var(--wp--preset--spacing--50);
}

.fyo-overlay__accordion .wp-block-accordion-panel > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.fyo-overlay__links,
.fyo-overlay__query .wp-block-post-template {
	gap: var(--wp--preset--spacing--40);
}

.fyo-overlay__link {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--normal);
}

.fyo-overlay__link a {
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

.fyo-overlay__link a:hover {
	text-decoration: underline;
}

.fyo-overlay__link--locked a::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-inline-end: var(--wp--preset--spacing--20);
	vertical-align: -0.08em;
	background: currentColor;
	-webkit-mask: url("../../icons/lock.svg") no-repeat center / contain;
	mask: url("../../icons/lock.svg") no-repeat center / contain;
}

.fyo-overlay__cta {
	margin-block-start: var(--wp--preset--spacing--60) !important; /* 32px gap after the list (Figma); beats the flow gap */
}

.fyo-overlay__cta .wp-block-button__link {
	padding-block: var(--wp--preset--spacing--40);
}

/* Two columns of links at every width (core collapses grid layouts below 600px). */
.fyo-overlay__links.is-layout-grid,
.fyo-overlay__query .wp-block-post-template.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}