/* History of Belgium — overrides loaded after core/css/style.css: the inline
   SVG logo, four rulers-tab icons, ten At a Glance ages in one row, the
   head of government in "Who Was in Power", and the "Belgium Through Time"
   map layers (js/belgium-map.js), which reuse core's .cm-* map page. */

/* Inline SVG logo (partials/logo.php, site.php logo_partial) — sized like
   the image logo of the other sites. */
#app-logo.app-logo-svg { height:auto; overflow:visible; }

/* ════════════════════════════════════════
   Rulers page — Romans & Franks (laurel), Counts, Dukes & Bishops (mitre),
   Burgundy, Habsburgs & France (double eagle) and Kings of the Belgians
   (lion) tab icons; site.php gives those tabs icon 'none', so they are drawn
   here in the tab's text colour.
════════════════════════════════════════ */
.rp-tab[data-tab="ancient"]::before,
.rp-tab[data-tab="medieval"]::before,
.rp-tab[data-tab="habsburg"]::before,
.rp-tab[data-tab="kingdom"]::before {
  content:''; flex-shrink:0; width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:var(--be-tab-icon) center / contain no-repeat;
  mask:var(--be-tab-icon) center / contain no-repeat;
}
.rp-tab[data-tab="ancient"] {
  --be-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 14C2.6 12.3 1.6 8.4 3.2 4.6M10.5 14c2.9-1.7 3.9-5.6 2.3-9.4M3.4 11.3l-1.6.4M2.4 8.6l-1.5-.3M2.6 6l-1.2-.9M12.6 11.3l1.6.4M13.6 8.6l1.5-.3M13.4 6l1.2-.9' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.rp-tab[data-tab="medieval"] {
  --be-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 14.5V7.5C4 4.8 6 2.7 8 1.5c2 1.2 4 3.3 4 6v7zM8 4.5v5M6 6.8h4M4 12h8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.rp-tab[data-tab="habsburg"] {
  --be-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v9M8 6.5C6.6 4.6 4.2 4 1.5 4.6c.8 2.4 2.7 4.2 5 4.6M8 6.5c1.4-1.9 3.8-2.5 6.5-1.9-.8 2.4-2.7 4.2-5 4.6M6 13.5h4M6.6 2.5L8 1.5l1.4 1M5.5 2.8L4.8 4M10.5 2.8l.7 1.2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.rp-tab[data-tab="kingdom"] {
  --be-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2.5h12v6.2c0 2.9-2.6 4.8-6 5.8-3.4-1-6-2.9-6-5.8zM6 10.5l.8-2.5-1.6-1.2 1-.9 1.3.4L8.6 5l1.2 1.1-.6 1.5 1.3 1.3-.9 1.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════
   At a Glance — ten ages: one column per age, all in a single row (core
   lays out eight); bibliography in four columns.
════════════════════════════════════════ */
@media (min-width:901px) {
  .ag-era-list { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
}
.bib-groups { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1100px) {
  .bib-groups { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════
   "Who Was in Power" — the ruler beside the head of government; the
   coloured line under the side card names the party. The columns stack
   once each would drop below ~200px.
════════════════════════════════════════ */
.em-power {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:12px 20px;
  align-items:start;
}
.em-power > .em-power-heading { grid-column:1 / -1; margin-bottom:1px; }
a.em-power-card--pm { color:inherit; text-decoration:none; }
.em-power-party {
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-ui); font-size:13px; line-height:1.3; color:var(--white-dim);
}
.em-power-party i { width:9px; height:9px; border-radius:50%; flex:none; }

/* ════════════════════════════════════════
   MAP — "Belgium Through Time" (js/belgium-map.js), as in the prototype
   data/belgium-map.html: the sea, the land, the territories of the snapshot
   (cross-fading between snapshots), the dashed outline of modern Belgium,
   the territory labels and the Central Africa inset.
════════════════════════════════════════ */
.bx-sea { fill:#0b1220; }
.bx-land { fill:#1b1a21; stroke:none; }
.bx-r {
  stroke:rgba(8,7,11,0.75); stroke-width:0.8; stroke-linejoin:round; opacity:0;
  transition:opacity 0.9s cubic-bezier(.4,0,.2,1), stroke 0.3s; vector-effect:non-scaling-stroke;
}
.bx-r.on { opacity:0.92; }
.bx-r.neighbor.on, .bx-r.water.on { opacity:1; }
.bx-r.water { stroke:none; }
.bx-r.related.on { opacity:0.62; }
.bx-r.on:hover { stroke:#fff; stroke-width:2; opacity:1; }
.bx-r:not(.on) { pointer-events:none; }
.bx-ref {
  fill:none; stroke:rgba(255,255,255,0.75); stroke-width:1.3; stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke; pointer-events:none;
}
.bx-labels { pointer-events:none; }
.bx-lab {
  font-family:var(--f-ui); font-weight:600; fill:#fff;
  paint-order:stroke; stroke:rgba(0,0,0,0.65); stroke-linejoin:round;
  text-anchor:middle; dominant-baseline:middle; letter-spacing:0.2px;
  opacity:0; transition:opacity 0.9s cubic-bezier(.4,0,.2,1);
}
.bx-lab.on { opacity:0.95; }
.bx-lab.on.hid { opacity:0; }
.bx-lab.related { font-weight:500; fill:rgba(255,255,255,0.85); }
.bx-lab.neighbor { font-weight:400; fill:rgba(255,255,255,0.6); }

/* Central Africa inset (1885–1960), top right of the map, beside the zoom
   buttons. */
.bx-inset {
  position:absolute; right:calc(var(--cm-side-w) + 94px); top:16px; width:min(22%, 190px); z-index:2;
  background:rgba(8,7,11,0.82); border:1px solid rgba(201,168,68,0.22); border-radius:10px;
  padding:8px 8px 6px; opacity:0; transform:translateY(8px);
  transition:opacity 0.9s, transform 0.9s; pointer-events:none;
}
.bx-inset.on { opacity:1; transform:none; }
.bx-inset h4 {
  font-family:var(--f-ui); font-size:11px; letter-spacing:1.5px; color:var(--gold, #c9a844);
  margin:0 0 4px; text-transform:uppercase;
}
.bx-inset svg { width:100%; height:auto; display:block; }
.bx-i-land { fill:#2a2931; }
.bx-i-congo { fill:#f2c230; transition:fill 0.9s, opacity 0.9s; }
.bx-i-ruanda { fill:#d9853b; transition:opacity 0.9s; }
.bx-inset p { font-family:var(--f-ui); font-size:11px; color:var(--white-mid); line-height:1.35; margin:4px 0 0; }
@media (max-width:900px) {
  .bx-inset { right:64px; width:min(34%, 170px); }
}

/* Legend: the states of the snapshot shown (related ones lighter). */
.cm-lg--trad { grid-template-columns:repeat(2, minmax(0, auto)); }
.cm-lg--trad span { cursor:default; }
.cm-lg--trad span.related i { opacity:0.62; }
.cm-lg i { border-radius:2px; }
.cm-lg i.bx-key-focus { background:linear-gradient(90deg, #e0b84a, #c8553d, #8e5ea2, #4f9d69); }
.cm-lg i.bx-key-related { background:#e67e22; opacity:0.62; }
.cm-lg i.bx-key-neighbor { background:#2c2b33; border:1px solid rgba(255,255,255,0.15); }
.cm-lg i.bx-key-ref { background:none; border:1.5px dashed rgba(255,255,255,0.8); }

/* "Belgium in YEAR" thumbnails (event modal, timeline corner card): the
   land under the territories, modern Belgium dashed. */
.em-map-thumb svg .bx-thumb-land { fill:#1b1a21; stroke:none; }
.em-map-thumb svg .bx-thumb-ref { fill:none; stroke:rgba(255,255,255,0.7); stroke-width:3; stroke-dasharray:9 6; }

/* Ten era buttons; 28 snapshots (belgium-map.js marks the year labels that
   would collide; the current one always shows). */
.cm-eras { grid-template-columns:repeat(10, minmax(0, 1fr)); }
.cm-eras button { padding-left:4px; padding-right:4px; }
.cm-tick-labels button.thin:not(.cur) { visibility:hidden; }
.cm-tick-labels button:first-child { transform:none; }
.cm-tick-labels button:last-child { transform:translateX(-100%); }
@media (max-width:900px) {
  .cm-eras { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width:600px) {
  .cm-lg--trad { grid-template-columns:minmax(0, 1fr); }
}