/*
 * Shared presentation primitives for the Crows Cupboard block theme.
 * Business behavior belongs in plugins; this file styles supported markup only.
 */

:root {
	--cc-cream: var(--wp--preset--color--cream, #f6f0e6);
	--cc-paper: var(--wp--preset--color--paper, #fefcf7);
	--cc-ink: var(--wp--preset--color--ink, #181612);
	--cc-muted: var(--wp--preset--color--muted-ink, #5d574e);
	--cc-bronze: var(--wp--preset--color--bronze, #865710);
	--cc-bronze-light: var(--wp--preset--color--bronze-light, #c9953e);
	--cc-sand: var(--wp--preset--color--sand, #ded3c1);
	--cc-control-min: var(--wp--custom--control--min, 2.75rem);
	--cc-gutter: var(--wp--custom--gutter, clamp(1rem, 3vw, 2rem));
	--cc-radius-sm: var(--wp--custom--radius--small, 0.25rem);
	--cc-radius-md: var(--wp--custom--radius--medium, 0.5rem);
	--cc-shadow-card: var(--wp--preset--shadow--card, 0 0.4rem 1.4rem rgb(24 22 18 / 9%));
	--cc-transition: var(--wp--custom--transition, 160ms ease);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	text-size-adjust: 100%;
}

body {
	overflow-wrap: anywhere;
}

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

.wp-site-blocks > footer {
	margin-block-start: auto;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	text-underline-offset: 0.17em;
	text-decoration-thickness: 0.08em;
}

a:hover {
	text-decoration-thickness: 0.12em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--cc-bronze);
	outline-offset: 3px;
}

.cc-skip-link {
	position: fixed;
	z-index: 100000;
	inset-block-start: -10rem;
	inset-inline-start: 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-ink);
	color: var(--cc-paper);
	font-weight: 700;
}

.cc-skip-link:focus {
	inset-block-start: 1rem;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"], select) {
	min-height: var(--cc-control-min);
}

:where(input, select, textarea) {
	max-width: 100%;
	border: 1px solid var(--cc-sand);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-paper);
	color: var(--cc-ink);
	font: inherit;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	padding: 0.7rem 0.8rem;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.75rem;
	border-bottom: 1px solid var(--cc-sand);
	text-align: start;
}

.cc-shell,
.cc-main {
	width: 100%;
}

.cc-main {
	padding-block: clamp(2rem, 5vw, 5rem);
}

.cc-site-header {
	position: relative;
	z-index: 20;
	margin-block-start: 0;
	border-bottom: 1px solid var(--cc-sand);
	background: var(--cc-cream);
	background: color-mix(in srgb, var(--cc-cream) 94%, white);
}

.cc-header__shell {
	display: grid !important;
	grid-template-areas:
		"brand search actions"
		"navigation navigation navigation";
	grid-template-columns: minmax(13rem, 17rem) minmax(18rem, 1fr) auto;
	column-gap: clamp(1rem, 3vw, 3rem);
	align-items: center;
	padding-block-start: clamp(0.8rem, 2vw, 1.35rem);
}

.cc-header__brand {
	grid-area: brand;
	gap: 0.8rem;
	align-items: center;
	min-width: 0;
}

.cc-header__brand .wp-block-site-logo {
	flex: 0 0 auto;
}

.cc-header__identity {
	gap: 0.25rem;
	min-width: 0;
}

.cc-header__identity .wp-block-site-title,
.cc-header__identity .wp-block-site-tagline {
	margin: 0;
}

.cc-header__identity .wp-block-site-title a {
	color: var(--cc-ink);
	text-decoration: none;
}

.cc-header__search {
	grid-area: search;
	width: min(100%, 42rem);
	min-width: 0;
	justify-self: center;
}

.cc-header__search form {
	margin: 0;
}

.cc-header__search .wc-block-product-search__fields {
	display: flex;
	min-height: var(--cc-control-min);
	align-items: stretch;
	gap: 0;
}

.cc-header__search :where(input[type="search"], input[type="text"]) {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--cc-control-min);
	border-color: var(--cc-sand);
	border-start-end-radius: 0;
	border-end-end-radius: 0;
	background: var(--cc-paper);
}

.cc-header__search :where(button, .wc-block-product-search__button) {
	position: relative;
	flex: 0 0 var(--cc-control-min);
	min-width: var(--cc-control-min);
	min-height: var(--cc-control-min);
	margin: 0;
	border-color: var(--cc-ink);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	background: var(--cc-ink);
	color: var(--cc-paper);
}

.cc-header__search :where(button, .wc-block-product-search__button) svg {
	display: none;
}

.cc-header__search :where(button, .wc-block-product-search__button)::before {
	width: 1rem;
	height: 1rem;
	border: 2px solid currentcolor;
	border-radius: 50%;
	content: "";
	transform: translate(-0.08rem, -0.08rem);
}

.cc-header__search :where(button, .wc-block-product-search__button)::after {
	position: absolute;
	width: 0.48rem;
	height: 2px;
	background: currentcolor;
	content: "";
	transform: translate(0.38rem, 0.38rem) rotate(45deg);
	transform-origin: left center;
}

.cc-header__actions {
	display: flex !important;
	grid-area: actions;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
}

.cc-header__actions :where(.wp-block-woocommerce-customer-account, .wc-block-mini-cart) {
	margin-block: 0;
}

.cc-header__actions :where(a, button) {
	display: inline-flex;
	min-width: var(--cc-control-min);
	min-height: var(--cc-control-min);
	align-items: center;
	justify-content: center;
}

.cc-primary-navigation {
	grid-area: navigation;
	width: 100%;
	min-height: var(--cc-control-min);
	margin-block-start: clamp(0.65rem, 1.5vw, 1rem);
	padding-block: 0.35rem;
	border-top: 1px solid var(--cc-sand);
	border-top: 1px solid color-mix(in srgb, var(--cc-sand) 74%, transparent);
	background: var(--cc-paper);
	background: color-mix(in srgb, var(--cc-paper) 65%, transparent);
}

.cc-primary-navigation a,
.cc-footer__navigation a {
	display: inline-flex;
	min-width: var(--cc-control-min);
	min-height: var(--cc-control-min);
	align-items: center;
	color: var(--cc-ink);
	text-decoration: none;
}

.cc-primary-navigation a:hover,
.cc-primary-navigation a[aria-current="page"],
.cc-footer__navigation a:hover,
.cc-footer__navigation a[aria-current="page"] {
	color: var(--cc-bronze);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--cc-cream);
	color: var(--cc-ink);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: 4rem;
}

.cc-site-footer {
	margin-block-start: clamp(3rem, 8vw, 7rem);
	padding-block: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
	border-top: 1px solid var(--cc-sand);
	background: color-mix(in srgb, var(--cc-sand) 28%, var(--cc-cream));
}

.cc-footer__columns {
	gap: clamp(2rem, 5vw, 5rem);
}

.cc-footer__navigation {
	align-items: flex-start;
}

.cc-hero {
	display: grid !important;
	grid-template-columns: minmax(18rem, 0.92fr) minmax(24rem, 1.45fr);
	gap: 0;
	min-height: clamp(23rem, 41vw, 35rem);
	border: 1px solid var(--cc-sand);
	border-radius: var(--cc-radius-md);
	background: var(--cc-paper);
	box-shadow: var(--cc-shadow-card);
	overflow: hidden;
}

.cc-hero__copy {
	z-index: 1;
	align-self: stretch;
	padding: clamp(2rem, 5vw, 5.5rem);
	background:
		linear-gradient(90deg, var(--cc-paper) 65%, color-mix(in srgb, var(--cc-paper) 20%, transparent)),
		radial-gradient(circle at 15% 20%, rgb(201 149 62 / 10%), transparent 48%);
}

.cc-hero__copy h1 {
	max-width: 12ch;
	margin-block: 0;
}

.cc-hero__copy p {
	max-width: 38ch;
}

.cc-hero__visual {
	position: relative;
	min-height: 18rem;
	background:
		radial-gradient(circle at 68% 38%, rgb(201 149 62 / 32%) 0 10%, transparent 10.5%),
		radial-gradient(circle at 45% 60%, rgb(24 22 18 / 20%) 0 13%, transparent 13.5%),
		linear-gradient(135deg, #cfc1aa 0%, #877560 44%, #2d2923 100%);
}

.cc-hero__visual::before,
.cc-hero__visual::after {
	position: absolute;
	content: "";
	inset: auto 8% 12% 10%;
	height: 1px;
	background: rgb(254 252 247 / 48%);
}

.cc-hero__visual::after {
	inset: 14% auto 12% 18%;
	width: 1px;
	height: auto;
}

.cc-home__content,
.cc-home__journal {
	padding-block-start: clamp(2rem, 5vw, 4.5rem);
}

.cc-query {
	width: 100%;
}

.cc-card-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.65rem);
	container-type: inline-size;
}

.cc-card {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: 0.65rem;
	padding: 0 1rem 1.1rem;
	border: 1px solid var(--cc-sand);
	border-radius: var(--cc-radius-md);
	background: var(--cc-paper);
	overflow: hidden;
	transition: border-color var(--cc-transition), box-shadow var(--cc-transition), transform var(--cc-transition);
}

.cc-card:hover {
	border-color: var(--cc-bronze-light);
	box-shadow: var(--cc-shadow-card);
	transform: translateY(-2px);
}

.cc-card > .wp-block-post-featured-image {
	width: calc(100% + 2rem);
	margin-inline: -1rem;
	margin-block: 0 0.2rem;
	border-radius: 0;
}

.cc-card .wp-block-post-title,
.cc-card .wp-block-post-excerpt,
.cc-card .wp-block-post-date {
	margin-block: 0;
}

.cc-card .wp-block-post-title a {
	color: var(--cc-ink);
	text-decoration: none;
}

.cc-card .wp-block-post-date {
	margin-block-start: auto;
}

.cc-archive__header {
	margin-block-end: clamp(2rem, 4vw, 4rem);
	padding-block-end: 1.5rem;
	border-bottom: 1px solid var(--cc-sand);
}

.cc-article {
	max-width: var(--wp--custom--line-length, 72ch);
}

.cc-article > .alignwide,
.cc-page > .alignwide {
	width: min(78rem, calc(100vw - (2 * var(--wp--preset--spacing--40))));
	max-width: none;
	margin-inline: 50%;
	transform: translateX(-50%);
}

.cc-article__terms,
.cc-article__tags,
.cc-article__meta {
	color: var(--cc-muted);
	font-size: var(--wp--preset--font-size--small);
}

.cc-article__terms a,
.cc-article__tags a {
	color: var(--cc-bronze);
}

.cc-post-navigation {
	gap: 1.5rem;
}

.cc-post-navigation > * {
	max-width: 48%;
}

.cc-search-list {
	display: grid;
	gap: 0;
}

.cc-search-result {
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--cc-sand);
}

