/* -----------------------------------------------------------------------------
   LicenseLeader (shared with the Licenses4US theme)

   Design tokens are taken from the Elementor kit that is being replaced, so the
   rebuilt site keeps the same look:
     Primary #0047AB, Secondary #000000, Accent #FFFFFF, surface #F2F4F8
     Roboto (body, headings) and Roboto Slab (accents)
     Breakpoints 768 and 1025
   -------------------------------------------------------------------------- */

:root {
	--l4u-blue: #0047AB;
	--l4u-blue-dark: #003585;
	--l4u-black: #000;
	--l4u-white: #fff;
	--l4u-surface: #F2F4F8;
	--l4u-border: #dfe3ea;
	--l4u-muted: #5a6472;

	--l4u-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--l4u-font-accent: "Roboto Slab", Georgia, serif;

	--l4u-width: 1366px;
	--l4u-width-wide: 1560px;
	/* Comfortable reading width. Fixed rather than in ch, because ch scales with font size
	   and would make a heading many times wider than the text below it. */
	--l4u-measure: 42.5rem;
	--l4u-gutter: clamp(1rem, 4vw, 2.5rem);
	--l4u-radius: 6px;

	--l4u-footer-bg: #0d1b2a;
	--l4u-footer-text: #c9d4e2;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--l4u-font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--l4u-black);
	background: var(--l4u-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--l4u-font);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 .5em;
}

a {
	color: var(--l4u-blue);
}

img {
	max-width: 100%;
	height: auto;
}

/* Layout ------------------------------------------------------------------- */

.l4u-container {
	width: 100%;
	max-width: var(--l4u-width);
	margin-inline: auto;
	padding-inline: var(--l4u-gutter);
}

/* WooCommerce templates open their own wrapper, so a container can end up nested inside
   another one. Without this the inner one adds a second gutter and the content sits inset
   from the headings around it. */
.l4u-container .l4u-container {
	max-width: none;
	padding-inline: 0;
}

.l4u-main {
	min-height: 40vh;
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	padding: .75rem 1.25rem;
	clip-path: none;
	background: var(--l4u-white);
	outline: 3px solid var(--l4u-blue);
}

/* Header ------------------------------------------------------------------- */

.site-header {
	padding-block: .75rem;
	background: var(--l4u-white);
}

/* A rounded bar rather than a full-width band: it lifts the header off the page and keeps
   the eye inside the content width. */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2.5vw, 2rem);
	padding: .7rem clamp(1rem, 2.5vw, 1.75rem);
	background: var(--l4u-surface);
	border: 1px solid var(--l4u-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

/* Wider than the content so the bar frames the page rather than sitting inside it. */
.site-header .l4u-container {
	max-width: var(--l4u-width-wide);
}

.site-header__logo img {
	display: block;
	max-height: 64px;
	width: auto;
}

/* Stick to the top on scroll, so search and cart stay reachable in a long category. */
@media (min-width: 1025px) {
	.site-header {
		position: sticky;
		inset-block-start: 0;
		z-index: 50;
		backdrop-filter: blur(6px);
		background: rgb(255 255 255 / .85);
	}

	.admin-bar .site-header {
		inset-block-start: 32px;
	}
}

.site-header__tools {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-inline-start: auto;
}

/* Navigation --------------------------------------------------------------- */

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.75rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu a {
	display: block;
	padding-block: .35rem;
	color: var(--l4u-black);
	font-weight: 500;
	text-decoration: none;
}

.menu a:hover,
.menu a:focus-visible,
.menu .current-menu-item > a {
	color: var(--l4u-blue);
}

.menu--primary .menu-item-has-children {
	position: relative;
}

.menu--primary .sub-menu {
	display: none;
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 20;
	min-width: 15rem;
	margin: 0;
	padding: .5rem 0;
	list-style: none;
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
	box-shadow: 0 8px 24px rgb(0 0 0 / .1);
}

.menu--primary .menu-item-has-children:hover > .sub-menu,
.menu--primary .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.menu--primary .sub-menu a {
	padding: .5rem 1rem;
}

/* Search ------------------------------------------------------------------- */

.l4u-search {
	display: flex;
	max-width: 24rem;
	flex: 1 1 14rem;
}

.l4u-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: .55rem .95rem;
	font: inherit;
	border: 1px solid var(--l4u-border);
	border-inline-end: 0;
	border-radius: 999px 0 0 999px;
	background: var(--l4u-white);
}

