/*
Theme Name: It's Loaded
Theme URI: https://itsloaded.com
Template: kadence
Author: It's Loaded Food Truck
Author URI: https://itsloaded.com
Description: Child theme for It's Loaded Food Truck, Coalmont, Tennessee. Holds custom CSS and JS so it lives in version control instead of the WordPress Customizer.
Version: 0.5.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itsloaded-child
*/

/* Brand palette, mirroring Kadence Global Styles so CSS here can use names.
   If a swatch changes in Kadence, change it here too. */
:root {
  --il-burgundy:  #7A1F2A;
  --il-gold:      #E8A02C;
  --il-cream:     #FDFBF6;
  --il-ink:       #1F1A14;
}

/* Custom rules go below. Nothing has been migrated out of the Customizer yet;
   the Additional CSS panel is still the live source. See _docs/README.md. */

/* ---------------------------------------------------------------------------
   Homepage hero sits flush under the header.

   Kadence puts 5rem of vertical margin on .content-area, which is right for
   every page with a normal content column and wrong for a full-bleed hero.
   Measured against the live page rather than taken from the build handoff:
   the whole 80px gap comes from this one margin. The handoff also prescribes
   zeroing .entry-content-wrap padding and killing a box-shadow on
   .entry.single-entry; against Kadence 1.4.5 both are already zero, so those
   rules would be noise.

   No !important: .home .content-area outranks Kadence's bare .content-area on
   specificity, and this stylesheet loads after theirs. If a rule here ever
   seems to need !important, check the load order before reaching for it.

   If more pages get full-bleed heroes, swap .home for a shared body class
   rather than accumulating page-specific overrides.
--------------------------------------------------------------------------- */
.home .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Header keeps an edge gutter.

   Measured, because the build handoff diagnoses this one wrong. It reports the
   "Get a Catering Quote" button overflowing the viewport and suggests
   shortening the text. It does not overflow: document.scrollWidth equals
   clientWidth at every width tested from 768 to 1440. What actually happens is
   that Kadence's content container carries 24px of edge padding while the
   header row carries none, so the button's right edge and the viewport's right
   edge are the same pixel and it appears welded to the glass.

   So this is a gutter, not a copy problem, and the button text can stay as
   approved.

   Uses Kadence's own edge-padding variable rather than a hardcoded 24px, so
   changing Content Left/Right Edge Spacing in the Customizer moves the header
   with everything else. The fallback matches the current global value.
--------------------------------------------------------------------------- */
.site-main-header-inner-wrap,
.site-top-header-wrap .site-header-row,
.site-bottom-header-wrap .site-header-row {
	padding-left: var(--global-content-edge-padding, 1.5rem);
	padding-right: var(--global-content-edge-padding, 1.5rem);
}

/* ---------------------------------------------------------------------------
   Hero subhead and CTAs.

   Specificity note, because it is the whole reason these selectors look
   heavier than they need to: Kadence's global button style is outline, a
   burgundy border on a transparent fill, which is invisible on a burgundy
   hero. Its rules land at two classes, so these use three (the block class
   plus the modifier plus the link) to win on specificity rather than reaching
   for !important. That keeps the hero overridable later instead of starting an
   arms race the way the Customizer rules did.
--------------------------------------------------------------------------- */
.hero-subhead {
	color: var(--il-cream);
	font-size: 20px;
	line-height: 1.5;
	max-width: 700px;
	margin: 0 auto 32px;
}

@media (max-width: 768px) {
	.hero-subhead {
		font-size: 17px;
	}
}

.wp-block-button.hero-cta-primary .wp-block-button__link,
.wp-block-button.hero-cta-secondary .wp-block-button__link {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 14px 28px;
	border-radius: 0;
	border-style: solid;
	border-width: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Primary: gold fill, dark text. Dark on gold rather than cream on gold,
   which would not carry enough contrast to be readable. */
.wp-block-button.hero-cta-primary .wp-block-button__link {
	background-color: var(--il-gold);
	border-color: var(--il-gold);
	color: var(--il-ink);
}

.wp-block-button.hero-cta-primary .wp-block-button__link:hover,
.wp-block-button.hero-cta-primary .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--il-gold);
}

/* Secondary: outlined cream, filling to cream-on-burgundy on hover. */
.wp-block-button.hero-cta-secondary .wp-block-button__link {
	background-color: transparent;
	border-color: var(--il-cream);
	color: var(--il-cream);
}

