/* Ladda in Cooper Black */
@font-face {
  font-family: 'Cooper Black';
  font-style: normal;
  font-weight: normal;
  src: url('COOPBL.woff') format('woff');
}

/* Menyknappar (Home m.m.) */
.navbar .navbar-brand,
.navbar .nav-link {
  font-family: 'Cooper Black', serif;
}

h1, h2, h3, h4, h5, h6,
p {
  font-family: 'Cooper Black', serif;
}

/* Playlistens rubrik + innehåll */
.playlist,
.playlist h3,
.playlist-header,
.playlist a {
  font-family: 'Cooper Black', serif;
}

/* Gör navbar transparent med vit text */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6) !important; /* lite genomskinlig svart */
  z-index: 10;
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: #fff !important;
}

.navbar .nav-link:hover {
  color: #ddd !important;
}

.watched-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
}

/* Standard: fyller hela skärmen (mobil) */
.videospelare {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #000;
}

.videospelare video {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #000;
  display: block;
}

/* På breda skärmar (PC) - 50% bredd, centrerad */
@media (min-width: 992px) {
  .videospelare {
    width: 50%;
    height: auto;   /* anpassa höjd till proportioner */
    margin: 80px auto 0 auto; /* centrerar horisontellt och lämnar plats för navbar */
  }

  .videospelare video {
    width: 100%;
    height: auto;
  }
}

.playlist {
  margin-top: 20px;
  padding: 15px;
  background: #111;
  border-radius: 8px;
  color: #fff;
}

.playlist h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
  color: #fff; /* Netflix-röd */
}

.playlist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playlist li {
  margin-bottom: 10px;
}

.playlist a {
  display: block;
  padding: 10px 15px;
  background: #222;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.playlist a:hover {
  background: #e50914;
  transform: translateX(5px);
  color: #fff;
}

.playlist-header {
  font-weight: bold;
  margin-top: 12px;
  color: #fff; /* anpassa till ditt tema */
}

.playlist-header {
  font-weight: bold;
  font-size: 1.2em;   /* större font */
  margin-top: 12px;
  color: #fff;
  border-bottom: 2px solid #fff;
  padding-bottom: 3px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;   /* ingen scroll */
}

.hero {
  position: fixed;              /* sitter fast i bakgrunden */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('./system/alien.png') no-repeat center center;
  background-size: cover;       /* fyller hela skärmen */
  background-color: #000;       /* om bilden inte täcker */
  z-index: -1;                  /* lägger den bakom menyn */
}

/* Dropdown-listor */
.dropdown-menu {
  max-height: 80vh;              /* tar upp max 80% av fönstrets höjd */
  overflow-y: auto;              /* aktiverar scroll om innehållet är för långt */
  -webkit-overflow-scrolling: touch; /* gör scrollen mjuk på mobil */
}

.dropdown-menu .dropdown-item {
  font-family: 'Cooper Black', serif;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 8px 15px;
  white-space: nowrap !important;
}

/* Gör divider svart så den smälter in */
.dropdown-divider {
  border-top: 1px solid #222 !important; /* tunn mörk skiljelinje */
  margin: 0 !important;                  /* ta bort extra mellanrum */
}

/* Tillåt scroll + svart bakgrund */
html,body{
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:#000!important;
}

/* === UFO dropdowns: 50% på ALLA nivåer === */
.navbar .dropdown-menu,
.navbar .dropdown-menu.show,
.navbar .dropdown-menu .dropdown-menu,
.navbar .dropdown-menu .dropdown-menu.show,
.navbar-nav.sm-collapsible .dropdown-menu,
.navbar-nav.sm-collapsible .dropdown-menu .dropdown-menu,
.navbar-nav:not(.sm-collapsible) .dropdown-menu,
.navbar-nav:not(.sm-collapsible) .dropdown-menu .dropdown-menu {
  background: rgba(0,0,0,.5) !important;
  border: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important; /* hindra att border-box "mörkar" kanter */
}

/* Items: transparent så de alltid visar 50%-bakgrunden (röd på hover) */
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-menu .dropdown-item,
.navbar .dropdown-item,
.navbar .dropdown-item:link,
.navbar .dropdown-item:visited,
.navbar .dropdown-item:focus,
.navbar .dropdown-item:active,
.navbar .dropdown-item.active {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}

.navbar .dropdown-item:hover {
  background: #e50914 !important;
  color: #fff !important;
}

/* Divider */
.navbar .dropdown-divider { 
  border-top: 1px solid #222 !important; 
  margin: 0 !important; 
}

