@import url( 'https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap' );

:root {
	--color-primary: #16817b; /* A11y-color with white*/
	--color-primary-bright: #22aea8; /* A11y-color with black */
	--color-primary-brighter: #20cec7;
	--color-primary-brightest: #1be3d9; /* Color for icons */

	--body-bg: #f5f2f2;
	--body-color: var( --black );

	--gray-concrete: #f2f2f2;
	--gray-athens-gray: #f4f4f5;
	--gray-shark: #212529;
	--gray-sand: #f7f7f7;
	--gray-gallery: #ececec;

	--white: #ffffff;
	--black: #000000;
	/*
	$white: #ffffff;
	$black: #000000; // Tekstkleur
	$border-color: #ccc4c4; // Border kleur
	$background-light: #f5f2f2;
	$dark-gray: #202020;
	$primary-dark: #16817b;
	$primary: #22aea8;
	$primary-light: #20cec7;
	$accent-point: #1be3d9; // Punt achter zin
	$contact-block: #e8f7f6; // Contact blokje
	$form-bg: #f1f9f9; // Toptaken + formulier */

	/* cannot use css variables as media queries min-width sadly*/
	--mobile-breakpoint: 48rem; /* 768px */
	--border-radius-full: 999px;
	--border-radius-default: 5px;
	--font-weight-bold: 600;
	--font-weight-normal: 400;

	/* OVERRIDE ZORRO COLOR */
	--color-hoverblue1: var( --color-primary );
}

/* ====== Global styles ====== */
.body {
	font-family: 'Commissioner', sans-serif;
	font-optical-sizing: auto;
	font-weight: var( --font-weight-normal );
	font-style: normal;
	background-color: var( --body-bg );
}

main {
	width: 100%;
}

body > #container > div:not( [data-id='home'] ) {
	/* Hide our expanded content when not on home */
	section.card-section {
		display: none;
	}

	/* Make the banner smaller when not on home */
	.Header__titleSearchWrapper {
		/* if you are logged in and have the plus button, make the header static */
		&:has( #plusBtn ) {
			position: static;
		}

		.Header__titleDescription {
			display: none;
		}

		.Header__panelbtns {
			position: absolute;
			right: 0;
			margin-right: 1rem;
		}
	}
}

a[href] {
	color: var( --color-primary );
	text-decoration: none;

	&:hover,
	&:focus {
		color: var( --color-primary );
		text-decoration: underline;
		&.LoginDetail__profileLink {
			color: inherit;
		}
	}
}

.commonStyle__active,
.commonStyle__active:hover,
.Icon__activeBlue,
.themeLink,
.themeLink:hover,
.commonStyle__link:hover,
.Icon__hoverblue1:hover,
.DepartmentList__forums {
	color: var( --color-primary );
}

.Button__tagPrimary {
	--icon-size: 1.8rem;
	--icon-margin: 0.8rem;
	--btn-padding: 0.5rem 0.625rem;
	--btn-padding-x: 0.625rem;
	--btn-padding-y: 0.5rem;
	--underline-width: calc(
		100% - var( --icon-size ) - ( var( --btn-padding-x ) * 2 ) -
			var( --icon-margin )
	);

	background-color: transparent;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	color: var( --body-color );
	font-weight: var( --font-weight-bold );
	font-size: 1rem;
	position: relative;

	&::before {
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E" );
		background-size: contain;
		background-size: 10px;
		background-position: center;
		background-repeat: no-repeat;
		border: 1px solid var( --color-primary-brightest );
		border-radius: var( --border-radius-full );
		content: '';
		display: inline-block;
		margin-right: var( --icon-margin );
		width: var( --icon-size );
		height: var( --icon-size );
		transition: all 0.3s ease;
	}

	&::after {
		width: var( --underline-width );
		position: absolute;
		left: calc(
			var( --icon-size ) + var( --btn-padding-x ) + var( --icon-margin )
		);
		right: 0;
		top: 90%;
		content: '';
		background-color: var( --color-primary-brightest );
		height: 2px;
		transition: all 0.3s ease;
	}

	&:hover,
	&:focus,
	&.active {
		&:after {
			width: var( --underline-width );
			background-color: var( --color-primary-bright );
		}
		&::before {
			transform: translateX( +5px );
			border-color: var( --color-primary-bright );
		}
	}
}

