/* ORL de Fraigneux — sitestijlen. (c) TwistedMinds, Gerry Uytdenhouwen — 2026-09-23 */

/* ---------------------------------------------------------------
   1. Container en sectiepadding per breakpoint.
   theme.json zet contentSize op var(--orl-container) en de spacing-preset
   "section" op var(--orl-section-padding); WordPress geeft beide waarden
   letterlijk door, aan --wp--style--global--content-size respectievelijk
   --wp--preset--spacing--section. Dit bestand is dus de enige plek waar
   die twee getallen echt staan.
   --------------------------------------------------------------- */
:root {
	--orl-container: 100%;
	--orl-reading: 860px;
	--orl-hero-min-height: 560px;
	--orl-hero-min-height-mobile: 420px;
	--orl-section-padding: 72px;
	--orl-transition: 280ms ease;
}

/* ---------------------------------------------------------------
   2. Leesbreedte op tekstpagina's.
   De beperking hoort op de tekstblokken zelf, niet op de groep die ze
   omhult: die groep heeft in page.html maar één rechtstreeks kind (de
   .entry-content van post-content), dus een regel op "> *" zou de hele
   pagina-inhoud op 720px zetten -- ook foto's, kolommen en banden, die
   volgens spec §3 juist de volle containerbreedte krijgen.
   Specificiteit: .orl-texte telt 0,1,0 en :is(...) neemt de zwaarste van
   zijn argumenten over (hier een klasse, 0,1,0), samen 0,2,0. De globale
   layoutregel van WordPress telt 0,1,0 en verliest dus voor max-width.
   De marges liggen anders: core zet daar zelf
   margin-left/right: auto !important. Daar is !important het enige
   middel tegen -- geen specificiteitswedloop, maar de enige manier om
   een !important-regel van de kern te overstemmen (uitzondering op
   vestjen-les 4, met reden).
   --------------------------------------------------------------- */
.orl-texte :is(
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul,
	ol,
	blockquote,
	.wp-block-post-title,
	.wp-block-post-date,
	.wp-block-post-excerpt
) {
	max-width: min(var(--orl-container), var(--orl-reading));
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Foto's, kolommen, knoppenrijen en geneste groepen blijven bewust buiten
   die opsomming: zij mogen de volle containerbreedte gebruiken. */

/* ---------------------------------------------------------------
   3. Zichtbare focus op alles wat bediend kan worden.
   --------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--bleu);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------
   4. Knoppen: pilvorm en minimale aanraakhoogte.
   --------------------------------------------------------------- */
.wp-block-button__link.wp-element-button {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--orl-transition), color var(--orl-transition);
}

.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--bleu);
	border: 2px solid var(--wp--preset--color--bleu);
}

/* ---------------------------------------------------------------
   5. Navigatie-hover: onderlijn groeit vanuit het midden.
   --------------------------------------------------------------- */
.orl-header .wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: var(--wp--preset--color--titre);
	transition: color var(--orl-transition), transform var(--orl-transition);
}

.orl-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -4px;
	height: 2px;
	background-color: var(--wp--preset--color--bleu);
	transition: left var(--orl-transition), right var(--orl-transition);
}

.orl-header .wp-block-navigation-item__content:hover,
.orl-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--bleu);
	transform: translateY(-1px);
}

.orl-header .wp-block-navigation-item__content:hover::after,
.orl-header .wp-block-navigation-item__content:focus-visible::after,
.orl-header .current-menu-item > .wp-block-navigation-item__content::after {
	left: 0;
	right: 0;
}

/* De RDV-pil doet niet mee: die heeft zijn eigen knop-hover. */
.orl-header .wp-block-button .wp-block-button__link::after {
	content: none;
}

/* ---------------------------------------------------------------
   6. Hero: hoogte en witte waas (de bijhorende block style levert de
   verlopen; hier staat alleen de hoogte, want die is themabreed).
   --------------------------------------------------------------- */
.wp-block-cover.is-style-orl-voile-blanc {
	min-height: var(--orl-hero-min-height-mobile);
}

