/* ============================================================
   N-Works 3D - gedeelde vaste UI (header + footer)
   Genaamruimd met .nw-* zodat het nooit botst met pagina-CSS.
   Kleuren staan hier letterlijk (los van per-pagina :root-namen).
   Render + taalstate: site-ui.js
   ============================================================ */
.nw-header, .nw-header *, .nw-footer, .nw-footer *, .nw-doors, .nw-doors * { box-sizing: border-box; margin: 0; }

/* Header / topbar */
.nw-header { position: sticky; top: 0; z-index: 50; background: rgba(13,27,42,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid #2A3B58; }
.nw-bar { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nw-brand { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800; letter-spacing: 0.06em; font-size: 24px; line-height: 1; color: #C9A84C; text-transform: uppercase; text-decoration: none; display: block; white-space: nowrap; text-align: center; }
.nw-brand small { display: block; font-size: 8px; letter-spacing: 0.12em; color: #A8B0BD; font-weight: 500; margin-top: 5px; }
.nw-nav { display: flex; gap: 30px; align-items: center; }
.nw-nav a { color: #F2EEE4; text-decoration: none; font-size: 14px; letter-spacing: 0.02em; transition: color 0.2s; }
.nw-nav a:hover, .nw-nav a.active { color: #C9A84C; }
.nw-right { display: flex; align-items: center; gap: 18px; }
.nw-lang { display: flex; gap: 2px; border: 1px solid #2A3B58; border-radius: 4px; overflow: hidden; }
/* Op een taalpagina (/nl/, /en/, /fr/) zijn dit ECHTE links naar dezelfde pagina in
   de andere taal, zodat elke taal een eigen adres heeft; op de gewone pagina's
   blijven het knoppen die in de browser wisselen. Beide zien er identiek uit. */
.nw-lang button, .nw-lang a { background: transparent; border: none; color: #A8B0BD; font-size: 12px; font-weight: 600; padding: 6px 9px; cursor: pointer; letter-spacing: 0.04em; transition: all 0.18s; font-family: inherit; text-decoration: none; display: inline-block; line-height: 1.2; }
.nw-lang button:hover, .nw-lang a:hover { color: #F2EEE4; }
.nw-lang button.active, .nw-lang a.active { background: #C9A84C; color: #0D1B2A; }
.nw-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nw-toggle span { display: block; width: 24px; height: 2px; background: #F2EEE4; margin: 5px 0; }

/* Twee-deuren-strook: herhaalt de twee wegen van de homepage (prijs per stuk vs.
   reverse engineering) boven de footer van elke andere pagina, zodat een bezoeker die
   via een zoekmachine ergens middenin de site landt altijd een weg vooruit heeft.
   Render + wanneer-wel/niet: site-ui.js (doorsHTML). */
/* max-width volgt --maxw, dezelfde breedte als .wrap op elke pagina (elke pagina zet
   die variabele zelf op :root): anders staat deze strook breder dan de rest van de
   pagina en oogt hij niet centraal (Yves, 2026-09-28). */
.nw-doors { background: #0D1B2A; border-top: 1px solid #2A3B58; padding: 44px 0; }
.nw-doors-in { max-width: var(--maxw, 1320px); margin: 0 auto; padding: 0 28px; text-align: center; }
.nw-doors-label { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #C9A84C; font-weight: 600; margin-bottom: 18px; }
.nw-doors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.nw-door { background: #15243C; border: 1px solid #2A3B58; border-radius: 8px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.nw-door p { color: #F2EEE4; font-size: 14.5px; margin: 0; flex: 1 1 220px; }
.nw-door-cta { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 5px; font-size: 14px; font-weight: 600; text-decoration: none; color: #0D1B2A; background: #C9A84C; border: 1px solid #C9A84C; transition: background 0.2s, transform 0.15s; }
.nw-door-cta:hover { background: #E5C77C; transform: translateY(-1px); }

/* Footer */
.nw-footer { background: #102438; padding: 56px 0 30px; }
.nw-foot-in { max-width: 1600px; margin: 0 auto; padding: 0 28px; }
.nw-foot-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 56px; padding-bottom: 38px; border-bottom: 1px solid #2A3B58; }
.nw-foot-brand .nw-brand { margin-bottom: 14px; display: inline-block; text-align: center; }
.nw-foot-brand p { color: #A8B0BD; font-size: 14px; max-width: 320px; }
.nw-foot-social { display: inline-block; margin-top: 14px; color: #F2EEE4; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.nw-foot-social + .nw-foot-social { margin-left: 18px; }
.nw-foot-social:hover { color: #C9A84C; }
.nw-foot-mail { margin-top: 12px; }
.nw-foot-mail a { color: #F2EEE4; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.nw-foot-mail a:hover { color: #C9A84C; }
.nw-foot-col h4 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #C9A84C; margin-bottom: 16px; }
.nw-foot-col a { display: block; color: #A8B0BD; text-decoration: none; font-size: 14px; margin-bottom: 10px; transition: color 0.2s; }
.nw-foot-col a:hover { color: #C9A84C; }
.nw-foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 24px; font-size: 12.5px; color: #A8B0BD; }

/* Gold hover accent - shared utility for choice cards, buttons and tiles on
   CUSTOMER-FACING surfaces (site + client quoter; never the admin tool).
   On hover/focus: gold border + a subtle glow whose hue drifts gold ->
   gold-light -> warm copper. The !important lets it win over inline border
   styles on the element it is applied to. */
.nw-hover-gold { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.nw-hover-gold:hover, .nw-hover-gold:focus-visible {
  border-color: #D4B45E !important;
  transform: translateY(-1px);
  animation: nw-gold-drift 3s ease-in-out infinite;
}
@keyframes nw-gold-drift {
  0%, 100% { box-shadow: 0 0 0 1px #C9A84C, 0 0 18px rgba(201,168,76,0.55); }
  33%      { box-shadow: 0 0 0 1px #E5C77C, 0 0 20px rgba(229,199,124,0.62); }
  66%      { box-shadow: 0 0 0 1px #C9A84C, 0 0 18px rgba(201,120,60,0.50); }
}
@media (prefers-reduced-motion: reduce) {
  .nw-hover-gold:hover, .nw-hover-gold:focus-visible { animation: none; box-shadow: 0 0 0 1px #C9A84C; transform: none; }
}

/* Page-load fade-in: everything after the shared header except the footer (pages have
   no common <main>, so match the body children between #nw-header and #nw-footer).
   Header and footer stay still. Fill-mode "backwards" only holds the opacity-0 start
   frame; the base style stays visible, so no animation support = no hidden content.
   MARKETING SITE ONLY: this file is shared with the quoter, enquiry form and webshop, which
   must not fade. tools/build-i18n.mjs puts data-nw-site on <html> of the generated site
   pages; the server/public pages never carry it. */
@keyframes nw-page-in { from { opacity: 0; } to { opacity: 1; } }
html[data-nw-site] #nw-header ~ :not(#nw-footer):not(script):not(style):not(link):not(noscript) { animation: nw-page-in 400ms ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
  html[data-nw-site] #nw-header ~ :not(#nw-footer):not(script):not(style):not(link):not(noscript) { animation: none; }
}

/* Mobiel: nav inklappen achter de hamburger */
@media (max-width: 860px) {
  .nw-nav { display: none; }
  .nw-nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: #0D1B2A; border-bottom: 1px solid #2A3B58; padding: 16px 28px; gap: 18px; }
  .nw-toggle { display: block; }
  .nw-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .nw-doors-grid { grid-template-columns: 1fr; }
  /* flex-basis:220px op .nw-door p is een min-breedte voor de rij-opstelling op desktop;
     in kolomstand leest de flex-engine diezelfde basis als een HOOGTE, wat een kaart met
     een korte zin een grote lege ruimte boven de knop gaf. flex:0 1 auto herstelt de
     hoogte naar de eigen inhoud. */
  .nw-door { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .nw-door p { flex: 0 1 auto; }
  .nw-door-cta { width: 100%; }
}
@media (max-width: 560px) {
  .nw-bar { padding: 0 16px; }
  .nw-brand { font-size: 19px; letter-spacing: 0.04em; }
  .nw-brand small { font-size: 7px; letter-spacing: 0.1em; }
  .nw-right { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .nw-header *, .nw-footer *, .nw-doors * { transition: none !important; } }