/* Main Navbar */
.main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-sticky);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: var(--spacing-4) 0;
  width: 100%;
}

.main-navbar.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  padding: var(--spacing-2) 0;
}

/* ================================
 * Products Page Layout
 * Off-white background + navbar offset
 * Applied via activePage == "products"
 * ================================ */
.products-page {
  background-color: #f8f9fa;
  padding-top: var(--header-height);
}

.main-navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.main-navbar__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.main-navbar__logo-img {
  height: 48px;
  /* Initial Height */
  width: auto;
  object-fit: contain;
  transition: height 0.3s ease;
}

.main-navbar.navbar-scrolled .main-navbar__logo-img {
  height: 40px;
  /* Smaller on scroll */
  filter: brightness(0);
  /* Make black on scroll if image is white/light, or remove filter if image works on white. Assuming white logo initially. */
  /* If the logo is colored, filter might not be needed or should be tailored. */
  /* Checking "ALbassem.png" - name suggests maybe colored logo? */
  /* For now, no filter on scroll, just rely on the image. If it needs contrast, I'll update after verification.
       Actually, if the logo is white text, and background becomes white, it disappears.
       I will check verification. I'll stick to height change for now.
    */
}

/* Nav Link Wrapper - Fix Flexbox Issues */
.main-navbar__nav {
  display: none;
  margin: 0 auto;
  /* Center navigation if desired, or auto to push */
}

@media (min-width: 1024px) {
  .main-navbar__nav {
    display: block;
  }
}

.nav-list {
  display: flex;
  flex-direction: row;
  /* Ensure row direction */
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-8);
  align-items: center;
}

/* Nav Item - Critical for Dropdown Positioning */
.nav-item {
  position: relative;
}

.nav-link {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  /* Slightly smaller for elegance */
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
  position: relative;
  padding: 4px 0;
}

.nav-link:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--color-primary);
  opacity: 1;
}

.nav-link:hover:after {
  width: 100%;
}

.main-navbar.navbar-scrolled .nav-link {
  color: var(--color-gray-600);
}

.main-navbar.navbar-scrolled .nav-link:hover {
  color: var(--color-primary);
}

/* Mega Menu */
.nav-item--has-mega {
  position: relative;
  /* Make relative to anchor the menu to the item */
}

.nav-link__chevron {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.nav-item:hover .nav-link__chevron {
  transform: rotate(180deg);
}

.main-navbar:hover .nav-path {
  stroke: var(--color-gray-800);
}

.main-navbar:hover .nav-link__chevron path {
  stroke: currentColor;
}

/* --- Mega Menu (Restored Complex Grid) --- */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  /* Center relative to the nav item */
  transform: translateX(-50%) translateY(10px);
  width: max-content;
  /* Fit content */
  min-width: 650px;
  /* Ensure 3 columns have space */
  max-width: 90vw;
  /* Prevent overflow on smaller screens */
  background-color: var(--color-white);
  border-radius: 12px;
  /* Rounded corners */
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  /* Softer shadow */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  padding: var(--spacing-lg);
  /* Reduced vertical padding */
  margin-top: 10px;
  /* Gap from navbar */
}

.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Tip arrow for the menu */
.mega-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background-color: var(--color-white);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mega-menu__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  /* Slightly reduced gap */
}

.mega-menu__column {
  display: flex;
  flex-direction: column;
}

.mega-menu__heading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-100);
}

.mega-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.mega-menu__link {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  /* group: hover; removed */
}

.mega-menu__link-icon {
  font-size: 1.5rem;
  margin-right: var(--spacing-md);
  line-height: 1;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.mega-menu__link:hover .mega-menu__link-icon {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.mega-menu__link-content {
  display: flex;
  flex-direction: column;
}

.mega-menu__link-title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: 2px;
  transition: color 0.2s ease;
}

.mega-menu__link:hover .mega-menu__link-title {
  color: var(--color-primary);
}

.mega-menu__link-desc {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  font-weight: 400;
}

/* --- Simple Dropdown (Company) --- */
.simple-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  /* Align left edge with parent */
  transform: translateY(10px);
  width: 240px;
  /* Fixed width for simple dropdown */
  min-width: unset;
  max-width: unset;
  background-color: var(--color-white);
  border-radius: 8px;
  /* Slightly tighter radius */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Reduced shadow */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  padding: var(--spacing-md) 0;
  /* Vertical padding only */
  margin-top: 10px;
}

.nav-item:hover .simple-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.simple-dropdown__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Small gap for item hover spacing */
}

.simple-dropdown__link {
  display: block;
  text-decoration: none;
  padding: 8px var(--spacing-lg);
  /* Comfortable click area */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  /* 14px */
  color: var(--color-gray-800);
  transition: background-color 0.1s ease, color 0.1s ease;
}

.simple-dropdown__link:hover {
  background-color: var(--color-gray-50);
  color: var(--color-primary);
}

.simple-dropdown__separator {
  height: 1px;
  background-color: var(--color-gray-100);
  margin: 6px 0;
}