/* ---------------------------------------------------------------
   7. Scroll-reveal: de verborgen startstaat geldt alleen als het
   script gedraaid heeft (html.orl-js). Zonder JS is alles zichtbaar.
   --------------------------------------------------------------- */
.orl-js .is-style-orl-apparition {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms ease, transform 600ms ease;
}

.orl-js .is-style-orl-apparition.in {
	opacity: 1;
	transform: none;
}

.orl-js .is-style-orl-apparition > .wp-block-column,
.orl-js .is-style-orl-apparition .wp-block-post {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms ease, transform 600ms ease;
	transition-delay: calc(var(--orl-reveal-index, 0) * 120ms);
}

.orl-js .is-style-orl-apparition.in > .wp-block-column,
.orl-js .is-style-orl-apparition.in .wp-block-post {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------
   8. Media queries — bewust ná de basisregels (specificiteit is gelijk,
   dus de latere regel wint).
   --------------------------------------------------------------- */
@media (min-width: 576px) {
	:root { --orl-container: 540px; }
}

@media (min-width: 768px) {
	:root { --orl-container: 720px; }
}

@media (min-width: 992px) {
	:root {
		--orl-container: 960px;
		--orl-section-padding: 120px;
	}
	.wp-block-cover.is-style-orl-voile-blanc {
		min-height: var(--orl-hero-min-height);
	}
}

@media (min-width: 1200px) {
	:root { --orl-container: 1140px; }
}

/* ---------------------------------------------------------------
   9. Reduced motion schakelt alles uit. Niet onderhandelbaar: dit is
   een KNO-praktijk, met patiënten die duizelig worden van beweging.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.orl-js .is-style-orl-apparition,
	.orl-js .is-style-orl-apparition > .wp-block-column,
	.orl-js .is-style-orl-apparition .wp-block-post {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.orl-header .wp-block-navigation-item__content,
	.orl-header .wp-block-navigation-item__content::after,
	.wp-block-button__link.wp-element-button {
		transition: none;
	}

	.orl-header .wp-block-navigation-item__content:hover,
	.orl-header .wp-block-navigation-item__content:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------
   10. Links op de donkere footer.
   De globale linkkleur (bleu #2b72b8) haalt op de footerachtergrond
   (titre #34506b) maar 1.67:1, ver onder de 4.5:1 die WCAG AA vraagt.
   De footer heeft zijn eigen tekstkleur al op blanc staan; die halen we
   hier door naar de links, met een onderlijning zodat ze herkenbaar
   link blijven zonder op kleur alleen te steunen.
   De knoppen blijven buiten deze regel: die hebben hun eigen witte
   achtergrond en dus hun eigen contrastverhouding.
   --------------------------------------------------------------- */
.orl-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--blanc);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   11. Contactformulier (Contact Form 7).
   CF7 levert kale browserveldjes; die vallen uit de toon naast de
   pilvormige knoppen van het thema. Deze regels gebruiken uitsluitend
   bestaande themavariabelen -- geen nieuwe kleuren of maten.
   De focusregel uit sectie 3 geldt hier al, dus die herhalen we niet.
   --------------------------------------------------------------- */
.wpcf7-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--petit);
}

.wpcf7-form p {
	margin-bottom: 16px;
}

.wpcf7-form-control:where([type="text"], [type="email"], [type="tel"], textarea) {
	width: 100%;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--petit);
	transition: border-color var(--orl-transition);
}

.wpcf7-form-control:where([type="text"], [type="email"], [type="tel"], textarea):hover {
	border-color: var(--wp--preset--color--bleu);
}

.wpcf7-form textarea {
	min-height: 110px;
	resize: vertical;
}

/* De toestemmingsregel: het vinkje naast de tekst in plaats van erboven. */
.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 400;
}

.wpcf7-acceptance input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--wp--preset--color--bleu);
}

/* De verzendknop krijgt exact de vorm van een core/button. */
.wpcf7-submit {
	min-height: 48px;
	padding: 12px 28px;
	border: 2px solid var(--wp--preset--color--bleu);
	border-radius: 999px;
	background-color: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--bouton);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--orl-transition), color var(--orl-transition);
}

