/* =========================================================
   BOARD GAME SOCIETY STYLING
   ========================================================= */

:root {
    color-scheme: dark;

    /* Bakgrundsfärg till udda och jämna sektioner */
    --bg-dark:     #050a22;          /* Bas: väldigt mörk grå-svart med minimal blå */
    --bg-darker:   #030711;          /* Alternerande: ännu mörkare, nästan ren svart */
    
    --panel:       #0b0f22;          /* Paneler: lite ljusare än bg för att sticka ut subtilt */
    
    /* Text & övrigt – behålls för kontrast */
    --text:        #e9e9e9;
    
    /* Bootstrap-färger */
    --bs-primary:       #ed2568;
    --bs-primary-rgb:   237, 37, 104;
    --bs-secondary:     #c9c9c9;
    --bs-secondary-rgb: 201, 201, 201;
    
    --bs-body-bg:       var(--bg-dark);
    --bs-body-color:    var(--text);
    
    --bs-border-color: #161830;
    
    --bs-link-color:       #c51d54;
    --bs-link-hover-color: #ed2568;
    
    --bs-secondary-color: #8c8c8c;
    --bs-muted-color:     #8c8c8c;

}


html {
  scrollbar-gutter: stable; /* Säkerställ att navbaren inte hoppar till när man öppnar modal screens */
  scroll-behavior: smooth;  /* Använder mjuk scrollning */
}


/* Säkerställ att vanliga text-element följer --bs-body-color */
body {
    color: var(--bs-body-color);
}

.text-muted {
    color: var(--bs-secondary-color) !important;
}

.text-gold {
    color:#D9BA8F
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

@font-face {
  font-family: "Deep Horror";
  src: url("../fonts/TheDeepHorror.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
    font-size: 104%;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, a, .display-5 {
    font-family: "Deep Horror", Cinzel, serif;
    letter-spacing: .01em;
}



/*  Mouseover effekt till knappar & logo */

.mouseover-zoom {
    display: block;
    transition: transform 0.5s ease;
}

.mouseover-zoom:hover {
    transform: scale(1.1);
}


/* Primära knappar */
.btn-primary {
    --bs-btn-color: #fff;

    /* Bootstrap button variables */
    --bs-btn-bg: #c51d54;
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-bg: #ed2568;
    --bs-btn-hover-border-color: #ec427b;

    --bs-btn-active-bg: #f54a85;           
    --bs-btn-active-border-color: #f5528b;

    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Sekundära knappar som outline */
.btn-outline-light {
    --bs-btn-color: #fff;

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255,255,255,0.2);
    --bs-btn-hover-border-color: rgba(255,255,255);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255,255,255,0.4);
    --bs-btn-active-border-color: #fff;

    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}


/* =========================================================
   SECTIONS / PANELS
   ========================================================= */

.section { padding: 80px 0 }

.panel {
    background: var(--panel);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--bs-border-color);
}

/* Alternerande bakgrunder för sektioner */
.section-odd {
    background-color: var(--bg-dark);
}

.section-even {
    background-color: var(--bg-darker);
}

.feature-card { height: 100% }

/* =========================================================
   HERO – sekvenserad fade-in
   ========================================================= */

.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg);
}

/* Bakgrundsbild – fade:ar in först */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../hero/hero-bg.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: bgFadeIn 1.2s ease-out forwards;                      /* Background Fade-in */
    animation-delay: 1.6s;
    z-index: 0;
}

/* Mörk overlay – justera opacity efter behov */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.35) 40%,
        rgba(0,0,0,.75)
    );
    z-index: 1;
}

/* Hero-innehåll wrapper */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Loggan kommer tidigt */
.hero-logo {
    opacity: 0;
    transform: translateY(40px);
    animation: contentFadeUp 1.1s ease-out forwards;                /* Logo Fade-in */
    animation-delay: 0.1s;
    display: block;
    margin: 0 auto;
    width: clamp(320px, 35vw, 480px);
}


/* Knapparna kommer senare */
.hero-buttons {
    opacity: 0;
    transform: translateY(30px);
    animation: contentFadeUp 1.1s ease-out forwards;               /* CTA-knappar Fade-in */
    animation-delay: 2.7s;                                      
}

