/*
Theme Name: Shirley de Jong - Theme v7
Theme URI: https://www.shirleydejong.nl/
Author: Shirley de Jong/Nogonad
Author URI: https://automattic.com/
Description: Shirley de Jong - Theme v7 is a fork of Automattic's Impressionist theme.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 7.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shirleydejong
Tags: blog, one-column, wide-blocks, block-patterns, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready
*/


/* TODO: Style variations via wordpress werken niet. Omdat deze niet aan te passen zijn via de frontend.
 * De gradienten en kleuren moeten in het theme aangemaakt worden en hier in deze CSS moet er een donkere versie van gemaakt worden.
 * lelijk maar helaas.
 *
 * Idee:
 * Aantal classes aanmaken die combinaties van kleuren gebruiken.
 * bijv 7 verschillende combinaties (die dus elk ook een donkere versie hebben) regenboog
 * De class wordt via function.php toegevoegd aan de body tag.
 * gradienten via: https://webgradients.com/
 */
 
:root {
	
	--sdj-color-base-slate-blue: #6457c6;
	--sdj-color-base-medium-blue: #7873F5;
	--sdj-color-base-violet-blue: #886aea;
	--sdj-color-base-purple: #65379b;
	--sdj-color-base-vivid-pink: #ec77ab;
	--sdj-color-base-coral-pink: #ff719a;
	--sdj-color-base-peach-pink: #ffa99f;
	--sdj-color-base-light-peach-yellow: #ffe29f;
	--sdj-color-base-emerald-green: #50cc7f;
	--sdj-color-base-safety-yellow: #f5d100;
	--sdj-color-base-rose: #ffb199;
	--sdj-color-base-red: #ff0844;
	--sdj-color-base-dark-red: #500000;
	
	
	--sdj-color-slate-blue: var(--sdj-color-base-slate-blue);
	--sdj-color-medium-blue: var(--sdj-color-base-medium-blue);
	--sdj-color-violet-blue: var(--sdj-color-base-violet-blue);
	--sdj-color-purple: var(--sdj-color-base-purple);
	--sdj-color-vivid-pink: var(--sdj-color-base-vivid-pink);
	--sdj-color-coral-pink: var(--sdj-color-base-coral-pink);
	--sdj-color-peach-pink: var(--sdj-color-base-peach-pink);
	--sdj-color-light-peach-yellow: var(--sdj-color-base-light-peach-yellow);
	--sdj-color-emerald-green: var(--sdj-color-base-emerald-green);
	--sdj-color-safety-yellow: var(--sdj-color-base-safety-yellow);
	--sdj-color-rose: var(--sdj-color-base-rose);
	--sdj-color-red: var(--sdj-color-base-red);
	--sdj-color-dark-red: var(--sdj-color-base-dark-red);
	
	/* colors for lily-meadow gradient */
	--blue-purple-gradient: 
		var(--sdj-color-slate-blue) 0%,
		var(--sdj-color-violet-blue) 53%,
		var(--sdj-color-purple) 100%;
		
	/* colors for angle-care gradient */
	--peach-gradient:
		var(--sdj-color-coral-pink) 0%,
		var(--sdj-color-peach-pink) 48%,
		var(--sdj-color-light-peach-yellow) 100%;
		
	/* colors for trans gradient */
	--trans-gradient:
		var(--sdj-color-vivid-pink) 0%,
		var(--sdj-color-medium-blue) 100%;
		
	/* colors for millennium-pine */
	--green-yellow-gradient:
		var(--sdj-color-emerald-green) 0%,
		var(--sdj-color-safety-yellow) 100%;
		
	/* colors for love-kiss */
	--red-pink-gradient:
		var(--sdj-color-red) 0%,
		var(--sdj-color-rose) 100%;
		
	--sdj-backdrop-blur: blur(5px);
}

