/*
Theme Name: Common Affairs
Author: Jeroen Smeets
Author URI: https://jeroensmeets.nl
Theme URI: 
Tags: full-site-editing, block-patterns
Text Domain: common-affairs
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.8
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =============================
   Cover block
   ============================= */

body.single .wp-block-cover,
body.single-project .wp-block-cover,
body.single-vacature .wp-block-cover {
	max-height: 65vh;
	width: 100%;
}

body:not(.home) .wp-block-cover:not(.project-preview .wp-block-cover) .wp-block-cover__image-background {
	max-width: 100vw !important;
	width: 100vw !important;
}

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.custom-logo {
	max-width: 180px !important;
}

@media screen and (max-width: 400px) {
	.custom-logo {
		max-width: 140px !important;
	}
}

@media screen and (max-width: 780px) {
	:root .wp-block-columns.is-layout-flex {
		gap: 0;
	}
}

/**********/
/* Header */
/**********/

header {
	transition: background-color 500ms;
	z-index: 250;
}

header > div > div {
	flex-wrap: nowrap !important;
}


body.home .wp-site-blocks header {
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
}

body.home:has(#wpadminbar) header {
	margin-top: 32px;
}

/* Inner pages: keep the header (logo + menu icon) stuck to the top, so it no
   longer scrolls away and the logo stays put when the menu is opened.
   The home page keeps its own fixed/transparent treatment above. */
body:not(.home) header {
	position: sticky;
	top: 0;
}

body.admin-bar:not(.home) header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar:not(.home) header {
		top: 0;
	}
}

/* Solid white background once the page is scrolled under the header.
   On the home page script.js only sets .scrolled once the content has
   actually reached the header, so the hero keeps its transparent look. */
body.scrolled:not(.menu-open) header {
	background-color: #fff;
}

body.home.scrolled:not(.menu-open) #open-sesame .line {
	stroke: var(--wp--preset--color--black);
}

/* move the text out of sight, and show the logo as background */
header p#common-logo {
	/* background-image: url(assets/images/commonaffairs-logo-black.svg); */
	/* bottom, so the logo lines up with the bottom of the hamburger */
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
	height: 70px;
	margin-top: 1rem;
	position: relative;
	text-indent: -9999px;
	width: 160px;
	/* never squeeze the logo on narrow screens */
	flex-shrink: 0;
}

/* logo on frontpage photo is white */
/* body.home:not(.menu-open) header p#common-logo {
	background-image: url(assets/images/commonaffairs-logo-white.svg);
} */

/* make the logo clickable by placing an area over it */
header p#common-logo a:after {
	content: "";
	height: 70px;
	inset: 0;
	position: absolute;
	width: 160px;
	z-index: 100;
}

/**************/
/* Navigation */
/**************/

header .menu-control {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

@media screen and (max-width: 600px) {
	header .menu-control {
		gap: .25rem;
	}
}	

/* "Sluiten" is positioned next to the button instead of inside the flex flow:
   while the menu is closed it is invisible but would otherwise still take up
   width, squeezing the logo on narrow screens. */
header .menu-control .close-text {
	font-size: var(--wp--preset--font-size--large);
	font-weight: bold;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: calc(100% + 1rem);
	top: 50%;
	transform: translateY(calc(-50% - 4px));
	transition: all 500ms;
	white-space: nowrap;
}

/* no room next to the logo; the cross alone says "close" */
@media screen and (max-width: 480px) {
	header .menu-control .close-text {
		display: none;
	}
}

header #open-sesame {
	align-items: center;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	gap: 1rem;
	padding-block: 0;
	position: relative;
}

/* The bottom line ends at y=53 of the 60px viewBox; pull the svg down by the
   remaining 7/60 so that line sits on the same baseline as the logo. */
header #open-sesame svg {
	width: 50px; height: 50px;
	cursor: pointer;
	margin-bottom: calc(50px * -7 / 60);
}

header #open-sesame .line {
	stroke-width: 6;
	stroke: var(--wp--preset--color--black);
	transition: all 500ms;
}

