/*
Theme Name: Heart Lake Quilts
Description: Native block theme for Heart Lake Quilts.
Version: 0.1.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: heart-lake-quilts
*/

:where(.hlq-header, .hlq-footer, .hlq-standard) {
	--hlq-shell-gutter: clamp(1rem, 4vw, 4.375rem);
	padding-inline: var(--hlq-shell-gutter);
}

.hlq-header {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	padding-inline: clamp(1rem, 5vw, 4.375rem);
}

.hlq-header .hlq-header-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: clamp(.75rem, 2vw, 2rem);
	min-height: max(8vh, 9.1375rem);
	max-width: 100rem;
	margin-inline: auto;
}

.hlq-header-brand {
	width: 9.1375rem;
}

.hlq-header-brand .wp-block-site-logo img {
	width: 100%;
	height: auto;
}

.hlq-header-brand:has(.wp-block-site-logo img) .hlq-header-brand-fallback {
	display: none;
}

.hlq-header-brand-fallback {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1;
}

.hlq-header-nav {
	justify-self: center;
	font-family: var(--wp--preset--font-family--kite-one);
	font-size: clamp(.9375rem, 1.3vw, 1.125rem);
	line-height: 1.2;
	text-transform: uppercase;
}

.hlq-header-nav .wp-block-navigation__container {
	column-gap: clamp(.875rem, 3vw, 3.875rem);
	row-gap: .75rem;
}

.hlq-header-nav a:hover,
.hlq-header-nav [aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: .25em;
}

.hlq-header .hlq-header-socials {
	gap: .3125rem;
	font-size: 1.25rem;
}

.hlq-header-socials .wp-social-link {
	color: #000;
}

.hlq-header-socials .wp-block-social-link-anchor {
	display: grid;
	place-items: center;
	min-width: 1.5rem;
	min-height: 1.5rem;
}

.hlq-header-cart {
	margin: 0;
}

.hlq-header-cart a {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	text-decoration: none;
	font-size: 0;
}

.hlq-header-cart a::before {
	content: "";
	display: block;
	width: 1.6875rem;
	height: 1.6875rem;
	background-color: currentColor;
	mask: url("assets/cart.svg") no-repeat center / contain;
}

.hlq-footer {
	margin-block-start: 5%;
	padding-block-end: 1.5rem;
}

.hlq-footer .hlq-footer-heading {
	font-family: var(--wp--preset--font-family--kite-one);
	font-size: 3.5rem;
	font-weight: 400;
	line-height: 1.2;
}

.hlq-footer-links {
	font-size: .875rem;
	line-height: 1.6;
}

.hlq-footer-credit {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: .9375rem;
	font-style: italic;
}

.hlq-standard {
	padding-block: clamp(2rem, 6vw, 5rem);
}

.hlq-standard :where(.wp-block-query, .wp-block-post-template) {
	margin-block: 1.5rem;
}

.hlq-standard .wp-block-post-template > li + li {
	margin-block-start: 1.5rem;
}

:where(.hlq-header, .hlq-footer) a:focus-visible,
.hlq-header button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.hlq-header {
		padding-inline: 4%;
	}

	.hlq-header .hlq-header-row {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.hlq-header .hlq-header-socials {
		display: none;
	}

	.hlq-footer .hlq-footer-heading {
		font-size: .9375rem;
		line-height: 1.4;
	}
}

@media (max-width: 767px) {
	.hlq-header {
		padding-inline: 6%;
	}

	.hlq-header .hlq-header-row {
		min-height: 4.6875rem;
	}

	.hlq-header-brand {
		width: min(9.375rem, 34vw);
	}

	.hlq-header-nav {
		justify-self: end;
	}

	/* Core's default mobile breakpoint is 600px; retain the site's 767px menu. */
	.hlq-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	.hlq-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.hlq-header-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--linen);
		color: var(--wp--preset--color--ink);
	}

	.hlq-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 1.25rem;
	}
}

@media (forced-colors: active) {
	.hlq-header-cart a {
		font-size: .875rem;
	}

	.hlq-header-cart a::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.hlq-header .hlq-header-row {
		min-height: 8.58rem;
	}

	.hlq-header-brand {
		width: 8.58rem;
	}
}