/******************************************************************************
* ROOT and global properties
******************************************************************************/

:root {
	--boho--font-size: var(--wp--preset--font-size--medium);
	--boho--line-height: 1.5;
	--boho--letter-spacing: initial;
	--boho--text-wrap: balance;
	--boho--text-decoration-thickness: max(2px, 0.12em);
	--boho--border-radius: 8px;
	--boho--border-width: 2px;
	--boho--outline-width: 3px;
	--boho--outline-style: solid;
	--boho--outline-offset: 3px;
	--boho--excerpt--line-clamp: 4;	
	--boho--table--svg--max-height: calc(2ex * var(--boho--line-height, 1.5));
	--boho--post-title--image-filter: saturate(50%) contrast(80%) blur(4px);
	--boho--post-title--image-overlay-opacity: 80%;
	--theme-icon-size: .8em;
}

/******************************************************************************
* THE BOHO TYPOGRAPHY SYSTEM
******************************************************************************/

/**
* BODY (entire page)
**/

body :where(h1, .has-xx-large-font-size) {
	--boho--font-size: var(--wp--preset--font-size--xx-large);
	--boho--line-height: 1.1;
}

body :where(h2, .has-x-large-font-size) {
	--boho--font-size: var(--wp--preset--font-size--x-large);
	--boho--line-height: 1.2;
}

body :where(h3, .has-large-font-size) {
	--boho--font-size: var(--wp--preset--font-size--large);
	--boho--line-height: 1.3;
}

body :where(h4, .has-medium-font-size) {
	--boho--font-size: var(--wp--preset--font-size--medium);
	--boho--line-height: 1.4;
}

body :where(h5, .has-small-font-size) {
	--boho--font-size: var(--wp--preset--font-size--small);
	--boho--line-height: 1.5;
}

/* Set line height for the 5 T-shirt font sizes to align with the headings */
body [class*="has-"][class*="-font-size"] {
	line-height: var(--boho--line-height, inherit);
	text-wrap: var(--boho--text-wrap);
}

/* Balance text of headings and the site-title */
body :where(h1, h2, h3, h4, h5, .site-title, .page-description) {
	text-wrap: var(--boho--text-wrap);
}

/* Reset font weight of bold to standard 700 */
body :is(strong, b) {
	font-weight: 700;
}



/******************************************************************************
* CREATIVE THEMES (.ct) BLOCKSY STYLING 
******************************************************************************/

/**
* HEADER (site logo, navigation)
**/

/* Header default font size */
.ct-header {
	--boho--font-size: var(--wp--preset--font-size--small);
}

/* Site title */
.ct-header .site-title {
	--boho--font-size: var(--wp--preset--font-size--large);
}

/* Site tagline */
.ct-header .site-description {
	--boho--font-size: var(--wp--preset--font-size--small);
}

/* Navigation Menu items */
.ct-header :is([data-id="menu"], [data-id="language-switcher"], [data-id="color-mode-switcher"], [data-id="search"]) {
	--boho--letter-spacing: 1px;
}

/* Tablet and mobile flyout menu */
.ct-header [data-device="mobile"] .ct-panel-content-inner {
	--boho--font-size: var(--wp--preset--font-size--medium);
}

/* Search Results */
#search-modal .ct-search-results {
	--boho--font-size: var(--wp--preset--font-size--small);
}


/**
* SIDEBAR (widget titles)
**/

.ct-sidebar .widget-title {
	--boho--font-size: var(--wp--preset--font-size--large);
	--boho--line-height: 1.4;
}


/**
* HERO (page title, description, meta)
**/

/* Title */
.hero-section .page-title {
	--boho--font-size: var(--wp--preset--font-size--xx-large);
	--boho--line-height: 1.1;
}

/* Description */
.hero-section .page-description {
	--boho--font-size: var(--wp--preset--font-size--large);
	--boho--line-height: 1.3;
}

