/*
 * Navbar + heading-font fixes for the LEVELSEVIN child theme.
 * Loaded after levelsevin.webflow.css so these rules win ties without !important,
 * except where noted (defeating Webflow's inline styles requires it).
 */

/* ---- Arabic heading font safety net -----------------------------------
   theme.json already overrides the "heading" font preset, this is a fallback
   in case a page cache serves stale global-styles CSS. */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  font-family: "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- Sticky header that goes solid on scroll --------------------------- */
.section_navbar {
  position: fixed;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.section_navbar.is-scrolled {
  background-color: rgba(20, 18, 16, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.section_navbar.static.is-scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Drawer-only quick links (الرئيسية / المتجر), hidden on the desktop bar
   since the real Primary Menu already renders there. */
.is-drawer-primary {
  display: none;
}

/* ---- Desktop primary nav polish (>= 992px) ----------------------------- */
@media screen and (min-width: 992px) {
  .navbar_bottom-menu {
    gap: 0.25rem;
  }

  .navbar3_menu-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .navbar3_menu-list .navbar3_link {
    position: relative;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .navbar3_menu-list .navbar3_link::after {
    content: "";
    position: absolute;
    right: 1rem;
    left: 1rem;
    bottom: 0.35rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.25s ease;
  }

  .navbar3_menu-list .navbar3_link:hover::after,
  .navbar3_menu-list .navbar3_link.w--current::after {
    transform: scaleX(1);
  }
}

/* ---- Mobile drawer (<= 991px) ------------------------------------------ */
@media screen and (max-width: 991px) {
  /* Webflow's nav script sometimes sets an inline height equal to the whole
     page's scroll height instead of the viewport; this is the fix. */
  .navbar3_menu,
  .w-nav-overlay {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
  }

  /* The bottom-bar's WordPress menu never gets toggled open by Webflow's nav
     script (only the first .w-nav-menu in the component is managed), so its
     content is duplicated into the drawer above and this copy is hidden. */
  .navbar_bottom-component {
    display: none;
  }

  .navbar3_menu {
    display: flex;
    flex-direction: column;
  }

  .navbar3_logo-link-menu {
    display: flex !important;
  }

  .is-drawer-primary {
    display: block;
    width: 100%;
    order: -1;
  }

  .navbar3_menu .navbar3_link {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .navbar3_menu .navbar3_menu-dropdown {
    order: -1;
    width: 100%;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .navbar3_menu .navbar3_dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  /* The WooCommerce mini-cart icon otherwise renders near-invisible on the
     drawer's solid black background. */
  .navbar3_menu .wc-block-mini-cart__button,
  .navbar3_menu .wc-block-mini-cart__button svg,
  .navbar3_menu .wc-block-mini-cart__button svg path {
    color: #fff !important;
    fill: currentColor !important;
    opacity: 1 !important;
  }

  .navbar3_menu .wc-block-mini-cart__badge {
    background-color: #fff;
    color: #000;
  }
}