@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--link: hsl(from var(--sdj-color-base-medium-blue) h 40% s);
		--sdj-color-medium-blue: hsl(from var(--sdj-color-base-medium-blue) h s 30%);
		--sdj-color-slate-blue: hsl(from var(--sdj-color-base-slate-blue) h s 20%);
		--sdj-color-medium-blue: hsl(from var(--sdj-color-base-medium-blue) h s 10%);
		--sdj-color-violet-blue: hsl(from var(--sdj-color-base-violet-blue) h s 10%);
		--sdj-color-purple: hsl(from var(--sdj-color-base-purple) h s 10%);
		--sdj-color-vivid-pink: hsl(from var(--sdj-color-base-vivid-pink) h s 20%);
		--sdj-color-coral-pink: hsl(from var(--sdj-color-base-coral-pink) h s 45%);
		--sdj-color-peach-pink: hsl(from var(--sdj-color-base-peach-pink) h s 10%);
		--sdj-color-light-peach-yellow: hsl(from var(--sdj-color-base-light-peach-yellow) h s 16%);
		--sdj-color-emerald-green: hsl(from var(--sdj-color-base-emerald-green) h s 40%);
		--sdj-color-safety-yellow: hsl(from var(--sdj-color-base-emerald-green) h s 10%);
		--sdj-color-rose: var(--sdj-color-base-dark-red);
		--sdj-color-red: hsl(from var(--sdj-color-base-red) h s 40%);
	}
}

@media (forced-colors: active) {
	:root {
		--sdj-color-highlight: #000;
	}
}

@media (prefers-reduced-transparency: reduce) {
	:root {
		--sdj-backdrop-blur: blur(50px);
	}
}

@view-transition {
	navigation: auto;
}

html {
	scrollbar-gutter: stable;
}

body {
	min-height: 100vh;
	color: var(--wp--preset--color--base);
}