/* Meta */
.hero-section .entry-meta {
	--boho--font-size: var(--wp--preset--font-size--small);
}

/* Breadcrumbs */
.hero-section .ct-breadcrumbs {
	--boho--font-size: var(--wp--preset--font-size--small);
}



/**
* BLOG POSTS 
**/

/* Card Title */
[data-prefix="blog"] .entry-card .entry-title {
	--boho--font-size: var(--wp--preset--font-size--large);
	--boho--line-height: 1.3;
}

/* Card Excerpt */
[data-prefix="blog"] .entry-card .entry-excerpt {
	--boho--font-size: inherit;
	--boho--line-height: inherit;
}

/* Card Meta */
[data-prefix="blog"] .entry-card .entry-meta {
	--boho--font-size: var(--wp--preset--font-size--small);
	--boho--line-height: inherit;
}




/**
* PAGINATION
**/

/* Previous and Next buttons */
[data-pagination] :is(.prev, .next) {
	font-size: var(--wp--preset--font-size--small);
}


/**
* COMMENTS
**/

/* Comments Area Title */
#comments .comment-reply-title {
	font-size: var(--wp--preset--font-size--large);
}

/* Comments Area Labels */
#comments .comment-form :is(.logged-in-as, .comment-notes, label) {
	font-size: var(--wp--preset--font-size--small);
}

/* Comments Author Name */
#comments .ct-comment-list .ct-comment-author {
	font-size: var(--wp--preset--font-size--medium);
}

/* Comments Meta Data (time/reply) */
#comments .ct-comment-list .ct-comment-meta-data {
	--theme-link-initial-color: var(--theme-palette-color-1);
	--theme-text-decoration: underline;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.8em;
}

/* Comments Reply Link; remove legacy button-like styling */
#comments .ct-comment-meta-data .comment-reply-link {
	height: unset;
	padding: unset;
	border-radius: unset;
	margin-inline-start: unset;
	transition: unset;
}

/* Comments; unset reply link highlight triggerd by hovering over entire comment */
#comments .ct-comment-inner:not(.ct-has-reply-form):hover .comment-reply-link {
	color: var(--theme-link-initial-color);
}

/* Comments; set the correct link hover color on the reply link */
#comments .ct-comment-inner:not(.ct-has-reply-form) .comment-reply-link:hover {
	background: unset;
	color: var(--theme-link-hover-color);
}


/**
* FOOTER
**/

/* Default footer contents font size */
.ct-footer {
	--boho--font-size: var(--wp--preset--font-size--small);
}

/* Site title */
.ct-footer .site-title {
	--boho--font-size: var(--wp--preset--font-size--large);
}

/* Site tagline */
.ct-footer .site-description {
	--boho--font-size: var(--wp--preset--font-size--small);
}

/* Footer Navigation Menu */
.ct-footer :is([data-id="menu"], [data-id="language-switcher"]) {
	--boho--letter-spacing: 1px;
}

/* Footer widget links aren't normally underlined for some reason */
.ct-footer .ct-widget a {
	--theme-text-decoration: underline;
}

/******************************************************************************
/* WORDPRESS BLOCKS; SUBTLE STYLING FOR THE ENABLED CORE WORDPRESS BLOCKS
******************************************************************************/

/**
* TEXT BLOCKS
**/

/* Blockquote and Pullquote; Cite was 14/16px by default, change to small */
:is(blockquote, figure.wp-block-pullquote blockquote) cite {
	font-size: var(--wp--preset--font-size--small, inherit);
	font-weight: unset;
}

/* Details block; set a custom background color and rounded border */
.wp-block-details {
	margin-block-start: var(--wp--preset--spacing--50);
	border: var(--boho--border-width) solid var(--theme-palette-color-5);
	border-radius: var(--boho--border-radius);
	background: var(--theme-palette-color-8);
	padding: 0.25em;
}

/* Details block summary;  */
.wp-block-details>summary {
	margin-bottom: 0;
	font-weight: bold;
}

