/* Header and navigation system */

.site-header,
.site-header *,
.main-nav,
.main-nav *{
  box-sizing:border-box;
}

.site-header{
  min-height:var(--admin-header-height,74px);
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  padding:0 clamp(18px,3vw,54px);
  background:rgba(17,24,39,.98);
  border-bottom:1px solid var(--line);
  color:var(--text);
  position:sticky;
  top:0;
  z-index:10000;
}

.site-header .brand,
.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  max-width:var(--admin-logo-width,260px);
  overflow:hidden;
  background:transparent;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
}

.site-header .brand img,
.brand img{
  display:block;
  height:var(--admin-logo-height,52px);
  max-width:var(--admin-logo-width,260px);
  width:auto;
  object-fit:contain;
  object-position:left center;
}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
}

.nav-link{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border-radius:14px;
  color:var(--text);
  background:transparent;
  border:1px solid transparent;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}

.nav-link svg{
  width:19px;
  height:19px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-link:hover{
  background:var(--panel-2);
  border-color:var(--line);
}

.nav-link.active{
  background:var(--gold);
  border-color:var(--gold);
  color:#0b1120;
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.theme-toggle,
#headerNotificationBell,
.header-notification-bell,
#mobileMenuBtn,
.mobile-menu-btn{
  width:42px;
  height:42px;
  min-width:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:0;
  box-shadow:none;
  cursor:pointer;
}

.mobile-menu-btn svg{
  width:25px;
  height:25px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.language-toggle{
  height:40px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:14px;
}

.language-toggle button{
  height:30px;
  min-width:32px;
  padding:0 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-weight:900;
}

.language-toggle button.active{
  background:var(--gold);
  color:#0b1120;
}

@media(min-width:861px){
  #mobileMenuBtn,
  .mobile-menu-btn,
  #mobileMenuBackdrop,
  .mobile-menu-backdrop{
    display:none!important;
  }
}

@media(max-width:860px){
  body.mobile-nav-open{
    overflow:hidden;
  }

  .site-header{
    min-height:72px;
    grid-template-columns:minmax(120px,1fr) auto 52px;
    padding:10px 12px;
    gap:10px;
    z-index:100000;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .site-header .brand,
  .brand{
    max-width:var(--admin-logo-mobile-width,170px);
  }

  .site-header .brand img,
  .brand img{
    height:var(--admin-logo-mobile-height,38px);
    max-width:var(--admin-logo-mobile-width,170px);
  }

  .header-actions{
    gap:7px;
    min-width:0;
  }

  .header-actions .login-btn,
  .header-actions .register-btn,
  .header-actions .logout-btn,
  .header-actions .user-account-pill,
  .header-actions .admin-panel-header-btn{
    display:none!important;
  }

  .header-actions .language-toggle{
    height:38px;
    transform:scale(.92);
    transform-origin:right center;
  }

  .header-actions .language-toggle button{
    height:28px;
    min-width:30px;
    padding:0 8px;
    font-size:12px;
  }

  #mobileMenuBtn,
  .mobile-menu-btn{
    display:inline-flex!important;
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:17px;
    justify-self:end;
    z-index:100003;
  }

  .mobile-menu-backdrop{
    position:fixed;
    inset:72px 0 0 0;
    background:rgba(2,6,23,.55);
    opacity:0;
    pointer-events:none;
    z-index:99998;
    transition:opacity .2s ease;
  }

  body.mobile-nav-open .mobile-menu-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .main-nav{
    position:fixed;
    top:72px;
    right:0;
    width:min(430px,88vw);
    height:calc(100dvh - 72px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    padding:18px;
    background:linear-gradient(180deg,#111827 0%,#050914 100%);
    border-left:1px solid rgba(148,163,184,.22);
    box-shadow:-24px 0 70px rgba(0,0,0,.42);
    transform:translateX(105%);
    transition:transform .22s ease;
    z-index:99999;
    overflow:auto;
  }

  body.mobile-nav-open .main-nav{
    transform:translateX(0);
  }

  .main-nav::before{
    content:"ÍSLENSKIR SEÐLAR";
    display:block;
    color:var(--gold);
    font-size:13px;
    font-weight:900;
    letter-spacing:1.8px;
    margin:2px 0 12px;
  }

  .main-nav .nav-link,
  .main-nav .mobile-login-btn,
  .main-nav .mobile-register-btn{
    width:100%;
    min-height:54px;
    justify-content:flex-start;
    gap:13px;
    padding:0 14px;
    border-radius:14px;
    background:transparent;
    border:1px solid transparent;
    color:#e5e7eb;
    font-size:17px;
    font-weight:750;
    text-align:left;
  }

  .main-nav .nav-link:hover,
  .main-nav .mobile-login-btn:hover,
  .main-nav .mobile-register-btn:hover{
    background:#1b2638;
    border-color:rgba(148,163,184,.20);
    color:#fff;
  }

  .main-nav .nav-link.active{
    background:rgba(245,164,0,.14);
    border-color:rgba(245,164,0,.35);
    color:var(--gold);
  }

  .main-nav .admin-only-nav,
  .main-nav [data-page="admin"],
  .main-nav .admin-panel-header-btn{
    display:none!important;
  }

  .mobile-auth{
    display:grid;
    gap:8px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(148,163,184,.18);
  }

  .main-nav .mobile-register-btn.logout-mode,
  .main-nav .mobile-register-btn{
    color:#fca5a5;
  }
}

@media(max-width:430px){
  .site-header{
    grid-template-columns:minmax(96px,1fr) auto 50px;
    gap:6px;
    padding:10px 8px;
  }

  .header-actions{
    gap:5px;
  }

  .header-actions .language-toggle{
    height:34px;
    padding:3px;
    transform:scale(.86);
  }

  .header-actions .language-toggle button{
    height:26px;
    min-width:26px;
    padding:0 6px;
    font-size:11px;
  }

  #mobileMenuBtn,
  .mobile-menu-btn{
    width:50px;
    height:50px;
    min-width:50px;
  }
}