/* plugins/apaxon-menu/assets/css/menu.css */

/*
 * Apaxon Menu.
 *
 * ── It inherits the theme, deliberately ─────────────────────────────
 *
 * No font-family, no font stack, no line-height on the root. The menu should
 * look like part of the restaurant's site, not part of ours — a menu in our
 * typeface on their page reads as an embed, and an embed reads as an advert.
 *
 * What is set here is only what a theme cannot decide: the two-column
 * arrangement, the leader dots, the price alignment, and the spacing between
 * a dish and the next one.
 *
 * ── Sized by its container, not the window ──────────────────────────
 *
 * Dropped into an Elementor sidebar or a 33% column, a menu can be 300px wide
 * on a 1400px screen. A viewport media query sees only the 1400 and lays out
 * two columns in a space that holds one. Every breakpoint below is a container
 * query for that reason, with a viewport fallback for browsers without support.
 */

.apaxon-menu {
	container-type: inline-size;
	container-name: apaxon-menu;

	/* Overridden per site by Frontend\Styles. Defaults here so the menu is
	   never unstyled if that inline block fails to print. */
	--am-accent: #8a6d3b;
	--am-accent-ink: #ffffff;

	/*
	 * The accent, made safe to set type in.
	 *
	 * The accent is chosen by the restaurant and the page behind it belongs to
	 * their theme, so its contrast cannot be computed — there is no known
	 * background to compute it against. Mixing halfway toward the theme's own
	 * text colour borrows the contrast the theme has already guaranteed, while
	 * leaving the hue plainly visible.
	 *
	 * 60% is the balance, measured rather than guessed. Against a white page
	 * with #1c1917 text, and a #101014 page with #e8e6e3 text:
	 *
	 *   default brown  8.3:1 / 7.2:1      terracotta  11.1:1 / 5.6:1
	 *   teal           9.1:1 / 6.6:1      pale gold    4.6:1 / 11.1:1
	 *
	 * Every one of those clears 4.5:1 on both grounds. Half-and-half cleared
	 * more, and muted the colour so far that the accent stopped reading as one
	 * — which defeats the point of putting it here.
	 *
	 * A near-white accent lands at 2.7:1 and fails. That is a colour nobody
	 * can set type in on a pale page, undiluted it is 1.07:1, and no mixing
	 * ratio rescues it; the control it belongs in is the colour picker.
	 */
	--am-accent-text: color-mix(in srgb, var(--am-accent) 60%, currentColor);

	/* Derived from whatever colour the theme is already using for text, so
	   the rules and washes sit in the theme's palette rather than ours. */
	--am-line: color-mix(in srgb, currentColor 16%, transparent);
	--am-quiet: color-mix(in srgb, currentColor 62%, transparent);
	--am-wash: color-mix(in srgb, currentColor 4%, transparent);

	--am-gap: 1.5rem;
	--am-dish-gap: 1rem;
	--am-radius: 8px;

	box-sizing: border-box;
	margin-block: 1.5rem;
}

.apaxon-menu *,
.apaxon-menu *::before,
.apaxon-menu *::after { box-sizing: inherit; }

/* ── Density and corners ────────────────────────────────────────────── */

.apaxon-menu--density-compact { --am-gap: 1rem; --am-dish-gap: 0.5rem; }
.apaxon-menu--density-roomy { --am-gap: 2.5rem; --am-dish-gap: 1.75rem; }

.apaxon-menu--corners-square { --am-radius: 0; }
.apaxon-menu--corners-round { --am-radius: 16px; }

/* ── Panel ──────────────────────────────────────────────────────────── */

.apaxon-menu--panel-card,
.apaxon-menu--panel-raised {
	padding: clamp(1.25rem, 4cqi, 2.25rem);
	border-radius: var(--am-radius);
	background: var(--am-wash);
}

.apaxon-menu--panel-card { border: 1px solid var(--am-line); }
.apaxon-menu--panel-raised { box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 28px -18px rgb(0 0 0 / 35%); }

