/**
 * 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;
}