/* ============================================================
   Deutsch Uben - shared design system
   One palette, one type scale, one set of controls for every
   page. Load AFTER Bootstrap so these win where they overlap.
   ============================================================ */

:root {
  /* ---- ink & ground ---- */
  --du-ink: #19324a;
  --du-ink-deep: #12283c;
  --du-ink-soft: #2c4a67;
  --du-muted: #64798d;
  --du-faint: #8fa0b0;

  --du-paper: #f4f1e9;
  --du-surface: #fffdf8;
  --du-surface-2: #f7f3ea;
  --du-line: #e3ddd0;
  --du-line-strong: #cfc6b4;

  /* ---- accents ---- */
  --du-accent: #e28a58;         /* brand mark, on dark */
  --du-action: #c86b3c;         /* action, on light */
  --du-action-dark: #8f4327;
  --du-success: #2f7d62;
  --du-danger: #b5493f;

  /* ---- level colours (shared by every page) ---- */
  --du-a1: #2f7d62;
  --du-a2: #a8802c;
  --du-b1: #b0573f;
  --du-b2: #8f4327;

  /* ---- article / gender colours ---- */
  --du-der: #3f6f9f;
  --du-die: #b85b67;
  --du-das: #bd843e;

  /* ---- type ---- */
  --du-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --du-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
             "Liberation Mono", monospace;

  /* ---- shape ---- */
  --du-r-sm: 8px;
  --du-r: 12px;
  --du-r-lg: 16px;
  --du-shadow: 0 1px 0 rgba(25, 50, 74, .04), 0 14px 30px -22px rgba(25, 50, 74, .5);
  --du-shadow-sm: 0 1px 2px rgba(25, 50, 74, .06);

  /* ---- control metrics ---- */
  --du-control-h: 34px;
  --du-control-h-sm: 30px;
}

/* ============================================================
   Base
   ============================================================ */

