/* Top navigation bar / site header chrome: logo, nav links, dropdown submenu, mobile
   nav toggle, header-only user widgets (avatar, points pill, mods link, settings gear,
   notification dot) — split out of style.css. Used in head.php/topbar on every page. */

/* In normal flex flow (after the flex:1 nav) so it can never overlap nav links */
.wide-toggle { display: none; flex-shrink: 0; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--clr-header-link); padding: 0.25rem 0.5rem; border-radius: var(--radius-small); cursor: pointer; line-height: 0; }
.wide-toggle:hover { background: rgba(255,255,255,0.1); color: var(--clr-header-link-hover); border-color: rgba(255,255,255,0.3); }
@media (min-width: 1200px) {
	.wide-toggle { display: flex; align-items: center; }
}

#site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background: var(--clr-header-bg); color: var(--clr-header-text); display: flex; align-items: center; gap: 1.25rem; padding: 0 1.5rem; box-shadow: var(--shadow-md); }

#site-header .site-logo { flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: .5em; }
.site-logo { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; text-decoration: none; }
#site-header .site-logo:hover, #site-header .site-logo:hover a { color: #fff; text-decoration: none; opacity: 0.85; }

.site-logo img { max-height: 80%; }

#site-header .site-nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; flex: 1; margin-top: calc(var(--header-height) - 2.5em); font-size: 0.9rem; }

#site-header .site-nav a { color: var(--clr-header-link); white-space: nowrap; padding: 0.25rem 0.55rem; border-radius: var(--radius-small); transition: background 0.12s, color 0.12s; }
#site-header .site-nav > * { margin-top: calc(2.5em - var(--header-height)); }
#site-header .site-nav a:hover { color: var(--clr-header-link-hover); background: rgba(255, 255, 255, 0.08); text-decoration: none; }
#site-header .site-nav .topbar-icon-link { display: flex; align-items: center; gap: 0.35em; }
.topbar-discord-icon { width: 1em; height: 1em; vertical-align: middle; opacity: 0.8; filter: brightness(0) invert(1); }
#site-header .site-nav .topbar-icon-link:hover .topbar-discord-icon { opacity: 1; }

.topbar-gale-icon { width: 1em; height: 1em; vertical-align: middle; opacity: 0.8; }

/* Tools hover submenu */
#site-header .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
#site-header .nav-dropdown-toggle { color: var(--clr-header-link); font-size: 1em; white-space: nowrap; padding: 0.25rem 0.55rem; border: none; background: none; border-radius: var(--radius-small); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 0.3em; transition: background 0.12s, color 0.12s; line-height: inherit; }
#site-header .nav-dropdown-toggle:hover,
#site-header .nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--clr-header-link-hover); background: rgba(255, 255, 255, 0.08); border: none; }
.nav-dropdown-caret { opacity: 0.7; transition: transform 0.12s; }
#site-header .nav-dropdown:hover .nav-dropdown-caret,
#site-header .nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
#site-header .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 12rem; flex-direction: column; gap: 0.1rem; background: var(--clr-header-bg); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-small); box-shadow: var(--shadow-md); padding: 0.3rem; z-index: 200; }
#site-header .nav-dropdown:hover .nav-dropdown-menu,
#site-header .nav-dropdown:focus-within .nav-dropdown-menu { display: flex; }

/* Group label: hidden inside the desktop hover menus, shown as a section heading when the
 * collapsed mobile menu flattens the dropdown items into the column below. */
.nav-flat-label { display: none; }

/* On the collapsed mobile menu there's no hover — flatten the dropdown items into the column. */
@media (max-width: 900px) {
	#site-header .nav-dropdown { display: contents; }
	#site-header .nav-dropdown-toggle { display: none; }
	#site-header .nav-dropdown-menu,
	#site-header .nav-dropdown:hover .nav-dropdown-menu,
	#site-header .nav-dropdown:focus-within .nav-dropdown-menu { display: contents; }
	#site-header .nav-flat-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-header-link); opacity: 0.55; padding: 0.6rem 0.75rem 0.15rem; margin-top: 0.3rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

#site-header .user-info { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; color: var(--clr-header-text); font-size: 0.9rem; white-space: nowrap; }

.user-avatar { border-radius: 50%; vertical-align: middle; width: 28px; height: 28px; }

#site-header form { display: inline; }
#site-header button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--clr-header-link); font-size: 0.85rem; padding: 0.2rem 0.6rem; }
#site-header button:hover { background: rgba(255,255,255,0.1); color: var(--clr-header-link-hover); border-color: rgba(255,255,255,0.35); }

.notification-count { background: var(--clr-notification); color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: 3px; padding: 0 0.3em; margin-left: 0.2em; height: inherit; align-items: center; margin-top: -6px; }

main { max-width: var(--content-width); margin: 0 auto; padding: 1.5rem 1.25rem 2px; }
main:has(.site-slogan) { padding-top: 0; }
html.full-width main { max-width: none; }

main > nav { margin-bottom: 1rem; font-size: 0.9rem; color: var(--clr-text-muted); }
main > nav a { color: var(--clr-text-muted); background: var(--clr-bg); }
main > nav a:hover { color: var(--clr-link); }

.site-slogan { text-align: center; font-size: 0.85rem; color: #707070; transform: translateY(.3em); font-style: italic; }
.user-points { font-size: 0.78rem; font-weight: 600; color: var(--clr-header-link); background: linear-gradient(
		to right,
		rgba(255,255,255,0.18) var(--rank-progress, 0%),
		rgba(255,255,255,0.06) var(--rank-progress, 0%)
	); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; text-decoration: none; }
.user-points:hover { color: var(--clr-header-link-hover); text-decoration: none; }

.user-mods-link { display: flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.user-mods-link:hover { color: var(--clr-header-link-hover); text-decoration: none; }
.user-mods-link:hover .user-name { text-decoration: underline; }

.settings-link { display: inline-flex; align-items: center; color: var(--clr-header-link); opacity: 0.7; transition: opacity 0.15s; text-decoration: none; vertical-align: middle; }
.settings-link:hover { opacity: 1; color: var(--clr-header-link-hover); }
.nav-toggle { display: none; position: relative; flex-shrink: 0; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--clr-header-link); padding: 0.3rem 0.45rem; border-radius: var(--radius-small); line-height: 0; }
.nav-toggle:hover { background: rgba(255,255,255,0.1); color: var(--clr-header-link-hover); border-color: rgba(255,255,255,0.35); }
.nav-toggle.has-notifications::after { content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--clr-notification); border: 1px solid var(--clr-header-bg); }

@media (max-width: 900px) {
	#site-header { gap: 0.6rem; padding: 0 0.5rem; }
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	#site-header .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.15rem; background: var(--clr-header-bg); padding: 0.5rem 0.75rem 0.9rem; border-top: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-md); max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
	#site-header.nav-open .site-nav { display: flex; }
	#site-header .site-nav a { font-size: 1rem; padding: 0.6rem 0.75rem; }
	#site-header .site-nav > * { margin: 0; }
	#site-header .user-info { gap: 0.45rem; }
}

@media (max-width: 620px) {
	#site-header .user-info .user-name { display: none; }
}
@media (max-width: 420px) {
	#site-header .site-logo { gap: .2rem; font-size: 1rem; }
	#site-header .user-points { display: none; }
}