/* Van Etten Advisory — opmaak voor de statische site.
   Gegenereerd uit "VEA - Website Van Etten Advisory v2.dc.html".
   Alle vormgeving staat als inline stijl in de HTML; dit bestand bevat
   alleen wat niet inline kan: fonts, resets, hover- en mediaregels. */

@import url("assets/fonts/source-sans-3.css");

* { box-sizing: border-box; }
body { margin: 0; font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif; color: #101418; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; }
a { color: #16606E; text-decoration: none; }
a:hover { color: #0F4650; text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #1F7A8C; outline-offset: 2px; }
[hidden] { display: none !important; }
[aria-invalid="true"] { border-color: #8E1F1F !important; background: #FFFFFF !important; }

/* Skip-link: pas zichtbaar bij toetsenbordfocus */
a[href="#inhoud"]:focus { left: 16px !important; top: 16px !important; z-index: 100; padding: 10px 16px; background: #FFFFFF; border: 1px solid #0F2A47; border-radius: 6px; color: #0F2A47; }

/* Breed/smal — het ontwerp wisselt op 1160px */
.alleen-breed, .alleen-smal { display: contents; }
@media (max-width: 1159px) { .alleen-breed { display: none; } }
@media (min-width: 1160px) { .alleen-smal { display: none; } }

/* Hoverstijlen; inline stijl heeft voorrang, dus !important */
[data-hover="navHover"]:hover { background: #F5F7FA !important; color: #0F2A47 !important; text-decoration: none !important; }
[data-hover="menuKnopHover"]:hover { background: #F5F7FA !important; border-color: #C4CCD6 !important; }
[data-hover="btnDarkHover"]:hover { background: #2C4A6B !important; color: #FFFFFF !important; text-decoration: none !important; }
[data-hover="btnTealHover"]:hover { background: #16606E !important; border-color: #16606E !important; color: #FFFFFF !important; text-decoration: none !important; }
[data-hover="linkTealHover"]:hover { background: #EDF4F4 !important; color: #0F4650 !important; text-decoration: none !important; }
[data-hover="btnOutlineHover"]:hover { background: #0F2A47 !important; color: #FFFFFF !important; text-decoration: none !important; }
[data-hover="btnGhostHover"]:hover { border-color: #8ACBD6 !important; background: rgba(31,122,140,0.16) !important; color: #FFFFFF !important; text-decoration: none !important; }
[data-hover="linkDarkHover"]:hover { color: #B8DFE6 !important; text-decoration: underline !important; }
[data-hover="footLinkHover"]:hover { color: #FFFFFF !important; text-decoration: underline !important; }

/* Kompas: aanwijsbare onderdelen */
[data-kies], [data-kiest] { cursor: pointer; }

/* Foutmelding bij een veld, opgebouwd door app.js */
.veldfout { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; line-height: 1.5; color: #8E1F1F; }
.veldfout i { font-size: 18px; line-height: 1.4; }
.meldingfout { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px solid #E4C9C9; border-radius: 6px; background: #FBF4F4; font-size: 16px; line-height: 1.6; color: #8E1F1F; }
.meldingfout i { font-size: 20px; line-height: 1.4; flex: none; }

@keyframes vaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media print {
  header, footer, #menu-knop, #rapport-overlay { display: none !important; }
  body { color: #000000; }
}