body.home #open-sesame .line {
	stroke: var(--wp--preset--color--white);
}

header #open-sesame .top {
	transform-origin: 6px 20px;
}

header #open-sesame .middle {
	stroke-dasharray: 60 60;
}

header #open-sesame .bottom {
	transform-origin: 6px 40px;
}

.menu-open {
	overflow: hidden;
}

.menu-open header {
	background-color: white;
}

.menu-open header .menu-control .close-text {
	opacity: 1;
}

.menu-open header #open-sesame .line {
	stroke-width: 5;
	stroke: var(--wp--preset--color--black);
}

.menu-open header #open-sesame .top {
	transform: rotate(45deg);
}

.menu-open header #open-sesame .middle {
	stroke-dasharray: 1 40;
	stroke-dashoffset: -30;
}

.menu-open header #open-sesame .bottom {
	transform: rotate(-45deg);
}

/* The overlay starts flush under the header: script.js measures the header's
   bottom edge when the menu opens and sets --menu-top, so spacing presets,
   the admin bar and zoom levels can't open a gap that shows the page behind
   the menu. The dvh line keeps the menu bottom reachable behind mobile
   browser toolbars; the vh line above it is the fallback. */
header #site-navigation {
	display: none;
	left: 0;
	height: calc(100vh - var(--menu-top, 160px));
	height: calc(100dvh - var(--menu-top, 160px));
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	top: var(--menu-top, 160px);
	width: 100vw;
	z-index: 1000;
}

header #site-navigation.bgc-orange    { background-color: var(--wp--preset--color--orange); }
header #site-navigation.bgc-pink      { background-color: var(--wp--preset--color--pink); }
header #site-navigation.bgc-purple    { background-color: var(--wp--preset--color--purple); }
header #site-navigation.bgc-beige     { background-color: var(--wp--preset--color--beige); }
header #site-navigation.bgc-red       { background-color: var(--wp--preset--color--red); }
header #site-navigation.bgc-lightgrey { background-color: var(--wp--preset--color--lightgrey); }
header #site-navigation.bgc-darkgrey  { background-color: var(--wp--preset--color--darkgrey); }

/* Dark menu backgrounds get light text; the default dark text stays on the
   light backgrounds (orange, pink, beige, lightgrey). */
header #site-navigation.bgc-purple a,
header #site-navigation.bgc-purple p,
header #site-navigation.bgc-red a,
header #site-navigation.bgc-red p,
header #site-navigation.bgc-darkgrey a,
header #site-navigation.bgc-darkgrey p {
	color: var(--wp--preset--color--white);
}

.menu-open header #site-navigation {
	display: block;
}

header #site-navigation .menu-inner {
	display: flex;
	height: auto;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	min-height: 100%;
}

@media screen and (max-width: 1200px) {
	header #site-navigation .menu-inner {
		padding-left: var(--wp--style--root--padding-left, 42px);
	}
}

/* Left column: sparkle + nav + contact */
header #site-navigation .menu-left {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: var(--wp--preset--spacing--50, 2rem);
	position: relative;
	z-index: 0;
}

/* Sparkle pattern, recoloured from one SVG via mask + the --sparkle-color
   custom property set in the nav markup. */
header #site-navigation .menu-left::before {
	background-color: var(--sparkle-color, #fff);
	content: "";
	inset: 0;
	-webkit-mask-image: url(assets/bgimages/sparkle.svg);
	mask-image: url(assets/bgimages/sparkle.svg);
	-webkit-mask-position: 20% top;
	mask-position: 20% top;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Right column: photo */
header #site-navigation .menu-image {
	flex-shrink: 0;
	overflow: hidden;
	width: 38%;
}

header #site-navigation .menu-image .menu-bg-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Nav links */
header #site-navigation nav.main-navigation ul {
	list-style: none;
	margin-top: 1.4rem;
	padding-left: 4px;
}

header #site-navigation nav.main-navigation ul li {
	padding-top: 1lh;
}

header #site-navigation nav.main-navigation ul li a {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: bold;
	text-decoration: none;
}