/* ── Structure ──────────────────────────────────────────────────────── */

.apaxon-menu__intro {
	margin: 0 0 var(--am-gap);
	color: var(--am-quiet);
}

.apaxon-menu__section + .apaxon-menu__section { margin-top: var(--am-gap); }

.apaxon-menu__section-name {
	margin: 0 0 0.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--am-line);
	/* Inherits the theme's heading face; only the tracking is ours, because
	   a section heading on a menu is a label rather than a title. */
	letter-spacing: 0.04em;
}

.apaxon-menu__section-note {
	margin: 0 0 var(--am-dish-gap);
	color: var(--am-quiet);
	font-size: 0.9375em;
}

.apaxon-menu__dishes {
	margin: var(--am-dish-gap) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--am-dish-gap);
}

.apaxon-menu__dish { display: flex; gap: 1rem; }

.apaxon-menu__body { flex: 1; min-width: 0; }

/*
 * A dish that is off today is dimmed, never removed.
 *
 * The gap in a menu is information: a diner seeing a struck-through dish knows
 * the restaurant serves it, and a diner seeing nothing assumes it does not.
 */
.apaxon-menu__dish.is-unavailable { opacity: 0.55; }

/* ── The dish line ──────────────────────────────────────────────────── */

.apaxon-menu__head {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}

.apaxon-menu__name { font-weight: 600; }

/*
 * The leader dots.
 *
 * A flex item that grows into whatever space is left, with a dotted bottom
 * border. Not a repeated character: a row of full stops is read out by a
 * screen reader, wraps unpredictably, and cannot be made to stop cleanly at
 * the price.
 */
.apaxon-menu__leader {
	flex: 1 1 auto;
	min-width: 1rem;
	border-bottom: 1px dotted var(--am-line);
	transform: translateY(-0.25em);
}

.apaxon-menu__prices {
	display: flex;
	gap: 0.75rem;
	flex: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;

	/*
	 * The price carries the accent.
	 *
	 * It did not, and the accent a restaurant chose reached only a badge
	 * background and one border — so the one colour decision the plugin asks
	 * them to make was almost invisible on their own menu. The price is where
	 * a diner's eye goes second, after the name, and it is the natural place
	 * for it.
	 *
	 * `color` first as the fallback: a browser without color-mix gets the
	 * accent undiluted rather than nothing.
	 */
	color: var(--am-accent);
	color: var(--am-accent-text);
	font-weight: 600;
}

.apaxon-menu__price-label {
	margin-right: 0.25rem;
	color: var(--am-quiet);
	font-size: 0.8125em;
}

