/* ============ Vars ============ */
:root {
  --ag-z: 9999;
  --ag-header-height: 64px;
  --ag-header-offset: var(--ag-header-height);
  --ag-gutter: 16px;
  --ag-col1-w: 320px;
  --ag-col2-w: 360px;
}

/* ============ Anchor under .col-full-nav ============ */
/*.col-full-nav { position: relative; z-index: 1000; }*/
.col-full-nav > #ag-rp-wrapper {
  z-index: var(--ag-z);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

#ag-rp-overlay { display:none; }

/* Desktop: generic fallback when not inside .col-full-nav */
.ag-rp-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--ag-header-offset, var(--ag-header-height));
  background: #fff;
  transform: translateY(-6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
  box-shadow: 0 12px 34px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  border-top: 1px solid #eef1f6;
}
.ag-rp-wrapper.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Inner: full-width, left aligned */
.ag-rp-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: var(--ag-gutter);
  padding-right: var(--ag-gutter);
  position: relative;
}

/* Grid */
.ag-rp-grid {
  display: grid;
  grid-template-columns: var(--ag-col1-w) var(--ag-col2-w) 1fr;
  min-height: 420px;
  border-top: 1px solid #f1f3f9;
}

/* Columns */
.ag-rp-col--l1 { background: #f8fafc; border-right: 1px solid #eef1f6; }
.ag-rp-col--l2 { background: #fff;    border-right: 1px solid #eef1f6; }
.ag-rp-col--l3 { background: #fff; }

/* Titles */
.ag-rp-title, .ag-rp-subtitle { margin: 14px 18px; font-weight: 700; color: #0b1b2b; }
.ag-rp-title { font-size: 18px; }
.ag-rp-subtitle { font-size: 16px; }

/* Lists */
.ag-rp-level1, .ag-rp-level2, .ag-rp-level3 { list-style: none; margin: 0; padding: 8px 0; }

/* Items */
.ag-rp-level1 li a, .ag-rp-level2 li a, .ag-rp-level3 li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; text-decoration: none; color: #0b1b2b; line-height: 1.3;
}
.ag-rp-level1 li a:hover, .ag-rp-level2 li a:hover, .ag-rp-level3 li a:hover { background: #f6f8ff; }

/* Icons */
.ag-rp-ico { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; flex: 0 0 30px; }
.ag-rp-col--l2 .ag-rp-ico { width: 26px; height: 26px; flex-basis: 26px; }
.ag-rp-ico--placeholder { background:#e9eef6; }

/* Active */
.ag-rp-l1.is-active, .ag-rp-l2.is-active { background: #eef3ff; font-weight: 700; }

/* View all */
.ag-rp-viewall .ag-rp-viewall-link { display:inline-flex; align-items:center; padding:8px 16px; color:#0b5fff; font-weight:700; }

/* Panels */
.ag-rp-l2-panel, .ag-rp-l3-panel { display:none; }
.ag-rp-l2-panel.is-active, .ag-rp-l3-panel.is-active { display:block; }

/* Close button (X) */
@media (min-width: 992px) {
  .ag-rp-close {
    display: inline-flex !important; align-items:center; justify-content:center;
    position: absolute; top: 8px; right: 8px;
    width:36px; height:36px; padding:0;
    border:1px solid #e5e7eb; border-radius:8px; background:#fff;
    font-size:22px; line-height:1; cursor:pointer; z-index:1;
  }
  .ag-rp-close:hover { background:#f6f8ff; }
}

/* Disable any other overlays while open (desktop) */
@media (min-width: 992px) {
  #ag-rp-overlay { display:none !important; opacity:0 !important; pointer-events:none !important; }
  body.ag-rp-open .site-overlay,
  body.ag-rp-open .nav-overlay,
  body.ag-rp-open .off-canvas-overlay,
  body.ag-rp-open #mm-blocker,
  body.ag-rp-open .mm-blocker {
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* NEW: allow the mega-menu grid to scroll on desktop */
  .ag-rp-grid {
    max-height: calc(95vh - var(--ag-header-offset));
    overflow-y: auto;
  }
}


/* ============ Mobile (drawer) ============ */
@media (max-width: 991.98px) {
  #ag-rp-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:9997; }
  #ag-rp-overlay.is-open { opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important; }

  .ag-rp-wrapper {
    position: fixed;
    top: var(--ag-header-offset);
    left: 0; right: 0; bottom: 0;
    transform: translateY(0);
    opacity: 1; visibility: visible; display: none;
    box-shadow: none; border-top: 1px solid #eef1f6; z-index: 9998;
  }
  .ag-rp-wrapper.is-open { display: block; }

  .ag-rp-inner { padding: 0; }

  .ag-rp-grid { display:block; height:calc(95vh - var(--ag-header-offset)); overflow:hidden; background:#fff; }
  .ag-rp-col--l1, .ag-rp-col--l2, .ag-rp-col--l3 {
    position:absolute; top:0; left:0; right:0; bottom:0; overflow-y:auto;
    -webkit-overflow-scrolling:touch; background:#fff; transition: transform .2s ease;
  }
  .ag-rp-col--l1 { background:#f8fafc; transform: translateX(0%); }
  .ag-rp-col--l2 { transform: translateX(100%); }
  .ag-rp-col--l3 { transform: translateX(200%); }

  .ag-rp-wrapper.l2-open .ag-rp-col--l1 { transform: translateX(-100%); }
  .ag-rp-wrapper.l2-open .ag-rp-col--l2 { transform: translateX(0%); }
  .ag-rp-wrapper.l3-open .ag-rp-col--l2 { transform: translateX(-100%); }
  .ag-rp-wrapper.l3-open .ag-rp-col--l3 { transform: translateX(0%); }

  .ag-rp-close { position:absolute; top:10px; right:10px; z-index:2; }
}

/* Small helpers */
.ag-rp-level3 .ag-rp-l3 .ag-rp-text { font-size:14px; }

/* ============ RAJA-style burger button on the menu item ============ */
/* Add class 'rp-trigger' to your “Our products” menu item in Appearance → Menus */
.rp-trigger > a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-weight: 700;
  color: #0b1b2b !important;
  background: #fff;
  line-height: 1;
}
.rp-trigger > a:hover { background:#f6f8ff; border-color:#dfe5f0; }

/* The burger icon (3 lines) built with CSS so you don’t need inline SVG */
.rp-trigger > a::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow:
    0 6px 0 0 currentColor,
    0 12px 0 0 currentColor;
}
/* Stronger selector so theme styles can't override it */
.primary-navigation .menu li.rp-trigger > a,
.main-navigation .menu li.rp-trigger > a,
.rp-trigger > a,
a#ag-rp-trigger{
  position: relative !important;
  display: inline-block !important;
  padding-left: 48px !important;  /* push text right of the icon */
  text-indent: 0 !important;
  overflow: visible !important;
  line-height: 1.3;
}

/* Burger/X icon — both strokes share the same anchor point */
.primary-navigation .menu li.rp-trigger > a::before,
.main-navigation .menu li.rp-trigger > a::before,
.rp-trigger > a::before,
a#ag-rp-trigger::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;               /* icon position */
  width: 22px; height: 2px;
  background: currentColor; border-radius: 1px;
  transform: translateY(-50%);
  box-shadow:
    0 -6px 0 0 currentColor,
    0  0   0 0 currentColor,
    0  6px 0 0 currentColor;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.primary-navigation .menu li.rp-trigger > a::after,
.main-navigation .menu li.rp-trigger > a::after,
.rp-trigger > a::after,
a#ag-rp-trigger::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;               /* same as ::before */
  width: 22px; height: 2px;
  background: currentColor; border-radius: 1px;
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* Open state = X */
.primary-navigation .menu li.rp-trigger > a[aria-expanded="true"]::before,
.main-navigation .menu li.rp-trigger > a[aria-expanded="true"]::before,
.rp-trigger > a[aria-expanded="true"]::before,
a#ag-rp-trigger[aria-expanded="true"]::before{
  box-shadow: none;
  transform: translateY(-50%) rotate(45deg);
}

.primary-navigation .menu li.rp-trigger > a[aria-expanded="true"]::after,
.main-navigation .menu li.rp-trigger > a[aria-expanded="true"]::after,
.rp-trigger > a[aria-expanded="true"]::after,
a#ag-rp-trigger[aria-expanded="true"]::after{
  opacity: 1;
  transform: translateY(-50%) rotate(-45deg);
}


/* === Mobile back headers for drilldown === */
.ag-rp-head { display: none; }
@media (max-width: 991px) {
  .ag-rp-head {
    position: sticky; top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid #eef1f6;
    z-index: 3;
  }
  .ag-rp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
  }
  .ag-rp-back-arrow {
    width: 10px; height: 10px;
    border-left: 2px solid #0b1b2b;
    border-bottom: 2px solid #0b1b2b;
    transform: rotate(45deg);
    margin-right: 2px;
  }
  /* Space so lists don't sit under the sticky header */
  /*.ag-rp-col--l2, .ag-rp-col--l3 { padding-top: 48px; }
}