/* Keyframes för fade + uppåtrörelse */
@keyframes bgFadeIn {
    to { opacity: 1; }
}

@keyframes contentFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   NAVBAR – fade:ar in efter hero-knapparna
   ========================================================= */

#mainNav {
    background: transparent;
    opacity: 0;
    transform: translateY(-30px);
    animation: navFadeIn 1.0s ease-out forwards;
    animation-delay: 2.2s;                                        /* Navbar Fade-in */
    transition: all .35s ease;  /* enbart för scrolled-effekten */
    padding: 20px 0;
}

@keyframes navFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mainNav .navbar-brand {
    color: #fff;
    font-weight: 800;
    letter-spacing: .08em;
}

#mainNav .nav-link {
    color: #e6e6e6;
    font-weight: 400;
    letter-spacing: .05em;
    transition: color .2s ease;
}

#mainNav .nav-link:hover {
    color: var(--bs-primary);
}

#mainNav.scrolled {
    background: rgba(8,9,15,.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 25px rgba(0,0,0,.35);
    padding: 10px 0;
}

#mainNav.scrolled .navbar-brand img {
    height: 64px;
    max-height: 100%;
}

/* ────────────────────────────────────────────────
   Dropdown-menyn – ALLTID solid bakgrund (fixar transparens-problemet)
   ──────────────────────────────────────────────── */
#mainNav .dropdown-menu {
    background-color: var(--panel);               /* #0b0f22 – mörk panel-färg, matchar resten */
    border: 1px solid var(--bs-border-color);     /* #161830 – subtil kant */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);       /* ger "flytande" effekt över hero-bilden */
    margin-top: 0.25rem;                          /* lite avstånd under nav-länken */
}

/* Text och hover i dropdown */
#mainNav .dropdown-item {
    color: var(--text);                           /* #e9e9e9 – ljus text */
}

#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus,
#mainNav .dropdown-item:active {
    background-color: rgba(var(--bs-primary-rgb), 0.15); /* subtil rosa hover */
    color: #fff;
}

/* Extra snyggt: glassmorphism / blur på dropdown (valfritt men väldigt modernt) */
#mainNav .dropdown-menu {
    background-color: rgba(11, 15, 34, 0.94);     /* lite mer opak än navbaren scrolled */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* För mobil – säkerställ att collapse-menyn också får bakgrund */
@media (max-width: 1399px) {
    .navbar-collapse {
        background-color: var(--panel);           /* samma mörka bakgrund på mobil-meny */
        padding: 1rem;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    }

    .collapsing {
        transition: none !important;
    }

    .navbar-collapse.show .navbar-nav {
        justify-content: end;
        text-align: right;
        padding-right: 1rem;
    }
}

/* Övriga navbar-stilar (oförändrade) */
.navbar-right {
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.navbar-right .btn {
    flex-shrink: 0;
}

.navbar-right .btn-light {
    --bs-btn-padding-y: 0.1rem;
    --bs-btn-padding-x: 0.2rem;
    --bs-btn-font-size: 0.875rem;
}

/* =========================================================
   TRAILER & SCREENSHOTS
   ========================================================= */



/*  Screenshots */
.media-grid img {
    border: 3px solid transparent;  /* Initial kant för att undvika skift */
    transition: all 0.3s ease;      /* Samma som team-avatarer */
    cursor: pointer;                /* Visar att det är klickbart */
}

.media-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    border-color: var(--bs-primary);  /* Rosa kant som på team-avatarer */
}


/* =========================================================
   GALLERY MODAL SCREEN
   ========================================================= */

/* Gör modal-body större och ta bort padding */
#galleryModal .modal-body {
  padding: 0;
  overflow: hidden;          /* Förhindrar scrollbars om bilden är stor */
}

/* Close-knapp högre upp och lite större/vit */
#galleryModal .modal-header {
  position: absolute;
  top: 8px;                  /* Högre upp – testa 4px–12px beroende på smak */
  right: 12px;
  z-index: 10;
  padding: 0;
  border: none;
}

