/* /assets/css/header.css — PRIMETIME header (globaal) */
:root { --header-h: 7rem; }

html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #ddd;
  font-family: 'Orbitron', sans-serif;
  overflow-x: hidden;
}


/* Basis */
.live-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: 0.5rem;
  z-index: 9999;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,.88), rgba(0,0,0,0));
}
.live-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 4.9rem;
  padding: .6rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo */
.live-logo { flex-shrink: 0; min-width: 7rem; }
.live-logo img { max-height: 7.5rem; height: auto; width: auto; display: block; }

/* Menu */
.live-menu-wrapper { display:flex; align-items:center; gap:2rem; position:relative; }
.primetime-menu { display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.primetime-menu li a{
  font-family:'Rubik',sans-serif; color:#00f0ff; text-decoration:none;
  font-weight:600; font-size:1.05rem; line-height:1.4; letter-spacing:.02em; transition:.3s;
}
.primetime-menu li a:hover{ color:#fff; text-shadow:0 0 8px rgba(0,255,255,.5); }
.primetime-menu li.current-menu-item a,
.primetime-menu li.current_page_item a{ color:#fff; text-shadow:0 0 12px rgba(255,255,255,.6); }

/* TikTok link */
.live-tiktok-link{ display:flex; align-items:center; }
.live-tiktok-link img{ width:60px; height:60px; object-fit:contain; filter:drop-shadow(0 0 4px rgba(0,255,255,.5)); transition:.3s; }
.live-tiktok-link img:hover{ transform:scale(1.1); }
.live-tiktok-link a{ display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; }

/* Hamburger */
.hamburger-toggle{ display:none; }
.hamburger-bar{ width:100%; height:4px; background:#00ffff; border-radius:3px; }

/* Submenu styling */
.primetime-menu li {
  position: relative; /* belangrijk: maakt dit li de referentie voor het submenu */
}

.primetime-menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(0, 0, 0, 0.95);
  padding: 0.6rem 0;
  border-radius: 6px;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  z-index: 9999;
}

.primetime-menu li:hover > ul.sub-menu {
  display: block;
}

.primetime-menu li ul.sub-menu li {
  display: block;
  margin: 0;
}

.primetime-menu li ul.sub-menu li a {
  display: block;
  padding: 0.6rem 1rem;
  font-family: 'Rubik', sans-serif;
  color: #00f0ff;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}


.primetime-menu li ul.sub-menu li a:hover {
  background: rgba(41, 210, 218, 0.2);
  color: #fff;
  text-shadow: 0 0 8px rgba(0,255,255,.5);
}




/* Mobiel */
@media (max-width:1024px){
  .live-header-inner {
    padding: 0.6rem 1rem;
    min-height: 4rem;
  }

  /* Logo kleiner */
  .live-logo img {
    max-height: 3.2rem;
    height: auto;
    width: auto;
  }

  /* Hamburger in flexflow */
  .hamburger-toggle {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:32px;
    height:24px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:10001;
  }
  .hamburger-bar { height:3px; }

  /* Menu standaard verbergen */
  .live-menu-wrapper,
  .live-tiktok-link { display:none; }

  /* Open state menu */
  .live-header.is-open .live-menu-wrapper {
    display:block;
    position:absolute;
    top:100%; left:0; right:0;
    background:rgba(0,0,0,.95);
    padding:1.2rem;
    border-top:1px solid rgba(0,255,255,.2);
  }
  .live-header.is-open .primetime-menu {
    flex-direction:column;
    gap:1rem;
  }

  body.menu-lock { overflow:hidden; }
}

@media (max-width:768px){
  .live-header-inner {
    padding: 0.6rem 1rem;
    min-height: 4.2rem;
  }
  .live-logo img {
    max-height: 7rem; /* iets groter logo */
    width: auto;
    height: auto;
  }
  .hamburger-toggle {
    width: 36px;
    height: 26px;
  }
  .hamburger-bar {
    height: 3.5px;
  }
}