/* ═══════════════════════════════════════════════════════════════════════
   GESIS THEME — drop-in override for DSA Transparency Monitor
   ---------------------------------------------------------------------------
   Remaps the design tokens defined in app.css to the GESIS corporate palette
   (gesis.org/styleguide/farben) + Cabin / Source Sans typography.

   INSTALL
     1. Save this file as  static/css/gesis-theme.css
     2. Cabin + Source Sans 3 are self-hosted (see @font-face block below) —
        the font files live in static/fonts/cabin/ and
        static/fonts/source-sans-3/, each with its own OFL.txt licence
        (SIL Open Font License 1.1, free for commercial use, self-hosting
        explicitly permitted). No <link> to fonts.googleapis.com is needed
        or present — this also avoids the GDPR exposure of hotlinking Google
        Fonts (which sends every EU visitor's IP to Google at page load;
        German courts have ruled this requires consent without self-hosting).
        Load this stylesheet AFTER app.css:
          <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
          <link rel="stylesheet" href="{{ url_for('static', filename='css/gesis-theme.css') }}">
     3. Remove the Satoshi <link> (Fontshare) from base.html; this theme
        replaces it with Cabin + Source Sans and Satoshi is otherwise never
        rendered while this file is loaded.

   Because it only reassigns variables (same specificity, later source wins),
   your existing app.css structure, layout and dark-mode logic are untouched.
   Delete this file (and static/fonts/cabin, static/fonts/source-sans-3) to
   revert.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   SELF-HOSTED FONTS — Cabin + Source Sans 3, both SIL OFL 1.1 licensed
   (Google Fonts releases; licence text shipped alongside each font file).
   Variable fonts, one file covers the whole weight range used by this
   theme (Cabin 400–700, Source Sans 3 200–900) plus a separate italic file.
   ─────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin/Cabin-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabin';
  src: url('../fonts/cabin/Cabin-Italic-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3/SourceSans3-Variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3/SourceSans3-Italic-Variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ───────────────────────────────────────────────────────────────────────
   GESIS source palette (for reference / reuse)
   ─────────────────────────────────────────────────────────────────────── */
:root {
  --gs-darkblue: #003C78;  --gs-darkblue-hover: #002F5E;  --gs-darkblue-14: #DBE3EC;
  --gs-lightblue: #1E8CC8; --gs-lightblue-text: #1B7DB1;  --gs-lightblue-hover: #105F94;
  --gs-lightblue-14: #DFEFF7; --gs-lightblue-8: #EDF6FB;
  --gs-pink: #D20064;      --gs-pink-14: #F9DBE9;         --gs-pink-pressed: #920948;
  --gs-berry: #642878;     --gs-berry-25: #E9E1EC;
  --gs-turquoise: #64AFAF; --gs-turquoise-14: #E9F4F4;
  --gs-orange: #F08741;    --gs-orange-14: #FDEEE4;
  --gs-petrol: #006A82;    --gs-petrol-14: #DBEAED;
  --gs-olive: #699E6E;     --gs-olive-14: #EAF1EA;
  --gs-rust: #AA4137;      --gs-rust-14: #F3E4E2;
  --gs-grey: #808080;      --gs-default-grey: #F6F6F6;    --gs-divider: #E3E3E3;
}

