/******************************************************************************
* 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 Title (cancel reply link) */
#comments .comment-reply-title #cancel-comment-reply-link {
	font-family: var(--theme-button-font-family);
	font-weight: 600;
	font-size: .8rem;
	padding: 0.3em 0.6em;
}

/* 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 Meta Data Reply link button-ish styling */
#comments .ct-comment-list .ct-comment-meta-data .comment-reply-link {
	height: unset;
	padding: 0em 0.5em;
}


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



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

/* Make sure phone number lins don't wrap over two lines */
a[href^="tel:"] {
	white-space: nowrap;
}



/*****************************************************************************
* EXPERIMENTAL PATTERNS
******************************************************************************/


/**
* ========================================
* SLIDE PATTERN (BEM)
* Pattern: Slide pattern by boho
* Version: 1.0.0
* ========================================
*
* BLOCK: .slide
*   Root container for the slide component
*   Contains figure and body columns
*
* ELEMENTS:
*   .slide__figure    - Left column (image/media container)
*   .slide__body      - Right column (text/content container)
*   .slide__media     - Figure wrapper for media
*   .slide__title     - Main heading (h1)
*   .slide__copy      - Paragraph text content
*   .slide__quote     - Quote with citation
*   .slide__quotation - Actual contents of the quote
*   .slide__list      - Unordered list within body
*   .slide__link      - Link wrapper paragraph
**/


/* Slide Elements */

.slide__body {
	font-size: var(--wp--preset--font-size--large);
}
.slide__quote {
	--boho--font-size: var(--wp--preset--font-size--large);
}
.slide__quotation {
	--boho--font-size: var(--wp--preset--font-size--large);
	--theme-content-spacing: var(--wp--preset--spacing--30);
}

/**
* Slide adjustments on all devices, front end only
**/

/* Remove weird margin to the right of the video */
body.single-slide .slide__figure .wp-block-video.alignright {
	margin: unset;
}


/**
* Slide container, contents and footer adjustments on desktop front
*/

@media (min-width: 1025px) {
	/* Center within vertical space minus header and footer */
	body.single-slide article.slide {
		min-height: calc(100vh - 140px);
		display: grid;
		place-items: center;
		padding: 1rem;
	}
	/* Make sure video's aren't too high to fit the slide */
	body.single-slide .slide__figure video {
		width: auto;
		max-height: calc(100vh - 240px);
	}
	/* Only apply padding below footer bottom row, not above */
	body.single-slide footer [data-row="bottom"] .ct-container-fluid {
		padding-block: 0 var(--container-spacing);
	}
	/* Animate the slide in to reduce layout shifts */
	body.single-slide {
		animation: slideFade 0.2s ease-in-out;
	}
	@keyframes slideFade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
}

/* End of Slide pattern */