/* ===== Base reset ===== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; background:#fff; }

body{
  margin:0; background:#fff; color:#0f172a;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', Arial, sans-serif;
  overflow-x:hidden;
}
.container{ width:min(1200px, 100% - 2rem); margin-inline:auto; }

/* ===== Header (structure) ===== */
.site-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid #e8eef1; z-index:50; }
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; direction:ltr; }
.brand{ display:flex; align-items:center; gap:1.95rem; }
.brand .crest{ height:76px; width:auto; }
.brand .brand-logo{ height:75px; width:auto; }

/* Base nav layout (will be visually styled as buttons below) */
.nav-toggle{ display:none; }
.site-nav{ display:flex; align-items:center; gap:1rem; }

/* ============================
   HEADER NAV → BUTTON LOOK
   ============================ */
:root{
  --btn-bg:#ffffff;
  --btn-text:#183237;
  --btn-border:#d8e6eb;
  --btn-hover:#f3fbfd;
  --btn-shadow:0 1px 0 rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
  --btn-shadow-hover:0 3px 10px rgba(0,0,0,.10);
  --brand:#10b3b0;
}

/* Base button styling for all header links */
.site-nav a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem;
  background:var(--btn-bg);
  color:var(--btn-text);
  border:1px solid var(--btn-border);
  border-radius:.6rem;
  box-shadow:var(--btn-shadow);
  text-decoration:none;
  font-weight:700;
  transition:background-color .18s ease, box-shadow .18s ease, transform .02s ease, color .18s ease;
}

/* Hover / active / focus (accessible) */
.site-nav a:hover{ background:var(--btn-hover); box-shadow:var(--btn-shadow-hover); color:#0a8f8c; transform:translateY(-1px); }
.site-nav a:active{ transform:translateY(0); box-shadow:inset 0 1px 2px rgba(0,0,0,.12); }
.site-nav a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Optional “current page” highlight */
.site-nav a[aria-current="page"],
.site-nav a.active{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(16,179,176,.12), var(--btn-shadow); }

/* Icon next to labels (desktop) */
.site-nav a .menu-icon{
  width:18px; height:18px; object-fit:contain; display:inline-block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.site-nav a.gallery-link .menu-icon{ width:19px; height:19px; }

/* Make the toggle itself look like a button too */
.nav-toggle{
  display:none; align-items:center; gap:.4rem;
  background:#fff; color:var(--btn-text);
  border:1px solid var(--btn-border);
  border-radius:.6rem; padding:.45rem .7rem;
  box-shadow:var(--btn-shadow);
  cursor:pointer;
}
.nav-toggle:hover{ background:var(--btn-hover); box-shadow:var(--btn-shadow-hover); }

/* ==============
   MOBILE DROPDOWN
   ============== */
@media (max-width:830px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    display:none; position:absolute; right:1rem; top:64px;
    flex-direction:column; gap:.5rem;
    background:#fff; padding:.75rem;
    border:1px solid #e5edf1; border-radius:.9rem;
    box-shadow:0 10px 28px rgba(0,0,0,.12);
    min-width:220px;
  }
  .site-nav.open{ display:flex; }






  /* Make each item a big tappable button; stack icon above text */
  .site-nav a{
    width:100%; justify-content:center; text-align:center;
    padding:.9rem 1rem; border-radius:.8rem;
  }
  .site-nav a .menu-icon{
    width:22px; height:22px; margin:0 0 .15rem 0;
  }
}

/* ===== Sections: image-only ===== */
.section{ padding:0; margin:0; }
.img-wrap{ width:100%; margin:0; }
.img-wrap img{ width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid #e8eef1;
  background:#fff;
  padding:28px 16px;
  text-align:center;
}
.site-footer .footer-inner{ direction:rtl; }
.site-footer .footer-title{
  margin:0 0 6px 0; font-weight:800; line-height:1.25;
  font-size:clamp(17px,1.2vw,34px); color:#0f2c3a;
}
.site-footer .footer-sub{
  margin:0; font-weight:600; line-height:1.25;
  font-size:clamp(14px,2.2vw,20px); color:#2a3f4a;
}

/* ===== Video Hero (full-width, cover, no loop; non-interactive) ===== */
.video-hero{ margin:0; padding:0; line-height:0; }
.video-hero__wrap{ width:100%; aspect-ratio:832/464; margin:0; }
.video-hero__wrap video{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; pointer-events:none; }

/* Banner strip under video */
.hero-strip{
  margin-top:0; text-align:center; background:#10b3b0; color:#fff; padding:10px !important;
}
.hero-strip .strip-title{
  margin:0 0 4px 0; font-weight:800; line-height:1.25; font-size:clamp(18px,3.2vw,30px);
}
.hero-strip .strip-sub{
  margin:0; font-weight:700; line-height:1.25; font-size:clamp(14px,2.4vw,20px);
}

/* === Gallery page basics ============================================== */
.gallery{ padding:24px 0 48px; }
.gallery-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
.gallery-grid .g-item img{ width:100%; height:auto; display:block; border-radius:8px; }
@media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; } }
@media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; } }


