/**
 * WDOD Template Styles
 * Specific styles for pages using the blocks-wdod.php template
 */

/* Body background and text color */
body.page-template-blocks-wdod-php {
	--body-bg: #ffffff;
	--body-color: #326da4;
	background-color: var(--body-bg);
	color: var(--body-color);
}

/* Override bg-white color to blue */
body.page-template-blocks-wdod-php .bg-white {
	color: #0a5996 !important;
	margin-top: -40px;
}

@media (min-width: 768px) and (max-width: 992px) {
body.page-template-blocks-wdod-php .bg-white {
	margin-bottom: 60px;
}
}



/* Card slider background */
body.page-template-blocks-wdod-php .wrapper--card-slider.bg-salmon {
	background-color: #10b2db !important;
	padding-top: 70px !important;
}

/* Card slider items background and text color */
body.page-template-blocks-wdod-php .card-slide {
	background-color: #a5daf4 !important;
	color: #1a5d98 !important;
}

body.page-template-blocks-wdod-php .card-slide h3,
body.page-template-blocks-wdod-php .card-slide p {
	color: #1a5d98 !important;
}

/* Card slider h3 + p styling */
body.page-template-blocks-wdod-php .card-slider h3+p {
	margin-top: .5rem !important;
	font-size: 16px !important;
}
body.page-template-blocks-wdod-php .wrapper--vacatures-search-and-filter {
	display: none;
}

/* Hide custom menu items */
body.page-template-blocks-wdod-php li.menu-item-object-custom {
	display: none !important;
}

/* Hide toggle site menu and cookie revisit button */
body.page-template-blocks-wdod-php .site-menu--inner,
body.page-template-blocks-wdod-php .toggle-site-menu,
body.page-template-blocks-wdod-php .cky-btn-revisit-wrapper {
	display: none !important;
}

/* Mobile menu background color - white */
@media (max-width: 991.98px) {
	body.page-template-blocks-wdod-php .site-menu:before {
		background-color: #ffffff !important;
	}
	
	body.page-template-blocks-wdod-php .wrapper--site-menu {
		padding-top: 1rem;
		padding-bottom: 1rem;
        margin-top: 20px;
	}
}

/* Main navigation styles */
	/* Override default navigation colors for WDOD template */
	body.page-template-blocks-wdod-php {
		--nav-link-color: #0a5996;
		--current-nav-link-color: #0a5996;
	}

	body.page-template-blocks-wdod-php .site-menu--inner {
		color: #0a5996;
	}

	body.page-template-blocks-wdod-php .site-menu a,
	body.page-template-blocks-wdod-php .site-menu button,
	body.page-template-blocks-wdod-php .site-menu span > span.nav-label,
	body.page-template-blocks-wdod-php .site-menu--inner a,
	body.page-template-blocks-wdod-php .site-menu--inner button,
	body.page-template-blocks-wdod-php .site-menu--inner span > span.nav-label,
	body.page-template-blocks-wdod-php .site-menu--inner > ul a,
	body.page-template-blocks-wdod-php .site-menu--inner > .menu a,
	body.page-template-blocks-wdod-php .site-menu--inner > ul button,
	body.page-template-blocks-wdod-php .site-menu--inner > .menu button,
	body.page-template-blocks-wdod-php .site-menu--inner .nav-link,
	body.page-template-blocks-wdod-php .site-menu--inner .nav-link .nav-label {
		font-size: 14px !important;
		font-weight: normal !important;
		color: #448dba !important;
		letter-spacing: normal !important;
		text-decoration: none !important;
	}

	body.page-template-blocks-wdod-php .site-menu--inner > ul,
	body.page-template-blocks-wdod-php .site-menu--inner > .menu {
		gap: 1rem !important;
	}

	/* Hover state - no underline, keep same color */
	body.page-template-blocks-wdod-php .site-menu a:hover,
	body.page-template-blocks-wdod-php .site-menu button:hover,
	body.page-template-blocks-wdod-php .site-menu a:focus,
	body.page-template-blocks-wdod-php .site-menu button:focus {
		text-decoration: none !important;
		color: #0a5996 !important;
	}

	/* Active/current menu item - no underline, same color */
	body.page-template-blocks-wdod-php .site-menu .current-menu-item > span > .nav-label,
	body.page-template-blocks-wdod-php .site-menu .current-menu-item > .nav-link,
	body.page-template-blocks-wdod-php .site-menu .current-menu-item > thth-sub-menu > button,
	body.page-template-blocks-wdod-php .site-menu .menu-item:has(.current-menu-item) > span > .nav-label,
	body.page-template-blocks-wdod-php .site-menu .menu-item:has(.current-menu-item) > .nav-link,
	body.page-template-blocks-wdod-php .site-menu .menu-item:has(.current-menu-item) > thth-sub-menu > button {
		color: #0a5996 !important;
		text-decoration: none !important;
		font-weight: normal !important;
	}