.apaxon-menu__off,
.apaxon-menu__flag {
	flex: none;
	padding: 0.0625rem 0.375rem;
	border-radius: 999px;
	background: var(--am-accent);
	color: var(--am-accent-ink);
	font-size: 0.6875em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.apaxon-menu__off { background: var(--am-line); color: inherit; }

.apaxon-menu__description {
	margin: 0.1875rem 0 0;
	color: var(--am-quiet);
	font-size: 0.9375em;
}

/* ── Dietary tags ───────────────────────────────────────────────────── */

.apaxon-menu__diets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

.apaxon-menu__diet {
	padding: 0.0625rem 0.4375rem;
	border: 1px solid var(--am-line);
	border-radius: 999px;
	font-size: 0.6875em;
	letter-spacing: 0.03em;
	color: var(--am-quiet);
}

/*
 * The allergen note.
 *
 * Set apart and never abbreviated to an icon. It is the restaurant's own
 * words, and an icon is a categorisation — which is the one thing this plugin
 * does not do with dietary information.
 */
.apaxon-menu__allergens {
	margin: 0.375rem 0 0;
	padding-left: 0.625rem;
	border-left: 2px solid var(--am-accent);
	font-size: 0.8125em;
	color: var(--am-quiet);
}

/* ── Photographs ────────────────────────────────────────────────────── */

.apaxon-menu__photo {
	flex: none;
	/*
	 * Six rems, not five.
	 *
	 * A menu with photographs is selling the food, and at 80px the picture was
	 * a stamp beside the text rather than part of the reading. This is still
	 * a thumbnail — the templates that lead with photography are Cards and
	 * Grid — but it now holds its own against the dish name.
	 */
	width: 6rem;
	border-radius: var(--am-radius);
	overflow: hidden;
}

/*
 * Aspect ratio on the box, not the image.
 *
 * The space is reserved before the file arrives, so a menu of thirty dishes
 * does not shift under the reader's thumb as each photograph loads.
 */
.apaxon-menu__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ── Templates ──────────────────────────────────────────────────────── */

/* Classic — a printed menu, on a screen. The default. */

/* Modern — space and scale, no rules. */
.apaxon-menu--modern .apaxon-menu__section-name {
	border-bottom: 0;
	font-size: 1.5em;
	letter-spacing: 0.08em;
	text-align: center;
}

.apaxon-menu--modern .apaxon-menu__leader { display: none; }

.apaxon-menu--modern .apaxon-menu__head {
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.apaxon-menu--modern .apaxon-menu__body { text-align: center; }
.apaxon-menu--modern .apaxon-menu__dishes { gap: calc(var(--am-dish-gap) * 1.75); }
.apaxon-menu--modern .apaxon-menu__diets { justify-content: center; }
.apaxon-menu--modern .apaxon-menu__allergens { border-left: 0; padding-left: 0; }

/* Compact — dense single column, for long menus and wine lists. */
.apaxon-menu--compact { --am-dish-gap: 0.375rem; font-size: 0.9375em; }
.apaxon-menu--compact .apaxon-menu__description { display: none; }
.apaxon-menu--compact .apaxon-menu__photo { display: none; }

/* Cards — a card per dish. */
.apaxon-menu--cards .apaxon-menu__dishes {
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

.apaxon-menu--cards .apaxon-menu__dish {
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.875rem;
	border: 1px solid var(--am-line);
	border-radius: var(--am-radius);
}

.apaxon-menu--cards .apaxon-menu__photo { width: 100%; }
.apaxon-menu--cards .apaxon-menu__photo img { aspect-ratio: 4 / 3; }
.apaxon-menu--cards .apaxon-menu__leader { display: none; }

/* Grid — photograph-led, three across. */
.apaxon-menu--grid .apaxon-menu__dishes {
	grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}

.apaxon-menu--grid .apaxon-menu__dish { flex-direction: column; gap: 0.5rem; }
.apaxon-menu--grid .apaxon-menu__photo { width: 100%; }
.apaxon-menu--grid .apaxon-menu__photo img { aspect-ratio: 1; }
.apaxon-menu--grid .apaxon-menu__leader { display: none; }
.apaxon-menu--grid .apaxon-menu__description { display: none; }

/* Board — a chalkboard for the specials. */
/*
 * ── Bistro ───────────────────────────────────────────────────────────
 *
 * The look of a printed menu: the section name centred in a rule, prices in
 * the accent, dish descriptions in italic, and a little warmth behind it.
 *
 * It declares no font-family, like every other template here. That is not
 * timidity — a menu set in a face the rest of the site does not use reads as a
 * plugin someone bolted on, and the restaurant already chose its typography
 * when it chose its theme. What makes a menu look like a menu is the
 * arrangement: the rule through the heading, the leaders running to the price,
 * the italic under the name. All of that works in whatever face the theme
 * happens to be.
 */
.apaxon-menu--bistro {
	--am-gap: 2.25rem;
	--am-dish-gap: 1.375rem;

	/* A tint of the accent rather than a fixed cream, so the warmth belongs to
	   the restaurant's own colour and disappears on a dark theme instead of
	   glowing. */
	background: color-mix(in srgb, var(--am-accent) 4%, transparent);
	padding: clamp(1.25rem, 4cqi, 2.5rem);
	border-radius: var(--am-radius);
}

/* The heading sits in the middle of its own rule. */
.apaxon-menu--bistro .apaxon-menu__section-name {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0;
	border-bottom: 0;

	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.9375em;
}

.apaxon-menu--bistro .apaxon-menu__section-name::before,
.apaxon-menu--bistro .apaxon-menu__section-name::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--am-line);
}

.apaxon-menu--bistro .apaxon-menu__section-note {
	text-align: center;
	font-style: italic;
}

/* Italic under the name is the oldest convention on a menu. */
.apaxon-menu--bistro .apaxon-menu__description {
	font-style: italic;
}

.apaxon-menu--bistro .apaxon-menu__name {
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* A shade heavier than elsewhere: on this template the price is doing real
   work in the composition rather than just stating a number. */
.apaxon-menu--bistro .apaxon-menu__prices {
	font-weight: 700;
}

.apaxon-menu--bistro .apaxon-menu__diets {
	justify-content: flex-start;
}

/* The leaders are the point of this template, so they are never hidden and
   they are a shade more present than the default. */
.apaxon-menu--bistro .apaxon-menu__leader {
	opacity: 0.85;
}

.apaxon-menu--board {
	padding: clamp(1.25rem, 4cqi, 2rem);
	border: 6px double color-mix(in srgb, currentColor 30%, transparent);
	border-radius: var(--am-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.apaxon-menu--board .apaxon-menu__section-name {
	border-bottom-style: dashed;
	text-align: center;
	text-transform: uppercase;
}

.apaxon-menu--board .apaxon-menu__photo { display: none; }

/* ── Narrow ─────────────────────────────────────────────────────────── */

/*
 * Stated twice.
 *
 * The container query is the correct one — it fires whenever the menu itself
 * is narrow, wherever that happens. The viewport copy is a floor for browsers
 * without container query support (Safari before 16), where a phone would
 * otherwise get the wide layout. Both agree, so applying both costs nothing.
 */
@container apaxon-menu (max-width: 30rem) {
	.apaxon-menu__head { flex-wrap: wrap; }
	.apaxon-menu__leader { display: none; }
	.apaxon-menu__prices { width: 100%; }
	.apaxon-menu__photo { width: 3.5rem; }
	.apaxon-menu--cards .apaxon-menu__photo,
	.apaxon-menu--grid .apaxon-menu__photo { width: 100%; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 30rem) {
		.apaxon-menu__head { flex-wrap: wrap; }
		.apaxon-menu__leader { display: none; }
		.apaxon-menu__prices { width: 100%; }
		.apaxon-menu__photo { width: 3.5rem; }
	}
}

/* ── Print ──────────────────────────────────────────────────────────── */

/*
 * Staff print menus. They print them on the office laser printer, on A4, and
 * they do not want the photographs using a cartridge.
 */
@media print {
	.apaxon-menu {
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: none;
		font-size: 11pt;
	}

	.apaxon-menu__photo { display: none; }
	.apaxon-menu__section { break-inside: avoid-page; }
	.apaxon-menu__dish { break-inside: avoid-page; }
	.apaxon-menu__leader { border-bottom-color: #999; }
	.apaxon-menu__off,
	.apaxon-menu__flag { border: 1px solid #999; background: none; color: inherit; }
}

/* ── The builder placeholder ────────────────────────────────────────── */

/*
 * Shown in an editor canvas instead of the live menu. A live menu inside an
 * editor iframe is a trap for whoever is laying the page out: the filters are
 * clickable, they post the editor's own page, and the resulting confusion
 * reads as the plugin being broken.
 */
.apaxon-menu-placeholder {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 2.5rem 1.5rem;
	border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, currentColor 4%, transparent);
	text-align: center;
}

.apaxon-menu-placeholder strong { font-size: 1rem; }
.apaxon-menu-placeholder span { font-size: 0.8125rem; opacity: 0.7; }