:root {
    --sar-public-content-max: 1180px;
    --sar-public-edge-x: clamp(28px, 5vw, 72px);
    --sar-public-edge-top: clamp(34px, 4vw, 54px);
    --sar-public-edge-bottom: clamp(30px, 4vw, 48px);
    --sar-public-content-footer-gap: clamp(24px, 3vw, 36px);
}

html {
    background: #060911;
}

body {
    min-height: 100vh;
    background: #060911 !important;
}

.page-main,
.page-main-container,
.form-main-container {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - var(--sar-public-header-height, 62px)) !important;
    display: flex !important;
    flex: 1 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: var(--sar-public-edge-top) var(--sar-public-edge-x)
        var(--sar-public-edge-bottom) !important;
    overflow: hidden !important;
    background: #060911 !important;
    box-sizing: border-box !important;
    isolation: isolate;
}

.page-main > .content-wrapper,
.page-main-container > .content-wrapper,
.form-main-container > .form-wrapper,
.page-main > .article-shell {
    width: min(100%, var(--sar-public-content-max)) !important;
    max-width: var(--sar-public-content-max) !important;
    margin: 0 auto !important;
    border: 2px solid rgba(247, 127, 0, .45) !important;
    border-radius: 29px !important;
    background: #fff !important;
    box-shadow:
        0 35px 90px rgba(0, 0, 0, .70),
        0 0 34px rgba(247, 127, 0, .17) !important;
    box-sizing: border-box !important;
}

.page-main > #topo-canvas,
.page-main-container > #topo-canvas,
.form-main-container > #topo-canvas {
    position: fixed !important;
    inset: var(--sar-public-header-height, 62px) 0 0 !important;
    z-index: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--sar-public-header-height, 62px)) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.page-main > .content-wrapper,
.page-main-container > .content-wrapper,
.form-main-container > .form-wrapper,
.page-main > .article-shell,
.sar-floating-footer {
    position: relative !important;
    z-index: 2 !important;
}

.sar-floating-footer {
    width: min(100%, var(--sar-public-content-max)) !important;
    max-width: var(--sar-public-content-max) !important;
    margin: var(--sar-public-content-footer-gap) auto 0 !important;
    padding: 0 1.25rem .15rem !important;
    box-sizing: border-box !important;
}

/* Il pannello degli articoli ha la stessa larghezza esterna, ma il testo
   mantiene una misura comoda per la lettura. */
.article-shell .article-body {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
}

/* Marchio delle intestazioni pubbliche: un'unica misura su tutte le pagine
   SAR, con il ridimensionamento automatico per smartphone. */
.page-header .page-logo,
.page-header .page-brand-logo {
    display: block !important;
    width: 210px !important;
    height: auto !important;
    max-width: 72vw !important;
    margin-right: auto !important;
    margin-left: auto !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 11px 20px rgba(247, 127, 0, .38))
        drop-shadow(0 0 23px rgba(247, 127, 0, .30)) !important;
}

/* Negli articoli il marchio resta compatto, ma senza anelli o riquadri. */
.article-brand-panel .article-logo {
    width: 110px !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    :root {
        --sar-public-edge-x: 14px;
        --sar-public-edge-top: 18px;
        --sar-public-edge-bottom: 20px;
        --sar-public-content-footer-gap: 16px;
    }

    .page-main,
    .page-main-container,
    .form-main-container {
        min-height: calc(100vh - var(--sar-public-header-height, 56px)) !important;
    }

    .page-main > #topo-canvas,
    .page-main-container > #topo-canvas,
    .form-main-container > #topo-canvas {
        inset: var(--sar-public-header-height, 56px) 0 0 !important;
        height: calc(100dvh - var(--sar-public-header-height, 56px)) !important;
    }

    .sar-floating-footer {
        width: 100% !important;
        padding: 0 .45rem .1rem !important;
    }

    .page-main > .content-wrapper,
    .page-main-container > .content-wrapper,
    .form-main-container > .form-wrapper,
    .page-main > .article-shell {
        border-radius: 21px !important;
    }

    .page-header .page-logo,
    .page-header .page-brand-logo {
        width: 174px !important;
        height: auto !important;
        max-width: 58vw !important;
    }

    .article-brand-panel .article-logo {
        width: 82px !important;
        height: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-main > #topo-canvas,
    .page-main-container > #topo-canvas,
    .form-main-container > #topo-canvas {
        opacity: .72 !important;
    }
}