/* =======  navigation  ======= */
header {
	width: 100%;
}

.Header__menuWrapper {
	background-color: var( --gray-shark ) !important;
}

.Header__homeNavbarFixed .Header__searchSubCont {
	background-color: var( --color-primary ) !important;
}

.Readingprogress__progressBar {
	background: linear-gradient(
		90deg,
		var( --color-primary-bright ) 16%,
		var( --color-primary-brighter ) 75.89%,
		var( --color-primary-brightest ) 99.8%
	);
}

.Header__nav,
.BreadCrumbs__breadcrumbsView nav {
	a {
		color: var( --white );
		text-decoration: none;
		padding: 0.5rem 1rem;
		border-radius: var( --border-radius-default );

		&:hover,
		&:focus {
			color: var( --color-primary-brightest );
			text-decoration: underline;
		}
	}

	a.btn-outline {
		outline: 1px solid var( --white );
	}
}

.BreadCrumbs__breadcrumbsView nav {
	a:hover,
	a:focus {
		color: var( --white );
		text-decoration: underline;
	}
}

/* =======  header custom inloggen intercept flow ======= */
#Cases_tab {
	display: none;
}

.Header__nav {
	&:has( .LoginDetail__logoutLink ) {
		/* show cases menu link, only if user is logged in */
		#Cases_tab {
			display: block;
		}
	}
}

.LoginDetail__logoutLink,
.LoginDetail__userMailLink,
.LoginDetail__profileLink {
	color: inherit !important;
}

/* When logged in and you click on profile you can logout */
.LoginDetail__profileBtn {
	background-color: var( --color-primary-bright ) !important;
	border-bottom-left-radius: var( --border-radius-default ) !important;
}

.LoginDetail__profileLogout {
	border-bottom-right-radius: var( --border-radius-default ) !important;
}

.LoginDetail__content {
	border-radius: var( --border-radius-default ) !important;
}