.background-mask {
	mask: url('./assets/images/background-pattern.svg') center no-repeat;
	mask-size: 120%;
	position: fixed;
	z-index: -5;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

@media (orientation: portrait) {
	.background-mask {
		mask-size: 160vh;
	}
}

/* Gradient backgrounds */

.bg-lily-meadow {
	background: var(--sdj-color-violet-blue) var(--wp--preset--gradient--sdj-lily-meadow);
	--wp--preset--color--base: #fff;
}

.bg-lily-meadow .background-mask {
	background: var(--wp--preset--gradient--sdj-lily-meadow-reverse);
}

.bg-angle-care {
	background: var(--sdj-color-peach-pink) var(--wp--preset--gradient--sdj-angle-care);
	--wp--preset--color--base: var(--sdj-color-dark-red);
	--wp--preset--color--on-base: #fff;
}

.bg-angle-care .background-mask {
	background: var(--wp--preset--gradient--sdj-angle-care-reverse);
}

.bg-trans {
	background: var(--sdj-color-medium-blue) var(--wp--preset--gradient--sdj-trans);
	--wp--preset--color--base: #fff;
	--wp--preset--color--on-base: #000;
}

.bg-trans .background-mask {
	background: var(--wp--preset--gradient--sdj-trans-reverse);
}

.bg-millennium-pine {
	background: var(--sdj-color-emerald-green) var(--wp--preset--gradient--sdj-millennium-pine);
	--wp--preset--color--base: color-mix(in srgb, var(--sdj-color-emerald-green) 30%, #000);
	--wp--preset--color--on-base: #fff;
}

.bg-millennium-pine .background-mask {
	background: var(--wp--preset--gradient--sdj-millennium-pine-reverse);
}

.bg-love-kiss {
	background: var(--sdj-color-red) var(--wp--preset--gradient--sdj-love-kiss);
	--wp--preset--color--base: var(--sdj-color-dark-red);
	--wp--preset--color--on-base: #fff;
}

.bg-love-kiss .background-mask {
	background: var(--wp--preset--gradient--sdj-love-kiss-reverse);
}

@media (prefers-color-scheme: dark) {
	
	.bg-lily-meadow {
		--wp--preset--color--link: var(--sdj-color-base-medium-blue);
		--wp--preset--color--base: hsl(from var(--sdj-color-base-medium-blue) h 40% s);
	}
	
	.bg-angle-care {
		--wp--preset--color--base: hsl(from var(--sdj-color-base-light-peach-yellow) h 50% l);
		--wp--preset--color--on-base: var(--sdj-color-base-dark-red)
	}
	
	.bg-trans {
		--wp--preset--color--base: hsl(from var(--sdj-color-base-violet-blue) h 50% l);
	}
	
	.bg-millennium-pine {
		--wp--preset--color--base: var(--sdj-color-base-safety-yellow);
		--wp--preset--color--on-base: hsl(from var(--sdj-color-base-safety-yellow) h 20% 10%);
	}
	
	.bg-love-kiss {
		--wp--preset--color--base: var(--sdj-color-base-peach-pink);
		--wp--preset--color--on-base: var(--sdj-color-dark-red);
	}
}

/* END of gradient backgrounds */

q {
	font-style: italic;
}

q::before {
	content: "'";
}

q::after {
	content: "'";
}


header {
	backdrop-filter: var(--sdj-backdrop-blur);
	background: rgb(255 255 255 / 0.1);
	border-bottom: 1.5px solid rgb(255 255 255 / 0.2);
	box-shadow: 0px 0px 10px rgb(0 0 0 / 0.1);
	margin: 0;
	position: relative;
	z-index: 2;
}

@media (prefers-color-scheme: dark) {
	header {
		background: rgb(0 0 0 / 0.1);
		border-bottom: 1.5px solid rgb(0 0 0 / 0.2);
	}
}

.has-modal-open header {
	backdrop-filter: none;
}

/* Ensure navigation menu and submenus stay above backdrop filter */
.wp-block-navigation,
.wp-block-navigation__submenu-container {
	position: relative;
	z-index: 10;
}

:root :where(.wp-block-post-featured-image) {
	max-width: var(--wp--style--global--wide-size);
}

figure.wp-block-post-featured-image,
figure:not(.wp-block-gallery, .attachment-gallery):has(:not(img) figcaption) {
	background: white;
	padding: 16px;
	box-shadow: 8px 8px 8px rgb(0 0 0 / 0.16);
	border-radius: 2px;
	display: block;
}

.related-postfeed figure.wp-block-post-featured-image {
	padding: 8px;
}

@media (forced-colors: active) {
	figure.wp-block-post-featured-image,
	figure:not(.wp-block-gallery, .attachment-gallery):has(:not(img) figcaption) {
		border: 2px dashed #000;
	}
}

.polaroid-wrap {
	display: table;
}

.polaroid-wrap figcaption {
	display: table-caption;
	caption-side: bottom;
	margin: 1.2em 0;
}

figure.wp-block-post-featured-image {
	padding-bottom: 48px;
}

@media (max-width: 600px) {
	figure.wp-block-post-featured-image, figure:has(figcaption) {
		padding: 8px 8px 24px 8px;
	}
}

:where(ul.wp-block-post-template li:nth-child(3n+1)) figure.wp-block-post-featured-image,
.wp-singular figure.wp-block-post-featured-image,
figure.alignleft:has(figcaption) {
	transform: rotate(-2deg);
}

:where(ul.wp-block-post-template li:nth-child(3n)) figure.wp-block-post-featured-image,
figure.alignright:has(figcaption) {
	transform: rotate(2deg);
}

:root :where(.wp-block-quote) {
	border-left: 10px solid var(--wp--preset--color--link);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
	backdrop-filter: brightness(0.5);
	
}

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--secondary);
}

@media (forced-colors: active) {
	:root :where(.wp-block-button .wp-block-button__link) {
		border: 1px solid #000;
	}
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 0.8px !important;
	text-underline-offset: 0.2em;
}

