/* provapp — shared styles for secondary pages (about, methodology, privacy, tips, terms)
   Tokens mirror index.html (amber + white, no dark mode on the marketing site). */
:root {
  --amber-900: #6C240A;
  --amber-700: #B43C0A;
  --amber-500: #EA580C;
  --amber-200: #FED7AA;
  --amber-100: #FFEDD5;
  --card: #FFFBF5;
  --white: #FFFFFF;
  --ink: #431407;
  --ink-soft: #7C4A2A;
  --good: #15803D;
  --bad: #B91C1C;
  --radius: 18px;
  --shadow: 0 18px 48px rgba(67, 20, 7, 0.28);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--amber-900); color: var(--ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased; scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--amber-900) 0%, var(--amber-700) 50%, var(--amber-500) 100%);
  background-attachment: fixed;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(1120px, 92vw); margin: 0 auto; }

/* ---------- Top bar (rendered by site.js) ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 10px; color: var(--white); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-badge {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, var(--amber-700), var(--amber-500));
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); display: grid; place-items: center;
}
.brand-badge img { width: 34px; height: 34px; }
.brand-name { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.brand-sub  { font-size: 0.72rem; opacity: 0.85; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 18px; font-size: 0.9rem; flex-wrap: wrap; }
.nav-links a { color: var(--white); text-decoration: none; opacity: 0.9; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav-links a[aria-current="page"] { font-weight: 600; }
.lang { display: inline-flex; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; overflow: hidden; }
.lang button { background: transparent; color: var(--white); border: 0; padding: 5px 10px; font: inherit; font-size: 0.78rem; cursor: pointer; opacity: 0.75; }
.lang button[aria-pressed="true"] { background: rgba(255,255,255,0.18); opacity: 1; font-weight: 600; }
.lang button:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }

/* ---------- Page header ---------- */
.page-head { color: var(--white); padding: 40px 0 30px; max-width: 820px; }
.page-head .kicker { color: var(--amber-100); }
.page-head h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -1px; margin: 0 0 14px; font-weight: 800; }
.page-head p.lead { font-size: 1.1rem; line-height: 1.55; opacity: 0.94; margin: 0; }
.page-head .updated { font-size: 0.8rem; opacity: 0.75; margin-top: 12px; }

/* ---------- White windows ---------- */
.window { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 38px clamp(22px, 4vw, 48px); margin: 0 0 24px; }
.kicker { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-700); font-weight: 700; margin: 0 0 8px; }
.window h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); letter-spacing: -0.5px; margin: 0 0 12px; line-height: 1.18; }
.window h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.window p  { color: var(--ink-soft); line-height: 1.6; margin: 0 0 12px; max-width: 78ch; }
.window p strong { color: var(--ink); }
.window ul, .window ol { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); line-height: 1.65; max-width: 78ch; }
.window li { margin-bottom: 6px; }
.window li strong { color: var(--ink); }
.quote {
  border-left: 4px solid var(--amber-500); background: var(--amber-100); border-radius: 0 12px 12px 0;
  padding: 14px 18px; margin: 14px 0 18px; color: var(--ink); font-style: italic; line-height: 1.55; max-width: 78ch;
}
.note { font-size: 0.86rem; color: var(--ink-soft); border-top: 1px dashed var(--amber-200); padding-top: 12px; margin-top: 18px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 6px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 6px; }
.card { background: var(--card); border: 1px solid var(--amber-200); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card h3 { margin: 0; font-size: 1rem; letter-spacing: -0.2px; }
.card p  { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
.card .metric { font-size: 0.76rem; color: var(--amber-700); font-weight: 600; margin-top: auto; padding-top: 6px; }
.card .ref { font-size: 0.76rem; color: var(--ink-soft); padding-top: 4px; }

/* ---------- Reference list ---------- */
.refs { list-style: none; padding: 0; margin: 10px 0 0; max-width: 100%; }
.refs li { padding: 9px 0; border-bottom: 1px solid var(--amber-100); font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.refs li:last-child { border-bottom: 0; }
.refs li em { color: var(--ink); font-style: normal; font-weight: 600; }

/* ---------- Metric table ---------- */
table.metrics { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 0.9rem; }
table.metrics th, table.metrics td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--amber-100); vertical-align: top; color: var(--ink-soft); }
table.metrics th { color: var(--ink); background: var(--card); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
table.metrics td:first-child { color: var(--ink); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* ---------- Footer ---------- */
footer { color: var(--white); padding: 10px 0 42px; font-size: 0.84rem; opacity: 0.9; }
footer .row { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: space-between; align-items: center; }
footer a { color: var(--white); }
footer .links a { margin-right: 12px; }
footer .legal { margin: 14px 0 0; font-size: 0.76rem; line-height: 1.55; opacity: 0.78; max-width: 72ch; }
footer .legal a { text-decoration: underline; }

/* ---------- i18n: hide every data-lang block that is not the active UI language ---------- */
html[data-ui="tr"] [data-lang]:not([data-lang="tr"]),
html[data-ui="en"] [data-lang]:not([data-lang="en"]),
html[data-ui="de"] [data-lang]:not([data-lang="de"]),
html[data-ui="fr"] [data-lang]:not([data-lang="fr"]),
html[data-ui="es"] [data-lang]:not([data-lang="es"]) { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links a.hide-sm { display: none; }
}
@media (max-width: 600px) {
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .window { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }