/**
 * The Allergens page.
 *
 * The menu is the page: it carries its own disclaimer, filters and table, so it
 * is given the full width and a tall frame to work in rather than being boxed
 * into a column.
 *
 * @package Burger_Boi
 * @since   1.0.0
 */

.alg {
	background: #fff;
}

/*
 * The menu is served by Tenkites in a cross-origin frame, so its "Powered by"
 * badge cannot be styled from here — nothing on this side can reach inside it.
 *
 * It sits in the last --alg-badge px of their document, so the frame is run
 * that much taller than the box it shows through and the overflow is clipped.
 * Scrolled to the end, the badge lands in the clipped strip. Nothing of the
 * menu is lost: every row above it is still reached by scrolling, and only the
 * final strip — which holds the badge alone — is ever out of reach.
 *
 * Measured from their page (Aug 2026): the badge is a .k10-footer, 110px tall
 * on desktop and 125px (≈140px to the document foot) below their 767px
 * breakpoint, sitting under a 30px gap clear of the last menu row. The clip is
 * set a touch past it — 130 / 160 — so subpixel rounding, borders and browser
 * zoom cannot leave a sliver, while still stopping ~10px short of any content.
 * The frame is full-window width here, so their breakpoint is the same one as
 * below. Re-measure if the badge ever reappears.
 */
.alg-menu__frame {
	--alg-badge: 130px;

	/*
	 * Tall enough that the table is usable without scrolling a frame inside a
	 * scrolling page, which is the thing that makes embedded documents painful.
	 */
	height: calc(100vh - var(--header-h, 96px));
	min-height: 720px;
	overflow: hidden;
	background: #fff;
}

.alg-menu__frame iframe {
	display: block;
	width: 100%;
	height: calc(100% + var(--alg-badge));
	border: 0;
}

@media (max-width: 767px) {
	.alg-menu__frame {
		--alg-badge: 160px;
	}
}

/*
 * Keep the menu's own colours untouched by the browser.
 *
 * The menu is Tenkites' document in a cross-origin frame, so its purple —
 * #7030A0, the same value on every element at every width — is theirs to set and
 * ours only to leave alone. Nothing here can restyle it, and nothing here tries.
 *
 * What this does stop is the browser recolouring it after the fact. Two paths do
 * that, and both propagate into an embedded document:
 *
 *   color-scheme       Chrome's "Auto Dark Mode for Web Contents" rewrites the
 *                      palette of any page that has not said which schemes it
 *                      supports. Saying "light" opts the frame out.
 *   forced-color-adjust  Windows contrast themes replace author colours with the
 *                      system pair. The menu carries meaning in colour — the
 *                      contains/may-contain grid — so it keeps its own.
 *
 * Neither touches display-level conversion: a monitor in HDR, or one with a
 * wide-gamut profile, tone-maps everything the browser paints and is settled in
 * the OS display settings, not here.
 */
.alg {
	color-scheme: light;
}

.alg-menu__frame,
.alg-menu__frame iframe {
	forced-color-adjust: none;
}

/* -------------------------------------------------------------------------- */
/* The theme's own allergen menu                                               */
/* -------------------------------------------------------------------------- */

/*
 * Shown when no Tenkites address is set — see page-allergens.php. Laid out the
 * way the Tenkites menu was, to its measurements: #7030A0 purple, Poppins,
 * rotated column headers, a tick for "contains" and M for "may contain", and a
 * phone layout that trades the grid for a sentence per dish.
 */

.tk {
	--tk-purple: #7030a0;
	--tk-ink: #0b0a0a;
	--tk-row: #eef1f3;
	--tk-line: #b9b9c3;
	--tk-split: #0c334d;

	padding: 30px 15px 60px;
	color: var(--tk-ink);
	font-family: Poppins, var(--font);
}

.tk [hidden] {
	display: none !important;
}

/* Buttons ------------------------------------------------------------------ */

.tk-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 67px;
	padding: 10px 20px;
	border: 0;
	border-radius: 0;
	background: var(--tk-purple);
	color: #fff;
	font: 700 18px/1.2 Poppins, var(--font);
	text-transform: uppercase;
	cursor: pointer;
}

