/* ============================================================
   Shared Dropdown System — Ivan Tran Portfolio
   Import via: <link rel="stylesheet" href="dropdowns.css"> (root)
               <link rel="stylesheet" href="../dropdowns.css"> (projects/)
   Depends on colour/interaction tokens defined in navbar.css :root.
   Covers <details>/<summary> disclosure triggers (nav "Sections" menu,
   "What I contributed" PR lists, "Show additional projects") so every
   dropdown trigger shares one appearance + hover/open state — same
   shading + lift language as buttons.css, no black outline on hover.
   ============================================================ */

.navbar-sections summary,
.oss-card-prs summary,
.collapsible-section summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-secondary);
  background: #ffffff;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  transition:
    background var(--interactive-duration) ease,
    color var(--interactive-duration) ease,
    transform var(--interactive-duration) ease,
    box-shadow var(--interactive-duration) ease;
}

.navbar-sections summary::-webkit-details-marker,
.oss-card-prs summary::-webkit-details-marker,
.collapsible-section summary::-webkit-details-marker {
  display: none;
}

.navbar-sections summary:hover,
.oss-card-prs summary:hover,
.collapsible-section summary:hover,
.navbar-sections[open] summary {
  background: var(--surface-tint);
  color: var(--ink);
  transform: translateY(var(--interactive-lift));
  box-shadow: var(--shadow-card);
}

.navbar-sections summary:active,
.oss-card-prs summary:active,
.collapsible-section summary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Per-dropdown footprint — trigger size differs by context, appearance/interaction stays shared above */
.navbar-sections summary {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 10px;
  white-space: nowrap;
}

.oss-card-prs summary {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.collapsible-section summary {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
}
.collapsible-section summary i { font-size: 0.75em; color: var(--ink-tertiary); transition: transform 0.18s ease; }
.collapsible-section[open] summary i { transform: rotate(90deg); }
.collapsible-section[open] summary { margin-bottom: var(--space-4); }

/* Menu panel opened by .navbar-sections (mobile "Sections" overflow) or .navbar-more (desktop overflow) */
.navbar-sections .sections-menu,
.navbar-more .sections-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff !important;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(18, 21, 27, 0.1);
  min-width: 180px;
  padding: 6px 0;
  z-index: 20;
  overflow: hidden;
}

.navbar-sections .sections-menu a,
.navbar-more .sections-menu a {
  display: block;
  padding: 9px 14px;
  font-size: 0.78em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-secondary);
  text-decoration: none;
  background: #ffffff !important;
}

.navbar-sections .sections-menu a:hover,
.navbar-more .sections-menu a:hover {
  background: var(--surface-tint);
  color: var(--ink);
}

.navbar-sections .sections-menu a.active,
.navbar-more .sections-menu a.active {
  color: var(--navy);
}

.navbar-sections .sections-menu a.active,
.navbar-more .sections-menu a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
}

.navbar-sections .sections-menu a.active::after,
.navbar-more .sections-menu a.active::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-sections summary,
  .oss-card-prs summary,
  .collapsible-section summary {
    transition: background 0.01ms, color 0.01ms;
  }
}