/* ---------------------------------------------------------
   RGF – fælles styles for brics, ndb, afrikas_krige, co2
   Placering: /rgf/styles.css
   --------------------------------------------------------- */

:root{
  --max:900px;
  --pad:clamp(14px, 3vw, 28px);
  --green:#2c7a2c;
  --ink:#1b1b1b;
  --ink-weak:#666;
  --card:#fff;
  --bg:#f4f4f4;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
}

/* Base / reset */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img{max-width:100%; height:auto; display:block}
a{color:#114411; text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid #2c7a2c; outline-offset:2px; border-radius:4px}

/* Layout */
header, main, footer{background:var(--card)}
.wrap{max-width:var(--max); margin:auto; padding:var(--pad)}

/* Branding / top */
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:46px; height:auto}
h1{margin:0; font-size:clamp(1.5rem, 4vw, 2.2rem); color:var(--green)}
h2{margin-top:1.2rem; font-size:clamp(1.15rem, 2.8vw, 1.45rem); color:#222}
p, li{font-size:clamp(1rem, 2.2vw, 1.05rem)}
.muted{color:var(--ink-weak); font-size:.95rem}

/* Hero */
.hero{margin:.75rem 0 1.25rem}
.hero img{border-radius:12px; box-shadow:var(--shadow)}
.caption{font-size:.85rem; color:var(--ink-weak); margin-top:.4rem}
.caption a{color:inherit; text-decoration:underline}

/* Cards (artikelbokse) */
.card{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:var(--radius);
  padding:clamp(14px, 3vw, 26px);
  box-shadow:var(--shadow);
}

/* Eyebrow (lille over-overskrift m. ikon/tekst) */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:-4px 0 6px;
  color:var(--ink-weak);
  font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; font-size:.92rem;
}
.eyebrow img{width:28px; height:auto}

/* Action/linkbokse */
.linkbox{
  margin-top:1.1rem; padding:.9rem 1rem;
  background:#f7fbf7; border:1px solid #e2efe2; border-radius:12px;
}
.linkbox a{color:var(--green); font-weight:700}
.linkbox a:hover{text-decoration:underline}

/* Noter/advarsler */
.notice{
  margin:.8rem 0 1rem; padding:.8rem 1rem;
  background:#fff8e6; border:1px solid #ffe3a6; border-radius:12px; color:#7a4b00;
}
.notice strong{color:#7a4b00}

/* Nyhedslister */
.news li{margin:.35rem 0}

/* Tabeller (Afrikas krige m.fl.) */
.table-container{overflow-x:auto; margin:1.1rem 0}
table{border-collapse:collapse; width:100%; min-width:720px}
caption{caption-side:bottom; padding:.5rem 0; color:var(--ink-weak); font-size:.95rem}
th, td{border:1px solid #ddd; padding:.6rem; text-align:left; vertical-align:top}
th{background:#e9f3e9; color:#222}
tr:nth-child(even){background:#fafafa}

/* “Lang” knap (fx About BRICS) */
.lang a{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#114411; font-weight:600;
  padding:.5rem .7rem; border:1px solid #2c7a2c; border-radius:8px;
  background:#eaf6ea; transition:background .15s ease;
}
.lang a:hover{background:#d9eed9}
.lang img{width:22px; height:auto; display:block}

/* Footer */
footer{color:#666; text-align:center}
.footgrid{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footgrid a{font-weight:600}

/* Utilities */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  body{background:#0f0f0f; color:#ddd}
  header, main, footer{background:#111}
  h1{color:#7ad37a} h2{color:#eee} footer{color:#aaa}
  .hero img{box-shadow:none}
  .card{background:#141414; border-color:#262626}
  .linkbox{background:#172017; border-color:#223322}
  .notice{background:#2a2618; border-color:#4a3e22; color:#f2debb}
  th{background:#1c2b1c; color:#ddd}
  td, tr:nth-child(even){background:#161616} table{border-color:#333}
  .footgrid a{color:#cfe}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto; animation:none !important; transition:none !important}
}

/* Print (simpelt) */
@media print{
  body{background:#fff; color:#000}
  .hero img{box-shadow:none; border-radius:0}
  a{color:#000; text-decoration:underline}
}