/**
 * DW Restaurant.
 *
 * Every colour comes from a custom property set in the Site Details screen,
 * so Pintxos and La Cantina share this file byte for byte.
 *
 * No framework, no reset library. About 400 lines replacing an Elementor
 * stylesheet stack.
 */

/* --------------------------------------------------------------------
 * Font. The @font-face rules are generated in PHP from whatever .woff2
 * files are sitting in assets/fonts, so dropping the download in is the
 * only step. See dwr_font_face_css() in functions.php.
 * ----------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * Tokens
 * ----------------------------------------------------------------- */

:root {
	--bg: #0b1315;
	--surface: #101e22;
	--accent: #847151;
	--accent-ink: #ffffff;
	/* The brand colour used as TEXT. Defaults to the accent, which is right
	   for a light accent like Pintxos gold. A dark accent such as La Cantina's
	   purple is unreadable on a dark page, so that site overrides this with
	   its lilac. */
	--highlight: var(--accent);
	--heading: #ffffff;
	--body: #dadada;

	--font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Two dials, both set from Site Details and both 1 unless changed, so a
	   site that never touches them renders exactly as it did before.
	   --heading-scale multiplies the headings, --type-scale the body copy, and
	   --space-scale the air between and inside sections.
	   Headings and body move by different amounts from the one setting:
	   dropping both equally either leaves the headings still shouting or
	   shrinks the body copy past comfortable reading. Spacing is separate
	   again, because "the headings are big" and "there is a lot of white
	   space" are two different complaints with two different answers. */
	--heading-scale: 1;
	--type-scale: 1;
	--space-scale: 1;

	--wrap: 1300px;
	--gap: calc(clamp(1.5rem, 4vw, 3rem) * var(--space-scale));
	--section-y: calc(clamp(3rem, 6.5vw, 6rem) * var(--space-scale));
	--radius: 4px;

	/* A third tone between the page and the panels, so alternating sections
	   read as separate without shouting. Falls back to the surface colour on
	   browsers without color-mix. */
	/* The panel tone is the same lift used by the header, so the difference
	   between one section and the next is actually visible. */
	--panel: var(--surface);
	--hairline: rgb(255 255 255 / 12%);
	--hairline: color-mix(in srgb, var(--heading) 18%, transparent);
}

/* --------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font-family: var(--font);
	font-weight: 400;
	font-size: calc(clamp(1rem, 0.96rem + 0.2vw, 1.0625rem) * var(--type-scale));
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

h1, h2, h3 {
	color: var(--heading);
	font-weight: 600;
	line-height: 1.08;
	/* Large type set at default tracking looks loose. Pulling it in is most
	   of the difference between "a heading" and "a restaurant's heading". */
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: calc(clamp(2.8rem, 1.6rem + 5vw, 6rem) * var(--heading-scale));
}

h2 {
	font-size: calc(clamp(2.1rem, 1.4rem + 2.8vw, 3.75rem) * var(--heading-scale));
}

h3 {
	font-size: calc(clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem) * var(--heading-scale));
}

p {
	margin: 0 0 1.2em;
}

.prose > :last-child {
	margin-bottom: 0;
}

.wrap {
	width: min(100% - clamp(2rem, 5vw, 5rem), var(--wrap));
	margin-inline: auto;
}

.section {
	padding-block: var(--section-y);
	position: relative;
}

/* Alternating tone. Without this the page is one unbroken wash of colour,
   which is what made the first build feel flat. */
.section--panel {
	background: var(--panel);
}

/* --------------------------------------------------------------------
 * Reveal on scroll
 *
 * Opt-in per element and turned on by JavaScript, so with JS off or motion
 * reduced everything is simply visible.
 * ----------------------------------------------------------------- */