/* Contact info at the bottom of the left column */
header #site-navigation .menu-contact {
	display: flex;
	gap: 3rem;
	margin-top: auto;
	padding-bottom: 2rem;
	padding-top: 3rem;
}

header #site-navigation .menu-contact p {
	font-weight: 400;
	line-height: 1.4;
	margin: 0 !important;
}

header #site-navigation .menu-contact a {
	text-decoration: none;
}

header #site-navigation .menu-contact-social a + a::before {
	content: '  ';
}

/******************/
/* General styles */
/******************/

p ~ p {
	margin-top: 1lh !important;
}

/* featured image */
@media screen and (min-width: 1600px) {
	body.single .wp-block-cover, body.single-project .wp-block-cover, body.single-vacature .wp-block-cover {
		max-height: 65vh;
		width: 100%;
	}
}


/****************/
/* News archive */
/****************/

body.blog h2.wp-block-post-title, body.archive h2.wp-block-post-title {
	margin-top: -8px;
}

body.blog h2.wp-block-post-title a, body.archive h2.wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
}

body.blog .wp-block-post-date,
	body.blog .wp-block-post-excerpt,
	body.blog .wp-block-post-excerpt__more-text,
	body.archive .wp-block-post-date,
	body.archive .wp-block-post-excerpt,
	body.archive .wp-block-post-excerpt__more-text {
		margin-top: 1lh;
}

/***************/
/* Single news */
/***************/

body.single h1.wp-block-post-title ~ .wp-block-post-date {
	color: var(--wp--preset--color--contrast);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--medium);
	margin-top: 4px;
}

/*******************/
/* Archive project */
/*******************/

.project-preview .wp-block-cover__inner-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

/* Classes rather than h2/h3: the title is an h2 on archives and an h3 under
   "Zie ook", and the place name is a paragraph (it is a label, not a heading). */
.project-preview li.wp-block-post .wp-block-cover__inner-container .wp-block-post-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: normal;
}

.project-preview li.wp-block-post .wp-block-cover__inner-container .project-plaatsnaam {
	font-size: var(--wp--preset--font-size--small);
	font-weight: normal;
	line-height: 1.13;
	margin-block-start: 0;
}

.project-preview li.wp-block-post .wp-block-cover__inner-container p {
	font-size: var(--wp--preset--font-size--medium);
	margin-block-start: 1rem;
}

/* hover styles for project card */

.project-preview li.wp-block-post {
	transition: transform .2s ease-in-out;
}

.project-preview li.wp-block-post .wp-block-cover__inner-container * {
	color: transparent;
	transition: color .3s ease-in-out;
}

/* :focus-within mirrors :hover so keyboard users see the card text too */
.project-preview li.wp-block-post:hover .wp-block-cover__inner-container *,
.project-preview li.wp-block-post:focus-within .wp-block-cover__inner-container * {
	color: var(--wp--preset--color--contrast);
}

.project-preview li.wp-block-post .wp-block-cover__background, body.post-type-archive-project li.wp-block-post .wp-block-cover__image-background {
	transition: all .3s ease-in-out;
}

.project-preview li.wp-block-post:hover .wp-block-cover__background,
.project-preview li.wp-block-post:focus-within .wp-block-cover__background {
	background-color: white;
	opacity: 1;
}

.project-preview li.wp-block-post:hover,
.project-preview li.wp-block-post:focus-within {
	box-shadow: rgba(50, 50, 93, 0.1) 0px 13px 27px -5px, rgba(0, 0, 0, 0.1) 0px 8px 16px -8px;
}

/* Touch devices have no hover: keep the text readable at all times by
   dimming the photo behind it. */
@media (hover: none) {

	.project-preview li.wp-block-post .wp-block-cover__background {
		background-color: rgba(25, 25, 24, 0.65);
		opacity: 1;
	}

	.project-preview li.wp-block-post .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--white);
	}
}

/******
"Random" background colors
https://www.the215guys.com/learning/nth-child-cicada-principle/
******/

