/* ============================================================
   Mira's Cafe — shared styles (site.css)
   One source of truth for fonts, tokens, base, nav, footer,
   buttons, and shared utilities. Page-specific CSS lives inline
   in each .html file.
   ============================================================ */

/* ---------- fonts (self-hosted, content-hashed) ---------- */
@font-face {
  font-family: "Bitter";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/5ad4987b6c.woff2") format("woff2");
}
@font-face {
  font-family: "Bitter";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/222764fa2f.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/4ab51eb2cd.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/19bf198495.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/35c5efa0e5.woff2") format("woff2");
}

/* ---------- design tokens ---------- */
:root {
  /* brand — pulled from the menu art + the spice photo */
  --maroon:        #5A1616;   /* deep brand red */
  --maroon-deep:   #430F0F;   /* darker press */
  --maroon-soft:   #7A2323;   /* lifted maroon */
  --gold:          #D4A23C;   /* turmeric gold accent */
  --gold-bright:   #E6B94F;
  --gold-soft:     #F0D79A;

  /* neutrals — warm cream base, not the dead Weebly beige */
  --paper:         #FBF6EC;   /* page background */
  --paper-deep:    #F3EAD8;   /* alt section */
  --card:          #FFFFFF;
  --ink:           #2A1D17;   /* warm near-black text */
  --ink-soft:      #5B4A40;   /* secondary text */
  --ink-mute:      #8A7A6E;   /* captions */
  --rule:          #E4D8C2;   /* hairlines on paper */
  --cream:         #F3ECDA;   /* text on maroon */
  --cream-mute:    #D8C5A8;   /* secondary text on maroon */

  --green:         #3F7A4B;   /* vegetarian tag */
  --chili:         #C0392B;   /* spicy tag */

  --maxw: 1200px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px -18px rgba(67, 15, 15, .28);
}

/* ---------- reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: "Bitter", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1rem; max-width: 64ch; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.eyebrow {
  font-family: "DM Sans", sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: "DM Sans", sans-serif; font-weight: 700; font-size: .98rem;
  padding: 13px 24px; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: var(--maroon-deep); }
.btn-primary:hover { background: var(--gold-bright); box-shadow: 0 8px 24px -8px rgba(212,162,60,.6); }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(243,236,218,.4); }
.btn-ghost:hover { background: rgba(243,236,218,.12); border-color: var(--cream); }
.btn-dark { background: var(--maroon); color: var(--cream); }
.btn-dark:hover { background: var(--maroon-soft); box-shadow: var(--shadow); }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }

/* ---------- tags / pills ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
}
.tag-veg { background: rgba(63,122,75,.12); color: var(--green); }
.tag-spicy { background: rgba(192,57,43,.12); color: var(--chili); }
.tag-sig { background: rgba(212,162,60,.16); color: #9A6E1E; }

/* ---------- navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,246,236,.9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 72px;
}
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: .97rem;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--maroon); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone {
  display: inline-flex; align-items: center; gap: .4em;
  text-decoration: none; color: var(--maroon); font-weight: 700; font-size: .97rem;
}
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav-phone span { display: none; }
}

/* ---------- footer ---------- */
.footer { background: var(--maroon-deep); color: var(--cream-mute); }
.footer a { color: var(--cream); text-decoration: none; }
.footer a:hover { color: var(--gold-bright); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-block: 64px 40px;
}
.footer-logo img { height: 52px; width: auto; margin-bottom: 18px; }
.footer h4 {
  font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px;
}
.footer-hours { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; max-width: 260px; }
.footer-hours .day { color: var(--cream-mute); }
.footer-hours .hrs { color: var(--cream); font-weight: 500; }
.footer-bottom {
  border-top: 1px solid rgba(243,236,218,.14);
  padding-block: 20px 28px; font-size: .85rem; color: var(--cream-mute);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- scroll reveal (progressive enhancement) ----------
   Content is VISIBLE BY DEFAULT. JS opts specific below-fold
   elements into the animation by adding .pre; nothing is ever
   hidden unless JS is present, supported, and actively animating.
   No FOUC, no content lost if JS fails or is slow. */
[data-reveal] { opacity: 1; transform: none; }
.js-reveal [data-reveal].pre { opacity: 0; transform: translateY(22px); }
.js-reveal [data-reveal].pre.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}