/* Author: Saroj Shrestha
 * Owner changes, round 7 — styles the frozen app.css does not contain (loaded after it).
 * Permanent Marker: Apache License 2.0 (licenses/permanentmarker.Apache-2.0.txt). */
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/permanent-marker-latin.woff2) format("woff2");
}

/* Brush lettering matching the EAST logo (Latin; Arabic falls back to the site's Arabic font). */
.font-brush {
  font-family: "Permanent Marker", var(--font-ar-sans), sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Round logo badge: the whole EAST mark, centred on its own background colour. */
.logo-disc {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 9999px;
  background: #d6d7db;
  box-shadow: 0 1px 2px rgb(27 27 30 / 0.12), 0 0 0 1.5px rgb(255 255 255 / 0.65);
}
.logo-disc img {
  width: 74%;
  height: 74%;
  object-fit: contain;
}

/* Home carousel themed per brand: --hero-hl (logo highlight) and --hero-btn (theme colour). */
.hero-eyebrow { color: var(--hero-hl, var(--color-gold)); }
.hero-cta {
  background: var(--hero-btn);
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
}
.hero-cta:hover { background: color-mix(in srgb, var(--hero-btn) 82%, black); border-color: #fff; }
.hero-dot-on { background: var(--hero-hl, #fff); }
.hero-tint {
  background: linear-gradient(to top, color-mix(in srgb, var(--tint) 78%, #0b0d0e) 0%, color-mix(in srgb, var(--tint) 35%, transparent) 45%, transparent 75%);
}

/* Brand pages and cards: text in the logo's colour, accents in its highlight. */
.text-brand-logo { color: var(--brand-text, var(--color-ink)); }
.text-brand-hl { color: var(--brand-hl, var(--color-gold)); }
.btn-brand-outline {
  border-color: var(--color-brand-ink);
  color: var(--color-brand-ink);
  background: transparent;
}
.btn-brand-outline:hover { background: var(--color-brand-ink); color: #fff; }
.logo-sm { height: 34px; }
.logo-md { height: 40px; }
.logo-lg { height: 46px; }

/* Theme-colour button on the brand's dark sections (hero, delivery). */
.btn-brand-dark {
  background: var(--color-brand-ink);
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
}
.btn-brand-dark:hover { background: color-mix(in srgb, var(--color-brand-ink) 82%, black); border-color: #fff; }

/* Dine-in mosaic (Enlist, Feryal): one large photo and up to four smaller ones. */
.dinein-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dinein-grid > li { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--color-paper); }
.dinein-grid > li:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (min-width: 1024px) {
  .dinein-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .dinein-grid > li { aspect-ratio: auto; min-height: 220px; }
  .dinein-grid > li:first-child { grid-row: span 2; aspect-ratio: auto; }
  /* Three photos: the two smaller ones each take a full half. */
  .dinein-grid > li:nth-child(2):nth-last-child(2), .dinein-grid > li:nth-child(3):last-child { grid-column: span 2; }
  .dinein-grid > li:nth-child(2):last-child { grid-row: span 2; }
}
/* Four photos: the last one takes the remaining width (no empty cell). */
.dinein-grid > li:nth-child(4):last-child { grid-column: span 2; }
.dinein-grid > li:nth-child(2):last-child { grid-column: span 2; }

/* ---------------------------------------------------------------- Owner changes, round 8
 * Brand lettering close to each logo (OFL fonts, licenses/*.OFL-1.1.txt), set per brand by
 * BrandTheme::style() / ::fontVars() as --brand-font, --brand-weight, --brand-track. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/cormorant-garamond-latin.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/cinzel-latin.woff2) format("woff2"); }
@font-face { font-family: "Staatliches"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/staatliches-latin.woff2) format("woff2"); }
@font-face { font-family: "Kaushan Script"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/kaushan-script-latin.woff2) format("woff2"); }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/dancing-script-latin.woff2) format("woff2"); }

.brand-font {
  font-family: var(--brand-font, var(--font-display)), var(--font-display);
  font-weight: var(--brand-weight, 600);
  letter-spacing: var(--brand-track, normal);
  font-style: normal;
}
/* Arabic keeps the site's Arabic display face (the brand fonts are Latin-only). */
[dir="rtl"] .brand-font { font-family: var(--font-ar-display); font-weight: 700; letter-spacing: 0; }

/* Home carousel headline in the slide brand's lettering. */
.hero-title { font-family: var(--hero-font, var(--font-display)), var(--font-display); font-weight: var(--hero-weight, 600); letter-spacing: var(--hero-track, -0.01em); }
/* Round 12: group slides use the EAST lettering (the page default); brand slides their own. */
html[lang="en"] .t-hero.hero-title { font-family: var(--hero-font, var(--brand-font)), var(--font-display); font-weight: var(--hero-weight, var(--brand-weight)); letter-spacing: var(--hero-track, var(--brand-track)); }
[dir="rtl"] .hero-title { font-family: var(--font-ar-display); font-weight: 700; letter-spacing: 0; }

/* Footer in the page's brand colour (EAST teal everywhere else). */
.footer-themed { background: color-mix(in srgb, var(--footer-brand, #385867) 72%, #14181a); }

/* Brand logos in a full circle (partials/brand-badge.php). */
.badge-disc {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgb(27 27 30 / 0.12), 0 0 0 1px rgb(27 27 30 / 0.06);
}
.badge-disc img { width: var(--logo-w, 74%); height: auto; max-height: 86%; object-fit: contain; }

/* Map pins as round brand logos with a pointer (public_html/assets/js/branch-map.js). */
.bm-pin.bm-pin-logo { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; }
.bm-logo-row { display: flex; }
.bm-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 2.5px solid;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
  transition: transform 0.2s;
}
.bm-logo + .bm-logo { margin-inline-start: -9px; }
.bm-logo img { height: auto; max-height: 80%; object-fit: contain; -webkit-user-select: none; user-select: none; }
.bm-logo-tip { width: 0; height: 0; margin-top: -1px; border-inline: 6px solid transparent; border-top: 9px solid var(--c1); }
.bm-pin[data-soon] .bm-logo { border-style: dashed; background-clip: padding-box; }
.bm-pin-logo:hover .bm-logo, .bm-pin-logo[data-selected] .bm-logo { transform: scale(1.12); }
.bm-pin-logo:focus-visible .bm-logo { outline: 3px solid var(--color-teal); outline-offset: 2px; }
.bm-pin-logo .bm-pin-label { top: 9px; left: calc(100% + 6px); }
.bm-pin-logo .bm-pin-soon { bottom: calc(100% + 4px); }

/* ---------------------------------------------------------------- Owner changes, round 12
 * EAST is the default theme: every heading uses the EAST lettering and the EAST teal unless a
 * brand or caterer sets its own (--brand-font / --brand-text from BrandTheme::style()).
 * Arabic keeps the site's Arabic display face (app.css: html[lang=ar] rules). */
:root { --brand-font: "Permanent Marker"; --brand-weight: 400; --brand-track: 0.01em; }
html[lang="en"] :is(.t-hero, .t-h1, .t-h2, .t-h3, .t-h4, .t-stat) {
  font-family: var(--brand-font), var(--font-display);
  font-weight: var(--brand-weight);
  letter-spacing: var(--brand-track);
}
/* In app.css's base layer, so the utility colours (text-white, text-paper, …) still win. */
@layer base {
  :where(.t-hero, .t-h1, .t-h2, .t-h3, .t-h4, .t-stat) { color: var(--brand-text, #385867); }
}

/* Two dine-in photos (EAST): side by side, portrait-friendly, at every width. */
.dinein-grid:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dinein-grid:has(> li:nth-child(2):last-child) > li { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; min-height: 0; }

/* ---------------------------------------------------------------- Owner change: console sign-in
 * /admin and /careers/team sign-in pages in the EAST logo theme: teal ground, the grey round
 * logo disc, brush lettering for the wordmark, eyebrow and card title, teal buttons. */
.auth-east { background: linear-gradient(165deg, var(--color-teal) 0%, var(--color-teal-hover) 100%); }
.auth-east .auth-logo { width: 88px; height: 88px; }
.auth-east .auth-word { font-size: 2.25rem; line-height: 1; }
.auth-east .auth-eyebrow { color: #d6d7db; }
.auth-east .auth-card { box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.45); }
.auth-east .auth-title { font-size: 1.5rem; line-height: 1.2; letter-spacing: 0.01em; }
.auth-east .c-btn-primary { background: var(--color-teal); border-color: var(--color-teal); }
.auth-east .c-btn-primary:hover { background: var(--color-teal-hover); border-color: var(--color-teal-hover); }
.auth-east .c-input:focus { border-color: var(--color-teal); }

/* ---------------------------------------------------------------- Owner change: the header
 * "Order Now" (bar and mobile menu) and the chat assistant in the page's brand colour
 * (--site-brand on <body>, from BrandTheme::pageStyle()) — EAST teal on every other page —
 * with the EAST logo's brush lettering for the assistant title. Scoped to these elements only. */
body { --site-ink: var(--site-brand, var(--color-teal)); --site-ink-hover: color-mix(in srgb, var(--site-ink) 85%, black); }
a[data-js-order-hub-open].btn-primary { background: var(--site-ink); border-color: var(--site-ink); color: #fff; }
a[data-js-order-hub-open].btn-primary:hover { background: var(--site-ink-hover); border-color: var(--site-ink-hover); color: #fff; }
[data-js-chat] .bg-ink { background-color: var(--site-ink); }
[data-js-chat] > button.bg-ink:hover { background-color: var(--site-ink-hover); }
[data-js-chat] > button.bg-ink { box-shadow: 0 0 0 3px #d6d7db, var(--shadow-lift); }
[data-js-chat] header p.font-semibold {
  font-family: "Permanent Marker", var(--font-ar-sans), sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
[data-js-chat] header p.text-xs { color: rgb(255 255 255 / 0.75); }
[data-js-chat] form button[type="submit"]:not(:disabled):hover { background-color: var(--site-ink-hover); }
[data-js-chat] .field:focus { border-color: var(--site-ink); }
[data-js-chat] .rounded-full.border-line-strong:hover { border-color: var(--site-ink); color: var(--site-ink); }

/* Phase C: bulleted lists on the Privacy Policy / Terms of Use pages (RTL-aware indent). */
.legal-list { list-style: disc; padding-inline-start: 1.5rem; }
.legal-list li::marker { color: var(--color-teal); }