/* Navbar custom styles: keeps desktop submenu from wrapping and makes mobile menu slide from left with accordion submenus */

/* Desktop: prevent menu items from wrapping and show submenu on hover */
.header-menu-area .main-menu nav ul {
  white-space: nowrap; /* prevents menu items from wrapping to next line */
}

.header-menu-area .main-menu nav ul li {
  position: relative;
  display: inline-block;
}

.header-menu-area .main-menu nav ul li > ul.sub-menu {
  display: none; /* hidden by default */
  position: absolute; /* removed from normal flow so it won't push lines */
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  z-index: 1500;
  padding: 8px 0;
  border-radius: 4px;
}

.header-menu-area .main-menu nav ul li > ul.sub-menu li {
  display: block;
  padding: 8px 16px;
  white-space: nowrap; /* keep submenu text on one line */
}

.header-menu-area .main-menu nav ul li > ul.sub-menu li a {
  color: #333;
  display: block;
  text-decoration: none;
}

.header-menu-area .main-menu nav ul li:hover > ul.sub-menu {
  display: block; /* show submenu on hover */
}

.header-menu-area .main-menu nav ul li > ul.sub-menu li:hover a {
  color: #ffd900;
}

/* Make sure the submenu doesn't overflow off the right edge */
.header-menu-area .main-menu nav ul li > ul.sub-menu {
  right: auto;
  left: 0;
}

/* Mobile menu: full-width background that slides down into view */
.mobile-menu {
  position: fixed;
  /* occupy full viewport; we'll add top padding when opened so content sits below header */
  top: 0;
  left: 0; /* span full width */
  width: 100%;
  height: 100%;
  background-color: #fff; /* full-width background */
  z-index: 2001; /* place above header (which uses 2000) so menu is fully visible */
  overflow-y: auto;
  transform: translateY(-100%); /* hidden above viewport */
  transition: transform 0.28s ease-in-out, top 220ms ease;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
  padding-top: 0; /* when opened we'll set padding to header height */
}

/* When the checkbox is checked, slide the menu into view */
#menu-toggle:checked ~ .mobile-menu,
#menu-toggle:checked ~ nav.mobile-menu {
  transform: translateY(0);
}

/* Ensure hamburger / menu toggle sits above the mobile panel */
.mobile-container .hamburger {
  position: relative;
  z-index: 2002; /* higher than mobile-menu's z-index so it's clickable above panel */
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu ul li {
  border-bottom: 1px solid #eee;
}
.mobile-menu ul li a {
  display: block;
  padding: 14px 18px;
  color: #222;
  text-decoration: none;
}
.mobile-menu ul li a:hover {
  background: #f9f9f9;
  color: #222;
}

/* When the mobile menu is toggled open, push its content down by header height
   so nothing sits underneath the sticky header. We keep transform so it slides in. */
#menu-toggle:checked ~ .mobile-menu {
  transform: translateY(0);
  padding-top: var(--header-height, 60px);
}

/* Mobile submenu: accordion style, hidden by default */
.mobile-menu ul li.menu-item-has-children > ul.sub-menu {
  display: none;
  padding-left: 14px;
  background: #fff;
}

.mobile-menu ul li.menu-item-has-children.open > ul.sub-menu {
  display: block;
}

/* Arrow indicator for parents */
.mobile-menu ul li.menu-item-has-children > a {
  position: relative;
}
.mobile-menu ul li.menu-item-has-children > a::after {
  content: "\25BC"; /* down arrow */
  position: absolute;
  right: 18px;
  font-size: 12px;
  transition: transform 0.2s ease;
}
.mobile-menu ul li.menu-item-has-children.open > a::after {
  transform: rotate(180deg);
}

/* Small helpers for very small screens */
@media (max-width: 480px) {
  .mobile-menu {
    width: 100%;
    max-width: 100%;
  }
  .header-menu-area .brand-logo img {
    max-width: 140px;
  }
}

/* Sticky header: subtle, professional animation when user scrolls */
.header-menu-area {
  transition: background 220ms ease, box-shadow 220ms ease, padding 220ms ease, transform 220ms ease;
  position: relative; /* keep default until we add sticky behavior */
  z-index: 2000;
}
.header-menu-area.is-sticky {
  /* fixed on sticky to preserve previous desktop behavior; JS will
     add body padding on larger screens to avoid content jump */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98); /* almost-solid for readability */
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  padding-top: 8px;
  padding-bottom: 8px;
  transform: translateY(0);
  z-index: 2000;
}
.header-menu-area .brand-logo img {
  transition: max-width 220ms ease, transform 220ms ease;
}
.header-menu-area.is-sticky .brand-logo img {
  max-width: 120px; /* slightly smaller logo while sticky */
}

@keyframes prasan-slide-down {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.header-menu-area.is-sticky {
  animation: prasan-slide-down 200ms ease forwards;
}

/* Ensure mobile menu remains below fixed header when open */
.mobile-menu {
  transition: transform 0.28s ease-in-out, top 220ms ease;
}