/*
 * Altea design system (design system "Altea", tokens from www.altea.it, October 2026).
 * Fonts and logos are the copies served by www.altea.it: nothing loads from Google Fonts.
 * Deliberate departures, for WCAG AA: orange is never used for small text (field errors
 * and links stay in the text colour), the Send button text is bold (21px bold counts as
 * large text: 3.13:1 is enough), the uppercase label stays at 24px, and focus is visible.
 */

@font-face {
    font-family: "Prompt";
    src: url("/fonts/prompt-v12-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Prompt";
    src: url("/fonts/prompt-v12-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat-v31-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat-v31-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette */
    --blu-altea: #100e95;
    --arancio-altea: #ff5a00;
    --bianco: #ffffff;
    --bianco-40: rgba(255, 255, 255, 0.4);
    --bianco-65: rgba(255, 255, 255, 0.65);
    --blu-altea-70: rgba(16, 14, 149, 0.7);
    --arancio-40: rgba(255, 90, 0, 0.4);
    --grigio-bordo: #8f8f8f;
    --griglia: rgba(187, 187, 186, 0.28);

    /* Semantic, the same on every section */
    --accento: var(--arancio-altea);
    --su-accento: var(--bianco);

    /* Type */
    --display: "Prompt", sans-serif;
    --sans: "Montserrat", sans-serif;

    /* Spacing */
    --spazio-colonna: 16.6667%;
    --spazio-colonna-mobile: 8.33333%;
    --spazio-sezione: 105px;
    --spazio-sezione-mobile: 75px;
    --spazio-paragrafo: 26px;
    --spazio-invio-y: 11px;
    --spazio-invio-x: 48px;
}

/* Section themes: fondo, testo, testo-tenue, etichetta, bordo */
[data-theme="bianco"] {
    --fondo: var(--bianco);
    --testo: var(--blu-altea);
    --testo-tenue: var(--blu-altea-70);
    --etichetta: var(--blu-altea-70);
    --bordo: var(--grigio-bordo);
}

[data-theme="blu"] {
    --fondo: var(--blu-altea);
    --testo: var(--bianco);
    --testo-tenue: var(--bianco-65);
    --etichetta: var(--bianco-40);
    --bordo: var(--bianco-40);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bianco);
    color: var(--blu-altea);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 2.1;
}

/* The five visible divisions of the six-column grid, over every background. */
.grid-lines {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--griglia), var(--griglia)),
        linear-gradient(var(--griglia), var(--griglia)),
        linear-gradient(var(--griglia), var(--griglia)),
        linear-gradient(var(--griglia), var(--griglia)),
        linear-gradient(var(--griglia), var(--griglia));
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: 16.6667% 0, 33.3333% 0, 50% 0, 66.6667% 0, 83.3333% 0;
}

.site-header {
    position: absolute;
    top: 47px;
    left: 5.14%;
    z-index: 3;
}

.logo {
    display: block;
    width: 150px;
    height: auto;
}

/* Full-width sections; content on the four central columns. */
.section {
    position: relative;
    background: var(--fondo);
    color: var(--testo);
    padding: var(--spazio-sezione) var(--spazio-colonna);
}

.section .inner {
    position: relative;
    z-index: 2;
}

.hero {
    padding-top: 190px;
}

.hero.full {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.label {
    margin: 0 0 25px;
    color: var(--etichetta);
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

h1 {
    margin: 0 0 0.4em;
    font-family: var(--display);
    font-size: clamp(34px, 4.88vw, 70px);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

h2 {
    margin: 0 0 38px;
    font-family: var(--display);
    font-size: 60px;
    font-weight: 700;
    line-height: 1.1;
}

.text {
    max-width: 46em;
    margin: 0;
    font-size: 18px;
    line-height: 2.1;
}

.text + .text,
.text + form {
    margin-top: var(--spazio-paragrafo);
}

.courtesy {
    font-family: var(--display);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
}

/* Links in running text: the text colour, underlined; the underline goes on hover. */
a {
    color: var(--testo);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: text-decoration-color 0.4s ease-out;
}

a:hover {
    text-decoration-color: transparent;
}

a:focus-visible,
input:focus-visible,
button:focus-visible {
    outline: 3px solid var(--testo);
    outline-offset: 3px;
}

/* Form */
.fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

label {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

input {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--bordo);
    border-radius: 0;
    background: var(--fondo);
    color: var(--testo);
    font: 400 18px/1.4 var(--sans);
}

input[aria-invalid="true"] {
    border-color: var(--arancio-altea);
    background: var(--arancio-40);
}

.field-error {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.captcha {
    margin: 32px 0 24px;
    min-height: 78px;
}

.send {
    padding: var(--spazio-invio-y) var(--spazio-invio-x);
    border: 0;
    border-radius: 0;
    background: var(--accento);
    color: var(--su-accento);
    font: 700 21px/1.6 var(--sans);
    cursor: pointer;
    transition: background-color 0.4s ease-out;
}

.send:hover {
    background: var(--blu-altea);
}

.small {
    max-width: 46em;
    margin: 20px 0 0;
    color: var(--testo-tenue);
    font-size: 14px;
    line-height: 1.6;
}

.small a {
    color: inherit;
}

.notice {
    margin: 0 0 32px;
    padding: 16px 20px;
    border: 1px solid var(--accento);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 990px) {
    h2 {
        font-size: 48px;
    }

    .courtesy {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --griglia: rgba(187, 187, 186, 0.08);
    }

    .section {
        padding: var(--spazio-sezione-mobile) var(--spazio-colonna-mobile);
    }

    .hero {
        padding-top: 110px;
    }

    .site-header {
        top: 24px;
        left: var(--spazio-colonna-mobile);
    }

    .logo {
        width: 85px;
    }

    h2 {
        font-size: 34px;
    }

    .courtesy {
        font-size: 26px;
    }

    .fields {
        grid-template-columns: 1fr;
    }

    .send {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}