/******************************************************************************
* 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--outline-width: 3px;
	--boho--outline-style: solid;
	--boho--outline-offset: 3px;
	--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);
}

/* 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--large);
}

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


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

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

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

/* Page Meta */
.hero-section .entry-meta {
	--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);
}


/**
* FOOTER
**/

/* Default footer contents font size */
[data-footer*="type-1"] .ct-footer {
	--boho--font-size: var(--wp--preset--font-size--small);
}

/* Add missing underlines footer links */
[data-footer*="type-1"] .ct-footer [data-row="bottom"] 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: 2px solid var(--theme-palette-color-5);
	border-radius: 8px;
	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;
}


/* Pullquote; optionale balance text wrap looks good in pullquotes */
:where(.editor-styles-wrapper) .wp-block-pullquote blockquote p {
	text-wrap: var(--boho--text-wrap);
}

/* 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);
}


/**
* 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));
	}
}


/******************************************************************************
* 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));
}