/* =========================================================
   DESIGN C — AEGEAN CLASSIC (licht thema)
   Fris marmer, Egeïsch blauw, terracotta en goud-accenten.
   Drop-in replacement voor je bestaande HTML + app.js
   ========================================================= */

/* ---------- THEME ---------- */
:root{
  /* Palet */
  --bg:#f8f8f6;                 /* licht marmer */
  --panel:#ffffff;              /* wit paneel */
  --paper:#ffffff;              /* kaart/knop-achtergrond */
  --ink:#1d2a38;                /* tekstkleur */
  --muted:#6b7789;              /* secundaire tekst */

  --aegean:#145ea8;             /* Egeïsch blauw (primair) */
  --aegean-2:#2b77c3;          /* lichtere variant */
  --terracotta:#c46a2d;         /* terracotta accent */
  --gold:#c9a44f;               /* zacht goud accent */
  --ring:rgba(20,94,168,.35);

  --radius:16px;
  --shadow:0 10px 28px rgba(13,35,68,.08);

  --border:1px solid #e7e4db;   /* zachte rand */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(20,94,168,.06), transparent 60%),
    radial-gradient(1100px 620px at 120% -20%, rgba(201,164,79,.07), transparent 60%),
    var(--bg);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{width:min(1180px, 92%); margin-inline:auto}

h1,h2,h3,.brand-text{
  font-family:"Marcellus", Georgia, "Times New Roman", serif;
  letter-spacing:.25px;
}
h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem); line-height:1.15; margin:0 0 .6rem}
h2{font-size:clamp(1.6rem,1.1rem + 1.4vw,2.2rem); margin:2rem 0 1rem}
h3{font-size:1.15rem; margin:.4rem 0}

a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, select:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px; border-radius:12px;
}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, #ffffffee, #ffffffdd);
  -webkit-backdrop-filter:saturate(110%) blur(8px);
  backdrop-filter:saturate(110%) blur(8px);
  border-bottom:var(--border);
}
.meander{
  height:8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(20,94,168,.35) 18px 20px),
    linear-gradient(to right, rgba(20,94,168,.35), rgba(201,164,79,.35));
  opacity:.75;
}
.header-inner{
  min-height:70px;               /* hamburger nooit afgesneden */
  display:flex; align-items:center; justify-content:center;
  gap:16px; padding:10px 0; position:relative;
}
.brand{
  position:absolute; left:12px; display:flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:12px;
}
.brand-icon{font-size:1.4rem}
.brand-text{font-weight:700; font-size:1.25rem}

/* basis nav */
.main-nav{display:block}
.nav-list{
  list-style:none; display:flex; gap:28px; padding:0; margin:0;
  align-items:center; justify-content:center;
}
.nav-list > li > a,
.nav-link{
  padding:10px 14px; border-radius:12px; font-weight:600;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}
.nav-list > li > a:hover,
.nav-link:hover{
  background:#f0f6fd;            /* zacht blauw */
  box-shadow:var(--shadow);
  transform:translateY(-1px);
  color:#0c4d8c;
}

/* --- Dropdown (gapless + hover bridge) --- */
.has-dropdown{position:relative}
.has-dropdown::after{
  content:""; position:absolute; left:-10px; right:-10px; top:100%; height:12px; /* hover-brug */
}
.dropdown-toggle{
  background:none; border:0; cursor:pointer; font:inherit; color:inherit;
  display:inline-flex; align-items:center; gap:8px;
}
.chev{width:16px; height:16px; transition:transform .2s ease}
.dropdown-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.dropdown{
  --w:240px;
  position:absolute; top:calc(100% + 0px); left:50%; transform:translateX(-50%);
  min-width:var(--w);
  background:var(--panel);
  border:var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px; margin-top:0; display:none; z-index:70;
}
.dropdown.open,
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{display:block}

.dropdown li{list-style:none}
.dropdown a{
  display:block; padding:11px 12px; border-radius:10px;
  color:var(--ink);
}
.dropdown a:hover{
  background:#eef4fb;
  box-shadow:inset 0 0 0 1px rgba(20,94,168,.15);
}

