/* GC Mods: the header's Mods dropdown (desktop list) and the phone drawer tile.
   Markup: includes/nav.php, behaviour: assets/js/gcm-nav.js. Same look as the
   PC Builder's Hardware dropdown and gearchamber-core's Reviews menu: square
   corners, accent top edge, no shadow, hover styles for fine pointers only.
   Scoped to .gc-mods-nav so it never depends on the PC Builder plugin's CSS
   (the panel reuses its gc-pcb-hw-* class names, which only match here). */

nav.main li.gc-mods-nav { position: relative; display: flex; align-items: center; }
nav.main li.gc-mods-nav > .gc-pcb-hw-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 0; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
nav.main li.gc-mods-nav > .gc-pcb-hw-btn .gc-pcb-hw-chev { flex: none; margin-top: -1px; transition: transform .2s ease; }
nav.main li.gc-mods-nav > .gc-pcb-hw-btn[aria-expanded="true"] { color: var( --wp--preset--color--accent-text ) !important; }
nav.main li.gc-mods-nav > .gc-pcb-hw-btn[aria-expanded="true"] .gc-pcb-hw-chev { transform: rotate( 180deg ); }
nav.main li.gc-mods-nav > .gc-pcb-hw-btn:hover { background: none; }

nav.main li.gc-mods-nav .gc-pcb-hw-panel { display: none; position: absolute; top: 100%; left: 0; z-index: 60; width: 280px; max-width: calc( 100vw - 40px ); padding: 4px 16px; background: var( --wp--preset--color--surface ); border: 1px solid var( --wp--preset--color--line ); border-top: 2px solid var( --wp--preset--color--accent ); border-radius: 0; box-shadow: none; color: var( --wp--preset--color--text ); text-align: left; cursor: default; }
nav.main li.gc-mods-nav.is-open .gc-pcb-hw-panel { display: block; }
/* no JS: open on keyboard focus so the links stay reachable */
nav.main li.gc-mods-nav:not( .gc-mods-ready ):focus-within .gc-pcb-hw-panel { display: block; }
nav.main li.gc-mods-nav .gc-pcb-hw-list { list-style: none; margin: 0; padding: 0; display: block; }
nav.main li.gc-mods-nav .gc-pcb-hw-list > li { display: block; margin: 0; padding: 0; border-bottom: 1px solid var( --wp--preset--color--line ); }
nav.main li.gc-mods-nav .gc-pcb-hw-list > li:last-child { border-bottom: 0; }
/* panel links: beat `nav.main a` (!important colour, uppercase, pill padding) */
nav.main li.gc-mods-nav .gc-pcb-hw-panel a.gc-pcb-hw-a { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; align-items: center; column-gap: 12px; min-height: 48px; padding: 10px 0; border-radius: 0; background: none; font: 600 13.5px/1.3 var( --wp--preset--font-family--sora ); letter-spacing: -.005em; text-transform: none; text-decoration: none !important; color: var( --wp--preset--color--text ) !important; -webkit-tap-highlight-color: transparent; }
nav.main li.gc-mods-nav .gc-pcb-hw-t { grid-column: 1; min-width: 0; }
nav.main li.gc-mods-nav .gc-pcb-hw-m { grid-column: 1; margin-top: 3px; font: 400 10.5px/1.3 var( --wp--preset--font-family--ibm-plex-mono ); letter-spacing: .03em; color: var( --wp--preset--color--muted ); }
nav.main li.gc-mods-nav .gc-pcb-hw-go { grid-column: 2; grid-row: 1 / span 2; font: 600 12px/1 var( --wp--preset--font-family--ibm-plex-mono ); color: var( --wp--preset--color--accent-text ); }
/* the current page keeps aria-current but no orange title */
nav.main li.gc-mods-nav .gc-pcb-hw-panel a.gc-pcb-hw-a[aria-current] { color: var( --wp--preset--color--text ) !important; }
nav.main li.gc-mods-nav .gc-pcb-hw-panel a.gc-pcb-hw-a[aria-current] .gc-pcb-hw-t { color: var( --wp--preset--color--text ); }
nav.main li.gc-mods-nav .gc-pcb-hw-panel a.gc-pcb-hw-a:focus-visible { outline: 2px solid var( --wp--preset--color--accent ); outline-offset: 2px; }

/* phone drawer: the current Mods row keeps the neutral colour */
:root:not( [data-theme="light"] ) .gc-mm .gc-mods-mm a.gc-mm-rv-arc[aria-current] { color: var( --wp--preset--color--text ) !important; }

@media ( hover: hover ) and ( pointer: fine ) {
	nav.main li.gc-mods-nav .gc-pcb-hw-panel a.gc-pcb-hw-a:hover .gc-pcb-hw-t,
	nav.main li.gc-mods-nav .gc-pcb-hw-panel a.gc-pcb-hw-a[aria-current]:hover .gc-pcb-hw-t { color: var( --wp--preset--color--accent-text ); }
	.gc-mm .gc-mods-mm a.gc-mm-rv-arc[aria-current]:hover { color: var( --wp--preset--color--accent-text ) !important; }
}
@media ( prefers-reduced-motion: reduce ) {
	nav.main li.gc-mods-nav > .gc-pcb-hw-btn .gc-pcb-hw-chev { transition: none; }
}