/* =====================================================================
   Yamas Greek Eatery — AUTUMN SEASONAL SKIN
   Loaded AFTER css/site.css; overrides only. Delete the one <link> and the
   site is back to its year-round self — that reversibility is the point, so
   nothing in here edits site.css and nothing in here changes layout or copy.

   THE IDEA. "Fall" for a Greek eatery is not pumpkins and orange leaves —
   that is an American diner's autumn and it would sit badly next to a brand
   built on mati blue and whitewashed stone. The Greek autumn is a HARVEST:
   olives coming off the trees, figs and pomegranates, honey, wheat, and the
   terracotta of the amphora they all get stored in. Every colour below is
   taken from that, which is why the season reads without the site ever
   stopping looking like Yamas.

   WHAT DOES NOT CHANGE. The royal-blue wordmark stays exactly as it is. It
   is the mark, not a decoration, and a logo that changes with the season is
   a logo nobody recognises. Blue against terracotta and olive is also the
   most Greek pairing there is — it is a fishing village in October, not a
   clash. So the constant mark sits on seasonal surfaces, and that tension
   is doing the work.

   CONTRAST. Measured, not eyeballed (WCAG AA, 4.5:1 for text):
     terracotta #A6492A  5.36 on ivory · 4.76 on oat · white on it 5.82
     olive      #5A6B2F  5.40 on ivory · 4.80 on oat · white on it 5.87
     ink-soft   #736251  5.38 on ivory · 4.78 on oat
     bark       #42230F  white on it 14.20
   Honey #B5761F measures 3.47 and is therefore DECORATIVE ONLY — it appears
   in gradients and a focus ring (both non-text, where 3:1 is the bar) and
   must never be used for type.
   ===================================================================== */

:root {
  /* ---- the harvest palette, named for what it is ---- */
  --fall-terracotta: #A6492A;   /* amphora clay — primary action */
  --fall-clay-deep:  #7A3318;   /* the same clay, fired darker — hover */
  --fall-olive:      #5A6B2F;   /* olive grove — accents, kickers, rules */
  --fall-honey:      #B5761F;   /* thyme honey — DECORATIVE ONLY, see above */
  --fall-pomegranate:#8E2F3A;   /* pomegranate seed — rare, for emphasis */
  --fall-bark:       #42230F;   /* roasted chestnut — the footer */
  --fall-ivory:      #FAF5EC;   /* warm ivory — the page */
  --fall-oat:        #F2E7D5;   /* threshed wheat — alternating sections */

  /* ---- mapped onto the year-round token names ----
     The names still say "blue" and "aegean". Left deliberately: renaming them
     would mean editing site.css, and then this file could no longer be
     deleted in one move. The names describe the ROLE — primary action, accent
     — and the role is unchanged. */
  --blue:      var(--fall-terracotta);  /* links, buttons, prices, active nav */
  --blue-deep: var(--fall-clay-deep);   /* button hover (footer overridden below) */
  --aegean:    var(--fall-olive);       /* kickers, rules, card top-borders, tags */
  --sky:       var(--fall-honey);       /* focus rings only — non-text */

  /* Surfaces. This is the change that does the most: the year-round page is a
     COOL off-white (#F5F8FB, an Aegean cast). Warming it to ivory shifts every
     page at once, before a single accent is noticed. */
  --page:      var(--fall-ivory);
  --parchment: var(--fall-oat);
  --paper:     #FFFDFA;                 /* cards stay near-white so they lift off the ivory */
  --stone:     #E0D2BB;                 /* hairline on oat */
  --line:      #EADFCD;                 /* hairline on white */

  --brown:     #38210F;                 /* display headings — a touch deeper than the year-round brown */
  --ink:       #463323;
  --ink-soft:  #736251;                 /* was #75695D; warmed AND darkened to hold 4.5:1 on oat */

  /* The glass card loses its cool cast so it reads as a printed harvest card. */
  --glass-tint:        rgb(253 248 240 / .60);
  --glass-tint-strong: rgb(253 248 240 / .74);

  --shadow: 0 10px 34px rgba(58, 34, 15, .12);
}

/* ---- the footer carries the season hardest, so it gets the deepest note ----
   site.css sets it from --blue-deep, which here is a hover colour; a whole
   footer in it would be loud. Bark, with white type at 14.2:1. */
.site-footer { background: var(--fall-bark); }

/* ---- photography: the season in the images, not just around them ----
   A restrained warm grade. Autumn light is lower and warmer; this suggests
   that without looking like a filter was dropped on the site. Deliberately
   small numbers — food photography goes appetising-to-jaundiced fast. */
.hero .bg img { filter: saturate(1.05) sepia(.07); }

/* The hero scrim warms from near-neutral to a low-sun brown. */
.hero .bg::after {
  background: linear-gradient(180deg,
    rgba(42, 24, 10, .44) 0%,
    rgba(42, 24, 10, .30) 45%,
    rgba(48, 26, 10, .62) 100%);
}

/* ---- the one seasonal flourish ----
   The year-round rule under a section heading is a 54px olive bar. Here it
   becomes the harvest itself, left to right: olive, honey, clay. It is the
   only decorative element added anywhere, which is what keeps it tasteful —
   one motif, repeated, instead of autumn scattered over every surface. */
.section-head .rule,
.menu-cat .rule {
  width: 86px;
  background: linear-gradient(90deg,
    var(--fall-olive) 0%,
    var(--fall-honey) 52%,
    var(--fall-terracotta) 100%);
  border-radius: 2px;
}

/* NOT DONE, and worth recording why: the same gradient was tried on the top
   edge of the hero card and the accent cards via border-image. border-image
   ignores border-radius — every one of those cards lost its rounded corners
   and went square. The cards instead take a solid olive top edge, which they
   get for free from --aegean above. One motif, used only where it cannot
   break the geometry, is also the more restrained answer. */

/* ---- badges pick up harvest tints instead of the two blues ---- */
.badge.special      { background: rgba(90, 107, 47, .13);  color: var(--fall-olive); }
.badge.announcement { background: rgba(166, 73, 42, .12);  color: var(--fall-terracotta); }

/* Menu price dots — wheat rather than grey-brown. */
.mi .dots { border-bottom-color: #D8C5A6; }

/* The comment "liked" state was already a warm red; move it onto the
   pomegranate so the one red on the site is the seasonal one. */
.pc-like.on, .pc-like.on:hover { color: var(--fall-pomegranate); }

/* ---- reduced motion / print: nothing here depends on either, but the warm
   grade on photos is a filter, and filters are expensive on low-end Androids
   (the web wrapper's users). Drop it where the browser asks for less work. */
@media (prefers-reduced-motion: reduce) {
  .hero .bg img { filter: none; }
}