/*
 * DPIA shared visual foundation.
 *
 * This file intentionally styles only pages that opt in with `.dpia-ui`.
 * Individual page CSS can still own its layout without leaking into another
 * template.
 */
:root {
  --dpia-ink: #0d0f12;
  --dpia-paper: #f5f3ee;
  --dpia-surface: #ffffff;
  --dpia-surface-muted: #ede9e0;
  --dpia-accent: #d4521a;
  --dpia-accent-hover: #b94313;
  --dpia-link: #1a4fd4;
  --dpia-muted: #6b6860;
  --dpia-border: rgba(13, 15, 18, 0.12);
  --dpia-nav: #0d0f12;
  --dpia-nav-text: #f8f9fa;
  --dpia-radius: 14px;
  --dpia-shadow: 0 2px 24px rgba(13, 15, 18, 0.07);
  --dpia-font-display: "Syne", sans-serif;
  --dpia-font-body: "DM Sans", sans-serif;
}

body.dpia-ui {
  background-color: var(--dpia-paper);
  color: var(--dpia-ink);
  font-family: var(--dpia-font-body);
  line-height: 1.6;
}

.dpia-ui h1,
.dpia-ui h2,
.dpia-ui h3,
.dpia-ui h4,
.dpia-ui h5,
.dpia-ui h6 {
  font-family: var(--dpia-font-display);
}

/* Shared navigation appearance; each layout keeps its own markup and logic. */
.dpia-ui .dpia-site-nav {
  background: var(--dpia-nav) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 18px rgba(13, 15, 18, 0.16);
  color: var(--dpia-nav-text);
  min-height: 68px;
  z-index: 1030;
}

.dpia-ui .dpia-site-nav .navbar-brand,
.dpia-ui .dpia-site-nav .nav-logo {
  color: var(--dpia-nav-text);
  font-family: var(--dpia-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dpia-ui .dpia-site-nav .nav-logo span {
  color: var(--dpia-accent);
}

.dpia-ui .dpia-site-nav .nav-link,
.dpia-ui .dpia-site-nav .nav-mobile-trigger {
  color: rgba(248, 249, 250, 0.82) !important;
}

.dpia-ui .dpia-site-nav .nav-link:hover,
.dpia-ui .dpia-site-nav .nav-link:focus,
.dpia-ui .dpia-site-nav .nav-mobile-trigger:hover {
  color: #ffffff !important;
}

/* The priority page has a custom navbar; preserve its IDs and behaviour. */
.dpia-ui .dpia-site-nav > div {
  align-items: center;
}

.dpia-ui .dpia-site-nav .lang-btn {
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(248, 249, 250, 0.82);
}

.dpia-ui .dpia-site-nav .lang-btn:hover,
.dpia-ui .dpia-site-nav .lang-btn.active {
  background: rgba(212, 82, 26, 0.16);
  border-color: var(--dpia-accent);
  color: #ffffff;
}

.dpia-ui .btn-primary {
  background-color: var(--dpia-accent);
  border-color: var(--dpia-accent);
  color: #ffffff;
}

.dpia-ui .btn-primary:hover,
.dpia-ui .btn-primary:focus {
  background-color: var(--dpia-accent-hover);
  border-color: var(--dpia-accent-hover);
  color: #ffffff;
}

.dpia-ui a {
  text-underline-offset: 0.16em;
}

.dpia-ui :focus-visible {
  outline: 3px solid rgba(212, 82, 26, 0.38);
  outline-offset: 2px;
}

@media (max-width: 576px) {
  .dpia-ui .dpia-site-nav {
    min-height: 60px;
  }
}