/* ── Design tokens ───────────────────────────────── */
/* Every colour in this file goes through one of these, so the map can follow
   a dark theme without any rule below caring. The light values are exactly
   the literals they replaced. The block further down reacts to the same
   data-theme attribute catalunyamedieval sets on <html>; standalone pages
   never set it and keep the light values. The comarca fill/stroke tokens are
   also read from JS (catalunya-map-config.js), because Raphael paints the
   SVG paths with presentation attributes rather than CSS. */
:root {
    --cm-brown:    #6b4f2e;
    --cm-amber:    #c47f17;
    --cm-militar:  #9b2226;
    --cm-civil:    #2d6a4f;
    --cm-religios: #1e4e8c;
    --cm-altres:   #7b3f9e;

    /* Side panel */
    --cm-panel-ink:      #3d2b1f;
    --cm-panel-heading:  #1a202c;
    --cm-panel-body:     #4a3728;
    --cm-panel-rule:     rgba(0, 0, 0, .06);
    --cm-panel-rule-2:   rgba(0, 0, 0, .05);
    --cm-panel-hover:    #fafaf8;
    --cm-panel-track:    rgba(0, 0, 0, .06);
    --cm-panel-sunken:   #f5ede4;
    --cm-tooltip-bg:     rgba(255, 255, 255, .92);
    --cm-tooltip-shadow: rgba(0, 0, 0, .10);

    /* Comarca shapes (also read by the JS) */
    --cm-comarca-fill:       #fff;
    --cm-comarca-fill-hover: #fee8cb;
    --cm-comarca-stroke:     #c7ab89;
    --cm-comarca-name:       #a07a49;
    --cm-comarca-capital:    #FF9900;
    --cm-comarca-label:      #000000;  /* outline behind the hovered comarca name */
}

/* Dark theme, keyed off the attribute the host page sets on <html>. */
:root[data-theme="dark"] {
    --cm-brown:    #c8b9a4;
    --cm-amber:    #ffd08c;
    --cm-militar:  #d9695f;
    --cm-civil:    #6bbf8f;
    --cm-religios: #6fa8dc;
    --cm-altres:   #b98ad6;

    --cm-panel-ink:      #e7dccd;
    --cm-panel-heading:  #f2e9dc;
    --cm-panel-body:     #e7dccd;
    --cm-panel-rule:     rgba(255, 255, 255, .10);
    --cm-panel-rule-2:   rgba(255, 255, 255, .08);
    --cm-panel-hover:    #2f271f;
    --cm-panel-track:    rgba(255, 255, 255, .10);
    --cm-panel-sunken:   #372e25;
    --cm-tooltip-bg:     rgba(35, 28, 23, .95);
    --cm-tooltip-shadow: rgba(0, 0, 0, .55);

    --cm-comarca-fill:       #2f2720;
    --cm-comarca-fill-hover: #4a3b2e;
    --cm-comarca-stroke:     #6b5a48;
    --cm-comarca-name:       #c9a877;
    --cm-comarca-capital:    #ffb340;
    --cm-comarca-label:      #14100c;  /* stays dark: it outlines light text */
}

/* ── Map layout ──────────────────────────────────── */
.map-wrapper {
    position: relative;
    overflow: hidden; /* clearfix for float */
    margin: 0 auto;
    /* width and height set by resizeMap() JS */
}

#map {
    margin-left: 320px;
}

/* ── Text panel ──────────────────────────────────── */
#text {
    float: left;
    box-sizing: border-box;
    width: 320px;
    height: 100%;
    color: var(--cm-panel-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    padding: 0 1.5% 0 0;
    background: transparent;
    outline: none;
    overflow-y: auto;
}

/* ── Comarca name header ─────────────────────────── */
#comarcaName {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--cm-panel-rule);
}

#comarcaName h1 {
    color: var(--cm-panel-heading);
    font-family: Georgia, serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
    margin: 0 0 3px;
    padding: 0;
}

#comarcaName h2 {
    color: var(--cm-amber);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

