/* Las Hotellas - klik- en focusstijlen. Tikken en klikken tonen nooit een kader;
   toetsenbordfocus wel. assets/js/toetsenbord.js zet de klasse lh-toetsenbord op
   <html> zodra iemand met Tab of de pijltoetsen navigeert en haalt hem weg bij een
   tik of klik. Alleen dan verschijnt het kader. Formuliervelden vallen hierbuiten:
   die houden hun eigen focusmarkering (base.css), want daar typ je in. */
:where(a, button, summary, [role="button"], [tabindex]):focus,
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):active {
	outline: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

html.lh-toetsenbord :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #001722) !important;
	outline-offset: 3px;
	box-shadow: none !important;
}

/* Op donker: wit kader. */
html.lh-toetsenbord :is(footer.wp-block-template-part, .has-contrast-background-color, .has-accent-1-background-color, .wp-block-navigation__responsive-container) :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--base, #fff) !important;
}

/* Elementen met tabindex="-1" krijgen alleen via een script focus (bijvoorbeeld
   de deelnemerslijst na het bladeren, zodat een schermlezer de nieuwe inhoud
   voorleest). Met Tab zijn ze niet bereikbaar, dus nooit een kader. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}