/**
 * Theme Name:        APEC
 * Template:          twentytwentyfive
 * Theme URI:         https://olgaritme.com/
 * Description:       APEC theme by Bram Snijders
 * Version:           1.0.0
 * Author:            Bram Snijders
 * Author URI:        https://olgaritme.com/
 * Tags:              block-patterns, full-site-editing
 * Requires at least: 6.7
 * Tested up to:      6.9
 * Requires PHP:      7.2
 */


/* --- header menu -------------------------------------------------------- */

/* change the menu navigation icon */
.wp-block-navigation__responsive-container-open {
	margin-top: 30px!important;
	margin-right: 30px!important;
}
.wp-block-navigation__responsive-container-open svg {
    display: none;
}
.wp-block-navigation__responsive-container-open::before {
    content: "";
    display: inline-block;
    width: 64px;
    height: 64px;

    background: currentColor;

    -webkit-mask-image: url("assets/images/menu_open.svg");
    mask-image: url("assets/images/menu_open.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* change the desktop menu so it's not an overlay menu */
.wp-block-navigation {
	height: 0;
}
@media (min-width: 768px) {
	html.has-modal-open {
	    overflow: visible!important;
	}
	.wp-block-navigation__responsive-container {
	    display: none;
	}

	/* move menu down a bit*/
	.wp-block-navigation__responsive-container-open {
		margin-top: 30px!important;
		margin-right: 30px !important;
	}
	.wp-block-navigation__responsive-container {
		margin-top: 30px!important;
		margin-right: 30px !important;
	}

	/* Show when menu is opened */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: static;
	    display: block;
	    padding: 0!important;
	    background-color: transparent!important;
	}

	/* give menu items thick underline on hover */
	:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
	    text-decoration: underline;
	    text-decoration-thickness: 0.2rem!important;
	    text-underline-offset: .2em;
	}

	/* change close menu button */
	.wp-block-navigation__responsive-container-close svg {
		display: none;
	}
	.wp-block-navigation__responsive-container-close::before {
		content: "";
	    display: inline-block;
	    margin: 5px 20px 0 0;
	    width: 32px;
	    height: 32px;

	    background: currentColor;

	    -webkit-mask-image: url("assets/images/menu_close.svg");
	    mask-image: url("assets/images/menu_close.svg");

	    -webkit-mask-repeat: no-repeat;
	    mask-repeat: no-repeat;

	    -webkit-mask-size: contain;
	    mask-size: contain;
	}

	/* Make links horizontal */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
	    display: flex!important;
	    flex-direction: row!important;
	    gap: 1rem!important;
	    align-items: center!important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	    padding-top: 0!important;
	}
	.wp-block-navigation__responsive-container-close {
	    position: static!important;
	}
	.has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog {
	    margin-top: 0!important;
	}

	/* hide menu open button when menu is opened */
	.wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		display: none!important;
	}

	/* put menu close button to the right */
	.wp-block-navigation__responsive-dialog {
		display: flex;
	}
	.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content {
		order: 1;
	}
	.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-close {
		order: 2;
	}

	/* make animation fade in from top */
	@keyframes overlay-menu__fade-in-animation {
		0% {
			opacity: 0;
			transform: translateY(-.5em);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		animation: overlay-menu__fade-in-animation .1s ease-out;
		animation-fill-mode: forwards;
	}
}

/* remove black outline on menu buttons */
:where(.wp-site-blocks :focus) {
	outline: none!important;
}


/* --- footer -------------------------------------------------------- */

main + .wp-block-template-part {
	margin-block-start: 0!important;
	position: relative;
    z-index: 2;
}



/* --- apply to all pages -------------------------------------------------------- */

body .wp-site-blocks {
	position: relative;
    overflow: clip;
}

a.no-underline {
	text-decoration: none !important;
}

/* create an underline that extends into an arrow */
*:has(.arrow-link) {
	position: relative;
	--arrow-offset: 0px; /* distance line extends past text */
	--stroke-value: 0.2; /* thickness of the underline */
	--stroke: calc(var(--stroke-value) * 1rem);
	--distance-bottom-underline: 4px;
	--head-size-value: 2.5; /* arrowhead size */
	--head-size: calc(var(--head-size-value) * 1rem);
}
.arrow-link {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	text-decoration: none;
	color: inherit;
	position: relative;
	padding-bottom: calc(var(--distance-bottom-underline) + var(--stroke));
	a {
		display: inline-block;
		width: 100%;
		max-width: 100%;
	}
}
/* underline that extends to the right */
.arrow-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: calc(-1 * var(--arrow-offset) + var(--head-size));
	height: var(--stroke);
	background: currentColor;
}
svg.arrow-link-head {
	margin-block-start: 0;
	position: absolute!important;
	bottom: 0;
	right: calc(-1 * var(--arrow-offset) + 2px);
	width: var(--head-size);
	height: var(--head-size);
	pointer-events: none;

	polyline {
		stroke: currentColor;
		vector-effect: non-scaling-stroke;
		stroke-width: var(--stroke);
		/* magic numbers */
		transform: translateY(calc(-1 / 3 * var(--stroke) / var(--head-size-value)));
		/*stroke-width: calc(var(--stroke) / var(--head-size) * 10);*/
	}
}