/* Mobil: fullbredd + nollställd container-padding */
@media (max-width: 991.98px){
  .navbar .container { 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
  }
  .navbar .dropdown-menu { 
    left: 0 !important; 
    right: 0 !important; 
    width: 100vw !important; 
    margin: 0 !important; 
    border-radius: 0 !important; 
  }
}

/* Submenyer ska INTE ha egen bakgrund */
.navbar .dropdown-menu .dropdown-menu,
.navbar .dropdown-menu .dropdown-menu.show{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* === TVINGA ALLA MENYER ATT ÖPPNA NEDÅT (NYA REGLER) === */

/* Tvinga SmartMenus att behandla alla menyer som vertikala (nedåt) */
.navbar-nav.sm .dropdown-menu {
  position: static !important;
  float: none !important;
  width: auto !important;
  margin-top: 0 !important;
  background-color: rgba(0,0,0,.5) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* På desktop: tvinga alla submenyer att också öppna nedåt istället för åt höger */
@media (min-width: 992px) {
  /* Huvudmenyer - öppna nedåt */
  .navbar-nav.sm > li > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    min-width: 200px !important;
  }
  
  /* Submenyer - tvinga även dessa att öppna nedåt istället för åt höger */
  .navbar-nav.sm .dropdown-menu .dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding-left: 20px !important; /* indentering för att visa hierarki */
  }
  
  /* Ta bort alla transform/positioning som SmartMenus använder för högermenyer */
  .navbar-nav.sm .dropdown-menu .dropdown-menu {
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* Extra säkerhet: ta bort eventuella SmartMenus-specifika klasser som styr riktning */
.navbar-nav.sm-horizontal .dropdown-menu .dropdown-menu {
  position: static !important;
  float: none !important;
  left: auto !important;
  margin-left: 0 !important;
  padding-left: 20px !important;
}

/* === TOGGLE-FUNKTIONALITET FÖR SUBMENYER === */

/* === SUBMENY-FUNKTIONALITET FÖR UL/LI STRUKTUR === */

/* Fixa styling för UL/LI dropdown struktur */
.dropdown-menu ul.dropdown-menu {
  background: rgba(0,0,0,.5) !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* === SUBMENY POSITIONERING === */
.dropdown-submenu {
  position: relative;
}

/* Göm submenyer som standard */
.dropdown-submenu > .dropdown-menu,
.dropdown-submenu > ul.dropdown-menu {
  display: none !important;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: -1px;
  min-width: 160px;
}

/* === HOVER-AKTIVERING === */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:hover > ul.dropdown-menu {
  display: block !important;
}

/* === MOBIL-ANPASSNING === */
@media (max-width: 991.98px) {
  /* På mobil: visa submenyer nedåt istället för åt höger */
  .dropdown-submenu > .dropdown-menu,
  .dropdown-submenu > ul.dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin-top: 0 !important;
    padding-left: 20px !important; /* indentering för att visa hierarki */
    width: 100% !important;
    box-shadow: none !important;
  }
  
  /* På mobil: använd click istället för hover */
  .dropdown-submenu:hover > .dropdown-menu,
  .dropdown-submenu:hover > ul.dropdown-menu {
    display: none !important;
  }
  
  /* Visa när användaren klickar (kräver JavaScript) */
  .dropdown-submenu.active > .dropdown-menu,
  .dropdown-submenu.active > ul.dropdown-menu {
    display: block !important;
  }
}

/* === SMOOTH ÖVERGÅNGAR (ENDAST DESKTOP) === */
@media (min-width: 992px) {
  .dropdown-submenu > .dropdown-menu,
  .dropdown-submenu > ul.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    transform: translateX(-10px);
  }
  
  .dropdown-submenu:hover > .dropdown-menu,
  .dropdown-submenu:hover > ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

/* === PILAR OCH INDIKATORER === */
/* Ta bort alla pilar för submenyer */
.dropdown-submenu > a.dropdown-item::after {
  content: none;
}

@media (max-width: 991.98px) {
  .dropdown-submenu > a.dropdown-item::after {
    content: none;
  }
}

/* === Z-INDEX FÖR ÖVERLAPPNING === */
.dropdown-submenu > .dropdown-menu,
.dropdown-submenu > ul.dropdown-menu {
  z-index: 1050; /* Högre än huvudmenyn */
}

/* === SÄKERHET: Ta bort eventuella konflikter === */
.dropdown-menu .dropdown-menu {
  transition: none !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ta bort show/aria-expanded regler som kan konfliktera */
.dropdown-item.show + .dropdown-menu,
.dropdown-item[aria-expanded="true"] + .dropdown-menu {
  /* Ta bort dessa regler - de passar inte hover-baserad submeny */
}
#main-menu .sub-arrow,
span.sub-arrow {
  display: none !important;
}