/* =========================================================
   HEADER
   Autorijschool Joyce
   ========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: var(--joyce-white);
	box-shadow: 0 4px 20px rgba(32, 41, 77, 0.06);
}

.admin-bar .site-header {
	top: 32px;
}


/* =========================================================
   LOGOBALK
   ========================================================= */

.site-header__logo-strip {
	width: 100%;
	border-bottom: 1px solid rgba(46, 57, 102, 0.08);
	background: var(--joyce-white);
}

.site-header__logo-strip-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 64px;

	min-height: 116px;

	padding-top: 14px;
	padding-bottom: 14px;
}

.site-header__partner-logo {
	display: flex;
	min-width: 0;

	align-items: center;
	justify-content: center;

	text-decoration: none;
}

.site-header__partner-logo img {
	display: block;

	width: auto;
	max-width: 100%;
	height: auto;

	object-fit: contain;
}

.site-header__partner-logo--joyce img {
	max-width: 300px;
	max-height: 82px;
}

.site-header__partner-logo--angst img {
	max-width: 235px;
	max-height: 74px;
}

.site-header__partner-logo--erkend img {
	max-width: 285px;
	max-height: 78px;
}


/* =========================================================
   BLAUWE NAVIGATIEBALK
   ========================================================= */

.site-header__navigation-bar {
	width: 100%;
	background: #115B8C;
}

.site-header__inner {
	display: flex;

	min-height: 74px;

	align-items: center;
	justify-content: space-between;

	gap: 24px;
}


/* =========================================================
   MOBIEL LOGO
   ========================================================= */

.site-branding {
	display: none;
	flex: 0 1 260px;
}

.site-branding .custom-logo-link,
.site-branding .joyce-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-branding img {
	display: block;

	width: auto;
	max-width: 230px;
	max-height: 62px;

	object-fit: contain;
}

.joyce-logo--text {
	color: #ffffff;
	font-size: 1.35rem;
	font-weight: 800;
}


/* =========================================================
   DESKTOP NAVIGATIE
   ========================================================= */

.site-navigation {
	margin-right: auto;
}

.site-navigation__list,
.site-navigation--desktop > ul {
	display: flex;
	align-items: center;

	gap: 0;

	margin: 0;
	padding: 0;

	list-style: none;
}

.site-navigation__list > li {
	position: relative;

	display: flex;
	align-items: center;
}


/* =========================================================
   RODE SCHEIDINGSLIJNEN TUSSEN MENU-ITEMS
   ========================================================= */

.site-navigation__list > li + li::before {
	display: block;

	width: 1px;
	height: 24px;

	margin: 0 9px;

	background: #E31E24;

	content: "";
}


/* =========================================================
   HOOFDMENU ITEMS
   ========================================================= */