/* === Gallery link icon in nav === */
.site-nav a .nav-icon{ width:18px; height:18px; display:inline-block; }
@media (max-width:640px){
  .site-nav a{ display:flex; flex-direction:column; align-items:center; gap:.25rem; }
  .site-nav a .nav-icon{ width:22px; height:22px; }
}

/* === Gallery page (no text) === */
.gallery{ padding:16px 0 40px; }
.gallery-grid{
  display:grid; gap:.75rem;
  grid-template-columns:repeat(2, 1fr);
  width:min(1200px, 100% - 2rem); margin-inline:auto;
}
@media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); gap:1rem; } }
@media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(4, 1fr); gap:1.1rem; } }
.gallery-grid a{ aspect-ratio: var(--ar, 1/1); position:relative; display:block; border-radius:.6rem; overflow:hidden; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto; display:block; -webkit-user-drag:none; user-select:none; transition:transform .2s; }
.gallery-grid a:hover img{ transform:scale(1.03); }

/* Lightbox */
.lb{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.9); z-index:1000; }
.lb.open{ display:flex; }
.lb img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:8px; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; cursor:pointer; }
.lb-prev{ inset-inline-start:24px; } .lb-next{ inset-inline-end:24px; }
.lb-close{ top:18px; right:18px; transform:none; }

/* ===== Lightbox — swipe helpers + RTL icon flip + a11y ===== */

/* Prevent browser back-swipe/scroll chaining while the lightbox is open */
.lb{ overscroll-behavior: contain; touch-action: none; }

/* Let the image accept horizontal drags cleanly */
.lb img{
  touch-action: pan-y;               /* allow vertical panning; we handle horizontal */
  user-select: none;
  -webkit-user-drag: none;
}

/* If your arrow icons are SVGs, flip them in RTL so they always point inward */
:root:dir(rtl) .lb-btn svg{ transform: scaleX(-1); }

/* Button affordances (hover/focus/active) */
.lb-btn{
  backdrop-filter: saturate(140%) blur(2px);
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.lb-btn:hover{ background:rgba(255,255,255,.18); box-shadow:0 4px 16px rgba(0,0,0,.28); }
.lb-btn:active{ transform:translateY(calc(-50% + 1px)); }
.lb-btn:focus-visible{ outline:2px solid var(--brand, #10b3b0); outline-offset:2px; }

/* Keep your logical insets for RTL/LTR mirroring (you already set these) */
.lb-prev{ inset-inline-start:24px; }
.lb-next{ inset-inline-end:24px; }

/* Mobile touch targets + spacing tweaks */
@media (max-width:640px){
  .lb-btn{ width:52px; height:52px; }
  .lb-prev{ inset-inline-start:12px; }
  .lb-next{ inset-inline-end:12px; }
  .lb img{ max-width:94vw; max-height:86vh; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .gallery-grid img{ transition:none !important; }
  .lb img{ transition:none !important; }
}




/* Aspect-ratio utilities for gallery tiles */
.ar-1-1{ aspect-ratio:1/1; }
.ar-3-2{ aspect-ratio:3/2; }
.ar-2-3{ aspect-ratio:2/3; }
.ar-4-3{ aspect-ratio:4/3; }
.ar-3-4{ aspect-ratio:3/4; }
.ar-16-9{ aspect-ratio:16/9; }
.ar-9-16{ aspect-ratio:9/16; }
.ar-21-9{ aspect-ratio:21/9; }


/* ===== Minimal Lightbox (boring) ===== */
.lb{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); z-index: 1000; padding: 24px;
}
.lb.open{ display: flex; }
.lb:focus { outline: none; }
.lb-close{
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35);
  color: #fff; cursor: pointer;
}
.lb-img{
  max-width: 92vw; max-height: 88vh; object-fit: contain; display: block;
  border-radius: 10px; background: rgba(255,255,255,.02);
}


/* ===== No-drag / No-select hardening for gallery & lightbox ===== */
.gallery-grid img,
.gallery-grid a,
.lb-img{
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: disable long-press menu */
}