/*
 * Orderpicking App – sitebrede header (header.php).
 * Desktop ≥ 1200 px · tablet 768–1199 px · mobiel < 768 px.
 */

:root {
	--opa-hdr-h: 76px;
	--opa-hdr-h-scrolled: 64px;
	--opa-hdr-ink: #1d2433;
	--opa-hdr-muted: #5b6475;
	--opa-hdr-line: #e6e9ef;
	--opa-hdr-blue: #2a74b8;
	--opa-hdr-blue-dark: #1f5f9c;
	--opa-hdr-focus: #2a74b8;
	--opa-hdr-top: 0px;
}
@media (max-width: 767.98px) {
	:root { --opa-hdr-h: 64px; --opa-hdr-h-scrolled: 60px; }
}
/* Onder de WordPress-adminbalk blijven als je bent ingelogd. */
@media (min-width: 783px) { body.admin-bar { --opa-hdr-top: 32px; } }
@media (min-width: 601px) and (max-width: 782.98px) { body.admin-bar { --opa-hdr-top: 46px; } }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Naar de inhoud springen (alleen zichtbaar met het toetsenbord). */
.opa-skip {
	position: absolute; left: 12px; top: -100px; z-index: 1100;
	background: #fff; color: var(--opa-hdr-ink); font-weight: 700;
	padding: 12px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(14, 27, 69, .2);
}
.opa-skip:focus { top: calc(var(--opa-hdr-top) + 12px); }
#opa-content { outline: 0; }

/* ---- Balk ---- */
.opa-hdr {
	position: sticky;
	top: var(--opa-hdr-top);
	z-index: 1030;
	background: #fff;
	border-bottom: 1px solid var(--opa-hdr-line);
	transition: transform .25s ease, box-shadow .2s ease;
}
.opa-hdr.is-scrolled { box-shadow: 0 6px 20px rgba(14, 27, 69, .08); border-bottom-color: transparent; }
.opa-hdr.is-hidden { transform: translateY(calc(-100% - var(--opa-hdr-top))); }

.opa-hdr__bar {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1320px;
	height: var(--opa-hdr-h);
	margin: 0 auto;
	padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
	transition: height .2s ease;
}
.opa-hdr.is-scrolled .opa-hdr__bar { height: var(--opa-hdr-h-scrolled); }

