/**
 * [dalua_menu] styles.
 *
 * Everything is scoped under .dalua-menu so nothing can leak into Divi's
 * modules or the Builder UI. Tokens fall back to literal values, so the menu
 * still looks right if the shortcode is used on a site without the child theme.
 *
 * Layout follows the shop's own Odoo POS: colour-tagged category bands, each
 * holding a responsive grid of product cards.
 */

.dalua-menu {
	--dm-sage:       var(--dalua-sage, #a9be9c);
	--dm-sage-deep:  var(--dalua-sage-deep, #7e9a70);
	--dm-night:      var(--dalua-night, #1f2a2e);
	--dm-plaster:    var(--dalua-plaster, #f6f3ec);
	--dm-ink:        var(--dalua-ink, #2b3438);
	--dm-ink-muted:  var(--dalua-ink-muted, #6d7b7f);
	--dm-blush:      var(--dalua-blush, #e8cfc9);
	--dm-display:    var(--dalua-font-display, 'Italiana', Georgia, serif);
	--dm-body:       var(--dalua-font-body, 'Jost', 'Helvetica Neue', Arial, sans-serif);
	--dm-ease:       var(--dalua-ease, cubic-bezier(0.22, 0.61, 0.36, 1));

	/* Every group overrides these two with the colour its category carries in
	   Odoo. The sage default is what an uncoloured category gets. */
	--dm-accent:     var(--dm-sage);
	--dm-accent-rgb: 169, 190, 156;

	--dm-line:       rgba(31, 42, 46, 0.09);
	--dm-card:       #fff;

	font-family: var(--dm-body);
	color: var(--dm-ink);
}

/* The root is in this list deliberately. The theme gives .dalua-menu a width of
   100% and its own inline padding; with content-box sizing that padding is
   added on top, and the whole menu overflowed the viewport on phones. */
.dalua-menu,
.dalua-menu *,
.dalua-menu *::before,
.dalua-menu *::after {
	box-sizing: border-box;
}

/**
 * Undo the host theme's editorial defaults.
 *
 * Divi styles post content generously — `p { padding-bottom: 1em }`, 10px under
 * every heading, and `.entry-content ul { list-style: disc; padding: 0 0 23px 1em }`.
 * Those are right for an article and wrong for a product card: they were adding
 * a blank line under every price and indenting the whole card grid away from
 * its category rule. The `section` prefix is what carries this past
 * `.entry-content ul`, which outweighs a single class on its own.
 */
section.dalua-menu h2,
section.dalua-menu h3,
section.dalua-menu h4,
section.dalua-menu p,
section.dalua-menu ul {
	padding: 0;
}

section.dalua-menu ul {
	list-style: none;
}

.dalua-menu__heading {
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dm-night);
	margin: 0 0 1.2rem;
	line-height: 1.05;
}

/* --------------------------------------------------------------------------
   Filter row
   -------------------------------------------------------------------------- */

.dalua-menu__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.4rem;
	margin: 0 0 clamp(1.75rem, 1rem + 2vw, 3rem);
	padding: 0 0 1.25rem;
	border-bottom: 1px solid rgba(31, 42, 46, 0.12);
}

.dalua-menu__filter {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	padding: 0.5em 1.05em;
	border: 1px solid rgba(31, 42, 46, 0.16);
	border-radius: 999px;
	background: transparent;
	color: var(--dm-ink-muted);
	font-family: var(--dm-body);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: color 0.35s var(--dm-ease), border-color 0.35s var(--dm-ease), background-color 0.35s var(--dm-ease);
}

.dalua-menu__filter:hover {
	color: var(--dm-night);
	border-color: var(--dm-sage);
}

.dalua-menu__filter.is-active {
	color: var(--dm-night);
	background: var(--dm-sage);
	border-color: var(--dm-sage);
}

.dalua-menu__filter:focus-visible {
	outline: 2px solid var(--dm-sage-deep);
	outline-offset: 3px;
}

/* The signature: a moon at each tab, waxing across the row. */
.dalua-menu .dalua-moon {
	inline-size: 0.66em;
	block-size: 0.66em;
	border-radius: 50%;
	flex: none;
	background: var(--dm-sage);
	box-shadow: inset -0.33em 0 0 0 var(--dm-night);
	transition: box-shadow 0.4s var(--dm-ease), background-color 0.4s var(--dm-ease);
}

.dalua-menu .dalua-moon[data-phase="new"]      { background: var(--dm-night); box-shadow: none; }
.dalua-menu .dalua-moon[data-phase="crescent"] { box-shadow: inset -0.45em 0 0 0 var(--dm-night); }
.dalua-menu .dalua-moon[data-phase="half"]     { box-shadow: inset -0.33em 0 0 0 var(--dm-night); }
.dalua-menu .dalua-moon[data-phase="gibbous"]  { box-shadow: inset -0.17em 0 0 0 var(--dm-night); }
.dalua-menu .dalua-moon[data-phase="full"]     { box-shadow: none; }

/* On the active chip the moon sits on sage, so it lights up in plaster. */
.dalua-menu__filter.is-active .dalua-moon {
	background: var(--dm-night);
	box-shadow: inset -0.33em 0 0 0 var(--dm-plaster);
}

.dalua-menu__filter.is-active .dalua-moon[data-phase="new"]      { background: var(--dm-plaster); box-shadow: none; }
.dalua-menu__filter.is-active .dalua-moon[data-phase="crescent"] { box-shadow: inset -0.45em 0 0 0 var(--dm-plaster); }
.dalua-menu__filter.is-active .dalua-moon[data-phase="gibbous"]  { box-shadow: inset -0.17em 0 0 0 var(--dm-plaster); }
.dalua-menu__filter.is-active .dalua-moon[data-phase="full"]     { box-shadow: none; background: var(--dm-plaster); }

/* --------------------------------------------------------------------------
   Category bands
   -------------------------------------------------------------------------- */

.dalua-menu__groups {
	display: grid;
	gap: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
}

.dalua-menu__group[hidden] {
	display: none;
}

.dalua-menu__group-head {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
	padding: 0 0 0.7rem;
	border-bottom: 1px solid var(--dm-line);
}

/* The Odoo colour, used at the size it deserves. The palette Odoo ships is far
   more saturated than the brand's, so it lands as a swatch with a soft halo
   rather than as a filled banner. */
.dalua-menu__group-head::before {
	content: "";
	flex: none;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	background: var(--dm-accent);
	box-shadow: 0 0 0 0.25rem rgba(var(--dm-accent-rgb), 0.16);
}

.dalua-menu__group-title {
	margin: 0;
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--dm-night);
}

.dalua-menu__group-count {
	margin-inline-start: auto;
	flex: none;
	min-inline-size: 1.9em;
	padding: 0.3em 0.6em;
	border-radius: 999px;
	background: rgba(var(--dm-accent-rgb), 0.14);
	color: var(--dm-ink);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.dalua-menu__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: clamp(0.7rem, 0.5rem + 0.6vw, 1.1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dalua-menu__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	/* Most products here are a name and a price and nothing else. This is the
	   floor that keeps a one-line card from collapsing to a strip next to a
	   neighbour whose name wrapped, not a target height. */
	min-block-size: 6rem;
	padding: 1.05rem 1.15rem 1.1rem;
	background: var(--dm-card);
	border: 1px solid var(--dm-line);
	border-radius: 0.9rem;
	box-shadow: 0 1px 2px rgba(31, 42, 46, 0.04);
	animation: dalua-menu-in 0.45s var(--dm-ease) both;
	transition:
		transform 0.35s var(--dm-ease),
		box-shadow 0.35s var(--dm-ease),
		border-color 0.35s var(--dm-ease);
}

.dalua-menu__card[hidden] {
	display: none;
}

/* The category colour returns on hover as a hairline along the top edge — the
   same cue the POS gives when a tile is picked, at a weight that suits a menu. */
.dalua-menu__card::after {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0.9rem;
	block-size: 2px;
	border-radius: 0 0 2px 2px;
	background: var(--dm-accent);
	opacity: 0;
	transition: opacity 0.35s var(--dm-ease);
}

.dalua-menu__card:hover,
.dalua-menu__card:focus-within {
	transform: translateY(-2px);
	border-color: rgba(var(--dm-accent-rgb), 0.45);
	box-shadow: 0 8px 22px -12px rgba(31, 42, 46, 0.28);
}

.dalua-menu__card:hover::after,
.dalua-menu__card:focus-within::after {
	opacity: 1;
}

.dalua-menu__card-main {
	display: grid;
	gap: 0.3rem;
}

.dalua-menu__name {
	margin: 0;
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.28rem);
	letter-spacing: 0.045em;
	text-transform: uppercase;
	line-height: 1.22;
	color: var(--dm-night);
	/* Long till names ("Cookie Nutella Avellanas") must not force the grid wide. */
	overflow-wrap: anywhere;
}

.dalua-menu__description {
	margin: 0;
	font-size: 0.84rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--dm-ink-muted);
}

/* Prefixed to match the reset above, which would otherwise flatten the padding
   this one paragraph actually wants. */
section.dalua-menu .dalua-menu__price {
	/* Sits on the baseline of the card whatever the name wrapped to, so prices
	   line up across a row the way they do on a printed carta. */
	margin: auto 0 0;
	padding-block-start: 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--dm-sage-deep);
}

.dalua-menu__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0.1rem 0 0;
}

.dalua-menu__chip {
	font-size: 0.63rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dm-ink-muted);
	border: 1px solid rgba(31, 42, 46, 0.14);
	border-radius: 999px;
	padding: 0.25em 0.65em;
	line-height: 1.4;
}

