/*
 * hmi-global.css — site-brede helpers die niet in een page-template horen.
 *
 * Houd dit bestand klein. Per-pagina styling blijft inline in de page-
 * template. Hier alleen: cross-cutting concerns (tap-highlight, focus-
 * visible-only, progressive-enhancement helpers).
 */

/* ----- Tap-highlight cleanup -----------------------------------------------
 * iOS/Android tonen een grijze flash bij elke tap op een tappable element.
 * Op een dark-theme high-end site oogt dat slordig. We zetten de highlight
 * uit en gebruiken focus-visible voor toetsenbordfocus.
 */
* { -webkit-tap-highlight-color: transparent; }
button,
[role="button"],
a,
summary,
label { -webkit-tap-highlight-color: transparent; }

/* Mouse/touch :focus geeft geen outline; toetsenbordfocus behoudt
 * een duidelijke, on-brand ring via :focus-visible. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

/* :active oogtelementen die voorheen een ingebakken grijze flash hadden
 * (FAQ-items, "meer info"-knoppen, niche-card-toggle). Eigen hover/open-
 * states blijven sturend; browsers mogen geen extra background-tint
 * toevoegen bij mousedown/touch. */
.hmi-tarif-faq-item:active,
.hmi-tarif-faq-q:active,
.hmi-tarif-inhoud-btn:active,
.hmi-dienst-toggle:active,
.hmi-case-toggle:active,
.hmi-niche-card-toggle:active,
.hmi-niche-card-toggle:focus,
.cb-faq-q:active { background-color: transparent !important; background-image: none !important; }
.hmi-niche-card-toggle { background: transparent !important; -webkit-tap-highlight-color: transparent; }

/* FAQ/accordion-triggers: definitief geen grijze achtergrond-flash in welke
 * interactie-staat dan ook (hover/active/focus), op zowel <button>-triggers
 * (.hmi-tarif-faq-q, .hmi-tarif-inhoud-trigger) als native <summary> (.cb-faq-q).
 * De grijze :hover-bg is sitewide al uit de page-CSS verwijderd; dit borgt het
 * tegen UA-/parent-defaults en de native summary-marker. De bedoelde open-tint
 * (.cb-faq-item[open]) zit op het item in [open], niet hier, en blijft. De
 * :focus-visible-outline hierboven blijft eveneens behouden. */
.hmi-tarif-faq-q:hover, .hmi-tarif-faq-q:active, .hmi-tarif-faq-q:focus,
.hmi-tarif-inhoud-trigger:hover, .hmi-tarif-inhoud-trigger:active, .hmi-tarif-inhoud-trigger:focus,
.cb-faq-q:hover, .cb-faq-q:active, .cb-faq-q:focus {
  background: none !important;
  -webkit-tap-highlight-color: transparent;
}
.cb-faq-q::-webkit-details-marker { display: none; }

/* ----- Nav scroll-staat (donker glas) --------------------------------------
 * Verplaatst naar assets/css/hmi-shell.css: daar staat nu de gedeelde
 * .hmi-nav.scrolled donker-glas-behandeling voor ALLE viewports (was hier
 * mobiel-only, met per-template lichte cream-bg op desktop). Eén bron. */

/* ----- Footer-kolommen flush links uitlijnen -------------------------------
 * Default <ul>-padding (browser ~40px) trok de Studio/Contact/Talen-lijsten
 * naar binnen, terwijl de kolomtitel daarboven op x:0 startte — gaf een
 * zichtbare misalignment per kolom. Reset op de gedeelde footer-ul; list-
 * style: none stond al, alleen de padding-left ontbrak. Globaal omdat de
 * inline footer-CSS per page-template apart staat (legacy uit conversie). */
.hmi-footer-col ul { padding: 0 !important; margin: 0 !important; }
.hmi-footer-col li { padding-left: 0 !important; margin-left: 0 !important; }

/* ----- Progressive-enhancement helper --------------------------------------
 * Scroll-reveal-targets krijgen alleen opacity:0 als JS de body heeft
 * gemarkeerd als js-ready. Zonder JS blijven elementen zichtbaar — geen
 * stuck-invisible content meer (zie sectie 6 + 10 fix).
 *
 * Gebruik in template-CSS:
 *   body.js-ready .my-reveal-target { opacity: 0; transform: translateY(20px); }
 *   body.js-ready .my-reveal-target.in-view { opacity: 1; transform: none; }
 */