.cc-search-result > * {
	margin-block: 0.4rem;
}

.cc-empty-state {
	max-width: 48rem;
	min-height: 42vh;
	justify-content: center;
	padding-block: clamp(3rem, 9vw, 8rem);
	text-align: center;
}

.cc-empty-state .wp-block-search {
	width: min(100%, 38rem);
	margin-inline: auto;
	text-align: start;
}

.wp-element-button,
.wp-block-button__link,
.woocommerce :where(a.button, button.button, input.button, #respond input#submit) {
	transition: background-color var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition), transform var(--cc-transition);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce :where(a.button, button.button, input.button, #respond input#submit):hover {
	border-color: var(--cc-bronze);
	background: var(--cc-bronze);
	color: var(--cc-paper);
	transform: translateY(-1px);
}

/* WooCommerce receives styling only; product behavior remains in plugins. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count {
	color: var(--cc-muted);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.65rem);
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 0 1rem;
	border: 1px solid var(--cc-sand);
	border-radius: var(--cc-radius-md);
	background: var(--cc-paper);
	overflow: hidden;
}

.woocommerce ul.products li.product :where(.woocommerce-loop-product__title, .price, .button) {
	margin-inline: 1rem;
}

.woocommerce ul.products li.product .price {
	color: var(--cc-ink);
	font-weight: 700;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.9fr);
	gap: clamp(1.5rem, 4vw, 4rem);
}

.woocommerce div.product :where(div.images, div.summary) {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce div.product div.images img {
	border-radius: var(--cc-radius-md);
}

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
}

.woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	border-top-color: var(--cc-bronze);
	background: var(--cc-paper);
	color: var(--cc-ink);
}

.woocommerce table.shop_table {
	border-color: var(--cc-sand);
	border-radius: var(--cc-radius-md);
	background: var(--cc-paper);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity .qty {
	border: 1px solid var(--cc-sand);
	background: var(--cc-paper);
	color: var(--cc-ink);
}

@container (max-width: 44rem) {
	.cc-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 64rem) {
	.cc-header__shell {
		grid-template-columns: minmax(12rem, 15rem) minmax(16rem, 1fr) auto;
		column-gap: clamp(0.75rem, 2vw, 1.5rem);
	}

	.cc-header__brand .wp-block-site-logo img {
		max-width: 3.75rem;
	}

	.cc-primary-navigation .wp-block-navigation__container {
		gap: clamp(0.75rem, 2vw, 1.5rem);
	}

	.cc-hero {
		grid-template-columns: minmax(16rem, 0.9fr) minmax(19rem, 1.1fr);
	}

	.cc-card-grid,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
	}
}

@media (max-width: 52rem) {
	.cc-header__shell {
		grid-template-areas:
			"brand actions"
			"search search"
			"navigation navigation";
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 0.75rem;
		padding-block-start: 0.75rem;
	}

	.cc-header__identity .wp-block-site-tagline {
		display: none;
	}

	.cc-header__search {
		width: 100%;
	}

	.cc-primary-navigation {
		margin-block-start: 0;
	}
}

@media (max-width: 48rem) {
	.cc-header__brand .wp-block-site-logo img {
		max-width: 3.25rem;
	}

	.cc-header__identity .wp-block-site-title {
		font-size: clamp(1.35rem, 6vw, 1.8rem);
	}

	.cc-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.cc-hero__copy {
		padding: clamp(1.5rem, 7vw, 3rem);
	}

	.cc-hero__visual {
		min-height: clamp(12rem, 55vw, 21rem);
		grid-row: 1;
	}

	.cc-card-grid,
	.woocommerce ul.products,
	.woocommerce div.product {
		grid-template-columns: 1fr;
	}

	.cc-article > .alignwide,
	.cc-page > .alignwide {
		width: 100%;
		margin-inline: 0;
		transform: none;
	}

	.cc-footer__columns {
		gap: 2rem;
	}

	.cc-post-navigation {
		align-items: flex-start;
		flex-direction: column;
	}

	.cc-post-navigation > * {
		max-width: 100%;
	}
}

@media (max-width: 37.5rem) {
	.cc-header__shell {
		grid-template-areas:
			"brand brand brand"
			"navigation actions actions"
			"search search search";
		grid-template-columns: var(--cc-control-min) minmax(0, 1fr) auto;
		column-gap: 0.5rem;
		row-gap: 0.55rem;
		padding-block: 0.5rem 0.75rem;
	}

	.cc-header__brand {
		width: min(100%, 12rem);
		justify-self: center;
		justify-content: center;
		gap: 0.35rem;
	}

	.cc-header__brand .wp-block-site-logo {
		display: none;
	}

	.cc-header__identity {
		text-align: center;
	}

	.cc-header__identity .wp-block-site-title {
		font-size: clamp(1.1rem, 5vw, 1.45rem);
		line-height: 1;
	}

	.cc-header__actions {
		grid-column: 2 / -1;
		width: auto;
		justify-self: end;
		gap: 0;
	}

	.cc-header__account,
	.cc-header__favorite-slot,
	.cc-header__cart {
		display: grid !important;
		visibility: visible;
	}

	.cc-header__search {
		justify-self: stretch;
	}

	.cc-primary-navigation {
		width: var(--cc-control-min);
		min-width: var(--cc-control-min);
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		justify-self: start;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-open {
		display: inline-flex;
		min-width: var(--cc-control-min);
		min-height: var(--cc-control-min);
		align-items: center;
		justify-content: center;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		background:
			linear-gradient(180deg, rgb(254 252 247 / 96%), rgb(246 240 230 / 100%)),
			var(--cc-cream);
		color: var(--cc-ink);
		scrollbar-gutter: stable;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-close,
	.cc-primary-navigation .wp-block-navigation__responsive-dialog {
		width: 100%;
		min-height: 100%;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-close {
		inset-block-start: 0.75rem;
		inset-inline-end: max(0.75rem, env(safe-area-inset-right));
		display: inline-flex;
		min-width: var(--cc-control-min);
		min-height: var(--cc-control-min);
		align-items: center;
		justify-content: center;
		border: 1px solid var(--cc-sand);
		border-radius: 999px;
		background: var(--cc-paper);
		color: var(--cc-ink);
		box-shadow: 0 0.2rem 0.7rem rgb(24 22 18 / 8%);
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content {
		width: min(100%, 28rem);
		margin-inline: auto;
		padding:
			max(4.75rem, calc(env(safe-area-inset-top) + 4rem))
			max(1rem, env(safe-area-inset-right))
			max(2rem, env(safe-area-inset-bottom))
			max(1rem, env(safe-area-inset-left)) !important;
		align-items: stretch !important;
		gap: 0.25rem;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		width: 100%;
		align-items: stretch !important;
		/* Leave the 3px focus ring and its offset clear of the next top-level item. */
		gap: 0.625rem !important;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		width: 100%;
		align-items: stretch;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		width: 100%;
		min-width: var(--cc-control-min);
		min-height: var(--cc-control-min);
		justify-content: flex-start;
		padding: 0.65rem 0.75rem;
		border-block-end: 1px solid color-mix(in srgb, var(--cc-sand) 76%, transparent);
		font-weight: 650;
		line-height: 1.25;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		min-width: var(--cc-control-min);
		min-height: var(--cc-control-min);
		align-items: center;
		justify-content: center;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 0 0 0.35rem 0.75rem !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
		display: none !important;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex !important;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-inline-start: 1rem;
		color: var(--cc-muted);
		font-size: 0.92rem;
		font-weight: 500;
	}

	.cc-primary-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
	.cc-primary-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible {
		border-radius: var(--cc-radius-sm);
		background: color-mix(in srgb, var(--cc-bronze-light) 15%, transparent);
		color: var(--cc-bronze);
	}
}

@media (max-width: 24rem) {
	.cc-header__identity .wp-block-site-title {
		font-size: 1.05rem;
	}

	.cc-card {
		padding-inline: 0.75rem;
	}

	.cc-card > .wp-block-post-featured-image {
		width: calc(100% + 1.5rem);
		margin-inline: -0.75rem;
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: more) {
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline-width: 4px;
		outline-color: currentColor;
	}

	.cc-card,
	.cc-hero,
	.woocommerce ul.products li.product {
		border-color: var(--cc-ink);
	}
}