/* ── Welcome text ────────────────────────────────── */
#contentText {
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cm-panel-body);
}

.selecciona-comarca {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cm-brown);
    text-align: center;
}

/* ── Icon strip ──────────────────────────────────── */
.inici {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.inici li { float: none; }
.inici img { height: 30px; }

/* ── Comarca list (mobile fallback) ──────────────── */
.llistaComarques,
.llistaComarques ul {
    margin: 0;
    padding: 0;
}

/* ── Comarca info panel ──────────────────────────── */
.cm-comarca-info {
    padding: 2px 0 0;
}

.cm-type-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cm-type-item {
    border-bottom: 1px solid var(--cm-panel-rule-2);
}

.cm-type-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    text-decoration: none;
    transition: background .12s;
}

.cm-type-item > a:hover {
    background: var(--cm-panel-hover);
    text-decoration: none;
}

.cm-type-item--zero {
    opacity: .32;
}

.cm-type-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.cm-type-name {
    flex: 1;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
}

.cm-type-count {
    font-size: 10.5px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--cm-panel-track);
    flex-shrink: 0;
}

/* ── Total row ───────────────────────────────────── */
.cm-type-total {
    border-top: 1px solid var(--cm-brown);
    border-bottom: none;
    margin-top: 1px;
}

.cm-type-total > a {
    padding: 4px 12px;
}

.cm-type-total .cm-type-name {
    color: var(--cm-brown);
    font-size: 12px;
    font-weight: 700;
}

.cm-type-total .cm-type-count {
    color: var(--cm-brown);
    font-size: 11px;
    font-weight: 700;
    background: var(--cm-panel-sunken);
}

/* ── Legend ──────────────────────────────────────── */
#legend {
    width: auto;
    height: auto;
    margin: 0 auto;
    position: absolute;
    bottom: 60px;
    right: 0;
    background: var(--cm-tooltip-bg);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px var(--cm-tooltip-shadow);
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.legend span {
    flex-shrink: 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: none;
}

/* ── Category colours ────────────────────────────── */
.legend .legend-militar  { background-color: var(--cm-militar);  }
.legend .legend-civil    { background-color: var(--cm-civil);    }
.legend .legend-religios { background-color: var(--cm-religios); }
.legend .legend-altres   { background-color: var(--cm-altres);   }

.legend-text-militar,  .legend-text-militar  a { color: var(--cm-militar);  }
.legend-text-civil,    .legend-text-civil    a { color: var(--cm-civil);    }
.legend-text-religios, .legend-text-religios a { color: var(--cm-religios); }
.legend-text-altres,   .legend-text-altres   a { color: var(--cm-altres);   }

.legend-bold { font-weight: bold; }

/* ── Animations ──────────────────────────────────── */
@keyframes cm-active {
    0%   { transform: scale(1,   1);   }
    90%  { transform: scale(.9, .88);  }
    100% { transform: scale(.92, .9);  }
}

@keyframes cm-hover {
    0%     { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }
    5.31%  { transform: matrix3d(1.051,0,0,0, 0,1.142,0,0, 0,0,1,0, 0,0,0,1); }
    14.41% { transform: matrix3d(1.115,0,0,0, 0,1.067,0,0, 0,0,1,0, 0,0,0,1); }
    44.04% { transform: matrix3d(1.096,0,0,0, 0,1.097,0,0, 0,0,1,0, 0,0,0,1); }
    100%   { transform: matrix3d(1.1,0,0,0, 0,1.1,0,0, 0,0,1,0, 0,0,0,1); }
}

/* ── Responsive ──────────────────────────────────── */
@media only screen and (min-width: 480px) {
    .map-wrapper     { visibility: hidden; }
    .llistaComarques { visibility: visible; }
}

@media only screen and (min-width: 960px) {
    .map-wrapper     { visibility: visible; }
    .llistaComarques { visibility: hidden; }
}

/* ── Veure Contingut button ──────────────────────── */
#veure-contingut { display: none; }