/*
 * Header: a white pill floating on the ice band, with the six-item menu, the
 * search trigger and the Area Associati entry. Shape and measures come from
 * the approved header of the Design Kit (Header.astro).
 */

.fi-header {
	background: var(--wp--preset--color--ice-2);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: clamp(12px, 3vw, 40px);
	position: relative;
	z-index: 20;
}

.fi-header__bar {
	max-width: var(--wp--custom--container);
	margin-inline: auto;
	gap: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--shadow--md);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

/* The menu sits at the right end of the bar, next to the actions; the logo keeps
   its place on the left. The child selector is needed because core's layout rule
   `.is-layout-flex > :is(*, div) { margin: 0 }` outranks a single class, so an
   `auto` margin declared on `.fi-nav` alone never applies
   (docs/gotchas-wordpress.md). */
.fi-header__bar > .fi-nav {
	margin-inline-start: auto;
}

.fi-header__logo {
	flex-shrink: 0;
}

.fi-header__logo img {
	width: 168px;
	height: auto;
	display: block;
}

/* --- Azioni ----------------------------------------------------------- */

.fi-header__actions {
	gap: var(--wp--preset--spacing--30);
	flex-shrink: 0;
}

.fi-header__search .wp-block-search__button {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--navy);
}

.fi-header__search .wp-block-search__button:hover {
	background: var(--wp--preset--color--ice-2);
}

.fi-header__search .wp-block-search__inside-wrapper {
	border: 0;
}

.fi-header__cta .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* --- Focus e skip link ------------------------------------------------ */

/* Two rings of opposite colour: the inner one stays visible on navy, the outer
   one on white. A single ring disappears on one of the two. */
.fi-header a:focus-visible,
.fi-header button:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--sm);
}

/* Core prints its own skip link at the top of a block theme; styling it beats
   adding a second one that competes for the first tab stop. */
.skip-link.screen-reader-text,
.fi-skiplink {
	position: absolute;
	left: -9999px;
	top: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--sm);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	z-index: 100;
}

.skip-link.screen-reader-text:focus,
.fi-skiplink:focus {
	left: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--20);
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	text-decoration: none;
}

/* --- Sotto 1100px: il menu passa all'overlay di core ------------------- */

@media (max-width: 1100px) {
	.fi-header__bar {
		/* The bar is nowrap on desktop (block layout attribute): without this the
		   open menu cannot drop to a second row and overflows the pill. */
		flex-wrap: wrap;
		border-radius: var(--wp--custom--radius--panel);
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.fi-header__logo img {
		width: 138px;
	}
	/* Same core layout rule as above beats the burger's own `auto` margin, so the
	   push to the right end of the bar has to be declared from the bar. */
	.fi-header__bar > .fi-nav__burger {
		margin-inline-start: auto;
	}


	/* The CTA is in the footer and inside the overlay menu: on a 375px bar it
	   would push the logo out of the pill. */
	.fi-header .fi-header__cta {
		display: none;
	}
}