/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */
/* The houses of WoGL (14-oct): inline in the bar on wide screens, a folding strip on phones.
   Its own colours, so it looks the same inside Academy and in every new house. */
.wh-bar, .wh-strip {
  --wh-gold: #e8c89a; --wh-text: #efe8dc; --wh-soft: rgba(240, 232, 220, .66); --wh-quiet: rgba(240, 232, 220, .42);
  --wh-line: rgba(240, 232, 220, .1); --wh-panel: rgba(12, 8, 16, .96);
  --wh-sans: 'Outfit', system-ui, sans-serif; --wh-mono: 'JetBrains Mono', ui-monospace, monospace;
}
.wh-bar { display: flex; align-items: center; gap: 22px; font: 400 13px/1 var(--wh-sans); color: var(--wh-soft); }
.wh-house { color: inherit; text-decoration: none; }
.wh-house[aria-current] { color: var(--wh-text); }
.wh-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.wh-trigger i { font-style: normal; font-size: 11px; opacity: .7; transition: transform .25s ease; }
.wh-trigger[aria-expanded=true] { color: var(--wh-text); }
.wh-trigger[aria-expanded=true] i { transform: rotate(180deg); }
.wh-has-rooms { position: relative; display: inline-flex; }
.wh-rooms { position: absolute; top: calc(100% + 18px); left: -14px; z-index: 30; display: grid; width: 300px; padding: 8px; border: 1px solid rgba(240, 236, 228, .12); border-radius: 14px; background: var(--wh-panel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.wh-has-rooms.open .wh-rooms { opacity: 1; transform: none; pointer-events: auto; }
.wh-rooms a, .wh-strip-rooms a { display: grid; gap: 3px; min-height: 50px; padding: 9px 12px; border-radius: 10px; color: var(--wh-text); text-decoration: none; }
.wh-rooms a:hover, .wh-rooms a:focus-visible, .wh-strip-rooms a:hover, .wh-strip-rooms a:focus-visible { background: rgba(255, 255, 255, .05); }
.wh-rooms strong, .wh-strip-rooms strong { font: 400 15px/1.2 var(--wh-sans); }
.wh-rooms span, .wh-strip-rooms span { font: 300 13px/1.25 var(--wh-sans); color: var(--wh-quiet); }
.wh-rooms a[aria-current] strong, .wh-strip-rooms a[aria-current] strong { color: var(--wh-gold); }
.wh-rooms a:first-child, .wh-strip-rooms a:first-child { border-bottom: 1px solid var(--wh-line); border-radius: 10px 10px 0 0; margin-bottom: 4px; }

.wh-strip { display: none; }
@media (max-width: 760px) {
  .wh-bar { display: none; }
  .wh-strip { display: block; position: sticky; top: var(--wh-top, 64px); z-index: 25; background: rgba(7, 5, 11, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .wh-strip-houses { display: flex; align-items: center; gap: 22px; height: 46px; max-height: 46px; padding: 0 18px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--wh-line); scrollbar-width: none; white-space: nowrap; font: 400 14px/1 var(--wh-sans); color: var(--wh-soft); transition: max-height .38s cubic-bezier(.4, 0, .2, 1); }
  .wh-strip-houses::-webkit-scrollbar { display: none; }
  .wh-strip-houses .wh-house { padding: 14px 0; border-bottom: 1px solid transparent; }
  .wh-strip-houses .wh-house[aria-current] { color: var(--wh-gold); border-bottom-color: var(--wh-gold); }
  .wh-strip-rooms { display: none; padding: 6px 10px 10px; border-bottom: 1px solid var(--wh-line); background: rgba(10, 5, 13, .98); }
  .wh-strip-rooms.open { display: grid; }
  .wh-strip-toggle { display: flex; width: 100%; align-items: center; justify-content: center; padding: 4px; border: 0; border-bottom: 1px solid var(--wh-line); background: #110914; cursor: pointer; }
  .wh-strip-toggle span { font-size: 11px; line-height: 1; color: #4a4640; transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
  .wh-strip.folded .wh-strip-houses { max-height: 0; border-bottom: 0; }
  .wh-strip.folded .wh-strip-rooms { display: none; }
  .wh-strip.folded .wh-strip-toggle span { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wh-rooms, .wh-trigger i, .wh-strip-houses, .wh-strip-toggle span { transition: none; }
}