/**
Theme Name: Stadsvergroeners Zwolle
Theme URI: https://github.com/ejoweb/stadsvergroenerszwolle/
Author: Erik Joling
Author URI: https://www.ejoweb.nl/
Description: WordPress blokkenthema voor Stadsvergroeners Zwolle
Requires at least: 6.2
Tested up to: 6.3
Requires PHP: 7.4
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: svz
*/


/* -------------------------------- GENERAL -------------------------------- */

/**
 * Typography
 */
strong {
	font-weight: 600;
}

/**
 * Links
 */
.wp-block-cover a,
.wp-block-post-title a {
	text-decoration: none;
}
.wp-block-cover a:hover,
.wp-block-post-title a:hover {
	text-decoration: underline;
}

/**
 * Global padding rules
 */
.has-global-padding :where(.has-global-padding) {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}

.has-global-padding :where(.has-global-padding) > .alignfull {
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
	margin-left: calc(var(--wp--style--root--padding-left) * -1);
}

/**
 * Cover block 
 */
.wp-block-cover {
	padding-top: var(--wp--style--root--padding-top);
	padding-bottom: var(--wp--style--root--padding-bottom);
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}

/* Fix colors of cover block */
.wp-block-cover h1:not(.has-text-color), 
.wp-block-cover h2:not(.has-text-color), 
.wp-block-cover h3:not(.has-text-color), 
.wp-block-cover h4:not(.has-text-color), 
.wp-block-cover h5:not(.has-text-color), 
.wp-block-cover h6:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

.wp-block-cover .has-text-color h1:not(.has-text-color), 
.wp-block-cover .has-text-color h2:not(.has-text-color), 
.wp-block-cover .has-text-color h3:not(.has-text-color), 
.wp-block-cover .has-text-color h4:not(.has-text-color), 
.wp-block-cover .has-text-color h5:not(.has-text-color), 
.wp-block-cover .has-text-color h6:not(.has-text-color) {
	color: inherit;
}

.wp-block-cover.is-light .wp-block-cover__inner-container {
	color: var(--wp--preset--color--contrast);
}

/* Groups inside covers */
.wp-block-cover .wp-block-group {
	padding: 0;
}

/**
 * Group block
 */
:where(.wp-block-group.has-background) {

}

/**
 * Columns block
 */



/* -------------------------------- LAYOUT -------------------------------- */

/*
 * Smooth scroll when `to top`-link is clicked
 */
html {
    scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/**
 * Site container 
 */
.wp-site-blocks {
	padding-top: var(--wp--style--root--padding-top);
	padding-bottom: var(--wp--style--root--padding-bottom);
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
	max-width: var(--wp--custom--layout--full-size);
	margin-right: auto;
	margin-left: auto;
}

/**
 * Site header 
 */

header.wp-block-template-part {
	padding: 0;
	max-width: var(--wp--custom--layout--full-size);
	margin-right: auto;
	margin-left: auto;
}


/**
 * Site navigation 
 */
header.wp-block-template-part .wp-block-navigation:not(.wp-block-navigation__container) {
	margin-top: var(--wp--preset--spacing--60);
}

header.wp-block-template-part .wp-block-navigation__container {
	row-gap: var(--wp--preset--spacing--40);

}

header.wp-block-template-part .wp-block-navigation-item {
	line-height: var(--wp--custom--typography--line-height--small);
}


/* First level items */
header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-decoration-color: var(--wp--preset--color--secondary);
	text-underline-offset: 6px;
	padding: var(--wp--preset--spacing--20) 0 !important;
}

/* Custom menu item: is-button */
header.wp-block-template-part .wp-block-navigation-item.is-button .wp-block-navigation-item__content {

	/* Button */
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--20) !important;
	text-decoration: none !important;
	border-radius: var(--wp--custom--border-radius--small);
}

/* Sub menu hover */
header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content {
	text-decoration: none;
}

header.wp-block-template-part .wp-block-navigation .has-child .wp-block-navigation-submenu {
	border: 0;
	padding: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--secondary);
}


header.wp-block-template-part .wp-block-navigation__responsive-container-close svg, 
header.wp-block-template-part .wp-block-navigation__responsive-container-open svg {
	width: 36px;
	height: 36px;
}

/**
 * Site Banner 
 *
 * Note: we don't use `main` as selector because `main` is not present in the post-editor
 * Note: but we do use `main` when the banner is outside the post content (because site-editor)
 */
main > .wp-block-cover:first-child,
.wp-block-post-content > .wp-block-cover:first-child {
	min-height: var(--wp--custom--spacing--banner-height);
}

/* main > .wp-block-cover:first-child > .wp-block-cover__inner-container,
.wp-block-post-content > .wp-block-cover:first-child > .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
} */

/* main > .wp-block-cover:first-child > .wp-block-cover__inner-container,
.wp-block-post-content > .wp-block-cover:first-child > .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
 */

main > .wp-block-cover:first-child > .wp-block-cover__inner-container > .wp-block-group.has-background,
.wp-block-post-content > .wp-block-cover:first-child > .wp-block-cover__inner-container > .wp-block-group.has-background {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--border-radius--small);
	
}


/**
 * Blog posts
 */