.wpcf7-submit:hover {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--bleu);
}

/* Validatie- en verzendmeldingen in de huisstijl. */
.wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: var(--wp--preset--font-size--petit);
	margin-top: 6px;
}

.wpcf7-response-output {
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 8px;
	padding: 16px 20px;
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--petit);
}

/* ---------------------------------------------------------------
   12. Fijnafstelling na de eerste visuele ronde.
   Deze regels staan bewust achteraan: ze overschrijven waarden uit de
   secties hierboven en uit theme.json, en een override hoort ná de
   regel die hij overschrijft.
   --------------------------------------------------------------- */

/* Sitetitel en praktijknaam lezen als één logo in plaats van twee blokken. */
.orl-header .orl-logo .wp-block-site-title {
	margin-bottom: 0;
	line-height: 1.1;
}

.orl-header .orl-logo p {
	margin-top: 2px;
	line-height: 1.2;
}

/* Knoppen iets compacter: 48px was de knop-maat uit de eerste ronde en oogde
   fors. 42px blijft ruim boven de minimale aanraakzone. */
.wp-block-button__link.wp-element-button {
	min-height: 40px;
	line-height: 1.2;
}

/* De wettelijke vermeldingen onderaan de footer op één regel, kleiner dan de
   rest. Ze wikkelen pas op smalle schermen. */
.orl-footer .orl-mentions {
	gap: 8px 20px;
	margin-top: 16px;
}

.orl-footer .orl-mentions p {
	margin: 0;
}

/* De credit onderaan schuift naar rechts; de wettelijke vermeldingen blijven
   links staan. margin-left: auto duwt alleen dit ene item weg, dus de rij
   wikkelt nog gewoon op smalle schermen. */
.orl-footer .orl-mentions .orl-credit {
	margin-left: auto;
}

/* De opsomming met de coordinaten loopt strak, zonder knopruimte eromheen. */
.orl-footer .orl-coordonnees-liens {
	gap: 4px;
	margin-top: 4px;
}

/* De credit mag terugtreden, maar niet onder de contrastnorm zakken. Wit op
   0.6 komt op de footerachtergrond uit rond 2.7:1, ruim onder de 4.5:1 die
   WCAG AA voor deze tekstgrootte vraagt; 0.7 haalt het net wel. */
.orl-footer .orl-mentions .orl-credit {
	opacity: 0.7;
}

/* ---------------------------------------------------------------
   13. Vaste header.
   De header blijft meescrollen. Anker-doelen krijgen scroll-margin,
   anders verdwijnt de sectietitel onder de balk zodra je op een
   #anker klikt.
   --------------------------------------------------------------- */
.wp-block-template-part:has(> .orl-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* In rust geen lijn: de header hoort dan bij de pagina. Pas wanneer er inhoud
   onder de balk door schuift, verschijnt de scheiding -- en krimpt de header
   naar ongeveer 60% van zijn hoogte. De padding en de logo-tekst bewegen mee,
   zodat het een echte verkleining is en geen verspringende witruimte. */
.orl-header {
	transition: padding var(--orl-transition), box-shadow var(--orl-transition);
}

.orl-header.is-compact {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	box-shadow: 0 2px 12px rgba(27, 39, 51, 0.12);
}

.orl-header.is-compact .wp-block-button__link.wp-element-button {
	min-height: 34px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.orl-header .orl-logo .wp-block-site-title,
.orl-header .orl-logo p {
	transition: font-size var(--orl-transition), opacity var(--orl-transition);
}

.orl-header.is-compact .orl-logo .wp-block-site-title a {
	font-size: var(--wp--preset--font-size--corps);
}

.orl-header.is-compact .orl-logo p {
	font-size: 13px;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.orl-header,
	.orl-header .orl-logo .wp-block-site-title,
	.orl-header .orl-logo p {
		transition: none;
	}
}

:where([id]) {
	scroll-margin-top: 88px;
}

/* De actieve pagina in het menu: de onderlijn staat al vol (sectie 5) en de
   tekst krijgt hier het accent en meer gewicht. */
.orl-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bleu);
	font-weight: 700;
}

