/**
 * Shared section styles for the shop-menu-categories block family.
 *
 * These rules style one section's heading + item list and are consumed by
 * three blocks: shop-menu-categories (the mega-menu / landing wrapper),
 * category-section and category-links. The latter two can also stand alone
 * on any page/template — outside the outer wrapper — so the rules live in a
 * shared stylesheet registered as the `arctic-trucks-menu-section` handle
 * rather than inside the outer block's style.css.
 *
 * Wrapper/grid/CTA and the is-style-landing overrides stay in
 * shop-menu-categories/style.css (they only apply inside the menu).
 *
 * Tokens from at-theme theme.json (with fallbacks for other contexts).
 *
 * @package Arctic_Trucks_Blocks
 */

/* ---------- Section ---------- */

.at-shop-menu-categories__section + .at-shop-menu-categories__section {
	margin-top: 1.5rem;
}

/* ---------- Heading ---------- */

.at-shop-menu-categories__heading {
	color: var(--wp--preset--color--dark-grey, #565657);
	font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
	padding: 0;
	line-height: 1.4;
}

/* ---------- List ---------- */

.at-shop-menu-categories__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 2.2;
}

/* ---------- Link ---------- */

.at-shop-menu-categories__link {
	color: var(--wp--preset--color--black, #101012);
	text-decoration: none;
	transition: color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-shop-menu-categories__link:hover,
.at-shop-menu-categories__link:focus {
	color: var(--wp--preset--color--original-blue, #0071ce);
}

/* ---------- Product count ---------- */

.at-shop-menu-categories__count {
	color: var(--wp--preset--color--dark-grey, #565657);
	font-size: 0.6875rem;
	margin-left: 0.25em;
}

/* ---------- Inline item layout (per-section itemLayout: inline) ----------
 * Terms flow horizontally and wrap within the column width instead of
 * breaking to a new line per term. Gap themable via custom props. */

.at-shop-menu-categories__list--inline {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--at-menu-inline-gap-x, 1rem);
	row-gap: var(--at-menu-inline-gap-y, 0.25rem);
	line-height: 1.6;
}

.at-shop-menu-categories__list--inline .at-shop-menu-categories__item {
	min-width: 0;
}

.at-shop-menu-categories__list--inline .at-shop-menu-categories__link {
	white-space: nowrap;
}

/* ---------- Images (showImages) ---------- */

.at-shop-menu-categories__list--images .at-shop-menu-categories__link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.at-shop-menu-categories__image {
	width: 36px;
	height: 36px;
	flex: none;
	object-fit: cover;
	border-radius: var(--wp--custom--border-radius--default, 4px);
	background: var(--wp--preset--color--lightest-grey, #fafafa);
}

.at-shop-menu-categories__image--placeholder {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--light-grey, #e5e5e5);
}

/* ---------- See all ---------- */

.at-shop-menu-categories__see-all {
	display: inline-block;
	margin-top: 0.25rem;
	color: var(--wp--preset--color--original-blue, #0071ce);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: color var(--wp--custom--transition--default, 150ms ease-in-out);
}

.at-shop-menu-categories__see-all:hover,
.at-shop-menu-categories__see-all:focus {
	color: var(--wp--preset--color--medium-blue, #004e8c);
}

/* ---------- Editor empty-state hint ---------- */

.at-shop-menu-categories__empty {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--dark-grey, #565657);
	font-style: italic;
}