/* History of France — overrides loaded after core/css/style.css. */

/* Intro background video (site.php 'intro.video'), shown on the welcome
   screen only. */
#bg-intro-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-bg);
}
body.intro-mode #bg-intro-video { opacity:1; }

/* Welcome-screen overlay: the busy intro video needs a darker timeline
   column and a band behind the intro message (centre-right), while the far
   right and top stay visible. */
#bg-overlay-intro {
  background:
    linear-gradient(to bottom, rgba(3,2,7,0.18) 0%, rgba(3,2,7,0.30) 100%),
    linear-gradient(to right,
      rgba(3,2,7,0.80) 0%,
      rgba(3,2,7,0.62) calc(var(--panel-w) - 60px),
      rgba(3,2,7,0.38) var(--panel-w),
      rgba(3,2,7,0.18) calc(var(--panel-w) + 200px),
      rgba(3,2,7,0)    calc(var(--panel-w) + 420px)
    ),
    radial-gradient(ellipse 50% 66% at 62% 48%,
      rgba(3,2,7,0.72) 0%,
      rgba(3,2,7,0.40) 55%,
      rgba(3,2,7,0)    100%
    ),
    linear-gradient(to top,
      rgba(3,2,7,0.62) 0%,
      rgba(3,2,7,0.38) 28%,
      rgba(3,2,7,0)    48%
    );
}

/* The "History of France" lockup (crest + wordmark) is drawn smaller than
   core's default logo width. */
#app-logo { width:180px; }
@media (max-width:1200px) { #app-logo { width:142.5px; } }
@media (max-width:960px)  { #app-logo { width:170px; } }
@media (max-width:760px)  { #app-logo { width:150px; } }
@media (max-width:520px)  { #app-logo { width:130px; } }

/* ════════════════════════════════════════
   MAP — "France Through Time" (js/france-map.js). Reuses core's .cm-* page,
   controls, panel and legend; these rules style the map layers (sea, land,
   one fading path per region, the modern border and the cities) and the
   panel parts shared with the other country maps. France is gold, its
   feudal realm a faint gold area with a dashed edge, the fiefs inside it
   dim gold, the colonies copper; other powers of the chapter green.
════════════════════════════════════════ */
.cm-year-note {
  margin-top:4px;
  font-family:var(--f-ui); font-size:13px; color:var(--white-dim);
}
.cm-year-note:empty { display:none; }
.cm-tip-dates { margin-top:3px; font-variant-numeric:tabular-nums; color:var(--white-dim); }

/* Chapter events: dates can be long ("October 1944 – January 1945"), so a
   wider, right-aligned year column with the day/month on a smaller line. */
.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 { 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);
}
.cm-events-heading { margin:30px 0 6px; }

/* Highlighted powers of the chapter, in their map colours. */
.cm-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.cm-chips[hidden] { display:none; }
.cm-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,0.14); border-radius:999px;
  background:rgba(255,255,255,0.03);
  font-family:var(--f-ui); font-size:13px; line-height:1.35; color:var(--white);
}

/* "Who Was in Power" in the year shown: the event modal's .em-power card,
   compacted for the panel. */
.em-power.cm-power { display:block; margin-top:4px; } /* beats .em-power's grid; the card grid below */
.em-power.cm-power[hidden] { display:none; }
.em-power.cm-power > .em-power-heading { margin:26px 0 10px; }
.cm-power-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap:10px 16px;
}
.cm-power .em-power-card { padding:6px 8px 6px 6px; border:1px solid rgba(255,255,255,0.1); border-radius:4px; gap:12px; }
.cm-power .em-power-portrait { width:42px; height:48px; }
.cm-power .em-power-name { font-size:16px; }
.cm-power .em-power-title,
.cm-power .em-power-reign { margin-top:2px; }

/* "France today" toggle among the map buttons. */
.cm-map-btns button[aria-pressed="true"] { color:var(--gold); }