.wp-block-post-template-is-layout-grid .wp-block-post {
	display: grid;
	grid-template-rows: auto 1fr;
}


/**
 * Site contact near footer (call to action)
 *
 * Notes: 
 * - we don't use `main` as selector because `main` is not present in the post-editor
 * - we use `div:last-of-type` to also target the post-editor
 */

.wp-block-post-content > div.wp-block-cover:last-of-type,
footer.wp-block-template-part > div.wp-block-cover {
	padding-top: 0;
}

/* Set image to bottom of container and within container */
.wp-block-post-content > div.wp-block-cover:last-of-type > .wp-block-cover__image-background,
footer.wp-block-template-part > div.wp-block-cover > .wp-block-cover__image-background {
	object-fit: contain;
	height: auto;
	top: auto;
}


/**
 * Site footer 
 */

footer.wp-block-template-part {
	margin-block-start: var(--wp--preset--spacing--60);
}


/* ----------------------------- CUSTOM CLASSES ----------------------------- */

.wp-block-group.four-image-group {
	display: grid;
	grid-template-columns: fit-content(175px) fit-content(175px);
}

.wp-block-columns.content-right .wp-block-column {
	flex-grow: 5;
}
.wp-block-columns.content-right .wp-block-column:last-child {
	flex-grow: 6;
}

.wp-block-columns.content-left .wp-block-column {
	flex-grow: 5;
}
.wp-block-columns.content-left .wp-block-column:first-child {
	flex-grow: 6;
}

.wp-block-columns.content-left .wp-block-column .wp-block-image,
.wp-block-columns.content-right .wp-block-column .wp-block-image {
	max-width: 360px;
}

/* Site banner with post title */
.wp-block-cover.has-post-title {
	align-items: flex-end;
}

.wp-block-cover.has-post-title .wp-block-cover__inner-container {
	width: 100% !important;
	padding: 0;
}

/** 
 * Lightweight Accordion 
 */

.lightweight-accordion.bordered {
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	padding-bottom: var(--wp--preset--spacing--30);
}

.lightweight-accordion .lightweight-accordion-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.lightweight-accordion .lightweight-accordion-title > * {
	margin: 0;
}

.lightweight-accordion .lightweight-accordion-title > span {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--typography--line-height--small);
	color: var(--wp--preset--color--primary);
}

/* Marker */
.lightweight-accordion .lightweight-accordion-title:after {
	/**
	 * Content
	 * - \25B8 = black-right-pointing-small-triangle
	 * - \276F = Heavy Right-Pointing Angle Quotation Mark Ornament
	 * - Custom: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="25" height="25"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg>');
	 */
	content: '\25B8';
	color: var(--wp--preset--color--tertiary);

	font-size: var(--wp--preset--font-size--x-large);
	margin-left: var(--wp--preset--spacing--30);
	line-height: 1;
}

/* Opened accordion */
.lightweight-accordion details[open] .lightweight-accordion-title:after {

	content: '\25BE'; /* black-down-pointing-small-triangle */
}

.lightweight-accordion .lightweight-accordion-body > * {
	margin-block-start: var(--wp--preset--spacing--30);
	margin-block-end: 0;
}

.lightweight-accordion .lightweight-accordion-body > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ------------------------------- TEMPLATES -------------------------------- */



/* ------------------------------ BREAKPOINTS ------------------------------- */

@media screen and (min-width: 720px) {


}


/* Breakpoint for mobile navigation */
@media screen and (max-width: 960px) {

	/**
	 * Site navigation
	 */

	/* Set site-header relative */
	header.wp-block-template-part {
		position: relative;
		z-index: 99;
	}

	header.wp-block-template-part .wp-block-site-title,
	header.wp-block-template-part .wp-block-site-logo {
		/* position: relative;
		z-index: 100001; */
	}

	/* Core override */
	header.wp-block-template-part .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
	}

	/* Core override */
	header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header.wp-block-template-part .wp-block-navigation__responsive-close {
		padding-bottom: var(--wp--style--root--padding-bottom);
		padding-right: var(--wp--style--root--padding-right);
		padding-left: var(--wp--style--root--padding-left);

		/* Manually align close button with open button */
		padding-top: var(--wp--preset--spacing--70);
	}

	header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: calc(var(--wp--preset--spacing--70) + 36px);
		font-size: var(--wp--preset--font-size--large);
	}

	header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		/* row-gap: var(--wp--preset--spacing--40); */
	}

	/* Submenu container */
	header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
		/* padding-top: var(--wp--preset--spacing--20); */
	}

	/* Submenu item */
	header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .has-child  .wp-block-navigation__submenu-container .wp-block-navigation-item {
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* Breakpoint for small screens */
@media screen and (max-width: 720px) {


}

/* Breakpoint for tiny screens */
@media screen and (max-width: 480px) {
	
	.wp-site-blocks {
		padding-bottom: 0rem;
		padding-right: 0rem;
		padding-left: 0rem;
	}

	header.wp-block-template-part .wp-block-navigation__responsive-close {
		padding-bottom: 0rem;
		padding-right: 0rem;
		padding-left: 0rem;
	}

}

/* Breakpoint for tiny screens */
/* @media screen and (max-width: 360px) {

	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--40);
		--wp--style--root--padding-right: var(--wp--preset--spacing--40);
	}
} */