/* --- Hamburger (mobiel) --- */
.hamburger{
  position:absolute; right:12px;
  width:46px; height:44px; border-radius:12px;
  border:var(--border);
  background:#ffffffcc;
  display:none; align-items:center; justify-content:center;
  gap:5px; flex-direction:column; cursor:pointer;
}
.hamburger span{display:block; width:22px; height:2px; background:#113a66; border-radius:2px}

/* ---------- MOBILE FULL-SCREEN MENU ---------- */
.mobile-menu{
  position:fixed; inset:0; background:rgba(13,35,68,.25);
  display:none; z-index:100;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mobile-menu.open{display:block}
.mobile-menu-inner{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #ffffff, #f7f9fc);
  padding:24px; overflow:auto; border-left:var(--border);
}
.mobile-close{
  position:sticky; top:6px; float:right; border:0; background:none;
  font-size:1.9rem; cursor:pointer; color:var(--ink);
}
.mobile-nav ul{list-style:none; padding:0; margin:0}
.mobile-nav > ul > li{border-bottom:var(--border)}
.mobile-nav a, .mobile-group-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:18px 4px; font-weight:600; background:none; border:0; cursor:pointer;
}
.mobile-group-toggle .chev{transform:rotate(0deg)}
.mobile-group-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mobile-submenu{padding:6px 0 14px 10px}
.mobile-submenu li a{padding:12px 2px; font-weight:500; color:var(--muted); display:block}
body.locked{overflow:hidden}

/* ---------- HERO / BUTTONS ---------- */
.hero{padding:32px 0 10px}
.hero-inner{display:grid; gap:22px}
.hero-media img{
  width:100%; height:auto; display:block;
  border-radius:18px;
  border:var(--border);
  box-shadow:var(--shadow);
  background:#dde7f5;
  object-fit:cover;
}
.hero--compact .hero-media img{max-height:420px}
.hero-content{text-align:center; padding:8px 0 12px}
.lead{color:var(--muted); margin:0}

.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.btn{
  display:inline-block; padding:11px 18px; border-radius:999px;
  background:linear-gradient(135deg, #fff, #f6fafc);
  border:1px solid #e6eef7;
  color:var(--ink); font-weight:700; letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(13,35,68,.12);
  border-color:rgba(20,94,168,.35);
}
.btn.primary{
  background:linear-gradient(135deg, #fff, #f1f7ff);
  border-color:rgba(20,94,168,.35);
  color:#0c4d8c;
}

/* ---------- CARDS (Homepage: klikbaar) ---------- */
.section-title{margin-top:32px}
.cards{display:grid; gap:22px; grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--paper);
  border:var(--border);
  border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow);
  display:block; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px rgba(13,35,68,.12);
  border-color:rgba(20,94,168,.35);
}
.card img{display:block; width:100%; height:auto; background:#eaf1f8; object-fit:cover}
.card-body{padding:14px}
.card-body p{color:var(--muted); margin:.25rem 0 0}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{margin:14px auto 0; font-size:.95rem}
.breadcrumb ol{list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap}
.breadcrumb li{color:var(--muted)}
.breadcrumb li a{
  color:#0c4d8c; padding:6px 10px; border-radius:999px;
  background:#eef4fb; border:1px solid #e0e8f3;
}
.breadcrumb li a:hover{box-shadow:var(--shadow)}
.breadcrumb li+li::before{content:"›"; opacity:.6; margin-right:6px}

/* ---------- FOOTER ---------- */
.site-footer{
  margin-top:46px;
  background:linear-gradient(180deg, #ffffff, #f4f6f9);
  border-top:var(--border); padding:20px 0;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.lang-select{
  display:flex; align-items:center; gap:10px; background:#ffffff;
  padding:8px 12px; border-radius:12px; border:var(--border);
}
.lang-label{font-weight:700}

/* ---------- ZEUS-PAGINA LAYOUT ---------- */
.layout{display:grid; gap:24px; margin-top:28px; grid-template-columns:290px 1fr}
.sidebar{position:relative}
.info-card{
  background:var(--paper); border:var(--border);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
}
.info-card img{width:100%; height:auto; display:block; object-fit:cover}
.info-body{padding:14px}
.info-title{margin:.25rem 0 .5rem}
.meta{list-style:none; padding:0; margin:0}
.meta li{padding:8px 0; border-top:1px dashed #e7e4db}
.meta li:first-child{border-top:0}

.content .section + .section{margin-top:30px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.checklist{padding-left:1.1rem}
.myth{
  display:grid; grid-template-columns:1fr 1.4fr; gap:16px;
  align-items:start; background:var(--paper); border:var(--border);
  border-radius:16px; box-shadow:var(--shadow); padding:14px; margin:12px 0;
}
.myth img{width:100%; border-radius:12px; display:block; object-fit:cover; background:#eaf1f8}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.gallery img{width:100%; display:block; border-radius:12px; border:var(--border); background:#eaf1f8}

/* ---------- ACCENTS / BADGES (optioneel te gebruiken) ---------- */
.badge{display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.8rem}
.badge--aegean{background:#eef4fb; color:#0c4d8c; border:1px solid #e0e8f3}
.badge--terra{background:#fff1ea; color:#8e3f17; border:1px solid #f4d1be}
.badge--gold{background:#fff8e8; color:#7a5a19; border:1px solid #f0e1b8}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px){
  .main-nav{display:none}
  .hamburger{display:flex}
  .cards{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:260px 1fr}
}
@media (max-width: 860px){
  .layout{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .myth{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .gallery{grid-template-columns:1fr}
}

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