/* 10. FEATURES */
.nd-fblurb { color: var(--nd-muted); margin: .4rem 0 0; }
.nd-fbadge { color: var(--nd-amber); }
.nd-floop { position: relative; margin: 1.2rem 0; border: 1px solid var(--nd-border); }
.nd-floop video { display: block; width: 100%; height: auto; }
.nd-floop-btn, .nd-fshare-btn { font: inherit; background: none; color: inherit; border: 1px solid var(--nd-border); padding: .1rem .6rem; cursor: pointer; }
.nd-floop-btn { position: absolute; right: .5rem; bottom: .5rem; background: var(--nd-bg-window); }
.nd-fkeys { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .4rem; }
.nd-fkeys li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.nd-fkeys-combo { display: inline-flex; gap: .25rem; }
.nd-fkeys kbd { border: 1px solid var(--nd-border); padding: 0 .4rem; border-radius: var(--nd-radius); font: inherit; }
.nd-fshot figcaption { font-size: .85em; color: var(--nd-muted); margin-top: .3rem; }
.nd-frel a { margin-left: .5rem; }
.nd-ffilter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.nd-ffilter button { font: inherit; background: none; color: inherit; border: 1px solid var(--nd-border); padding: .1rem .7rem; cursor: pointer; }
.nd-ffilter button[aria-pressed="true"] { color: var(--nd-amber); border-color: var(--nd-amber); }
.nd-fgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.nd-fcard { display: grid; gap: .4rem; align-content: start; border: 1px solid var(--nd-border); padding: .6rem; text-decoration: none; color: inherit; }
.nd-fcard img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.nd-fcard[hidden] { display: none; }
.nd-fcard:hover, .nd-fcard:focus-visible { border-color: var(--nd-amber); }

/* Mega-menu */
.nd-mega { width: min(100%, 60rem); }
.nd-mega-cols { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.nd-mega-h { margin: 0 0 .4rem; font-size: .85em; text-transform: lowercase; opacity: .8; }
.nd-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.nd-mega-link { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: inherit; }
.nd-mega-link img { flex: none; width: 64px; height: 40px; object-fit: cover; border: 1px solid var(--nd-border); }
.nd-mega-link small { display: block; opacity: .75; }
.nd-mega-link:hover strong, .nd-mega-link:focus-visible strong { color: var(--nd-amber); }
.nd-mega-all { margin: .8rem 0 0; }
@media (max-width: 700px) { .nd-mega-link img, .nd-mega-link small { display: none; } }

/* Vertical menu: the mega panel is an overlay, not an inline tree. */
.nd-nav--vertical .nd-mega.is-open { position: absolute; top: 100%; right: 0; z-index: 20; width: min(92vw, 40rem); padding: .8rem 1rem; background: var(--nd-bg-window); border: 1px solid var(--nd-border); border-radius: var(--nd-radius); }

/* Links in the feature UI use the theme colour, not the browser default. */
.nd-mega-all a, .nd-frel a, .nd-fshare a { color: var(--nd-green); text-decoration: none; }
.nd-mega-all a:hover, .nd-mega-all a:focus-visible, .nd-frel a:hover, .nd-frel a:focus-visible, .nd-fshare a:hover, .nd-fshare a:focus-visible { text-decoration: underline; }

/* Field guide: link from a section to its feature page. */
.nd-fg-more { margin: .2rem 0 1rem; }
.nd-fg-more a { color: var(--nd-green); text-decoration: none; }
.nd-fg-more a:hover, .nd-fg-more a:focus-visible { text-decoration: underline; }