/*
Theme Name: Jemma Woolmore
Theme URI: 
Author: kc
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-woolmore
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;
}


/* ============================================================
   Jemma - smooth scrolling
   ============================================================ */

: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;
}


/* ============================================================
   Jemma - smooth scrolling
   ============================================================ */

html {
	scroll-behavior: smooth;
}

/*
 * Without this an anchor target sits flush against the top edge of the
 * viewport. The header is not sticky, so nothing is covered -- this is purely
 * so the target has air above it when it is jumped to.
 *
 * `:target` rather than a heading selector: on /services/ the ids sit on the
 * section groups that wrap each heading, not on the headings themselves, and
 * that is up to whoever writes the content. This matches whatever the anchor
 * actually points at.
 */
:target {
	scroll-margin-top: var( --wp--preset--spacing--60 );
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}


/* ============================================================
   Jemma - core/navigation: current page and current section
   ============================================================ */

.wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	font-weight: var(--wp--custom--font-weight--regular);
	text-decoration: none;
}

/* Reserve the semibold width so the menu never shifts between pages. */
.wp-block-navigation .wp-block-navigation-item__content[data-label]::after {
	content: attr( data-label );
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	/* font-weight: var(--wp--custom--font-weight--bold);*/
}

.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .wp-block-navigation-item__content[aria-current="true"],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	/* font-weight: var(--wp--custom--font-weight--bold);*/
	text-decoration: underline;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;
}


/* ---------------------------------------------------------------- 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 */

.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;
	}
}


/* ============================================================
   Jemma - team grid
   ============================================================ */

 @media ( max-width: 1024px ) {

	html body {
		--wp--style--root--padding-right: var( --wp--preset--spacing--50 );
		--wp--style--root--padding-left: var( --wp--preset--spacing--50 );
	}

	.wp-block-group.projects .wp-block-post-template{
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 1.5rem;
	}

	.wp-block-group.team.is-layout-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 1.5rem;
	}

	.wp-block-group.text-grid.is-layout-grid,
	.wp-block-group.alignwide.is-layout-grid:not( .team ) {
		grid-template-columns: 1fr;
		row-gap: var( --wp--preset--spacing--70 );
	}
}

@media ( max-width: 640px ) {

	.project-filter.is-enhanced .project-filter__list {
		row-gap: 0.9em;
	}

	.project-filter.is-enhanced .project-filter__button {
		padding-bottom: 0.45em;
	}
	.wp-block-group.projects .wp-block-post-template{
		grid-template-columns: repeat( 1, minmax( 0, 1fr ) );
		gap: 1rem;
	}

	.wp-block-group.team.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 1rem;
	}

	footer.wp-block-template-part{
		div > div.is-content-justification-space-between{
			flex-direction: column;
		}
	}
}


/* ============================================================
   Jemma - Carousel Block plugin
   ============================================================ */

.wp-block-cb-carousel-v2.alignfull,
.wp-block-cb-carousel-v2.alignfull.cb-hero-slider {
	--wp--custom--carousel-block--navigation-alignfull-color: var( --wp--preset--color--base );
	--wp--custom--carousel-block--navigation-sides-offset: var( --wp--preset--spacing--50 );
	--wp--custom--carousel-block--pagination-bottom: var( --wp--preset--spacing--50 );
	--wp--custom--carousel-block--pagination-bullet-active-color: var( --wp--preset--color--base );
	--wp--custom--carousel-block--pagination-bullet-inactive-color: var( --wp--preset--color--base );
	--wp--custom--carousel-block--pagination-bullet-inactive-hover-color: var( --wp--preset--color--base );
}


/* ============================================================
   Jemma - sticky footer
   ============================================================ */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.wp-site-blocks > :not( header ):not( footer ) {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	margin-top: 0;
}


/* ============================================================
   Jemma - project cards: thumbnail zoom on hover
   ============================================================ */


:where( .project, .wp-block-group.projects .wp-block-post-template > li )
	.wp-block-post-featured-image {
	overflow: hidden;
}

:where( .project, .wp-block-group.projects .wp-block-post-template > li )
	.wp-block-post-featured-image img {
	display: block;
	transition: transform 0.6s cubic-bezier( 0.2, 0, 0.2, 1 );
}

@media ( hover: hover ) {
	:is( .project, .wp-block-group.projects .wp-block-post-template > li ):is( :hover, :focus-within )
		.wp-block-post-featured-image img {
		transform: scale( 1.04 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	:where( .project, .wp-block-group.projects .wp-block-post-template > li )
		.wp-block-post-featured-image img {
		transition: none;
	}

	:is( .project, .wp-block-group.projects .wp-block-post-template > li ):is( :hover, :focus-within )
		.wp-block-post-featured-image img {
		transform: none;
	}
}