/* Features dropdown (a centred mega-menu under the sticky 88px header) in the Tidy header (/tidy, /tidy/pricing, /tidy/docs/*).
   Markup is generated by scripts/build_tidy_docs.py (FEATURES_MENU). A <details> element,
   so it opens on click and works without JavaScript; a few lines of script close it on an
   outside click or Escape. Uses the tokens from tidy.css. */

.fm { position: relative; }
.fm > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; color: var(--ink); font-weight: 500; }
.fm > summary::-webkit-details-marker { display: none; }
.fm > summary:hover, .fm[open] > summary { color: var(--accent); }
.fm > summary svg { transition: rotate 150ms cubic-bezier(0.23, 1, 0.32, 1); }
.fm[open] > summary svg { rotate: 180deg; }

.fm-panel { position: fixed; top: 96px; left: 50%; translate: -50% 0; z-index: 60; width: min(880px, calc(100vw - 48px)); background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -28px rgba(24, 34, 38, 0.45); overflow: hidden; transform-origin: top center; animation: fm-in 180ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes fm-in { from { opacity: 0; scale: 0.97; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .fm-panel { animation: fm-fade 120ms linear; } .fm > summary svg { transition: none; } }
@keyframes fm-fade { from { opacity: 0; } to { opacity: 1; } }

.fm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; padding: 24px; }
.fm-col { display: flex; flex-direction: column; gap: 2px; }
.fm-head { margin: 0 0 8px; padding: 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.main-nav .fm-col a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.main-nav .fm-col a:hover { background: var(--accent-wash-soft); color: var(--ink); }
.main-nav .fm-col a strong { font-size: 15px; font-weight: 600; }
.main-nav .fm-col a span { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.4; }
.fm-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 36px; background: var(--paper); border-top: 1px solid var(--line-soft); }
.main-nav .fm-foot a { padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.main-nav .fm-foot a:hover { color: var(--accent-hover); text-decoration: underline; }