.l4u-search input[type="search"]:focus-visible {
	outline: 2px solid var(--l4u-blue);
	outline-offset: -2px;
}

.l4u-search button {
	display: grid;
	place-items: center;
	padding-inline: 1.05rem;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: var(--l4u-blue);
	color: var(--l4u-white);
	cursor: pointer;
}

.l4u-search button:hover {
	background: var(--l4u-blue-dark);
}

/* Cart --------------------------------------------------------------------- */

.l4u-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: .55rem .95rem;
	border: 1px solid var(--l4u-border);
	border-radius: 999px;
	background: var(--l4u-white);
	text-decoration: none;
	color: var(--l4u-black);
}

.l4u-cart:hover {
	border-color: var(--l4u-blue);
	color: var(--l4u-blue);
}

.l4u-cart__count {
	position: absolute;
	inset-block-start: -.5rem;
	inset-inline-end: -.5rem;
	min-width: 1.25rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: #d62828;
	color: var(--l4u-white);
	font-size: .75rem;
	line-height: 1.25rem;
	text-align: center;
}

/* Newsletter band ---------------------------------------------------------- */

.l4u-newsletter {
	background: var(--l4u-blue);
	color: var(--l4u-white);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.l4u-newsletter h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Footer ------------------------------------------------------------------- */

.site-footer {
	background: var(--l4u-footer-bg);
	color: var(--l4u-footer-text);
	padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.site-footer__columns {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
}

.footer__heading {
	font-size: 1.125rem;
	margin-bottom: .85rem;
	color: var(--l4u-white);
}

.site-footer .menu {
	flex-direction: column;
	gap: .45rem;
}

.site-footer .menu a {
	color: var(--l4u-footer-text);
	font-weight: 400;
}

.site-footer .menu a:hover,
.site-footer .menu a:focus-visible {
	color: var(--l4u-white);
	text-decoration: underline;
}

.site-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin-block-start: .5rem;
}

/* The payment strip is a dark-on-light image, so it needs a light plate on the dark footer. */
.site-footer__payments-img {
	display: block;
	max-width: 20rem;
	width: 100%;
	height: auto;
	padding: .5rem .65rem;
	background: var(--l4u-white);
	border-radius: var(--l4u-radius);
}

.site-footer__reassure {
	margin-block: .9rem 0;
	max-width: 30ch;
	font-size: .875rem;
	color: rgb(201 212 226 / .8);
}

.site-footer__legal {
	margin-block-start: 2.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgb(255 255 255 / .12);
	text-align: center;
	color: rgb(201 212 226 / .75);
	font-size: .875rem;
}

/* The last content section runs straight into the newsletter band, so no white strip is
   left between the page and the footer. */
.l4u-main > .l4u-section:last-child {
	padding-block-end: clamp(2rem, 5vw, 3.5rem);
	margin-block-end: 0;
}

.l4u-main {
	padding-block-end: 0;
}

@media (min-width: 768px) {
	.site-footer__columns {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile navigation -------------------------------------------------------- */

.l4u-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .9rem;
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
	background: var(--l4u-white);
	font: inherit;
	cursor: pointer;
}

/* Op een telefoon passen logo, menuknop, zoekveld en winkelwagen niet op één regel: het
   zoekveld alleen vraagt al 14rem. De balk liep daardoor ruim 50px buiten beeld. Dat viel
   niet op omdat `body { overflow-x: hidden }` de schuifbalk verbergt - de winkelwagenknop
   stond wél half buiten het scherm. Zoeken en winkelwagen krijgen daarom een eigen regel. */
@media (max-width: 767px) {
	.site-header__inner {
		flex-wrap: wrap;
		row-gap: .75rem;
	}

	.site-header__logo img {
		max-height: 44px;
	}

	.l4u-nav-toggle {
		order: 2;
		margin-inline-start: auto;
	}

	.site-header__tools {
		order: 4;
		width: 100%;
		margin-inline-start: 0;
	}

	.site-header__nav {
		order: 5;
	}

	.l4u-search {
		max-width: none;
	}
}

@media (max-width: 1024px) {
	.site-header__nav {
		display: none;
		flex-basis: 100%;
	}

	.site-header__nav.is-open {
		display: block;
	}

	.menu--primary {
		flex-direction: column;
		gap: 0;
		padding-block: .5rem;
	}

	.menu--primary .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding-inline-start: 1rem;
	}
}

@media (min-width: 1025px) {
	.l4u-nav-toggle {
		display: none;
	}
}

/* LicenseLeader only ------------------------------------------------------- */

/* The header carries an account link next to the cart, one item more than on Licenses4US.
   Without this the search field refused to shrink below its intrinsic width and pushed the
   cart off-screen at 390px (scrollWidth 430). */
.site-header__tools .l4u-search {
	min-width: 0;
}

@media (max-width: 767px) {
	.site-header__tools .l4u-search {
		flex-basis: 8rem;
	}
}

/* The header bar takes the footer colour. The logo is white with a dark outline, drawn for
   the dark header the old site had, so it is legible here without any extra treatment. */
.site-header__inner {
	background: var(--l4u-footer-bg);
	border-color: var(--l4u-footer-bg);
	color: var(--l4u-footer-text);
}

.site-header__logo img {
	max-height: 56px;
}

.site-header .menu a {
	color: var(--l4u-footer-text);
}

.site-header .menu a:hover,
.site-header .menu a:focus-visible,
.site-header .menu .current-menu-item > a {
	color: var(--l4u-white);
}

/* The desktop dropdown keeps its white panel, so its links go back to dark text. */
@media (min-width: 1025px) {
	.site-header .menu--primary .sub-menu a {
		color: var(--l4u-black);
	}

	.site-header .menu--primary .sub-menu a:hover,
	.site-header .menu--primary .sub-menu a:focus-visible,
	.site-header .menu--primary .sub-menu .current-menu-item > a {
		color: var(--l4u-blue);
	}
}

.l4u-nav-toggle {
	border-color: rgb(201 212 226 / .35);
	background: transparent;
	color: var(--l4u-white);
}

@media (max-width: 1024px) {
	.site-header .menu--primary .sub-menu {
		background: transparent;
	}

	.site-header .menu--primary .sub-menu a {
		color: var(--l4u-footer-text);
	}
}

@media (max-width: 767px) {
	.site-header__logo img {
		max-height: 44px;
	}
}

/* Content pages open with their own heading block, which replaces the theme's page title.
   Give that first heading the page-title size and alignment, whatever level it has. */
.l4u-prose--own-title > :is(h1, h2, h3, h4):first-child {
	max-width: var(--l4u-measure);
	margin: 0 auto 1rem;
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	line-height: 1.2;
	text-align: start;
}

/* Text pages sit as a white card on the grey surface, so the text block stands apart from
   the header and footer. page.php adds the modifier for pages that open with a heading. */
.l4u-page--card {
	margin-block-start: calc(-1 * clamp(1.5rem, 4vw, 3rem));
	padding-block: clamp(1.5rem, 4vw, 3rem);
	background: var(--l4u-surface);
}

.l4u-page--card .l4u-prose--own-title {
	max-width: calc(var(--l4u-measure) + 2 * clamp(1.25rem, 3vw, 2.5rem));
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
}

.l4u-page--card .l4u-prose--own-title > :last-child {
	margin-block-end: 0;
}

/* The payment-methods image (650x180) carries 270px of empty, transparent canvas on the
   right. Crop it to the logos instead of showing a white box that is wider than they are. */
.site-footer__payments-img {
	max-width: 15rem;
	aspect-ratio: 380 / 180;
	object-fit: cover;
	object-position: left center;
}