/* A tag with no colour set in Odoo still reads as a tag, in sage. */
.dalua-menu__chip--tag {
	border-color: var(--dm-sage);
	background: rgba(169, 190, 156, 0.16);
	color: var(--dm-sage-deep);
}

/* A tag with a colour set in Odoo wears it, on the foreground the catalogue
   picked for contrast. */
.dalua-menu__chip--tag.has-color {
	background: var(--dm-tag);
	border-color: var(--dm-tag);
	color: var(--dm-tag-ink);
}

/* On a phone the grid is one column wide, and forty stacked tiles is a long
   scroll for a card that only holds a name and a price. Below this width the
   card lays out as a row instead — name left, price right — which is the
   printed-carta line, kept inside the same card. */
@media (max-width: 34rem) {
	.dalua-menu__card {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.4rem 0.9rem;
		min-block-size: 0;
		padding: 0.85rem 1rem;
	}

	.dalua-menu__card-main {
		flex: 1 1 8rem;
	}

	section.dalua-menu .dalua-menu__price {
		margin: 0;
		padding-block-start: 0;
	}

	.dalua-menu__chips {
		flex-basis: 100%;
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

.dalua-menu__empty {
	margin: 2rem 0 0;
	font-size: 0.95rem;
	color: var(--dm-ink-muted);
}

section.dalua-menu .dalua-menu__admin-note {
	margin: 1.5rem 0 0;
	padding: 0.85rem 1.1rem;
	border-left: 3px solid var(--dm-blush);
	background: rgba(232, 207, 201, 0.22);
	font-size: 0.85rem;
	color: var(--dm-ink);
}

/* ==========================================================================
   Out of stock

   Set from Odoo: a storable product whose quantity on hand has run out. See
   Dalua_Catalog::inventory_is_tracked() for why these stay hidden until the
   shop actually receives stock into Odoo.
   ========================================================================== */

/* Terracotta rather than a warning red. This is a menu in a gelateria, not an
   error state — the card should read as "not today" rather than as a failure. */
.dalua-menu__card.is-out-of-stock {
	border-color: rgba(200, 122, 122, 0.3);
}

/* The dimming is on the product's own content rather than on the card, which is
   the one deviation from the brief worth calling out. Opacity on the card would
   take the badge down with it — a parent's opacity is a ceiling its children
   cannot climb back out of — and #B25B5B at 72% over white falls to about 3:1,
   under the 4.5:1 floor for text this small. Fading what the badge is *about*
   and leaving the badge itself at full strength gets the same muted card while
   keeping the one word that has to stay readable readable. */
.dalua-menu__card.is-out-of-stock .dalua-menu__name,
.dalua-menu__card.is-out-of-stock .dalua-menu__description,
.dalua-menu__card.is-out-of-stock .dalua-menu__price,
.dalua-menu__card.is-out-of-stock .dalua-menu__chips {
	opacity: 0.72;
	transition: opacity 0.35s var(--dm-ease);
}

/* Hover lifts it back most of the way — enough to read the description
   comfortably without the card pretending to be available again. */
.dalua-menu__card.is-out-of-stock:hover .dalua-menu__name,
.dalua-menu__card.is-out-of-stock:hover .dalua-menu__description,
.dalua-menu__card.is-out-of-stock:hover .dalua-menu__price,
.dalua-menu__card.is-out-of-stock:hover .dalua-menu__chips,
.dalua-menu__card.is-out-of-stock:focus-within .dalua-menu__name,
.dalua-menu__card.is-out-of-stock:focus-within .dalua-menu__description,
.dalua-menu__card.is-out-of-stock:focus-within .dalua-menu__price,
.dalua-menu__card.is-out-of-stock:focus-within .dalua-menu__chips {
	opacity: 0.9;
}

/* Keep the terracotta through hover: the generic card rule swaps the border to
   the category accent, which would say "available" at exactly the wrong moment. */
.dalua-menu__card.is-out-of-stock:hover,
.dalua-menu__card.is-out-of-stock:focus-within {
	border-color: rgba(200, 122, 122, 0.45);
}

.dalua-menu__card.is-out-of-stock::after {
	background: rgba(200, 122, 122, 0.55);
}

/* The badge sits in the card's grid, so it has to be told not to stretch across
   the column — a full-width pill would read as a banner, not a note. */
.dalua-badge-no-stock {
	justify-self: start;
	display: inline-block;
	margin-block-start: 0.1rem;
	padding: 0.2em 0.7em;
	font-family: var(--dm-body);
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.6;
	color: #b25b5b;
	background: rgba(200, 122, 122, 0.12);
	border: 1px solid rgba(200, 122, 122, 0.22);
	border-radius: 999px;
}

@keyframes dalua-menu-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dalua-menu__card {
		animation: none;
	}
	.dalua-menu__card:hover,
	.dalua-menu__card:focus-within {
		transform: none;
	}
	.dalua-menu__card,
	.dalua-menu__card::after,
	.dalua-menu__filter,
	.dalua-menu .dalua-moon {
		transition: none;
	}
}