.wp-block-button.hero-cta-secondary .wp-block-button__link:hover,
.wp-block-button.hero-cta-secondary .wp-block-button__link:focus-visible {
	background-color: var(--il-cream);
	color: var(--il-burgundy);
}

/* Space between the two, and a sane wrap point on small screens. Core's flex
   layout stacks them below its own breakpoint; this only sets the gutter. */
.wp-block-buttons.is-content-justification-center {
	gap: 16px;
}

/* ---------------------------------------------------------------------------
   Order bar, above the header.

   Gold rather than burgundy. Burgundy is the faithful translation of the Pyro
   bar, which uses that brand's primary, but here it would stack burgundy bar,
   cream header, burgundy hero, and the header would read as a gap between two
   halves of the same block. Gold is already the primary-action colour on the
   hero button, which is what a bar like this is.

   Dark text on gold, not cream, for contrast at this size.
--------------------------------------------------------------------------- */
.itsloaded-orderbar {
	background-color: var(--il-gold);
	text-align: center;
}

.itsloaded-orderbar a {
	display: block;
	padding: 12px 16px;
	color: var(--il-ink);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.itsloaded-orderbar a:hover,
.itsloaded-orderbar a:focus-visible {
	background-color: var(--il-ink);
	color: var(--il-gold);
}

.itsloaded-orderbar-mark {
	margin-right: 0.5em;
	font-size: 0.8em;
}

@media (max-width: 480px) {
	.itsloaded-orderbar a {
		font-size: 13px;
		padding: 10px 12px;
	}
}

/* ---------------------------------------------------------------------------
   Pin the order bar above the sticky header.

   Kadence's header row is position:fixed at top:0 with z-index 1200 from page
   load, not just after scrolling, so a bar earlier in the document gets painted
   over and is invisible. Measured on the live page; this is why the Pyro Pies
   version of this bar cannot simply be copied, since their header is not fixed
   at the top of the page.

   So the bar is fixed too, above the header in the stack, and the header is
   pushed down by exactly the bar's height. One variable drives both, and the
   anchor's line-height is set explicitly so that height is arithmetic rather
   than whatever the inherited line-height happens to produce.
--------------------------------------------------------------------------- */
:root {
	--il-orderbar-h: 48px;
}

.itsloaded-orderbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1300;
	/* Pin the height rather than letting content decide it. Left to itself the
	   bar measured 50px against a 48px header offset, so two pixels hid under
	   the header: the kind of gap that reads as a hairline seam and gets blamed
	   on the header. */
	height: var(--il-orderbar-h);
}

.itsloaded-orderbar a {
	box-sizing: border-box;
	height: 100%;
	line-height: 24px;
	padding: 12px 16px;
}

.site-main-header-wrap,
.site-header-upper-wrap {
	top: var(--il-orderbar-h);
}

body {
	padding-top: var(--il-orderbar-h);
}

@media (max-width: 480px) {
	:root {
		--il-orderbar-h: 40px;
	}

	.itsloaded-orderbar a {
		line-height: 20px;
		padding: 10px 12px;
	}
}

/* Order Now, in the nav. Solid burgundy so the three actions read as a
   hierarchy rather than a row of samey buttons: gold bar loudest, solid
   burgundy to order, outlined burgundy for the slower catering decision. */
.itsloaded-order-nav > a {
	display: inline-block;
	margin-left: 0.5em;
	padding: 10px 18px;
	background-color: var(--il-burgundy);
	color: var(--il-cream) !important;
	border: 2px solid var(--il-burgundy);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.itsloaded-order-nav > a:hover,
.itsloaded-order-nav > a:focus-visible {
	background-color: transparent;
	color: var(--il-burgundy) !important;
}

/* ---------------------------------------------------------------------------
   Schedule section.

   Three columns on desktop, stacking on mobile. The zone label sits under the
   time rather than beside it: CENTRAL and EASTERN are long words and putting
   them inline makes the times ragged.
--------------------------------------------------------------------------- */
.il-sched {
	max-width: 1000px;
	margin: 0 auto;
	padding: 4rem 1.5rem;
}

.il-sched-heading {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	margin-bottom: 2rem;
}

.il-sched-row {
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	gap: 1rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(31, 26, 20, 0.12);
}

.il-sched-when {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--il-burgundy);
}

.il-sched-where {
	font-size: 17px;
}

