/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h);
  color: var(--white);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav[data-solid="true"] {
  background: rgba(255, 249, 243, 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--plum); border-bottom-color: var(--sand-200);
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.brand-en { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; }
.brand-ar { font: 400 16px/1 var(--font-body); color: var(--blush); transition: color 0.3s; }
.nav[data-solid="true"] .brand-ar { color: var(--rose); }
.nav-links { display: flex; gap: 24px; font-size: 14px; margin-inline: auto 0; }
.nav-links a, .nav-trigger { position: relative; padding: 6px 0; white-space: nowrap; opacity: 0.92; }
.nav-trigger { display: inline-flex; align-items: center; gap: 2px; border: none; background: none; }
.nav-trigger .icon { font-size: 20px; transition: transform 0.25s var(--ease); }
.nav-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-links a::after, .nav-trigger::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .nav-links a:hover::after, .nav-trigger:hover::after { transform: scaleX(1); } }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.nav-icon-btn {
  width: 44px; height: 44px; border-radius: 999px; border: none; background: transparent; display: grid; place-items: center;
  transition: background-color 0.15s, transform 0.16s var(--ease);
}
.nav-icon-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .nav-icon-btn:hover { background: rgba(255, 255, 255, 0.14); } .nav[data-solid="true"] .nav-icon-btn:hover { background: var(--blush); } }
.nav-lang {
  height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45); background: transparent;
  display: flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-body); white-space: nowrap;
  transition: border-color 0.3s, background-color 0.15s;
}
.nav-lang .icon { font-size: 18px; }
.nav[data-solid="true"] .nav-lang { border-color: var(--sand-200); }
.nav .btn-plum { background: var(--white); color: var(--plum); transition: background-color 0.15s, color 0.15s, transform 0.16s var(--ease); }
.nav[data-solid="true"] .btn-plum { background: var(--plum); color: var(--white); }
.nav-burger { display: none; }

.nav-links a[aria-current="page"]::after, .nav-trigger[data-current="true"]::after, .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }

@media (max-width: 1199px) {
  .nav-links, .nav-lang, .nav-actions .btn { display: none; }
  .nav-burger { display: grid; }
  .nav-actions { margin-left: auto; }
}

.sheet-menu {
  overflow-y: auto; overscroll-behavior: contain;
  position: fixed; inset: 0; z-index: 39; background: var(--plum); color: var(--white);
  padding: calc(var(--nav-h) + 24px) var(--page-x) 32px; display: flex; flex-direction: column;
}
.sheet-menu nav { display: flex; flex-direction: column; }
.sheet-row {
  width: 100%; border: none; background: none; text-align: start; color: inherit;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8vw, 48px); letter-spacing: -0.02em; line-height: 1.15;
  padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; justify-content: space-between; align-items: center;
}
.sheet-row .icon { font-size: 24px; color: var(--blush); }
.sheet-chevron { transition: transform 0.25s var(--ease); }
.sheet-row[aria-expanded="true"] .sheet-chevron { transform: rotate(180deg); }
/* grid-rows trick animates height without layout thrash on the rest of the page */
.sheet-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.sheet-sub[data-open="true"] { grid-template-rows: 1fr; }
.sheet-sub > div { overflow: hidden; }
.sheet-col { display: flex; flex-direction: column; padding: 12px 0 4px 4px; }
.sheet-col a { padding: 8px 0; font-size: 18px; color: rgba(255, 255, 255, 0.86); }
.sheet-col .sheet-col-title { font: 500 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blush); padding: 8px 0 4px; }
.sheet-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; }
.sheet-foot .btn { flex: 1 1 140px; }
.nav[data-menu="true"] { color: var(--white); background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.nav[data-menu="true"] .brand-ar { color: var(--blush); }


/* ---------------- Mega panel (desktop dropdown) ---------------- */
.mega {
  position: absolute; inset: 100% 0 auto 0; color: var(--plum); background: var(--cream);
  border-bottom: 1px solid var(--sand-200); box-shadow: var(--shadow-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.mega-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); padding-block: 32px 40px; }
.mega-lead { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border-radius: var(--r-md); background: var(--blush); }
.mega-lead > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.mega-lead-go { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-body); color: var(--rose); }
.mega-lead-go .icon { font-size: 18px; transition: transform 0.25s var(--ease); }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 40px; align-content: start; }
.mega-title { display: block; font: 500 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mauve-500); margin-bottom: 12px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mega li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sand-200); font-size: 15px; }
.mega li a .icon { font-size: 18px; opacity: 0; transform: translateX(-6px); color: var(--rose); }
.mega li a[aria-current="page"] { color: var(--rose); }
@media (hover: hover) and (pointer: fine) {
  .mega li a:hover { color: var(--rose); }
  .mega li a:hover .icon { opacity: 1; transform: none; }
  .mega-lead:hover .mega-lead-go .icon { transform: translateX(3px); }
  .mega-title[href]:hover { color: var(--rose); }
}
.mega li a:focus-visible .icon { opacity: 1; transform: none; }
@media (max-width: 1199px) { .mega { display: none; } }
.nav[data-panel="true"] { background: var(--cream); }