/* House of Miskah chrome styles (1.2.0). Loaded after style.css.
   Header, menu, chips, footer, 404/search, skip link and focus states. */

:root {
	--miskah-focus: #2E2426;
	--miskah-tap: 44px;
}

/* ---------- Focus: one clear, consistent ring (WCAG 2.4.7 / 2.4.11) ---------- */
.miskah-header a:focus-visible,
.miskah-header button:focus-visible,
.miskah-chips a:focus-visible,
.miskah-footer a:focus-visible,
.miskah-404 a:focus-visible,
.wp-block-navigation__responsive-container a:focus-visible,
.wp-block-navigation__responsive-container button:focus-visible,
.wp-block-search__button:focus-visible {
	outline: 2px solid var(--miskah-focus);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Skip link: branded, big, top-left. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--ink) !important;
	color: #fff !important;
	border-radius: 999px;
	font-weight: 600;
	padding: 0.75rem 1.25rem !important;
	left: 0.75rem !important;
	top: 0.75rem !important;
	outline: 2px solid var(--wp--preset--color--sage);
	outline-offset: 2px;
}

/* ---------- Top bar ---------- */
.miskah-topbar p { line-height: 1.4; }

/* ---------- Header icons: 44px tap targets, visible cart count ---------- */
.miskah-header__icons .wp-block-search__button,
.miskah-header__icons .wc-block-customer-account__link,
.miskah-header__icons .wc-block-mini-cart__button,
.miskah-header .wp-block-navigation__responsive-container-open {
	min-width: var(--miskah-tap);
	min-height: var(--miskah-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: var(--wp--preset--color--ink);
}
.miskah-header__icons .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--sage-deep) !important;
	color: #fff !important;
	border: 2px solid var(--wp--preset--color--blush);
	font-weight: 600;
	min-width: 1.25rem;
	height: 1.25rem;
	font-size: 0.6875rem;
	line-height: 1;
}
/* The 44px tap-target rule above sets display on the menu button; hand it back to core so the
   hamburger only shows below 600px (where the overlay menu is used), not beside the desktop links. */
@media (min-width: 600px) {
	.miskah-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
}
/* Desktop nav: quiet underline on hover and for the current page. */
@media (min-width: 782px) {
	.miskah-header .wp-block-navigation-item__content { text-underline-offset: 6px; text-decoration-thickness: 1px; }
	.miskah-header .wp-block-navigation-item__content:hover,
	.miskah-header .current-menu-item > .wp-block-navigation-item__content,
	.miskah-header [aria-current="page"] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--sage); }
}
/* Phone-menu extras (delivery, Messenger) only show inside the open overlay menu.
   Core switches to the inline bar at 600px, so key this off the overlay state, not a width. */
.miskah-header .wp-block-navigation__responsive-container:not(.is-menu-open) .miskah-nav-extra { display: none !important; }

/* ---------- Phone header ---------- */
@media (max-width: 781px) {
	.miskah-header { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.miskah-header__row { position: relative; }
	.miskah-header__icons { gap: 0 !important; }

	/* Expanded search: drop a full-width field under the header row instead of squeezing the logo. */
	.miskah-header__icons,
	.miskah-header__icons .wp-block-search,
	.miskah-header__icons .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		position: static;
	}
	.miskah-header__icons .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 0.5rem);
		width: 100% !important;
		max-width: none;
		min-height: var(--miskah-tap);
		font-size: 1rem; /* 16px stops iOS zooming in. */
		background: var(--miskah-card, #FFFAF3);
		box-shadow: var(--miskah-shadow);
		z-index: 5;
	}

	/* Menu overlay: extras get a divider and the sage colour. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { min-height: var(--miskah-tap); display: flex; align-items: center; }
	.wp-block-navigation__responsive-container.is-menu-open .miskah-nav-extra--first { margin-top: 1.25rem; }
	.wp-block-navigation__responsive-container.is-menu-open .miskah-nav-extra .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--body);
		font-size: 1.0625rem;
		font-weight: 500;
		color: var(--wp--preset--color--sage-deep);
		border-bottom: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		min-width: var(--miskah-tap);
		min-height: var(--miskah-tap);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Chips: full 44px targets and a clear "you are here". */
	.miskah-chips__row a { min-height: var(--miskah-tap); }
	.miskah-chips__row a[aria-current="page"] {
		background: var(--wp--preset--color--sage-deep);
		border-color: var(--wp--preset--color--sage-deep);
		color: #fff;
	}
}
.miskah-chips__nav { display: block; }

/* ---------- Footer ---------- */
.miskah-footer .wp-block-columns { row-gap: 2rem; }
.miskah-footer li { margin: 0; }
.miskah-footer li a,
.miskah-footer__chat a {
	display: inline-flex;
	align-items: center;
	min-height: var(--miskah-tap);
}
.miskah-footer__facts li {
	padding: 0.35rem 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.45;
}
.miskah-footer__facts strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.miskah-footer__chat { margin-top: 0.5rem; }
.miskah-footer__chat a {
	padding: 0 1.1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sage-deep);
	color: #fff !important;
	font-weight: 500;
	text-decoration: none !important;
}
.miskah-footer__chat a:hover { background: var(--wp--preset--color--ink); }
.miskah-footer__social { gap: 0.25rem !important; }
.miskah-footer__social .wp-social-link a {
	min-width: var(--miskah-tap);
	min-height: var(--miskah-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 781px) {
	/* Phones: brand full width, Shop and Help side by side, then payment info full width. */
	.miskah-footer .wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
	.miskah-footer .wp-block-column { flex-basis: auto !important; min-width: 0; }
	.miskah-footer .wp-block-column:first-child,
	.miskah-footer .miskah-footer__trust { grid-column: 1 / -1; }
}

/* ---------- 404 and search ---------- */
.miskah-404__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #7E4446;
	margin-bottom: 0 !important;
}
.miskah-404 h1 { margin-top: 0.5rem; font-size: clamp(1.875rem, 7vw, 2.5rem); }
.miskah-404__search,
.miskah-search-again { margin-block: 1.5rem; }
.miskah-404__search .wp-block-search__input,
.miskah-search-again .wp-block-search__input { min-height: var(--miskah-tap); font-size: 1rem; }
.miskah-404__search .wp-block-search__button,
.miskah-search-again .wp-block-search__button { min-height: var(--miskah-tap); border-radius: 999px; }
.miskah-404__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-block: 1.25rem 1.75rem;
}
.miskah-404__cats a {
	display: inline-flex;
	align-items: center;
	min-height: var(--miskah-tap);
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--miskah-card, #FFFAF3);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-size: 0.9375rem;
}
.miskah-404__cats a:hover { border-color: var(--wp--preset--color--sage); background: var(--wp--preset--color--sage-tint); }
.miskah-404__help { margin-top: 1.5rem; color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
.miskah-404__help a { color: var(--wp--preset--color--sage-deep); }

@media (prefers-reduced-motion: reduce) {
	.miskah-header *, .miskah-footer *, .wp-block-navigation__responsive-container { transition: none !important; animation: none !important; }
}