/* Header/footer chrome is page-level, viewport-driven layout (sticky behaviour, real
   touch-target sizing at real device widths) rather than a component reused at
   arbitrary container widths, so breakpoints here stay viewport `@media` rather than
   `@container` — see homepage.css for where `@container` earns its keep instead. */
@layer components {
	/* Utility bar */
	.utility-bar {
		background: var(--void);
		color: var(--on-dark);
		block-size: var(--utility-h);
		display: flex;
		align-items: center;

		@media (width <= 767px) {
			block-size: 38px;
		}
	}
	.utility-bar__row {
		display: flex;
		align-items: center;
	}
	.utility-bar__left {
		display: flex;
		gap: 26px;
		align-items: center;
		font-weight: 500;
		font-size: 12.5px;
		letter-spacing: 0.02em;

		a {
			color: var(--on-dark);

			&:hover {
				color: var(--on-dark);
			}
		}
	}
	.utility-bar__muted {
		color: oklch(100% 0 0 / 50%);
	}
	.utility-bar__email,
	.utility-bar__note {
		@media (width <= 767px) {
			display: none;
		}
	}

	/* Header */
	.site-header {
		position: sticky;
		inset-block-start: 0;
		z-index: 50;
		background: var(--card);
		border-block-end: 1px solid var(--line);
	}
	.site-header__row {
		block-size: var(--header-h);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 32px;

		@media (width <= 767px) {
			block-size: var(--header-h-mobile);
		}
	}
	.site-logo {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: none;
		color: var(--ink);

		&:hover {
			color: var(--ink);
		}

		@media (width <= 767px) {
			min-inline-size: 0;

			.site-logo__mark {
				inline-size: 40px;
				block-size: 40px;
			}
			.site-logo__wordmark {
				font-size: 18px;
			}
			.site-logo__tagline {
				display: none;
			}
		}
	}
	.site-logo__mark {
		object-fit: contain;
		flex: none;
	}
	.site-logo__type {
		display: grid;
		gap: 3px;
	}
	.site-logo__wordmark {
		font-family: var(--mark);
		font-weight: 700;
		font-size: 24px;
		line-height: 1;
		letter-spacing: 0.02em;
		color: var(--signal);

		.site-logo--footer & {
			color: var(--signal-l);
			font-size: 30px;
		}
	}
	.site-logo__tagline {
		font-weight: 600;
		font-size: 9.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ink-3);

		.site-logo--footer & {
			color: oklch(100% 0 0 / 55%);
		}
	}

	.site-nav__list {
		display: flex;
		gap: 2px;
		align-items: center;
		block-size: 100%;
		white-space: nowrap;

		a {
			color: var(--ink);
			font-weight: 600;
			font-size: 14.5px;
			padding-inline: 16px;
			block-size: 100%;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			border-block-end: 3px solid transparent;
			transition: border-color 150ms ease-out;

			&:hover {
				border-block-end-color: var(--signal);
				color: var(--ink);
			}
		}
		.current-menu-item > a {
			border-block-end-color: var(--signal);
			color: var(--ink);
		}
	}
	.nav-badge {
		font-weight: 700;
		font-size: 9.5px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		background: var(--signal);
		color: var(--on-dark);
		padding: 3px 6px;
	}

	.site-header__actions {
		display: flex;
		align-items: center;
		gap: 10px;
		flex: none;
	}
	.icon-btn {
		inline-size: 46px;
		block-size: 46px;
		border: 1px solid var(--line);
		background: var(--card);
		color: var(--ink-2);
		display: grid;
		place-items: center;
		cursor: pointer;
		transition:
			border-color 150ms ease-out,
			color 150ms ease-out;

		&:hover {
			border-color: var(--ink);
			color: var(--ink);
		}
		&.burger {
			display: none;
			border-color: var(--void);
			background: var(--void);
			color: var(--on-dark);

			&:hover {
				border-color: var(--void);
				color: var(--on-dark);
			}
		}
	}

	.search-form {
		display: flex;
		border: 1px solid var(--ink);
		block-size: 52px;
		max-inline-size: 560px;
	}
	.search-form__icon {
		inline-size: 50px;
		flex: none;
		display: grid;
		place-items: center;
		color: var(--ink-2);
	}
	.search-form__input {
		flex: 1;
		border: none;
		background: transparent;
		font-family: var(--sans);
		font-weight: 600;
		font-size: 16px;
		color: var(--ink);
		min-inline-size: 0;

		&:focus {
			outline: none;
		}
	}
	.search-form__submit {
		flex: none;
		border: none;
		border-inline-start: 1px solid var(--line);
		background: var(--void);
		color: var(--on-dark);
		font-family: var(--sans);
		font-weight: 700;
		font-size: 14.5px;
		padding-inline: 20px;
		cursor: pointer;

		&:hover {
			background: var(--signal);
		}
	}

	.search-panel {
		border-block-start: 1px solid var(--line);
		background: var(--card);
		padding-block: 20px;
	}

	@media (width <= 1023px) {
		.site-nav,
		.site-header__cta {
			display: none;
		}
		.icon-btn.burger {
			display: grid;
		}
	}

	/* Mobile nav dropdown — inline panel below the sticky header, not a full-screen
	   overlay, matching the handoff's lightweight `.mobilenav` pattern. */
	.mobile-menu {
		border-block-start: 1px solid var(--line);
		background: var(--card);
		padding: 12px 20px 20px;

		&[hidden] {
			display: none;
		}
	}
	.mobile-menu__nav {
		display: grid;

		li a {
			display: flex;
			align-items: center;
			gap: 8px;
			color: var(--ink);
			font-weight: 600;
			font-size: 16px;
			padding: 12px 4px;
			border-block-end: 1px solid var(--line-2);
		}
	}
	.mobile-menu__footer {
		display: grid;
		padding-block-start: 14px;
	}

	/* Footer */
	.site-footer {
		background: var(--void);
		color: var(--on-dark);
	}
	.site-footer__hatch {
		block-size: 8px;
		background: var(--hatch);
	}
	.site-footer__grid {
		display: grid;
		grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.2fr);
		gap: 56px;
		padding-block: 64px 48px;
		border-block-end: 1px solid oklch(100% 0 0 / 14%);

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}
	.site-footer__about {
		display: grid;
		gap: 22px;
		align-content: start;

		p {
			margin: 0;
			font-size: 15px;
			line-height: 1.65;
			color: oklch(100% 0 0 / 60%);
			max-inline-size: 38ch;
		}
	}
	.site-footer__contact {
		display: grid;
		gap: 10px;
		max-inline-size: 340px;

		> a:not(.site-footer__phone, .btn) {
			font-size: 15px;
			color: oklch(100% 0 0 / 70%);

			&:hover {
				color: var(--on-dark);
			}
		}
		.btn {
			block-size: 52px;
			font-size: 15.5px;
			margin-block-start: 8px;

			&.btn--solid:hover {
				background: var(--signal-l);
			}
		}
	}
	.site-footer__phone {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 30px;
		letter-spacing: -0.02em;
		line-height: 1.1;
		color: var(--on-dark);

		&:hover {
			color: var(--signal-l);
		}
	}

	.site-footer__links {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
		align-content: start;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
			gap: 24px;
		}
	}
	.footer-col {
		display: grid;
		gap: 13px;
		align-content: start;

		li {
			list-style: none;
		}
		a {
			color: oklch(100% 0 0 / 78%);
			font-size: 14.5px;

			&:hover {
				color: var(--on-dark);
			}
		}
	}
	.footer-col__title {
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--signal-l);
		border-block-end: 1px solid oklch(100% 0 0 / 14%);
		padding-block-end: 12px;
	}
	.footer-col__meta {
		font-size: 14.5px;
		line-height: 1.7;
		color: oklch(100% 0 0 / 60%);
	}
	.footer-col__social {
		display: flex;
		gap: 8px;
		margin-block-start: 4px;
	}
	.social-icon {
		inline-size: 38px;
		block-size: 38px;
		border: 1px solid oklch(100% 0 0 / 22%);
		display: grid;
		place-items: center;
		font-weight: 700;
		font-size: 12px;
		color: oklch(100% 0 0 / 60%);
	}

	.site-footer__bottom {
		display: flex;
		justify-content: space-between;
		gap: 20px;
		flex-wrap: wrap;
		padding-block: 20px;
		font-weight: 500;
		font-size: 12.5px;
		color: oklch(100% 0 0 / 50%);
	}
	.site-footer__legal {
		display: flex;
		gap: 22px;
		flex-wrap: wrap;

		a {
			color: oklch(100% 0 0 / 50%);

			&:hover {
				color: var(--on-dark);
			}
		}
	}

	/* Shared N-up card grids — genuine reusable components (Homepage products,
	   Category archive, related products, Advice index/category/related), so
	   their column-count breakpoints react to their own container rather than
	   the viewport. */
	.product-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;

		@container (width <= 900px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@container (width <= 480px) {
			grid-template-columns: 1fr;
		}
	}
	.advice-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;

		@container (width <= 900px) {
			grid-template-columns: 1fr;
		}
	}

	/* Signal corner tag on a dark media slot (Homepage hero, inner-page page-hero) */
	.hero__tag {
		position: absolute;
		inset-inline-start: 0;
		inset-block-end: 0;
		background: var(--signal);
		color: var(--on-dark);
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		padding: 9px 14px;
	}

	/* Article card — Homepage teaser, Advice index/category, related articles */
	.article-card__image {
		aspect-ratio: 16 / 9;
		background: var(--plate);
		border-block-end: 1px solid var(--line-2);

		img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}
	.article-card__body {
		padding: 24px;
		display: grid;
		gap: 10px;
	}
	.article-card__meta {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 14px;
	}
	.article-card__cat {
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--signal);
	}
	.article-card__read {
		font-weight: 600;
		font-size: 11.5px;
		color: var(--ink-3);
	}
	.article-card__title {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 20px;
		line-height: 1.24;
		letter-spacing: -0.02em;
		margin: 0;
		text-wrap: pretty;
	}
	.article-card__excerpt {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--ink-2);
	}

	/* Accordion — Advice quick-answers, FAQ page. One open per [data-accordion]
	   group; JS only flips aria-expanded, this drives the height animation. */
	.accordion__item {
		border-block-start: 1px solid var(--line);

		&:last-child {
			border-block-end: 1px solid var(--line);
		}
	}
	.accordion__head {
		border: none;
		background: transparent;
		cursor: pointer;
		font-family: var(--sans);
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 16px;
		align-items: center;
		text-align: start;
		inline-size: 100%;
		padding: 22px 4px;

		span:first-child {
			font-weight: 600;
			font-size: 17px;
			line-height: 1.35;
			color: var(--ink);
		}
	}
	.accordion__icon {
		display: grid;
		place-items: center;
		flex: none;
		inline-size: 32px;
		block-size: 32px;
		font-weight: 700;
		color: var(--ink);
		border: 1px solid var(--line);

		.accordion__head[aria-expanded="true"] & {
			color: var(--on-dark);
			background: var(--signal);
			border-color: var(--signal);
		}
	}
	.accordion__panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 200ms ease-out;

		.accordion__item:has(.accordion__head[aria-expanded="true"]) & {
			grid-template-rows: 1fr;
		}
	}
	.accordion__panel-inner {
		overflow: hidden;

		p {
			margin: 0;
			padding-block-end: 22px;
			font-size: 15.5px;
			line-height: 1.65;
			color: var(--ink-2);
			max-inline-size: 66ch;
		}
	}

	/* Pill chip link — Advice category filters, Search suggestions */
	.advice-chip {
		border: 1px solid var(--line);
		color: var(--ink-2);
		font-weight: 600;
		font-size: 13.5px;
		padding: 10px 15px;

		&:hover {
			border-color: var(--ink);
			color: var(--ink);
		}
		&.advice-chip--active {
			background: var(--void);
			color: var(--on-dark);
			border-color: var(--void);
		}
		&.advice-chip--strong {
			border-color: var(--ink);
			color: var(--ink);

			&:hover {
				background: var(--void);
				color: var(--on-dark);
			}
		}
	}

	/* Pagination — WooCommerce archives and native WP (Search, Advice) both use
	   a "page-numbers" class on the links, just a different wrapper. */
	.woocommerce-pagination,
	.pagination {
		display: flex;
		justify-content: center;
		margin-block-start: 8px;

		.page-numbers {
			display: flex;
			gap: 8px;
			align-items: center;
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				display: contents;
			}
		}
		a.page-numbers,
		span.page-numbers {
			inline-size: 44px;
			block-size: 44px;
			border: 1px solid var(--line);
			display: grid;
			place-items: center;
			color: var(--ink);
			font-weight: 700;
			font-size: 14.5px;

			&:hover {
				border-color: var(--ink);
				color: var(--ink);
			}
			&.current {
				background: var(--void);
				color: var(--on-dark);
				border-color: var(--void);
			}
			&.dots {
				border-color: transparent;
				color: var(--ink-3);
			}
		}
	}

	/* Placeholder image plates (--plate / --plate-d) */
	.plate {
		inline-size: 100%;
		block-size: 100%;
		background: var(--plate);
		display: grid;
		place-items: center;
		text-align: center;

		&.plate--dark {
			background: var(--plate-d);

			.plate__label {
				color: oklch(100% 0 0 / 45%);
			}
		}
	}
	.plate__label {
		font-weight: 600;
		font-size: 11px;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--ink-3);
		line-height: 1.6;
		padding-inline: 16px;
	}

	/* Mobile sticky CTA bar */
	.stickybar {
		display: none;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 50;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 10px 12px;
		background: oklch(15.82% 0.0072 258.37 / 96%);
		border-block-start: 1px solid oklch(100% 0 0 / 18%);

		.btn {
			block-size: 48px;
			font-size: 14.5px;
		}

		@media (width <= 1023px) {
			display: grid;
		}
	}
	@media (width <= 1023px) {
		.site-footer {
			padding-block-end: 72px;
		}
	}
}