.il-sched-where a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.il-sched-hours {
	text-align: right;
	font-size: 15px;
	white-space: nowrap;
}

.il-sched-zone {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.il-sched-empty {
	max-width: 34rem;
	margin: 0 auto 1.5rem;
	text-align: center;
	font-size: 18px;
	line-height: 1.5;
}

.il-sched-empty-links {
	text-align: center;
}

.il-sched-empty-links a {
	display: inline-block;
	margin: 0 0.5rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--il-burgundy);
}

@media (max-width: 700px) {
	.il-sched-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.il-sched-hours {
		text-align: left;
	}

	.il-sched-zone {
		display: inline;
		margin-left: 0.5em;
	}
}

/* ---------------------------------------------------------------------------
   Anchor scrolling.

   The Schedule nav item is an on-page anchor, so two things are needed.

   scroll-margin-top keeps the pinned order bar from covering the heading it
   just scrolled to; without it the bar sits on top of the words. It tracks the
   same variable as the bar's height, so the two cannot drift apart.

   Smooth scroll is the cheap version of the motion the reference site has. It
   is behind prefers-reduced-motion, because a long animated jump is a real
   problem for people who get motion sick, and the jump still works instantly
   for them.
--------------------------------------------------------------------------- */
#schedule {
	scroll-margin-top: calc(var(--il-orderbar-h) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Private bookings sit in the list unlinked, with a quiet marker so nobody
   reads one as a stop they can turn up to. */
.il-sched-private {
	display: inline-block;
	margin-left: 0.6em;
	padding: 2px 8px;
	border: 1px solid rgba(31, 26, 20, 0.25);
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Hero photographs.

   Three stills crossfading with a slow drift, standing in for video until real
   footage exists. One element per photo because a crossfade needs two things
   visible at once, which a single background cannot do.

   The burgundy stays underneath. It is what shows while the photos load, what
   a reduced-motion reader sees, and what keeps the headline legible if an
   image ever 404s.
--------------------------------------------------------------------------- */
.il-hero-photos {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.il-hero-photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	will-change: opacity, transform;
	animation: il-hero-cycle 30s linear infinite;
}

/* Ten seconds each. The fade is a third of the cycle so two images overlap for
   a long moment, which reads as a dissolve rather than a cut. */
.il-hero-photo-1 { animation-delay: 0s; }
.il-hero-photo-2 { animation-delay: 10s; }
.il-hero-photo-3 { animation-delay: 20s; }

@keyframes il-hero-cycle {
	/* Starts already cropped in. These are whole-bowl product shots with a lot
	   of empty stainless around the food, and at scale 1 the hero reads as a
	   dish photographed on a worktop rather than as texture. Cropping past the
	   rim fills the frame with the food itself. */
	0%              { opacity: 0; transform: scale(1.14); }
	5%              { opacity: 1; }
	28%             { opacity: 1; }
	33%             { opacity: 0; }
	100%            { opacity: 0; transform: scale(1.24); }
}

/* Burgundy wash over the photographs. Without it the cream headline lands on
   whatever happens to be behind it, and these shots are bright. The tint is the
   brand colour rather than neutral black, so the section still reads as
   burgundy with food in it. */
/* Nothing over the photograph at all. Owner's call after seeing the scrim on
   his own screen and finding it too heavy.

   Recorded so nobody quietly re-adds it: this fails WCAG contrast in the worst
   spots. Sampling the real pixels behind the copy across all three photos, the
   headline drops to 1.18 where it crosses the cheese sauce and the subhead to
   1.27, against the 3.0 and 4.5 that large and body text need. Averages are
   fine, 5.7 and 9.2; it is the bright patches that lose letters.

   The text-shadow below is kept. It darkens nothing in the photograph, only
   outlines the glyphs, so it costs nothing the owner objected to.

   The real fix is photographs with space in them. These are single centred
   objects, so the subject sits exactly where the headline goes and no amount of
   CSS separates them. */

.hero-headline,
.hero-subhead {
	text-shadow: 0 2px 14px rgba(31, 26, 20, 0.55), 0 1px 3px rgba(31, 26, 20, 0.7);
}

/* The headline, subhead and buttons must sit above the photo layer. */
.home .kb-row-layout-wrap.kt-row-has-bg > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	/* No drift, no crossfade, no flashing. One still photograph, held. */
	.il-hero-photo {
		animation: none;
	}

	.il-hero-photo-1 {
		opacity: 1;
	}
}

/* The line under the schedule heading. Quiet: it is an instruction, not a
   selling point, and it sits directly under a heading that is already loud. */
.il-sched-note {
	margin: -1rem auto 2rem;
	text-align: center;
	font-size: 15px;
	opacity: 0.75;
}

/* ==========================================================================
   Inquiry form
   Behaviour is ported from the Pyro Pies theme; the look deliberately is not.
   The two sites are meant to look nothing alike, so this is built from the
   It's Loaded palette rather than restyled from theirs: cream card, burgundy
   rules, gold only on focus where it has to be seen.
   ========================================================================== */

.il-inquiry {
	max-width: 640px;
	margin: 2.5rem auto;
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--il-cream);
	border: 1px solid rgba(122, 31, 42, 0.18);
	border-radius: 4px;
}