#galleryModal .btn-close {
  filter: brightness(0) invert(1);  /* Gör den vit om den inte redan är */
  opacity: 0.6;
  width: 2.5rem;             /* Lite större för bättre touch */
  height: 2.5rem;
  background-size: 40%;      /* Lite större ikon */
  transition: opacity 0.25s;
}

#galleryModal .btn-close:hover {
  opacity: 1;
}

/* Pilarna – flytta dem närmare kanterna */
#galleryModal .carousel-control-prev,
#galleryModal .carousel-control-next {
  width: 5%;                 /* Smalare zon → pilen hamnar närmare kanten */
  opacity: 0.6;
  transition: opacity 0.25s;
}

#galleryModal .carousel-control-prev:hover,
#galleryModal .carousel-control-next:hover {
  opacity: 1;
}

/* Centrera ikonerna vertikalt bättre */
#galleryModal .carousel-control-prev-icon,
#galleryModal .carousel-control-next-icon {
  width: 5rem;
  height: 5rem;
  background-size: 60%, 100%; /* Lite större pilar */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)); /* Skugga för bättre synlighet */
}

/* Extra: Gör bilden centrerad och maxhöjd för att inte bli för stor på små skärmar */
#galleryModal #modalMainImage {
  max-height: 90vh;          /* Passar bra på de flesta skärmar */
  object-fit: contain;       /* Behåller proportioner utan beskärning */
  margin: 0 auto;
}

/* Förhindra Bootstrap från att addera padding-right på body när modal öppnas */
.modal-open {
  padding-right: 0 !important;
}



/* =========================================================
   JETEBRA GAMES & TEAM Section 
   ========================================================= */

.jetebra-games-logo{
    display: block;
    margin: 0 auto;
    width: clamp(320px, 35vw, 400px);
}


.team-avatar {
    width: 240px;                    /* bredd */
    height: 300px;                   /* höjd */
    object-fit: cover;               /* beskär snyggt om bilden inte matchar exakt */
    border: 3px solid var(--bs-border-color);
    border-radius: 24px;             /* ger oval känsla; öka till 40-50px för mer avrundat */
    margin-bottom: 1.5rem;           /* lite mer luft under bilden */
    background-color: var(--panel);  /* fallback */
    transition: all 0.3s ease;
    display: block;
    margin-left: auto;
    margin-right: auto;              /* centrerar bilden */
}

/* Hover-effekt */
.feature-card:hover .team-avatar {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    border-color: var(--bs-primary);  /* rosa kant vid hover */
}

/* =========================================================
   JOIN US - Sektionen
   ========================================================= */

   .join-us-logo{
    display: block;
    margin: 0 auto;
    width: clamp(320px, 35vw, 480px);
}

/* =========================================================
   ÖVRIG STYLING
   ========================================================= */

/* TEXTMARKERINGSFÄRG */
::selection {
    background-color: #ed2568; /* bakgrundsfärg */
    color: white;              /* textfärg */
}

/* För webkit-baserade webbläsare (Safari, Chrome) */
::-webkit-selection {
    background-color: #ed2568;
    color: white;
}


.gif {
    background: #0c1028;           
    border-radius: 12px;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8c8c8c;
    border: 1px solid #11152e;
}

.media-grid img {
    border-radius: 12px;
    width: 100%;
    height: auto;
}

.character {
    transition: transform .15s ease, box-shadow .15s ease;
}

.character:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.press a { margin: .25rem }

.btn:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.4);
}


/* =========================================================
   FOOTER
   ========================================================= */

/*  Border till footer-sektionen */

.footer {
    border-top: 1px solid rgba(13, 3, 41, 0.04);
}

/* Vanliga länkar  --- OBS ANVÄNDER INTE JUST NU  ---  */
.footer-link {
    font-family: 'Inter', sans-serif; 
    color: #E9E9E9; 
    text-decoration: none; /* tar bort understrykning som default */
    transition: color 0.5s ease, text-decoration 0.5s; /* mjukare övergång på hover-effekt */
}

/* Hover-effekt */
.footer-link:hover {
    color: #fff; /* vit färg på hover */
}