/* Text colours are paired with each background so every combination meets
   WCAG AA: dark text on orange/pink, white text on purple. */
.project-preview li.wp-block-post:hover,
.project-preview li.wp-block-post:focus-within {

	&:nth-child(2n) .wp-block-cover__background {
		background: var(--wp--preset--color--purple);
	}

	&:nth-child(2n) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--white);
	}

	&:nth-child(3n) .wp-block-cover__background {
		background: var(--wp--preset--color--orange);
	}

	&:nth-child(3n) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}

	&:nth-child(5n) .wp-block-cover__background {
		background: var(--wp--preset--color--pink);
	}

	&:nth-child(5n) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}

	&:nth-child(11n) .wp-block-cover__background {
		background: var(--wp--preset--color--purple);
	}

	&:nth-child(11n) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--white);
	}

	&:nth-child(13n) .wp-block-cover__background {
		background: var(--wp--preset--color--orange);
	}

	&:nth-child(13n) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}

	&:nth-child(17n) .wp-block-cover__background {
		background: var(--wp--preset--color--pink);
	}

	&:nth-child(17n) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}

	&:nth-child(2n+1) .wp-block-cover__background {
		background: var(--wp--preset--color--purple);
	}

	&:nth-child(2n+1) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--white);
	}

	&:nth-child(3n+2) .wp-block-cover__background {
		background: var(--wp--preset--color--orange);
	}

	&:nth-child(3n+2) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}

	&:nth-child(5n+3) .wp-block-cover__background {
		background: var(--wp--preset--color--pink);
	}

	&:nth-child(5n+3) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}

	&:nth-child(11n+5) .wp-block-cover__background {
		background: var(--wp--preset--color--purple);
	}

	&:nth-child(11n+5) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--white);
	}

	&:nth-child(13n+11) .wp-block-cover__background {
		background: var(--wp--preset--color--orange);
	}

	&:nth-child(13n+11) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}

	&:nth-child(17n+13) .wp-block-cover__background {
		background: var(--wp--preset--color--pink);
	}

	&:nth-child(17n+13) .wp-block-cover__inner-container * {
		color: var(--wp--preset--color--contrast);
	}
}

/******************/
/* Single project */
/******************/

body.single-project h1.wp-block-post-title ~ h2 {
	margin-top: 4px;
}

/* Decorative sparkle behind the project data + "Zie ook"
   (replaces the old solid grey block). One SVG, recoloured via mask. */
.single-project-info {
	padding-bottom: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	position: relative;
	z-index: 0;
}

.single-project-info::before {
	background-color: var(--wp--preset--color--lightgrey);
	content: "";
	inset: 0;
	-webkit-mask-image: url(assets/bgimages/sparkle.svg);
	mask-image: url(assets/bgimages/sparkle.svg);
	-webkit-mask-position: center top;
	mask-position: center top;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Restore square aspect ratio for Zie ook thumbnails,
   overriding the max-height set for the project header cover */
body.single-project .project-preview .wp-block-cover {
	aspect-ratio: 1 !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: hidden;
}

body.single-project .entry-content h3, body.single-project .entry-content h3 ~ p {
	margin-top: 0 !important;
}

body.single-project .entry-content p {
	margin-bottom: 1lh;
}

/**********************/
/* Project type filter */
/**********************/

.project-filter {
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
	margin-top: var(--wp--preset--spacing--60, .5rem);
}

.project-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.project-filter li {
	margin: 0;
}

.project-filter a {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

/* Selected/hover state: keep the accessible contrast colour and signal the
   state with an underline instead of the (low-contrast) orange. */
.project-filter a.is-active,
.project-filter a:hover,
.project-filter a:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.project-filter a.is-active {
	font-weight: 700;
}

/**********/
/* Search */
/**********/

/* WCAG AA: darken the core defaults — the field border (#949494) misses the
   3:1 boundary contrast and UA placeholder grey can miss 4.5:1 on white. */
.wp-block-search__input {
	border-color: #767676;
}

.wp-block-search__input::placeholder {
	color: #6b6b6b;
	opacity: 1;
}