.hm-sea { fill:#0a0f1a; }
.hm-land { fill:#1b1f2a; }
/* Each region path is shown (display) by france-map.js, then faded in with
   .is-on; a fading-out path no longer takes the pointer. */
.hm-regions path {
  stroke:#08060f; stroke-width:0.7; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity 0.45s ease, fill 0.6s ease, filter 0.15s ease;
}
.hm-regions path.is-on { opacity:1; pointer-events:auto; }
.hm-regions.is-instant path { transition:none; }
.hm-regions path:hover { filter:brightness(1.25); stroke:var(--gold); stroke-width:1.4; }
.hm-fr { fill:#c9a844; }
.hm-realm { fill:#c9a844; fill-opacity:0.2; }
.hm-regions path.hm-realm { stroke:#e3c66f; stroke-width:1.3; stroke-dasharray:6 4; }
.hm-vassal { fill:#8b7a45; }
.hm-vassal.hm-featured { fill:#b59a52; }
.hm-colony { fill:#c47a3c; }
/* The peoples of Caesar's Gaul: four gold shades. */
.hm-gaul0 { fill:#c9a844; }
.hm-gaul1 { fill:#dcc06a; }
.hm-gaul2 { fill:#a88a35; }
.hm-gaul3 { fill:#b9a25e; }
.hm-related { fill:#6f8f80; }
.hm-neighbor { fill:#3a3646; fill-opacity:0.92; }
/* Schematic areas (the peoples of Gaul), drawn for the map research. */
.hm-regions path.hm-approx { stroke:#f3e2b8; stroke-width:1.1; stroke-dasharray:4 3; }
.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;
  transition:opacity 0.3s ease;
}
.hm-ref.is-off { opacity:0; }
@media (prefers-reduced-motion: reduce) {
  .hm-regions path, .hm-ref { transition:none; }
}

/* Cities: radius, font size and halo are set in map units by
   france-map.js so they read at a constant screen size at every zoom; it
   also shows only the cities of the year and the ranks that fit the zoom
   (.is-on). Paris, the capital, has a gold dot. */
.hm-cities { pointer-events:none; }
.hm-city { opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0s linear 0.4s; }
.hm-city.is-on { opacity:1; visibility:visible; transition:opacity 0.4s ease; }
.hm-city circle { fill:#f4ecd6; stroke:#08060f; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.hm-city--cap circle { fill:var(--gold); }
.hm-city text {
  font-family:var(--f-heading); font-weight:600; fill:var(--white);
  paint-order:stroke; stroke:#08060f; stroke-linejoin:round;
}
@media (prefers-reduced-motion: reduce) {
  .hm-city { transition:none; }
}

/* Legend, chip and tooltip swatches */
.hm-sw { display:inline-block; width:11px; height:11px; flex:none; }
.hm-sw--fr, .hm-sw--gaul0 { background:#c9a844; }
.hm-sw--gaul1 { background:#dcc06a; }
.hm-sw--gaul2 { background:#a88a35; }
.hm-sw--gaul3 { background:#b9a25e; }
.hm-sw--realm { background:rgba(201,168,68,0.25); border:1px dashed #e3c66f; }
.hm-sw--vassal { background:#8b7a45; }
.hm-sw--colony { background:#c47a3c; }
.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 { width:18px; height:0; background:none; }
.hm-sw--ref { border-top:2px dashed #f1e6cf; }
.hm-sw--approx { background:transparent; border:1px dashed #f3e2b8; }

/* 52 keyframes on a stretched scale: france-map.js marks the labels that
   would collide at the track's width (the current one always shows). */
.cm-tick-labels button.hm-minor:not(.cur) { display:none; }
/* Keep the first and last keyframe 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) {
  /* The era count is set inline by france-map.js; wrap to rows here. */
  .cm-eras { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

/* Timeline and event modal map cards: the borders of the year. */
.em-map-thumb .hm-thumb-land { fill:#2a2633; }
.em-map-thumb .hm-thumb-fr,
.em-map-thumb [class^="hm-thumb-gaul"] { fill:var(--gold); filter:drop-shadow(0 0 6px rgba(201,168,68,0.6)); }
.em-map-thumb .hm-thumb-realm { fill:rgba(201,168,68,0.22); }
.em-map-thumb .hm-thumb-vassal { fill:#8b7a45; }
.em-map-thumb .hm-thumb-colony { fill:#c47a3c; }
.em-map-thumb .hm-thumb-related { fill:#5f7a6e; }
.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;
}