/* ───────────────────────────────────────────────────────────────────────
   LIGHT THEME  — remap app.css :root tokens
   ─────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces & text */
  --bg:          #F6F6F6;
  --surface:     #FFFFFF;
  --surface-alt: #F4F4F4;
  --border:      #E3E3E3;
  --text:        #1A1A1A;
  /* #808080/#9AA0A6 (GESIS's nominal grey/grey-40) measured 3.65-3.95:1 and
     2.64:1 against --bg/--surface — both fail WCAG 1.4.3 AA's 4.5:1 for the
     small (10-14px) metadata text these are actually used for (stat labels,
     timestamps, table headers, AI confidence notes, etc.). Darkened to the
     nearest values that clear 4.5:1 on both --bg and --surface with a
     margin, verified via the sRGB relative-luminance formula. */
  --muted:       #6B6B6B;
  --muted-soft:  #6E6E6E;

  /* Interactive — GESIS light blue (link-text tint keeps small text AA on white) */
  --accent:      #1B7DB1;
  --accent-dark: #105F94;

  /* Fill for buttons/badges with near-white text on top (app.css's
     oklch(99% 0.005 262)). Separate from --accent because --accent also
     doubles as small link text, which has its own AA reasoning above.
     Precise near-white text (not pure #fff) resolves to ~L 0.972, which
     puts --accent itself at 4.43:1 here — just under the 4.5:1 line. Reuses
     --gs-lightblue-hover (#105F94), an existing cataloged GESIS colour,
     rather than inventing a new one: 6.62:1 verified. */
  --accent-fill:       #105F94;
  --accent-fill-hover: #0C4A73;

  /* Header — GESIS microsite banner (berry→darkblue→lightblue gradient SVG),
     white type. Tokens tuned for the banner background in BOTH themes. */
  --header-bg:     #003C78;
  --header-text:   #FFFFFF;
  --header-subtle: #C7E2F1;
  --header-dim:    rgba(255,255,255,.30);
  --header-btn-bg:    rgba(255,255,255,.10);
  --header-btn-bd:    rgba(255,255,255,.22);
  --header-btn-hover: rgba(255,255,255,.18);
  --header-btn-hbd:   rgba(255,255,255,.34);
  --header-lg-bg:     rgba(255,255,255,.08);
  --header-lg-bd:     rgba(255,255,255,.18);
  --header-lg-hover:  rgba(255,255,255,.16);

  --code-bg:  #F4F4F4;
  --hover-bg: #EDF6FB;

  /* Tooltip — dark-blue surface */
  --tooltip-bg:     #003C78;
  --tooltip-text:   #EAF2F8;
  --tooltip-border: #5980A7;

  /* Shadows — subtly blue-tinted, low contrast (GESIS motif) */
  --shadow-xs: 0 1px 2px rgba(0,60,120,.05);
  --shadow-sm: 0 1px 4px rgba(0,60,120,.07), 0 1px 2px rgba(0,60,120,.04);
  --shadow-md: 0 4px 18px rgba(0,60,120,.10), 0 2px 6px rgba(0,60,120,.05);
  --shadow-lg: 0 10px 36px rgba(0,60,120,.14), 0 4px 12px rgba(0,60,120,.07);

  /* Corners — GESIS is near-square; pills stay pill via 9999px in app.css */
  --radius:    6px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  /* ── Status — colour + shape (app.css keeps the ▲✕★✓ glyphs, so AA 1.4.1 holds) ──
     s-changed/s-new are also used as badge TEXT on their own -bg (10px bold,
     normal text under WCAG, not "large text") — the raw GESIS pink/light-blue
     only measured 4.16:1 / 3.86:1 there, under the 4.5:1 minimum. Darkened
     (same hue) to 4.9-5.0:1+ on their own -bg. s-unchanged/s-error/
     s-binary_changed already cleared 4.5:1 as-is. */
  --s-changed:        #BD005A;  --s-changed-bg:        #F9DBE9;   /* pink   — changed   */
  --s-unchanged:      #3F6144;  --s-unchanged-bg:      #EAF1EA;   /* olive  — unchanged */
  --s-error:          #AA4137;  --s-error-bg:          #F3E4E2;   /* rust   — error     */
  --s-new:            #176A96;  --s-new-bg:            #DFEFF7;   /* l.blue — new       */
  --s-binary_changed: #A15417;  --s-binary_changed-bg: #FDEEE4;   /* orange — bin. chg  */

  /* ── Diff ── */
  --diff-add:  #3F6144; --diff-add-bg: #EAF1EA; --diff-add-text: #2B4D30;
  --diff-del:  #AA4137; --diff-del-bg: #F3E4E2; --diff-del-text: #7A2019;
  --diff-eq-bg:   #FAFAFA;
  --diff-omit-bg: #F4F4F4;

  /* ── AI verdict palette ── */
  --v-minor: #F08741; --v-minor-bg: #FDEEE4; --v-minor-text: #9A5015;   /* orange */
  --v-mixed: #642878; --v-mixed-bg: #E9E1EC; --v-mixed-text: #4E1F60;   /* berry  */
                      --v-noise-bg: #E9F4F4; --v-noise-text: #006A82;   /* petrol */
}