/*
 * Form field styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
::placeholder {
	color: var(--wp--preset--color--primary);
	opacity: 1; /* Firefox */
}

input:not([type="submit"]):not([type="checkbox"]):not([type=search]),
textarea,
.wp-block-post-comments-form input:not([type=submit]),
.wp-block-post-comments-form textarea {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--on-base);
	border-radius: 4px;
	backdrop-filter: var(--sdj-backdrop-blur);
}

input:not([type="submit"]):not([type="checkbox"]):focus,
textarea:focus {
	outline-style: solid;
	outline-color: var(--wp--preset--color--primary);
}

/*
 * Pull quote Block
 * Reset the browser default margins for blockquote element
 * https://github.com/WordPress/gutenberg/issues/44129
 */
.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	margin: 0;
}

/*
 * Navigation Block
 * Reset the padding from List block
 * https://github.com/WordPress/gutenberg/issues/50486
 */
.wp-block-navigation ul {
	padding: unset;
	border-radius: 4px;
}

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

@media (min-width: 600px) {
	.realigned-submenu {
		position: fixed !important;
		top: calc( anchor(top) - 1px) !important;
		right: anchor(left) !important;
		left: auto !important;
	}
}

.wp-block-navigation .wp-block-navigation-item {
	background: none;
}

.wp-block-navigation .current-menu-item:not(.wp-block-navigation__submenu-container .current-menu-item):not(.is-menu-open .current-menu-item),
.single-post .wp-block-navigation .current-post-parent,
.archive .wp-block-navigation .current-post-parent {
	background-color: var(--wp--preset--color--base) !important;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
	border-radius: 20px;
	color: var(--wp--preset--color--on-base);
}

.wp-block-navigation__submenu-container .current-menu-item {
	font-weight: 700;
	background-color: color-mix(in srgb, var(--sdj-color-highlight) 10%, transparent);
}

.wp-block-search.wp-block-search__button-only .wp-block-search__input {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	border-color: var(--wp--preset--color--base);
	outline: none !important;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button[aria-expanded="true"] {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.home .fixed-site-logo-wrapper {
	margin-top: 20px;
}

.fixed-site-logo-wrapper {
	position: relative;
	overflow: clip;
	display: flex;
	max-width: fit-content;
	transform: rotate(-7deg);
}

.header-logo-container {
	margin: 0 3vw !important;
	max-width: 50%;
}

#logo {
	width: 100%;
	height: auto;
}

#hp-introduction {
	overflow: hidden;
}

#hp-introduction .wp-block-media-text__media {
	max-height: 100vh;
}

@media (max-width: 768px) {
	#hp-introduction .wp-block-media-text__content {
		grid-row: 1;
		grid-column: 1;
	}
	#hp-introduction .wp-block-media-text__media {
		grid-row: 2;
		grid-column: 1;
	}
	
	#hp-introduction.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
		grid-template-rows: 33% auto;
	}
}

.logo-shape.fg {
	fill: var(--sdj-color-highlight);
}

.logo-shape.bg {
	fill: var(--wp--preset--color--base);
}

@media (forced-colors: active) {
	.logo-shape.bg {
		fill: #ccc;
	}
}

.wp-block-post-navigation-link:not(:has(a)) {
	display: none;
}

.wp-block-avatar img {
	border: 2px solid white;
	border-radius: 8px;
}

body:not(.page-template-page-full-width) main {
	padding:var(--wp--preset--spacing--50);
}

.page-footer {
	border: none;
	padding:var(--wp--preset--spacing--50);
}

.page-footer .wp-block-group:has(.wp-block-site-title) {
	padding: 0 0 var(--wp--preset--spacing--60) 0;
}

.copyright {
	font-size: 0.7rem;
	letter-spacing: 0.128em;
	text-transform: uppercase;
}

