/* ==========================================================================
   Main Navigation — Desktop & Mobile Off-Canvas
   Figma: Desktop node 23020:116698, Mobile node 25917:49973
   Task: 86ew4y0t5
   ========================================================================== */

/* ==========================================================================
   1. DESKTOP — Bottom Row Nav Bar
   ========================================================================== */

/* Bottom row background — Figma: rgba(89, 64, 46, 0.05) flattened to opaque
   so the menu row stays readable when the sticky header pins on scroll
   (transparent bg let page content bleed through). z-index raised above
   top (3) and middle (2) rows so the menu sits over them on shrink. */
@media (min-width: 1025px) {
  #header[data-id] [data-row="bottom"] {
    background: #f5f3f1;
    position: relative;
    z-index: 4;
  }

  #header [data-row="bottom"] > .ct-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Nav container — centered, space-between items */
  #header [data-row="bottom"] [data-id="menu"] {
    width: 100%;
  }

  #header [data-row="bottom"] [data-id="menu"] > ul.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Menu items — Figma: Barlow SemiBold 18px, height 64px, padding 12px */
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
  }

  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li > .ct-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    height: 64px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    color: #59402e;
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  /* Hover state — Figma: green text only, no background change */
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li > .ct-menu-link:hover {
    color: #1c6009;
  }

  /* Active/current state — Figma node 25047:40567: green text + green tinted bg */
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li.current-menu-item > .ct-menu-link,
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li.current-menu-parent > .ct-menu-link,
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li.current-menu-ancestor > .ct-menu-link {
    color: #1c6009;
    background-color: rgba(195, 187, 46, 0.1);
  }

  /* Sale item — Figma: red #ef4444 */
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li.sale-menu-item > .ct-menu-link {
    color: #ef4444;
  }

  /* Sale hover — stays red, no bg change */
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li.sale-menu-item > .ct-menu-link:hover {
    color: #ef4444;
  }

  /* Dropdown arrow icon — Figma: 14x14px, uses mask so color follows currentColor
     Only show on items that actually have sub-menus */
  #header [data-row="bottom"] [data-id="menu"] > ul.menu > li.menu-item-has-children > .ct-menu-link::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.9201 8.95L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.95' stroke='%23000' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.9201 8.95L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.95' stroke='%23000' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* Hide Blocksy's default dropdown toggle arrow (we use ::after instead) */
  #header [data-row="bottom"] [data-id="menu"] .ct-toggle-dropdown-desktop,
  #header [data-row="bottom"] [data-id="menu"] .ct-toggle-dropdown-desktop-ghost {
    display: none;
  }
}

/* ==========================================================================
   2. MOBILE/TABLET — Off-Canvas Main Nav Items
   ========================================================================== */

/* Off-canvas panel — Figma: white bg, rounded 8px, shadow
   !important needed to override Blocksy inline <style> which loads later */
[data-header*="type-1"] #offcanvas .ct-panel-inner,
[data-header] #offcanvas .ct-panel-inner {
  background-color: #fff !important;
  border-radius: 0 !important;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.09);
}

/* Close button — Figma: sticky at top right, 24x24 */
#offcanvas .ct-panel-actions {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
  margin-right: 20px;
  padding-top: 12px;
  border-bottom: none;
}

/* Hide Login/Account and Social icons in offcanvas — not in Figma design */
#offcanvas .ct-header-account,
#offcanvas .ct-header-socials {
  display: none !important;
}

/* Override Blocksy's CSS variables for offcanvas — match Figma colors */
[data-header*="type-1"] #offcanvas,
[data-header] #offcanvas {
  --theme-link-initial-color: #4a4a4a;
  --theme-font-weight: 600;
  --theme-font-size: 18px;
  --mobile-menu-divider: none;
}

/* Mobile menu nav container — padding matches Figma */
#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
  padding: 0 16px 24px;
}

/* Main nav items — Figma: Barlow SemiBold 18px, dark grey #4a4a4a */
#offcanvas .mobile-menu > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

#offcanvas .mobile-menu > ul > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#offcanvas .mobile-menu > ul > li > .ct-menu-link,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 32px;
  color: #4a4a4a !important;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Sale item — Figma: red #ef4444 */
#offcanvas .mobile-menu > ul > li.sale-menu-item > .ct-menu-link,
#offcanvas .mobile-menu > ul > li.sale-menu-item > .ct-sub-menu-parent > .ct-menu-link {
  color: #ef4444 !important;
}

/* Dropdown arrow on mobile nav items — Figma: 14x14px, mask for currentColor
   Only show on items that actually have sub-menus */
#offcanvas .mobile-menu > ul > li.menu-item-has-children > .ct-menu-link::after,
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.9201 8.95L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.95' stroke='%23000' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.9201 8.95L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.95' stroke='%23000' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Hide Blocksy's default mobile toggle arrow — we use ::after */
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
  display: none;
}

/* Mobile submenu items — Figma: indented, same font but smaller */
#offcanvas .mobile-menu > ul > li > ul.sub-menu {
  display: none;
  flex-direction: column;
  padding-left: 16px;
  list-style: none;
  margin: 0;
}

#offcanvas .mobile-menu > ul > li > ul.sub-menu .ct-menu-link {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #59402e;
  padding: 6px 0;
  text-decoration: none;
}

/* ==========================================================================
   3. MOBILE OFF-CANVAS — Info Section Divider & Color Overrides
   ========================================================================== */

/* Divider between nav items and info section — Figma: 1px #e4e5e7 */
.offcanvas-info-divider {
  background: #e4e5e7 !important;
  opacity: 1 !important;
}

/* Info section items — Figma: Barlow Medium 16/24, brown #59402e */
.offcanvas-info-toggle,
.offcanvas-info-link,
.offcanvas-info-child-link {
  color: #59402e !important;
}

/* Divider between info items — Figma: 1px #e4e5e7 */
.offcanvas-info-item + .offcanvas-info-item::before {
  background: #e4e5e7 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   4. DESKTOP — Hide bottom row on mobile/tablet (Blocksy handles this, but ensure)
   ========================================================================== */

@media (max-width: 1024px) {
  [data-device="desktop"] [data-row="bottom"] {
    display: none;
  }
}