/* Teba Restaurant – مطعم واستراحة طيبة
   Commercial palette (Brand Guide). Colors are named by HEX on purpose.
   Arabic is the main language; English is shown when <html> has the class "lang-en". */

@font-face { font-family: "Almarai"; src: url("../fonts/almarai-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("../fonts/almarai-extrabold.woff") format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3.woff") format("woff"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --essential-green: #136734;   /* primary base */
  --green-deep:      #115A2D;   /* Essential Green range (extended shade): edge depth only */
  --forest-green:    #20402C;   /* supporting base, default dark text */
  --antique-gold:    #DDBB6D;   /* primary accent */
  --champagne-gold:  #E0CA95;   /* secondary accent */
  --light-cream:     #FAF6F0;   /* background */

  --ar: "Almarai", "Segoe UI", Tahoma, sans-serif;
  --en: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --line: "Amiri", "Traditional Arabic", "Times New Roman", serif;   /* website line only */

  --tile-w: 92px;               /* primary pattern tile, ratio 37.437 : 36.376 */
  --tile-h: 89.4px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--light-cream);
  color: var(--forest-green);
  font-family: var(--ar);
  font-size: 1.0625rem;
  line-height: 1.85;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.lang-en body { font-family: var(--en); font-size: 1.125rem; line-height: 1.6; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.nowrap { white-space: nowrap; }

/* ---------- Language: Arabic by default, English on toggle ---------- */
html:not(.lang-en) [data-l="en"],
html.lang-en [data-l="ar"] { display: none !important; }
[lang="ar"] { font-family: var(--ar); }
[lang="en"] { font-family: var(--en); }

.lang-toggle {
  position: absolute; z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + clamp(.85rem, 2.5vw, 1.4rem));
  inset-inline-end: clamp(.85rem, 3vw, 1.6rem);
  min-height: 2.5rem;
  padding: .3rem 1.05rem;
  border: 1px solid var(--light-cream);
  border-radius: 999px;
  background: transparent;
  color: var(--light-cream);                 /* 6.5:1 on #136734 */
  font: 600 .98rem/1.2 var(--en);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.lang-toggle [lang="ar"] { font-weight: 700; letter-spacing: 0; }
.lang-toggle:hover { background: var(--light-cream); color: var(--essential-green); }

:focus-visible { outline: 3px solid var(--antique-gold); outline-offset: 3px; border-radius: 4px; }
.lang-toggle:focus-visible { border-radius: 999px; }

/* ---------- Landing: everything on Essential Green #136734 ---------- */
.landing {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* the group sits in the middle; the address line sits at the bottom */
  grid-template-rows: 1fr auto;
  padding: clamp(4.5rem, 11vh, 6rem) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + clamp(1.1rem, 3.5vh, 1.75rem));
  background: radial-gradient(ellipse 90% 80% at 50% 44%, var(--essential-green) 58%, var(--green-deep) 100%);
  color: var(--light-cream);
  text-align: center;
  overflow: hidden;
}
/* primary pattern "طيبة ملتقى الطريق والناس" in Antique Gold #DDBB6D, faint, only at the edges */
.landing::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("../img/pattern-gold.svg") center / var(--tile-w) var(--tile-h) repeat;
  opacity: .13;
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 47%, transparent 58%, #000 100%);
          mask-image: radial-gradient(ellipse 58% 56% at 50% 47%, transparent 58%, #000 100%);
}

.landing__stack { display: grid; justify-items: center; max-width: 52rem; }
.landing__logo { width: clamp(190px, min(54vw, 34vh), 330px); height: auto; }

/* Under the logo mark: 1976 between gold hairlines, then the restaurant's name, small, in Antique Gold #DDBB6D.
   Gold on #136734 is readable only as large text (3.8:1), so both stay bold-ish and at least 19px. */
.landing__name {
  margin: clamp(.45rem, 1.2vh, .7rem) 0 0;
  color: var(--antique-gold);
  font-weight: 700;
  font-size: clamp(1.1875rem, 2.6vw, 1.375rem);
  line-height: 1.5;
}
.lang-en .landing__name { letter-spacing: .02em; }

/* 1976 between two gold hairlines, tracked like "T E B A" in the logo */
.landing__year {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.65rem, 2vw, .95rem);
  margin: clamp(1rem, 2.6vh, 1.5rem) 0 0;
  color: var(--antique-gold);
  font: 600 clamp(1.1875rem, 2.6vw, 1.375rem)/1 var(--en);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .36em;
}
.landing__num { margin-inline-end: -.36em; }           /* cancel the trailing letter-space so it stays centred */
.landing__rule { position: relative; width: clamp(32px, 8vw, 72px); height: 1px; }
.landing__rule::after {
  content: ""; position: absolute; top: 50%;
  width: 6px; height: 6px; background: var(--antique-gold);
  transform: translateY(-50%) rotate(45deg);
}
.landing__rule:first-child { background: linear-gradient(to right, transparent, var(--antique-gold)); }
.landing__rule:first-child::after { right: -3px; }
.landing__rule:last-child { background: linear-gradient(to left, transparent, var(--antique-gold)); }
.landing__rule:last-child::after { left: -3px; }

