/*
 * hmi-shell.css — gedeelde opmaak voor de "shell": header-nav (scroll-staat)
 * en footer. Eén bron van waarheid, globaal ge-enqueued via functions.php,
 * zodat header en footer op ELKE pagina byte-voor-byte identiek ogen.
 *
 * Achtergrond: de markup zat al gedeeld in header.php / footer.php, maar de
 * opmaak werd per page-template inline herhaald (legacy uit de HTML→WP-
 * conversie) en dreef daardoor uiteen. Die per-template kopieën zijn
 * verwijderd; dit bestand is de enige plek voor nav-scroll + footer-CSS.
 *
 * NIET hier: de taal-toggle display-regels (.lang-nl/.lang-en) en de
 * .hmi-mobile-* drawer (die blijven resp. per-template en in
 * hmi-mobile-nav.css). Base .hmi-nav / .hmi-logo rust-styling blijft
 * eveneens per-template (buiten scope van deze consolidatie).
 */

/* ============================================================
   FOOTER (statisch overal — geen entree-animaties)
   ============================================================
   Bewust géén ::before/::after gloed of shimmer: op bijna-zwart geeft
   dat color-banding (zie CLAUDE.md sectie 4) en het was op de homepage
   al uitgezet. Het watermerk blijft als statisch dieptedetail. */
/* NB: footer-regels die op padding/margin leunen, krijgen bewust verhoogde
   specificiteit (footer.hmi-footer / .hmi-footer .X) zodat ze de pagina-inline
   reset `.hmi-site, .hmi-site *{margin:0;padding:0}` (spec 0,1,0) verslaan. Op
   pagina's waar de footer binnen .hmi-site valt (bv. tarieven) werd hij anders
   verticaal samengedrukt. Waarden zijn identiek; alleen de selector verandert.
   `gap` wordt niet door de reset geraakt en blijft dus op enkele klasse staan. */
footer.hmi-footer { background: var(--bg-dark); color: var(--bg); padding: clamp(60px, 8vw, 100px) 0 32px; position: relative; overflow: hidden; }
.hmi-footer-watermark { position: absolute; bottom: -28%; left: -2%; font-family: var(--font-display); font-weight: 700; font-size: 32vw; line-height: 0.85; letter-spacing: -0.06em; color: rgba(245,242,236,0.010); pointer-events: none; user-select: none; z-index: 0; white-space: nowrap; }
.hmi-footer > .hmi-container { position: relative; z-index: 2; }
.hmi-footer .hmi-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(32px, 4vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line-d); }
.hmi-footer-mark { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 7vw, 88px); letter-spacing: -0.04em; line-height: 0.9; }
.hmi-footer .hmi-footer-sub { font-size: 10px; letter-spacing: 0.4em; color: rgba(245,242,236,0.55); margin-top: 10px; text-transform: uppercase; }
.hmi-footer .hmi-footer-desc { color: rgba(245,242,236,0.65); font-size: clamp(13px, 1vw, 15px); margin-top: 24px; max-width: 340px; line-height: 1.7; }
.hmi-footer .hmi-footer-countries { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.hmi-footer-countries span { font-size: 10px; letter-spacing: 0.2em; color: rgba(245,242,236,0.62); padding: 3px 8px; border: 1px solid rgba(46,139,97,0.28); border-radius: 4px; background: rgba(46,139,97,0.04); transition: border-color 0.4s ease, background 0.4s ease; }
.hmi-footer-countries span:hover { border-color: rgba(46,139,97,0.55); background: rgba(46,139,97,0.10); }
.hmi-footer .hmi-footer-col-title { font-size: 11px; letter-spacing: 0.25em; color: rgba(245,242,236,0.55); text-transform: uppercase; margin-bottom: 20px; }
.hmi-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.hmi-footer-col a { color: var(--bg); font-size: clamp(13px, 1vw, 15px); transition: opacity 0.3s, color 0.3s; position: relative; display: inline-block; text-decoration: none; }
.hmi-footer-col a:hover { color: var(--champagne-hover); opacity: 1; }
.hmi-footer-col a.active { color: var(--champagne); }
/* Toegestane hover-underline (draw-in), géén permanente streep in ruststaat. */
.hmi-footer-col a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--champagne-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hmi-footer-col a:hover::before { transform: scaleX(1); }
.hmi-footer .hmi-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: clamp(11px, 0.9vw, 13px); color: rgba(245,242,236,0.55); }
/* Legal-links (Privacy & cookies, Algemene voorwaarden): hover-underline,
 * géén permanente streep. De border-bottom inline-styles zijn uit footer.php
 * verwijderd; de draw-in komt van het gedeelde ::after hieronder. */
