/* Shared nav dropdown (Plugin -> Policy sandbox). Light defaults; the dark
   architecture page overrides the --nav-menu-* vars in its own inline CSS.
   Desktop hover only; the mobile menu is handled separately. */

/* One consistent nav CTA button across every page (size only; color stays
   per-page so the dark architecture page keeps its own treatment). The `.nav`
   ancestor gives this higher specificity than each page's inline .nav__cta. */
.nav .nav__cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  font-weight:600;line-height:1.6;padding:12px 22px;border-radius:14px}

/* Current-page indicator: an underline bar under the active top-level nav item,
   distinct from the Plugin brand violet. So "underline = you are here" and
   "violet = the Plugin product" read as two different signals. Uses currentColor,
   so the bar matches each item (dark on light pages, light on architecture,
   violet when Plugin itself is the current section). */
.nav__links > a, .nav__drop > a{position:relative}
/* every top-level item has an underline that draws in (scaleX) on hover/active */
.nav__links > a::after, .nav__drop > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .28s ease}
.nav__links > a:hover::after, .nav__drop:hover > a::after{transform:scaleX(1)}
.nav__links > a.active::after, .nav__drop > a.active::after{transform:scaleX(1)}
/* the current page's underline draws itself in when the page loads */
@keyframes nav-underline-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nav__links > a.active::after, .nav__drop > a.active::after{
  animation:nav-underline-draw .45s ease both}
@media (prefers-reduced-motion: reduce){
  .nav__links > a::after, .nav__drop > a::after{transition:none;animation:none;transform:scaleX(0)}
  .nav__links > a.active::after, .nav__drop > a.active::after{transform:scaleX(1)}
}

/* Waitlist interest selector (App / Plugin / Both). Theme-adaptive via
   currentColor, so it works on both the light and dark footer panels. */
.wl-seg{display:inline-flex;border:1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-radius:11px;overflow:hidden}
.wl-seg label{cursor:pointer;display:block}
.wl-seg label + label{border-left:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.wl-seg input{position:absolute;opacity:0;pointer-events:none}
.wl-seg span{display:block;padding:8px 15px;font-size:13.5px;font-weight:500;
  color:color-mix(in srgb,currentColor 62%,transparent);transition:background .15s,color .15s}
.wl-seg label:hover span{color:currentColor}
.wl-seg input:checked + span{background:color-mix(in srgb,currentColor 13%,transparent);
  color:currentColor;font-weight:600}
.wl-seg input:focus-visible + span{outline:2px solid color-mix(in srgb,currentColor 50%,transparent);
  outline-offset:-2px}

/* Skip-to-content link: off-screen until a keyboard user focuses it. */
.skip-link{position:absolute;left:8px;top:-52px;z-index:400;background:#111827;color:#fff;
  padding:9px 16px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;
  transition:top .16s ease}
.skip-link:focus{top:8px;outline:2px solid #fff;outline-offset:2px}
/* The landmark target should never show a focus outline when jumped to. */
main:focus{outline:none}

.nav__drop{position:relative;display:inline-flex;align-items:center}
.nav__drop > a{display:inline-flex;align-items:center}
.nav__caret{width:10px;height:10px;margin-left:4px;opacity:.55;flex:none;transition:transform .2s ease}
.nav__drop:hover .nav__caret{transform:rotate(180deg)}

.nav__menu{position:absolute;top:100%;left:0;padding-top:12px;display:none;min-width:190px;z-index:200}
.nav__drop:hover .nav__menu{display:block}
.nav__menu__inner{display:flex;flex-direction:column;padding:6px;border-radius:12px;
  background:var(--nav-menu-bg,#fff);
  border:1px solid var(--nav-menu-bd,rgba(17,24,39,.10));
  box-shadow:0 14px 34px var(--nav-menu-sh,rgba(17,24,39,.14))}

.nav__links .nav__menu .nav__menu__inner a{padding:9px 12px;border-radius:8px;font-size:15px;font-weight:500;
  white-space:nowrap;color:var(--nav-menu-fg,#374151)}
.nav__links .nav__menu .nav__menu__inner a:hover{background:var(--nav-menu-hover,#F3F4F6);
  color:var(--nav-menu-fg-h,#111827)}
/* current sub-page in the Plugin dropdown: highlighted in the Plugin violet */
.nav__links .nav__menu .nav__menu__inner a.active{color:#6D28D9;font-weight:600;
  background:color-mix(in srgb,#6D28D9 12%,transparent)}