body {
  font-family: var(--du-font);
  color: var(--du-ink);
  background: var(--du-paper);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Site navigation (identical on every page)
   ============================================================ */

.site-navbar {
  width: 100%;
  min-height: 54px;
  padding: 7px 20px;
  background: var(--du-ink);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
  font-family: var(--du-font);
}

.site-brand {
  color: #fffaf2;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand span { color: var(--du-accent); }
.site-brand:hover { color: #fff; }

.site-links {
  display: none;
  width: 100%;
  flex-basis: 100%;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.site-links.is-open { display: flex; }

.site-link {
  padding: 10px 12px;
  border-radius: var(--du-r-sm);
  color: rgba(255, 250, 242, .74);
  font: 600 .76rem var(--du-font);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.site-link:hover { background: rgba(255, 255, 255, .1); color: #fffaf2; }
.site-link.active { background: #fffaf2; color: var(--du-ink); }

.site-navbar { flex-wrap: nowrap; }

.site-nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 250, 242, .35);
  border-radius: var(--du-r-sm);
  background: transparent;
  cursor: pointer;
}

.site-nav-toggle:hover { border-color: rgba(255, 250, 242, .65); }

.site-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fffaf2;
  border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}

.site-nav-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.site-nav-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Micro label - the small uppercase caption before a control row
   ============================================================ */

.du-label {
  color: var(--du-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   Buttons
   ============================================================ */

.du-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--du-control-h);
  padding: 0 14px;
  border: 1px solid var(--du-line);
  border-radius: var(--du-r-sm);
  background: var(--du-surface);
  color: var(--du-ink-soft);
  font: 600 .82rem var(--du-font);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.du-btn:hover { border-color: var(--du-line-strong); color: var(--du-ink); }
.du-btn:active { transform: translateY(1px); }
.du-btn:disabled { opacity: .5; cursor: default; transform: none; }

.du-btn.is-sm { height: var(--du-control-h-sm); padding: 0 12px; font-size: .76rem; }

.du-btn.is-primary {
  background: var(--du-ink);
  border-color: var(--du-ink);
  color: #fffaf2;
}

.du-btn.is-primary:hover { background: var(--du-ink-deep); border-color: var(--du-ink-deep); color: #fff; }

.du-btn.is-accent {
  background: var(--du-action);
  border-color: var(--du-action);
  color: #fff;
}

.du-btn.is-accent:hover { background: var(--du-action-dark); border-color: var(--du-action-dark); }

/* ============================================================
   Pills - filter chips
   ============================================================ */

.du-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--du-control-h-sm);
  padding: 0 12px;
  border: 1px solid var(--du-line);
  border-radius: 999px;
  background: var(--du-surface);
  color: var(--du-muted);
  font: 600 .75rem var(--du-font);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
}

.du-pill:hover { border-color: var(--du-line-strong); color: var(--du-ink); }
.du-pill.is-active { background: var(--du-ink); border-color: var(--du-ink); color: #fff; }

/* ============================================================
   Fields
   ============================================================ */

.du-field {
  height: var(--du-control-h);
  padding: 0 12px;
  border: 1px solid var(--du-line);
  border-radius: var(--du-r-sm);
  background: var(--du-surface);
  color: var(--du-ink);
  font: 400 .85rem var(--du-font);
  outline: none;
  transition: border-color .15s;
}

.du-field:focus { border-color: var(--du-action); }
.du-field::placeholder { color: var(--du-faint); }

select.du-field {
  padding-right: 30px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364798d'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
}

/* ============================================================
   Surfaces
   ============================================================ */

.du-card {
  background: var(--du-surface);
  border: 1px solid var(--du-line);
  border-radius: var(--du-r-lg);
  box-shadow: var(--du-shadow);
}

/* ============================================================
   Level badges - same colours everywhere
   ============================================================ */

.du-level {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font: 700 .66rem var(--du-mono);
  letter-spacing: .04em;
}

.du-level.A1 { background: var(--du-a1); }
.du-level.A2 { background: var(--du-a2); }
.du-level.B1 { background: var(--du-b1); }
.du-level.B2 { background: var(--du-b2); }

/* ============================================================
   Bootstrap buttons - retuned to the palette.
   Bootstrap 5.3 drives every button from --bs-btn-* custom
   properties, so overriding those is enough.
   ============================================================ */

.btn-dark {
  --bs-btn-bg: var(--du-ink);
  --bs-btn-border-color: var(--du-ink);
  --bs-btn-hover-bg: var(--du-ink-deep);
  --bs-btn-hover-border-color: var(--du-ink-deep);
  --bs-btn-active-bg: var(--du-ink-deep);
  --bs-btn-active-border-color: var(--du-ink-deep);
}

.btn-primary {
  --bs-btn-bg: var(--du-ink);
  --bs-btn-border-color: var(--du-ink);
  --bs-btn-hover-bg: var(--du-ink-deep);
  --bs-btn-hover-border-color: var(--du-ink-deep);
  --bs-btn-active-bg: var(--du-ink-deep);
  --bs-btn-active-border-color: var(--du-ink-deep);
}

.btn-outline-secondary {
  --bs-btn-color: var(--du-ink-soft);
  --bs-btn-border-color: var(--du-line);
  --bs-btn-bg: var(--du-surface);
  --bs-btn-hover-bg: var(--du-surface-2);
  --bs-btn-hover-color: var(--du-ink);
  --bs-btn-hover-border-color: var(--du-line-strong);
  --bs-btn-active-bg: var(--du-ink);
  --bs-btn-active-border-color: var(--du-ink);
}

.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(200, 107, 60, .3); }

.form-control, .form-select {
  border-color: var(--du-line);
  background-color: var(--du-surface);
  color: var(--du-ink);
}

.form-control:focus, .form-select:focus {
  border-color: var(--du-action);
  box-shadow: 0 0 0 .2rem rgba(200, 107, 60, .18);
}

/* ============================================================
   Bootstrap modals - reskinned to match
   ============================================================ */

.modal-content {
  border: 1px solid var(--du-line);
  border-radius: var(--du-r-lg);
  background: var(--du-surface);
  color: var(--du-ink);
}

.modal-header, .modal-footer { border-color: var(--du-line); }
.modal-title { color: var(--du-ink); font-weight: 700; }

@media (max-width: 640px) {
  .site-navbar { gap: 10px; padding: 7px 14px; }
}