/* De telefoonlink in de header loopt mee met de menu-items in plaats van als
   knop op te vallen. */
.orl-header .orl-header-telephone .wp-block-button__link {
	font-weight: 600;
	text-decoration: none;
}

.orl-header .orl-header-telephone .wp-block-button__link:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   14. Hero-kaart en de afsprakenmodule.
   --------------------------------------------------------------- */

/* De contentSize van een constrained groep begrenst haar KINDEREN, niet de
   groep zelf -- daarom liep de kaart over de volle containerbreedte. De
   breedte hoort dus hier. Onder 768px blijft ze volle breedte, anders wordt
   de tekst op een telefoon onleesbaar smal. */
@media (min-width: 768px) {
	.wp-block-cover .orl-hero-carte {
		max-width: calc(var(--orl-container) / 2);
		margin-left: max(0px, (100% - var(--orl-container)) / 2) !important;
		margin-right: auto !important;
	}
}

/* Licht doorschijnend, zodat de foto erachter meespeelt. Niet lager dan 0.9:
   de tekst moet leesbaar blijven boven een foto met detail. */
.wp-block-cover .orl-hero-carte.is-style-orl-carte {
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(3px);
}

/* De Progenda-embed is voor een telefoonscherm gemaakt en oogt uitgerekt op
   een breed scherm. Op tablet en desktop staat hij daarom in een smalle kolom
   naast de foto; op mobiel blijft hij gewoon volle breedte. */
.orl-embed {
	max-width: 100%;
}

@media (min-width: 768px) {
	.orl-rdv-colonnes .orl-embed {
		max-width: 440px;
	}
}

/* ---------------------------------------------------------------
   15. Secties sluiten op elkaar aan.
   WordPress zet tussen blokken in een flow-layout de blokafstand als
   margin-block-start (hier 28px). Tussen gewone tekstblokken is dat
   gewenst, maar de homepage-secties dragen elk hun eigen
   achtergrondkleur: daar wordt die marge een witte streep tussen de
   hero en de blauwe sectie, en tussen de laatste sectie en de footer.
   --------------------------------------------------------------- */
main > .entry-content > * {
	margin-block-start: 0;
}

.wp-site-blocks > .wp-block-template-part:has(> .orl-footer) {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   16. Footer: één tekstgrootte, pijltjes in plaats van bolletjes,
   geen onderlijning.
   De onderlijning was het enige signaal dat iets een link was -- op de
   donkere footer heeft een link immers dezelfde witte kleur als de tekst
   eromheen. Het pijltje neemt die rol over; de tel- en e-mailregel, die
   tussen gewone tekst staan, krijgen een onderlijning bij hover.
   --------------------------------------------------------------- */
.orl-footer,
.orl-footer p,
.orl-footer li,
.orl-footer a,
.orl-footer .wp-block-heading {
	font-size: var(--wp--preset--font-size--petit);
}

.orl-footer a:not(.wp-element-button) {
	text-decoration: none;
}

.orl-footer a:not(.wp-element-button):hover,
.orl-footer a:not(.wp-element-button):focus-visible {
	text-decoration: underline;
}

/* De lijst met juridische pagina's: geen opsommingstekens maar een pijl die
   meeschuift bij hover. */
.orl-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.orl-footer .wp-block-list li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.orl-footer .wp-block-list li::before {
	content: "";
	position: relative;
	top: -1px;
	flex-shrink: 0;
	width: 8px;
	height: 13px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%202%20L8%208%20L2%2014%22/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%202%20L8%208%20L2%2014%22/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.65;
	transition: transform var(--orl-transition), opacity var(--orl-transition);
}

.orl-footer .wp-block-list li:hover::before {
	transform: translateX(2px);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.orl-footer .wp-block-list li::before,
	.orl-footer .wp-block-list li:hover::before {
		transition: none;
		transform: none;
	}
}

/* De telefoon- en e-mailregel zijn technisch core/button (alleen dat blok kan
   tekst en URL uit Cabinet halen), dus ze vielen buiten de regel hierboven.
   Ook zij zonder streep; de hover blijft als enige signaal over. */
.orl-footer .wp-block-button.is-style-orl-lien .wp-block-button__link {
	text-decoration: none;
}

.orl-footer .wp-block-button.is-style-orl-lien .wp-block-button__link:hover,
.orl-footer .wp-block-button.is-style-orl-lien .wp-block-button__link:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   17. Alle knoppen even groot, en de outline krijgt een hover.
   Core geeft de outline-variant een eigen rand van 2px én een ruimere
   padding, waardoor die 50px hoog werd tegenover 40px voor een gevulde
   knop. De maat van de headerknop is de norm: elke knop krijgt dezelfde
   padding, en de gevulde variant een doorzichtige rand zodat het
   randbreedteverschil verdwijnt.
   --------------------------------------------------------------- */
.wp-block-button__link.wp-element-button {
	border: 2px solid transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	padding: 7px 20px;
	border-color: var(--wp--preset--color--bleu);
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--bleu);
}

