/* WQ Meny
   Typografin följer menysidans befintliga formgivning. Färgerna hämtas från
   temats variabler (--btn-gold, --dark) med reservvärden om de saknas. */

.wq-meny {
	/* Avdelningsrubrik */
	--wq-meny-rubrik-font: "Familjen Grotesk", system-ui, sans-serif;
	--wq-meny-rubrik-storlek: 14px;
	--wq-meny-rubrik-vikt: 600;
	--wq-meny-rubrik-spacing: 1.2px;
	--wq-meny-rubrik-farg: var(--btn-gold, #b0904e);

	/* Rättnamn */
	--wq-meny-namn-font: "Aujournuit", Georgia, serif;
	--wq-meny-namn-storlek: 24px;
	--wq-meny-namn-vikt: 400;
	--wq-meny-namn-spacing: 0.48px;
	--wq-meny-namn-radhojd: 32px;
	--wq-meny-namn-farg: var(--dark, #1a1a1a);

	/* Pris – eget, smalare snitt */
	--wq-meny-pris-font: "Aujournuit Densed", "Aujournuit", Georgia, serif;
	--wq-meny-pris-storlek: 24px;
	--wq-meny-pris-vikt: 400;
	--wq-meny-pris-radhojd: 110%;
	--wq-meny-pris-farg: var(--dark, #1a1a1a);

	/* Beskrivning och not */
	--wq-meny-text-font: "Familjen Grotesk", system-ui, sans-serif;
	--wq-meny-text-storlek: 12px;
	--wq-meny-text-radhojd: 1.5;
	--wq-meny-dampad: 0.62;

	/* Rytm */
	--wq-meny-avdelning-gap: 2.75rem;
	--wq-meny-item-gap: 1.35rem;
	--wq-meny-kolumn-gap: 7rem;
	
	

	display: grid;
	gap: var(--wq-meny-avdelning-gap);
}

.wq-meny[id] {
	scroll-margin-top: var(--wq-meny-ankar-offset, 120px);
}
.wq-meny__avdelning {
	display: grid;
	gap: 1.1rem;
}

.wq-meny__rubrik {
	 font-family: "Familjen Grotesk" !important;
    font-weight: 600;
    font-size: 14px !important;
    color: var(--btn-gold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.wq-meny__prisetikett {
	font: inherit;
	letter-spacing: inherit;
}

.wq-meny__prisetikett::before {
	content: " – ";
}

.wq-meny__ingress {
	margin: 0;
	max-width: 62ch;
	font-family: var(--wq-meny-text-font);
	font-size: 0.85rem;
	opacity: var(--wq-meny-dampad);
}

/* Kolumnerna balanseras automatiskt. break-inside håller ihop varje rätt med
   sin beskrivning så att inget delas vid kolumnbrytningen. */
.wq-meny__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	column-gap: var(--wq-meny-kolumn-gap);
}

.wq-meny--kolumner-2 .wq-meny__lista { columns: 2; }
.wq-meny--kolumner-3 .wq-meny__lista { columns: 3; }

.wq-meny__ratt {
	break-inside: avoid;
	page-break-inside: avoid;
	padding-bottom: var(--wq-meny-item-gap);
}

.wq-meny__topp {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
}

.wq-meny__namn {
	margin: 0;
	font-family: var(--wq-meny-namn-font);
	font-size: var(--wq-meny-namn-storlek);
	font-weight: var(--wq-meny-namn-vikt);
	letter-spacing: var(--wq-meny-namn-spacing);
	line-height: var(--wq-meny-namn-radhojd);
	text-transform: uppercase;
	color: var(--wq-meny-namn-farg);
}

.wq-meny__pris {
	flex: 0 0 auto;
	font-family: var(--wq-meny-pris-font);
	font-size: var(--wq-meny-pris-storlek);
	font-weight: var(--wq-meny-pris-vikt);
	line-height: var(--wq-meny-pris-radhojd);
	color: var(--wq-meny-pris-farg);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wq-meny__beskrivning,
.wq-meny__rader,
.wq-meny__not {
	margin: 0.25rem 0 0;
	font-family: var(--wq-meny-text-font);
	font-size: 14px; !important;
	font-style: italic;
	line-height: var(--wq-meny-text-radhojd);
	opacity: var(--wq-meny-dampad);
}

.wq-meny__rader {
	padding: 0;
	list-style: none;
	line-height: 8px;
}

.wq-meny__not {
	opacity: 0.48;
}

/* ---- Smal skärm ---------------------------------------------------------- */

@media (max-width: 900px) {
	.wq-meny {
		--wq-meny-kolumn-gap: 3rem;
	}

	.wq-meny--kolumner-3 .wq-meny__lista { columns: 2; }
}

@media (max-width: 600px) {
	.wq-meny {
		--wq-meny-namn-storlek: 20px;
		--wq-meny-pris-storlek: 20px;
		--wq-meny-namn-radhojd: 26px;
	}

	.wq-meny--kolumner-2 .wq-meny__lista,
	.wq-meny--kolumner-3 .wq-meny__lista {
		columns: 1;
	}

	.wq-meny__topp {
		gap: 1rem;
	}
}