/* Ensure navbar items handle the white background when mega menu is open - Optional but nice */
.main-navbar:hover {
  background-color: var(--color-white);
  /* If you want the navbar to turn solid white when hovering a menu item,
     you might need JS or more complex CSS selectors depending on current state */
}

/* Actions */
.main-navbar:hover .nav-link {
  color: var(--color-gray-800);
}

.main-navbar:hover .nav-link:hover {
  color: var(--color-primary);
}

.main-navbar:hover .nav-link:after {
  background-color: var(--color-primary);
}

.main-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.btn-primary-sm {
  background-color: var(--color-white);
  color: var(--color-primary-dark);
  padding: 10px 24px;
  border-radius: 9999px;
  /* Pill shape */
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
}

.btn-primary-sm:hover {
  background-color: var(--color-gray-50);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.main-navbar.navbar-scrolled .btn-primary-sm {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.main-navbar.navbar-scrolled .btn-primary-sm:hover {
  background-color: var(--color-primary-dark);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-1);
  color: var(--color-text-primary);
  transition: color 0.3s ease;
}

@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none;
  }
}

.main-navbar.navbar-scrolled .mobile-menu-toggle {
  color: var(--color-gray-900);
}

.hamburger-box {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-inner {
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: relative;
  transition: background-color 0s 0.1s;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  transition: transform 0.2s;
}

.hamburger-inner::before {
  top: -8px;
}

.hamburger-inner::after {
  top: 8px;
}

/* =========================================
   Full Width Override
   ========================================= */
.landing-layout .container {
  max-width: 100%;
  padding-left: var(--spacing-8);
  /* Small margin from edges */
  padding-right: var(--spacing-8);
}

@media (max-width: 768px) {
  .landing-layout .container {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}
/* ================================
 * MOBILE NAVIGATION
 * Slide-out drawer menu for mobile devices
 * ================================ */

/* Desktop-only utility */
.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: inline-flex;
  }
}

/* Mobile Menu Container */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Overlay */
.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu.is-open .mobile-menu__overlay {
  opacity: 1;
}

/* Panel */
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background-color: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}

/* RTL Support */
[dir="rtl"] .mobile-menu__panel {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

[dir="rtl"] .mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}

/* Header */
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-menu__logo {
  display: flex;
  align-items: center;
}

.mobile-menu__logo-img {
  height: 36px;
  width: auto;
  filter: brightness(0);
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.mobile-menu__close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Nav List */
.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-2) 0;
  flex: 1;
  overflow-y: auto;
}

.mobile-nav-item {
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav-item:last-child {
  border-bottom: none;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-4) var(--spacing-5);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

[dir="rtl"] .mobile-nav-link {
  text-align: right;
}

.mobile-nav-link:hover {
  background-color: var(--color-gray-50);
}

.mobile-nav-chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.mobile-nav-item--has-sub.is-open .mobile-nav-chevron {
  transform: rotate(180deg);
}

/* Submenu */
.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--color-gray-50);
}

.mobile-nav-item--has-sub.is-open .mobile-submenu {
  max-height: 1000px;
}

.mobile-submenu-heading {
  padding: var(--spacing-2) var(--spacing-6);
  font-family: var(--font-family-sans);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  background-color: var(--color-gray-100);
  border-left: 3px solid var(--color-primary);
  margin-top: var(--spacing-1);
}

.mobile-submenu-heading:first-child {
  margin-top: 0;
}

.mobile-submenu-link {
  display: block;
  padding: var(--spacing-2) var(--spacing-6);
  padding-left: calc(var(--spacing-6) + 3px);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.mobile-submenu-link:hover {
  background-color: var(--color-gray-100);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* Footer */
.mobile-menu__footer {
  padding: var(--spacing-5);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-gray-50);
  flex-shrink: 0;
}

.mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
  margin-bottom: var(--spacing-4);
}

.mobile-menu__cta:hover {
  background-color: var(--color-primary-dark);
}

.mobile-menu__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
}

.mobile-menu__lang,
.mobile-menu__login {
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mobile-menu__lang:hover,
.mobile-menu__login:hover {
  color: var(--color-primary);
}

.mobile-menu__separator {
  color: var(--color-gray-300);
}

/* Hamburger Animation */
.mobile-menu-toggle.is-active .hamburger-inner {
  background-color: transparent;
}

.mobile-menu-toggle.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(45deg);
}

.mobile-menu-toggle.is-active .hamburger-inner::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Body scroll lock when menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* RTL support for mobile submenu border indicators */
[dir="rtl"] .mobile-submenu-heading {
  border-left: none;
  border-right: 3px solid var(--color-primary);
}

[dir="rtl"] .mobile-submenu-link {
  padding-left: var(--spacing-6);
  padding-right: calc(var(--spacing-6) + 3px);
  border-left: none;
  border-right: 3px solid transparent;
}

[dir="rtl"] .mobile-submenu-link:hover {
  border-left-color: transparent;
  border-right-color: var(--color-primary);
}

/* Scroll fade indicator at bottom of nav list */
.mobile-nav-list {
  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
}

/* Hide mobile menu on desktop */
@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}