/**
 * Bistromagic — Base
 *
 * Reset, document defaults, and the typographic system. Every value comes
 * from tokens.css. Component styles live in their own files and load only
 * when their widget is on the page.
 *
 * Selector policy: everything here is either an element selector or a
 * single class. No nesting deeper than two levels, no IDs, no !important.
 * Component files can then override base without a specificity fight —
 * the usual cause of section padding that mysteriously refuses to change.
 */

/* --- Reset ---------------------------------------------------------- */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* --- Document ------------------------------------------------------- */

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

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

body {
  background-color: var(--bmg-surface-base);
  color: var(--bmg-content-secondary);
  font-family: var(--bmg-font-body);
  font-size: var(--bmg-text-base);
  line-height: var(--bmg-leading-normal);
  font-weight: var(--bmg-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bmg-font-display);
  font-variation-settings: var(--bmg-display-settings);
  color: var(--bmg-content-primary);
  font-weight: var(--bmg-weight-regular);
  line-height: var(--bmg-leading-tight);
  letter-spacing: var(--bmg-tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--bmg-text-3xl); }
h2 { font-size: var(--bmg-text-2xl); }
h3 { font-size: var(--bmg-text-xl); }
h4 { font-size: var(--bmg-text-lg); }

/* Below roughly 28px the display face needs its optical size corrected and
   its wonk dialled out, or the flared terminals read as noise. */
h5, h6 {
  font-size: var(--bmg-text-md);
  font-variation-settings: var(--bmg-display-settings-sm);
  letter-spacing: var(--bmg-tracking-normal);
  line-height: var(--bmg-leading-snug);
}

p {
  max-width: var(--bmg-container-text);
  text-wrap: pretty;
}

/* --- Section eyebrow -----------------------------------------------
   The wide-tracked small-caps label above a heading. Used throughout for
   section labels, opening hours and status text. It is the quiet
   counterweight to the display face — the two carry the whole identity
   between them, which is why almost nothing else here is decorated.      */

.bmg-eyebrow {
  font-family: var(--bmg-font-utility);
  font-size: var(--bmg-text-xs);
  font-weight: var(--bmg-weight-medium);
  letter-spacing: var(--bmg-tracking-wider);
  text-transform: uppercase;
  color: var(--bmg-content-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--bmg-space-2xs);
}

/* A brass tick preceding the eyebrow. The only ornament in the system. */
.bmg-eyebrow::before {
  content: "";
  inline-size: var(--bmg-space-md);
  block-size: 1px;
  background: var(--bmg-brass);
  opacity: 0.6;
}

/* --- Links ---------------------------------------------------------- */

a {
  color: inherit;
  text-decoration-color: rgba(176, 141, 87, 0.4);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--bmg-duration-fast) var(--bmg-ease),
              text-decoration-color var(--bmg-duration-fast) var(--bmg-ease);
}

a:hover {
  color: var(--bmg-content-primary);
  text-decoration-color: var(--bmg-brass);
}

/* --- Focus ---------------------------------------------------------- */

/* Never remove the outline. A keyboard user completing a booking form has
   to be able to see where they are, and this is the single most common
   accessibility failure in commercial themes. */
:focus-visible {
  outline: 2px solid var(--bmg-accent);
  outline-offset: 3px;
  border-radius: var(--bmg-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

.bmg-skip-link {
  position: absolute;
  inset-block-start: var(--bmg-space-sm);
  inset-inline-start: var(--bmg-space-sm);
  z-index: var(--bmg-z-toast);
  padding: var(--bmg-space-2xs) var(--bmg-space-sm);
  background: var(--bmg-accent);
  color: var(--bmg-content-primary);
  transform: translateY(-200%);
  transition: transform var(--bmg-duration-fast) var(--bmg-ease);
}

.bmg-skip-link:focus {
  transform: translateY(0);
}

/* --- Layout --------------------------------------------------------- */

.bmg-container {
  width: 100%;
  max-width: var(--bmg-container);
  margin-inline: auto;
  padding-inline: var(--bmg-gutter);
}

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

.bmg-measure {
  max-width: var(--bmg-container-text);
}

/* --- Utility -------------------------------------------------------- */

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

hr {
  border: 0;
  border-block-start: var(--bmg-border-brass);
  margin-block: var(--bmg-space-xl);
}

::selection {
  background: var(--bmg-accent-quiet);
  color: var(--bmg-content-primary);
}

/* --- archives and entries -------------------------------------------- */

.bmg-archive__header {
	margin-block-end: var(--bmg-space-xl);
}

.bmg-archive__title {
	margin-block-start: var(--bmg-space-2xs);
	font-size: var(--bmg-text-2xl);
}

.bmg-archive__description {
	margin-block-start: var(--bmg-space-sm);
	color: var(--bmg-content-muted);
}

.bmg-entry__header {
	margin-block-end: var(--bmg-space-lg);
}

.bmg-entry__meta {
	margin-block-start: var(--bmg-space-2xs);
	font-family: var(--bmg-font-utility);
	font-size: var(--bmg-text-sm);
	letter-spacing: var(--bmg-tracking-wide);
	color: var(--bmg-content-muted);
}

.bmg-entry__media {
	margin: 0 0 var(--bmg-space-xl);
}

.bmg-entry__media img {
	inline-size: 100%;
	border-radius: var(--bmg-radius-sm);
}

.bmg-entry__content > * + * {
	margin-block-start: var(--bmg-space-md);
}

/* --- post cards ------------------------------------------------------ */

.bmg-posts {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 18rem, 1fr ) );
	gap: var(--bmg-space-xl);
}

