/* Addition for the multipage prototype only — not part of the original one-page style.css.
   Adds dropdown submenus to the existing nav without touching the real stylesheet. */

/* The real style.css sets header { position: absolute } with no z-index, so it was
   losing the stacking order to later page sections (mandala SVGs, reveal blocks) and
   the dropdown panel rendered underneath/through the page content instead of on top
   of it. Giving header an explicit stacking context above the page (but below the
   lightbox at 2000) fixes the overlap. */
header { z-index: 200; }

/* header only uses position:absolute, which does NOT create a containing block for
   position:fixed descendants (only transform/filter/perspective do). Since nav itself
   is position:fixed (for the mobile slide-down panel) and had no z-index of its own,
   it was NOT actually contained within header's stacking context — it stacked at the
   root level instead, competing directly against other z-index:10 elements on the page
   (e.g. .hero-img-wrapper) with its own implicit z-index:auto (~0), and losing: content
   further down the page rendered visually on top of the mobile nav panel and its
   dropdown items, making them untappable even though they were technically "open".
   Giving nav its own explicit z-index fixes this at the root, regardless of where it
   sits in the DOM. */
nav { z-index: 500; }

nav ul li.has-dropdown { position: relative; }
nav ul li.has-dropdown > a { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

.dropdown-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex: none;
}
nav ul li.has-dropdown.open .dropdown-caret { transform: rotate(225deg) translateY(2px); }

nav ul .dropdown { list-style: none; margin: 0; padding: 0; }

@media (min-width: 769px) {
  nav ul li.has-dropdown:hover .dropdown-caret { transform: rotate(225deg) translateY(2px); }

  nav ul .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--bg-color);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    z-index: 50;
  }
  nav ul li.has-dropdown:hover .dropdown,
  nav ul li.has-dropdown.open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  nav ul .dropdown a {
    text-transform: none;
    letter-spacing: 0.3px;
    font-size: 0.85rem;
    padding: 9px 14px;
    border-radius: 8px;
    display: block;
    white-space: nowrap;
    opacity: 0.85;
  }
  nav ul .dropdown a::after { display: none; }
  nav ul .dropdown a:hover { background: var(--color-muted); opacity: 1; }

  /* The panel sits on a cream background, but style.css's "header.scrolled nav a"
     rule turns nav link text near-white once you scroll — invisible on cream until
     hover happens to trip a different color rule. Force dark text here regardless
     of scroll state, since this panel's background never changes with scroll. */
  nav ul .dropdown a,
  header.scrolled nav ul .dropdown a {
    color: var(--fg-color) !important;
  }
  nav ul .dropdown a:hover,
  header.scrolled nav ul .dropdown a:hover {
    color: var(--color-accent) !important;
  }
}

@media (max-width: 768px) {
  nav.active { height: auto; max-height: calc(100vh - 80px); overflow-y: auto; }

  /* display:none/flex toggle instead of a max-height transition: the animated version
     depends on the browser correctly measuring intrinsic content height mid-transition,
     which turned out unreliable in testing (dropdown stuck at 0 height even when the
     "open" class and matching higher-specificity rule were both confirmed correctly
     applied). display toggling has no such ambiguity — it is either shown or not. */
  nav ul .dropdown {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }
  nav ul li.has-dropdown.open .dropdown {
    display: flex;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  nav ul .dropdown a { font-size: 0.72rem; opacity: 0.7; }
}