.hmi-footer-bottom a { position: relative; display: inline-block; color: inherit; text-decoration: none; }
.hmi-footer-bottom a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hmi-footer-bottom a:hover::after { transform: scaleX(1); }
/* Subtiele legal-hover: lichte kleurshift naar cream (verslaat de donkere
   parent-theme/UA a:hover) + de bestaande underline-pseudo tekent in. */
.hmi-footer-bottom a:hover { color: var(--bg); }
@media (max-width: 880px) {
  .hmi-footer .hmi-footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .hmi-footer .hmi-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 768px) {
  /* Landen-tags weg + compactere layout op mobiel (was per-template). */
  .hmi-footer .hmi-footer-countries { display: none; }
  footer.hmi-footer { padding: clamp(40px, 8vw, 60px) 0 24px; }
  .hmi-footer .hmi-footer-top { gap: 28px; padding-bottom: 24px; }
  .hmi-footer-mark { font-size: clamp(40px, 12vw, 56px); }
  .hmi-footer .hmi-footer-desc { margin-top: 16px; }
  .hmi-footer .hmi-footer-col-title { margin-bottom: 14px; }
  .hmi-footer-col ul { gap: 8px; }
  .hmi-footer .hmi-footer-bottom { padding-top: 20px; gap: 8px; }
}

/* ============================================================
   NAV — scroll-staat (op ELKE pagina + viewport identiek)
   ============================================================
   Bij paginaload is .hmi-nav transparant (base-styling staat per-
   template). Voorbij ~60px scroll voegt assets/js/hmi-nav-scroll.js
   de class .scrolled toe; dan: premium DONKER glas (geen wit), met
   lichte/leesbare tekst, logo, taal-toggle en CTA.

   Dit verving de per-template .hmi-nav.scrolled-kopieën (deels lichte
   cream-bg = de "witte balk") én de mobiel-only donker-override die
   eerder in hmi-global.css stond.

   NB: dit raakt GEEN .lang-nl/.lang-en display-regels. De kleur-emphasis
   van de actieve taal in de scroll-staat staat hieronder (zowel via
   .active als via [data-lang]) zodat beide bestaande mechanismen blijven
   werken — leesbaar op donker glas. */
.hmi-nav.scrolled {
  background: rgba(26,24,22,0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding: 14px 0;
  border-bottom-color: rgba(245,242,236,0.08);
}
.hmi-nav.scrolled .hmi-logo,
.hmi-nav.scrolled .hmi-nav-links a:not(.hmi-nav-cta) { color: var(--bg); }
.hmi-nav.scrolled .hmi-logo { text-shadow: none; }
.hmi-nav.scrolled .hmi-logo .sub { color: rgba(245,242,236,0.7); text-shadow: none; }
.hmi-nav.scrolled .hmi-lang,
.hmi-nav.scrolled .hmi-lang a { color: rgba(245,242,236,0.55); }
.hmi-nav.scrolled .hmi-lang span { color: rgba(245,242,236,0.20); }
.hmi-nav.scrolled .hmi-lang a.active,
.hmi-nav.scrolled .hmi-lang a:hover { color: var(--bg); }
[data-lang="nl"] .hmi-nav.scrolled .hmi-lang a[data-lang-set="nl"],
[data-lang="en"] .hmi-nav.scrolled .hmi-lang a[data-lang-set="en"] { color: var(--bg); }
.hmi-nav.scrolled .hmi-nav-cta { background: var(--champagne); color: var(--bg); }

/* Altex logo-merk (beeldmerk + wordmerk). Papier-blade volgt currentColor zodat
   het logo leesbaar blijft in elke nav-staat; emerald-blade vast. */
.hmi-logo { display: inline-flex; align-items: center; gap: 9px; }
.hmi-logo-mark { height: 0.85em; width: auto; align-self: center; flex: 0 0 auto; }
.hmi-logo-mark .blade-paper { fill: currentColor; }
.hmi-logo-mark .blade-emerald { fill: #1F5C42; }
.hmi-logo-word { line-height: 1; }
.hmi-footer-mark { display: flex; align-items: center; gap: 0.26em; }
.hmi-footer-beeldmerk { height: 0.92em; width: auto; flex: 0 0 auto; }