/* Details block summary; underline when hover */
.wp-block-details>summary:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--boho--text-decoration-thickness);
}

/* Details block content; needs both padding and margin for nice outline */
.wp-block-details>* {
	border-radius: 2px;
	margin: 0.25em;
	padding-inline: 0.25em;
}

/* Details block content; reduce excessive margin below summary */
.wp-block-details> :not(summary) {
	margin-block-start: 0.5rem;
}

/* Details block content; consistent margin below last content */
.wp-block-details> :last-child {
	margin-bottom: 0.25rem;
}



/* Keyboard especially, looks somewhat like a keyboard key with a border */
pre,
samp,
kbd {
	border-radius: var(--boho--border-radius);
	border: var(--boho--border-width) solid var(--theme-palette-color-5);
	--boho--font-size: 0.9em;
}

/* Pullquote; optionale balance text wrap looks good in pullquotes */
.wp-block-pullquote.has-text-align-center {
	text-wrap: var(--boho--text-wrap);
}


/**
* TABLE BLOCKS
**/

/* Table block; replace fixed stribe color with palette color / dark mode compatible */
.wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
	background-color: var(--theme-palette-color-6, #8882);
}
/* Table with SVG's; cap image height to circa line height */
.wp-block-table img[src$=".svg"] {
	max-height: var(--boho--table--svg--max-height);
}
.wp-block-table td:has(img[src$=".svg"]) {
	line-height: var(--boho--table--svg--max-height);
}
/* Table with SVG's; block editor fixes */
.wp-block-table .block-editor-rich-text__editable.rich-text:has(img[src$=".svg"]) {
	max-height: var(--boho--table--svg--max-height);
}

/**
* IMAGE BLOCKS
**/

/* Gallery; Make native gallery lightbox respect theme pallette (dark mode) */
.wp-lightbox-overlay .scrim {
	background: var(--theme-palette-color-8) !important;
}

/**
* MEDIA BLOCKS
**/

/* Audio; Tweak Firefox Audio player, light/dark mode adaptive, better contrast  */
@supports (-moz-appearance: none) {

	/* Optional dark mode colors */
	[data-color-mode="dark"] .wp-block-audio audio {
		--audio-border-color: #3337;
		--audio-background: #7657;
		--audio-filter: brightness(1.2) saturate(0.6);
	}

	/* Set the audio player style */
	.wp-block-audio audio {
		display: flex;
		border-radius: 24px;
		border: 2px solid var(--audio-border-color, #7777);
		background: var(--audio-background, #0007);
		filter: var(--audio-filter, invert(1) contrast(0.8) brightness(1.2) hue-rotate(180deg) saturate(0.8));
	}
}


/**
* EMBED BLOCKS
**/

/* PeerTube; make it its container */
.wp-block-embed.is-provider-peertube iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}


/******************************************************************************
* UTILITY CLASSES
******************************************************************************/

/* .boho--grayscale; make SVG logos adapt to light/dark mode automaically*/
[data-color-mode="dark"] img {
	--boho--grayscale: grayscale(1) contrast(0.3) brightness(1.7);
}

/* .boho--grayscale; target group containers and single images with the class*/
:is(.boho--grayscale img, img.boho--grayscale) {
	filter: var(--boho--grayscale, grayscale(1) contrast(1.5) brightness(0.7));
}


/*****************************************************************************
* EXPERIMENTAL 
******************************************************************************/


/* Single Post > Post Title > Design > Background Image; Filter (blur) */
.hero-section[data-type="type-2"] > figure .ct-media-container img {
	filter: var(--boho--post-title--image-filter);
	object-position: center 33%;
}

/* Single Post > Post Title > Design > Image Overlay Color; Opacity (90%) */
.hero-section[data-type="type-2"] > figure .ct-media-container::after {
	opacity: var(--boho--post-title--image-overlay-opacity);
}