/* ============================================================
   Hayya — shared site chrome for every page except the homepage
   Header, footer, film grain and the sticky App Store button, in
   the homepage's design language (home.css). Classes are prefixed
   `site-` so they cannot collide with a page family's own `.nav`,
   `.btn` or `.foot` rules. Keep the look in step with home.css.
   ============================================================ */

:root {
  --hy-ink:     #070F1C;
  --hy-ink-2:   #0B1626;
  --hy-night:   #04080F;
  --hy-ivory:   #F2EBDD;
  --hy-ivory-2: #CFC7B8;
  --hy-mute:    #8C98A6;
  --hy-mute-2:  #5F6B79;
  --hy-gold:    #D4A853;
  --hy-gold-2:  #E9C98A;
  --hy-line:    rgba(242, 235, 221, 0.12);
  --hy-line-2:  rgba(242, 235, 221, 0.22);
  --hy-serif:   "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --hy-sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hy-arabic:  "Amiri", "Geeza Pro", serif;
  --hy-max:     1240px;
  --hy-gutter:  clamp(16px, 4.5vw, 56px);
  --hy-ease:    cubic-bezier(.2, .7, .2, 1);
}
[dir="rtl"] {
  --hy-serif: "Cormorant Garamond", "Amiri", serif;
  --hy-sans:  "Hanken Grotesk", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background: var(--hy-ink);
  color: var(--hy-ivory);
  font-family: var(--hy-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain over everything — keeps the flat navy from looking digital */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(212, 168, 83, .35); color: var(--hy-ivory); }

.site-wrap { max-width: var(--hy-max); margin: 0 auto; padding: 0 var(--hy-gutter); }

.site-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--hy-ivory); color: var(--hy-ink); padding: 10px 14px; border-radius: 8px;
  font: 600 14px/1.2 var(--hy-sans); text-decoration: none;
}
.site-skip:focus { top: 12px; }

/* ---------- Buttons ---------- */

.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 15px/1 var(--hy-sans); letter-spacing: .01em;
  text-decoration: none;
  transition: background .3s var(--hy-ease), color .3s var(--hy-ease), transform .3s var(--hy-ease);
}
.site-btn-solid { background: var(--hy-ivory); color: var(--hy-ink); }
.site-btn-solid:hover { background: #fff; color: var(--hy-ink); transform: translateY(-1px); }
.site-btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- Header ---------- */

/* Sticky and always glassed: sub-pages have no full-bleed hero photo for a
   transparent header to sit on. */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 15, 28, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--hy-line);
}
.site-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }

.site-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 26px/1 var(--hy-serif); letter-spacing: .01em;
  text-decoration: none; color: var(--hy-ivory);
}
.site-brand:hover { color: var(--hy-ivory); text-decoration: none; }
.site-brand svg { width: 22px; height: 22px; color: var(--hy-gold); }

.site-links { display: flex; align-items: center; gap: 30px; font: 400 14.5px/1.4 var(--hy-sans); }
.site-links > a:not(.site-btn) { color: var(--hy-ivory-2); text-decoration: none; transition: color .2s; }
.site-links > a:not(.site-btn):hover,
.site-links > a[aria-current] { color: var(--hy-ivory); text-decoration: none; }

.site-lang { display: inline-flex; gap: 2px; font-size: 13px; }
.site-lang a { padding: 4px 8px; border-radius: 6px; color: var(--hy-ivory-2); text-decoration: none; }
.site-lang a[aria-current] { color: var(--hy-ivory); background: rgba(242, 235, 221, .08); }
.site-lang a[lang="ar"] { font-family: var(--hy-arabic); font-size: 16px; line-height: 1; }

.site-menu { display: none; position: relative; border: 0; }
/* Page stylesheets may style bare details/summary; the menu opts out. */
.site-menu, .site-menu summary { background: none; border-radius: 0; margin: 0; overflow: visible; padding: 0; box-shadow: none; }
.site-menu summary::after { content: none; }
.site-nav .site-menu summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hy-line-2);
}
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary span, .site-menu summary span::before, .site-menu summary span::after {
  display: block; width: 16px; height: 1.5px; background: var(--hy-ivory); position: relative; content: "";
}
.site-menu summary span::before { position: absolute; top: -5px; }
.site-menu summary span::after { position: absolute; top: 5px; }
.site-menu-panel {
  position: absolute; right: 0; top: 54px; min-width: 220px;
  background: var(--hy-ink-2); border: 1px solid var(--hy-line); border-radius: 16px;
  padding: 10px; display: grid; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
[dir="rtl"] .site-menu-panel { right: auto; left: 0; }
.site-menu-panel a { padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--hy-ivory-2); font: 400 15px/1.4 var(--hy-sans); }
.site-menu-panel a:hover { background: rgba(242, 235, 221, .06); color: var(--hy-ivory); }

/* ---------- Footer ---------- */

.site-foot { background: var(--hy-night); border-top: 1px solid var(--hy-line); padding: 56px 0 44px; margin-top: 0; }
.site-foot-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font: 400 14.5px/1.5 var(--hy-sans); }
.site-foot nav a { color: var(--hy-ivory-2); text-decoration: none; }
.site-foot nav a:hover { color: var(--hy-ivory); text-decoration: none; }
.site-foot .site-small {
  grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--hy-mute-2); font: 400 13.5px/1.5 var(--hy-sans);
  padding-top: 28px; border-top: 1px solid var(--hy-line);
}
.site-foot .site-small [lang="ar"] { font-family: var(--hy-arabic); font-size: 16px; color: var(--hy-gold); }

/* ---------- Sticky download ---------- */

/* The app's gold, slightly see-through over a blur so the page reads
   beneath it. site.js shows it once the reader is past the top of the page
   and steps it aside wherever the page's own App Store button is on screen.
   Without JS it simply stays. Mirrors .sticky-cta in home.css. */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(212, 168, 83, .86), rgba(233, 201, 138, .86));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(242, 235, 221, .28);
  box-shadow: 0 14px 34px -10px rgba(4, 8, 15, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: var(--hy-ink);
  font: 600 15px/1 var(--hy-sans); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .35s var(--hy-ease), transform .35s var(--hy-ease), background .3s var(--hy-ease);
}
.sticky-cta svg { width: 17px; height: 17px; flex: none; }
.sticky-cta:hover { color: var(--hy-ink); text-decoration: none; background: linear-gradient(135deg, rgba(212, 168, 83, .96), rgba(233, 201, 138, .96)); }
.sticky-cta:focus-visible { outline: 2px solid var(--hy-ivory); outline-offset: 3px; }
[lang="ar"] .sticky-cta { font-family: var(--hy-arabic); font-size: 17px; }

.js .sticky-cta:not(.show) {
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s var(--hy-ease), transform .35s var(--hy-ease), visibility 0s linear .35s;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .site-links > a:not(.site-btn), .site-links > .site-lang { display: none; }
  .site-menu { display: block; }
  .site-links { gap: 12px; }
}

@media (max-width: 620px) {
  .site-nav-inner { height: 64px; }
  .site-links .site-btn { display: none; }
  .site-foot-inner { grid-template-columns: 1fr; }
  .sticky-cta { width: calc(100% - 32px); max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .js .sticky-cta:not(.show) { transition: none; transform: translateX(-50%); }
}