/* ==========================================================================
   Great Garden Buffet: chrome
   --------------------------------------------------------------------------
   The parts that appear on every page: the header and nav, the red scalloped
   trim, the dark photo band under the header, and the footer.

   Needs base.css loaded first for the colour variables.
   ========================================================================== */


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

.site-header {
  background: var(--charcoal);
  color: var(--on-dark);
}

/* On narrow screens: name and Call us on the first row, nav underneath.
   From 760px up it becomes a single row (see the media query below). */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand call"
    "nav   nav";
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.9rem 0.3rem;
}

.wordmark {
  grid-area: brand;
  display: block;
  color: #fff;
  line-height: 1.05;
  text-decoration: none;
}

.wordmark:hover {
  color: #fff;
}

/* 東園樓, the characters painted on the building sign. */
.wordmark-cn {
  display: block;
  margin-bottom: 0.12em;
  font-family: var(--sign);
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--red);
  -webkit-text-stroke: 0.6px var(--red);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.wordmark-name {
  display: block;
  font-family: var(--deco);
  font-size: clamp(1.35rem, 3.2vw, 1.8rem);
  color: #fff;
}

.wordmark-sub {
  display: block;
  margin-top: 0.2em;
  font-size: 0.9rem;
  color: var(--on-dark-muted);
}

.call-btn {
  grid-area: call;
  min-height: 44px;
  padding-inline: 1em;
}

.site-nav {
  grid-area: nav;
  display: flex;
  gap: 0.25rem;
  margin-inline: -0.6rem;
  overflow-x: auto;
}

.site-nav a {
  padding: 0.55em 0.6em;
  border-bottom: 3px solid transparent;
  color: var(--on-dark);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.site-nav a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

/* The page you're on gets a red underline. Set with aria-current in the HTML. */
.site-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--red);
}

@media (min-width: 760px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav call";
    padding-block: 1rem;
  }

  .site-nav {
    justify-content: flex-end;
    margin: 0;
  }
}


/* --------------------------------------------------------------------------
   Red band with scalloped trim, under the header. The one ornament on the site.
   -------------------------------------------------------------------------- */

.rim {
  height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Cpath d='M0 15a7 7 0 0 1 14 0a7 7 0 0 1 14 0' fill='none' stroke='%23221f20' stroke-width='1.6'/%3E%3Ccircle cx='14' cy='6' r='1.7' fill='%23221f20'/%3E%3C/svg%3E")
      repeat-x left bottom / 28px 16px,
    var(--red);
}


/* --------------------------------------------------------------------------
   The photo behind the dark bands
   --------------------------------------------------------------------------
   .band-bg is a fixed layer, so the photo holds still while the page scrolls
   over it. clip-path on the parent keeps that layer inside its own band, which
   is why the photo never reaches the body of the page.

   Two image files: a wide one for laptops and a tall one for phones. A phone
   screen is tall and narrow, so the wide photo would be blown up to about twice
   its size to cover it, which looks soft. See the README before replacing them.
   -------------------------------------------------------------------------- */

.hero-band,
.page-head {
  position: relative;
  clip-path: inset(0);
}

.band-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--black) url("../images/hero.jpg") center / cover no-repeat;
}

@media (max-width: 700px) {
  .band-bg {
    background-image: url("../images/hero-mobile.jpg");
  }
}

/* The dark wash over the photo that keeps white text readable. Each band sets
   its own gradient: see .hero-band::after in home.css and .page-head::after below. */
.hero-band::after,
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Content sits above the wash. */
.hero,
.page-head > .wrap {
  position: relative;
  z-index: 1;
}


/* --------------------------------------------------------------------------
   Title band on the menu and contact pages
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.25rem);
  color: var(--on-dark);
}

.page-head::after {
  background: linear-gradient(rgba(18, 15, 16, 0.5), rgba(18, 15, 16, 0.84));
}

.page-head h1 {
  margin-bottom: 0.3em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.page-head .lede,
.page-head p {
  color: var(--on-dark);
}

.page-head p:last-child {
  margin-bottom: 0;
}

.page-head a {
  color: #fff;
}


/* --------------------------------------------------------------------------
   Page body
   .sheet is the light background the content sits on, edge to edge, so the
   header photo stops at the band above it.
   -------------------------------------------------------------------------- */

.sheet {
  background: var(--stone);
}

.page {
  padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}


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

.site-footer {
  padding-block: 3rem 1.5rem;
  border-top: 4px solid var(--red);
  background: var(--black);
  color: var(--on-dark-muted);
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover {
  color: #ffb3b6;
}

.footer-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr auto;
    gap: 3rem;
  }
}

.footer-name {
  margin-bottom: 0.4rem;
  font-family: var(--deco);
  font-size: 1.3rem;
  color: #fff;
}

/* the sign characters inside the footer name */
.footer-name span {
  font-family: var(--sign);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--red);
  -webkit-text-stroke: 0.6px var(--red);
}

.footer-h {
  margin-bottom: 0.3rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

/* hours and phones come from base.css; these are the dark background versions */
.site-footer .hours {
  margin-top: 0;
}

.site-footer .hours li.is-today {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--red);
}

.site-footer .phones {
  margin-top: 0.8rem;
}

/* the site map list of links */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.copyright {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: #8f8683;
}