.tk-btn:focus-visible,
.tk-row__toggle:focus-visible,
.tk-clear:focus-visible,
.tk-disclaimer__ok:focus-visible {
	outline: 3px solid var(--tk-split);
	outline-offset: 2px;
}

.tk-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.tk-tabs__btn {
	min-height: 70px;
}

.tk-tabs__btn[aria-pressed="true"] {
	box-shadow: inset 0 -5px 0 var(--tk-split);
}

/* Chevron before a panel button, pointing up while its panel is open. */
.tk-btn--panel {
	justify-content: flex-start;
	padding-left: 24px;
}

.tk-btn--panel::before {
	content: "";
	width: 12px;
	height: 12px;
	margin: -7px 6px 0 2px;
	border-right: 4px solid #333;
	border-bottom: 4px solid #333;
	transform: rotate(45deg);
}

.tk-btn--panel[aria-expanded="true"]::before {
	margin-top: 8px;
	transform: rotate(-135deg);
}

/* Controls and panels ------------------------------------------------------ */

.tk-bar {
	margin-top: 16px;
}

.tk-controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 17px;
	align-content: start;
}

.tk-panel {
	grid-column: 1 / -1;
	margin-top: -17px;
	padding: 30px 80px;
	border: 1px solid var(--tk-purple);
	background: #fff;
	font-size: 13px;
	font-weight: 600;
}

.tk-panel--calories {
	padding: 20px;
}

.tk-panel__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 60px;
}

.tk-panel__top .tk-switch__text {
	max-width: 420px;
}

.tk-panel__top--end {
	justify-content: flex-end;
}

.tk-panel__label,
.tk-panel legend {
	padding: 0;
	font-weight: 700;
	text-transform: uppercase;
}

.tk-clear {
	margin-left: auto;
	padding: 10px 40px;
	border: 1px solid var(--tk-split);
	background: var(--tk-purple);
	color: #fff;
	font: 700 13px Poppins, var(--font);
	text-transform: uppercase;
	cursor: pointer;
}

.tk-panel__cols {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 36px;
	margin-top: 20px;
}

.tk-panel fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.tk-panel .tk-panel__suitable {
	padding-right: 36px;
	border-right: 1px solid var(--tk-split);
}

.tk-panel legend {
	margin-bottom: 18px;
}

.tk-panel__grid {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: column;
	gap: 10px 20px;
}

.tk-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.tk-panel__grid .tk-check {
	margin: 0;
}

.tk-check input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--tk-purple);
}

/* A pill switch, "Yes" / "No", as the original drew it. */
.tk-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.tk-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tk-switch__track {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	width: 55px;
	height: 22px;
	border: 1px solid var(--tk-split);
	border-radius: 11px;
	background: #fff;
	font-size: 11px;
	font-weight: 500;
}

.tk-switch__track::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tk-purple);
	transition: transform var(--duration) var(--ease);
}

.tk-switch input:checked + .tk-switch__track::after {
	transform: translateX(33px);
}

.tk-switch__on,
.tk-switch__off {
	position: absolute;
}

.tk-switch__on {
	left: 8px;
}

.tk-switch__off {
	right: 9px;
}

.tk-switch input:checked + .tk-switch__track .tk-switch__off,
.tk-switch input:not(:checked) + .tk-switch__track .tk-switch__on {
	visibility: hidden;
}

.tk-switch input:focus-visible + .tk-switch__track {
	outline: 2px solid var(--tk-split);
	outline-offset: 2px;
}

.tk-switch__text {
	font-weight: 600;
}

/* Calorie slider: two range inputs laid over one track. */
.tk-range__value {
	margin: 10px 0;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.tk-range {
	position: relative;
	height: 28px;
	margin: 0 20px;
}

.tk-range::before {
	content: "";
	position: absolute;
	top: 11px;
	right: 0;
	left: 0;
	height: 6px;
	background: var(--tk-split);
}

.tk-range input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	background: none;
	appearance: none;
	pointer-events: none;
}