.site-navigation__list > li > a,
.site-navigation--desktop > ul > li > a {
	display: inline-flex;

	min-height: 44px;

	align-items: center;
	justify-content: center;

	padding: 9px 14px;

	border: 0;
	border-radius: 9px;

	color: #ffffff;

	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none;

	transition:
		background-color 180ms ease,
		color 180ms ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.site-navigation__list > li > a:hover,
.site-navigation--desktop > ul > li > a:hover {
	background: rgba(255, 255, 255, 0.11);
	color: #ffffff;
}


/* =========================================================
   ACTIEF MENU-ITEM
   Volledig rood
   ========================================================= */

.site-navigation__list > .current-menu-item > a,
.site-navigation__list > .current-menu-parent > a,
.site-navigation__list > .current-menu-ancestor > a {
	background: #E31E24;
	color: #ffffff;
}


/* Homepage */

body.home
.site-navigation__list > li:first-child > a,

body.joyce-page-home
.site-navigation__list > li:first-child > a {
	background: #E31E24;
	color: #ffffff;
}


/* Lesprijzen */

body.joyce-page-lesprijzen
.site-navigation__list > li > a[href$="/lesprijzen/"] {
	background: #E31E24;
	color: #ffffff;
}


/* Over Joyce */

body.joyce-page-over-joyce
.site-navigation__list > li > a[href$="/over-joyce/"] {
	background: #E31E24;
	color: #ffffff;
}


/* Contact */

body.joyce-page-contact
.site-navigation__list > li > a[href$="/contact/"] {
	background: #E31E24;
	color: #ffffff;
}


/* Rijlessen hoofditem */

body.joyce-page-automaat-rijles-den-bosch
.site-navigation__list > .menu-item-has-children > a,

body.joyce-page-rijles-autisme-adhd
.site-navigation__list > .menu-item-has-children > a,

body.joyce-page-rijangst-en-faalangst
.site-navigation__list > .menu-item-has-children > a,

body.joyce-page-opfrisles-autorijden
.site-navigation__list > .menu-item-has-children > a {
	background: #E31E24;
	color: #ffffff;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

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

.site-navigation .sub-menu {
	position: absolute;

	top: calc(100% + 8px);
	left: 0;

	z-index: 100;

	display: block;

	min-width: 245px;

	margin: 0;
	padding: 8px;

	border: 1px solid rgba(17, 91, 140, 0.14);
	border-radius: 12px;

	background: #ffffff;

	box-shadow: 0 18px 40px rgba(32, 41, 77, 0.16);

	list-style: none;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translateY(7px);

	transition:
		opacity 160ms ease,
		transform 160ms ease,
		visibility 160ms ease;
}

.site-navigation .menu-item-has-children:hover > .sub-menu,
.site-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translateY(0);
}


/* Hoverbrug naar dropdown */

.site-navigation .sub-menu::before {
	position: absolute;

	top: -10px;
	right: 0;
	left: 0;

	height: 12px;

	content: "";
}


.site-navigation .sub-menu li {
	width: 100%;
}

.site-navigation .sub-menu a {
	display: block;

	width: 100%;

	padding: 11px 13px;

	border: 0;
	border-radius: 8px;

	color: var(--joyce-heading);

	font-size: 0.89rem;
	font-weight: 650;
	line-height: 1.35;

	text-decoration: none;

	transition:
		background-color 160ms ease,
		color 160ms ease;
}

.site-navigation .sub-menu a:hover {
	background: rgba(17, 91, 140, 0.09);
	color: #115B8C;
}


/* Actief dropdown-item */

body.joyce-page-automaat-rijles-den-bosch
.site-navigation .sub-menu a[href$="/automaat-rijles-den-bosch/"],

body.joyce-page-rijles-autisme-adhd
.site-navigation .sub-menu a[href$="/rijles-autisme-adhd/"],

body.joyce-page-rijangst-en-faalangst
.site-navigation .sub-menu a[href$="/rijangst-en-faalangst/"],

body.joyce-page-opfrisles-autorijden
.site-navigation .sub-menu a[href$="/opfrisles-autorijden/"] {
	background: rgba(17, 91, 140, 0.1);
	color: #115B8C;
	font-weight: 800;
}


/* =========================================================
   RECHTER KANT
   Mail - telefoon - proefles
   ========================================================= */

.site-header__actions {
	display: flex;
	align-items: center;

	gap: 16px;

	margin-left: auto;
}


/* =========================================================
   MAIL EN TELEFOON
   ========================================================= */

.site-header__mail,
.site-header__phone {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	min-height: 42px;

	padding: 8px 0;

	color: #ffffff;

	font-size: 0.84rem;
	font-weight: 700;

	text-decoration: none;
	white-space: nowrap;

	transition:
		color 160ms ease,
		opacity 160ms ease;
}

.site-header__mail:hover,
.site-header__phone:hover {
	color: #ffffff;
	opacity: 0.78;
}

.site-header__mail svg,
.site-header__phone svg {
	flex: 0 0 auto;
}


/* =========================================================
   PROEFLES KNOP
   ========================================================= */

.site-header__cta {
	min-height: 46px;

	padding: 11px 20px;

	border-radius: 999px;

	background: #E31E24;

	color: #ffffff;

	font-size: 0.88rem;
	font-weight: 800;

	box-shadow:
		0 8px 20px
		rgba(227, 30, 36, 0.22);
}

.site-header__cta:hover {
	background: #c8191f;
	color: #ffffff;

	transform: translateY(-1px);
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.menu-toggle {
	display: none;

	width: 48px;
	height: 48px;

	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 5px;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 11px;

	background: rgba(255, 255, 255, 0.08);

	color: #ffffff;

	cursor: pointer;
}

.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.14);
}

.menu-toggle__line {
	display: block;

	width: 23px;
	height: 2px;

	border-radius: 99px;

	background: currentColor;

	transition:
		transform 180ms ease,
		opacity 180ms ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   MOBIELE NAVIGATIE
   ========================================================= */

.mobile-navigation {
	position: fixed;

	top: var(--joyce-header-height);
	right: 0;
	bottom: 0;
	left: 0;

	z-index: 999;

	overflow-y: auto;

	background: var(--joyce-white);
}

.admin-bar .mobile-navigation {
	top: calc(var(--joyce-header-height) + 32px);
}

.mobile-navigation__inner {
	display: flex;

	min-height: calc(100dvh - var(--joyce-header-height));

	flex-direction: column;

	padding-top: 28px;
	padding-bottom: 40px;
}

.mobile-navigation__list {
	margin: 0;
	padding: 0;

	list-style: none;
}

.mobile-navigation__list li {
	border-bottom: 1px solid var(--joyce-border);
}

.mobile-navigation__list a {
	display: flex;

	padding: 17px 4px;

	color: var(--joyce-heading);

	font-size: 1.12rem;
	font-weight: 750;

	text-decoration: none;
}

.mobile-navigation__actions {
	display: grid;

	gap: 12px;

	margin-top: 32px;
}


/* =========================================================
   ACTIEF MOBIEL ITEM
   ========================================================= */

body.home
.mobile-navigation__list > li:first-child > a,

body.joyce-page-home
.mobile-navigation__list > li:first-child > a,

body.joyce-page-automaat-rijles-den-bosch
.mobile-navigation a[href$="/automaat-rijles-den-bosch/"],

body.joyce-page-rijles-autisme-adhd
.mobile-navigation a[href$="/rijles-autisme-adhd/"],

body.joyce-page-rijangst-en-faalangst
.mobile-navigation a[href$="/rijangst-en-faalangst/"],

body.joyce-page-opfrisles-autorijden
.mobile-navigation a[href$="/opfrisles-autorijden/"],

body.joyce-page-lesprijzen
.mobile-navigation a[href$="/lesprijzen/"],

body.joyce-page-over-joyce
.mobile-navigation a[href$="/over-joyce/"],

body.joyce-page-contact
.mobile-navigation a[href$="/contact/"] {
	padding-left: 14px;

	border-left: 4px solid #E31E24;
	border-radius: 7px;

	background: rgba(17, 91, 140, 0.08);

	color: #115B8C;

	font-weight: 800;
}