/* --- homepage -------------------------------------------------------- */

body.page-template-apec-home {
	--home-bg-color: #81A05D!important;
	--home-menu-color: #FFDD00!important;

	background-color: var(--home-bg-color);

	.wp-block-navigation {
		color: var(--home-menu-color);
	}
	.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--home-menu-color);
	}
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: var(--home-menu-color);
	}
	.wp-block-navigation__responsive-container {
		--wp--preset--color--base: var(--home-bg-color);
	}

	/* make it so the svg's overlays the cover blocks */
	main .entry-content {
		position: relative;
	}
	h1, h2 {
		z-index: 2;
		position: relative;
	}
	main .entry-content :not(.wp-block-cover, .wp-block-cover__image-background, .screen-reader-text, .homepage-blad-impact-accent) {
		z-index: 2;
		position: relative;
	}
	main .entry-content .wp-block-cover {
		position: relative;
		z-index: 0;
	}

	/* put carousel block on top of apec logo and over the h1, h2 titles */
	.wp-block-query {
		z-index: 3;
	}

	/* gemeenschappen carousel styling */
	:root :where(.is-layout-grid):has(.gemeenschap) {
	    gap: 2rem;
	}

	/* set carousel plugin predefined variables */
	--carousel-button-bg: none;
	--carousel-button-color: white;
	--carousel-button-size: 15rem;
	--carousel-button-offset: 7rem;
	--carousel-shadow: none;

	/* style the carousel next/prev arrow buttons */
	.abcs-nav-btn {
		border-radius: 0;
		width: calc(var(--carousel-button-size) * 0.4);

		/* remove original arrow */
		svg {
			display: none;
		}

		/* give the arrows a drop shadow */
		background: transparent;
		filter: drop-shadow(0 0 2rem black);

		/* generate my own arrow svg icon */
		&::before {
			content: '';
			pointer-events: none;
			width: 100%;
			height: 100%;
			background: var(--carousel-button-color);
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 10'%3E%3Cpath d='M1 1 L3 5 L1 9' stroke='black' stroke-width='0.2' fill='none'/%3E%3C/svg%3E");
			mask-repeat: no-repeat;
			mask-size: contain;
		}

		/* make the previous button arrow flipped version of next button arrow */
		&.abcs-nav-btn--prev::before {
			transform: scaleX(-1);
		}
	}

	/* give gemeenschap images yellow rectangle 
	   behind on hover and scale up */
	li.gemeenschap {
		position: relative;
		z-index: 0;
		box-shadow: 0 0 0 0 #FFDD00;
		transition: 0.3s ease;

		h2 {
			transition: 0.3s ease;
			position: absolute;
			bottom: 0;
			margin: 0.5em;
			pointer-events: none;
		}

		font-size: var(--wp--preset--font-size--small);
		line-height: 1.1;

		.gemeenschap-quote-container {
			transition: 0.3s ease;
			pointer-events: none;
			position: absolute;
			opacity: 0;
			bottom: -1px;
			margin: 0 1rem;

			p.gemeenschap-quote {
				font-size: 0.8rem;
				font-weight: 700;
				display: inline;
				padding: 0.1rem 0;
				background-color: #FFDD00;
				color: #5D7E46;
			}
		}

		&:hover {
			box-shadow: 1rem 1rem 0 0 #FFDD00;
			transform: scale(1.5);
			z-index: 1000;

			h2 {
				top: 0;
				margin: 1em;
				text-shadow: 0 0 1em black;
				transition: 0.3s ease;
			}

			.gemeenschap-quote-container {
				transition: 0.3s ease;
				opacity: 1;
			}

			figure::before {
				pointer-events: none;
				content: '';
				position:absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				transition: 0.3s ease;
				background: linear-gradient(to top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.5) 100%);
			}
		}

		/* add gradient overlay so the title is readable */
		figure {
			margin: 0;

			&::before {
				pointer-events: none;
				content: '';
				position:absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				transition: 0.3s ease;
				background: linear-gradient(to bottom, rgba(0,0,0,0) 80%,rgba(0,0,0,0.5) 100%);
			}
		}
	}
	/* we would like to be able to put overflow-y: visible on the parent ul
	   so that when the li grows on hover it doesn't get cut off.
	   But it already has overflow-x: scroll (so we can scroll the carousel
	   horizontally) and then overflow-y becomes auto and can't be visible
	   (some complicated browser reason I dont understand), so now we have
	   to do a padding margin trick to show the overflow in the y direction */
	ul:has(li.gemeenschap) {
	    padding: 0;
	    margin: 0;
	    transition: 0.3s ease;
	}
	ul:has(li.gemeenschap:hover) {
	    padding: 150px 0;
	    margin: -150px 0;
	}
	.wp-block-cover {
		overflow: visible;
	}

	hr.wp-block-separator {
		margin-block-start: 0.5rem;
	    border: none;
	    border-top: 5px solid;
	}

	.homepage-blad-impact-accent {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	/* edits voor mobiel */
	@media (max-width: 600px) {
		--carousel-button-offset: 3rem;
		--carousel-button-size: 10rem;

		.homepage-blad-impact-accent {
			top: -1rem;
			width: 4rem;
		}

		.homepage-intro-tekst {
			padding-top: 230px!important;
		}

		/* 2 columns for the carousel on mobile */
		.wp-block-post-template.is-layout-grid.abcs:not(.abcs-min-width) .wp-block-post,
		.wp-block-group.is-layout-grid.abcs:not(.abcs-min-width)>* {
			width: calc(33.33333% - var(--wp--style--block-gap, 1.25em) * 2 / 3) !important; 
			min-width: calc(33.33333% - var(--wp--style--block-gap, 1.25em) * 2 / 3) !important;
		}

		/* no carousel hover on mobile */
		li.gemeenschap:hover {
			transform: none;

			.gemeenschap-quote-container {
                opacity: 0;
            }
		}
	}

	@media (min-width: 600px) and (max-width: 1200px) {
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-3 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-4 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-5 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-6 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-7 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-8 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-9 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-10 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-11 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-12 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-13 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-14 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-15 .wp-block-post,
		.wp-block-post-template.is-layout-grid.abcs.abcs-cols-16 .wp-block-post {
			width: calc(33.33333% - var(--wp--style--block-gap, 1.25em) * 2 / 3) !important; 
			min-width: calc(33.33333% - var(--wp--style--block-gap, 1.25em) * 2 / 3) !important;
		}
	}
}

