/*
 * Header phone – Jesper B. – Køreuddannelser
 * v1.0.5
 */

.site-header.dynamic-header .header-inner {
	position: relative;
}

.jb-header-phone,
.jb-header-phone:visited,
.jb-header-phone:hover,
.jb-header-phone:focus,
.jb-header-phone:active {
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.jb-header-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	line-height: 1;
}

.jb-header-phone__icon {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

/* Desktop: larger phone, aligned with the hero's 5vw content edge.
   Navigation is shifted left without affecting tablet/mobile. */
@media (min-width: 1201px) {
	.site-header.dynamic-header .site-branding {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: initial;
	}

	.site-header.dynamic-header .site-branding .site-logo {
		margin-inline-start: auto;
	}

	.jb-header-phone--desktop {
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.15px;
		gap: 9px;
		white-space: nowrap;
		position: relative;
		left: calc(5vw - max(0px, (100vw - 1140px) / 2));
	}

	.jb-header-phone--desktop .jb-header-phone__icon {
		width: 17px;
		height: 17px;
	}

	.site-header.dynamic-header .site-navigation {
		transform: translateX(-6vw);
	}

	.jb-header-phone--mobile {
		display: none !important;
	}
}

/* Tablet + mobile: phone | logo | burger on one single horizontal line. */
@media (max-width: 1200.99px) {
	.site-header.dynamic-header .header-inner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.site-header.dynamic-header .site-branding {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.site-header.dynamic-header .site-branding .site-logo {
		margin: 0 auto;
	}

	.jb-header-phone--desktop {
		display: none !important;
	}

	.jb-header-phone--mobile {
		position: absolute;
		left: 18px;
		top: 50%;
		transform: translateY(-50%);
		padding: 6px;
		z-index: 3;
	}

	.jb-header-phone--mobile .jb-header-phone__icon {
		width: 20px;
		height: 20px;
	}

	.site-header.dynamic-header .site-navigation-toggle-holder {
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		z-index: 3;
	}
}

/* Medium/tablet: keep the phone icon position and show the number beside it. */
@media (min-width: 481px) and (max-width: 1200.99px) {
	.jb-header-phone--mobile {
		gap: 7px;
		font-size: 15px;
		font-weight: 500;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.site-header.dynamic-header .header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 14px;
	}

	.site-header.dynamic-header .site-branding {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		justify-self: center;
	}

	.site-header.dynamic-header .site-branding .site-logo {
		margin: 0;
	}

	.jb-header-phone--mobile {
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		position: static;
		top: auto;
		left: auto;
		transform: translateX(12px);
		margin: 0;
		padding: 6px;
	}

	.jb-header-phone--mobile .jb-header-phone__number {
		display: none;
	}

	.site-header.dynamic-header .site-navigation-toggle-holder {
		grid-column: 3;
		grid-row: 1;
		justify-self: start;
		position: static;
		top: auto;
		right: auto;
		transform: none;
		margin: 0;
	}

	.site-header.dynamic-header .site-navigation-dropdown {
		grid-column: 1 / -1;
	}
}
/* Keep Hello tablet menu active up to 1200px */
@media (min-width: 992px) and (max-width: 1200.99px) {

    .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation {
        display: none !important;
    }

    .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder {
        display: flex !important;
    }
}