/* ============================================================
   Onyoda — header & footer chrome
   Ported from the Shopify Onyoda build. Uses theme.json design
   tokens via CSS custom properties (var(--wp--preset--...)).
   ============================================================ */

/* ---------- Header main row ---------- */
.onyoda-header__inner {
	display: grid;
	/* minmax(0,1fr) lets the side columns shrink below their content width so
	   the row never overflows on narrow screens (keeps the icons on-screen). */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	max-width: 1500px;
	margin: 0 auto;
	padding: 24px 56px;
}
/* The inner group is block-markup flow layout, so WordPress injects a
   block-gap margin-block-start on the later children (the icons). Since we
   override it to CSS grid, zero those stray margins so align-items:center
   keeps the wordmark and icons on one baseline. */
.onyoda-header__inner > * {
	margin-block: 0;
}

/* Left — primary nav */
.onyoda-nav {
	justify-self: start;
}
.onyoda-nav .wp-block-navigation__container {
	gap: 40px;
}
.onyoda-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--sienna);
	text-decoration: none;
}
.onyoda-nav .wp-block-navigation-item__content:hover,
.onyoda-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--gold);
}

/* Center — logo (site-logo image, replaces the text wordmark) */
.onyoda-logo {
	justify-self: center;
	margin: 0;
	line-height: 0;
}
.onyoda-logo img,
.onyoda-logo a img {
	display: block;
	width: 100px;
	height: auto;
}

/* Right — icons */
.onyoda-icons {
	justify-self: end;
	align-items: center;
	gap: 22px;
}
.onyoda-icon {
	display: inline-flex;
	color: var(--wp--preset--color--sienna);
	transition: opacity 0.3s ease;
}
.onyoda-icon:hover {
	opacity: 0.55;
}
.onyoda-icon svg {
	display: block;
}

/* ---------- WooCommerce mini-cart ----------
   Neutralise the default WC blue; match the sienna/cream system. */
.onyoda-icons .wc-block-mini-cart__button {
	padding: 0;
	color: var(--wp--preset--color--sienna);
	background: transparent;
	transition: opacity 0.3s ease;
}
.onyoda-icons .wc-block-mini-cart__button:hover {
	opacity: 0.55;
}
.onyoda-icons .wc-block-mini-cart__amount {
	display: none; /* keep header clean: icon + count only */
}
.onyoda-icons .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--sienna);
	color: var(--wp--preset--color--cream);
	border: none;
}

/* Mini-cart drawer — cream ground, brand type, matches the cart page. */
.wc-block-mini-cart__drawer .wc-block-components-drawer,
.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--sienna);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__title,
.wc-block-mini-cart__drawer .wc-block-mini-cart__title h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 24px;
	color: var(--wp--preset--color--sienna);
}
.wc-block-mini-cart__drawer .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	color: var(--wp--preset--color--sienna);
	text-decoration: none;
}
.wc-block-mini-cart__drawer .wc-block-cart-items__row,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	border-color: color-mix(in srgb, var(--wp--preset--color--sienna) 15%, transparent);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--deep-text);
}
/* Checkout button in the drawer — solid sienna like the cart page. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
	background: var(--wp--preset--color--sienna);
	color: var(--wp--preset--color--cream);
	border: none;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.4s ease;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
	background: var(--wp--preset--color--espresso);
}
/* View-cart + continue-shopping links — sienna, underline on hover. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	color: var(--wp--preset--color--sienna);
	background: transparent;
	text-decoration: none;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper {
	color: var(--wp--preset--color--sienna);
}

/* ---------- Footer ---------- */
.onyoda-footer {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--cream);
	padding: 80px 56px 40px;
}
.onyoda-footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 60px;
	max-width: 1500px;
	margin: 0 auto;
}

/* Brand column */
.onyoda-footer__wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--cream);
}
.onyoda-footer__tagline {
	margin: 18px 0 0;
	max-width: 240px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(245, 240, 234, 0.7);
}

/* Link columns */
.onyoda-footer__col-title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.onyoda-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Scoped kill of the WP block-list default indent (padding-inline-start) —
   out-specifies `.wp-block-list` (0,1,0) so it holds in the Site Editor too,
   without a global list reset. */
.onyoda-footer__col ul {
	padding-inline-start: 0;
}
.onyoda-footer__links li {
	margin: 0;
}
.onyoda-footer__links a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 300;
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	transition: color 0.3s ease;
}
.onyoda-footer__links a:hover {
	color: var(--wp--preset--color--gold);
}

/* Follow column — social icons (cream on espresso, gold on hover). */
.onyoda-footer__socials {
	display: flex;
	gap: 18px;
	margin-top: 2px;
}
.onyoda-footer__socials a {
	display: inline-flex;
	color: var(--wp--preset--color--cream);
	transition: color 0.3s ease;
}
.onyoda-footer__socials a:hover {
	color: var(--wp--preset--color--gold);
}
.onyoda-footer__socials svg {
	display: block;
}

/* Bottom strip */
.onyoda-footer__bottom {
	max-width: 1500px;
	margin: 60px auto 0;
	padding-top: 30px;
	border-top: 1px solid rgba(245, 240, 234, 0.15);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.onyoda-footer__copyright,
.onyoda-footer__right {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: rgba(245, 240, 234, 0.6);
}
.onyoda-footer__right:empty {
	display: none;
}

/* ---------- Nav responsive bridge ----------
   The WordPress Navigation block hard-codes its hamburger switch at 600px.
   Onyoda's design collapses at 749px, so between 600–749px we force the
   block into its overlay state: show the hamburger, hide the inline links.
   The block's Interactivity API click handlers are already wired at every
   width, so no JS is needed — only the display toggles. */
@media (max-width: 749px) {
	.onyoda-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.onyoda-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.onyoda-nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
		display: flex !important;
	}
	/* Overlay open: brand it (cream ground, sienna links), give the portal
	   its own horizontal padding since it renders outside the section flow,
	   space the vertical link stack, and enlarge tap targets. */
	/* Selector must out-specify WordPress core's default overlay rule
	   `.wp-block-navigation:not(.has-background) …is-menu-open:not(.disable-default-overlay)`
	   (0,5,0), so we match it and add the nav tag to reach (0,5,1). */
	nav.onyoda-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background: var(--wp--preset--color--cream);
	}
	.onyoda-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		gap: 32px;
		padding: 32px 24px;
	}
	.onyoda-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 32px;
	}
	.onyoda-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 12px 0;
		color: var(--wp--preset--color--sienna);
		font-family: var(--wp--preset--font-family--body);
		font-size: 14px;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		font-weight: 400;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 749px) {
	.onyoda-header__inner {
		padding: 18px 24px;
		gap: 14px;
	}
	.onyoda-header__inner > * {
		min-width: 0;
	}
	.onyoda-logo img {
		width: 84px;
	}
	.onyoda-icons {
		gap: 16px;
	}

	.onyoda-footer {
		padding: 60px 24px 30px;
	}
	.onyoda-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 40px 24px;
		text-align: left;
	}
	.onyoda-footer__bottom {
		margin-top: 40px;
	}
}
@media (max-width: 480px) {
	.onyoda-footer__top {
		grid-template-columns: 1fr;
	}
}