.bmg-post-card__media img {
	inline-size: 100%;
	border-radius: var(--bmg-radius-sm);
}

.bmg-post-card__date {
	display: block;
	margin-block-start: var(--bmg-space-sm);
	font-family: var(--bmg-font-utility);
	font-size: var(--bmg-text-2xs);
	letter-spacing: var(--bmg-tracking-wider);
	text-transform: uppercase;
	color: var(--bmg-content-muted);
}

.bmg-post-card__title {
	margin-block-start: var(--bmg-space-3xs);
	font-size: var(--bmg-text-lg);
}

.bmg-post-card__title a {
	text-decoration: none;
}

.bmg-post-card__excerpt {
	margin-block-start: var(--bmg-space-2xs);
	font-size: var(--bmg-text-sm);
	color: var(--bmg-content-muted);
}

/* --- single dish ----------------------------------------------------- */

.bmg-dish-single {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) );
	gap: var(--bmg-space-2xl);
	align-items: start;
}

.bmg-dish-single__media img {
	inline-size: 100%;
	border-radius: var(--bmg-radius-sm);
}

.bmg-dish-single__title {
	margin-block-start: var(--bmg-space-2xs);
	font-size: var(--bmg-text-2xl);
}

.bmg-dish-single__price {
	margin-block-start: var(--bmg-space-sm);
	font-size: var(--bmg-text-lg);
}

.bmg-dish-single__state {
	margin-block-start: var(--bmg-space-2xs);
	font-family: var(--bmg-font-utility);
	font-size: var(--bmg-text-xs);
	letter-spacing: var(--bmg-tracking-wide);
	text-transform: uppercase;
	color: var(--bmg-content-muted);
}

.bmg-dish-single__lede {
	margin-block-start: var(--bmg-space-md);
	font-size: var(--bmg-text-md);
	color: var(--bmg-content-secondary);
}

.bmg-dish-single__content {
	margin-block-start: var(--bmg-space-md);
}

/* Allergens are stated plainly, never reduced to icons. Someone with a
   severe allergy is reading this to decide whether the dish is safe. */
.bmg-allergens {
	margin-block-start: var(--bmg-space-xl);
	padding: var(--bmg-space-md);
	border: var(--bmg-border-hairline);
	border-inline-start: 2px solid var(--bmg-warning);
	border-radius: 0 var(--bmg-radius-sm) var(--bmg-radius-sm) 0;
}

.bmg-allergens__title {
	margin: 0;
	font-family: var(--bmg-font-utility);
	font-size: var(--bmg-text-xs);
	font-weight: var(--bmg-weight-medium);
	letter-spacing: var(--bmg-tracking-wider);
	text-transform: uppercase;
	color: var(--bmg-warning);
}

.bmg-allergens__list {
	margin-block-start: var(--bmg-space-2xs);
	color: var(--bmg-content-primary);
}

.bmg-allergens__note {
	margin-block-start: var(--bmg-space-2xs);
	font-size: var(--bmg-text-sm);
	color: var(--bmg-content-muted);
}

/* --- 404 and empty states -------------------------------------------- */

.bmg-404,
.bmg-no-results {
	text-align: center;
	margin-inline: auto;
}

.bmg-404__title {
	margin-block: var(--bmg-space-2xs) var(--bmg-space-md);
	font-size: var(--bmg-text-2xl);
}

.bmg-404 p {
	margin-inline: auto;
}

.bmg-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bmg-space-sm);
	margin-block-start: var(--bmg-space-xl);
}

.bmg-button--quiet {
	background: transparent;
	border: var(--bmg-border-brass);
	color: var(--bmg-content-secondary);
}

.bmg-button--quiet:hover {
	background: transparent;
	border-color: var(--bmg-brass);
	color: var(--bmg-content-primary);
}

/* --- pagination ------------------------------------------------------ */

.navigation.pagination {
	margin-block-start: var(--bmg-space-2xl);
}

.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--bmg-space-2xs);
}

.page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	border: var(--bmg-border-hairline);
	border-radius: var(--bmg-radius-sm);
	font-family: var(--bmg-font-utility);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--bmg-content-secondary);
}

.page-numbers.current {
	border-color: var(--bmg-accent);
	background: var(--bmg-accent-quiet);
	color: var(--bmg-content-primary);
}