/**
 * MM Store – theme components.
 *
 * Structural and component styles that theme.json cannot express. Colours,
 * type, spacing, buttons and links come from theme.json presets, referenced
 * here through their custom properties. Mobile first; no hover-only content.
 *
 * Nothing in this file targets MM Side Cart (.mm-side-cart-*) markup.
 *
 * @package MM_Store
 */

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */

.mm-store-header {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--divider);
}

.mm-store-header__bar {
	row-gap: var(--wp--preset--spacing--30);
	column-gap: var(--wp--preset--spacing--50);
}

.mm-store-header__tools {
	gap: var(--wp--preset--spacing--30);
}

.mm-store-header .wp-block-site-title {
	margin: 0;
}

/* Navigation targets stay comfortably large (WCAG 2.5.8 needs 24px). */
.mm-store-primary-nav .wp-block-navigation-item__content,
.mm-store-footer-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
}

.mm-store-primary-nav .wp-block-navigation__responsive-container-open,
.mm-store-primary-nav .wp-block-navigation__responsive-container-close {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	justify-content: center;
}

/*
 * Closed submenus are invisible but keep their position, and nested flyouts of
 * a centred menu can sit past the right edge. Clipping the header horizontally
 * (not vertically) stops them from widening the page, and the last two
 * top-level items open their nested levels to the left.
 */
.mm-store-header {
	overflow-x: clip;
}

.mm-store-primary-nav .wp-block-navigation__container > .has-child:nth-last-child(-n+2) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	right: 100%;
	left: auto;
}

.mm-store-primary-nav .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* Small screens: search takes the free width beside the account and cart links. */
@media (max-width: 47.99em) {

	.mm-store-header .mm-store-header__tools {
		flex-wrap: nowrap;
		inline-size: 100%;
	}

	.mm-store-header .mm-store-header-search {
		flex: 1 1 auto;
		min-inline-size: 0;
	}
}

/* Header search: a single field with the icon button inside it. */
.mm-store-header-search {
	min-inline-size: min(100%, 16rem);
}

.mm-store-header-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--base);
	padding: 2px;
}

.mm-store-header-search .wp-block-search__input {
	border: 0;
	min-block-size: 2.5rem;
	padding-inline: var(--wp--preset--spacing--30);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.mm-store-header-search .wp-block-search__button {
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	margin: 0;
	padding: 0.5rem;
}

/* Account and cart links from WooCommerce. */
.mm-store-header__tools .wc-block-customer-account a,
.mm-store-header__tools .wc-block-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	justify-content: center;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mm-store-header__tools .wc-block-customer-account a:hover,
.mm-store-header__tools .wc-block-cart-link:hover {
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------- */
/* Main content                                                               */
/* -------------------------------------------------------------------------- */

.mm-store-main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}

/* Scroll targets (skip link, anchors) are never hidden under anything. */
:where(html) {
	scroll-padding-block-start: var(--wp--preset--spacing--40);
}

.mm-store-post-list {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
}

.mm-store-post-summary > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.mm-store-post-summary .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.mm-store-post-meta {
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mm-store-post-navigation > * {
	min-inline-size: 0;
	max-inline-size: 100%;
}

.mm-store-post-navigation {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--divider);
	gap: var(--wp--preset--spacing--40);
}

.mm-store-comment {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--divider);
}

.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination .page-numbers.current {
	border-block-end: 3px solid var(--wp--preset--color--primary);
	font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* 404                                                                        */
/* -------------------------------------------------------------------------- */

.mm-store-404 {
	padding-block: var(--wp--preset--spacing--60);
}

.mm-store-404 .wp-block-search {
	max-inline-size: 32rem;
}

/* -------------------------------------------------------------------------- */
/* Patterns                                                                   */
/* -------------------------------------------------------------------------- */

.mm-store-hero {
	align-items: center;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--surface);
}

.mm-store-hero__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	max-inline-size: 16ch;
}

.mm-store-hero__lead {
	max-inline-size: 38ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
}

.mm-store-section {
	margin-block: var(--wp--preset--spacing--70);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

.mm-store-footer {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

.mm-store-footer__columns {
	gap: var(--wp--preset--spacing--50);
}

.mm-store-footer__brand > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.mm-store-footer .wp-block-site-tagline {
	color: var(--wp--preset--color--muted);
}

.mm-store-footer__credit {
	margin-block-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------- */
/* MM Side Cart recommendation (store managers only; cart and checkout)       */
/* -------------------------------------------------------------------------- */

.mm-store-side-cart-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-inline-start: 4px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--preset--border-radius--small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.mm-store-side-cart-notice p {
	margin: 0;
}

.mm-store-side-cart-notice__text {
	flex: 1 1 24rem;
}

.mm-store-side-cart-notice__audience {
	color: var(--wp--preset--color--muted);
}

.mm-store-side-cart-notice__dismiss {
	display: inline-flex;
	align-items: center;
	min-block-size: 1.5rem;
}

/* -------------------------------------------------------------------------- */
/* Post content safety nets                                                   */
/* -------------------------------------------------------------------------- */

/*
 * Classic captions carry an inline pixel width, and the constrained layout
 * rule would otherwise let them exceed a narrow screen. Embed fallbacks
 * (a link or a blockquote shown until the provider loads) are held to the
 * column as well.
 */
.wp-block-post-content .wp-caption,
.wp-block-post-content .wp-block-embed__wrapper > * {
	max-inline-size: 100%;
}

.wp-block-post-content .wp-block-embed__wrapper {
	overflow-wrap: anywhere;
}