.opa-hdr a, .opa-hdr button, .opa-oc a, .opa-oc button { -webkit-tap-highlight-color: transparent; }
.opa-hdr a:focus-visible, .opa-hdr button:focus-visible,
.opa-oc a:focus-visible, .opa-oc button:focus-visible {
	outline: 3px solid var(--opa-hdr-focus);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Logo: vaste hoogte, breedte volgt (geen verspringen bij laden). */
.opa-hdr__logo { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.opa-hdr__logo img { display: block; height: 56px; width: auto; max-width: none; transition: height .2s ease; }
.opa-hdr.is-scrolled .opa-hdr__logo img { height: 48px; }
@media (max-width: 767.98px) {
	.opa-hdr__logo img, .opa-hdr.is-scrolled .opa-hdr__logo img { height: 44px; }
}

/* ---- Hoofdmenu (UberMenu), alleen vanaf 1200 px ---- */
.opa-hdr__nav { flex: 1 1 auto; min-width: 0; height: 100%; display: none; }
@media (min-width: 1200px) { .opa-hdr__nav { display: flex; align-items: stretch; justify-content: center; } }

.opa-hdr__nav .ubermenu,
.opa-hdr__nav .ubermenu-main { background: transparent !important; border: 0 !important; width: 100%; position: static !important; }
.opa-hdr__nav .ubermenu-nav { display: flex !important; justify-content: center; align-items: stretch; height: 100%; flex-wrap: nowrap; }
.opa-hdr__nav .ubermenu-item-level-0 { margin: 0 !important; float: none !important; flex: 0 0 auto !important; width: auto !important; }
/* Megamenu over de volle breedte van de balk, direct eronder. */
.opa-hdr__bar { position: relative; }
.opa-hdr__nav .ubermenu-item-level-0 > .ubermenu-target {
	display: flex !important;
	align-items: center;
	height: var(--opa-hdr-h);
	padding: 0 14px !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	font-weight: 500;
	color: var(--opa-hdr-ink) !important;
	white-space: nowrap;
	transition: height .2s ease, color .15s ease;
}
.opa-hdr.is-scrolled .opa-hdr__nav .ubermenu-item-level-0 > .ubermenu-target { height: var(--opa-hdr-h-scrolled); }
.opa-hdr__nav .ubermenu-has-submenu-drop > .ubermenu-target { padding-right: 14px !important; gap: 6px; }
.opa-hdr__nav .ubermenu-has-submenu-drop > .ubermenu-target .ubermenu-sub-indicator { position: static !important; margin: 0 !important; font-size: 11px; transform: none; }
.opa-hdr__nav .ubermenu-has-submenu-drop.ubermenu-active > .ubermenu-target .ubermenu-sub-indicator { transform: rotate(180deg); }
.opa-hdr__nav .ubermenu-item-level-0 > .ubermenu-target .ubermenu-target-description { display: none !important; }
.opa-hdr__nav .ubermenu-item-level-0:hover > .ubermenu-target,
.opa-hdr__nav .ubermenu-item-level-0.ubermenu-active > .ubermenu-target { color: var(--opa-hdr-blue) !important; }
/* Huidige pagina: blauwe lijn onder het menu-item. */
.opa-hdr__nav .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target,
.opa-hdr__nav .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target { color: var(--opa-hdr-blue) !important; box-shadow: inset 0 -3px 0 var(--opa-hdr-blue); }
/* Het oude menu-item met de GTranslate-vlaggen: niet meer tonen (taalkeuze staat nu rechts). */
.opa-hdr__nav .ubermenu-item-level-0:has(.gtranslate_wrapper),
.opa-hdr__nav .ubermenu-item-2615 { display: none !important; }
/* Megamenu direct onder de balk, met een rustige schaduw. */
.opa-hdr__nav .ubermenu-submenu-drop { border-radius: 0 0 12px 12px; box-shadow: 0 16px 32px rgba(14, 27, 69, .12) !important; }

/* Terugval zonder UberMenu. */
.opa-hdr__menu { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; align-items: center; }
.opa-hdr__menu > li > a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--opa-hdr-ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.opa-hdr__menu .sub-menu { display: none; }

/* ---- Rechts: taal, account, proefknop, menuknop ---- */
.opa-hdr__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
@media (min-width: 1200px) { .opa-hdr__actions { margin-left: 0; } }

.opa-hdr__account {
	display: none;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	color: var(--opa-hdr-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.opa-hdr__account:hover { color: var(--opa-hdr-blue); }
@media (min-width: 1200px) { .opa-hdr__account { display: inline-flex; } }

.opa-hdr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 10px;
	background: var(--opa-hdr-blue);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 6px 14px rgba(42, 116, 184, .25);
	transition: background-color .15s ease, box-shadow .15s ease;
}
.opa-hdr__cta:hover { background: var(--opa-hdr-blue-dark); box-shadow: 0 8px 18px rgba(42, 116, 184, .32); }
.opa-hdr__cta-short { display: none; }
@media (max-width: 767.98px) {
	.opa-hdr__cta { padding: 0 14px; font-size: 13.5px; }
	.opa-hdr__cta-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.opa-hdr__cta-short { display: inline; }
}

.opa-hdr__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--opa-hdr-line);
	border-radius: 10px;
	background: #fff;
	color: var(--opa-hdr-ink);
	cursor: pointer;
}
.opa-hdr__burger:hover { border-color: #c9d0dc; }
.opa-hdr__burger-lines, .opa-hdr__burger-lines::before, .opa-hdr__burger-lines::after {
	display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative;
}
.opa-hdr__burger-lines::before, .opa-hdr__burger-lines::after { content: ""; position: absolute; left: 0; }
.opa-hdr__burger-lines::before { top: -6px; }
.opa-hdr__burger-lines::after { top: 6px; }
@media (min-width: 1200px) { .opa-hdr__burger { display: none; } }

/* ---- Taalkeuze (uitklapper) ---- */
.opa-lang { position: relative; display: none; }
@media (min-width: 768px) { .opa-lang { display: block; } }
.opa-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--opa-hdr-line);
	border-radius: 10px;
	background: #fff;
	color: var(--opa-hdr-ink);
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}
.opa-lang__btn:hover { border-color: #c9d0dc; }
.opa-lang__caret { transition: transform .15s ease; }
.opa-lang__btn[aria-expanded="true"] .opa-lang__caret { transform: rotate(180deg); }
.opa-lang__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 200px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--opa-hdr-line);
	border-radius: 12px;
	box-shadow: 0 16px 32px rgba(14, 27, 69, .14);
	z-index: 10;
}
.opa-lang__menu[hidden] { display: none; }
.opa-lang__menu .gtranslate_wrapper { display: flex; flex-direction: column; }

