/* ================================
   Dropdown Menu Stylesheet
   Cleaned and Modular
================================ */

.dropdown {
  position: relative; /* position container relative for absolute children */
  display: inline-block; /* allows dropdown button to align inline */
}

.dropbtn {
  padding: 3px 3px; /* small internal space for button text */
  background-color: #444; /* dark background */
  color: #fff; /* white text */
  font-size: 22px; /* large readable font */
  border: none; /* no border */
  cursor: pointer; /* pointer cursor on hover */
  border-radius: 5px; /* slightly rounded corners */
}

.dropdown-home {
  display: inline-flex; /* allows centering with flexbox */
  align-items: center; /* vertically center content */
  justify-content: center; /* horizontally center content */
  padding: 2px 14px; /* internal space (top/bottom, left/right) */
  background-color: #444; /* dark gray background */
  color: #fff; /* white text */
  font-size: 16px; /* standard readable text */
  border: none; /* remove default borders */
  cursor: pointer; /* pointer cursor */
  border-radius: 50%; /* makes a circular shape */
  text-decoration: none; /* remove underline for links */
  font-weight: bold; /* bold text */
  margin: 6px 0; /* vertical spacing (top and bottom) */
}

.dropdown-content {
  display: none; /* hidden by default */
  position: absolute; /* position relative to .dropdown */
  top: 100%; /* place directly below button */
  left: 50%; /* center horizontally */
  transform: translateX(-50%); /* shift left to perfectly center */
  background-color: #f9f9f9; /* light background for menu */
  width: 300px; /* fixed width */
  max-height: 400px; /* scrollable height limit */
  overflow-y: auto; /* scroll when needed */
  padding: 12px 0; /* vertical padding for inner items */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* subtle drop shadow */
  z-index: 1000; /* sits above most other elements */
  scroll-behavior: smooth; /* smooth scroll for inner panels */
  margin: 0; /* remove default margin */
  border: 2px solid #c0c0c0; /* gray border */
  border-radius: 6px; /* rounded corners */
}

.dropdown.show .dropdown-content {
  display: block; /* show dropdown when .show is toggled */
}

.submenu {
  padding: 0 10px; /* internal spacing left/right */
}

.submenu-toggle {
  width: 100%; /* full width toggle */
  background: none; /* no background */
  border: none; /* no borders */
  padding: 10px 10px 10px 30px; /* padding with extra left space for arrow */
  text-align: left; /* left-align text */
  font-weight: bold; /* bold label */
  font-size: 1rem; /* normal size */
  color: #333; /* dark text */
  cursor: pointer; /* pointer on hover */
  position: relative; /* to position the arrow inside */
  border-bottom: 1px solid #ccc; /* light bottom border */
}

.submenu-toggle .arrow {
  position: absolute; /* arrow floats inside toggle */
  left: 10px; /* move in from left */
  top: 50%; /* vertical center */
  transform: translateY(-50%); /* perfect vertical centering */
  transition: transform 0.3s ease; /* smooth arrow rotation */
}

.submenu.show .arrow {
  transform: translateY(-50%) rotate(90deg); /* rotated arrow when open */
}

.submenu-content {
  overflow: hidden; /* hide content unless expanded */
  max-height: 0; /* collapsed height */
  padding-left: 10px; /* indent items */
  transition: max-height 0.4s ease; /* animate open/close */
}

.submenu.show .submenu-content {
  max-height: 500px; /* expanded height */
}

.submenu-content a {
  display: block; /* stack links */
  padding: 8px 0; /* space between links */
  text-decoration: none; /* no underline */
  color: #000; /* black text */
  font-size: 1rem; /* normal size */
}

.submenu-content a:hover {
  background-color: #f0f0f0; /* highlight on hover */
}

/* =========================================
   Back-to-Top Icon — only for open submenus
========================================= */

.back-to-top {
  display: none; /* hidden by default, JS toggles it */
  position: sticky; /* stay visible at bottom of scroll */
  bottom: 8px; /* margin from bottom */
  margin: 0 8px 8px auto; /* position in bottom right of dropdown */
  width: 32px; /* circle size */
  height: 32px;
  background: transparent; /* transparent base */
  border: 1px solid #fff; /* white border */
  border-radius: 50%; /* circular shape */
  cursor: pointer; /* pointer on hover */
  z-index: 10; /* sit above other items */
  font-size: 0; /* hide text */
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px; /* hide text off-screen */
  align-items: center; /* center icon if inline-flex */
  justify-content: center;
}

.submenu.show .back-to-top {
  display: flex !important; /* override to show inside open submenu */
}

.back-to-top::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url('/images/back-to-top.png') no-repeat center/contain; /* use arrow PNG */
}

.back-to-top:hover {
  border-color: #aad3ff; /* highlight border on hover */
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(170, 211, 255, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(170, 211, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(170, 211, 255, 0);
  }
}

.pulse {
  animation: pulse 1s ease-out 3; /* pulse 3 times */
}

/* ==========================================
   Mobile layout fix
========================================== */
@media (max-width: 600px) {
  .dropdown-content {
    width: calc(100vw - 20px); /* full width minus margin */
    max-width: none; /* remove 300px limit */
    left: 50%; /* center on screen */
    transform: translateX(-50%); /* adjust for left */
  }

  .back-to-top {
    display: none; /* still controlled by JS and submenu.show */
  }

  .submenu.show .back-to-top {
    display: flex !important; /* ensure it appears when open */
  }
}