/*
Theme Name: Woodbridge Hill Weaving
Description: Portfolio, journal and studio-visit theme for Woodbridge Hill Weaving. Child theme for Twenty Twenty-Five.
Template: twentytwentyfive
Version: 0.9.6
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: loom
*/

/* ---- Notice banner ---- */
.loom-notice {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-2);
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 0.75rem 1rem;
}

/* ---- Logo: ball of yarn, name as text, tail running underneath ----
   The logo takes all the header space left of the menu. The name is sized
   to fit that space (about 15.5em wide including the ball), capped on big
   screens, and the tail runs on past the name into any room left over. */
.loom-header > p:has(.loom-logo) {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	container-type: inline-size;
}
.loom-logo {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	min-height: 2.8em;
	padding: 0 clamp(0.3em, 100cqi - 15.4em, 3em) 0.68em 3.1em;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--brand);
	font-size: min(2.6rem, 100cqi / 15.5);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-decoration: none !important;
	white-space: nowrap;
}
.loom-logo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/images/yarn.png") left bottom / auto 2.8em no-repeat;
	/* The tail fades out at its end. */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.loom-header {
	flex-wrap: nowrap !important;
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 600px) and (max-width: 999px) {
	/* Medium widths: the title takes the full width, menu items on a row below. */
	.loom-header {
		flex-wrap: wrap !important;
		row-gap: 0.5rem;
	}
	.loom-header > p:has(.loom-logo) {
		flex-basis: 100%;
	}
	.loom-header > .wp-block-navigation {
		flex-basis: 100%;
		justify-content: center !important;
	}
	.loom-header .wp-block-navigation__container {
		justify-content: center;
	}
}
@media (max-width: 599px) {
	/* On phones the logo runs right up to the menu button. */
	.loom-header {
		gap: 0.75rem;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.loom-logo {
		padding-right: 0;
	}
}

/* ---- Header ---- */
.loom-header .wp-block-navigation-item__content:hover,
.loom-header .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 1px;
}

/* ---- Home: headline, carousel, intro ---- */
.loom-home-top .loom-home-headline {
	margin: 0 auto var(--wp--preset--spacing--40);
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.55rem, 3.6vw, 2.6rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}
.loom-intro {
	margin: var(--wp--preset--spacing--50) auto var(--wp--preset--spacing--40);
	text-align: center;
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	line-height: 1.6;
	color: var(--wp--preset--color--accent-6);
	text-wrap: pretty;
}

.loom-carousel {
	position: relative;
}
.loom-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	background: var(--wp--preset--color--oat);
}
.loom-carousel__track::-webkit-scrollbar {
	display: none;
}
.loom-carousel__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}
.loom-carousel__slide {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	aspect-ratio: 16 / 9;
	scroll-snap-align: start;
}
.loom-carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.loom-carousel__slide figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem 1.25rem 1rem;
	background: linear-gradient(to top, rgba(43, 39, 36, 0.6), transparent);
	color: #fff;
	font-size: 0.9rem;
}
.loom-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(251, 248, 242, 0.85);
	color: var(--wp--preset--color--contrast);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
}
.loom-carousel:hover .loom-carousel__arrow,
.loom-carousel__arrow:focus-visible {
	opacity: 1;
}
.loom-carousel__arrow.is-prev {
	left: 1rem;
}
.loom-carousel__arrow.is-next {
	right: 1rem;
}
.loom-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
}
.loom-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-5);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.loom-carousel__dot[aria-current] {
	background: var(--wp--preset--color--contrast);
	transform: scale(1.25);
}
@media (hover: none) {
	.loom-carousel__arrow {
		display: none;
	}
}
@media (max-width: 600px) {
	.loom-carousel__slide {
		aspect-ratio: 4 / 3;
	}
}

/* ---- Eyebrow labels ---- */
.loom-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

/* ---- Image grids ---- */
.loom-grid .wp-block-post-featured-image {
	overflow: hidden;
	background: var(--wp--preset--color--oat);
	margin-bottom: 0.75rem;
}
.loom-grid .wp-block-post-featured-image img {
	transition: transform 0.6s ease;
}
.loom-grid .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.loom-grid .wp-block-post-title {
	margin-top: 0;
}
/* ---- Filter links ---- */
.loom-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.loom-filter a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.85rem;
	text-decoration: none;
}
.loom-filter a:hover,
.loom-filter .is-current a {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-2);
}