/* ───────────────────────────────────────────────────────────────────────
   DARK THEME  — derive surfaces from dark blue, keep bright status foregrounds
   ─────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #06182B;
  --surface:     #0C2438;
  --surface-alt: #09202F;
  --border:      #1E3A52;
  --text:        #EAF2F8;
  --muted:       #8FA6BC;
  --muted-soft:  #A9BCCE;

  --accent:      #6DB4DB;
  --accent-dark: #A5D1E9;

  /* Fill for buttons/badges with near-white text on top — --accent itself
     (#6DB4DB) measured 2.22:1 against that text, live-rendered, nowhere
     close to AA. No cataloged GESIS blue lands in the L 0.126-0.179 window
     this needs (dark enough for 4.5:1 text contrast, light enough to stay
     ≥3:1 against the near-black dark-mode page background), so these are
     the same hue darkened/lightened using the sRGB relative-luminance
     formula, the same method already used for --muted and the status
     tokens above. */
  --accent-fill:       #156B9B; /* text 5.66:1, page-bg 3.07:1 */
  --accent-fill-hover: #1A76A8; /* text 4.86:1, page-bg 3.58:1 */

  /* Header sits on the same GESIS banner graphic in dark mode, so these
     mirror the light-theme banner-tuned values (white type on gradient) */
  --header-bg:     #003C78;
  --header-text:   #FFFFFF;
  --header-subtle: #C7E2F1;
  --header-dim:    rgba(255,255,255,.30);
  --header-btn-bg:    rgba(255,255,255,.10);
  --header-btn-bd:    rgba(255,255,255,.22);
  --header-btn-hover: rgba(255,255,255,.18);
  --header-btn-hbd:   rgba(255,255,255,.34);
  --header-lg-bg:     rgba(255,255,255,.08);
  --header-lg-bd:     rgba(255,255,255,.18);
  --header-lg-hover:  rgba(255,255,255,.16);

  --code-bg:  #06182B;
  --hover-bg: #12314A;

  --tooltip-bg:     #14314A;
  --tooltip-text:   #EAF2F8;
  --tooltip-border: #2E5474;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.30);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.38);
  --shadow-md: 0 4px 20px rgba(0,0,0,.48);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.58);

  --s-changed:        #E25A9B;  --s-changed-bg:        #3A1226;
  --s-unchanged:      #7FB98A;  --s-unchanged-bg:      #14301B;
  --s-error:          #D98A80;  --s-error-bg:          #3A1512;
  --s-new:            #6DB4DB;  --s-new-bg:            #0C2E44;
  --s-binary_changed: #F0A35F;  --s-binary_changed-bg: #3A2410;

  --diff-add:  #7FB98A; --diff-add-bg: #14301B; --diff-add-text: #A7D4AE;
  --diff-del:  #D98A80; --diff-del-bg: #3A1512; --diff-del-text: #E8B0A9;
  --diff-eq-bg:   #0C2438;
  --diff-omit-bg: #09202F;

  --v-minor: #F0A35F; --v-minor-bg: #3A2410; --v-minor-text: #F0A35F;
  --v-mixed: #B48BC4; --v-mixed-bg: #2A1633; --v-mixed-text: #C9A9D6;
                      --v-noise-bg: #0E2E33; --v-noise-text: #6FC0C0;
}

/* ───────────────────────────────────────────────────────────────────────
   TIER CHIPS — app.css sets .t1–.t4 with literal oklch (outside tokens),
   so remap them to the GESIS facet sequence here.
   ─────────────────────────────────────────────────────────────────────── */
