/**
 * Base del tema: reset, tipografia, pulsanti, campi, utilità e movimento.
 */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ms-header-h) + 20px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ms-background);
	color: var(--ms-primary);
	font-family: var(--ms-font-body);
	font-size: 16px;
	line-height: 1.6;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button,
a,
input,
select,
textarea,
summary {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 3px solid var(--ms-primary-hover);
	outline-offset: 5px;
}

/* Specificità zero: valgono i margini del testo degli articoli (content.css). */
:where(h1, h2, h3, h4, p) {
	margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ms-font-heading);
	font-weight: 550;
}

.ms-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ms-skip {
	position: absolute;
	left: 10px;
	top: -100px;
	z-index: 110;
	padding: 10px 14px;
	border-radius: var(--ms-radius-small);
	background: var(--ms-accent);
	color: var(--ms-shadow-base);
	font-weight: 600;
}

.ms-skip:focus {
	position: fixed;
	top: 10px;
}

.ms-container {
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
}

.ms-section {
	padding: var(--ms-section-pad) var(--ms-gutter);
}

.ms-eyebrow {
	margin: 0 0 25px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 1.7px;
	text-transform: uppercase;
}

/* Pulsanti. */

.ms-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding: 15px 23px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--ms-primary);
	border-radius: var(--ms-radius-button);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.ms-button .ms-icon,
.ms-link-arrow .ms-icon {
	transition: transform .23s ease;
}

.ms-button--primary {
	background: var(--ms-primary);
	color: var(--ms-white);
}

.ms-button--primary:hover {
	background: var(--ms-primary-hover);
}

.ms-button--accent {
	border-color: var(--ms-accent);
	background: var(--ms-accent);
	color: var(--ms-shadow-base);
}

.ms-button--accent:hover {
	background: var(--ms-accent-hover);
}

.ms-button:active {
	transform: scale(.97);
	box-shadow: none;
}

.ms-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 550;
	transition: color .2s ease;
}

.ms-link-arrow:active {
	opacity: .7;
}

@media (hover: hover) and (pointer: fine) {
	.ms-button:hover {
		transform: translateY(-3px);
		box-shadow: var(--ms-shadow-button);
	}

	.ms-button:hover .ms-icon,
	.ms-link-arrow:hover .ms-icon {
		transform: translate(3px, -3px);
	}

	.ms-link-arrow:hover {
		color: var(--ms-primary-hover);
	}
}

/* Campi dei moduli. */

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]),
select,
textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ms-input-border);
	border-radius: var(--ms-radius-small);
	background: rgb(255 255 255 / 66%);
	color: var(--ms-primary);
	font-size: 14px;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]):focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--ms-primary-hover);
	outline-offset: 1px;
	background: var(--ms-white);
	box-shadow: 0 0 0 4px var(--ms-toggle-hover);
}

textarea {
	resize: vertical;
}

/* Movimento. */

.ms-ripple {
	position: absolute;
	z-index: -1;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0);
	animation: ms-ripple .6s ease-out forwards;
}

.ms-reveal-in {
	animation: ms-reveal .7s var(--ms-ease) both;
	animation-delay: var(--ms-reveal-delay, 0ms);
}

@keyframes ms-reveal {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ms-fade-down {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ms-ripple {
	0% {
		opacity: .18;
		transform: translate(-50%, -50%) scale(0);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(65);
	}
}

@media (max-width: 720px) {
	input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]),
	select,
	textarea {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.ms-ripple {
		display: none;
	}
}