/* ==========================================================================
   Kingdoms Reforged — Global Styles (Mobile-first, Medieval Theme)
   File: css/style.css
   Last updated: 2025-10-03 (contrast & palette update)
   ========================================================================== */

/* ---------- CSS Reset / Base ---------- */
*:where(*) { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Global palette (dark parchment theme) */
:root{
  --bg: #2b241c;           /* dark parchment base */
  --bg-soft: #31281f;       /* slightly lighter section bg */
  --panel: #3b2615;         /* card/panel */
  --panel-muted: #2e2219;   /* very dark panel */
  --ink: #fdf5e6;           /* primary text (very light parchment) */
  --ink-dim: #e6dcc8;       /* muted text */
  --ink-muted: #d8cdb8;
  --gold: #d4af37;          /* primary gold */
  --gold-600: #b88a2b;      /* deep gold */
  --gold-700: #8c6315;      /* border gold */
  --accent: #3c6e71;        /* muted teal accent */
  --redwax: #6d2e2e;
  --parchment: #f8f2e8;
  --stone: #d9d1c3;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 14px;
  --maxw: 1100px;
}

body{
  margin: 0;
  font-family: "IM Fell English", "Garamond", Georgia, serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

img, svg, video{ max-width: 100%; height: auto; display: block; }

a{
  color: var(--gold);
  text-decoration: none;
}
a:hover{ color: #f5d76e; }
a:focus-visible, button:focus-visible{
  outline: 2px dashed var(--gold-600);
  outline-offset: 3px;
}

/* ---------- Typography ---------- */
@font-face{
  font-family: 'MedievalUI';
  src: local('Uncial Antiqua');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3{
  font-family: 'MedievalUI', 'Uncial Antiqua', 'IM Fell English', Georgia, serif;
  line-height: 1.2;
  color: var(--gold);
  margin: .2em 0 .4em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
h1{ font-size: clamp(1.8rem, 4.5vw, 3rem); }
h2{ font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
h3{ font-size: clamp(1.15rem, 2.8vw, 1.5rem); }

p{ margin: .6em 0 1em; color: var(--ink-dim); }
small, .muted{ color: var(--ink-muted); }

/* ---------- Layout helpers ---------- */
.container{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 16px; }
.grid{ display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .grid-sm-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px){
  .grid-md-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-md-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ---------- Header / Nav ---------- */
header{
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #3a2f25 0%, #31281f 100%);
  border-bottom: 1px solid #3d3328;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.banner{ width: 100%; aspect-ratio: 16/5; object-fit: cover; }
nav{ background: transparent; }

.navbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 16px 14px; color: var(--ink);
}
.brand{
  display: flex; align-items: center; gap: 10px;
  font-family: 'MedievalUI', 'Uncial Antiqua', serif;
  font-size: 1.2rem; letter-spacing: .5px;
}
.brand .seal{
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c94848, #6d2e2e);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.2);
}

.menu-btn{
  border: 1px solid #5a4a35;
  background: #3a2f25;
  padding: 8px 10px; border-radius: 10px; font: inherit; color: var(--ink);
}
.menu-btn[aria-expanded="true"]{
  background: #463a2e; border-color: #6a5945;
}

.menu{ display: none; flex-direction: column; padding: 8px 16px 16px; gap: 8px; }
.menu a{
  padding: 10px 12px; border-radius: 10px;
  background: transparent; color: var(--ink);
  border: 1px solid #4b3f33;
  box-shadow: var(--shadow);
}
.menu a:hover{ background: #3a2f25; border-color: #6a5945; }

@media (min-width: 820px){
  .menu-btn{ display: none; }
  .menu{ display: flex !important; flex-direction: row; padding: 0 16px 16px; gap: 10px; }
  .menu a{ background: transparent; border: none; box-shadow: none; padding: 6px 10px; }
  .menu a:hover{ background: #3a2f25; border-radius: 8px; }
}

/* Fallback styles voor je huidige <nav><ul> */
nav ul{ list-style: none; margin: 0; padding: 8px 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
nav li{ margin: 0; }
nav a{
  padding: 10px 12px; border-radius: 10px;
  background: transparent; color: var(--ink);
  border: 1px solid #4b3f33; box-shadow: var(--shadow); display: inline-block;
}
@media (min-width: 820px){
  nav ul{ padding: 0 16px 16px; }
  nav a{ background: transparent; border: none; box-shadow: none; padding: 6px 10px; }
  nav a:hover{ background: #3a2f25; border-radius: 8px; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #342a21 0%, #2e261e 100%);
  padding: 28px 0 40px; border-bottom: 1px solid #3d3328;
}
.hero-inner{ display: grid; gap: 18px; align-items: center; }
.hero h1 span{ color: var(--gold-600); text-shadow: 0 1px 0 #0008; }
.hero p{ font-size: 1rem; max-width: 65ch; }
.cta-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Buttons (high contrast) ---------- */
.btn, .cta-button{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 12px; font-weight: 600; letter-spacing: .2px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
  box-shadow: var(--shadow);
}

/* Primair (goud) */
.btn.primary{
  background: linear-gradient(180deg, #e6c46b, #b88922);
  border: 1px solid var(--gold-700);
  color: #2a1b0f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.btn.primary:hover{
  background: linear-gradient(180deg, #f3d27a, #c7962c);
  transform: translateY(-1px);
}

/* Ghost (licht op donker) */
.btn.ghost{
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.btn.ghost:hover{
  background: rgba(212,175,55,0.15);
  border-color: var(--gold-600);
  color: var(--gold-600);
}

/* Secondary (teal accent) */
.btn.accent{
  background: linear-gradient(180deg, #4a8b90, #355f62);
  border: 1px solid #2a4b4e;
  color: #fff;
}
.btn.accent:hover{ filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- Sections ---------- */
section{ padding: 24px 0; }
section > .container > h2, section > h2{ margin-bottom: .4rem; }
.muted-lead{ color: var(--ink-muted); margin-bottom: 1rem; }

/* Feature/Kingdom cards – dark panels with light text */
.feature-cards, .kingdom-cards{
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 640px){ .feature-cards, .kingdom-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px){ .feature-cards, .kingdom-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card, .kingdom-card{
  background: var(--panel);
  color: var(--ink);
  border: 1px solid #4b3f33;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover, .kingdom-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.35);
  border-color: var(--gold-700);
}
.kingdom-card h3{ display: flex; align-items: center; gap: 10px; color: var(--gold); }

.kingdom-card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 12px;
}

/* Badges (updated contrast) */
.badge{
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--gold); color: #2a1b0f; border: 1px solid var(--gold-700);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.35);
}
.badge:hover{ background: var(--gold-600); color: #fff; }

/* Features page blocks */
.feature-section{
  background: var(--panel);
  border: 1px solid #4b3f33;
  border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow);
}

/* Roadmap timeline */
.timeline{ position: relative; margin: 10px 0 24px; padding-left: 22px; }
.timeline::before{
  content: ""; position: absolute; inset: 0 auto 0 8px; width: 4px;
  background: linear-gradient(#a98c49, #8b6f33); border-radius: 8px;
}
.timeline-item{
  position: relative;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid #4b3f33;
  border-radius: var(--radius);
  padding: 14px 14px 14px 18px;
  margin: 0 0 14px 0;
  box-shadow: var(--shadow);
}
.timeline-item::before{
  content: ""; position: absolute; left: -11px; top: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 3px solid #2a231c; box-shadow: 0 0 0 2px #caa75a33;
}
.timeline-item.alpha::before{ background: #6d2e2e; }
.timeline-item.closed-beta::before{ background: var(--gold); }
.timeline-item.open-beta::before{ background: var(--accent); }

/* Footer */
footer{
  margin-top: 18px; padding: 18px 0 28px;
  background: var(--bg-soft); border-top: 1px solid #3d3328;
  color: var(--ink-muted); text-align: center;
}

/* ---------- Utilities ---------- */
.stack-2 > * + *{ margin-top: 8px; }
.stack-3 > * + *{ margin-top: 12px; }
.stack-4 > * + *{ margin-top: 18px; }
.center{ text-align: center; }
.maxch{ max-width: 65ch; }

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

/* ---------- Light scheme (optional) ---------- */
/* Gebruik dit als iemand expliciet light-mode heeft. */
@media (prefers-color-scheme: light){
  :root{
    --bg: #f4efe3;
    --bg-soft: #efe6d7;
    --panel: #ffffff;
    --panel-muted: #f7edd6;
    --ink: #2a1b0f;
    --ink-dim: #4c3826;
    --ink-muted: #6a5945;
    --gold: #caa75a;
    --gold-600: #b88a2b;
    --gold-700: #8c6315;
  }
  header{ background: linear-gradient(180deg, #f6efe2 0%, #efe6d7 100%); border-bottom-color: #e1d7c7; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
  .menu a, .card, .kingdom-card, .feature-section, .timeline-item{
    background: var(--panel); border-color: #e8dcc7; color: var(--ink);
  }
  footer{ background: var(--bg-soft); border-top-color: #e1d7c7; color: var(--ink-muted); }
  .btn.ghost:hover{ background: rgba(202,167,90,0.2); }
}

/* ---------- Legacy class support from your HTML ---------- */
.hero, .intro, .highlights, .features-intro, .kingdoms-intro, .roadmap-intro, .concept-intro, .mission, .kingdoms-overview{}

/* ===== Sticky Header compat (element of .site-header) ===== */
header.site-header, .site-header, header{
  position: sticky; top: 0; z-index: 9999;
}

/* Banner (PNG/consistent casing) */
.site-header .banner, header .banner{
  width: 100%;
  max-height: 200px; aspect-ratio: auto; object-fit: cover;
}

/* Nav polish + active state */
.menu a[aria-current="page"]{
  background: #3a2f25; border-color: #3d3328; color: var(--ink); font-weight: 700;
}
@media (min-width: 820px){
  .menu a[aria-current="page"]{ background: #3a2f25; border-radius: 8px; }
}

/* Visually hidden but focusable (skip link) */
.visually-hidden-focusable{
  position: absolute !important; height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.visually-hidden-focusable:focus,
.visually-hidden-focusable:active{
  position: static !important; height: auto; width: auto; clip: auto;
  padding: 8px 12px; margin: 6px 16px; background: #3a2f25; border: 1px solid #5a4a35; border-radius: 10px; box-shadow: var(--shadow);
}

/* Hover/active micro-animaties consistent */
.menu a, nav a{
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.menu a:hover, nav a:hover{ transform: translateY(-1px); }

/* Desktop layout consistent houden bij JS toggling */
@media (min-width: 820px){
  #primary-menu[hidden]{ display: flex !important; } /* voorkom per ongeluk verbergen op desktop */
}

/* ===== Hero Banner Header (forceer juiste background) ===== */
header.site-header.hero-banner{
  background-image: url("../img/banner.PNG?v=1");
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: #2a1b0f; /* fallback */
  min-height: 220px; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
@media (min-width: 640px){ header.site-header.hero-banner{ min-height:260px; } }
@media (min-width:1024px){ header.site-header.hero-banner{ min-height:300px; } }

header.site-header.hero-banner .overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  z-index:0;
}
header.site-header.hero-banner .navbar,
header.site-header.hero-banner nav{ position:relative; z-index:1; color:#fff; }
header.site-header.hero-banner .brand span{ color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.7); }
header.site-header.hero-banner .menu a{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); }
header.site-header.hero-banner .menu a:hover{ background:rgba(255,255,255,.12); border-radius:8px; }

/* ====== OVERRIDES: Kingdoms in 4 kolommen op grote schermen ====== */
@media (min-width: 1080px){
  .kingdom-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Consistente beeldhoogte in kaarten */
.kingdom-card img{
  width: 100%; height: 220px; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 12px;
}