/* =========================================================================
   Observatori Socioeconòmic del Baix Camp — identitat visual

   Paleta arrelada al territori: la terra rossa dels camps d'avellaners i
   vinyes del Baix Camp (argila, no el "terracotta" genèric IA), el verd
   oliva dels conreus, sobre un fons pedra freda (no crema). El motiu de
   línies horitzontals del capçal evoca els bancals/marges de conreu en
   terrasses, típics del paisatge de la comarca.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
    --ink: #20241f;
    --ink-soft: #454f43;
    --paper: #edeee6;
    --paper-card: #ffffff;
    --clay: #a8462e;
    --clay-dark: #7f3220;
    --olive: #5f6e42;
    --gold: #b98a2e;
    --line: #d7d5c8;
    --line-strong: #b9b7a6;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Public Sans', system-ui, -apple-system, sans-serif;

    --radius: 3px;
    --shadow: 0 1px 2px rgba(32, 36, 31, 0.06), 0 4px 12px rgba(32, 36, 31, 0.04);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--clay-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, select:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 2px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.4em;
    color: var(--ink);
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); font-weight: 700; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--olive);
    font-weight: 600;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Capçalera del lloc (amb el motiu de bancals) ---------- */

.site-header {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.035) 0px,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 14px
        ),
        linear-gradient(180deg, #262c21 0%, #20241f 100%);
    color: #f2f0e6;
    border-bottom: 3px solid var(--clay);
}

.site-header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    gap: 24px;
    flex-wrap: wrap;
}

.site-header .brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: 0.01em;
}
.site-header .brand span {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 2px;
}

.site-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.site-nav a {
    color: #ded9c8;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-weight: 500;
}
.site-nav a:hover, .site-nav a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}

/* ---------- Hero ---------- */

.hero {
    padding: 56px 0 44px;
    border-bottom: 1px solid var(--line);
}
.hero p.lead {
    max-width: 62ch;
    font-size: 1.08rem;
    color: var(--ink-soft);
    margin-top: 10px;
}

/* ---------- Cards de municipis ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.card-municipi {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.card-municipi:hover {
    border-color: var(--clay);
    transform: translateY(-1px);
}
.card-municipi a {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.02rem;
    text-decoration: none;
}
.card-municipi a:hover { color: var(--clay-dark); }

/* ---------- Seccions genèriques ---------- */

section.block { padding: 40px 0; }
section.block + section.block { border-top: 1px solid var(--line); }

/* ---------- Catàleg: llistat de fitxes ---------- */

.catalog-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}
.catalog-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--olive);
    border-radius: var(--radius);
}
.catalog-item a { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.catalog-item a:hover { color: var(--clay-dark); }
.catalog-item .tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--olive);
    white-space: nowrap;
}
.catalog-item .tag-derivat {
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
}
.catalog-item .tag-font {
    font-family: 'Public Sans', monospace;
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 600;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
}
.tag-font-v2 { border-color: var(--clay); color: var(--clay-dark); }
.tag-font-pub { border-color: var(--olive); color: var(--olive); }
.tag-font-pmhestrangera { border-color: var(--olive); color: var(--olive); }
.tag-font-derivat { display: none; } /* ja mostrem "indicador calculat" a banda */

/* ---------- Cercador d'indicadors ---------- */

.cercador {
    width: 100%;
    max-width: 480px;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 11px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    margin-bottom: 28px;
}
.cercador:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 1px;
}
.categoria-block { margin-bottom: 34px; }
.subcat-block { margin-bottom: 18px; }

/* ---------- Desplegable de subcategoria (catàleg) ---------- */

.subcat-dropdown {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.subcat-dropdown + .subcat-dropdown { margin-top: 10px; }
.subcat-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    background: #f6f5ee;
    border-left: 4px solid var(--olive);
    user-select: none;
}
.subcat-dropdown summary::-webkit-details-marker { display: none; }
.subcat-dropdown summary::before {
    content: '\25B8'; /* triangle petit apuntant a la dreta */
    display: inline-block;
    margin-right: 10px;
    color: var(--olive);
    transition: transform 0.15s ease;
    flex: none;
}
.subcat-dropdown[open] summary::before { transform: rotate(90deg); }
.subcat-dropdown summary:hover { background: #efece0; }
.subcat-dropdown summary .subcat-titol { flex: 1; }
.subcat-dropdown summary .subcat-comptador {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 2px 10px;
    flex: none;
}
.subcat-dropdown .catalog-list {
    margin-top: 0;
    padding: 14px 18px 18px;
}

/* ---------- Fitxa calculada: nota amb la fórmula ---------- */

.formula-box {
    background: #f6f5ee;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 18px 0;
}
.formula-box strong { color: var(--ink); }

/* ---------- Taules de dades ---------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-card);
    box-shadow: var(--shadow);
}

table.data {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
    padding: 9px 14px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}
table.data th:first-child, table.data td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--paper-card);
}
table.data thead th {
    background: #f6f5ee;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    border-bottom: 2px solid var(--line-strong);
    position: sticky;
    top: 0;
    z-index: 1;
}
table.data thead th:first-child { z-index: 2; }
table.data tbody tr:hover td { background: #f8f6ee; }
table.data tr.row-comarca td {
    font-weight: 700;
    background: #f2ede1;
}
table.data tr.row-comarca:hover td { background: #efe8d8; }

.var-pos { color: #3f6b3a; }
.var-neg { color: var(--clay-dark); }
.var-zero { color: var(--ink-soft); }

/* ---------- Fitxa municipal ---------- */

.fitxa-grup { margin-bottom: 36px; }
.fitxa-grup h2 {
    border-bottom: 2px solid var(--clay);
    padding-bottom: 6px;
    margin-bottom: 16px;
}
.fitxa-taula { margin-bottom: 22px; }
.fitxa-taula h3 { color: var(--ink-soft); margin-bottom: 8px; }
.fitxa-taula .font {
    font-size: 0.78rem;
    color: var(--ink-soft);
    opacity: 0.75;
    margin-top: 6px;
}

.compare-cols { font-size: 0.78rem; color: var(--ink-soft); }

/* ---------- Selector de columna (catàleg) ---------- */

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    flex-wrap: wrap;
}
.toolbar label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.toolbar select {
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
}

/* ---------- Peu ---------- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 28px 0 40px;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

/* ---------- Utilitats ---------- */

.breadcrumb {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-soft);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    margin-top: 18px;
}

@media (max-width: 640px) {
    .site-header .bar { flex-direction: column; align-items: flex-start; }
}