/* =========================
   HEADER
========================= */

#header {
    width: 100%;
    background: linear-gradient( to bottom, #123f67 0%, #0f3557 45%, #0b2943 100% );
    border-bottom: 4px solid #d4b878;
    box-shadow: inset 0 -12px 30px rgba(0,0,0,0.10);
    flex-shrink: 0;
}

/* contenitore interno */

.header-inner {
    width: 100%;
    padding: 14px 0 16px 0;
    box-sizing: border-box;
}

/* titolo */

#header h1 {
    margin: 0 0 8px 0;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: normal;
    line-height: 1.08;
    letter-spacing: 0.2px;
    color: #ead9a8;
    text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

/* frame decorativo */

.decor-frame {
    width: 100%;
    max-width: var(--decor-width);
    margin: 0 auto;
}

/* linea con stemma */

.decor-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

.decor-line-top {
    margin: 2px auto 0 auto;
}

/* linea oro */

.decor-line .line {
    flex: 1;
    min-width: 20px;
    height: 1px;
    background: linear-gradient( to right, rgba(212,184,120,0), rgba(212,184,120,0.55), #d4b878, rgba(212,184,120,0.55), rgba(212,184,120,0) );
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* nodo */

.nodo {
    display: block;
    width: auto;
    height: 24px;
    flex: 0 0 auto;
}

/* nodo color oro */

.nodo-oro {
    filter: brightness(0) saturate(100%) invert(86%) sepia(19%) saturate(474%) hue-rotate(354deg) brightness(105%) contrast(95%) drop-shadow( 0 2px 3px rgba(0,0,0,0.35) );
}

/* stemma */

.stemma-roma {
    height: 85px;
    width: auto;
    flex: 0 0 auto;
    margin-right: 14px;
    display: block;
    transform: scale(1.03);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.40)) drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
@media (max-width: 760px) {
    .header-inner {
        padding: 11px 0 13px;
    }

    #header h1 {
        padding: 0 12px;
        font-size: 22px;
    }

    .decor-line {
        gap: 8px;
    }

    .stemma-roma {
        height: 68px;
        margin-right: 0;
    }

    .nodo {
        height: 18px;
    }
}