/*
 * H-Star Site System: the one stylesheet.
 *
 * Colours and fonts are not set here. They come from content/site.json and
 * arrive as the CSS variables below, so changing the look of a site is a
 * content change, not a code change.
 *
 * Design changes go through H-Star. A pull request touching this file fails
 * the content_only check on purpose.
 */

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--background);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 0.5em; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1rem; }

/* Links stay in the text colour and let the accent live in the underline.
   The accent is a warm highlight colour, not a text colour: on the cream
   background it measures 2.8 against text, where 4.5 is needed. Putting the
   colour in the underline keeps the brand and keeps the contrast. */
a {
  color: var(--primary);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 3px; }

/* The focus ring must clear 3.0 against the background, which the accent does
   not. The text colour does, comfortably. */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

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

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 0.75rem 1rem;
}
.skip:focus { left: 0; }

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

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

.button {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: var(--primary);
  background: transparent;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.button:hover { background: var(--primary); color: var(--background); }
/* Dark text on the accent, not white. White on the accent measures 3.0 and
   button labels are body sized, so it needs 4.5. The text colour on the
   accent measures 4.7 and passes. */
.button-accent { background: var(--accent); border-color: var(--accent); color: var(--text); }
.button-accent:hover { background: var(--primary); border-color: var(--primary); color: var(--background); }

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

.site-header { border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); background: var(--background); }
.header-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding-top: 1rem; padding-bottom: 1rem; }
.brand { text-decoration: none; color: var(--primary); margin-right: auto; }
.brand-name { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.brand-tagline { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-size: 0.98rem; }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); }

.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

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

.hero { background: var(--muted); padding: clamp(2.5rem, 8vw, 5.5rem) 0; }
.hero h1 { margin-bottom: 0.25em; }
.hero-tagline { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; margin-bottom: 1rem; }
.hero-description { font-size: 1.1rem; max-width: 42rem; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- Sections ---------- */

.page-head { background: var(--muted); padding: clamp(2rem, 6vw, 3.5rem) 0; }
.page-intro { font-size: 1.1rem; max-width: 44rem; }
.panel { background: var(--muted); padding: clamp(2rem, 6vw, 3.5rem) 0; margin-top: 3rem; }
.specials { padding: clamp(2rem, 6vw, 3.5rem) 0; }
.prose { padding: clamp(2rem, 6vw, 3rem) 0; max-width: 46rem; font-size: 1.06rem; }

.two-column { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 46rem) { .two-column { grid-template-columns: 1fr 1fr; } }

/* ---------- Specials ---------- */

.special-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .special-list { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.special-list li { border-left: 3px solid var(--accent); padding-left: 1rem; }
.special-until { font-size: 0.9rem; opacity: 0.7; margin: 0; }

/* ---------- Hours ---------- */

.hours { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.hours th, .hours td { text-align: left; padding: 0.4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); font-weight: 400; }
.hours th { width: 45%; }
.hours .is-today th, .hours .is-today td { font-weight: 700; color: var(--primary); }
/* Small uppercase text in the accent colour would not pass, so these stay in
   the text colour and are distinguished by weight and letter spacing. */
.today-flag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); font-weight: 700; margin-left: 0.35rem; }
.hours-note, .hours-holiday-today { font-size: 0.95rem; }
.hours-holiday-today { border-left: 3px solid var(--accent); padding-left: 0.75rem; font-weight: 600; }
.holiday-heading { font-size: 1rem; margin-top: 1.25rem; }
.holidays { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; }

/* ---------- Menu ---------- */

.menu { padding-top: 2.5rem; }
.menu-section { margin-bottom: 3rem; }
.menu-section-note { font-size: 0.97rem; opacity: 0.8; max-width: 40rem; }
.menu-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .menu-items { grid-template-columns: 1fr 1fr; gap: 1.6rem 3rem; } }
.menu-item-head { display: flex; align-items: baseline; gap: 0.75rem; }
.menu-item-head h3 { margin: 0; }
.menu-price { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--primary); }
.menu-description { margin: 0.25rem 0 0; opacity: 0.85; font-size: 0.97rem; }
.menu-item.is-sold-out .menu-item-head h3 { text-decoration: line-through; opacity: 0.55; }
.sold-out-flag { margin: 0.35rem 0 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); font-weight: 600; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; padding: 0; }
.tags li { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 2px; padding: 0.1rem 0.4rem; }

/* ---------- Team ---------- */

.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.team img { border-radius: 2px; margin-bottom: 0.75rem; }
.team h3 { margin-bottom: 0.1em; }
.team p { margin: 0; opacity: 0.8; }

/* ---------- Forms ---------- */

.contact-form label { display: block; font-size: 0.92rem; margin-bottom: 0.25rem; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 0.6rem; font: inherit; color: inherit;
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 2px; background: var(--background);
}

/* ---------- Map ---------- */

.map iframe { width: 100%; min-height: 18rem; border: 0; }

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

.site-footer { margin-top: 4rem; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); padding-top: 2.5rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.site-footer h2 { font-size: 1.15rem; }
.address { font-style: normal; }
.social { display: flex; gap: 1rem; }
.colophon { border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); margin-top: 2.5rem; padding-top: 1.25rem; padding-bottom: 2rem; font-size: 0.85rem; opacity: 0.7; }

/* ---------- Cookie notice ---------- */

.cookie-notice {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50;
  background: var(--primary); color: #fff; padding: 1rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  border-radius: 2px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}
.cookie-notice p { margin: 0; font-size: 0.92rem; }
.cookie-notice button { background: #fff; color: var(--primary); border: 0; padding: 0.55rem 1rem; border-radius: 2px; font: inherit; cursor: pointer; }

@media print {
  .site-header .header-actions, .skip, .cookie-notice { display: none; }
}