/* Rellawings v43.3 — isolated responsive header; no changes to existing site navigation/theme modules. */
.site-head .head-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;min-height:80px;gap:clamp(.6rem,1.4vw,1.1rem);
  padding:.45rem clamp(.75rem,2.2vw,2rem);
}
.site-head .brand{flex:0 0 clamp(205px,21vw,275px);min-width:0;justify-content:flex-start}
.site-head .brand img{display:block;width:100%;max-height:65px;object-fit:contain;object-position:left center}
.site-head .main-nav{order:0;display:flex;flex:1 1 auto;flex-basis:auto;min-width:0;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:clamp(.75rem,2vw,2.1rem);padding:0}
.site-head .main-nav a{white-space:nowrap}
.site-head .main-nav .header-discord{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:2px;border-radius:8px}
.site-head .header-discord img{display:block;width:31px;height:31px;object-fit:contain}
.site-head .main-nav .header-discord:hover{background:var(--raised)}
.site-head .account-nav{order:1;display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;margin-left:auto;flex-wrap:nowrap;gap:clamp(.3rem,.9vw,.8rem)}
.site-head .mobile-site-menu{display:none}
/* The main links disappear at tablet and smaller widths. A native details menu replaces them. */
@media(max-width:960px){
  .site-head .head-inner{min-height:64px;gap:clamp(.3rem,1.5vw,.7rem);padding:.4rem clamp(.65rem,2.5vw,1.25rem)}
  .site-head .brand{order:0;flex:0 1 auto;width:clamp(140px,21vw,205px);min-width:0;justify-content:flex-start}
  .site-head .brand img{max-height:54px;max-width:100%;object-position:left}
  .site-head .main-nav{display:none}
  .site-head .account-nav{order:1;flex:0 0 auto;margin-left:auto;gap:clamp(.25rem,1vw,.65rem);justify-content:flex-end}
  .site-head .mobile-site-menu{order:2;display:block;position:relative;flex:0 0 auto;margin:0;z-index:260}
  .site-head .mobile-site-menu>summary{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;list-style:none;border:1px solid var(--border);border-radius:9px;color:var(--text);background:transparent}
  .site-head .mobile-site-menu>summary::-webkit-details-marker{display:none}
  .site-head .mobile-site-menu>summary:hover,.site-head .mobile-site-menu[open]>summary{background:var(--raised);color:var(--accent)}
  .site-head .mobile-site-links{position:absolute;right:0;top:calc(100% + 11px);display:flex;flex-direction:column;gap:3px;width:min(285px,calc(100vw - 22px));max-height:calc(100dvh - 80px);overflow:auto;padding:9px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px #0006;color:var(--text)}
  .site-head .mobile-site-links a{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 13px;border-radius:8px;white-space:nowrap;font-weight:600}
  .site-head .mobile-site-links a:hover,.site-head .mobile-site-links a:focus-visible{background:var(--raised);color:var(--accent)}
  .site-head .mobile-site-links img{display:block;flex:none;width:28px;height:28px;object-fit:contain}
}
/* Portrait phones: use the full width and keep the controls on the same row. */
@media(max-width:650px){
  .site-head .head-inner{min-height:58px;gap:5px;padding:5px 10px}
  .site-head .brand{width:clamp(130px,37vw,165px);flex:0 1 auto}
  .site-head .brand img{max-height:43px}
  .site-head .account-nav{gap:5px}
  .site-head .nav-username{display:none}
  .site-head .account-dropdown>summary{gap:3px;padding:4px 2px;min-height:40px}
  .site-head .nav-avatar{width:29px;height:29px}
  .site-head .account-nav .header-search>summary,
  .site-head .account-nav .notification-dropdown>summary{width:36px;height:40px;min-width:36px}
  .site-head .mobile-site-menu>summary{width:38px;height:40px}
  .site-head .account-nav .header-search-popover{right:-40px}
}
@media(max-width:365px){
  .site-head .head-inner{padding:5px 7px;gap:3px}
  .site-head .brand{width:clamp(105px,36vw,127px)}
  .site-head .account-nav{gap:3px}
  .site-head .nav-avatar{width:26px;height:26px}
  .site-head .account-dropdown>summary{padding:4px 0;gap:2px}
  .site-head .account-dropdown>summary svg{width:10px}
  .site-head .account-nav .header-search>summary,
  .site-head .account-nav .notification-dropdown>summary{width:34px;min-width:34px;height:38px}
  .site-head .mobile-site-menu>summary{width:36px;height:38px}
}
@media(prefers-reduced-motion:reduce){.site-head .mobile-site-links{scroll-behavior:auto}}

/* Guest actions remain available inside the mobile navigation menu. */
@media(max-width:650px){.site-head .account-nav>.nav-login,.site-head .account-nav>.nav-join{display:none}}

/* Existing logo image contains wide transparent margins (visible art is ~40% of image width). 
   Crop only those transparent margins in the header; do not change or replace the source image. */
.site-head .brand{--rw-logo-visible-width:175px;flex:0 0 var(--rw-logo-visible-width);width:var(--rw-logo-visible-width)}
.site-head .brand .header-logo-view{display:block;position:relative;width:var(--rw-logo-visible-width);height:calc(var(--rw-logo-visible-width) * .376);overflow:hidden}
.site-head .brand .header-logo-view img{position:absolute!important;top:0!important;left:calc(var(--rw-logo-visible-width) * -.782)!important;display:block;width:calc(var(--rw-logo-visible-width) * 2.505)!important;max-width:none!important;max-height:none!important;height:auto!important;object-fit:initial!important}
@media(max-width:960px){.site-head .brand{--rw-logo-visible-width:140px;flex:0 0 var(--rw-logo-visible-width)}}
@media(max-width:650px){.site-head .brand{--rw-logo-visible-width:clamp(112px,34vw,143px)}}
@media(max-width:365px){.site-head .brand{--rw-logo-visible-width:clamp(106px,33vw,121px)}}
/* Old two-row header positioned account/search/bell popovers too far left on narrow phones. */
@media(max-width:650px){
  .site-head .account-dropdown .account-popover,
  .site-head .account-nav .header-search-popover,
  .site-head .account-nav .notification-popover{
    position:fixed;top:70px;left:10px;right:10px;width:auto;max-width:none;
    max-height:calc(100dvh - 80px);overflow-y:auto;
  }
}

/* v43.4 — close the unwanted space between the bell and navigation menu.
   The legacy small-screen rule used `margin:0 auto` on .account-nav.
   That retained a right auto margin, creating a misleading blank gap. */
@media(max-width:960px){
  .site-head .account-nav{margin-right:0;margin-left:auto}
}
/* At tablet width the complete navigation fits comfortably on one row.
   Keep the hamburger at <=767px for comfortable phone-sized touch targets. */
@media(min-width:768px) and (max-width:960px){
  .site-head .head-inner{gap:clamp(.35rem,1.1vw,.8rem)}
  .site-head .main-nav{display:flex;order:0;flex:1 1 auto;min-width:0;gap:clamp(.5rem,1.15vw,.95rem);font-size:clamp(.79rem,1.5vw,.96rem);padding:0;justify-content:center}
  .site-head .main-nav a{white-space:nowrap;padding:.38rem .1rem}
  .site-head .main-nav .header-discord{min-width:36px;min-height:40px}
  .site-head .main-nav .header-discord img{width:28px;height:28px}
  .site-head .mobile-site-menu{display:none}
  .site-head .account-nav{margin-left:auto;margin-right:0;gap:clamp(.2rem,.55vw,.5rem)}
  .site-head .brand{--rw-logo-visible-width:clamp(125px,17vw,145px)}
}
/* Compact the phone controls as a contiguous group at the right edge.
   Do not compromise the minimum finger-sized click targets. */
@media(max-width:767px){
  .site-head .head-inner{justify-content:flex-start;gap:5px}
  .site-head .account-nav{margin-left:auto;margin-right:0;gap:clamp(2px,.65vw,5px)}
  .site-head .mobile-site-menu{margin:0}
}