/* =========================================================
   RS MEGA MENU – Frontend Styles (Complete)
   - Desktop: hover dropdown
   - Mobile: + toggle button opens dropdown (no hover)
   - Width modes: FULL / BOXED / CUSTOM (via classes + CSS vars)
   - Pro typography: H2 + ul/li/a padding, theme variables
   ========================================================= */


/* -----------------------------
   Base: parent item + panel
------------------------------ */

.rs-mega-menu-parent{
  position: relative;
}

/* Panel osnovno */
.rs-mega-menu-panel{
  position: absolute;
  top: calc(100% + 10px);
  z-index: 99999;
  display: none;

  /* Default width (boxed/content) */
  width: var(--rs-panel-width, 1100px);
  max-width: var(--rs-panel-max-width, 1100px);

  /* Centered under item */
  left: 50%;
  transform: translateX(-50%);

  /* Styling */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  padding: 40px 45px;

  /* Smooth appearance */
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;

  /* Safety */
  overflow: visible;
}

/* Desktop hover open */
.rs-mega-menu-parent:hover > .rs-mega-menu-panel{
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Slight lift when hidden */
.rs-mega-menu-panel{
  transform: translateX(-50%) translateY(6px);
}

/* FULL WIDTH (do nav/header wrapper-a) */
.rs-mega-menu-panel.is-full{
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
}

/* BOXED (default centered) */
.rs-mega-menu-panel.is-boxed{
  left: 50%;
  transform: translateX(-50%) translateY(6px);
}

/* CUSTOM (uzima --rs-panel-width / --rs-panel-max-width) */
.rs-mega-menu-panel.is-custom{
  left: 50%;
  transform: translateX(-50%) translateY(6px);
}

/* When opened on hover, keep correct transform per mode */
.rs-mega-menu-parent:hover > .rs-mega-menu-panel.is-boxed,
.rs-mega-menu-parent:hover > .rs-mega-menu-panel.is-custom{
  transform: translateX(-50%) translateY(0);
}
.rs-mega-menu-parent:hover > .rs-mega-menu-panel.is-full{
  transform: none;
}

/* Optional: if theme/header cuts dropdown */
header, .site-header, .elementor-location-header, nav, .nav, .menu, .elementor-nav-menu{
  overflow: visible;
}


/* -----------------------------
   Pro Typography inside panel
   Theme variables:
   - --title-color  (link + titles)
   - --theme-color  (hover background + accents)
------------------------------ */

.rs-mega-menu-panel h1,
.rs-mega-menu-panel h2,
.rs-mega-menu-panel h3,
.rs-mega-menu-panel h4,
.rs-mega-menu-panel h5{
  color: var(--title-color);
  margin-top: 0;
}

/* H2 headline */
.rs-mega-menu-panel h2{
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  margin: 0 0 18px 0;
  color: var(--title-color);
  position: relative;
  padding-bottom: 10px;
}

/* underline accent */
.rs-mega-menu-panel h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:3px;
  background: var(--theme-color);
  border-radius: 6px;
}

/* Paragraphs */
.rs-mega-menu-panel p{
  color: var(--title-color);
  opacity: .88;
  margin: 0 0 14px 0;
  line-height: 1.6;
  font-size: 14.5px;
}

/* Lists reset */
.rs-mega-menu-panel ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-mega-menu-panel ul li{
  margin: 0 0 8px 0;
  padding: 0;
}

/* Links */
.rs-mega-menu-panel ul li a{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;

  font-size: 15px;
  font-weight: 550;
  color: var(--title-color);

  transition: background .22s ease, transform .22s ease, opacity .22s ease;
}

/* Hover background uses theme color, text stays title color */
.rs-mega-menu-panel ul li a:hover{
  background: var(--theme-color);
  color: var(--title-color);
  transform: translateX(4px);
}

/* Arrow */
.rs-mega-menu-panel ul li a:after{
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .22s ease, transform .22s ease;
}

.rs-mega-menu-panel ul li a:hover:after{
  opacity: 1;
  transform: translateX(0);
}

/* If you have nested lists (rare), add spacing */
.rs-mega-menu-panel ul ul{
  margin-top: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(0,0,0,.08);
}

/* Optional “glass” feel (safe default OFF)
.rs-mega-menu-panel{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.95);
}
*/


/* -----------------------------
   Mobile toggle (+) button
   - Show only on < 992px
------------------------------ */

.rs-mega-toggle{
  display: none;
  margin-left: 10px;

  width: 34px;
  height: 34px;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);

  cursor: pointer;
  line-height: 1;
  font-size: 20px;
  font-weight: 700;

  color: var(--title-color);

  align-items: center;
  justify-content: center;

  transition: transform .15s ease, background .15s ease;
}

.rs-mega-toggle:hover{
  background: rgba(255,255,255,1);
  transform: scale(1.04);
}

/* Rotate when open (nice UX) */
.rs-mega-menu-parent.is-open > .rs-mega-toggle{
  transform: rotate(45deg);
}


/* -----------------------------
   Responsive behavior
------------------------------ */

@media (max-width: 991px){

  /* show + on mobile */
  .rs-mega-toggle{
    display: inline-flex;
  }

  /* disable hover open on mobile */
  .rs-mega-menu-parent:hover > .rs-mega-menu-panel{
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
  }

  /* make panel flow under item */
  .rs-mega-menu-panel{
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;

    width: 100%;
    max-width: none;

    margin-top: 10px;
    padding: 25px;

    display: none;
    opacity: 1;
    visibility: visible;

    border-radius: 14px;
  }

  /* open state controlled by JS */
  .rs-mega-menu-parent.is-open > .rs-mega-menu-panel{
    display: block;
  }

  /* Typography tweaks */
  .rs-mega-menu-panel h2{
    font-size: 18px;
  }

  .rs-mega-menu-panel ul li a{
    padding: 12px;
  }
}