/*
 * Footer: white band with the brand column, the site map in three columns and
 * the legal row. Measures from Footer.astro of the Design Kit. The footer holds
 * the whole map on purpose, so the header can stay at six items.
 */

.fi-footer {
	background: var(--wp--preset--color--white);
	padding-top: var(--wp--preset--spacing--80);
	margin-top: var(--wp--preset--spacing--60);
}

.fi-footer__inner {
	max-width: var(--wp--custom--container);
	margin-inline: auto;
	padding-inline: clamp(12px, 3vw, 40px);
}

.fi-footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

.fi-footer__logo img {
	width: 190px;
	height: auto;
	display: block;
	margin-bottom: var(--wp--preset--spacing--40);
}

.fi-footer__claim {
	max-width: 34ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.fi-footer__offices {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* --- Colonne della mappa ---------------------------------------------- */

.fi-footer__col-title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.fi-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fi-footer__links li {
	padding-block: 5px;
}

.fi-footer__links a {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.fi-footer__links a:hover {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
}

/* --- Iscrizione agli aggiornamenti ------------------------------------ */

/* The form is rendered by Gravity Forms (the shortcode lives in Aspetto >
   Footer). Its Orbital theme prints an inline style block scoped to
   `#gform_wrapper_<id>`, so a stylesheet cannot outrank it on specificity: the
   design is applied through Gravity's own CSS variables, forced past that inline
   block, instead of fighting property by property (gotcha V). */
.fi-footer__news {
	margin-top: var(--wp--preset--spacing--60);
}

.fi-footer__news-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.fi-footer__news-form [id^="gform_wrapper"].gform-theme {
	--gf-color-primary: var(--wp--preset--color--orange) !important;
	--gf-color-primary-contrast: var(--wp--preset--color--navy) !important;
	--gf-color-primary-darker: var(--wp--preset--color--navy) !important;
	--gf-color-primary-lighter: var(--wp--preset--color--orange) !important;
	--gf-color-in-ctrl-contrast: var(--wp--preset--color--ink) !important;
	--gf-color-out-ctrl-light: transparent !important;
	--gf-radius: var(--wp--custom--radius--pill) !important;
	--gf-font-size-secondary: var(--wp--preset--font-size--body) !important;
	--gf-font-size-tertiary: var(--wp--preset--font-size--small) !important;
}

/* One pill holding both: the field runs edge to edge inside it and the orange
   button sits inside on the right, as in the plate. Gravity stacks the body and
   the footer of the form, and draws its own border on the field: the border moves
   to the form, the field keeps none. */
.fi-footer__news-form .gform_wrapper form {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	max-width: 420px;
	padding: 5px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
}

/* The ring goes on the pill, because the field inside has no visible edge. */
.fi-footer__news-form .gform_wrapper form:focus-within {
	border-color: var(--wp--preset--color--navy);
	box-shadow: 0 0 0 3px var(--wp--custom--focus-ring);
}

.fi-footer__news-form .gform-body {
	flex: 1;
	min-width: 8rem;
}

.fi-footer__news-form .gform_footer {
	margin: 0;
	padding: 0;
	width: auto;
	flex-shrink: 0;
}

.fi-footer__news-form input[type="email"],
.fi-footer__news-form input[type="text"] {
	width: 100%;
	padding: 8px 18px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: var(--wp--preset--font-size--body) !important;
	color: var(--wp--preset--color--ink) !important;
}

.fi-footer__news-form button,
.fi-footer__news-form input[type="submit"] {
	padding: 12px 24px !important;
	border: 0 !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The label says what the field is for and the placeholder repeats it: the plate
   shows the field alone, so the label stays for assistive technology only. */
.fi-footer__news-form .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fi-footer__news-form input::placeholder {
	color: var(--wp--custom--placeholder);
	opacity: 1;
}

.fi-footer__news-note {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --- Riga legale ------------------------------------------------------ */

/* The group has layout `default`, so core's flex margin reset does not apply and
   its children keep the block-gap margin: the legal row sat 12px below the
   copyright line even with align-items: center (measured). */
.fi-footer__bottom > * {
	margin-block: 0;
}

.fi-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--line);
}

.fi-footer__copy {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.fi-footer__links--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
}

/* The `li` keeps its own line box: shrinking only the `a` leaves the strut of the
   inherited 16px body text, so the row stayed 28px tall against the 23px of the
   copyright line beside it (measured). */
.fi-footer__links--inline li {
	padding-block: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
}

.fi-footer__links--inline a {
	font-size: var(--wp--preset--font-size--small);
}

.fi-footer__links--inline a:hover {
	color: var(--wp--preset--color--navy);
}

/* --- Focus ------------------------------------------------------------ */

.fi-footer a:focus-visible,
.fi-footer button:focus-visible,
.fi-footer input:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

@media (max-width: 1100px) {
	.fi-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.fi-footer__brand {
		grid-column: 1 / -1;
	}

	/* The pill stays one row down to 375px: at that width the field is 184px and
	   the button 110px inside a 351px band (measured). Stacking them turned the
	   pill into a 95px tall box with the button floating in the middle. */
	.fi-footer__news-form .gform_wrapper form {
		flex-wrap: nowrap;
	}
}