/* LDT Governance and Trust Framework — site styles on top of Material for MkDocs.
   Palette and type follow the LDT4SSC programme brand (ldt4ssc.eu): programme
   blue on near-white, navy ink, Helvetica-style type. One warm accent is kept
   outside the brand palette, for `[NEEDS OWNER]` and OPEN: a status system
   needs three states that are told apart at a glance, and blue alone cannot
   carry that. iSHARE's own marks and wording are untouched where they state
   ownership of the template and trust framework — see Legal notices. */

:root {
  --ldt-navy-900: #0F1823;
  --ldt-navy-800: #16202E;
  --ldt-navy-700: #1E2530;
  --ldt-blue-800: #164C8C;
  --ldt-blue-700: #1A5FAE;
  --ldt-blue-600: #1F75D6;
  --ldt-blue-500: #448FE4;
  --ldt-blue-300: #9FC6F2;
  --ldt-blue-200: #C8DFF5;
  --ldt-slate-600: #4C5562;
  --ldt-slate-400: #7D8896;
  --ldt-green: #29A329;
  --ldt-amber: #C8761A;
  --ldt-tint: #F5F6F8;
  --ldt-line: #E0E3E8;
  --ldt-font-head: "Inter", Helvetica, Arial, sans-serif;
}

/* ---------- Material colour tokens */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ldt-blue-600);
  --md-primary-fg-color--light: var(--ldt-blue-500);
  --md-primary-fg-color--dark: var(--ldt-blue-800);
  --md-accent-fg-color: var(--ldt-blue-700);
  --md-accent-fg-color--transparent: rgba(31, 117, 214, .07);
  --md-typeset-a-color: var(--ldt-blue-700);
  --md-footer-bg-color: var(--ldt-navy-800);
  --md-footer-bg-color--dark: var(--ldt-navy-900);
  --ldt-card-bg: #fff;
  --ldt-quote-bg: var(--ldt-tint);
  --ldt-quote-border: var(--ldt-blue-600);
  --ldt-answer-bg: #f4f8fd;
  --ldt-answer-border: #d3e2f4;
  --ldt-answer-accent: var(--ldt-blue-600);
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--ldt-blue-800);
  --md-primary-fg-color--light: var(--ldt-blue-600);
  --md-primary-fg-color--dark: var(--ldt-navy-900);
  --md-accent-fg-color: var(--ldt-blue-500);
  --md-accent-fg-color--transparent: rgba(68, 143, 228, .14);
  --md-typeset-a-color: var(--ldt-blue-300);
  --md-default-bg-color: #121A24;
  --md-footer-bg-color: #0D141D;
  --md-footer-bg-color--dark: #0A1018;
  --ldt-card-bg: #1A2532;
  --ldt-quote-bg: #1A2532;
  --ldt-quote-border: var(--ldt-blue-500);
  --ldt-answer-bg: #1B2736;
  --ldt-answer-border: #2E3F54;
  --ldt-answer-accent: var(--ldt-blue-500);
  --ldt-line: #2E3F54;
}

/* ---------- Layout
   The default Material column (61rem grid → ~690px of content) is right for
   prose and far too narrow for this scheme's tables: PD4 Table 3 and the
   section mapping were folding three columns of links into 200px-tall rows.
   So the grid gets wider and the *prose* keeps its old measure, which is the
   one thing that must not grow. Tables, answer cards and the home grid then
   use the whole column. */
.md-grid { max-width: 74rem; }

.md-typeset > p,
.md-typeset > ul:not(.grid),
.md-typeset > ol,
.md-typeset > dl,
.md-typeset > blockquote,
.md-typeset > .admonition,
.md-typeset .footnote > ol,
.ldt-answer > p,
.ldt-answer > ul,
.ldt-answer > ol { max-width: 34.5rem; }

/* Tables fill the column instead of shrink-wrapping to their content: a page
   of tables each ending at a different place is what reads as untidy. */
.md-typeset__table { display: block; width: 100%; padding: 0; }
.md-typeset table:not([class]) { display: table; width: 100%; }
/* Material pulls tables 0.8rem into the margin so narrow ones look centred.
   Now that they fill the column, that only misaligns them with the headings. */
.md-typeset__scrollwrap { margin-left: 0; margin-right: 0; }

