/**
 * Layout layer: header, navigation, content areas, footer.
 * Structural only — colors and type come from theme.json tokens.
 */

@layer layout {
	/* ---- Announcement bar ---- */
	.announcement-bar {
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		padding-block: 0.45rem;
		text-align: center;
	}

	.announcement-bar p {
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.08em;
		margin: 0;
		text-transform: uppercase;
	}

	/* ---- Header ---- */
	.site-header {
		background: var(--wp--preset--color--base);
		border-block-end: 1px solid var(--wp--preset--color--border);
	}

	.site-header__inner {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--50);
		justify-content: space-between;
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
		padding: var(--wp--preset--spacing--40);
	}

	.site-branding .custom-logo {
		max-block-size: 4rem;
		inline-size: auto;
	}

	.site-logo {
		display: inline-block;
		line-height: 0;
	}

	.site-logo img {
		block-size: auto;
		inline-size: auto;
		max-block-size: 4.5rem;
		max-inline-size: 16rem;
	}

	.site-title {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 700;
		margin: 0;
	}

	.site-title a {
		color: inherit;
		text-decoration: none;
	}

	.site-description {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
		margin: 0;
	}

	/* ---- Masthead header layout ---- */
	.site-header--masthead .site-header__masthead {
		align-items: center;
		display: grid;
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: 1fr auto 1fr;
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
		padding: var(--wp--preset--spacing--40);
	}

	.site-header--masthead .site-branding {
		grid-column: 2;
		text-align: center;
	}

	.site-header--masthead .site-branding .custom-logo {
		margin-inline: auto;
	}

	.site-header__utility {
		align-items: center;
		display: flex;
		gap: var(--wp--preset--spacing--40);
	}

	.site-header__utility--start {
		grid-column: 1;
		justify-self: start;
	}

	.site-header__utility--end {
		grid-column: 3;
		justify-self: end;
	}

	.site-header__utility-link {
		align-items: center;
		color: inherit;
		display: inline-flex;
		gap: 0.35rem;
		text-decoration: none;
	}

	.site-header__utility-link:hover {
		color: var(--wp--preset--color--primary);
	}

	.site-header__cart-count {
		font-size: var(--wp--preset--font-size--small);
	}

	/* Icon-first search: the input is collapsed (but still keyboard-
	   focusable — never display:none) until the form gains focus, then
	   expands via :focus-within. Pairs with the `required` attribute on
	   the input (see whitetail_header_search()): an icon click on an
	   empty form focuses the input instead of submitting. The input is
	   absolutely positioned and expands leftward as an overlay, so it
	   occupies no layout space — the centered branding never shifts. */
	.site-header__search .search-form {
		align-items: center;
		display: flex;
		margin: 0;
		position: relative;
	}

	.site-header__search .search-form__input {
		background: var(--wp--preset--color--base);
		inline-size: 0;
		inset-block-start: 50%;
		inset-inline-end: 100%;
		max-inline-size: none;
		opacity: 0;
		padding-inline: 0;
		position: absolute;
		transform: translateY(-50%);
		transition: inline-size 200ms ease, opacity 150ms ease, padding 200ms ease;
	}

	.site-header__search .search-form:focus-within .search-form__input {
		inline-size: min(11rem, 40vw);
		opacity: 1;
		padding-inline: 0.25rem;
	}

	.site-header--masthead .site-nav {
		border-block-start: 1px solid var(--wp--preset--color--border);
	}

	.site-header--masthead .site-nav__menu {
		justify-content: center;
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
		padding-inline: var(--wp--preset--spacing--40);
	}

	/* ---- Primary navigation ---- */
	.site-nav__menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--50);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-nav__menu a {
		color: inherit;
		display: block;
		padding-block: 0.5rem;
		text-decoration: none;
	}

	.site-nav__menu a:hover,
	.site-nav__menu .current-menu-item > a {
		color: var(--wp--preset--color--primary);
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}

	/* Simple accessible dropdowns for one submenu level. */
	.site-nav__menu .sub-menu {
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--border);
		display: none;
		list-style: none;
		margin: 0;
		min-inline-size: 12rem;
		padding: 0.5rem;
		position: absolute;
		z-index: 30;
	}

	.site-nav__menu li {
		position: relative;
	}

	.site-nav__menu li:hover > .sub-menu,
	.site-nav__menu li:focus-within > .sub-menu {
		display: block;
	}

	.site-nav__toggle {
		background: transparent;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 0.25rem;
		cursor: pointer;
		display: none;
		line-height: 0;
		padding: 0.5rem;
	}

	.site-nav__toggle .icon--close {
		display: none;
	}

	.site-nav--open .site-nav__toggle .icon--menu {
		display: none;
	}

	.site-nav--open .site-nav__toggle .icon--close {
		display: inline;
	}

	/* ---- Menu drawer (masthead layout) ---- */
	/* Disclosure button in the start utility slot; the drawer overlays
	   the page and slides its panel in from the start edge. Closed state
	   is `visibility: hidden` — unfocusable and hidden from assistive
	   tech — with a transition-delay so the slide-out finishes first.
	   Behavior (aria-expanded, Escape, backdrop click) lives in
	   assets/js/navigation.js. */
	.site-drawer__toggle {
		align-items: center;
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
		display: inline-flex;
		gap: 0.5rem;
		padding: 0.5rem 0.25rem;
	}

	.site-drawer {
		inset: 0;
		position: fixed;
		transition: visibility 0s linear 250ms;
		visibility: hidden;
		z-index: 100;
	}

	.site-drawer::before {
		background: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
		content: "";
		inset: 0;
		opacity: 0;
		position: absolute;
		transition: opacity 250ms ease;
	}

	.site-drawer__panel {
		background: var(--wp--preset--color--base);
		block-size: 100%;
		display: flex;
		flex-direction: column;
		inline-size: min(20rem, 85vw);
		inset-block: 0;
		inset-inline-start: 0;
		overflow-y: auto;
		position: absolute;
		transform: translateX(-100%);
		transition: transform 250ms ease;
	}

	.site-drawer--open {
		transition-delay: 0s;
		visibility: visible;
	}

	.site-drawer--open::before {
		opacity: 1;
	}

	.site-drawer--open .site-drawer__panel {
		transform: translateX(0);
	}

	html.drawer-open {
		overflow: hidden;
	}

	.site-drawer__head {
		display: flex;
		justify-content: flex-end;
		padding: var(--wp--preset--spacing--40);
	}

	.site-drawer__close {
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
		line-height: 0;
		padding: 0.5rem;
	}

	.site-drawer__menu {
		list-style: none;
		margin: 0;
		padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}

	.site-drawer__menu a {
		color: inherit;
		display: block;
		padding-block: 0.75rem;
		text-decoration: none;
	}

	.site-drawer__menu .sub-menu {
		list-style: none;
		margin: 0;
		padding-inline-start: var(--wp--preset--spacing--50);
	}

	@media (prefers-reduced-motion: reduce) {
		.site-drawer,
		.site-drawer::before,
		.site-drawer__panel,
		.site-header__search .search-form__input {
			transition: none;
		}
	}

	@media (max-width: 781px) {
		.site-nav__toggle {
			display: inline-flex;
		}

		.site-nav__menu {
			display: none;
			flex-direction: column;
			gap: 0;
			inline-size: 100%;
			padding-block: var(--wp--preset--spacing--40);
		}

		.site-nav--open .site-nav__menu {
			display: flex;
		}

		.site-header--inline .site-nav {
			display: contents;
		}

		/* Masthead: the drawer is the mobile navigation. */
		.site-header--masthead .site-nav {
			display: none;
		}

		.site-nav__menu .sub-menu {
			border: 0;
			display: block;
			padding-inline-start: var(--wp--preset--spacing--50);
			position: static;
		}
	}

	/* Small screens: branding gets its own row so the logo, MENU button
	   and utility icons never fight for one narrow grid row. */
	@media (max-width: 560px) {
		.site-header--masthead .site-header__masthead {
			grid-template-columns: 1fr 1fr;
			row-gap: var(--wp--preset--spacing--30, 0.75rem);
		}

		.site-header--masthead .site-branding {
			grid-column: 1 / -1;
			grid-row: 1;
		}

		.site-header--masthead .site-header__utility--start {
			grid-column: 1;
			grid-row: 2;
		}

		.site-header--masthead .site-header__utility--end {
			grid-column: 2;
			grid-row: 2;
		}

		.site-header--masthead .site-branding img {
			block-size: auto;
			max-inline-size: min(100%, 14rem);
		}
	}

	/* ---- Main content ---- */
	.site-main {
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
		inline-size: 100%;
	}

	/* Pages are block canvases: full-bleed main so alignfull sections
	   truly span the viewport; prose and headers re-constrain themselves
	   (see components.css). Posts/archives keep the padded container. */
	.page .site-main,
	.single .site-main,
	.page-template-template-full-width .site-main {
		max-inline-size: none;
		padding: 0;
	}

	.content-area--with-sidebar {
		display: grid;
		gap: var(--wp--preset--spacing--60);
	}

	@media (min-width: 960px) {
		.content-area--with-sidebar:has(.content-area__sidebar) {
			grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
		}
	}

	.page-header {
		margin-block-end: var(--wp--preset--spacing--60);
	}

	.page-header__title {
		margin-block-end: 0.25em;
	}

	.page-header__description {
		color: var(--wp--preset--color--muted);
	}

	/* ---- Footer ---- */
	.site-footer {
		background: var(--wp--preset--color--neutral);
		border-block-start: 1px solid var(--wp--preset--color--border);
		margin-block-start: auto;
	}

	.site-footer__widgets {
		display: grid;
		gap: var(--wp--preset--spacing--60);
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	}

	@media (min-width: 782px) {
		.site-footer__widgets {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.site-footer__bar {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--50);
		justify-content: space-between;
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.site-footer__copyright {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
		margin: 0;
	}

	.site-footer__logo {
		max-block-size: 3rem;
		inline-size: auto;
	}

	.site-footer__menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--50);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-footer__menu a {
		color: inherit;
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
	}

	.site-footer__menu a:hover {
		text-decoration: underline;
	}
}