/* =========================
   FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

/* =========================
   PALETTE
========================= */
:root {
    --lamma-blue: #17324d;
    --lamma-blue-light: #005a8c;
    --lamma-lightblue: #e6f2f8;
    --lamma-gray: #f2f2f2;
    --lamma-text: #333;
}

/* =========================
   BASE
========================= */
html, body {
    background: #ffffff;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--lamma-text);
}

/* =========================
   HEADER MODERNO LAMMA
========================= */
#lamma-header {
    background: #17324d;
    color: white;
    padding: 12px 20px;
}

.lamma-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* logo */
.lamma-logo img {
    height: 60px;
}

/* titolo */
.lamma-title {
    font-size: 22px;
}

.lamma-title .subtitle {
    font-size: 14px;
    font-weight: 300;
}

/* destra */
.lamma-right {
    margin-left: auto;
    text-align: right;
    font-size: 13px;
}

.lamma-right a {
    color: #ffd700;
}



/* =========================
   CONTENUTO
========================= */
.standard_width,
.wide_max_width {
    width: 100%;
    padding: 0 20px;
}

/* =========================
   TITOLI
========================= */
h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

h1, h2, h3 {
    color: var(--lamma-blue-light);
    border-bottom: 2px solid var(--lamma-blue-light);
    padding-bottom: 4px;
}

/* =========================
   LINK
========================= */
a {
    color: var(--lamma-blue-light);
}

a:hover {
    text-decoration: underline;
}

/* =========================
   TABELLE PRINCIPALI
========================= */
.standard_width table {
    border-collapse: collapse;
}

/* header */
.standard_width th {
    background-color: var(--lamma-blue);
    color: white;
    padding: 8px;
    text-align: left;
}

/* celle */
.standard_width td {
    padding: 8px;
}

/* zebra */
.standard_width tr:nth-child(even) {
    background-color: var(--lamma-lightblue);
}

/* hover */
.standard_width tr:hover {
    background-color: #cfe6f2;
}

/* bordi */
.standard_width td,
.standard_width th {
    border: 1px solid #ddd;
}

/* =========================
   TABELLE HOME (NO GIALLO)
========================= */
table.commonBGColor {
    background-color: var(--lamma-gray) !important;
}

table.commonBGColor tr {
    background-color: white !important;
}

table.commonBGColor tr:nth-child(even) {
    background-color: var(--lamma-gray) !important;
}

/* =========================
   FORM
========================= */
input, select, button {
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
}

input[type="submit"], button {
    background: var(--lamma-blue-light);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
}

/* =========================
   FOOTER
========================= */

#lamma-footer {
    background: var(--lamma-blue);
    color: white;
    text-align: left;      /* <-- qui */
    padding: 20px 40px;    /* un po’ più di respiro a sinistra */
    margin-top: 40px;
}

#lamma-footer div {
    max-width: 1200px;
}

/* =========================
   MEDIA
========================= */
img, canvas {
    max-width: 100%;
}

/* TABELLE ERDDAP INFO / METADATA */
table.erd {
    border-collapse: collapse;
    background: white !important;
}

table.erd th {
    background-color: #17324d !important;
    color: #ffffff !important;
    padding: 8px !important;
    text-align: left !important;
    border: 1px solid #ddd !important;
}

table.erd td {
    padding: 8px !important;
    border: 1px solid #ddd !important;
}

/* righe alternate anche nelle metadata */
table.erd tr:nth-child(even) td {
    background-color: #e6f2f8 !important;
}

table.erd tr:nth-child(odd) td {
    background-color: #ffffff !important;
}

/* righe evidenziate da ERDDAP, tipo dimension/variable */
table.erd tr.highlightBGColor td {
    background-color: #d9ecf7 !important;
    font-weight: 600;
}