/*
Theme Name: Atrea Demo
Description: Lichtgewicht WordPress-thema voor de Atrea-homepage met Gutenberg-contentblokken.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: atrea-demo
*/
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#0e1b3a;background:#fff;font-family:Atrea Jakarta,Arial,sans-serif}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #007db5;outline-offset:5px}.skip-link{position:absolute;left:16px;top:-100px;z-index:10;background:#fff;padding:12px}.skip-link:focus{top:12px}.atrea-header{position:sticky;top:0;z-index:5;background:#fffffffa;border-bottom:1px solid #e5e9f0}.admin-bar .atrea-header{top:32px}.atrea-nav-wrap{max-width:1280px;padding:0 32px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}.atrea-brand{display:flex;flex:none;align-items:center;width:132px;text-decoration:none}.atrea-brand img{width:132px;height:40px;object-fit:contain}.atrea-nav{margin:auto}.atrea-nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}.atrea-nav a{text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}.atrea-nav a:hover{color:#0086c0}.atrea-header-actions{display:flex;align-items:center;gap:26px}.atrea-portal{font-size:13px;font-weight:600;text-decoration:none;color:#3b4a6b;white-space:nowrap}.atrea-header .atrea-button{padding:12px 20px}.atrea-menu-toggle{display:none;border:1px solid #dce3ee;background:#fff;border-radius:8px;padding:8px 12px;color:#0a265f;cursor:pointer}.atrea-demo-footer{background:#fafaf7;padding:24px 32px;border-top:1px solid #e5e9f0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#62718d}.atrea-basic{max-width:1000px;margin:auto;padding:60px 24px}.atrea-basic h1{font-size:42px}.atrea-basic img{max-width:100%;height:auto}
@media(max-width:1100px){.atrea-nav ul{gap:18px}.atrea-portal{display:none}.atrea-nav-wrap{gap:16px}.atrea-brand{width:112px}.atrea-brand img{width:112px}}
@media(max-width:900px){.atrea-nav-wrap{padding:12px 20px;flex-wrap:wrap;min-height:72px}.atrea-menu-toggle{display:block;margin-left:auto}.atrea-header-actions{gap:12px}.atrea-header .atrea-button{font-size:12px;padding:11px 15px}.atrea-nav{width:100%;order:5;display:none;margin:0}.atrea-nav.is-open{display:block}.atrea-nav ul{align-items:stretch;flex-direction:column;gap:0;padding:8px 0}.atrea-nav a{display:block;padding:12px 4px}.admin-bar .atrea-header{top:46px}.atrea-demo-footer{padding:24px 20px}}
@media(max-width:420px){.atrea-brand,.atrea-brand img{width:96px}.atrea-nav-wrap{gap:10px}.atrea-header .atrea-button{padding:10px 12px}.atrea-menu-toggle{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Header typography, spacing and hover states match the source prototype. */
body{font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
.atrea-header{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}
.atrea-nav-wrap{gap:32px;padding:14px 32px;min-height:0;justify-content:normal}
.atrea-brand{width:132px;display:inline-flex}.atrea-brand svg{display:block;width:132px;height:40px;max-width:100%}
.atrea-nav{display:flex;align-items:center;margin:0 0 0 8px}.atrea-nav ul{gap:4px}
.atrea-nav a{background:transparent;border:0;color:#0e1b3a;font-size:14.5px;font-weight:500;padding:10px 14px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;transition:background .2s,color .2s}
.atrea-nav a:hover,.atrea-nav li:focus-within>a{background:#fafaf7;color:#0a265f}
.atrea-header-actions{margin-left:auto;gap:14px}
.atrea-portal{font-size:13.5px;font-weight:600;color:#3b4a6b;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px}
.atrea-portal:hover{color:#0a265f;background:#fafaf7}
.atrea-header svg{display:block;flex:none}.atrea-header .atrea-button{padding:10px 18px;font-size:14px}
@media(max-width:1100px){.atrea-portal{display:none}.atrea-nav-wrap{gap:16px}.atrea-nav a{padding:10px 8px}}
@media(max-width:900px){.atrea-nav-wrap{padding:12px 20px;gap:12px;justify-content:space-between}.atrea-nav{display:none;margin:0}.atrea-nav.is-open{display:block}.atrea-nav ul{gap:0}.atrea-nav a{display:flex;padding:12px 4px}.atrea-header-actions{margin-left:0}.atrea-brand,.atrea-brand svg{width:112px}.atrea-header .atrea-button{font-size:12px;padding:10px 14px}}
@media(max-width:420px){.atrea-brand,.atrea-brand svg{width:96px}.atrea-nav-wrap{gap:10px}.atrea-header .atrea-button{padding:10px 12px}}
body { position: relative; }
body::before, body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
/* Primary pools — brand blue / cyan / orange / green, soft at the edges */
body::before {
  background:
    radial-gradient(38% 42% at 6% 6%,   rgba(0, 156, 222, 0.18), transparent 62%),
    radial-gradient(34% 40% at 86% 2%,  rgba(255, 94, 0, 0.13),  transparent 62%),
    radial-gradient(42% 44% at 98% 44%, rgba(22, 197, 242, 0.16), transparent 64%),
    radial-gradient(44% 48% at 8% 92%,  rgba(31, 174, 99, 0.13), transparent 64%),
    radial-gradient(40% 44% at 66% 98%, rgba(0, 156, 222, 0.14), transparent 64%);
  animation: auroraDriftA 46s ease-in-out infinite alternate;
}
/* Secondary pools — drift the other way for a living, layered feel */
body::after {
  background:
    radial-gradient(30% 34% at 40% 26%, rgba(255, 94, 0, 0.07),  transparent 60%),
    radial-gradient(34% 38% at 72% 60%, rgba(22, 197, 242, 0.09), transparent 62%),
    radial-gradient(30% 34% at 20% 54%, rgba(0, 156, 222, 0.08), transparent 60%),
    radial-gradient(28% 32% at 90% 84%, rgba(31, 174, 99, 0.07), transparent 60%);
  animation: auroraDriftB 58s ease-in-out infinite alternate;
}
@keyframes auroraDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3.5%, 2.5%, 0) scale(1.08); }
}
@keyframes auroraDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  100% { transform: translate3d(4%, -3%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}