/* ==========================================================================
   Great Garden Buffet: base
   --------------------------------------------------------------------------
   Load this FIRST on every page. It holds the fonts, the colour variables,
   and anything used in more than one place. The other stylesheets read the
   variables defined here, so they don't redefine any colours of their own.

   Load order in every HTML file:
     base.css        this file
     chrome.css      header, nav, dark bands, footer
     home.css        home page only
     menu.css        menu page only
     contact.css     contact page only

   Colours are red from their sign and banners, set against charcoal.
   Display type is Limelight (art deco, like the printed menu logotype),
   Josefin Sans for headings, Source Sans 3 for reading, and a brush font
   cut down to the three characters on the building sign. All are in /fonts,
   so nothing is loaded from Google.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Sign CN";
  src: url("../fonts/sign-cn-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Limelight;
  src: url("../fonts/limelight-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/josefin-sans-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/josefin-sans-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   Variables: change a colour here and it changes everywhere
   -------------------------------------------------------------------------- */

:root {
  /* darks */
  --black: #161415;          /* footer */
  --charcoal: #221f20;       /* header, category bar */
  --graphite: #2f2b2c;       /* lighter dark, spare */

  /* reds */
  --red: #c0161f;            /* buttons, accents, paint stroke */
  --red-deep: #931118;       /* hover, links on light backgrounds */

  /* lights */
  --paper: #ffffff;          /* white panels */
  --stone: #efecea;          /* page background */
  --rule: #dcd6d2;           /* hairlines between rows */

  /* cards (the boxed sections in the printed menu) */
  --card-bg: #ebe2c7;
  --card-border: #b5aa89;
  --card-rule: #e3c9c1;

  /* text */
  --ink: #1b1819;            /* body text on light */
  --muted: #675f5c;          /* secondary text on light */
  --on-dark: #f3eeec;        /* body text on dark */
  --on-dark-muted: #c4bab6;  /* secondary text on dark */
  --jade: #2a6f4e;           /* "open now" green */

  /* type stacks */
  --deco: Limelight, "Copperplate", Georgia, serif;
  --display: "Josefin Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --sign: "Sign CN", "Songti TC", "PingFang TC", "Noto Serif TC", serif;

  /* layout */
  --wrap: 72rem;                        /* widest the content ever gets */
  --gutter: clamp(1rem, 4vw, 2rem);     /* space along the left and right edges */
}


/* --------------------------------------------------------------------------
   Reset and page basics
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--stone);
}

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

/* Body stays transparent so the fixed header photo (chrome.css) can sit behind it. */
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  body {
    font-size: 1.0625rem;
  }
}


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.05rem, 5vw, 3.3rem);
  letter-spacing: -0.005em;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
}

h3 {
  font-size: 1.3rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--red-deep);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--red);
}

address {
  font-style: normal;
}


/* --------------------------------------------------------------------------
   Keyboard focus
   -------------------------------------------------------------------------- */

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

/* white outline anywhere the background is dark */
.site-header :focus-visible,
.site-footer :focus-visible,
.page-head :focus-visible,
.hero :focus-visible,
.menu-nav :focus-visible {
  outline-color: #fff;
}


/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

/* Text for screen readers only. Used for table captions and price labels. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Jump link for keyboard users; only visible once focused. */
.skip-link {
  position: absolute;
  top: 0;
  left: -999px;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--paper);
}

.skip-link:focus {
  top: 0.5rem;
  left: 0.5rem;
}

/* Centres content and keeps it off the edges of the screen. */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Keeps prices from lining up ragged. */
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fine {
  font-size: 0.95rem;
  color: var(--muted);
}

.lede {
  max-width: 34em;
  font-size: 1.25rem;
  color: var(--muted);
}


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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;               /* comfortable tap target */
  padding: 0.55em 1.2em;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: 600 1.05rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background: var(--ink);
  color: #fff;
}

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-primary:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}

/* For buttons sitting on the dark photo bands. */
.btn-light {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(22, 20, 21, 0.35);
  color: #fff;
}

.btn-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* A row of buttons that wraps on narrow screens. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


/* --------------------------------------------------------------------------
   Cards
   Same tinted box as the boxed sections in the printed menu. Used by
   Buffet to go on the home page and by Combination Platters and Chef's
   Specialties on the menu page (see .menu-section.is-card in menu.css).
   -------------------------------------------------------------------------- */

.card {
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
}

.card > h2 {
  margin-top: 0.2rem;
}

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


/* --------------------------------------------------------------------------
   Phone numbers, used on the home page, the contact page and in the footer
   -------------------------------------------------------------------------- */

.phones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.phone-link {
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Opening hours list, used on the contact page and in the footer.
   Today's row is marked by site.js.
   -------------------------------------------------------------------------- */

.hours {
  max-width: 22rem;
  margin: 0.6rem 0 0.8rem;
  padding: 0;
  list-style: none;
}

.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 3px;
}

.hours li.is-today {
  background: var(--paper);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--red);
}