/* ---------- Type */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4,
.md-header__topic, .md-tabs__link, .md-nav__title {
  font-family: var(--ldt-font-head);
}
.md-typeset h1 { font-weight: 700; letter-spacing: -.02em; color: var(--md-primary-fg-color); }
[data-md-color-scheme="slate"] .md-typeset h1 { color: #e6eef8; }
.md-typeset h2 { font-weight: 600; letter-spacing: -.01em; margin-top: 2.2em; }
.md-typeset h3 { font-weight: 700; }
.md-typeset { font-size: .82rem; line-height: 1.65; }
.md-tabs__link { font-weight: 600; font-size: .68rem; letter-spacing: .01em; }

/* ---------- Header
   The LDT4SSC wordmark is slate text with green/blue/yellow nodes, drawn for a
   light background — which is why ldt4ssc.eu has a white header. So in light
   mode the chrome is white with a blue rule under it and the mark keeps its own
   colours; the blue stays the accent rather than the background. Dark mode
   keeps a dark header and knocks the mark out in white, since slate on navy
   would not read. */
.md-header__button.md-logo :is(img, svg) { height: 1.45rem; width: auto; }

[data-md-color-scheme="default"] :is(.md-header, .md-tabs) {
  background-color: #fff;
  color: var(--ldt-navy-700);
}
[data-md-color-scheme="default"] .md-header { box-shadow: inset 0 -3px 0 var(--ldt-blue-600); }
[data-md-color-scheme="default"] .md-tabs { box-shadow: inset 0 -1px 0 var(--ldt-line); }
[data-md-color-scheme="default"] .md-tabs__link { color: var(--ldt-slate-600); opacity: 1; }
[data-md-color-scheme="default"] :is(.md-tabs__link:hover, .md-tabs__item--active .md-tabs__link) { color: var(--ldt-blue-600); }
[data-md-color-scheme="default"] .md-search__form { background-color: var(--ldt-tint); }
[data-md-color-scheme="default"] .md-search__form:hover { background-color: #ECEFF3; }
[data-md-color-scheme="default"] :is(.md-search__input, .md-search__icon) { color: var(--ldt-navy-700); }
[data-md-color-scheme="default"] .md-search__input::placeholder { color: var(--ldt-slate-400); }
[data-md-color-scheme="default"] .md-header__topic:last-child { color: var(--ldt-slate-600); }

[data-md-color-scheme="slate"] .md-header { box-shadow: inset 0 -3px 0 var(--ldt-blue-500); }
[data-md-color-scheme="slate"] .md-header__button.md-logo img { filter: brightness(0) invert(1); }
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link { color: var(--ldt-blue-200); }

/* ---------- Announcement bar */
.md-banner { background: var(--ldt-navy-700); color: #dfe6ef; font-size: .68rem; }
.md-banner a { color: var(--ldt-blue-300); font-weight: 600; }
.md-banner strong { color: #fff; }
.announce__chip {
  display: inline-block; margin-right: .5em; padding: .1em .6em;
  border-radius: 999px; background: var(--ldt-blue-500); color: var(--ldt-navy-900);
  font: 700 .62rem/1.6 var(--ldt-font-head); letter-spacing: .02em; vertical-align: 1px;
}
/* The banner used to orphan "2026" on a line of its own at common widths. */
.announce__fact { white-space: nowrap; }
.announce__sep { opacity: .5; padding: 0 .15em; }

/* One tidy row from tablet up; on a phone it stays ordinary inline text so the
   dismiss button keeps the place Material gives it. */
@media screen and (min-width: 45em) {
  .md-banner__inner { display: flex; align-items: baseline; gap: .55em; }
  .md-banner__button { order: 3; margin-left: auto; align-self: center; }
  .announce__chip { flex: 0 0 auto; margin-right: 0; }
  .announce__text { min-width: 0; text-wrap: balance; }
}

/* ---------- Blockquotes: the per-page fork notice and theme purposes */
.md-typeset blockquote {
  background: var(--ldt-quote-bg);
  border-left: 3px solid var(--ldt-quote-border);
  border-radius: 0 10px 10px 0;
  padding: .6em 1em;
  color: var(--md-default-fg-color);
  font-size: .95em;
}
.md-typeset blockquote > :first-child { margin-top: 0; }
.md-typeset blockquote > :last-child { margin-bottom: 0; }

/* ---------- Tables */
.md-typeset table:not([class]) { font-size: .74rem; border: 1px solid var(--ldt-line); border-radius: 10px; overflow: hidden; }
.md-typeset table:not([class]) th { background: var(--md-primary-fg-color); color: #fff; font-family: var(--ldt-font-head); font-weight: 600; }
.md-typeset table:not([class]) th:empty { padding: 0; height: 0; }
.md-typeset table:not([class]) tr:nth-child(even) td { background: var(--md-accent-fg-color--transparent); }
.md-typeset table:not([class]) td { vertical-align: top; }

/* ---------- Provenance badges & status pills (rendered by tools/mkdocs_hooks.py) */
.prov, .status {
  display: inline-block; padding: .05em .55em .1em; border-radius: 999px;
  font: 700 .62rem/1.7 var(--ldt-font-head); letter-spacing: .03em; text-transform: uppercase;
  vertical-align: .1em; white-space: nowrap;
}
.prov { margin-right: .25em; }
.prov--decided     { background: var(--ldt-blue-600); color: #fff; }
.prov--proposed    { background: var(--ldt-blue-200); color: var(--ldt-navy-900); }
.prov--needs-owner { background: var(--ldt-amber);    color: #fff; }
.status { border: 1.5px solid currentColor; font-size: .58rem; }
.status--open     { color: var(--ldt-amber); }
.status--todo     { color: var(--ldt-amber); }
.status--drafted  { color: #b58900; }
[data-md-color-scheme="slate"] .status--drafted { color: #E0A23D; }
.status--reviewed { color: var(--ldt-blue-600); }
.status--approved { color: #5a9a1f; }
[data-md-color-scheme="slate"] .status--approved { color: var(--ldt-green); }

/* ---------- Answer cards on the guiding-questions pages */
.ldt-answer {
  margin: 1.2em 0 2em; padding: 1em 1.25em 1.1em 1.5em;
  background: var(--ldt-answer-bg); border: 1px solid var(--ldt-answer-border);
  border-left: 4px solid var(--ldt-answer-accent);
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 1px 2px rgba(15,24,35,.04), 0 8px 24px rgba(22,76,140,.06);
}
[data-md-color-scheme="slate"] .ldt-answer { box-shadow: none; }

/* A table inside an answer card stays inside it — Material's scroll wrapper
   pulls tables 0.8rem into the margin, which cut through the card edge. */
.ldt-answer .md-typeset__scrollwrap { margin-left: 0; margin-right: 0; }
.ldt-answer .md-typeset__table { padding: 0; }
.ldt-answer__head {
  margin: 0 0 .8em !important; padding-bottom: .6em; border-bottom: 1px dashed var(--ldt-answer-border);
  font-size: .72rem; color: var(--md-default-fg-color--light);
}
.ldt-answer__label {
  display: inline-block; margin-right: .4em; padding: .05em .6em;
  background: var(--md-primary-fg-color); color: #fff; border-radius: 6px;
  font: 700 .62rem/1.8 var(--ldt-font-head); text-transform: uppercase; letter-spacing: .04em;
}
.ldt-answer > p:last-child { margin-bottom: 0; }
.ldt-answer p { margin: 0 0 .7em; }

/* The template's questions on guiding-questions pages: a quieter list */
.md-typeset ul > li > em:only-child { color: var(--md-default-fg-color--light); }

/* ---------- Home page */
.ldt-hero {
  margin: 0 0 2rem; padding: 2rem 2.2rem 1.8rem;
  border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, var(--ldt-navy-700) 0%, var(--ldt-blue-700) 45%, var(--ldt-blue-500) 100%);
}
.ldt-hero h1 { color: #fff !important; margin: 0 0 .3em; font-size: 2.1em; }
.ldt-hero p { max-width: 42em; font-size: 1.05em; margin: 0 0 1em; color: rgba(255,255,255,.92); }
.md-typeset .ldt-hero ul.ldt-facts { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: 0 0 1.2em; padding: 0; list-style: none; }
.md-typeset .ldt-hero ul.ldt-facts > li {
  display: inline-block; margin: 0; padding: .2em .8em; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  font-size: .7rem; font-family: var(--ldt-font-head); font-weight: 600;
  color: rgba(255,255,255,.72);
}
.ldt-hero .ldt-facts li strong { color: #fff; font-weight: 700; }
.ldt-hero :is(p):has(> .md-button) { display: flex; flex-wrap: wrap; gap: .6rem; max-width: none; }
.ldt-hero .md-button { margin: 0; border-color: rgba(255,255,255,.7); }
.ldt-hero .md-button--primary { background: #fff; color: var(--ldt-blue-700); border-color: #fff; }
.ldt-hero .md-button:not(.md-button--primary) { color: #fff; }
.ldt-hero .md-button:hover { background: var(--ldt-blue-200); color: var(--ldt-navy-900); border-color: var(--ldt-blue-200); }

.md-typeset .grid.cards > ul > li {
  border-radius: 14px; border-color: var(--ldt-line); background: var(--ldt-card-bg);
  transition: box-shadow .2s, border-color .2s;
}
.md-typeset .grid.cards > ul > li:hover { border-color: var(--ldt-blue-500); box-shadow: 0 10px 28px rgba(31,117,214,.14); }
.md-typeset .grid.cards > ul > li > hr { border-color: var(--ldt-line); }
.md-typeset .grid.cards > ul > li > p:first-child { font-family: var(--ldt-font-head); font-weight: 700; font-size: .9rem; color: var(--md-primary-fg-color); }
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li > p:first-child { color: #e6eef8; }
.md-typeset .grid.cards .twemoji { color: var(--ldt-blue-600); }

/* ---------- Footer */
.md-footer-meta { font-size: .66rem; }
.md-copyright { width: 100%; max-width: none; }
.md-copyright__funding { display: flex; gap: .8em; align-items: center; margin: .4em 0 .6em; max-width: 60em; }
.eu-flag { flex: 0 0 auto; width: 3.2rem; height: auto; border-radius: 3px; }
.md-copyright__highlight { opacity: .75; }

/* ---------- Small screens */
@media screen and (max-width: 44.9375em) {
  .ldt-hero { padding: 1.4rem 1.2rem; border-radius: 14px; }
  .ldt-hero h1 { font-size: 1.6em; }
}

/* ---------- Late tweaks */
.md-typeset .ldt-hero p strong { color: #fff; font-weight: 700; }
.md-typeset .ldt-hero > h1 { font-family: var(--ldt-font-head); }
/* no "edit this page" pencil floating over the home hero */
.md-content__inner:has(.ldt-hero) > .md-content__button { display: none; }