html, body {
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior: none;
}

::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.lucide-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.bg-parchment-texture {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px);
}

.font-display-lg {
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.font-headline-lg {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
}

.font-headline-lg-mobile {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
}

.font-headline-md {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  line-height: 1.3;
  font-weight: 600;
}

.font-headline-sm {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
}

.font-body-lg {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

.font-body-md {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

.font-label-caps {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.15em;
  font-weight: 600;
}

/* ============================================================
   Shared site header / footer / mega-menu motion system
   Timings follow: 150-300ms micro-interactions, ease-out on
   enter, ease-in on exit, exit ~60-70% of enter duration,
   transform+opacity only (no layout properties animated).
   ============================================================ */

.site-nav-link {
  position: relative;
  padding-bottom: 4px;
}
.site-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #e7ad2b;
  transition: right 0.22s ease-out;
}
.site-nav-link:hover::after {
  right: 0;
}
.site-nav-link.nav-active {
  color: #7b5800;
  font-weight: 600;
}
.site-nav-link.nav-active::after {
  right: 0;
}

/* Mega menu panels */
.mega-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0s linear 0.22s;
  pointer-events: none;
}
.mega-panel.mega-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0s linear 0s;
  pointer-events: auto;
}
.mega-panel.mega-closing {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.15s ease-in, transform 0.15s ease-in, visibility 0s linear 0.15s;
}
.mega-trigger .mega-caret {
  transition: transform 0.2s ease-out;
}
.mega-trigger.mega-active .mega-caret {
  transform: rotate(180deg);
}

/* Mobile drawer */
#site-mobile-drawer {
  visibility: hidden;
}
#site-mobile-drawer.drawer-open {
  visibility: visible;
}
#site-mobile-drawer .drawer-overlay {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
#site-mobile-drawer.drawer-open .drawer-overlay {
  opacity: 1;
}
#site-mobile-drawer .drawer-panel {
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#site-mobile-drawer.drawer-open .drawer-panel {
  transform: translateX(0);
}
/* RTL: drawer panel sits at the inline-end (left, under dir=rtl), so it must
   slide off to the left when closed instead of the right. */
[dir="rtl"] #site-mobile-drawer .drawer-panel {
  transform: translateX(-100%);
}
[dir="rtl"] #site-mobile-drawer.drawer-open .drawer-panel {
  transform: translateX(0);
}
#site-mobile-drawer.drawer-closing .drawer-panel {
  transition: transform 0.18s ease-in;
}
#site-mobile-drawer.drawer-closing .drawer-overlay {
  transition: opacity 0.18s ease-in;
}

/* Mobile accordions inside drawer */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease-out;
}
.accordion-panel.accordion-open {
  max-height: 640px;
  transition: max-height 0.3s ease-out;
}
.accordion-chevron {
  transition: transform 0.2s ease-out;
}
.accordion-toggle.accordion-active .accordion-chevron {
  transform: rotate(180deg);
}

/* ============================================================
   Arabic typography (RTL pages only)
   Noto Naskh Arabic: major/display headings
   Cairo: headings + body
   IBM Plex Sans Arabic: technical labels / tags / caps
   ============================================================ */
.font-ar-display {
  font-family: 'Noto Naskh Arabic', 'Cairo', serif;
  font-weight: 700;
  line-height: 1.3;
}
.font-ar-heading {
  font-family: 'Noto Naskh Arabic', 'Cairo', serif;
  font-weight: 700;
  line-height: 1.4;
}
.font-ar-heading-alt {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  line-height: 1.4;
}
.font-ar-body {
  font-family: 'Cairo', sans-serif;
  font-weight: 400;
  line-height: 1.8;
}
.font-ar-label {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.font-ar-button {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
}

/* Directional icons (arrows) that must mirror in RTL contexts */
[dir="rtl"] .icon-flip {
  display: inline-block;
  transform: scaleX(-1);
}

/* Bottom mobile tab nav active state */
.bottom-tab.tab-active {
  color: #7b5800;
}

.font-button {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 600;
}