.landing__line,
.landing__line[lang="ar"] {
  margin: clamp(1.6rem, 4.2vh, 2.6rem) 0 0;
  font-family: var(--line);                  /* Amiri Bold */
  font-weight: 700;
  font-size: clamp(2.6rem, 12.5vw, 5.2rem);  /* Amiri runs smaller than Almarai; on phones this breaks into two lines */
  line-height: 1.3;
  color: var(--light-cream);
  text-wrap: balance;
}

/* gold button to the follow page */
.landing__cta { margin-top: clamp(1.4rem, 3.8vh, 2.2rem); }

/* address at the bottom of the screen, between two small gold diamonds */
.landing__place {
  align-self: end;
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  margin: clamp(1.25rem, 3.5vh, 2.25rem) 0 0;
  font-size: clamp(.95rem, 2.2vw, 1.05rem); line-height: 1.6;
  color: var(--light-cream);                  /* 6.5:1 on #136734 */
}
.landing__place::before, .landing__place::after {
  content: ""; flex: none; width: 5px; height: 5px;
  background: var(--antique-gold); transform: rotate(45deg);
}

/* one quiet opening: logo, then the hairlines draw outward from 1976, then the name and the words */
@media (prefers-reduced-motion: no-preference) {
  .landing__logo { animation: appear 1s var(--ease) both; }
  .landing__num { animation: fade .9s .45s ease both; }
  .landing__rule { animation: draw 1.2s .45s var(--ease) both; }
  .landing__rule:first-child { transform-origin: right; }
  .landing__rule:last-child { transform-origin: left; }
  .landing__name { animation: fade .9s .65s ease both; }
  .landing__line { animation: appear 1s .8s var(--ease) both; }
  .landing__cta { animation: appear 1s 1s var(--ease) both; }
  .landing__place { animation: fade 1s 1.2s ease both; }
  @keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
}