/* Hover spiegelt de gevulde knop: de outline loopt vol. */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--bleu);
}

/* ---------------------------------------------------------------
   18. De kaart naast het beeld in de afsprakensectie.
   De kolommen staan op align-self: flex-start, dus de kaartkolom bleef
   op zijn eigen hoogte staan terwijl de foto ernaast veel hoger is.
   Hier rekken we de kolommen en laat de iframe de volle hoogte vullen,
   zodat kaart en beeld even hoog zijn. Op mobiel staan ze onder elkaar
   en is een vierkant logischer dan een hoge strook.

   De regel mikt bewust alleen op een Maps-embed: de Progenda-module is
   voor een telefoonscherm gemaakt en houdt haar smalle maximumbreedte.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
	.orl-rdv-colonnes {
		align-items: stretch;
	}

	.orl-rdv-colonnes > .wp-block-column {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}

	.orl-rdv-colonnes .orl-embed:has(iframe[src*="google.com/maps"]) {
		max-width: none;
		flex: 1 1 auto;
	}

	.orl-rdv-colonnes .orl-embed:has(iframe[src*="google.com/maps"]) iframe {
		height: 100%;
	}
}

@media (max-width: 767px) {
	.orl-embed:has(iframe[src*="google.com/maps"]) iframe {
		aspect-ratio: 1;
		height: auto;
	}
}

/* ---------------------------------------------------------------
   19. Hamburgermenu tot 1024px.
   Core zet de omslag naar het overlay-menu op 600px. Sinds de klant
   langere menu-items gebruikt ("Dr Zicot Anne-Françoise") past de
   balk daar niet meer, dus schuiven we de grens op. De twee regels
   hieronder spiegelen precies wat core boven 600px doet, maar dan
   pas vanaf 1024px.
   --------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.orl-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.orl-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* De hamburger hoort rechtsboven, op de hoogte van het logo. In de normale
   flex-volgorde belandt hij op de tweede regel, naast de RDV-knop. Absoluut
   positioneren haalt hem uit die rij en zet hem in de rechterbovenhoek van de
   container; de RDV-knop houdt dan de tweede regel voor zichzelf. */
@media (max-width: 1023.98px) {
	.orl-header > .wp-block-group {
		position: relative;
	}

	.orl-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		position: absolute;
		top: 0;
		right: 0;
		padding: 4px;
	}

	.orl-header .wp-block-navigation {
		margin: 0;
		position: static;
	}

	.orl-header .wp-block-group.is-content-justification-right {
		padding-right: 44px;
	}
}

/* Zodra de RDV-knop niet meer naast het logo past, zakt hij naar een eigen
   regel. Waar dat gebeurt hangt af van de lengte van de praktijknaam en van de
   knoptekst, dus we laten het niet aan het toeval over: onder 840px krijgt de
   knop altijd zijn eigen regel en staat hij gecentreerd. De hamburger staat
   los daarvan rechtsboven, dus de reservering rechts vervalt hier. */
@media (max-width: 839.98px) {
	.orl-header .wp-block-group.is-content-justification-right {
		flex-basis: 100%;
		justify-content: center;
		padding-right: 0;
		gap: 0;
	}
}