/* ============================================================
   WMC House — footer
   NAP printed from the venue record, so the text a guest reads
   and the schema a crawler reads can never disagree.
   ============================================================ */

/* === Map façade === */
/* Base ground, NOT ground-alt. Guest Reviews above it is a `sec--alt` band, so
   while these matched they read as one very tall section with a map dropped in
   the middle of it. The page now alternates all the way down:
   Information (alt) · The Restaurant (ground) · Reviews (alt) · Find us (ground). */
.map { background: var(--ground); color: var(--ink); padding: var(--s-4) var(--gutter); }
/* Capped, not proportional. At 5fr/7fr on a wide screen the frame grew to
   most of the viewport for what is a footer courtesy. */
.map__inner { display: grid; grid-template-columns: 1fr minmax(0, 620px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: var(--wrap); margin-inline: auto; }
 /* .foot__lbl is written for the dark footer, so it is invisible on this
    light band. Rebind it inside the map rather than fork the class. */
.map .foot__lbl { color: var(--ink-soft); }
.map__addr { font-family: var(--font-display); font-size: var(--h3-size); line-height: 1.15; margin: .75rem 0 1.5rem; }
.map__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
/* .btn sets display:inline-flex, which outranks the [hidden] attribute — so
   the button stayed on screen after the map had loaded. */
.map__actions .btn[hidden] { display: none; }

/* Reserves the box before anything loads, so revealing the map cannot shift
   the page under a guest who is mid-scroll. */
.map__frame { position: relative; aspect-ratio: 16 / 9; max-height: 320px; display: grid; place-items: center; background: var(--ground-alt); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }

/* Stills stack, crossfaded, one visible at a time. `.shot` is shared with
   The Restaurant section — see base.css. */
.map__frame.is-loaded .shot { display: none; }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ============================================================
   Footer (rebuilt 1.67.0)
   Legal band first, on its own tint; then four columns with a
   job each: brand (logo, baseline, socials) · Menus · Visit ·
   Hours. Tablet: brand across the top, three below. Phone: one
   column, each group on its own hairline, menus as one row.
   ============================================================ */
.foot { background: var(--bg-footer, var(--dark)); color: var(--on-dark); }

/* === Legal band === */
.foot__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem var(--s-4); padding: 1.05rem var(--gutter); background: color-mix(in srgb, var(--on-dark) 9%, var(--dark)); border-bottom: 1px solid var(--rule-dark); text-align: center; }
.foot__legal-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem var(--s-4); }
.foot__legal-list a { color: var(--on-dark); opacity: .78; transition: opacity .3s ease; }
.foot__legal-list a:hover { opacity: 1; }

/* === Main === */
.foot__main { max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-3); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--s-4) clamp(1.5rem, 4vw, 4rem); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule-dark); }

/* === Brand === */
.foot__mark { font-family: var(--font-display); font-size: var(--h2-size); line-height: 1; margin: 0; }
.foot__mark--logo { line-height: 0; }
.foot__logo { display: block; height: 56px; width: auto; max-width: 260px; object-fit: contain; }
.foot__parent { margin: 1rem 0 0; color: var(--on-dark-soft); max-width: 30ch; }

/* === Columns === */
.foot__lbl { color: var(--on-dark-soft); margin: 0 0 var(--s-2); }
.foot__lbl--gap { margin-top: var(--s-3); }
.foot__addr { font-style: normal; color: var(--on-dark-soft); margin: 0 0 var(--s-1); max-width: 26ch; }
.foot__list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.foot__list li { color: var(--on-dark-soft); padding: .3rem 0; }
.foot__list a { color: var(--on-dark-soft); overflow-wrap: anywhere; transition: color .3s ease; }
.foot__list a:hover { color: var(--on-dark); }

/* === Hours === */
.foot__hours { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; color: var(--on-dark-soft); }
.foot__hours li { display: flex; justify-content: space-between; gap: var(--s-2); padding: .3rem 0; border-bottom: 1px solid var(--rule-dark); }
.foot__hours li:last-child { border-bottom: 0; }
.foot__hours li span:last-child { white-space: nowrap; }