.t1 { background: #DBEAED; color: #006A82; }   /* petrol    */
.t2 { background: #DFEFF7; color: #11527B; }   /* light blue */
.t3 { background: #E9E1EC; color: #642878; }   /* berry     */
.t4 { background: #FDEEE4; color: #AA4137; }   /* orange/rust */
[data-theme="dark"] .t1 { background: #0E2E33; color: #6FC0C0; }
[data-theme="dark"] .t2 { background: #0C2E44; color: #6DB4DB; }
[data-theme="dark"] .t3 { background: #2A1633; color: #C9A9D6; }
[data-theme="dark"] .t4 { background: #3A2410; color: #F0A35F; }

/* ───────────────────────────────────────────────────────────────────────
   TYPOGRAPHY — Cabin for display/headings, Source Sans for body/UI.
   (body hardcodes 'Satoshi' in app.css, so restate the families here.)
   ─────────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
}
h1, h2, h3, h4,
.brand,
.lede-heading, .meta-n, .stat .val, .sec-ttl,
.ai-title, .md h1, .md h2, .md h3 {
  font-family: 'Cabin', 'Trebuchet MS', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
/* Headings lean dark-blue in GESIS (light theme only — #003C78 on the near-
   black dark-theme --bg is ~1.6:1 contrast, well under WCAG AA). Dark theme
   uses the theme's own --accent, which is already tuned for AA on --bg. */
.lede-heading, .sec-ttl, .ai-title, .md h1, .md h2, .md h3 { color: var(--gs-darkblue); }
[data-theme="dark"] .lede-heading,
[data-theme="dark"] .sec-ttl,
[data-theme="dark"] .ai-title,
[data-theme="dark"] .md h1,
[data-theme="dark"] .md h2,
[data-theme="dark"] .md h3 { color: var(--accent); }

/* Primary-button glow: recolour app.css's hardcoded blue shadow to GESIS blue */
.btn-primary { box-shadow: 0 1px 4px rgba(30,140,200,.30); }

/* ───────────────────────────────────────────────────────────────────────
   GESIS MICROSITE BANNER — the sticky header carries the official banner
   graphic (Variante 07: berry → darkblue → lightblue). A translucent
   dark-blue overlay keeps white header text ≥ 4.5:1 over the banner.

   The banner art isn't a flat 3-stop gradient — it has a brighter glow/
   highlight element under where the nav links (About/Admin/Dark toggle)
   render. Measured directly from rendered pixels (screenshot + per-pixel
   luminance, not just the gradient's nominal stop colours): at the
   previous 28% overlay, contrast under those links was only ~2.9-4.0:1,
   well under WCAG 1.4.3 AA's 4.5:1 for normal text. 55% brings the
   worst measured spot to ~5.5:1 with a safety margin. Re-verify with
   real pixel sampling (not just the SVG's nominal colours) if the
   banner asset ever changes. ── */
header,
[data-theme="dark"] header {
  background:
    linear-gradient(rgba(0,30,60,.55), rgba(0,30,60,.55)),
    url(../img/gesis-banner-07.svg) center / cover no-repeat,
    var(--gs-darkblue);
  border-bottom: none;
}

/* ───────────────────────────────────────────────────────────────────────
   GESIS MICRO-HEADER — slim strip above the banner with the institute
   wordmark, linking to gesis.org (styleguide: layout/microsite/
   gesis-micro-header). Scrolls away; the app header below stays sticky.
   ─────────────────────────────────────────────────────────────────────── */
.gs-microheader {
  background: #FFFFFF;
  border-bottom: 1px solid var(--gs-divider);
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* "An offer from" is real text, not baked into the logo image (the
   previous asset had it flattened as vector paths inside the SVG itself —
   fragile to update, invisible to text search/translation, and tied to
   whatever logo variant happened to be live on gesis.org at fetch time).
   Kept small and muted so the logo remains the visual focus. */
.gs-microheader-attribution { font-size: 0.7143rem; color: var(--gs-grey); white-space: nowrap; }
.gs-microheader-link { display: inline-flex; align-items: center; }
/* Logo size matches GESIS's own microsite header, not our old shrunk-down
   guess: methodshub.gesis.org's header.microsite-header .logo-wrapper img
   is rendered at height:3.5rem (56px desktop) / height:3rem (48px at their
   960px breakpoint) — the img's height="…" HTML attribute is only a
   pre-CSS fallback, the rem values are what actually paints. Matching
   those exactly is comfortably clear of the WCAG 2.5.8 24x24 CSS px touch
   target minimum on its own, so no extra hit-area padding is needed here. */
.gs-microheader img { height: 3.5rem; width: auto; display: block; }
[data-theme="dark"] .gs-microheader {
  /* keep the strip white in dark mode: the wordmark is dark-blue type and
     must stay on white per the GESIS logo rules (print/logo-und-signet) */
  background: #FFFFFF;
  border-bottom-color: #1E3A52;
}
@media (max-width: 720px) {
  .gs-microheader { padding: 0.5rem 1.2857rem; }
  .gs-microheader img { height: 3rem; }
  .gs-microheader-attribution { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   GESIS FOOTER — the real, canonical GESIS footer, fetched from the
   official footer-syntax API (gesis.org/en/home?type=1740147428) rather
   than the earlier hand-built slim version. Two office locations, social
   media, the Leibniz Association affiliation logo, and legal nav — plus
   our own project link added into that nav. Class names match GESIS's own
   markup 1:1 (page-footer, contact-info, social-media-icons,
   leibniz-logo-wrapper, nav.footer) so this can be diffed against the live
   site if it ever needs re-syncing. Layout/colour rules below are adapted
   from the real gesis-web.css .page-footer rules onto our own rem scale
   and --gs-* tokens; content structure matches the fetched fragment as-is.
   ─────────────────────────────────────────────────────────────────────── */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

footer.page-footer {
  background-color: var(--gs-darkblue);
  border-top: 10px solid var(--gs-pink);
  padding: 3.5714rem 0 5.7143rem;
  color: #fff;
  margin-top: 3.4286rem;
}
footer.page-footer .page-footer--inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.7143rem;
}
@media (min-width: 992px) {
  footer.page-footer .page-footer--inner {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "contact-mannheim contact-koeln social-media"
      "contact-mannheim contact-koeln leibniz-logo"
      "contact-mannheim contact-koeln footer-nav";
    gap: 1.4286rem 2.8571rem;
    align-items: start;
  }
}
footer.page-footer .contact-info { font-size: 0.9286rem; line-height: 1.7; }
footer.page-footer .contact-info p + p { margin-top: 0.7143rem; }
footer.page-footer .contact-info b { font-weight: 700; }
footer.page-footer .contact-info a {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.55);
  transition: box-shadow .3s ease-in-out, color .3s ease-in-out;
}
footer.page-footer .contact-info a:hover,
footer.page-footer .contact-info a:focus-visible {
  color: #ED99C1;
  box-shadow: inset 0 -2px 0 0 #ED99C1;
}
footer.page-footer .contact-info.standort-mannheim { grid-area: contact-mannheim; }
footer.page-footer .contact-info.standort-koeln    { grid-area: contact-koeln; }

footer.page-footer .social-media-icons,
footer.page-footer .leibniz-logo-wrapper,
footer.page-footer nav.footer {
  justify-self: end;
}
footer.page-footer .social-media-icons {
  grid-area: social-media;
  display: flex;
  align-items: center;
  gap: 0.8571rem;
  font-size: 1.4286rem;
}
footer.page-footer .social-media-icons a { display: inline-flex; color: inherit; text-decoration: none; }
footer.page-footer .social-media-icons a:hover,
footer.page-footer .social-media-icons a:focus-visible { color: var(--gs-pink); }
footer.page-footer .leibniz-logo-wrapper { grid-area: leibniz-logo; width: 8.5714rem; max-width: 100%; }
footer.page-footer .leibniz-logo-wrapper img { width: 100%; display: block; }
footer.page-footer nav.footer { grid-area: footer-nav; display: flex; gap: 1.4286rem; flex-wrap: wrap; }
footer.page-footer nav.footer a {
  display: inline-block;
  color: #fff;
  font-size: 0.9286rem;
  text-decoration: none;
  /* Vertical padding brings the touch target to the WCAG 2.5.8 (AA) 24px
     minimum (text alone renders ~23px tall); the underline rides the link's
     own bottom edge so it moves down with it, not the text baseline. */
  padding: 0.25rem 0;
  box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.55);
  transition: box-shadow .3s ease-in-out, color .3s ease-in-out;
}
footer.page-footer nav.footer a:hover,
footer.page-footer nav.footer a:focus-visible {
  color: #ED99C1;
  box-shadow: inset 0 -2px 0 0 #ED99C1;
}

/* GESIS icon font — social media glyphs (Facebook/LinkedIn/Instagram/
   YouTube/Mastodon). BlueSky uses an inline SVG instead (self-contained,
   no font dependency), matching gesis.org's own markup exactly. */
@font-face {
  font-family: 'gesis-icons';
  src: url('../fonts/gesis-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
footer.page-footer [class^="gesis-icon-"] {
  font-family: 'gesis-icons' !important;
  font-style: normal;
  line-height: 1;
}
.gesis-icon-facebook:before  { content: "\e90e"; }
.gesis-icon-linkedin:before  { content: "\e90c"; }
.gesis-icon-instagram:before { content: "\e90d"; }
.gesis-icon-youtube:before   { content: "\e909"; }
.gesis-icon-mastodon:before  { content: "\e90b"; }

@media (max-width: 992px) {
  footer.page-footer .social-media-icons,
  footer.page-footer .leibniz-logo-wrapper,
  footer.page-footer nav.footer { justify-self: start; }
}
@media (max-width: 720px) {
  footer.page-footer { padding: 2.8571rem 0 4.2857rem; }
  footer.page-footer .page-footer--inner { padding: 0 1.2857rem; }
}