/* ---- Single work ---- */
@media (min-width: 782px) {
	.loom-work-info {
		position: sticky;
		top: 2rem;
	}
}
.loom-details {
	margin: 0 0 1.5rem;
	border-top: 1px solid var(--wp--preset--color--accent-5);
}
.loom-details > div {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-5);
}
.loom-details dt {
	color: var(--wp--preset--color--accent-4);
	font-size: 0.85rem;
}
.loom-details dd {
	margin: 0;
}
.loom-summary {
	margin: 0.75rem 0 1.5rem;
}
.loom-summary p {
	margin: 0;
}
.loom-summary-status {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}
.loom-summary-status.is-sold,
.loom-summary-status.is-sold-out {
	color: var(--wp--preset--color--accent-1);
}
.loom-summary-price {
	margin-top: 0.25rem !important;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.6rem;
	line-height: 1.3;
}
.loom-summary-category {
	margin-top: 0.25rem !important;
	font-size: 0.95rem;
	color: var(--wp--preset--color--accent-6);
}
.loom-summary-category a {
	color: inherit;
}
.loom-work-info .wp-block-post-content {
	margin-bottom: 1.5rem;
}
.loom-price {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--accent-6);
	font-size: 0.9rem;
}
.loom-price.is-sold,
.loom-feature-card__price.is-sold {
	color: var(--wp--preset--color--accent-1);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---- Journal article ---- */
.loom-article .wp-block-post-content {
	font-size: 1.125rem;
}
.loom-article .wp-block-post-content figure {
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.loom-article .wp-block-post-content img {
	height: auto;
}
@media (max-width: 600px) {
	.loom-article .wp-block-post-content {
		font-size: 1.0625rem;
	}
}

/* ---- Hours, address, contact ---- */
.loom-hours {
	width: 100%;
	max-width: 26rem;
	border-collapse: collapse;
}
.loom-hours th,
.loom-hours td {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-5);
	text-align: left;
	font-weight: 400;
}
.loom-hours td {
	text-align: right;
}
.loom-hours .is-today th,
.loom-hours .is-today td {
	font-weight: 600;
}
.loom-hours .is-today th::after {
	content: " · today";
	color: var(--wp--preset--color--accent-1);
	font-size: 0.8em;
	font-weight: 500;
}
.loom-hours.is-compact th,
.loom-hours.is-compact td {
	padding: 0.2rem 0;
	border: 0;
}
.loom-hours.is-compact td {
	text-align: left;
	padding-left: 1rem;
}
.loom-hours-note {
	margin-top: 0.75rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-6);
}
.loom-status {
	display: flex; /* A block, so it lines up with the page's centred column. */
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-weight: 600;
}
.loom-status::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-4);
}
.loom-status.is-open::before {
	background: #4f7d4a;
}
.loom-address {
	font-style: normal;
	margin-bottom: 0.5rem;
}
.loom-directions {
	margin-top: 0;
}
.loom-map {
	margin-top: var(--wp--preset--spacing--50);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--accent-5);
	background: var(--wp--preset--color--oat);
}
.loom-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 600px) {
	.loom-map {
		aspect-ratio: 4 / 5;
	}
}
.loom-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}
.loom-contact li + li {
	margin-top: 0.25rem;
}

/* ---- Studio shortcut (only when logged in) ---- */
.loom-studio-link {
	position: fixed;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 100;
	display: flex;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	box-shadow: 0 6px 20px rgba(43, 39, 36, 0.25);
	font-size: 0.85rem;
	font-weight: 600;
}
.loom-studio-link a {
	padding: 0.7rem 1.1rem;
	color: var(--wp--preset--color--accent-2) !important;
	text-decoration: none;
}
.loom-studio-link a + a {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.loom-studio-link a:hover {
	background: var(--wp--preset--color--accent-1);
}

/* ---- Footer ---- */
.loom-footer {
	font-size: 0.9rem;
}
.loom-footer h2 {
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}
.loom-footer a {
	color: var(--wp--preset--color--contrast);
}

/* ---- "Open in Maps" choice on iPhone / iPad ---- */
.loom-directions {
	position: relative;
}
.loom-maps-menu {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 12rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: 12px;
	background: var(--wp--preset--color--accent-2);
	box-shadow: 0 10px 30px rgba(43, 39, 36, 0.18);
}
.loom-maps-menu a {
	padding: 0.85rem 1.1rem;
	color: var(--wp--preset--color--contrast) !important;
	font-size: 1rem;
	text-decoration: none !important;
}
.loom-maps-menu a + a {
	border-top: 1px solid var(--wp--preset--color--accent-5);
}

/* "Hidden from public" reminder on the Studio button, while maintenance mode is on. */
.loom-studio-link__hidden {
	padding: 0.7rem 1.1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-2);
}

/* ---- Category description (only output when there is one) ---- */
.wp-block-term-description {
	max-width: 42rem;
	/* Starts where the page's centred 1240px column starts – in line with the
	   title and the first photo – rather than centring itself. */
	margin-left: max(0px, calc((100% - 1240px) / 2)) !important;
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--accent-6);
	font-size: 1.1rem;
	line-height: 1.65;
}
.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Two photos side by side (About page, journal): equal squares, stacked on phones. */
.loom-pair {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* About page: larger photo captions. */
.loom-about .wp-element-caption {
	margin-top: 0.6rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-6);
}

/* About page: text lines up with the title and the left-hand photo,
   rather than sitting in a centred column. */
.loom-about .wp-block-post-content > :not(.alignwide):not(.alignfull) {
	margin-left: 0 !important;
	max-width: 46rem;
}