/* GTranslate-links: vlag weg, taalcode + naam in de eigen taal. */
.opa-lang a.glink, .opa-oc__langs a.glink {
	display: flex !important;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--opa-hdr-ink) !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	margin: 0 !important;
}
.opa-lang a.glink img, .opa-oc__langs a.glink img { display: none !important; }
.opa-lang a.glink::before, .opa-oc__langs a.glink::before {
	content: attr(data-gt-lang);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	color: var(--opa-hdr-muted);
	min-width: 22px;
}
.opa-lang a.glink::after { margin-right: auto; }
.opa-lang a.glink[data-gt-lang="en"]::after, .opa-oc__langs a.glink[data-gt-lang="en"]::after { content: "English"; }
.opa-lang a.glink[data-gt-lang="nl"]::after, .opa-oc__langs a.glink[data-gt-lang="nl"]::after { content: "Nederlands"; }
.opa-lang a.glink[data-gt-lang="fr"]::after, .opa-oc__langs a.glink[data-gt-lang="fr"]::after { content: "Français"; }
.opa-lang a.glink[data-gt-lang="de"]::after, .opa-oc__langs a.glink[data-gt-lang="de"]::after { content: "Deutsch"; }
.opa-lang a.glink[data-gt-lang="pl"]::after, .opa-oc__langs a.glink[data-gt-lang="pl"]::after { content: "Polski"; }
.opa-lang a.glink[data-gt-lang="es"]::after, .opa-oc__langs a.glink[data-gt-lang="es"]::after { content: "Español"; }
.opa-lang a.glink:hover, .opa-lang a.glink:focus-visible { background: #f1f5fb; }
.opa-lang a.glink.gt-current-lang { color: var(--opa-hdr-blue) !important; background: #eaf2fb; }
.opa-lang a.glink.gt-current-lang::before { color: var(--opa-hdr-blue); }

/* ---- Uitklapmenu (onder 1200 px) ---- */
.opa-oc.offcanvas { width: min(400px, 100vw); border-left: 0; display: flex; flex-direction: column; background: #fff; }
@media (min-width: 1200px) { .opa-oc.offcanvas { display: none; } }
.opa-oc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--opa-hdr-h);
	padding: 0 16px;
	border-bottom: 1px solid var(--opa-hdr-line);
	flex: 0 0 auto;
}
.opa-oc__head .opa-hdr__logo img { height: 44px; }
.opa-oc__close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--opa-hdr-line); border-radius: 10px;
	background: #fff; color: var(--opa-hdr-ink); cursor: pointer;
}
.opa-oc__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }

.opa-acc, .opa-acc__sub { list-style: none; margin: 0; padding: 0; }
.opa-acc__item { border-bottom: 1px solid var(--opa-hdr-line); }
.opa-acc__toggle, .opa-acc__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--opa-hdr-ink) !important;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
}
.opa-acc__item.is-current > .opa-acc__toggle, .opa-acc__link[aria-current] { color: var(--opa-hdr-blue) !important; }
.opa-acc__icon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.opa-acc__icon::before, .opa-acc__icon::after {
	content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--opa-hdr-muted); transition: transform .2s ease;
}
.opa-acc__icon::after { transform: rotate(90deg); }
.opa-acc__toggle[aria-expanded="true"] .opa-acc__icon::after { transform: rotate(0deg); }
.opa-acc__sub { padding: 0 0 10px 8px; }
.opa-acc__sub[hidden] { display: none; }
.opa-acc__sub a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	border-radius: 8px;
	color: var(--opa-hdr-muted) !important;
	font-size: 15px;
	text-decoration: none !important;
}
.opa-acc__sub a:hover { background: #f1f5fb; color: var(--opa-hdr-ink) !important; }
.opa-acc__sub a[aria-current] { color: var(--opa-hdr-blue) !important; font-weight: 600; }
.opa-acc__sub .opa-acc__overview { color: var(--opa-hdr-blue) !important; font-weight: 600; }

.opa-oc__langs { margin-top: 20px; }
.opa-oc__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--opa-hdr-muted); }
.opa-oc__langs .gtranslate_wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opa-oc__langs a.glink { border: 1px solid var(--opa-hdr-line); }
.opa-oc__langs a.glink.gt-current-lang { border-color: var(--opa-hdr-blue); color: var(--opa-hdr-blue) !important; background: #eaf2fb; }
.opa-oc__langs a.glink.gt-current-lang::before { color: var(--opa-hdr-blue); }

.opa-oc__foot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 14px 16px max(14px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--opa-hdr-line);
	flex: 0 0 auto;
}
.opa-oc__btn {
	display: flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 12px; border-radius: 10px;
	background: var(--opa-hdr-blue); border: 1.5px solid var(--opa-hdr-blue);
	color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important;
}
.opa-oc__btn--outline { background: #fff; color: var(--opa-hdr-blue) !important; }

/* WhatsApp-knop niet over het open menu. */
body:has(.opa-oc.show) .ht-ctc,
body:has(.opa-oc.show) #ht-ctc-chat { display: none !important; }

/* Minder beweging als de bezoeker dat heeft ingesteld. */
@media (prefers-reduced-motion: reduce) {
	.opa-hdr, .opa-hdr__bar, .opa-hdr__logo img, .opa-hdr__nav .ubermenu-target, .opa-acc__icon::after, .opa-lang__caret { transition: none !important; }
	.opa-hdr.is-hidden { transform: none; }
}

/* Niet afdrukken. */
@media print {
	.opa-hdr, .opa-oc, .opa-skip { display: none !important; }
}