.page-template-page-full-width main:has(.wp-block-gallery) {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-cover__inner-container h1 {
	color: #fff !important;
	margin: 2rem auto;
	text-shadow: 0 0px 6px #0004;
}

/* background is styled inline via functions.php */
.wp-block-cover__inner-container p {
	color: #fff !important;
	background: var(--rnd-bg-gradient-0);
	border-radius: 4px;
	width: fit-content;
	max-width: 90vw;
	padding: 2px 8px;
	text-align: center;
	font-weight: 600;
	text-shadow: 0 0px 6px #0004;
	margin: auto;
	box-shadow: -6px 6px 0px var(--sdj-color-highlight);
}

@media (forced-colors: active) {
	.wp-block-cover__inner-container p {
		background: var(--wp--preset--color--base);
	}
}

@supports (display: grid-lanes) {
	body .is-layout-grid.masonry {
		display: grid-lanes;
	}
}

@media (max-width: 768px) {
	.postfeed.columns-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 769px) and (max-width: 1000px) {
	.postfeed.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 2000px) {
	.postfeed.columns-3 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.old-content-warning {
	display: flex;
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	font-family: var(--wp--preset--font-family--eb-garamond);
}

.postcard-container {
	margin: 0;
}

.postcard {
	border-radius: 4px;
	max-width: 90vw;
	padding: var(--wp--preset--spacing--50);
	text-shadow: 0 0px 6px #0004;
	margin: auto;
	box-shadow: -6px 6px 0px var(--sdj-color-highlight);
}

@media (forced-colors: active) {
	.postcard {
		border: 2px solid var(--wp--preset--color--on-base);
	}
}

.postcard a:hover {
	text-decoration: none;
}

@media (min-width: 1400px) and (max-width: 1999px) {
	.post-template-default .entry-content {
		padding: 0 10vw;
	}
}

@media (min-width: 1000px) and (max-width: 1999px) {
	.page-template-page-wide .entry-content {
		max-width: 80vw;
	}
}

@media (min-width: 2000px) {
	.page-template-page-wide .entry-content {
		max-width: 60vw;
	}
	
	.post-template-default .entry-content {
		padding: 0 20vw;
	}
}

.masonry .postcard {
	position:relative;
}

.comment-reply-title {
	font-family: var(--wp--preset--font-family--shirley-handwriting);
	font-weight: normal;
	margin-bottom: 1.8rem !important;
}

@media (max-width: 1000px) {
	.post-meta,
	comments,
	.wp-block-comments-query-loop {
		padding: 0 var(--wp--preset--spacing--50);
	}

	comments,
	#respond {
		margin-top: 0;
	}
	
	.comment-reply-title {
		margin: 0 !important;
	}
}

.wp-block-group:has(.pagination-container) {
	border-top: 1px solid var(--wp--preset--color--tertiary);
	margin-top: var(--wp--preset--spacing--60);
}

.pagination-container {
	padding: var(--wp--preset--spacing--60);
	max-width: 60vw;
}

.navigation-container {
	margin-top:var(--wp--preset--spacing--60);
}

.navigation-container nav {
	border-top: 1px solid var(--wp--preset--color--tertiary);
	padding: var(--wp--preset--spacing--60) 0;
}

.post-header {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.masonry .postcard figure.wp-block-post-featured-image,
.masonry .postcard figure:not(.wp-block-gallery):has(figcaption){
	position: absolute;
	right: -0.2em;
	bottom: 0;
	z-index: 1;
	max-width: 40%;
	padding: 6px;
}

.masonry .postcard figure.wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;;
}

.masonry .postcard .wp-block-post-excerpt {
	display: flex;
}

.masonry .postcard:not(:has(.wp-block-post-excerpt))  {
	background-color: red !important;
	opacity: 0.5;
}

.masonry .postcard:has(figure.wp-block-post-featured-image) .wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
	max-width: 60%;
}

.single-comment {
	margin-top:0;
	margin-bottom:var(--wp--preset--spacing--50);
}