/* ---------- Header used by the follow page and 404 ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vh, 6rem) var(--gutter) clamp(4rem, 10vh, 6rem);
  background: radial-gradient(ellipse 90% 80% at 50% 44%, var(--essential-green) 58%, var(--green-deep) 100%);
  color: var(--light-cream);
  text-align: center;
  overflow: hidden;
}
.hero--compact { min-height: auto; padding-block: clamp(1.25rem, 3.6vh, 2.5rem) clamp(.9rem, 2.6vh, 2rem); background: var(--essential-green); }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("../img/pattern-gold.svg") center / var(--tile-w) var(--tile-h) repeat;
  opacity: .13;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 52%, #000 100%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 52%, #000 100%);
}
.hero__inner { max-width: 52rem; display: grid; justify-items: center; gap: clamp(1.25rem, 3vh, 2rem); }
.hero__logo { width: clamp(180px, 40vw, 300px); height: auto; }
.hero__logo--small { width: clamp(112px, min(34vw, 17vh), 190px); }
.hero__line { margin: 0; font-weight: 800; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.35; color: var(--light-cream); text-wrap: balance; }
.lang-en .hero__line { font-weight: 700; line-height: 1.25; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.hero__link { color: var(--light-cream); font-weight: 700; text-underline-offset: .3em; }   /* 404 page: secondary link, 6.5:1 on #136734 */
.lang-en .hero__link { font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.25rem;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  font-family: var(--ar); font-weight: 700; font-size: 1.1rem; line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.lang-en .btn { font-family: var(--en); font-weight: 600; font-size: 1.15rem; }
.btn--gold { background: var(--antique-gold); color: var(--forest-green); }       /* 6.2:1 */
.btn--gold:hover { background: var(--champagne-gold); }

/* ---------- Follow page: fits one phone screen, no scrolling ---------- */
.page-follow { min-height: 100svh; display: flex; flex-direction: column; }
.follow {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 30rem; margin: 0 auto;
  padding: clamp(.7rem, 2.6vh, 2.5rem) var(--gutter);
}
.follow__title { margin: 0; font-weight: 800; font-size: clamp(1.3rem, 4.4vw, 1.9rem); line-height: 1.35; color: var(--essential-green); text-align: center; }
.lang-en .follow__title { font-weight: 700; line-height: 1.25; }
.follow__intro { margin: clamp(.25rem, 1vh, .8rem) auto 0; max-width: 26rem; font-size: .95rem; line-height: 1.6; text-align: center; text-wrap: balance; }
.lang-en .follow__intro { line-height: 1.45; }
.links { list-style: none; margin: clamp(.7rem, 2.4vh, 1.6rem) 0 0; padding: 0; display: grid; gap: clamp(.45rem, 1.2vh, .75rem); }
.link {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: .9rem;
  min-height: clamp(3.1rem, 7.4vh, 4.1rem);
  padding: .4rem 1rem;
  border-radius: 14px;
  background: var(--essential-green);
  color: var(--light-cream);
  text-decoration: none;
  transition: background-color .2s ease;
}
.link:hover { background: var(--forest-green); }
.link__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--light-cream); color: var(--essential-green); }
.link__icon svg { width: 1.35rem; height: 1.35rem; }
.link__name { display: block; font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.lang-en .link__name { font-weight: 600; font-size: 1.12rem; }
.link__handle { display: block; font-family: var(--en); font-size: .95rem; line-height: 1.35; direction: ltr; unicode-bidi: isolate; }
.link__handle--name { font-family: inherit; direction: inherit; }   /* page name instead of an @handle (Facebook) */
html[dir="rtl"] .link__handle { text-align: right; }
html[dir="ltr"] .link__handle { text-align: left; }
.link__go { width: 1.25rem; height: 1.25rem; color: var(--antique-gold); }
html[dir="ltr"] .link__go { transform: scaleX(-1); }

.tags { margin: clamp(.6rem, 2vh, 1.4rem) 0 0; text-align: center; color: var(--essential-green); font-weight: 700; font-size: clamp(.8rem, 3.6vw, .95rem); line-height: 1.7; }
.tags span { display: inline-block; margin-inline: .22rem; white-space: nowrap; }

.back { display: block; margin-top: clamp(.4rem, 1.6vh, 1.25rem); text-align: center; font-weight: 700; color: var(--essential-green); }

/* ---------- Footer (Forest Green #20402C) ---------- */
.footer {
  padding: clamp(.6rem, 2vh, 1.4rem) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + clamp(.6rem, 2vh, 1.4rem));
  background: var(--forest-green);
  color: var(--light-cream);
  text-align: center;
  font-size: .95rem;
  line-height: 1.6;
}
.footer__line { margin: 0; }
.footer__name { font-weight: 700; }
.footer__place { color: var(--champagne-gold); }
.footer__dot { margin-inline: .45rem; color: var(--antique-gold); }   /* small decoration, gold on #20402C is 6.2:1 */
.footer__copy { margin: .15rem 0 0; font-size: .82rem; color: var(--champagne-gold); }
@media (max-width: 25rem) { .lang-en .footer__line { font-size: .86rem; } .footer__dot { margin-inline: .3rem; } }

/* small screens */
@media (max-width: 30rem) {
  body { font-size: 1rem; }
  .lang-en body { font-size: 1.0625rem; }
  .link { gap: .8rem; padding-inline: .9rem; }
}
/* short screens (phones held sideways) */
@media (max-height: 30rem) {
  .landing { padding-block: 3.75rem 2rem; }
  .landing__line { margin-top: 1.25rem; font-size: clamp(2.1rem, 6vw, 3rem); }
}