/* ScamDrill shared navigation styles.
   Audience dropdowns (For Your Family / For Your Organization) + a Resources
   menu. Pairs with /assets/nav.js for the mobile (<=900px) tap-to-expand
   accordions. Relies on the CSS variables defined in /assets/common.css.

   IMPORTANT: link this AFTER any page's inline nav <style> so the responsive
   collapse defined here (at 900px) governs uniformly across pages whose own
   nav rules collapse at different widths (768px / 820px). */

/* Base hamburger button styling — hidden on desktop, revealed in the 900px
   block below. Declared here so pages that lacked a mobile menu button (e.g.
   404) still get a working one when the markup is injected. */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--gray-600); }

/* ── Dropdown mechanics (desktop: reveal on hover / keyboard focus) ── */
.has-dropdown { position: relative; }
.dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: none; border: none; font-family: inherit; text-decoration: none;
  font-size: 0.9rem; font-weight: 500; color: var(--gray-600);
  transition: color 0.2s; padding: 0; height: 64px;
}
.has-dropdown:hover .dropdown-trigger,
.has-dropdown:focus-within .dropdown-trigger { color: var(--brand-blue); text-decoration: none; }
.dropdown-trigger:hover, .dropdown-trigger:focus { text-decoration: none; }
/* Audience triggers carry the hero-button colours (family = blue,
   organization = purple). The .nav-links scope out-specifies the base
   `.nav-links a` rule so the colour holds even when the trigger is an anchor. */
.nav-links .dropdown-trigger--family { color: var(--brand-blue); font-weight: 600; }
.nav-links .dropdown-trigger--business { color: var(--brand-purple); font-weight: 600; }
.has-dropdown:hover .dropdown-trigger--family,
.has-dropdown:focus-within .dropdown-trigger--family { color: var(--brand-blue-light); }
.has-dropdown:hover .dropdown-trigger--business,
.has-dropdown:focus-within .dropdown-trigger--business { color: #8b5cf6; }
.dropdown-trigger svg { transition: transform 0.2s; }
.has-dropdown:hover .dropdown-trigger svg,
.has-dropdown:focus-within .dropdown-trigger svg { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute; top: 60px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 14px; box-shadow: var(--shadow-xl); padding: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s; min-width: 190px; z-index: 110;
}
.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* invisible bridge so the gap below the trigger doesn't drop the hover */
.dropdown-panel::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.dropdown-panel.single { width: 320px; }

.dd-link { display: flex; align-items: flex-start; gap: 11px; padding: 9px 12px; border-radius: 9px; text-decoration: none; transition: background 0.15s; }
.dd-link:hover { background: var(--brand-blue-bg); }
.dd-link .dd-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }
.dd-link .dd-title { font-size: 0.88rem; font-weight: 600; color: var(--brand-navy); line-height: 1.3; }
.dd-link .dd-sub { font-size: 0.76rem; color: var(--gray-500); line-height: 1.35; display: block; margin-top: 1px; }

/* Scoped to .nav-links (0,2,0) so colour/padding win over each page's own
   `.nav-links a` (0,1,1) descendant rule. */
.nav-links .dd-row { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.88rem; font-weight: 500; color: var(--gray-700); width: auto; transition: background 0.15s, color 0.15s; }
.nav-links .dd-row:hover { background: var(--brand-blue-bg); color: var(--brand-blue); }

.dd-ico.ico-navy { background: var(--brand-navy); } .dd-ico.ico-blue { background: var(--brand-blue); }
.dd-ico.ico-green { background: var(--brand-green); } .dd-ico.ico-orange { background: var(--brand-orange); }
.dd-ico.ico-red { background: var(--brand-red); } .dd-ico.ico-purple { background: var(--brand-purple); }

/* ── Mobile (<=900px): collapse the nav and turn dropdowns into tap-to-expand
   accordions. This block owns the responsive collapse for every page so the
   behaviour is uniform regardless of each page's own (768px / 820px) rules. ── */
@media (max-width: 900px) {
  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: #fff;
    padding: 12px 24px 20px; border-bottom: 1px solid var(--gray-200);
    gap: 2px; box-shadow: var(--shadow-md);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .mobile-menu-btn { display: block; }
  .nav-links > a {
    padding: 12px 16px; font-size: 1rem; min-height: 44px;
    display: flex; align-items: center; border-bottom: 1px solid var(--gray-100);
  }
  .nav-cta {
    text-align: center; margin-top: 8px; padding: 12px 20px !important;
    min-height: 44px; display: inline-flex !important; align-items: center;
    justify-content: center; border-bottom: none !important;
  }
  .nav-signin { border-bottom: none !important; }
  .has-dropdown { position: static; }
  /* All three selectors below are .nav-links-scoped (0,2,0) so they override
     each page's inline `.nav-links a` mobile rule (0,1,1), which otherwise
     bleeds padding/border/width onto the triggers and dropdown sub-items. */
  .nav-links .dropdown-trigger {
    height: auto; width: 100%; justify-content: space-between;
    padding: 12px 16px; font-size: 1rem; min-height: 44px;
    border-bottom: 1px solid var(--gray-100);
  }
  .dropdown-panel {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; box-shadow: none; border: none; border-radius: 0;
    padding: 4px 0 8px 8px; width: auto !important; min-width: 0; display: none;
  }
  .has-dropdown.expanded .dropdown-panel { display: block; }
  /* The desktop reveal rules `.has-dropdown:hover/:focus-within .dropdown-panel`
     set `transform: translateX(-50%)` and carry (0,2,0) specificity, which beats
     the (0,1,0) `.dropdown-panel { transform: none }` reset above. On mobile,
     tapping a trigger focuses it, so :focus-within fires and the panel gets
     shifted ~50% of its width off-screen left. Re-neutralise the transform here
     at matching specificity (later in source ⇒ wins) so accordion panels stay
     in flow. */
  .has-dropdown:hover .dropdown-panel,
  .has-dropdown:focus-within .dropdown-panel { transform: none; }
  .nav-links .dd-row {
    padding: 10px 12px; width: auto; border-bottom: none; min-height: 0;
  }
  .nav-links .dd-link {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 9px 12px; width: auto; border-bottom: none; min-height: 0;
  }
  .has-dropdown:hover .dropdown-trigger svg { transform: none; }
  .has-dropdown.expanded .dropdown-trigger svg { transform: rotate(180deg); }
}