/* Shared UI components used by BOTH the home (style.css) and inner pages
   (pages.css): nav, buttons, footer, WhatsApp FAB, reveal. Load this before
   the page stylesheet. Markup comes from lib/layout.js so it can't drift. */
:root {
  --c-bg: #050a16;
  --c-line: rgba(120, 170, 255, .14);
  --c-line2: rgba(120, 170, 255, .26);
  --c-ink: #e8eefc;
  --c-muted: #93a4c4;
  --c-muted2: rgba(150, 185, 225, .6);
  --c-accent: #4c97de;
  --c-mono: #7cc4ff;
  --c-maxw: 1140px;
}

/* buttons */
.btn {
  box-sizing: border-box; /* home page has no global border-box; keep width:100% buttons inside their container */
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; min-height: 44px; font-family: inherit; white-space: nowrap;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: #eaf3ff; color: #0a1428; box-shadow: 0 0 34px rgba(120, 190, 255, .22); }
.btn-primary:hover { background: #fff; color: #0a1428; }
.btn-accent, .btn-book { background: linear-gradient(135deg, #2f6bff, #0561b8); color: #fff; }
.btn-accent:hover, .btn-book:hover { color: #fff; box-shadow: 0 8px 28px rgba(5, 97, 184, .42); }
.btn-ghost { border-color: var(--c-line2); color: var(--c-ink); background: rgba(120, 170, 255, .04); }
.btn-ghost:hover { border-color: var(--c-accent); color: #9fd0ff; }

/* nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px clamp(18px, 5vw, 40px);
  background: rgba(5, 10, 22, .5); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease;
}
.nav.scrolled { background: rgba(5, 10, 22, .9); border-bottom-color: var(--c-line); }
.nav-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--c-ink); }
.nav-brand .brand-cube { display: block; }
.nav-word { font-weight: 700; letter-spacing: .2em; font-size: 16px; }
html[lang="ar"] .nav-word { letter-spacing: .04em; }
.nav-menu { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.nav-links { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 24px); list-style: none; margin: 0; padding: 0; }
.nav-link { font-size: 14.5px; color: var(--c-muted); padding: 6px 2px; position: relative; transition: color .18s ease; }
.nav-link:hover, .nav-link.active { color: var(--c-ink); }
.nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-lang { display: flex; align-items: center; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--c-muted); }
.nav-lang a { color: var(--c-muted2); }
.nav-lang a.on { color: var(--c-accent); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; padding: 0; }
.nav-toggle span { width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* footer */
.site-footer { position: relative; z-index: 5; border-top: 1px solid var(--c-line); background: #070d1c; }
.foot-grid { max-width: var(--c-maxw); margin-inline: auto; padding: clamp(38px, 6vw, 64px) clamp(18px, 5vw, 40px) 30px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 34px; }
.foot-brand .foot-tag { color: var(--c-muted); font-size: 14px; margin-top: 12px; max-width: 32ch; }
.foot-col h3 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted2); margin-bottom: 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a, .foot-col li { color: var(--c-muted); font-size: 14px; }
.foot-col a:hover { color: #9fd0ff; }
.foot-bar { border-top: 1px solid var(--c-line); max-width: var(--c-maxw); margin-inline: auto; padding: 16px clamp(18px, 5vw, 40px); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: var(--c-muted2); font-size: 12.5px; font-family: 'IBM Plex Mono', monospace; }

/* WhatsApp FAB */
.wa-fab { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #073; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: wa-pulse 2.6s ease-out infinite; }
.wa-fab:hover { color: #062; transform: scale(1.06); }
@keyframes wa-pulse { 0% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.45); } 70%,100% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 16px rgba(37,211,102,0); } }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="2"] { transition-delay: .08s; }
[data-reveal="3"] { transition-delay: .16s; }
[data-reveal="4"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .wa-fab { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* mobile nav — full-width dropdown from the top (handled separately from desktop) */
@media (max-width: 760px) {
  .nav { padding: 12px clamp(16px, 5vw, 40px); }
  /* Pin the brand cube to one size everywhere so the header logo is identical on
     the home page and every inner page (previously drifted 18px vs 22px). */
  .nav-brand .brand-cube { width: 18px; height: 18px; }
  /* Toggle stays above the open panel (same nav stacking context) so it always
     toggles closed, and never ends up buried under the menu. */
  .nav-toggle { display: flex; position: relative; z-index: 60; }
  /* Opaque panel that spans the full viewport width on every device. An opaque
     background (not backdrop-filter) is deliberate: iOS/in-app webviews drop
     backdrop-filter on transformed fixed elements, which rendered the old side
     drawer blank — so the button looked "unclickable" when it had in fact opened. */
  .nav-menu {
    position: fixed; inset: 0; width: 100%; z-index: 55; box-sizing: border-box;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    background: #070d1c;
    padding: 74px clamp(20px, 6vw, 34px) 32px;
    transform: translateY(-100%); transition: transform .34s cubic-bezier(.16, 1, .3, 1);
    min-height: 100dvh; overflow-y: auto;
  }
  .nav.open .nav-menu { transform: translateY(0); }
  body.nav-locked { overflow: hidden; }
  .nav.scrolled { border-bottom-color: transparent; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .nav-link { font-size: 17px; padding: 14px 4px; border-bottom: 1px solid var(--c-line); }
  .nav-link.active::after { display: none; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 16px; }
  .nav-actions .btn-book { width: 100%; }
  .nav-lang { justify-content: center; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 420px) {
  .foot-grid { grid-template-columns: 1fr; }
  .wa-fab { width: 52px; height: 52px; inset-block-end: 16px; inset-inline-end: 16px; }
}