.il-inq-note {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	border-left: 4px solid var(--il-burgundy);
	background: rgba(122, 31, 42, 0.06);
	font-size: 15px;
	line-height: 1.5;
}

.il-inq-ok {
	border-left-color: var(--il-gold);
	background: rgba(232, 160, 44, 0.12);
}

.il-inq-bad {
	border-left-color: var(--il-burgundy);
	background: rgba(122, 31, 42, 0.1);
	font-weight: 600;
}

.il-inq-field {
	margin: 0 0 1.15rem;
}

/* Explicit, even though nothing above sets `display` on these rows yet.
   `el.hidden` works only through the browser's own `[hidden] { display: none }`,
   so ANY author display value on a row defeats it outright: the attribute is
   set, the script provably ran, and nothing changes on screen. Laying form rows
   out with grid or flex is the obvious next change somebody makes here, and
   either one triggers it. This rule means that change stays safe.

   Verified live on 2026-09-09 before adding it: 9 of 14 extras hidden, 9
   computing to display:none, so the guard is insurance rather than a fix. The
   sibling site had the live version of this bug. */
.il-inq-field[hidden] {
	display: none;
}

.il-inq-field label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--il-burgundy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.il-req {
	color: var(--il-gold);
}

.il-inq-field input,
.il-inq-field select,
.il-inq-field textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba(31, 26, 20, 0.25);
	border-radius: 3px;
	background: #fff;
	color: var(--il-ink);
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
}

.il-inq-field textarea {
	resize: vertical;
}

.il-inq-field input:focus,
.il-inq-field select:focus,
.il-inq-field textarea:focus {
	outline: 2px solid var(--il-gold);
	outline-offset: 1px;
	border-color: var(--il-gold);
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are display:none and this one is meant to be filled in. */
.il-inq-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.il-inq-submit {
	margin: 1.5rem 0 0;
}

.il-inq-submit button {
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 3px;
	background: var(--il-burgundy);
	color: var(--il-cream);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.il-inq-submit button:hover,
.il-inq-submit button:focus {
	background: var(--il-gold);
	color: var(--il-ink);
}

.il-inq-small {
	margin: 1rem 0 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.75;
}

/* ==========================================================================
   Email signup box
   Jeremy, 2026-09-17: noticed, but not at the expense of being so big. A
   centered box about half the content width on a computer (560px of ~1150),
   full width on a phone, where half would be too narrow to type in. Reuses
   the inquiry form's field styles and tightens the spacing inside the box.
   ========================================================================== */

.il-signup {
	max-width: 560px;
	margin: 2.5rem auto;
	padding: 1.5rem clamp(1rem, 4vw, 1.75rem) 1.25rem;
	background: var(--il-cream);
	border: 3px solid var(--il-burgundy);
	border-top-width: 8px;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(31, 26, 20, 0.12);
}

.il-sig-title {
	margin: 0 0 0.35rem;
	font-family: 'Oswald', sans-serif;
	font-size: clamp(1.8rem, 5vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--il-burgundy);
}

.il-sig-offer {
	margin: 0 0 1.1rem;
	text-align: center;
	font-size: 16px;
	line-height: 1.45;
}

.il-signup .il-inq-note {
	margin-bottom: 1rem;
}

.il-signup .il-inq-field {
	margin: 0 0 0.8rem;
}

/* First name and email side by side when there is room, to keep the box
   short. Only those two rows are <p class="il-inq-field">; everything else
   spans the full width. Hidden inputs are display:none and the honeypot is
   absolutely positioned, so neither takes a grid cell. */
@media (min-width: 560px) {
	.il-sig-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 0.75rem;
	}

	.il-sig-form > * {
		grid-column: 1 / -1;
	}

	.il-sig-form > p.il-inq-field {
		grid-column: auto;
	}
}

.il-signup .il-inq-field label {
	font-size: 13px;
}

.il-sig-partner {
	margin: 0.9rem 0 0;
	font-size: 14px;
	line-height: 1.45;
}

.il-sig-check {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	cursor: pointer;
}

.il-sig-check a {
	color: var(--il-burgundy);
	font-weight: 600;
	text-decoration: underline;
}

.il-sig-check input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0.15rem 0 0;
	accent-color: var(--il-burgundy);
}

