/* Pita Bell — themes. <html data-theme="…"> is set in <head> and by js/site.js from the admin.
   regular: the site as designed. classic: the printed menu (black, a geometric lattice, gold).
   ramadan / eid: the regular site dressed for the occasion (decorations come from main.js). */

/* ================================================================== classic */
/* The original Pita Bell menu boards: a black gradient with a faint eight-point-star lattice
   over it, gold cards with dark lettering, gold headlines. */
html[data-theme="classic"] {
  --gold: #E2B455;
  --gold-hi: #F7DC8E;
  --gold-lo: #A8772C;
  --gold-grad: linear-gradient(135deg, #A8772C 0%, #E9C46F 28%, #F7DC8E 46%, #D6A447 68%, #B5832F 100%);
  --night: #0E0C0B;
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='2'%3E%3Cpath d='M80 23 L120 40 L137 80 L120 120 L80 137 L40 120 L23 80 L40 40 Z'/%3E%3Cpath d='M52 52 H108 V108 H52 Z' transform='rotate(45 80 80)'/%3E%3Cpath d='M52 52 H108 V108 H52 Z'/%3E%3Cpath d='M0 0 L40 40 M160 0 L120 40 M0 160 L40 120 M160 160 L120 120 M80 0 V23 M80 160 V137 M0 80 H23 M160 80 H137'/%3E%3C/g%3E%3C/svg%3E");
  --board: var(--lattice) center top / 160px 160px repeat, radial-gradient(ellipse at 50% 30%, #2C2724 0%, #171412 55%, #0B0A09 100%) fixed;

  /* The site's own colour words, re-pointed: text goes light, red headlines go gold. */
  --cream: #141110;
  --ink: #F4E8CF;
  --ink-soft: #CDB78E;
  --red: #E2B455;
  --teal: #1D1814;
  --teal-deep: #16120F;
  --teal-dark: #0F0C0A;
  --yellow: #E2B455;
  --brown: #0E0C0B;
  color-scheme: dark;
}
html[data-theme="classic"] body,
html[data-theme="classic"] .hero,
html[data-theme="classic"] .lz,
html[data-theme="classic"] .menu,
html[data-theme="classic"] .insta,
html[data-theme="classic"] .cater,
html[data-theme="classic"] .rev,
html[data-theme="classic"] .hungry,
html[data-theme="classic"] .foot,
html[data-theme="classic"] .loader { background: var(--board); }
html[data-theme="classic"] .seat { background: var(--board); border-top: 3px solid var(--gold-lo); }
/* Gold rules between sections, like the bands on the printed menu. */
html[data-theme="classic"] .rev, html[data-theme="classic"] .cater, html[data-theme="classic"] .insta,
html[data-theme="classic"] .hungry, html[data-theme="classic"] .foot, html[data-theme="classic"] .lz, html[data-theme="classic"] .menu { border-top: 3px solid var(--gold-lo); }

/* Gold lettering for the big words (a metal gradient, like their board headings). */
html[data-theme="classic"] .hero__word .ch,
html[data-theme="classic"] .insta__title a, html[data-theme="classic"] .hungry__word .ch, html[data-theme="classic"] .foot__word .ch,
html[data-theme="classic"] .rev__num .rd__col > span, html[data-theme="classic"] .rev__num > span:not(.rd), html[data-theme="classic"] .lid__title, html[data-theme="classic"] .seat__title,
html[data-theme="classic"] .map__title, html[data-theme="classic"] .mh__word .ch, html[data-theme="classic"] .cat__head h2,
html[data-theme="classic"] .pgfoot__word {
  color: var(--gold);
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* A text-shadow would show through the see-through fill; a drop shadow sits behind it. */
  text-shadow: none;
}
html[data-theme="classic"] .seat__title { filter: drop-shadow(0 5px 0 #000); }
html[data-theme="classic"] .lz__word .ch, html[data-theme="classic"] .menu__word .ch { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-theme="classic"] .rev__word { color: var(--ink); }
html[data-theme="classic"] .kicker, html[data-theme="classic"] .rev__kicker, html[data-theme="classic"] .kicker--copper { color: var(--gold-hi); }

/* Buttons and stickers become gold cards with dark lettering. */
html[data-theme="classic"] .btn--red, html[data-theme="classic"] .cart-btn {
  background: var(--gold-grad); color: #2A1A0C; border-color: #3A2A18; box-shadow: 0 10px 22px rgba(0, 0, 0, .45);
}
html[data-theme="classic"] .btn--cream { background: #1E1915; color: var(--gold-hi); border-color: var(--gold-lo); }
html[data-theme="classic"] .btn--ink { background: transparent; color: var(--gold-hi); border-color: var(--gold); }
html[data-theme="classic"] .tag, html[data-theme="classic"] .sticker:not(.is-shaped) { background: var(--gold-grad); color: #2A1A0C; border-color: #3A2A18; }
html[data-theme="classic"] .is-shaped { color: #2A1A0C; }
html[data-theme="classic"] .is-shaped > svg path:first-of-type { fill: #D9A949; stroke: #3A2A18; }
html[data-theme="classic"] .bar__nav > a:not(.cart-btn), html[data-theme="classic"] .bar.is-light .bar__nav > a:not(.cart-btn) { color: var(--ink); }
html[data-theme="classic"] .bar__nav > a:not(.cart-btn):hover { color: var(--gold-hi); }
html[data-theme="classic"] .bar.is-red .cart-btn { background: var(--gold-grad); color: #2A1A0C; }
html[data-theme="classic"] .note { color: var(--gold-hi); }
html[data-theme="classic"] .print { border-color: #E9C46F; }
html[data-theme="classic"] .post { border-color: #E9C46F; }

/* The map: the gold card from their menu, with dark streets. */
html[data-theme="classic"] .map { background: var(--gold-grad); }
html[data-theme="classic"] .map__title { background: none; -webkit-text-fill-color: #2A1A0C; color: #2A1A0C; }
html[data-theme="classic"] .map__roads path { stroke: rgba(42, 26, 12, .28); }
html[data-theme="classic"] .map__river { fill: #2A1A0C; opacity: .85; }
html[data-theme="classic"] .map__label { fill: #2A1A0C; }
html[data-theme="classic"] .map__route { stroke: #8A1F14; }
html[data-theme="classic"] .map__pin-a path, html[data-theme="classic"] .map__pin-b path { fill: #8A1F14; }
html[data-theme="classic"] .spot { background: #171311; color: var(--ink); }
html[data-theme="classic"] .spot h3 { color: var(--gold); }
html[data-theme="classic"] .spot__go { color: var(--gold-hi); }
html[data-theme="classic"] .spot__k, html[data-theme="classic"] .spot__addr { color: var(--ink-soft); }
html[data-theme="classic"] .map__call { background: #171311; color: var(--gold-hi); border-color: #171311; }

/* Reviews, catering, menu bits */
html[data-theme="classic"] .rev__star svg path { stroke: #3A2A18; }
html[data-theme="classic"] .rev__q { background: #F1DDA5; color: #2A1A0C; }
html[data-theme="classic"] .rev__q footer { color: #6A4A20; }
html[data-theme="classic"] .lid__big { color: var(--gold-hi); }
html[data-theme="classic"] .cater__or a { color: var(--gold-hi); }
html[data-theme="classic"] .menu__price, html[data-theme="classic"] .lz__price span { color: #2A1A0C; }
html[data-theme="classic"] .info__amount { color: #2A1A0C; }
html[data-theme="classic"] .lz__tabs button, html[data-theme="classic"] .menu__tabs button { color: #9C8A6C; }
html[data-theme="classic"] .lz__tabs button[aria-current="true"], html[data-theme="classic"] .menu__tabs button[aria-current="true"] { color: var(--gold-hi); border-bottom-color: var(--gold); }
html[data-theme="classic"] .foot__hint { color: var(--ink-soft); }
/* Panels that open over the page keep their light paper, so forms stay easy to read. */
html[data-theme="classic"] .cf__panel { --ink: #1E1410; --ink-soft: #5A4636; --red: #C8221B; --cream: #EFE2CC; color: #1E1410; }
html[data-theme="classic"] .cf__panel .btn--red { background: var(--gold-grad); color: #2A1A0C; }
html[data-theme="classic"] .notice { background: var(--gold-grad); color: #2A1A0C; }
html[data-theme="classic"] .notice button { background: rgba(42, 26, 12, .15); color: #2A1A0C; }

/* Menu and dish pages: every section colour becomes the board's gold. */
html[data-theme="classic"] body.pg { background: var(--board); }
html[data-theme="classic"] .pg [data-tone] { --tone: #E2B455; --on-tone: #2A1A0C; }
html[data-theme="classic"] .pg .card, html[data-theme="classic"] .pg .row { color: var(--ink); }
html[data-theme="classic"] .pg .card__txt p, html[data-theme="classic"] .pg .row__desc { color: var(--ink-soft); }
html[data-theme="classic"] .pg .card__price, html[data-theme="classic"] .pg .row__price { color: var(--gold-hi); }
html[data-theme="classic"] .pg .card--cut .card__ph { background: var(--gold-grad); }
html[data-theme="classic"] .pg .row { border-bottom-color: rgba(226, 180, 85, .18); }
html[data-theme="classic"] .pg .row__name::after { border-bottom-color: rgba(226, 180, 85, .35); }
html[data-theme="classic"] .pg .cats { background: rgba(14, 12, 11, .92); }
html[data-theme="classic"] .pg .cats a { color: var(--ink); }
html[data-theme="classic"] .pg .pgfoot { background: #0B0A09; color: var(--ink); border-top: 3px solid var(--gold-lo); }
html[data-theme="classic"] .pg .gal--none { background: var(--gold-grad); color: #2A1A0C; }
html[data-theme="classic"] .pg .facts details { border-color: rgba(226, 180, 85, .25); }
html[data-theme="classic"] .pg .chip span { background: #1E1915; color: var(--ink); }

/* ================================================================== ramadan & eid */
/* The site stays itself; main.js hangs the decorations (lanterns and a crescent for Ramadan,
   bunting and a star burst for Eid) and adds a sticker. Colours here are for those. */
.festive { position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }
.festive svg { overflow: visible; }

/* Ramadan: copper lanterns (fanous) hanging on cords at both edges of the first screen. */
.lantern { position: absolute; top: 0; transform-origin: 50% 0; will-change: transform; filter: drop-shadow(0 12px 14px rgba(60, 30, 5, .3)); }
.lantern__glow { animation: none; }
.crescent { position: absolute; will-change: transform; filter: drop-shadow(0 10px 14px rgba(60, 30, 5, .25)); }
.festive__star { position: absolute; will-change: transform, opacity; }

/* Eid: a string of flags across the top, in the restaurant's colours. */
.bunting { position: absolute; left: -2vw; top: 0; width: calc(100% + 4vw); height: clamp(80px, 9vw, 120px); }
.bunting__flag { transform-box: fill-box; transform-origin: 50% 0; will-change: transform; }

/* The FAMILY-RUN sticker says the occasion instead (words set in main.js). */
html[data-theme="ramadan"] .sticker--family { background: #1F2A5A; }
html[data-theme="eid"] .sticker--family { background: var(--teal); }
.sticker--family small { display: block; font-size: .5em; letter-spacing: .16em; margin-top: 3px; opacity: .9; }

@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .bunting { height: 64px; top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .lantern, .bunting__flag, .crescent, .festive__star { transition: none; }
}