/* Shared header + mobile menu styles for Pool8.tv
   This file contains header layout, nav and mobile menu styles.
   It relies on color variables defined in page roots (e.g., --bg, --border, --text).
*/

:root{--header-h:80px}

/* Mobile nav toggle */
.mobile-nav-toggle{display:none;border:0;background:transparent;padding:6px;margin-right:0;width:44px;height:44px;position:relative}
.mobile-nav-toggle .bar{display:block;width:26px;height:3px;background:#ffffff;margin:4px 0;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.25)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:#121212;backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid rgba(63,63,63,0.3);box-shadow:0 4px 20px rgba(0,0,0,0.7);height:var(--header-h);width:100%;max-width:100%;overflow:hidden}
.header__row{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;position:relative;width:100%;max-width:100%;box-sizing:border-box}
.logo{display:flex;align-items:center;gap:10px;font-family:Kanit,Inter,sans-serif;font-weight:700;pointer-events:auto;z-index:20}
.logo__img{height:auto;max-height:48px;width:auto;display:block}

nav{flex:0 0 auto; z-index:30; margin-left:auto; position:relative}
nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:6px;background:#1A1A1A;color:#ffffff;font-weight:700;font-size:0.9rem;letter-spacing:0.3px;transition:all 0.25s ease}
nav a.active, nav a:hover{background:#21c55d;color:#ffffff;transform:translateY(-1px);box-shadow:none}

/* Mobile behaviour */
@media (max-width:768px){
  :root{--header-h:60px}  /* Reduce header height for mobile */
  .header{height:var(--header-h)}
  .logo__img{height:32px}  /* Slightly smaller logo for mobile */
  .mobile-nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;width:44px;flex-shrink:0;order:3}
  .mobile-nav-toggle .bar{width:28px;height:3px;background:#ffffff;margin:4px 0;border-radius:3px;display:block}
  .header__row nav{display:none}
  .header__row.container{padding:8px 12px;gap:0;justify-content:space-between}  /* Override container padding on mobile */

  /* Add invisible spacer on left to balance the burger on right for centered logo */
  .logo::before{content:'';width:44px;flex-shrink:0;order:1}
  
  /* Center the logo on small screens with flex */
  .logo{flex:1;display:flex;justify-content:center;align-items:center;min-width:0;order:2}
  /* ensure logo image keeps expected size */
  .logo__img{height:32px;order:2}  /* Consistent with above */

  /* When mobile menu is active, show vertical nav fixed to viewport so items never overflow off-screen */
  .header__row.nav-open nav{display:block;position:fixed;top:var(--header-h);bottom:0;left:0;right:0;padding:0;z-index:1200;box-sizing:border-box;overflow:auto;-webkit-overflow-scrolling:touch;background: rgba(0,0,0,0.95);}
  .header__row.nav-open nav ul{display:flex;flex-direction:column;background:transparent;border-radius:0;padding:0;margin:0;gap:0;list-style:none}
  .header__row.nav-open nav ul li{display:block;padding:0;margin:0;border-top:1px solid rgba(255,255,255,0.03)}
  .header__row.nav-open nav a{display:block;width:100%;box-sizing:border-box;padding:16px 20px;margin:0;background:transparent;border:0;color:var(--text);font-size:1rem;text-align:left}

  /* overlay that index uses for a cloned mobile menu (when present) */
  #mobileMenuOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1200;display:flex;align-items:flex-start;padding-top:var(--header-h);overflow:auto}
  #mobileMenuOverlay .mobilemenu{width:100%;max-width:440px;margin:0 auto;padding:12px}
  #mobileMenuOverlay nav ul{display:flex;flex-direction:column;gap:0}
  #mobileMenuOverlay nav a{display:block;padding:14px 16px;border-radius:8px;background:transparent;border:none}
}