/* Content typo - color for h1 and p within hero section */
body.page-template-blocks-wdod-php .wrapper--hero.bg-default .content.typo h1,
body.page-template-blocks-wdod-php .wrapper--hero.bg-default .content.typo p {
	color: #4b91bc !important;
}

/* White text on desktop (min-width: 992px) */
@media (min-width: 992px) {
	body.page-template-blocks-wdod-php .wrapper--hero.bg-default .content.typo h1,
	body.page-template-blocks-wdod-php .wrapper--hero.bg-default .content.typo p {
		color: #ffffff !important;
	}

    body.page-template-blocks-wdod-php .page-content {
        margin-top: 65px;
    }

    body.page-template-blocks-wdod-php .wrapper--site-menu {
        padding-top: 35px;
        padding-bottom: 10px;
    }
}

/* H1 white color on desktop only within .content.typo */
@media (min-width: 992px) {
	body.page-template-blocks-wdod-php .content.typo h1 {
		color: #ffffff !important;
	}
}

/* H1 white color on desktop only within .content.typo */
@media (max-width: 991px) {
	body.page-template-blocks-wdod-php .content.typo h1 {
		line-height: .8;
	}
}

/* UL links as buttons */
body.page-template-blocks-wdod-php .content.typo ul {
	list-style: none;
	padding: 0;
	margin: 120px 0 0 0;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* UL margin for mobile */
@media (max-width: 991.98px) {
	body.page-template-blocks-wdod-php .content.typo ul {
		margin: 30px 0 0 0;
	}
}

body.page-template-blocks-wdod-php .content.typo ul li {
	margin: 0;
	padding: 0;
}

body.page-template-blocks-wdod-php .content.typo ul li a {
	display: inline-block;
	padding: 4px 38px;
	color: #ffffff !important;
	text-decoration: none;
	font-weight: 500;
	transition: opacity 0.3s ease;
	border-radius: 30px;
	font-size: 19px;
	letter-spacing: .3px;
}

body.page-template-blocks-wdod-php .content.typo ul li a:hover {
	opacity: 0.9;
}

/* First link - orange background */
body.page-template-blocks-wdod-php .content.typo ul li:first-child a {
	background-color: #ff6702; /* Orange color */
}

/* Rest of the links - blue background */
body.page-template-blocks-wdod-php .content.typo ul li:not(:first-child) a {
	background-color: #10b2db; /* Blue color */
}


/* Hero content color and padding on mobile */
@media (max-width: 991.98px) {
	body.page-template-blocks-wdod-php .wrapper--hero .content {
		color: #0a5996 !important;
		padding: 3rem var(--hero-content-px) 1.5rem var(--hero-content-px) !important;
	}
}

/* Bottom bar background */
body.page-template-blocks-wdod-php .wrapper--bottom-bar.bg-dark-green {
	background-color: #10b2db !important;
}

/* Header logo width */
body.page-template-blocks-wdod-php .header-logo {
	width: 233px !important;
    margin-left: -28px;
}

/* Make header logo before background transparent */
body.page-template-blocks-wdod-php .header-logo::before {
	background-color: transparent !important;
}

/* Move header 40px up */
@media(--desktop-menu) {
	body.page-template-blocks-wdod-php .page-header {
		margin-top: -30px !important;
	}
}

/* Site menu styling on desktop */
@media (min-width: 992px) {
	body.page-template-blocks-wdod-php .site-menu {
		isolation: isolate !important;
		margin-top: -30px !important;
	}
}

/* Move hero section 40px up on desktop */
@media (min-width: 992px) {
	body.page-template-blocks-wdod-php .wrapper--hero {
		margin-top: 15px !important;
        margin-bottom: -55px !important;
	}
}



/* Hero visual border-radius */
body.page-template-blocks-wdod-php .wrapper--hero .visual {
	border-radius: 35px !important;
}

/* Hero with vacatures search and filter */
body.page-template-blocks-wdod-php .wrapper--hero:has(+.wrapper--vacatures-search-and-filter) {
	margin-top: -30px !important;
}

/* Tungsten font for headings */
body.page-template-blocks-wdod-php h1,
body.page-template-blocks-wdod-php h2 {
	font-family: "Tungsten", sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

/* Tungsten Bold for h3 */
body.page-template-blocks-wdod-php h3 {
	font-family: "Tungsten", sans-serif !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
	font-size: 40px !important;
	margin-top: 10px !important;
}

/* H3 line-height for mobile */
@media (max-width: 991.98px) {
    body.page-template-blocks-wdod-php h3 {
        line-height: 33px !important;
    }

    body.page-template-blocks-wdod-php .card-slider h3 {
        line-height: 45px !important;
    }


    body.page-template-blocks-wdod-php .header-logo {
        margin-top: -30px;
    }
}

/* Block title + * styling */
body.page-template-blocks-wdod-php :is(.block-title)+*,
body.page-template-blocks-wdod-php .typo :is(.block-title)+* {
	margin-top: .25rem !important;
	font-size: 14px !important;
	margin: 5px 50px -40px 50px !important;
}

/* Block title + * styling for small screens */
@media (max-width: 991.98px) {
	body.page-template-blocks-wdod-php :is(.block-title)+*,
	body.page-template-blocks-wdod-php .typo :is(.block-title)+* {
		margin: -50px -10px -20px -10px !important;
	}
}


.wrapper--hero :is(.container,.container-fluid,.container-maxed-at-lg,.container-maxed-at-xl,.container-fluid-maxed) {
        max-height: 450px;
    margin-bottom: -100px;
}


/* Hero title styling */
@media (min-width: 992px) {
	body.page-template-blocks-wdod-php :is(.hero-title, .wrapper--hero h1, .wrapper--hero h2, .wrapper--hero-slider h1, .wrapper--hero-slider h2),
	body.page-template-blocks-wdod-php .typo :is(.hero-title, .wrapper--hero h1, .wrapper--hero h2, .wrapper--hero-slider h1, .wrapper--hero-slider h2) {
		font-size: 57px !important;
		line-height: 46px !important;
		margin-top: -15px !important;
		max-width: 500px !important;
	}

	body.page-template-blocks-wdod-php :is(.typo h3),
	body.page-template-blocks-wdod-php .typo :is(.typo h3) {
		font-size: 48px !important;
		font-weight: 300 !important;
		line-height: 0px !important;
		margin-top: 18px !important;
        letter-spacing: 0.3px !important;
        color: #FFF;
	}
}


@media (min-width: 992px) {
    body.page-template-blocks-wdod-php .wrapper--hero {
        margin-top: 15px !important;
        margin-bottom: -55px !important;
    }
}

@media (max-width: 991.98px) {
    body.page-template-blocks-wdod-php .wrapper--hero .content {
        color: #0a5996 !important;
        padding: 3rem var(--hero-content-px) 4.5rem var(--hero-content-px) !important;
    }
}