.js-reveal .reveal {
	opacity: 0;
	transform: translateY(1.75rem);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered so a section assembles rather than arriving in one lump. */
.js-reveal .reveal--delay-1 { transition-delay: 0.08s; }
.js-reveal .reveal--delay-2 { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
	.js-reveal .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.section--center {
	text-align: center;
}

.prose--center {
	max-width: 46rem;
	margin-inline: auto;
}

/* The decorative label above a heading. A span, not an h-tag: the old build
   used headings for these, which put four "Our Story" headings on one page. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--highlight);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

/* The short rule the old site drew as a "divider" widget, done in CSS. */
.eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: currentcolor;
	flex: none;
	opacity: 0.7;
}

.section--center .eyebrow,
.menus__head .eyebrow {
	justify-content: center;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 0.75rem 1.25rem;
	z-index: 100;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

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

.button {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	/* 44px minimum target. */
	min-height: 2.75rem;
	line-height: 1.4;
	transition: filter 0.15s ease;
}

.button:hover {
	filter: brightness(1.15);
}

.button--lg {
	padding: 1.05rem 2.5rem;
	font-size: 1.05rem;
}

/* --------------------------------------------------------------------
 * Announcement banner
 *
 * Above the sticky header rather than inside it, so it scrolls away once
 * read instead of eating screen height for the whole visit.
 * ----------------------------------------------------------------- */

.banner {
	background: #8a1c1c;
	color: #fff;
	font-size: 0.95rem;
}

.banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 1rem;
	flex-wrap: wrap;
	padding-block: 0.7rem;
	text-align: center;
}

.banner p {
	margin: 0;
	font-weight: 500;
}

.banner__link {
	color: inherit;
	font-weight: 700;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------
 * Header
 * ----------------------------------------------------------------- */

/* Solid over the top of the page, then semi-transparent with a blur once
   you scroll, so the photography carries on behind it. */
.site-header {
	background: var(--surface);
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

@supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)) {
	.site-header.is-scrolled {
		background-color: color-mix(in srgb, var(--surface) 78%, transparent);
		backdrop-filter: blur(14px) saturate(140%);
		box-shadow: 0 1px 0 var(--hairline);
	}
}

/* WordPress's admin bar would otherwise sit on top of a sticky header. */
.admin-bar .site-header {
	top: 32px;
}

/* Logo left, the reserve line centred in the middle of the screen, the
   button right. The centre column takes the free space so the message is
   centred on the viewport rather than between its neighbours. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding-block: 0.9rem;
}

.site-header__logo {
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--heading);
	font-weight: 600;
}

/* Scales with the viewport rather than sitting at one fixed size, so it
   holds its own on a wide screen without swamping a phone. */
.site-header__logo img {
	max-height: clamp(64px, 6vw, 92px);
	width: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.site-nav > a {
	color: var(--heading);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.site-nav > a:not(.button):hover {
	color: var(--highlight);
}

/* A real tel: link, so it is one tap on a phone rather than text to copy
   out, and big enough to actually be read. */
.site-header__message {
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
	color: var(--heading);
	font-size: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

.site-header__message a {
	text-decoration: none;
}

.site-header__message a:hover {
	color: var(--highlight);
}

.site-header__cta {
	flex: 0 0 auto;
}

@media (max-width: 860px) {
	.site-header__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
	}

	.site-nav {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 420px) {
	.site-nav__phone span {
		display: none;
	}
}

/* --------------------------------------------------------------------
 * Hero
 * ----------------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(30rem, 88vh, 54rem);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	isolation: isolate;

	/* The hero never sits on the page colour, it sits on a darkened
	   photograph, so its text colours are set here rather than inherited.
	   PHP works the three values out from the palette: a dark site gets its
	   own colours back unchanged, a light one gets white type instead of
	   losing the headline into the picture. */
	--heading: var(--hero-ink, #ffffff);
	--body: var(--hero-body, #f2ede7);
	--highlight: var(--hero-tint, #ffffff);

	color: var(--body);
}

/* A slow drift on the background. Barely perceptible frame to frame, but it
   stops the top of the page feeling like a still photograph. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.hero {
		background-attachment: fixed;
	}
}

/* The img exists so the browser's preloader finds and prioritises it. The
   background is the visual; this is hidden but still fetched early. */
.hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Strongest behind the text, fading across so the photo still reads on
	   the right. Both stops move together from the one setting. */
	background:
		linear-gradient(to right, rgb(0 0 0 / var(--hero-shade, 45%)), rgb(0 0 0 / var(--hero-shade-soft, 15%))),
		linear-gradient(to top, rgb(0 0 0 / 55%) 0%, transparent 45%);
	z-index: -1;
}

/* No width limit on this element: it also carries .wrap, whose auto margins
   would centre a narrowed block. The measure goes on the heading. */
.hero__inner {
	padding-block: var(--section-y);
}

/* The one place on the page where the type is allowed to be enormous.
   Held to a short measure so it stacks a couple of words to a line and
   fills the frame, the way the old site's did. */
.hero__title {
	margin-bottom: 1.75rem;
	max-width: var(--hero-measure, 14ch);
	font-size: calc(var(--hero-title, clamp(3rem, 1.4rem + 7vw, 7.5rem)) * var(--heading-scale));
	line-height: 0.95;
	text-shadow: 0 2px 30px rgb(0 0 0 / 35%);
	/* Balanced, like the other headings. Left to wrap naturally a headline
	   fills the measure and drops whatever is left onto its own line, so
	   "Family, food and a warm / welcome" strands one word. Balancing evens
	   the lines out: "Family, food and / a warm welcome". */
	text-wrap: balance;
}

/* Capitals are wider than lower case at the same size, so the measure comes
   down a notch with them. Both come from the Headline size setting. */
.hero--caps .hero__title {
	text-transform: uppercase;
	font-weight: 700;
	max-width: var(--hero-measure-caps, 11ch);
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------
 * Split sections
 * ----------------------------------------------------------------- */

.split__grid {
	display: grid;
	/* The picture gets the wider track. It is first in the source, so the
	   flipped variant swaps the tracks to keep it the wider one.
	   The Picture size setting adds a .split--pic-* class that overrides this. */
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: center;
}

/* This single rule replaces the duplicated-and-hidden section the old build
   used to get the image on the other side. */
.split--flip .split__media {
	order: 2;
}

/* Flipped, the same two tracks in the other order. Written out per size
   because CSS cannot reverse a custom property's value. */
.split--flip .split__grid { grid-template-columns: 1fr 1.15fr; }
.split--pic-medium .split__grid { grid-template-columns: 1fr 1fr; }
.split--pic-small .split__grid { grid-template-columns: 0.72fr 1fr; }
.split--pic-medium.split--flip .split__grid { grid-template-columns: 1fr 1fr; }
.split--pic-small.split--flip .split__grid { grid-template-columns: 1fr 0.72fr; }

.split__media {
	position: relative;
	isolation: isolate;
}

.split__media img {
	width: 100%;
	/* A consistent crop, so pictures of different proportions do not give the
	   page a different rhythm every section. Portrait unless the section says
	   otherwise; "As uploaded" sets this to auto and lets the picture be
	   whatever shape it was taken. */
	aspect-ratio: var(--split-ratio, 4 / 5);
	object-fit: cover;
	border-radius: var(--radius);
}

/* A section with no picture. Left in the first column it read as a layout
   that had lost its image, so it becomes a centred statement instead. */
.split__body:only-child {
	grid-column: 1 / -1;
	max-width: 50rem;
	margin-inline: auto;
	text-align: center;
}

.split__body:only-child .eyebrow {
	justify-content: center;
}

.owner {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 0;
}

/* This is a signature graphic, not a head shot. Cropping it into an 84px
   circle threw away most of it, which is why it looked like it had failed
   to load. It is reduced to a single ink colour and then flipped to white
   only where the background behind it is dark — --ink-flip is 1 on a dark
   page or section and 0 on a light one, so a cream site keeps a dark
   signature instead of losing it. */
.owner img {
	width: auto;
	max-width: 170px;
	max-height: 4.5rem;
	height: auto;
	border-radius: 0;
	object-fit: contain;
	flex: 0 0 auto;
	filter: brightness(0) invert(var(--ink-flip, 1));
	opacity: 0.9;
}

.owner figcaption {
	display: flex;
	flex-direction: column;
}

.owner strong {
	color: var(--heading);
}

.owner span {
	color: var(--highlight);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	/* Every selector that sets two columns has to be listed, because each of
	   them outranks a bare ".split__grid" and would otherwise keep its two
	   columns on a phone, leaving a postage-stamp image beside the text. */
	.split__grid,
	.split--flip .split__grid,
	.split--pic-medium .split__grid,
	.split--pic-small .split__grid,
	.split--pic-medium.split--flip .split__grid,
	.split--pic-small.split--flip .split__grid {
		grid-template-columns: 1fr;
	}

	.split--flip .split__media {
		order: 0;
	}

	/* Full width, and a landscape crop by default, so the picture reads as a
	   header for the section rather than a tall column of photograph. A shape
	   chosen on the section still wins. */
	.split__media img {
		aspect-ratio: var(--split-ratio, 3 / 2);
	}
}

/* --------------------------------------------------------------------
 * Menus
 *
 * These are a main reason the site exists, so they get real estate rather
 * than a row of small buttons.
 * ----------------------------------------------------------------- */

.menus__head {
	text-align: center;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.menus__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* Four cards auto-fit into three across, leaving a lone card on the second
   row. Two by two is deliberate. */
.menus__grid[data-count="4"] {
	grid-template-columns: repeat(2, 1fr);
	max-width: 54rem;
	margin-inline: auto;
}

@media (max-width: 640px) {
	.menus__grid[data-count="4"] {
		grid-template-columns: 1fr;
	}
}

.menu-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: clamp(2rem, 4vw, 3rem);
	/* --card is set inline per menu, so a Christmas card can be red among
	   the usual ones without a stylesheet edit. */
	background: var(--card, var(--surface));
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.menu-card__link:hover {
	border-color: var(--highlight);
	transform: translateY(-2px);
}

.menu-card__name {
	color: var(--heading);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	font-weight: 600;
	line-height: 1.25;
}

.menu-card__note {
	color: var(--body);
	font-size: 0.9rem;
	opacity: 0.8;
}

/* On a tinted card the brand highlight may clash with the card colour, so
   the label falls back to the card's own text colour. */
.menu-card--tinted .menu-card__name,
.menu-card--tinted .menu-card__note,
.menu-card--tinted .menu-card__cta {
	color: #fff;
}

.menu-card--tinted .menu-card__note,
.menu-card--tinted .menu-card__cta {
	opacity: 0.9;
}

.menu-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 1rem;
	color: var(--highlight);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.menu-card__cta svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------
 * Visit strip
 * ----------------------------------------------------------------- */

.visit {
	background: var(--surface);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.visit__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--gap);
}

.visit h2 {
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--highlight);
	margin-bottom: 0.9rem;
}

.visit address {
	font-style: normal;
	display: grid;
	gap: 0.15rem;
}

.visit__phone {
	display: inline-block;
	color: var(--heading);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.01em;
}

.visit__phone:hover {
	color: var(--highlight);
}

/* --------------------------------------------------------------------
 * Booking
 * ----------------------------------------------------------------- */

.booking {
	position: relative;
	background-size: cover;
	background-position: center;
	isolation: isolate;

	/* Like the hero, this band is always laid over a heavily darkened photo,
	   so it takes the same worked-out light text rather than the page's. */
	--heading: var(--hero-ink, #ffffff);
	--body: var(--hero-body, #f2ede7);
	--highlight: var(--hero-tint, #ffffff);

	color: var(--body);
}

.booking::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 72%);
	z-index: -1;
}

.booking__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--gap);
	align-items: start;
}

@media (max-width: 900px) {
	.booking__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
 * Quote
 * ----------------------------------------------------------------- */

.quote blockquote {
	margin: 0;
	max-width: 48rem;
	margin-inline: auto;
}

.quote p {
	color: var(--heading);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
	line-height: 1.35;
	font-weight: 300;
	font-style: italic;
}

.quote cite {
	display: block;
	color: var(--highlight);
	font-style: normal;
	font-size: 0.85rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------
 * Gallery
 * ----------------------------------------------------------------- */

/* A slim band across the page. Full width, one row, scrolls sideways. */
.gallery {
	position: relative;
	padding: 0;
	background: var(--bg);
}

.gallery__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(9rem, 15vw, 13rem);
	gap: 2px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar {
	display: none;
}

.gallery__track li {
	scroll-snap-align: start;
	overflow: hidden;
}

.gallery__track img {
	width: 100%;
	height: clamp(7rem, 11vw, 10rem);
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	.gallery__track li:hover img {
		transform: scale(1.06);
	}
}



/* --------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------- */

/* Deliberately shallow. It is contact details, not a section of the site. */
.site-footer {
	background: var(--surface);
	padding-top: 3rem;
	font-size: 0.95rem;
}

/* The logo is the first of four columns. Nudged up so its optical centre
   sits with the small-caps labels beside it rather than below them. */
.site-footer__col--brand {
	margin-top: -0.5rem;
}

/* The phone number is the single most useful thing down here. */
.site-footer__phone {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 600;
	color: var(--heading);
	margin-bottom: 0.75rem;
}

.site-footer__phone a {
	text-decoration: none;
}

.site-footer__col > :last-child {
	margin-bottom: 0;
}

/* Logo, then three columns each starting with a label, so every column's
   first line of text sits on the same line as its neighbours'. */
.site-footer__grid {
	display: grid;
	grid-template-columns: 0.9fr 1fr 1fr 1fr;
	gap: var(--gap);
	align-items: start;
}

@media (max-width: 980px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__col--brand {
		grid-column: 1 / -1;
		margin: 0 0 1rem;
	}
}

@media (max-width: 520px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

.site-footer h2 {
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--highlight);
	margin-bottom: 1rem;
}

.site-footer__col--brand img {
	max-width: 170px;
	height: auto;
}

.site-footer address {
	font-style: normal;
	display: grid;
	gap: 0.15rem;
	margin-bottom: 1rem;
}

.hours {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.social {
	list-style: none;
	display: flex;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
}

.social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--body);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.social a:hover {
	color: var(--highlight);
}

.social svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.newsletter {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	flex-wrap: wrap;
}

.newsletter input {
	flex: 1 1 9rem;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--body);
	color: var(--heading);
	font: inherit;
	padding: 0.6rem 0.2rem;
	min-height: 2.75rem;
}

.newsletter input::placeholder {
	color: var(--body);
	opacity: 0.7;
}

.newsletter button {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--highlight);
	color: var(--heading);
	font: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.19px;
	text-transform: uppercase;
	padding: 0.6rem 0.4rem;
	min-height: 2.75rem;
	cursor: pointer;
}

.newsletter button:hover {
	color: var(--highlight);
}

/* --------------------------------------------------------------------
 * Google reviews
 * ----------------------------------------------------------------- */

.greviews {
	position: relative;
	display: grid;
	grid-template-columns: minmax(11rem, 15rem) 1fr;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: 100rem;
	margin-inline: auto;
}

.greviews__score {
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	text-align: center;
}

.greviews__word {
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1c1c1c;
}

.greviews__stars {
	color: #fbbc04;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
}

.greviews__count {
	font-size: 0.85rem;
	color: #5f6368;
}

.greviews__brand {
	font-weight: 600;
	color: #4285f4;
	letter-spacing: 0.02em;
}

/* A scroller rather than a slider: no library, works with a trackpad, a
   swipe, the arrows or the keyboard, and degrades to a plain list. */
.greviews__track {
	list-style: none;
	margin: 0;
	padding: 0.25rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(15rem, 19rem);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.greviews__track::-webkit-scrollbar {
	display: none;
}

.greview {
	scroll-snap-align: start;
	/* A shade off the band it sits on. Set from PHP when the Reviews
	   background is chosen, so the cards follow it instead of staying a cold
	   grey on a warm colour. */
	background: var(--greview-card, #f7f7f8);
	border-radius: var(--radius);
	padding: 1.15rem 1.25rem;
	display: grid;
	align-content: start;
	gap: 0.5rem;
}

.greview__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.greview__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: 0 0 auto;
	object-fit: cover;
}

.greview__avatar--letter {
	display: grid;
	place-items: center;
	background: #d9dade;
	color: #3c4043;
	font-weight: 700;
}

.greview__who {
	display: grid;
	line-height: 1.3;
}

.greview__who strong {
	color: #1c1c1c;
	font-size: 0.95rem;
}

.greview__when {
	font-size: 0.8rem;
	color: #5f6368;
}

.greview__stars {
	color: #fbbc04;
	letter-spacing: 0.08em;
}

.greview__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #3c4043;
	/* Long reviews are clipped rather than making one card twice the height
	   of its neighbours. */
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scroller__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid #dadce0;
	background: #ffffff;
	color: #3c4043;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
}

.scroller__nav[hidden] {
	display: none;
}

.gallery .scroller__nav--prev {
	left: 0.5rem;
}

.gallery .scroller__nav--next {
	right: 0.5rem;
}

.greviews .scroller__nav--prev {
	left: calc(15rem - 1.1rem);
}

.greviews .scroller__nav--next {
	right: -0.5rem;
}

@media (max-width: 780px) {
	.greviews {
		grid-template-columns: 1fr;
	}

	.scroller__nav {
		display: none;
	}
}

/* --------------------------------------------------------------------
 * Sister restaurant
 * ----------------------------------------------------------------- */

/* A pale band, deliberately. After a page of dark purple this is the one
   place that breaks it, which is what makes it read as a separate business
   rather than another section of this one. The tint is mixed from the brand
   colour, so Pintxos gets a warm cream and La Cantina a cool grey-lilac. */
.sister {
	background: #f4f2f6;
	background: var( --sister-bg, color-mix(in srgb, var(--highlight) 14%, #ffffff) );
	color: var( --sister-ink, #4a4a4a );
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.sister .eyebrow,
.sister__name {
	color: var( --sister-ink, #1c1c1c );
}

.sister .eyebrow {
	opacity: 0.75;
}

/* A pale band needs a dark button: both sites' accents are light tints and
   would vanish into the background. */
.sister .button {
	background: var( --sister-btn, #1c1c1c );
	color: var( --sister-btn-ink, #ffffff );
}

.sister__inner {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 3rem);
	flex-wrap: wrap;
}

.sister__logo img {
	max-width: 150px;
	height: auto;
}

.sister__body {
	flex: 1 1 16rem;
}

.sister__body p {
	margin: 0.35rem 0 0;
	max-width: 44rem;
}

.sister__name {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	margin: 0;
}

.sister__link {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.sister__inner {
		display: grid;
		justify-items: start;
	}
}

/* --------------------------------------------------------------------
 * Reviews
 * ----------------------------------------------------------------- */

/* A full-width band rather than a card. Boxing the carousel inside the
   text column made it look like an advert dropped into the page. */
.reviews {
	padding-block: 0;
}

.reviews__heading {
	text-align: center;
	padding-top: clamp(3rem, 7vw, 5rem);
	margin-bottom: 2rem;
}

/* Review plugins ship their own light-themed markup, so the band is pale:
   white text on white cards would be unreadable. */
.reviews__body {
	background: #fff;
	color: #1a1a1a;
	padding-block: clamp(1.5rem, 4vw, 3rem);
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.reviews__body a {
	color: inherit;
}

/* Copyright on the left, social icons on the right, sharing the rule above
   them. Floating on their own they had nothing to sit against. */
.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap-reverse;
	margin-top: 2.5rem;
	padding-block: 1.1rem;
	border-top: 1px solid var(--hairline);
	font-size: 0.85rem;
	opacity: 0.75;
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal .social {
	margin: 0;
}

.site-footer__legal .social a {
	width: 2.25rem;
	height: 2.25rem;
}

@media (max-width: 560px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
 * Motion preferences
 * ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* A hairline above a section, when the owner asks for one. */
.section--divided {
	border-top: 1px solid var(--hairline);
}