.il-sig-more {
	margin: 0.2rem 0 0 1.65rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--il-burgundy);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	cursor: pointer;
}

/* Same trap as the inquiry rows: the script hides this with el.hidden when
   <dialog> is unsupported, and an author display value would defeat it. */
.il-sig-more[hidden] {
	display: none;
}

.il-sig-partner .il-inq-small {
	margin: 0.35rem 0 0 1.65rem;
}

.il-signup .il-inq-submit {
	margin: 1.1rem 0 0;
	text-align: center;
}

.il-signup .il-inq-submit button {
	width: 100%;
	max-width: 280px;
}

.il-signup .il-inq-form > .il-inq-small {
	margin-top: 0.8rem;
	text-align: center;
	font-size: 12px;
}

.il-sig-preview {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	background: rgba(232, 160, 44, 0.18);
	font-size: 13px;
}

.il-sig-dialog {
	max-width: min(480px, calc(100vw - 2rem));
	padding: 1.5rem;
	border: 3px solid var(--il-burgundy);
	border-radius: 6px;
	background: var(--il-cream);
	color: var(--il-ink);
}

.il-sig-dialog::backdrop {
	background: rgba(31, 26, 20, 0.55);
}

.il-sig-dialog h3 {
	margin: 0 0 0.6rem;
	font-family: 'Oswald', sans-serif;
	color: var(--il-burgundy);
}

.il-sig-dialog button {
	margin-top: 0.75rem;
	padding: 0.55rem 1.25rem;
	border: 0;
	border-radius: 3px;
	background: var(--il-burgundy);
	color: var(--il-cream);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================================
   Menu page
   Rendered from menu.json, which is exported from the TV board. The words are
   the board's; only the layout belongs here.
   ========================================================================== */

.il-menu-choose {
	margin: 0 0 1.5rem;
	font-weight: 600;
	color: var(--il-burgundy);
}

.il-menu-bases {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 2rem;
	padding: 1.25rem;
	background: var(--il-cream);
	border-left: 4px solid var(--il-gold);
}

@media (min-width: 700px) {
	.il-menu-bases {
		grid-template-columns: 1fr 1fr;
	}
}

.il-menu-base h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
}

.il-menu-base p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.il-menu-items {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.il-menu-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(31, 26, 20, 0.12);
}

.il-menu-name {
	font-weight: 700;
	color: var(--il-burgundy);
}

.il-menu-price {
	font-weight: 700;
	white-space: nowrap;
}

/* Full width under both, so a long description does not squeeze the price. */
.il-menu-desc {
	grid-column: 1 / -1;
	margin-top: 0.2rem;
	font-size: 15px;
	line-height: 1.45;
}

.il-menu-updated {
	font-size: 13px;
	opacity: 0.7;
}

/* ==========================================================================
   Town pages (/winchester-tn and the rest). Facts come from inc/towns.php.
   ========================================================================== */
.il-town-glance {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.6rem 1.25rem;
	max-width: 40rem;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border-left: 4px solid var(--il-gold);
}

.il-town-glance dt {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--il-burgundy);
	padding-top: 0.2rem;
}

.il-town-glance dd {
	margin: 0;
}

.il-town-glance a {
	color: var(--il-burgundy);
}

@media (max-width: 540px) {
	.il-town-glance {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
	.il-town-glance dd {
		margin-bottom: 0.6rem;
	}
}

.il-town-tz {
	max-width: 40rem;
	font-size: 15px;
	opacity: 0.8;
}

/* "Our regular stops" under the home and /schedule/ list. */
.il-sched-towns {
	text-align: center;
	font-size: 15px;
	margin-top: 1.5rem;
}

.il-sched-towns a {
	color: var(--il-burgundy);
	font-weight: 600;
}