.tk-range input::-webkit-slider-runnable-track {
	background: none;
}

.tk-range input::-webkit-slider-thumb {
	width: 6px;
	height: 28px;
	border: 0;
	border-radius: 0;
	background: var(--tk-split);
	appearance: none;
	cursor: pointer;
	pointer-events: auto;
}

.tk-range input::-moz-range-thumb {
	width: 6px;
	height: 28px;
	border: 0;
	border-radius: 0;
	background: var(--tk-split);
	cursor: pointer;
	pointer-events: auto;
}

.tk-range__ends {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-weight: 700;
}

.tk-range__hint {
	margin: 18px 0 0;
	font-weight: 700;
}

.tk-menu-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 20px;
	grid-column: 1 / -1;
	min-height: 67px;
	padding: 10px 20px 10px 58px;
	background: var(--tk-purple);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
}

.tk-menu-name__date {
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
}

.tk-expand {
	display: flex;
	justify-content: flex-end;
	margin: 28px 0 20px;
}

.tk-switch--expand .tk-switch__text {
	color: var(--tk-ink);
	font-size: 16px;
	font-weight: 700;
}

/* The grid ----------------------------------------------------------------- */

.tk-table {
	width: 100%;
	border: 1px solid var(--tk-line);
	border-collapse: collapse;
	font-size: 13px;
}

.tk[data-view="allergy"] .tk-n,
.tk[data-view="nutrition"] .tk-a {
	display: none;
}

.tk-table thead th,
.tk-table thead td {
	border: 1px solid var(--tk-line);
	background: var(--tk-purple);
	color: #fff;
	font-weight: 700;
}

.tk-group {
	height: 49px;
	text-transform: uppercase;
}

.tk-col {
	width: 44px;
	height: 163px;
	padding: 12px 0;
	vertical-align: bottom;
}

