/* ═══════════════════════════════════════════════════════════════
   ARENA — HUBPAGINA'S (PR 6). Visuele bron: arena-source/src/components/hub-page.tsx + page-hero.tsx + data-table.tsx.
   Alleen presentatie van de ArtikelPilot-template (opt-in met skin="arena"); inhoud, H1-regels, schema,
   calculators, partnerflows en interne links komen uit de pagina zelf en zijn ongewijzigd.
   ═══════════════════════════════════════════════════════════════ */

/* ── PageHero: donkergroen vlak met gloed + korrel (geen foto) ── */
html[data-skin="arena"] .eda-hero { background: var(--arena-forest); color: #fff; }
html[data-skin="arena"] .eda-hero-photo { display: none; }
html[data-skin="arena"] .eda-hero-overlay { background: none; }
html[data-skin="arena"] .eda-hero::before {
  content: ""; position: absolute; left: -8rem; top: -7rem; width: 30rem; height: 30rem; border-radius: 9999px; background: rgba(34, 197, 94, .12); filter: blur(64px); pointer-events: none;
}
html[data-skin="arena"] .eda-hero::after {
  content: ""; position: absolute; right: -6rem; top: 4rem; left: auto; bottom: auto; width: 26rem; height: 26rem; height: 26rem; border-radius: 9999px; background: rgba(255, 210, 138, .07); filter: blur(64px); pointer-events: none;
}
html[data-skin="arena"] .eda-hero-noise { opacity: .5; }
html[data-skin="arena"] .eda-hero-noise { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
html[data-skin="arena"] .eda-hero-gridlines { display: none; }
html[data-skin="arena"] .eda-wrap { max-width: 1024px; padding: 8rem 24px 3.5rem; }
html[data-skin="arena"] .eda-crumb { color: rgba(255, 255, 255, .68); font-family: var(--arena-font-sans); font-size: 11px; letter-spacing: 0; margin-bottom: 0; }
html[data-skin="arena"] .eda-crumb a { color: rgba(255, 255, 255, .78); }
html[data-skin="arena"] .eda-crumb a:hover { color: #fff; }
html[data-skin="arena"] .eda-crumb a:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 2px; }
html[data-skin="arena"] .eda-crumb-c { color: #fff; }
html[data-skin="arena"] .eda-meta-strip { margin: 28px 0 0; gap: 12px; }
html[data-skin="arena"] .eda-cat-pill {
  display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; border-radius: 0;
  font-family: var(--arena-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--arena-lime);
}
html[data-skin="arena"] .eda-cat-pill::before { content: ""; width: 2rem; height: 1px; background: var(--arena-brand); }
html[data-skin="arena"] .eda-sep { color: rgba(255, 255, 255, .35); }
html[data-skin="arena"] .eda-meta-item { font-family: var(--arena-font-sans); font-size: .75rem; letter-spacing: 0; color: rgba(255, 255, 255, .72); }
html[data-skin="arena"] .eda-hero-grid { max-width: 56rem; padding-bottom: 0; }
html[data-skin="arena"] .eda-h1 {
  font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.8rem); margin: 20px 0 0; text-wrap: balance;
}
html[data-skin="arena"] .eda-intro { margin: 24px 0 0; max-width: 42rem; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.625; color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] #eda-bar { background: var(--arena-brand); box-shadow: none; }

/* ── Body ── */
html[data-skin="arena"] .eda-shell { background: var(--arena-paper); border-top: 0; max-width: 1180px; padding: 56px 24px 88px; gap: 64px; }
html[data-skin="arena"] .eda-article-header { border-bottom-color: var(--arena-sand); padding-bottom: 20px; margin-bottom: 8px; }
html[data-skin="arena"] .eda-byline-l { color: rgba(42, 49, 44, .75); font-family: var(--arena-font-sans); letter-spacing: .12em; }
html[data-skin="arena"] .eda-byline-n { color: var(--arena-ink); font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .eda-byline-sep { background: var(--arena-sand); }
html[data-skin="arena"] .eda-av { background: var(--arena-moss); font-family: var(--arena-font-sans); }

html[data-skin="arena"] .eda-content h2 {
  font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.08; color: var(--arena-ink);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 56px 0 18px; padding: 0 0 0 0; border: 0; position: relative;
}
html[data-skin="arena"] .eda-content h2::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--arena-brand); margin-bottom: 14px; }
html[data-skin="arena"] .eda-content h3 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.01em; font-size: 1.5rem; line-height: 1.15; color: var(--arena-ink); margin: 32px 0 10px; }
html[data-skin="arena"] .eda-content p,
html[data-skin="arena"] .eda-content li { color: rgba(42, 49, 44, .92); }
html[data-skin="arena"] .eda-content strong { color: var(--arena-ink); }
html[data-skin="arena"] .eda-content a { color: var(--arena-moss); text-decoration-color: rgba(24, 64, 47, .4); }
html[data-skin="arena"] .eda-content a:hover { color: var(--arena-ink); text-decoration-color: currentColor; }
html[data-skin="arena"] .eda-content a:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; border-radius: 2px; }
html[data-skin="arena"] .eda-content blockquote { border-left-color: var(--arena-brand); background: #f1f8ec; border-radius: 0 1rem 1rem 0; }
html[data-skin="arena"] .eda-content img { border: 1px solid var(--arena-sand); border-radius: 1.5rem; }

/* tabellen (Arena CompareTable): crème kop, ronde rand */
html[data-skin="arena"] .table-wrap { border: 1px solid var(--arena-sand); border-radius: 1rem; background: #fff; }
html[data-skin="arena"] .eda-content th { background: var(--arena-cream); color: var(--arena-ink); border-bottom-color: var(--arena-sand); font-family: var(--arena-font-sans); font-weight: 600; }
html[data-skin="arena"] .eda-content td { color: rgba(42, 49, 44, .9); border-bottom-color: rgba(232, 224, 207, .7); }
html[data-skin="arena"] .eda-content td:first-child { color: var(--arena-ink); font-weight: 600; }

/* Arena-kaartlinks in de pagina-inhoud (cluster-overzichten per hub) */
html[data-skin="arena"] .cluster-sectie { border-top-color: var(--arena-sand); }
html[data-skin="arena"] .cluster-sectie h2 { font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; font-size: 2rem; color: var(--arena-ink); }
html[data-skin="arena"] .cluster-sectie h2::before { content: none; }
html[data-skin="arena"] .cluster-sectie > p { color: rgba(42, 49, 44, .85); }
html[data-skin="arena"] .cluster-link { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1rem; transition: transform .3s var(--arena-ease), border-color .3s, box-shadow .3s; }
html[data-skin="arena"] .cluster-link:hover { transform: translateY(-2px); border-color: rgba(24, 64, 47, .35); background: #fff; box-shadow: 0 22px 55px -30px rgba(12, 34, 25, .45); }
html[data-skin="arena"] .cluster-link:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 3px; }
html[data-skin="arena"] .cluster-link-title { font-family: var(--arena-font-sans); font-weight: 600; color: var(--arena-ink); }
html[data-skin="arena"] .cluster-link-desc { color: rgba(42, 49, 44, .8); }

/* ── Zijbalk ── */
html[data-skin="arena"] .sb2-card { background: #fff; border: 1px solid var(--arena-sand); border-radius: 1.25rem; box-shadow: 0 18px 44px -34px rgba(12, 34, 25, .3); }
html[data-skin="arena"] .sb2-ch { color: rgba(42, 49, 44, .78); font-family: var(--arena-font-sans); letter-spacing: .16em; border-bottom-color: var(--arena-sand); }
html[data-skin="arena"] .sb2-mark { background: rgba(24, 64, 47, .1); color: var(--arena-moss); }
html[data-skin="arena"] .sb2-toc-item { color: rgba(42, 49, 44, .88); }
html[data-skin="arena"] .sb2-toc-item:hover { background: var(--arena-cream); }
html[data-skin="arena"] .sb2-toc-active { background: var(--arena-cream); border-left-color: var(--arena-moss); color: var(--arena-ink); }
html[data-skin="arena"] .sb2-toc-t { font-family: var(--arena-font-sans); }
html[data-skin="arena"] .sb2-dot-active { background: var(--arena-moss); box-shadow: 0 0 0 3px rgba(24, 64, 47, .15); }
html[data-skin="arena"] .sb2-dot-done { background: #cfc4a8; }
html[data-skin="arena"] .sb2-dot-next { border-color: #cfc4a8; }
html[data-skin="arena"] .sb2-toc-foot { border-top-color: var(--arena-sand); color: rgba(42, 49, 44, .75); }
html[data-skin="arena"] .sb2-toc-pct { color: var(--arena-moss); }
html[data-skin="arena"] .sb2-rel-item { border-bottom-color: var(--arena-sand); }
html[data-skin="arena"] .sb2-rel-cat { color: var(--arena-moss); }
html[data-skin="arena"] .sb2-rel-t { font-family: var(--arena-font-sans); color: var(--arena-ink); }
html[data-skin="arena"] .sb2-rel-item:hover .sb2-rel-t { color: var(--arena-moss); }
html[data-skin="arena"] .sb2-rel-meta { color: rgba(42, 49, 44, .75); }
html[data-skin="arena"] .sb2-rel-item:focus-visible,
html[data-skin="arena"] .sb2-toc-item:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; }

/* ── Vervolgstap (Arena HubPage: forest + sheen) ── */
.eh-cta { position: relative; overflow: hidden; background: var(--arena-forest); color: #fff; padding: 4rem 24px; }
.eh-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .075), transparent); animation: eh-sheen 8.5s ease-in-out infinite; }
@keyframes eh-sheen { 0% { transform: translateX(-130%) skewX(-16deg); } 55%, 100% { transform: translateX(320%) skewX(-16deg); } }
.eh-cta-glow { position: absolute; top: -10rem; left: 50%; width: 40rem; height: 24rem; transform: translateX(-50%); border-radius: 9999px; background: rgba(34, 197, 94, .09); filter: blur(64px); pointer-events: none; }
.eh-cta-in { position: relative; max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; justify-content: space-between; }
.eh-cta-h { margin: 0; font-family: var(--arena-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(2.1rem, 4vw, 3.2rem); color: #fff; }
.eh-cta-h em { color: var(--arena-sun); }
.eh-cta-p { margin: .75rem 0 0; max-width: 32rem; font-size: 1rem; line-height: 1.625; color: rgba(255, 255, 255, .78); }
.eh-cta-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.eh-cta-btn { display: inline-flex; align-items: center; gap: .75rem; border-radius: 9999px; background: var(--arena-brand); color: var(--arena-ink); padding: 1rem 1.75rem; font-size: 1rem; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(34, 197, 94, .55); transition: transform .3s, background-color .3s; }
.eh-cta-btn:hover { background: var(--arena-lime); transform: translateY(-2px); color: var(--arena-ink); }
.eh-cta-ghost { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; padding: 1rem 1.75rem; font-size: 1rem; font-weight: 600; text-decoration: none; transition: border-color .3s, background-color .3s; }
.eh-cta-ghost:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .1); color: #fff; }
.eh-cta-btn:focus-visible, .eh-cta-ghost:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 4px; }
@media (min-width: 640px) { .eh-cta { padding: 5rem 24px; } .eh-cta-in { flex-direction: row; align-items: center; } }
@media (prefers-reduced-motion: reduce) { .eh-cta::after { animation: none; } }
@media (max-width: 1024px) { html[data-skin="arena"] .eda-shell { padding: 40px 20px 64px; } }
@media (max-width: 680px) { html[data-skin="arena"] .eda-wrap { padding: 6.5rem 20px 2.5rem; } html[data-skin="arena"] .eda-h1 { font-size: clamp(2.3rem, 10vw, 3rem); } }