/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* Tricolore theme — bleu/blanc/rouge, shared with the static coming-soon
 * page at coming-soon/index.html. Scoped to the header bandeau, the
 * homepage lead content, and the footer, rather than reskinning every page. */
:root {
  --dld-bleu: #274b8c;
  --dld-blanc: #f7f6f2;
  --dld-rouge: #a3243b;
}

.bandeau-tricolore {
  height: 6px;
  display: flex;
}
.bandeau-tricolore span { flex: 1; }
.bandeau-tricolore .b { background: var(--dld-bleu); }
.bandeau-tricolore .w { background: var(--dld-blanc); }
.bandeau-tricolore .r { background: var(--dld-rouge); }

.navbar-brand--text {
  font-size: 1.05rem;
  line-height: 1.2;
  max-width: 22rem;
}

/* In-page section anchors (e.g. `## <a id="jeu-de-paume"></a>Titre`, used by
 * the fête nationale page and any future page with the same pattern) — the
 * `:empty` selector picks out these bare id markers without matching an
 * ordinary in-heading link like the wiki-linked title text next to them.
 * #header is `position: sticky` at ~73px tall (theme.css, body.header-fixed
 * #header), so jumping to #jeu-de-paume etc. would otherwise land the
 * heading right underneath it. */
h2 a[id]:empty {
  scroll-margin-top: 6rem;
}

/* Homepage subtitle (h2 right after h1) — tricolore bleu instead of the
 * theme's default accent, matching coming-soon's .soustitre. */
.title-center h1 + h2 {
  color: var(--dld-bleu);
}
:root[data-theme='dark'] .title-center h1 + h2 {
  color: #7fa0e6;
}

/* Homepage lead / footer — reuses the "devise" and "Article premier" quote
 * treatment from coming-soon/index.html. */
.dld-devise {
  color: var(--q2-text, #444);
}
.dld-article-premier {
  border-left: 3px solid var(--dld-rouge);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  text-align: left;
  background: rgba(163, 36, 59, 0.04);
}
.dld-article-premier cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-style: normal;
  color: #777;
}
:root[data-theme='dark'] .dld-article-premier {
  background: rgba(163, 36, 59, 0.12);
  border-left-color: #d1495e;
}
:root[data-theme='dark'] .dld-article-premier cite {
  color: #8b8a86;
}

.dld-cta {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--dld-bleu);
  border: 1px solid var(--dld-bleu);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
}
.dld-cta:hover {
  background: var(--dld-bleu);
  color: #fff;
}
:root[data-theme='dark'] .dld-cta {
  color: #7fa0e6;
  border-color: #7fa0e6;
}
:root[data-theme='dark'] .dld-cta:hover {
  background: #7fa0e6;
  color: #17181b;
}

#footer .dld-article-premier {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}
#footer .dld-footer-links {
  text-align: center;
  font-size: 0.9rem;
}
#footer .dld-footer-links a + a {
  margin-left: 1.25rem;
}

/* Timeline pages carry far more horizontal content (long event lists, wide
 * canvas) than a normal article, so the default ~960px content column reads
 * cramped. Widen just the pages that actually have a timeline — :has() lets
 * this target the shared .container without touching page frontmatter or
 * adding a body class — to 90% of the viewport, capped at 16in, and drop the
 * inner content-item's own 960px cap so it can use that width. The timeline
 * canvas itself stays at its existing 67%-of-parent width (see
 * .pp-timeline--inset__canvas below), so it simply gets more room rather
 * than changing proportion.
 *
 * The inner override needs the #body-wrapper prefix to match theme.css's
 * `#body-wrapper > .container > .content-item` selector's specificity (an ID
 * beats any number of classes) — without it, source order alone isn't
 * enough to win the cascade and the 960px cap silently stays in effect. */
.container:has(.pp-timeline--inset) {
  width: 90vw;
  max-width: 16in;
}
#body-wrapper > .container:has(.pp-timeline--inset) > .content-item {
  max-width: none;
}

/* Timeline inset — a small vis.js canvas floated inside the normal
 * content-item article card, with the preview panel's article text
 * wrapping around it like a pulled figure in a magazine layout, instead of
 * living in a separate column or a full-bleed band.
 *
 * This is preview-panel's `vis_timeline()` contract, not a plugin feature:
 * the plugin sets no width/float on `.pp-timeline` or its children and just
 * accepts a caller-supplied modifier class (see
 * plugins/preview-panel/README.md) — a page opts in with
 * `{{ vis_timeline(page.header.events, {class: 'pp-timeline--inset content-item'}) }}`.
 * Passing `content-item` alongside the modifier is what gives this wrapper
 * the same card look (background/padding/radius/shadow) as an ordinary
 * article — see theme.css's `#body-wrapper > .container > .content-item`.
 * default.html.twig only emits the *other*, real `.content-item` when the
 * page has body markdown, so an events-only page gets exactly one card, not
 * an empty one stacked above this one.
 */

/* The canvas floats, so without a clearfix the card collapses to zero
 * height and its own bottom padding/background stops short of the content
 * — the classic "background doesn't reach the float's bottom" bug. */
.pp-timeline--inset::after {
  content: "";
  display: table;
  clear: both;
}

.pp-timeline--inset > .pp-timeline__canvas {
  float: left;
  width: 67%;
  margin: 0 1.5rem 1rem 0;
}