/* ---- Products page: one photo tile per category ---- */
.loom-cat-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 across on desktop */
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--40);
}
.loom-cat-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--oat);
	text-decoration: none !important;
}
.loom-cat-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.loom-cat-tile:hover img,
.loom-cat-tile:focus-visible img {
	transform: scale(1.04);
}
.loom-cat-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(43, 39, 36, 0.65), rgba(43, 39, 36, 0) 55%);
}
.loom-cat-tile__name {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1rem;
	z-index: 1;
	color: #fff;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	line-height: 1.15;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 900px) {
	.loom-cat-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.loom-cat-tiles {
		grid-template-columns: 1fr;
	}
}
/* No photo yet: the ball of yarn on linen. */
.loom-cat-tile__ph {
	position: absolute;
	inset: 0;
	background: url("assets/images/icon-192.png") center 40% / 34% auto no-repeat, var(--wp--preset--color--oat);
	opacity: 0.9;
}
.loom-cat-tile.is-placeholder::after {
	background: linear-gradient(to top, rgba(43, 39, 36, 0.55), rgba(43, 39, 36, 0) 50%);
}
.loom-cat-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

/* "← All products   Shawls" above the product name. */
.loom-breadcrumb__cat {
	margin-left: 1.25rem;
}
.loom-breadcrumb__cat a {
	color: var(--wp--preset--color--accent-4);
}

/* ---- Home page built from blocks (Studio → Home page) ---- */
.loom-home > .wp-block-heading:not(.loom-home-headline),
.loom-home > p {
	text-align: center;
}
.loom-home > p {
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	line-height: 1.6;
	color: var(--wp--preset--color--accent-6);
	text-wrap: pretty;
}
.loom-home .loom-home-headline {
	margin: 0 auto var(--wp--preset--spacing--40);
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.55rem, 3.6vw, 2.6rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: center;
	text-wrap: balance;
}
.loom-home > .loom-carousel {
	margin-bottom: var(--wp--preset--spacing--50);
}
.loom-home > .wp-block-image {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}
.loom-home > .wp-block-buttons {
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ---- Products and From the journal blocks (home page and journal
   articles; how many and size are set in the Studio) ---- */
.loom-feature {
	margin-top: var(--wp--preset--spacing--60) !important;
	margin-bottom: var(--wp--preset--spacing--60) !important;
}
.loom-feature__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin-bottom: var(--wp--preset--spacing--40);
}
.loom-feature__head h2,
.loom-feature__head p {
	margin: 0;
}
.loom-feature-grid {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
}
.loom-feature-grid.is-size-xs { --cols: 8; gap: 1rem 0.75rem; }
.loom-feature-grid.is-size-s  { --cols: 6; gap: 1.25rem 1rem; }
.loom-feature-grid.is-size-m  { --cols: 4; }
.loom-feature-grid.is-size-l  { --cols: 3; gap: 2rem 1.5rem; }
@media (max-width: 900px) {
	.loom-feature-grid.is-size-xs { --cols: 6; }
	.loom-feature-grid.is-size-s  { --cols: 4; }
	.loom-feature-grid.is-size-m  { --cols: 3; }
	.loom-feature-grid.is-size-l  { --cols: 2; }
}
@media (max-width: 560px) {
	.loom-feature-grid.is-size-xs { --cols: 4; }
	.loom-feature-grid.is-size-s  { --cols: 3; }
	.loom-feature-grid.is-size-m  { --cols: 2; }
	.loom-feature-grid.is-size-l  { --cols: 1; }
}
.loom-feature-card {
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
}
.loom-feature-card__img {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: 0.6rem;
	background: var(--wp--preset--color--oat);
}
.is-posts .loom-feature-card__img {
	aspect-ratio: 3 / 2;
}
.loom-feature-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.loom-feature-card:hover .loom-feature-card__img img {
	transform: scale(1.03);
}
.loom-feature-card__date {
	margin-bottom: 0.2rem;
	color: var(--wp--preset--color--accent-6);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.loom-feature-card__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	line-height: 1.25;
}
.loom-feature-card__price {
	margin-top: 0.15rem;
	color: var(--wp--preset--color--accent-6);
	font-size: 0.9rem;
}
.loom-feature-card__excerpt {
	margin-top: 0.35rem;
	color: var(--wp--preset--color--accent-6);
	font-size: 0.95rem;
	line-height: 1.5;
}
.is-size-m .loom-feature-card__name  { font-size: 1.1rem; }
.is-size-s .loom-feature-card__name  { font-size: 0.95rem; }
.is-size-xs .loom-feature-card__name { font-size: 0.8rem; }
.is-size-xs .loom-feature-card__price,
.is-size-s .loom-feature-card__price,
.is-size-xs .loom-feature-card__date,
.is-size-s .loom-feature-card__date { font-size: 0.75rem; }

/* Carousels inside a journal article. */
.loom-article .loom-carousel {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}