/* Override the zoho login button text */
li:has( [data-id='tab_signin'] ) {
	max-width: unset !important;

	a {
		--custom-width: 186px;
		--icon-size: 25px;
		--padding-buffer: 10px;
		color: transparent;
		max-width: calc(
			var( --custom-width ) + var( --icon-size ) + var( --padding-buffer )
		);
		border: 1px solid white !important;
		border-radius: var( --border-radius-default ) !important;

		@media screen and ( max-width: 48rem ) {
			--custom-width: 245px;
		}

		&::before {
			content: 'Ticket aanmaken';
			display: inline-block;
			position: relative;
			color: white;
			background-image: url( https://www.yard.nl/wp-content/uploads/2025/04/ticket-thin-white.png );
			background-size: var( --icon-size ) 100%;
			background-repeat: no-repeat;
			padding-left: calc( var( --icon-size ) + var( --padding-buffer ) );
		}

		&:hover,
		&:focus {
			color: transparent;

			&::before {
				color: var( --color-primary-brightest );
				text-decoration: underline;
			}
		}
	}
}

/* =======  banner  ======= */
.Header__headerBg {
	display: none;
}

.Header__titleSearchWrapper {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		transform: translateX( -50% );
		background-image: url( https://www.yard.nl/wp-content/uploads/2025/05/Firefly-20250509150406.png );
		z-index: -1;
		width: 100vw;
		background-position: 0% 15%;
		background-size: cover;
		background-repeat: no-repeat;

		@media screen and ( max-width: 48rem ) {
			background-position: 0% 5%;
		}
	}
}

.Header__welcomeTitle {
	text-align: left;
	margin-left: 0px !important;
	margin-right: 0px !important;
	font-size: 2.3rem;
}

.Header__welcomeDescription {
	text-align: left;
}

.Header__titleSearchBox {
	margin: 4rem 0;
	padding: 3rem;
	max-width: 600px;
	background-color: var( --color-primary );
	color: var( --white );
	border-radius: var( --border-radius-default );
}

.Header__searchLink {
	width: 100%;
}

/* =======  Main  ======= */
.card-section {
	width: 100%;
	max-width: 80rem;
	min-height: unset !important;
	padding: 2.5rem 0.9375rem;

	&:has( .card-section-title ) {
		padding: 2.5rem 0.9375rem 5rem;
	}

	&.bg-secondary-light {
		& > h2,
		& > h3 {
			color: var( --black );
			text-align: center;
			font-size: 2rem;
			margin-top: 0;
		}
	}
}

.card-section-title {
	text-align: center;
	margin-top: 0;
}

.card-grid {
	display: grid;
	gap: 1rem;
	padding: 1rem;
}

/* =======  Main Card  ======= */
.card {
	background-color: var( --white );
	box-shadow: 0 4px 6px rgba( 0, 0, 0, 0.1 );
	padding: 2rem;
	border-radius: var( --border-radius-default );
	text-align: center;
	position: relative;
	transition: transform 0.2s ease;

	&:has( .card-title a:hover, .card-title a:focus ) {
		transform: translateY( -5px );
	}

	.wrapper-icon-and-title {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.card-title {
		font-weight: bold;
		color: var( --black );

		a[href] {
			color: var( --black );
			&::before {
				content: '';
				position: absolute;
				inset: 0;
			}
		}
	}

	.card-icon img {
		--size: 50px;
		width: auto;
		height: var( --size );
	}

	.link-block {
		display: block;
		margin-bottom: 0.5rem;
	}
}

/* =======  Alt Card  ======= */
.card-is-style-big {
	text-align: left;

	.card-title {
		color: var( --black );
	}

	.card-icon {
		display: flex;
		align-items: center;
	}
}

/**/
/* =========================================================== */
/* =======  helper css  ======= */
/* =========================================================== */
/**/

.grid-cols-2 {
	grid-template-columns: repeat( 2, 1fr );
	gap: 2rem;

	@media screen and ( max-width: 48rem ) {
		grid-template-columns: repeat( 1, 1fr );
		gap: 1rem;
	}
}

.grid-cols-3 {
	grid-template-columns: repeat( 3, 1fr );

	@media screen and ( max-width: 48rem ) {
		grid-template-columns: repeat( 1, 1fr );
		gap: 1rem;
	}
}

.bg-primary {
	background-color: var( --color-primary );
}

.bg-secondary {
	background-color: var( --color-secondary );
}

.bg-secondary-light {
	background-color: var( --color-primary-bright );
}

/* Helper to give alignfull items, a bg outside the container */
.alignfull[class*='bg-'] {
	background-color: transparent !important;
	position: relative;

	&:before {
		content: '' !important;
		position: absolute;
		left: 50%;
		transform: translateX( -50% );
		top: 0;
		bottom: 0;
		width: 100vw;
		z-index: -1;
	}

	&.bg-primary:before {
		background-color: var( --color-primary );
	}

	&.bg-secondary:before {
		background-color: var( --color-secondary );
	}

	&.bg-secondary-light:before {
		background-color: var( --color-primary-bright );
	}
}

.ticketDetail span[data-id="newComment"]{
	display:none;
}

.banner{
 	background: green; 
	color: white;
  padding: 40px;
}

.SubscribeDepart__followContent,
.DepFollow__depFollow,
.category_follow,
.ArticleDetailRightContainer__followContentLow {
 display: none !important; 
}

#ticketClose {
 display: none !important; 
}