/* The panel is plain wrapped article text here, not a separate box, so its
 * own chrome (background/border/padding) is neutralized — the outer
 * `.content-item` card supplies all of that instead. `--pp-*` overrides are
 * the plugin's documented theming hook (see preview-panel.css's header
 * comment); the literal properties need a selector this specific because
 * they're plain declarations in the plugin's stylesheet, not exposed as
 * custom properties. */
.pp-timeline--inset > .pp-panel {
  --pp-bg: transparent;
  --pp-border: transparent;
  border: none;
  padding: 0;
  min-height: 0;
}

/* Below this width there's no room for text to wrap beside the canvas
 * legibly — stack it above the panel text at full width instead. */
@media (max-width: 700px) {
  .pp-timeline--inset > .pp-timeline__canvas {
    float: none;
    width: auto;
    margin: 0 0 1.5rem;
  }
}

/* Essay/petition pages with a standalone sidebar preview panel — pages that
 * set `preview_panel: true` in frontmatter without a timeline, so
 * default.html.twig renders `.pp-panel` as `.content-item`'s direct sibling
 * rather than nesting it inside `.pp-timeline--inset`. Widen the container
 * the same way timeline pages do, and lay text + panel out as a 2:1 grid —
 * essay text two-thirds, Wikipedia preview panel one-third — matching the
 * "left column, ~1/3 of the viewport" option from the original design
 * brief. The `:has(> .content-item + .pp-panel)` selector is specific
 * enough that it never matches a `.pp-timeline--inset` page, where the
 * panel is nested rather than a direct sibling of `.container`.
 *
 * `default.html.twig` emits `.content-item` before `.pp-panel` (DOM/reading
 * order, so the essay text is what screen readers and "view source" meet
 * first) — without an explicit `order`, grid auto-placement puts DOM-first
 * content in the first (left) column, which put the panel on the *right*
 * despite this comment's own "left column" claim. `order` here only swaps
 * the *visual* column position; it never reflects to DOM/tab order, so
 * document flow stays essay-then-panel while the panel actually renders on
 * the left as intended. */
.container:has(> .content-item + .pp-panel) {
  width: 90vw;
  max-width: 16in;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: start;
}
#body-wrapper > .container:has(> .content-item + .pp-panel) > .content-item {
  max-width: none;
  order: 2;
}
.container:has(> .content-item + .pp-panel) > .pp-panel {
  order: 1;
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
/* Below this width there's no room for a 1/3-width sidebar to read
 * comfortably — stack the panel below the text at full width instead. */
@media (max-width: 900px) {
  .container:has(> .content-item + .pp-panel) {
    display: block;
    width: auto;
    max-width: none;
  }
  .container:has(> .content-item + .pp-panel) > .pp-panel {
    position: static;
    max-height: none;
  }
}

/* Language tabs (declaration text page) — pure CSS, no JS: each tab is a
 * hidden radio input, each label targets it via `for`, and the checked
 * input's general sibling selector reveals the matching panel. Works with
 * JS disabled and needs no shortcode/plugin. */
.dld-tabs input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dld-tabs__nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}
.dld-tabs__nav label {
  cursor: pointer;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  color: var(--q2-text, #444);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.dld-tabs__nav label:hover {
  color: var(--dld-bleu);
}

.dld-tabs__panel {
  display: none;
}
#dld-tab-fr:checked ~ .dld-tabs__panels #dld-panel-fr,
#dld-tab-en:checked ~ .dld-tabs__panels #dld-panel-en,
#dld-tab-en-elysee:checked ~ .dld-tabs__panels #dld-panel-en-elysee,
#dld-tab-es:checked ~ .dld-tabs__panels #dld-panel-es {
  display: block;
}
#dld-tab-fr:checked ~ .dld-tabs__nav label[for='dld-tab-fr'],
#dld-tab-en:checked ~ .dld-tabs__nav label[for='dld-tab-en'],
#dld-tab-en-elysee:checked ~ .dld-tabs__nav label[for='dld-tab-en-elysee'],
#dld-tab-es:checked ~ .dld-tabs__nav label[for='dld-tab-es'] {
  color: var(--dld-bleu);
  border-bottom-color: var(--dld-bleu);
}

:root[data-theme='dark'] .dld-tabs__nav {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
:root[data-theme='dark'] .dld-tabs__nav label:hover {
  color: #7fa0e6;
}
:root[data-theme='dark'] #dld-tab-fr:checked ~ .dld-tabs__nav label[for='dld-tab-fr'],
:root[data-theme='dark'] #dld-tab-en:checked ~ .dld-tabs__nav label[for='dld-tab-en'],
:root[data-theme='dark'] #dld-tab-en-elysee:checked ~ .dld-tabs__nav label[for='dld-tab-en-elysee'],
:root[data-theme='dark'] #dld-tab-es:checked ~ .dld-tabs__nav label[for='dld-tab-es'] {
  color: #7fa0e6;
  border-bottom-color: #7fa0e6;
}

.dld-declaration__articles {
  padding-left: 1.5rem;
}
.dld-declaration__articles li {
  margin-bottom: 1rem;
  line-height: 1.5;
}
.dld-declaration__source {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #777;
}
:root[data-theme='dark'] .dld-declaration__source {
  color: #8b8a86;
}