/*
Theme Name: Jemma
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jemma
Tags: 

:where(strong, b) { 
	font-weight: var(--wp--custom--font-weight--bold); 
}


.toc ul{
	list-style: none;
	padding-left: 0;
}

.project .wp-block-post-terms a{
	text-decoration: none;
	opacity: .7;
}

/*
 * Project category filter.
 *
 * Styles the Terms Query block once assets/js/project-filter.js has upgraded
 * it (`.is-enhanced`), plus the dimmed state on the projects grid.
 *
 * The bar reads as a row of tabs: labels sit on a hairline rule, and the
 * active one is ink, semibold, and marked with a heavier bar on the rule.
 */

:where(strong, b) { 
	font-weight: var(--wp--custom--font-weight--bold); 
}


.toc ul{
	list-style: none;
	padding-left: 0;
}

.project .wp-block-post-terms a{
	text-decoration: none;
	opacity: .7;
}

/*
 * Project category filter.
 *
 * Styles the Terms Query block once assets/js/project-filter.js has upgraded
 * it (`.is-enhanced`), plus the dimmed state on the projects grid.
 *
 * The bar reads as a row of tabs: labels sit on a hairline rule, and the
 * active one is ink, semibold, and marked with a heavier bar on the rule.
 */

/* ---------------------------------------------------------------- Filter bar */

.project-filter.is-enhanced .project-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 0;
	row-gap: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.project-filter.is-enhanced .project-filter__item,
.project-filter.is-enhanced .project-filter__item > * {
	margin: 0;
}

.project-filter.is-enhanced .project-filter__button {
	appearance: none;
	display: block;
	margin: 0 0 -1px;
	/* Padding sets the spacing between labels and the width of the marker. */
	padding: 0 1em 0.75em;
	border: 0;
	background: none;
	cursor: pointer;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--ui);
	letter-spacing: var(--wp--custom--letter-spacing--normal);
	text-align: center;

	color: var(--wp--preset--color--muted);
	text-decoration: none;

	box-shadow: inset 0 -0.16em 0 transparent;
	transition: color 0.2s ease, box-shadow 0.2s ease;
}

/* Reserve the semibold width so the row never shifts when a filter is set. */
.project-filter.is-enhanced .project-filter__button::after {
	content: attr( data-label );
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	font-weight: var(--wp--custom--font-weight--bold);
}

@media ( hover: hover ) {
	.project-filter.is-enhanced .project-filter__button:hover {
		color: #9C9B97; /* Fallback for browsers without color-mix(). */
		color: color-mix( in srgb, var(--wp--preset--color--muted) 68%, var(--wp--preset--color--base) );
	}
}

.project-filter.is-enhanced .project-filter__button[aria-pressed="true"] {
	color: var(--wp--preset--color--contrast);
	font-weight: var(--wp--custom--font-weight--bold);
	box-shadow: inset 0 -0.125em 0 var(--wp--preset--color--contrast);
}

/* Result count, announced to screen readers only. */
.project-filter__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset( 50% );
}

/* --------------------------------------------------------------------- Grid */

/*
 * Non-matching projects fade out, then drop from the layout so the remaining
 * ones close the gaps. The two steps are separate classes because `display`
 * cannot be transitioned reliably: project-filter.js adds `is-filtered-out`
 * to start the fade and `is-collapsed` once it has finished.
 */
.wp-block-post-template.has-project-filter > li {
	transition: opacity 0.35s ease;
}

.wp-block-post-template.has-project-filter > li.is-filtered-out {
	opacity: 0;
}

.wp-block-post-template.has-project-filter > li.is-collapsed {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.project-filter.is-enhanced .project-filter__button,
	.wp-block-post-template.has-project-filter > li {
		transition: none;
	}
}


/* ============================================================
   Lala — core/gallery
   ============================================================ */

/* ---------- Fullwidth-slider ---------- */

.wp-block-gallery.is-style-hero-slider.has-nested-images {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	overflow: auto hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 0;
	height: calc(100svh - 109px);   /* header height */
	scrollbar-width: none;
}
.wp-block-gallery.is-style-hero-slider.has-nested-images::-webkit-scrollbar {
	display: none;
}

/* :not(#individual-image) mirrors core's own specificity trick — without it
   core's width/max-width win and every slide collapses into a stripe. */
.wp-block-gallery.is-style-hero-slider.has-nested-images
figure.wp-block-image:not(#individual-image) {
	flex: 0 0 100%;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.wp-block-gallery.is-style-hero-slider.has-nested-images
figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Arrows and dots — Chromium only, degrades to plain swipe elsewhere */
@supports selector(::scroll-marker) {

	.wp-block-gallery.is-style-hero-slider.has-nested-images {
		scroll-marker-group: after;
	}

	.wp-block-gallery.is-style-hero-slider.has-nested-images::scroll-marker-group {
		position: absolute;
		bottom: 28px; left: 0; right: 0;
		display: flex; justify-content: center; gap: 10px;
		z-index: 2;
	}

	.wp-block-gallery.is-style-hero-slider.has-nested-images
	figure.wp-block-image::scroll-marker {
		content: "";
		width: 10px; height: 10px;
		border-radius: 50%;
		border: 1px solid #FAF9F6;
		background: rgba(17, 17, 17, 0.25);
	}
	.wp-block-gallery.is-style-hero-slider.has-nested-images
	figure.wp-block-image::scroll-marker:target-current {
		background: #FAF9F6;
	}

	.wp-block-gallery.is-style-hero-slider.has-nested-images::scroll-button(*) {
		position: absolute;
		top: 50%; translate: 0 -50%;
		z-index: 3;
		width: 52px; height: 52px;
		border: 0; border-radius: 50%;
		background: rgba(250, 249, 246, 0.92);
		color: #111111;
		font-size: 20px;
		cursor: pointer;
	}
	.wp-block-gallery.is-style-hero-slider.has-nested-images::scroll-button(*):disabled {
		opacity: 0.25;
	}
	.wp-block-gallery.is-style-hero-slider.has-nested-images::scroll-button(left)  { content: "\2190"; left: 3rem; }
	.wp-block-gallery.is-style-hero-slider.has-nested-images::scroll-button(right) { content: "\2192"; right: 3rem; }
}

/* Editor: don't let a viewport-tall slide take over the canvas */
.editor-styles-wrapper .wp-block-gallery.is-style-hero-slider.has-nested-images {
	height: 60vh;
}

/* ---------- Rutenett ---------- */

.wp-block-gallery.is-style-grid.has-nested-images
figure.wp-block-image:not(#individual-image) {
	aspect-ratio: 3 / 2;
}
.wp-block-gallery.is-style-grid.has-nested-images
figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}