/* Pizano's allergens tables — [allergens]
Colours and fonts are custom properties at the top; they match the [pizanos_menu] styles. */

.pz-allergens {
	--al-red: #ad1e23;
	--al-green: #1f4a2c;
	--al-ink: #1c1b19;
	--al-muted: #5d5b55;
	--al-rule: #e3ddd0;
	--al-bg: #fffcf4;
	--al-stripe: #f5f1e7;
	--al-font-display: var(--h2_typography-font-family,"Zilla Slab","Roboto Slab",Georgia,serif);
	--al-font-body: var(--body_typography-font-family,"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif);
	color: var(--al-ink);
	font-family: var(--al-font-body);
}

.pz-allergens *,
.pz-allergens *::before,
.pz-allergens *::after {
	box-sizing: border-box;
}

.pz-allergens .al-key {
	margin: 0 0 32px;
	color: var(--al-muted);
	font-size: 15px;
}

.pz-allergens .al-section {
	margin: 0 0 clamp(48px,6vw,80px);
	scroll-margin-top: 120px;
}

.pz-allergens .al-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 0;
	margin: 0;
}

.pz-allergens .al-wrap:focus {
	outline: none;
}

.pz-allergens .al-wrap:focus-visible {
	outline: 2px solid var(--al-red);
	outline-offset: 4px;
}

.pz-allergens table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-variant-numeric: tabular-nums;
}

.pz-allergens caption {
	caption-side: top;
	text-align: left;
	padding: 0;
	border: 0;
}

.pz-allergens .al-section h2.al-title {
	margin: 0 0 20px;
	padding: 0 0 14px;
	border-bottom: 2px solid var(--al-green);
	color: var(--al-red);
	font-family: var(--al-font-display);
	font-size: clamp(28px,3.4vw,38px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.pz-allergens th,
.pz-allergens td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--al-rule);
	background: var(--al-bg);
	vertical-align: middle;
}

.pz-allergens thead th {
	padding-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--al-ink);
	color: var(--al-ink);
	font-family: var(--al-font-display);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	vertical-align: bottom;
}

.pz-allergens thead th:first-child {
	text-align: left;
}

.pz-allergens tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 180px;
	color: var(--al-ink);
	font-family: var(--al-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

.pz-allergens tbody tr:nth-child(even) th,
.pz-allergens tbody tr:nth-child(even) td {
	background: var(--al-stripe);
}

.pz-allergens td {
	width: 9%;
	text-align: center;
	color: var(--al-ink);
	font-size: 17px;
}

.pz-allergens td.al-y {
	color: var(--al-red);
	font-weight: 700;
}

.pz-allergens .al-note {
	margin: 16px 0 0;
	color: var(--al-muted);
	font-size: 13px;
	font-style: italic;
}

.pz-allergens .al-info {
	padding-top: 16px;
	border-top: 1px solid var(--al-rule);
	font-size: 15px;
	line-height: 1.6;
}

.pz-allergens .al-info p {
	margin: 0 0 12px;
}

.pz-allergens .al-info p:last-child {
	color: var(--al-muted);
	font-size: 13px;
}
@media (max-width: 640px) {
	.pz-allergens td {
		font-size: 15px;
	}
}

@media print {
	.pz-allergens tbody th {
		position: static;
	}
}

@media (max-width: 700px) {
	.pz-allergens .al-wrap {
		overflow-x: visible;
	}
	.pz-allergens table {
		min-width: 0;
		table-layout: fixed;
	}
	.pz-allergens th,
	.pz-allergens td {
		padding: 10px 0;
	}
	.pz-allergens thead th:first-child,
	.pz-allergens tbody th {
		position: static;
		width: 36%;
		min-width: 0;
		padding: 10px 6px 10px 8px;
		white-space: normal;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
	.pz-allergens thead th:first-child {
		font-size: 11px;
	}
	.pz-allergens tbody th {
		font-size: 14px;
		line-height: 1.25;
	}
	.pz-allergens thead th {
		border-bottom: 0;
	}
	.pz-allergens tbody tr:first-child > * {
		border-top: 1px solid var(--al-ink);
	}
	.pz-allergens thead th:not(:first-child) {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		height: auto;
		padding: 8px 0;
		text-align: start;
		font-size: 11px;
		letter-spacing: 0.02em;
	}
	@supports (writing-mode: sideways-lr) {
		.pz-allergens thead th:not(:first-child) {
			writing-mode: sideways-lr;
			transform: none;
		}
	}
	.pz-allergens td {
		width: auto;
		font-size: 14px;
	}
}