/* --- thema's page -------------------------------------------------------- */

body.page-template-apec-themas {
	--themas-menu-color: #FFDD00!important;

	.wp-block-navigation {
		color: var(--themas-menu-color);
	}

	.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--themas-menu-color);
	}
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: var(--themas-menu-color);
	}

	/* give everything in the menu a dropshadow so it's readable with a picture behind */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container {
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1));
	}
	@media (max-width: 781px) {
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__responsive-container {
			filter: drop-shadow(0 0 10px rgba(0, 200, 0, 1));
		}
	}

	.wp-block-navigation__responsive-container.is-menu-open {
	    overflow: visible;
	}
}




/* --- gemeenschappen page -------------------------------------------------------- */

:root :where(.is-layout-grid):has(.gemeenschap) {
    gap: 2rem;
}

/* give gemeenschap images yellow rectangle behind on hover */
.gemeenschap img {
	box-shadow: 0 0 0 0 #FFDD00;
	transition: box-shadow 0.3s ease-out;
}
.gemeenschap img:hover {
	box-shadow: 1rem 1rem 0 0 #FFDD00;
}


/* --- single gemeenschap custom post --------------------------------------------- */

body.single-gemeenschap {
	background-color: #D5E6BC;

	--single-gemeenschap-bg-color: #D5E6BC!important;
	--single-gemeenschap-menu-color: #FFDD00!important;

	background-color: var(--single-gemeenschap-bg-color);

	.wp-block-navigation {
		color: var(--single-gemeenschap-menu-color);
	}
	.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--single-gemeenschap-menu-color);
	}
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: var(--single-gemeenschap-menu-color);
	}
	.wp-block-navigation__responsive-container {
		--wp--preset--color--base: var(--single-gemeenschap-bg-color);
	}

	/* give everything in the menu a dropshadow so it's readable with a picture behind */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container {
		filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5));
	}
	.wp-block-navigation__responsive-container.is-menu-open {
	    overflow: visible;
	}
}


/* --- nieuws page -------------------------------------------------------- */

body.page-template-apec-nieuws,
body.single-nieuws {
	--nieuws-bg-color: #C0D79D!important;
	--nieuws-menu-color: #5D7E46!important;

	background-color: var(--nieuws-bg-color);

	.wp-block-navigation {
		color: var(--nieuws-menu-color);
	}
	.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--nieuws-menu-color);
	}
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: var(--nieuws-menu-color);
	}
	.wp-block-navigation__responsive-container {
		--wp--preset--color--base: var(--nieuws-bg-color);
	}

	.nieuws-page-leave-mask {
		mask-image: url("assets/images/nieuws-page-leave-mask.svg");
		mask-size: 100% 100%;
	}

	hr.wp-block-separator {
		height: 0.2rem;
	}
}


/* --- agenda page -------------------------------------------------------- */

body.page-template-apec-agenda,
body.single-agenda {
	background-color: #FFDD00!important;

	hr.wp-block-separator {
		height: 0.2rem;
	}
}


/* --- edo page -------------------------------------------------------- */

body.page-template-apec-edo {
	--edo-menu-color: #6793B4!important;
	--wp--preset--color--accent-1: #6793B4;
	--wp--preset--color--accent-2: #FFDD00;

	background-color: white!important;

	.wp-block-navigation {
		color: var(--edo-menu-color);
	}
	.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--edo-menu-color);
	}
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: var(--edo-menu-color);
	}

	footer.wp-block-template-part wp-block-group {
		background-color: #6793B4!important;
	}
}