/* =========================================================
   Awali Landing Page (EN / AR - LTR / RTL)
   Logical properties (inset-inline-*, padding-inline-*) are used
   so the layout mirrors automatically when dir="rtl".
   ========================================================= */
:root {
  --aw-beige: #f0e8da;
  --aw-dark: #2a2a2a;
  --aw-mint: #d3e5d8;
  --aw-mint-dark: #b9d4c1;
  --aw-pink: #e6a4a0;
  --aw-text: #2b2b2b;
  --aw-font: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", Calibri, "Lato", sans-serif;
  --aw-font-ar: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--aw-font);
  color: var(--aw-text);
  background: var(--aw-beige);
  font-weight: 300;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

.section-beige { background: var(--aw-beige); }

.title-italic {
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  letter-spacing: -.01em;
}
.section-title { margin-bottom: 2rem; }

/* ---------- Header (not sticky: scrolls away with the hero) ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0;
  z-index: 1030;
  padding: 2.5rem 0 1rem;
}
.brand { display: flex; flex-direction: column; width: 150px; }
.brand-ar { width: 72%; align-self: center; }
.brand-year { color: #fff; font-size: .7rem; letter-spacing: .15em; margin-top: -4px; align-self: flex-end; font-family: var(--aw-font); }
.brand-wm { width: 100%; }

.btn-lang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid #fff; color: #fff;
  font-family: var(--aw-font);
  font-weight: 700; font-size: .85rem;
  transition: background .2s, color .2s;
}
.btn-lang:hover { background: #fff; color: var(--aw-dark); }
.btn-lang.dark { border-color: var(--aw-dark); color: var(--aw-dark); }
.btn-lang.dark:hover { background: var(--aw-dark); color: #fff; }

.btn-burger {
  background: none; border: 0; padding: 6px 0; width: 38px;
  display: flex; flex-direction: column; gap: 9px;
}
.btn-burger span { display: block; height: 1.5px; background: #fff; }
.btn-burger.dark span { background: var(--aw-dark); }

/* ---------- Menu panel (frosted side panel) ---------- */
.menu-panel.offcanvas {
  --bs-offcanvas-width: clamp(300px, 26vw, 400px);
  --bs-offcanvas-transition: transform .45s cubic-bezier(.22,.61,.36,1);
  background: rgba(238, 236, 233, .82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0 !important;
  color: var(--aw-dark);
}
.offcanvas-backdrop.show { opacity: 0; }   /* click-outside still closes, no dark overlay */

/* Arabic: panel slides in from the left (safety net on top of bootstrap.rtl) */
html[dir="rtl"] .menu-panel.offcanvas-end { right: auto; left: 0; }
html[dir="rtl"] .menu-panel.offcanvas-end:not(.show):not(.showing),
html[dir="rtl"] .menu-panel.offcanvas-end.hiding { transform: translateX(-100%); }

.menu-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 2.5rem 0;
  padding-inline: 60px 3rem;
}
.menu-body {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 5.5rem 6.5rem;
  padding-inline: 60px 3rem;
}
.menu-list { margin: 0; }
.menu-list li + li { margin-top: .1rem; }
.menu-list a {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1.55rem; font-weight: 500; line-height: 1.3;
  color: var(--aw-dark);
}
.menu-list a:hover { color: #000; }

/* Bracket box  [  ]  with pink fill for active / hover */
.menu-list .box {
  position: relative; flex: 0 0 37px; width: 37px; height: 34px;
  background:
    linear-gradient(var(--aw-dark), var(--aw-dark)) left top    / 7px 2px,
    linear-gradient(var(--aw-dark), var(--aw-dark)) left bottom / 7px 2px,
    linear-gradient(var(--aw-dark), var(--aw-dark)) right top   / 7px 2px,
    linear-gradient(var(--aw-dark), var(--aw-dark)) right bottom/ 7px 2px;
  background-repeat: no-repeat;
  border-left: 2px solid var(--aw-dark);
  border-right: 2px solid var(--aw-dark);
}
.menu-list .box::after {
  content: ""; position: absolute; inset: 8px 9px;
  background: transparent; transition: background .2s;
}
.menu-list a:hover .box::after,
.menu-list a.active .box::after { background: var(--aw-pink); }

.menu-wordmark { width: 210px; max-width: 100%; filter: brightness(0) opacity(.85); }

/* ---------- Hero ---------- */
.hero { height: 100vh; min-height: 520px; position: relative; background: var(--aw-dark); }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-img.hero-home { object-position: center 60%; }   /* portrait photo: keep father & son in frame */
.hero::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 35%;
  background: linear-gradient(rgba(0,0,0,.45), transparent);
  pointer-events: none; z-index: 1;
}
.hero .carousel-control-prev,
.hero .carousel-control-next { width: 8%; opacity: 1; z-index: 2; }
.hero .carousel-control-prev i,
.hero .carousel-control-next i { font-size: 2rem; color: #fff; }

/* ---------- Zigzag decoration ---------- */
.zigzag {
  position: absolute; display: block; height: 22px;
  background-repeat: repeat-x; background-size: 50px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='22'%3E%3Cpath d='M2 20 L20 2 M25 2 L43 20' stroke='%232a2a2a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}
.zigzag.inverted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='22'%3E%3Cpath d='M2 2 L20 20 M25 20 L43 2' stroke='%232a2a2a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* ---------- About ---------- */
.about { position: relative; padding: 7rem 0 6rem; }
.zz-left { left: 3rem; top: 5rem; width: 150px; }
.zz-right-top { right: 3rem; top: 2.5rem; width: 50px; }
.zz-right-bottom { right: 3rem; bottom: 1.5rem; width: 100px; }
.lead-sub { font-size: 1.25rem; font-weight: 400; margin-bottom: 1.5rem; }
.about-text { max-width: 760px; font-size: 1.2rem; line-height: 1.5; }

/* ---------- Horizontal slider ---------- */
.slider-wrap { position: relative; }
.h-slider {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-inline-end: 3rem;
}
.h-slider::-webkit-scrollbar { display: none; }
.h-slider > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Prev / Next buttons: always left / right edge of the slider */
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: rgba(240, 240, 240, .85); color: var(--aw-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: background .2s, opacity .2s;
}
.slider-btn:hover { background: #fff; }
.slider-btn:disabled { opacity: 0; pointer-events: none; }
.slider-prev { left: 1.25rem; }
.slider-next { right: 1.25rem; }

/* Life cards */
.life { padding: 3rem 0 4rem; }
.life-card {
  position: relative; display: block; overflow: hidden;
  width: min(80vw, 585px); aspect-ratio: 585 / 727; max-height: 75vh;
}
.life-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.life-card::after {
  content: ""; position: absolute; inset: 50% 0 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.life-card::before {
  content: ""; position: absolute; inset: 0 0 70% 0; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.3), transparent);   /* keeps the icon readable on bright photos */
}
.life-card:hover img { transform: scale(1.06); }
.life-icon { position: absolute; top: 2.25rem; inset-inline-start: 2.25rem; font-size: 2.6rem; color: #fff; z-index: 2; }
.life-card h3 {
  position: absolute; inset-inline-start: 2.25rem; bottom: 1.75rem; z-index: 2;
  margin: 0; color: #fff; font-style: italic; font-weight: 700; font-size: 1.9rem;
}

/* ---------- Visit ---------- */
.visit { background: var(--aw-dark); color: #fff; }
.visit-info { padding: 3.5rem 3rem; min-height: 320px; font-size: 1.15rem; }
.map-wrap { position: relative; min-height: 600px; overflow: hidden; }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Split buttons */
.btn-split { display: inline-flex; align-items: stretch; height: 50px; font-size: 1.15rem; }
.btn-split .txt { display: flex; align-items: center; padding: 0 1rem; }
.btn-split .ico {
  display: flex; align-items: center; justify-content: center;
  width: 50px; background: var(--aw-mint); color: var(--aw-dark); font-size: 1.3rem;
  transition: background .2s;
}
.btn-split:hover .ico { background: var(--aw-mint-dark); }
.btn-split.light .txt { background: #fff; color: var(--aw-dark); }

/* ---------- Footer ---------- */
.footer { background: var(--aw-dark); color: #fff; padding: 5rem 0 3rem; }
.footer-ar { width: 145px; }
.footer-bottom { margin-top: 3rem; }
.footer-wm { width: 160px; }
.footer-zz {
  position: relative; width: 100%; max-width: 450px; height: 44px;
  margin-block: 0 2rem; margin-inline-start: auto;
  background-size: 50px 22px; background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='22'%3E%3Cpath d='M2 2 L18 18 M23 18 L39 2' stroke='%23ffffff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
}
.contact-list { font-size: .95rem; justify-content: flex-end; font-family: var(--aw-font); }
.contact-list a:hover { color: var(--aw-mint); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: none; }

/* =========================================================
   ARABIC / RTL
   ========================================================= */
html[lang="ar"] body { font-family: var(--aw-font-ar); font-weight: 400; }

html[lang="ar"] .title-italic,
html[lang="ar"] .life-card h3 { font-style: normal; font-weight: 800; letter-spacing: 0; }
html[lang="ar"] .about-text { font-size: 1.15rem; line-height: 1.8; }
html[lang="ar"] .menu-list a { font-size: 1.45rem; font-weight: 500; }
html[lang="ar"] .life-card h3 { font-size: 1.75rem; }

/* Mirror only the first hero photo, as in the Arabic design (others contain text) */
html[dir="rtl"] .hero-img.mirror-rtl { transform: scaleX(-1); }

/* Bootstrap RTL swaps carousel prev/next sides, so flip the chevrons to point outward */
html[dir="rtl"] .hero .carousel-control-prev i,
html[dir="rtl"] .hero .carousel-control-next i { display: inline-block; transform: scaleX(-1); }

/* Logo lock-up is identical in both languages: keep "1934" on the right */
html[dir="rtl"] .brand-year { align-self: flex-start; }

/* Swap the decorative zigzags */
html[dir="rtl"] .zz-left { left: auto; right: 3rem; }
html[dir="rtl"] .zz-right-top,
html[dir="rtl"] .zz-right-bottom { right: auto; left: 3rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .map-wrap { min-height: 420px; }
  .visit-info { padding: 2.5rem 1.5rem; min-height: auto; gap: 2rem; }
  .zz-left { left: 1.5rem; top: 3rem; width: 100px; }
  .zz-right-top, .zz-right-bottom { right: 1.5rem; }
  html[dir="rtl"] .zz-left { left: auto; right: 1.5rem; }
  html[dir="rtl"] .zz-right-top, html[dir="rtl"] .zz-right-bottom { right: auto; left: 1.5rem; }
  .contact-list { justify-content: flex-start; }
  .footer-zz { margin-inline-start: 0; }
}
@media (max-width: 575.98px) {
  .brand { width: 110px; }
  .life-card h3 { font-size: 1.4rem; }
  .menu-panel.offcanvas { --bs-offcanvas-width: 100%; }
  .menu-top, .menu-body { padding-inline: 1.5rem; }
  .about-text { font-size: 1.05rem; }
}