.tk-col span {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.tk-col--n {
	width: 60px;
}

.tk-table .tk-split {
	border-left: 2px solid var(--tk-split);
}

.tk-cat__row th {
	height: 50px;
	padding: 0 15px;
	border: 1px solid var(--tk-line);
	background: var(--tk-purple);
	color: #fff;
	font-weight: 700;
	text-align: left;
}

.tk-row > * {
	height: 50px;
	border: 1px solid var(--tk-line);
	background: var(--tk-row);
}

.tk-row__name {
	padding: 0 15px;
	font-weight: 600;
	text-align: left;
}

.tk-row__toggle {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: 700 13px/1.3 Poppins, var(--font);
	text-align: left;
	cursor: pointer;
}

.tk-chevron {
	flex: none;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 4px;
	border-right: 2px solid var(--tk-purple);
	border-bottom: 2px solid var(--tk-purple);
	transform: rotate(45deg);
}

.tk-row__toggle[aria-expanded="true"] .tk-chevron {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.tk-row__summary {
	display: none;
}

.tk-cell {
	text-align: center;
}

.tk-cell--n {
	font-weight: 700;
}

/* A dish with no allergen data: one plain sentence across the grid, never blank cells. */
.tk-row > .tk-pending {
	padding: 8px 16px;
	background: #fff8e1;
	color: #6b4e00;
	font-size: 13px;
	font-weight: 700;
	text-align: left;
}

.tk-detail__note {
	margin-top: 10px;
	font-weight: 600;
	font-style: italic;
}

/* The tick is drawn rather than typed, so it is the same weight in every font. */
.tk-tick {
	display: inline-block;
	width: 7px;
	height: 13px;
	margin-top: -4px;
	border-right: 2px solid var(--tk-split);
	border-bottom: 2px solid var(--tk-split);
	transform: rotate(40deg);
}

.tk-may {
	color: #2b2b2b;
	font-weight: 700;
}

.tk-detail td {
	padding: 30px 45px 16px;
	border: 1px solid var(--tk-line);
	background: #f2f2f2;
	font-size: 12px;
	font-weight: 700;
}

.tk-detail__head {
	margin: 0;
	text-transform: uppercase;
}

.tk-detail__head--nutrition {
	margin-top: 22px;
	margin-bottom: 4px;
}

.tk-detail__line {
	margin: 0;
}

.tk-detail__scroll {
	overflow-x: auto;
}

.tk-nutrition {
	border-collapse: collapse;
	font-size: 11px;
	text-align: center;
}

.tk-nutrition th,
.tk-nutrition td {
	height: 58px;
	padding: 0 10px;
	border: 1px solid #000;
	font-weight: 700;
	white-space: nowrap;
}

.tk-empty {
	margin: 30px 0 0;
	font-weight: 700;
	text-align: center;
}

/* Disclaimer --------------------------------------------------------------- */

.tk-disclaimer {
	width: min(1294px, calc(100% - 30px));
	max-width: none;
	margin: 30px auto;
	padding: 0;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
	color: var(--tk-ink);
	font-family: Poppins, var(--font);
}

/* Without JavaScript it is not a modal, just the first thing on the page. */
.tk-disclaimer:not(:modal) {
	position: static;
	width: auto;
	margin: 0 0 20px;
	border: 1px solid #e5e5e5;
	box-shadow: none;
}

.tk-disclaimer::backdrop {
	background: rgb(0 0 0 / 50%);
}

.tk-disclaimer__title {
	margin: 0;
	padding: 18px 20px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.tk-disclaimer__text {
	margin: 0;
	padding: 20px 15px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

.tk-disclaimer__foot {
	padding: 15px;
}

.tk-disclaimer__ok {
	padding: 7px 12px;
	border: 1px solid #4cae4c;
	border-radius: 2px;
	background: #5cb85c;
	color: var(--tk-ink);
	font: 700 14px Poppins, var(--font);
	text-transform: uppercase;
	cursor: pointer;
}

/* Phone -------------------------------------------------------------------- */

/*
 * The original's 767px breakpoint: the grid becomes a list, each dish followed
 * by a sentence for what it suits, contains and may contain. The view tabs and
 * Print go, as they did there — the list carries the allergy view only.
 */
@media (max-width: 767px) {
	.tk {
		padding: 25px 0 40px;
	}

	.tk .tk-tabs,
	.tk .tk-btn--print {
		display: none !important;
	}

	.tk-controls {
		grid-template-columns: 1fr;
	}

	.tk-bar,
	.tk-expand {
		padding-inline: 25px;
	}

	.tk-bar {
		margin-top: 0;
	}

	.tk-panel {
		padding: 20px;
	}

	.tk-panel__cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.tk-panel .tk-panel__suitable {
		padding-right: 0;
		border-right: 0;
	}

	.tk-panel__grid {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;
	}

	.tk-clear {
		margin-left: 0;
	}

	.tk-expand {
		justify-content: center;
	}

	.tk-table,
	.tk-table tbody,
	.tk-table tr,
	.tk-table th,
	.tk-table td {
		display: block;
	}

	.tk-table {
		border: 0;
	}

	.tk-table thead,
	.tk .tk-cell {
		display: none;
	}

	.tk-cat__row th {
		height: auto;
		padding: 22px 15px;
		border-width: 1px 0;
		font-size: 16px;
	}

	.tk-row > * {
		height: auto;
		background: #fff;
	}

	.tk-row__name {
		padding: 20px 15px 15px;
		border-width: 0 0 1px;
	}

	.tk-row__toggle {
		gap: 18px;
		font-size: 17px;
	}

	.tk-row__summary {
		display: grid;
		gap: 10px;
		margin: 14px 0 0 30px;
		font-size: 12px;
		font-weight: 700;
	}

	.tk-detail td {
		padding: 20px 15px;
		border-width: 0 0 1px;
	}
}

/* Print -------------------------------------------------------------------- */

@media print {
	.tk-tabs,
	.tk-controls > .tk-btn,
	.tk-panel,
	.tk-expand,
	.tk-disclaimer,
	.tk-chevron {
		display: none !important;
	}

	.tk-table thead th,
	.tk-table thead td,
	.tk-cat__row th,
	.tk-menu-name {
		print-color-adjust: exact;
	}
}