/* === Follow === */
.foot__social { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.soc { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-dark); color: var(--on-dark-soft); border-radius: var(--btn-radius, var(--radius)); transition: color .3s ease, border-color .3s ease, background .3s ease; }
.soc:hover { color: var(--on-dark); border-color: var(--on-dark); background: color-mix(in srgb, var(--on-dark) 10%, transparent); }
.soc:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.soc__ico { width: 20px; height: 20px; }
.soc__txt { line-height: 1; }

/* === Bottom === */
.foot__btm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding-top: var(--s-3); color: var(--on-dark-soft); }
.foot__hub { color: var(--on-dark-soft); transition: color .3s ease; }
.foot__hub:hover { color: var(--on-dark); }

/* The fixed Book / Order bar covers the last 72px below 901px. */
@media (max-width: 900px) { .foot__main { padding-bottom: calc(var(--s-3) + 76px); } }

/* === Tablet: brand across the top, three columns under it === */
@media (max-width: 1080px) {
	.foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.foot__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-1) var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule-dark); }
	.foot__brand .foot__parent { margin: 0; }
	.foot__brand .foot__social { grid-column: 1 / -1; margin-top: var(--s-1); }
}

/* === Phone: one column, a hairline between groups, centred brand === */
@media (max-width: 640px) {
	.foot__main { padding-top: var(--s-5); }
	.foot__grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 0; border-bottom: 0; }
	.foot__brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: var(--s-4); }
	.foot__brand .foot__parent { margin-top: .9rem; }
	.foot__brand .foot__social { justify-content: center; }
	.foot__logo { height: 40px; max-width: 78vw; }
	.foot__col { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-dark); }
	.foot__lbl { margin-bottom: .8rem; }
	.foot__list--menus { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
	.foot__list--menus li { padding: 0; }
	.foot__legal { padding-block: .9rem; }
	.foot__legal-list { gap: .5rem 1.4rem; }
	.foot__btm { flex-direction: column; justify-content: center; text-align: center; }
}

/* === Map breakpoints === */
@media (max-width: 820px) {
	.map__inner { grid-template-columns: 1fr; }
	.map__frame { max-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
	.map__img { transition: none; }
}

/* ============================================================
   Newsletter band
   Between Find us and the footer, on every page. Ground-alt,
   so it separates from the Find us band above (ground) and
   hands over cleanly to the dark footer below.
   ============================================================ */
.news { background: var(--ground-alt); color: var(--ink); padding-block: var(--s-5); }
.news__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-3) var(--s-5); align-items: center; }
.news__title { color: var(--ink-soft); margin: 0 0 .7rem; }
.news__lede { max-width: 46ch; }

/* One height for the field and the button, stated once. Side by side the grid
   row stretched them to match anyway; stacked on a phone each fell back to its
   own box and the button came out 4px shorter than the field above it. */
.news__form { --news-h: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }

/* Square, like every other field on the site: Forminator's inputs are
   border-radius 0, and a rounded field beside a square button reads as two
   systems. The radius token is for pictures and panels, not controls.
   16px minimum, because iOS Safari zooms the page into anything smaller. */
.news__input { width: 100%; height: var(--news-h); padding: 0 1rem; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); border-radius: var(--btn-radius, 0); background: var(--paper); color: var(--ink); font-size: max(1rem, var(--body-size)); }
.news__input::placeholder { color: var(--ink-soft); }
.news__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.news__btn { white-space: nowrap; min-height: var(--news-h); }
.news__btn:disabled { opacity: .6; cursor: progress; }

.news__legal { grid-column: 1 / -1; color: var(--ink-soft); }
.news__legal a { text-decoration: underline; text-underline-offset: 3px; }

.news__msg { grid-column: 1 / -1; min-height: 1.4em; margin: 0; }
.news__msg.is-ok { color: var(--ink); }
.news__msg.is-err { color: var(--accent); }

/* Honeypot: off screen, not display:none, which some bots check for. */
.news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Editors-only configuration hint. */
.news--hint { padding-block: var(--s-2); }
.news__hint { margin: 0; padding: .8rem 1rem; border-left: 2px solid var(--accent); background: var(--ground); }

@media (max-width: 760px) {
	.news__in { grid-template-columns: minmax(0, 1fr); }
	.news__form { grid-template-columns: minmax(0, 1fr); }
	.news__btn { width: 100%; }
}