/* History of Hungary — overrides loaded after core/css/style.css. Only rules
   where Hungary's original stylesheet differs from core: the inline SVG logo, the "Hungary Through Time" map layers
   (js/hungary-map.js), the prime minister in "Who Was in Power", and the
   Princes of Transylvania tab icon. */


/* 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 — Princes of Transylvania (castle) tab icon; site.php gives
   the tab icon 'none', so it is drawn here in the tab's text colour.
════════════════════════════════════════ */
.rp-tab[data-tab="transylvania"]::before {
  content:''; flex-shrink:0; width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:var(--hu-tab-icon) center / contain no-repeat;
  mask:var(--hu-tab-icon) center / contain no-repeat;
  --hu-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 13.5h12M3.5 13.5V7l2-1.5V4h1v1L8 3.5 9.5 5V4h1v1.5l2 1.5v6.5M7 13.5v-3h2v3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════
   "Who Was in Power" — monarch and prime minister side by side (monarch
   first, as in the markup); the columns wrap to a stack once each would
   drop below ~200px, e.g. on phones.
════════════════════════════════════════ */
.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 — "Hungary Through Time" (js/hungary-map.js). Reuses core's .cm-*
   page, controls, panel and legend; these rules style the snapshot layers
   (land, cross-fading state layers, rivers, lakes, modern outline and
   featured-state names) and the snapshot events list.
════════════════════════════════════════ */
/* Snapshot events: dates can be long ("13–20 Jul 2026"), so a wider,
   right-aligned year column with the day/month on a smaller line below. */
.cm-events .ag-event { grid-template-columns:78px 9px minmax(0, 1fr); column-gap:16px; }
.cm-events .ag-event::before { left:98px; }
.cm-events .ag-event-year { white-space:normal; overflow-wrap:break-word; text-align:right; }
.cm-event-day {
  display:block; margin-top:2px;
  font-family:var(--f-ui); font-size:12px; line-height:1.3; letter-spacing:0.2px;
  color:rgba(255,255,255,0.45);
}

.hm-sea { fill:#0b0913; }
.hm-land { fill:#1d1a26; }
.hm-regions { transition:opacity 0.7s ease; }
.hm-regions.is-instant { transition:none; }
.hm-regions path {
  stroke:#08060f; stroke-width:0.7; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; cursor:pointer;
  transition:filter 0.15s ease;
}
.hm-regions path:hover { filter:brightness(1.25); stroke:var(--gold); stroke-width:1.4; }
.hm-focus { fill:#c9a844; }
.hm-related { fill:#6f8f80; }
.hm-neighbor { fill:#3a3646; fill-opacity:0.92; }
.hm-lakes { fill:#4f7f9c; opacity:0.85; pointer-events:none; }
.hm-rivers { fill:none; stroke:#5d8fae; stroke-width:1.3; vector-effect:non-scaling-stroke; opacity:0.85; pointer-events:none; }
.hm-ref {
  fill:none; stroke:#f1e6cf; stroke-width:1.4; stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke; opacity:0.8; pointer-events:none;
}
.hm-labels { opacity:0; pointer-events:none; }
.hm-labels.is-in { animation:hm-labels-in 0.7s ease forwards; }
@keyframes hm-labels-in { from { opacity:0; } to { opacity:1; } }
.hm-labels text {
  font-family:var(--f-heading); font-weight:700; letter-spacing:0.02em;
  fill:#140f08; text-anchor:middle;
  paint-order:stroke; stroke:rgba(241,213,150,0.55); stroke-width:0.25em; stroke-linejoin:round;
}
@media (prefers-reduced-motion: reduce) {
  .hm-regions { transition:none; }
  .hm-labels.is-in { animation:none; opacity:1; }
}

/* Legend and tooltip swatches */
.hm-sw { display:inline-block; width:11px; height:11px; flex:none; }
.hm-sw--focus { background:#c9a844; }
.hm-sw--related { background:#6f8f80; }
.hm-sw--neighbor { background:#3a3646; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18); }
.cm-lg i.hm-sw--ref,
.cm-lg i.hm-sw--river { width:18px; height:0; background:none; }
.hm-sw--ref { border-top:2px dashed #f1e6cf; }
.hm-sw--river { border-top:2px solid #5d8fae; }

/* 41 snapshots: label every other one (the current one always shows). */
.cm-tick-labels button.hm-minor:not(.cur) { display:none; }
/* Keep the first and last snapshot years inside the track. */
.cm-tick-labels button:first-child { transform:none; }
.cm-tick-labels button:last-child { transform:translateX(-100%); }
@media (max-width:900px) {
  .cm-tick-labels button.hm-minor4:not(.cur) { display:none; }
  /* The era count is set inline by hungary-map.js; wrap to rows here. */
  .cm-eras { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

/* Event modal / timeline map cards: the snapshot in force in the year. */
.em-map-thumb .hm-thumb-land { fill:#2a2633; }
.em-map-thumb .hm-thumb-focus { fill:var(--gold); filter:drop-shadow(0 0 6px rgba(201,168,68,0.6)); }
.em-map-thumb .hm-thumb-related { fill:#8a7a4a; }
.em-map-thumb .hm-thumb-ref {
  fill:none; stroke:#f1e6cf; stroke-width:1.2; stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke; opacity:0.6;
}