/* ==========================================================================
   1. TYPSNITT & GLOBALA VARIABLER
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

:root {
    --cassiopeia-color-primary: #141e30 !important;
    --cassiopeia-color-hover: #243b55 !important;
}

/* Global box-sizing för stabil layoutberäkning */
*, *::before, *::after {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   2. HEADER, VM-GRADIENT MED AUTENTISKA VATTENSTÄMPLAR & SPORTTEXTUR
   ========================================================================== */

/* Rikta gradienten, sporttexturen och kultursymbolerna mot huvudbehållaren */
.container-header {
    position: relative !important;
    background-color: #060a12 !important; /* Ytterligare fördjupad bas för att få symbolerna att poppa */
    background-image: 
        /* LAG 1 (ÖVERST): Knivskarpt sport-mesh (Kolfiber/Linjenät) */
        linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
        
        /* LAG 2: VATTENSTÄMPEL MEXIKO (Autentiskt Aztekiskt solmönster till vänster) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.12'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23ffffff' stroke-width='0.75' stroke-dasharray='1,1'/%3E%3Cpath d='M50 2v96M2 50h96M16 16l68 68M16 84l68-68' stroke='%23ffffff' stroke-width='0.75'/%3E%3Cpolygon points='50,35 53,45 65,45 55,52 58,65 50,57 42,65 45,52 35,45 47,45' fill='%23ffffff'/%3E%3C/svg%3E"),
        
        /* LAG 3: VATTENSTÄMPEL KANADA (Det officiella, kurvade elvapunkt-lönnlövet i mitten) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.09'%3E%3Cpath fill='%23ffffff' d='M50,90 L47,63 L34,67 L38,55 L22,54 L29,43 L12,37 L30,28 L27,15 L43,26 L50,5 L57,26 L73,15 L70,28 L88,37 L71,43 L78,54 L62,55 L66,67 L53,63 Z M50,60 L50,90' stroke='%23ffffff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"),
        
        /* LAG 4: VATTENSTÄMPEL USA (Amerikansk heraldisk örn med detaljerade vingar till höger) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.10'%3E%3Cpath fill='%23ffffff' d='M50,25 C48,20 46,23 44,25 C40,23 37,25 35,29 C30,30 25,28 20,31 C10,36 3,50 2,62 C6,61 10,56 14,53 C12,58 13,64 16,68 C19,65 22,60 25,56 C24,62 26,69 31,73 C33,69 35,63 36,57 C39,63 42,68 45,71 C47,73 48,77 50,80 C52,77 53,73 55,71 C58,68 61,63 64,57 C65,63 67,69 69,73 C74,69 76,62 75,56 C78,60 81,65 84,68 C87,64 88,58 86,53 C90,56 94,61 98,62 C97,50 90,36 80,31 C75,28 70,30 65,29 C63,25 60,23 56,25 C54,23 52,20 50,25 Z M50,32 L47,40 L50,45 L53,40 Z'/%3E%3C/svg%3E"),
        
        /* LAG 5 (BOTTEN): VM-gradienten (Djupt mexikansk grön -> Kanadensisk röd -> Amerikansk marinblå) */
        linear-gradient(135deg, #072215 0%, #113328 25%, #660000 55%, #051221 100%) !important;
        
    /* Storlekshantering för respektive lager */
    background-size: 
        6px 6px, 6px 6px,     /* Din perfekta, täta sporttextur */
        110px 110px,          /* Aztek-solen */
        95px 95px,          /* Det nya lönnlövet */
        110px 110px,          /* Den nya örnen */
        100% 100% !important; /* Gradienten i botten */
        
    /* Exakt placering över bannern */
    background-position: 
        0 0, 3px 3px,         /* Sporttexturen förskjuten för diagonalsnärt */
        8% 50%,               /* Aztek till vänster */
        50% 45%,              /* Lönnlövet perfekt centrerat */
        90% 50%,              /* Örnen stolt till höger */
        0 0 !important;       /* Gradienten sträcker sig helt ut */        
        
    /* INDIVIDUELL REPETITION */
    background-repeat: 
        repeat, repeat,       
        no-repeat,            
        no-repeat,            
        no-repeat,            
        no-repeat !important; 
}

/* Nollställ Cassiopeias inbyggda bakgrund på elementen inuti */
.container-header .navbar,
.container-header .grid-child {
    background: none !important;
    background-color: transparent !important;
}

/* Ger toppområdet andningsrum */
.header, .container-header {
    padding-top: 15px !important; 
    padding-bottom: 15px !important;
}

/* Nollställ eventuella dolda bakgrunder på själva textblocken */
.header-intro-text,
.header .site-title,
.header .navbar-brand {
    background: transparent !important;
    background-color: transparent !important;
}

/* Introduktionstext - Montserrat med skugga på alla nivåer (Purity-sportlook) */
.header-intro-text,
.header-intro-text *,
.header .site-title, 
.header .navbar-brand {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 34px !important;
    text-transform: uppercase !important; 
    font-weight: bold !important;          
    font-style: italic !important;         
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.95) !important;
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8)) !important;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8)) !important;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Säkerställ stil på eventuell inbyggd länk i sajttiteln */
.header .navbar-brand a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 34px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-style: italic !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) !important;
}

/* Responsiv länkstil för introduktionstext vid hovring */
.header-intro-text a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.9;
}


/* ==========================================================================
   3. BALANSERING & MAFFIG PURITY-TVINGARE FÖR HUVUDMENYN
   ========================================================================== */

/* Tvinga behållaren inuti headern att lägga elementen på en rak vågrät rad */
.container-header .grid-child,
.container-header > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important; /* Håller logotext och menylänkar på samma basrad */
    justify-content: space-between !important;

  /* FLYTT-VERKTYGET: Denna rad trycker ner både text och meny exakt 6 pixlar */
    transform: translateY(25px) !important;
}

/* Finjustering av själva introduktionstexten */
.header-intro-text {
    margin-bottom: 0 !important;
    margin-right: 50px !important;    
    padding-top: 0 !important;
}

/* Nollställ Cassiopeias standardmarginaler på menyn */
.container-header .navbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* KROSSA ALLA INTERNA FÄRGVARIABLER FÖR LÄNKAR I HEADERN */
.container-header {
    --awb-menu-color: #ffffff !important;
    --cassiopeia-menu-link-color: #ffffff !important;
}

/* ULTIMAT JÄRNKROK FÖR ATT FORMA MENYLÄNKAR OCH SPANS (BÅDE MOBILT & DATOR) */
.container-header .mod-menu .nav-item a,
.container-header .mod-menu .nav-item span,
.container-header .navbar-nav .nav-link,
.container-header .navbar-nav .metismenu-link {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: #ffffff !important;                                      /* Exakt Purity-vit */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;          /* Din textskugga */
    font-weight: 500 !important;                                    /* Halvfet */
    text-transform: uppercase !important;                           /* VERSALER */
    padding: 10px 15px !important;                                  /* Mobilbas */
    line-height: 20px !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

/* Hovringseffekter som tvingar bort alla standardfärger */
.container-header .mod-menu .nav-item a:hover,
.container-header .mod-menu .nav-item span:hover,
.container-header .navbar-nav .nav-link:hover,
.container-header .navbar-nav .nav-link:focus {
    color: #e0e0e0 !important;                                      /* Lätt nedtonad vit vid hovring */
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* RESPONSIV HÖJD OCH LUFT FÖR STÖRRE SKÄRMAR (Från 991px och uppåt) */
@media screen and (min-width: 991px) {
    .container-header .mod-menu .nav-item a,
    .container-header .mod-menu .nav-item span,
    .container-header .navbar-nav .nav-link {
        padding: 0 20px !important;                                 /* Din exakta horisontella luft */
        line-height: 55px !important;                               /* Din exakta linjehöjd */
    }
}

/* ==========================================================================
   4. BRÖDTEXT & TYPOGRAFI (LÅST TILL FIXED PURITY-STORLEK)
   ========================================================================== */

body, 
.site-wrapper, 
main {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important; 
    line-height: 1.42857143 !important; 
    color: #444444 !important; 
}

p {
    font-size: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important; 
}

.card,
.com-content,
.module-ct,
.t3-module {
    color: inherit !important;
    font-size: 14px !important;
}

/* ==========================================================================
   5. RUBRIKER OCH MODULRUBRIKER (STALSTARK OCH BOLD)
   ========================================================================== */

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: bold !important;       
    line-height: 1.1 !important;        
    color: inherit !important;          
}

h1, .h1 { font-size: 24px !important; } 
h2, .h2 { font-size: 20px !important; } 
h3, .h3 { font-size: 16px !important; } 

h1, h2, h3, .h1, .h2, .h3 {
    margin-top: 15px !important;        
    margin-bottom: 8px !important;       
}

.card-title,
.module-title {
    background: transparent !important;
    font-size: 16px !important;     
    font-weight: bold !important;       
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

@media screen and (min-width: 768px) {
    .card-title,
    .module-title {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   6. FLIKAR OCH TABS (.nav-tabs)
   ========================================================================== */

.nav-tabs {
    list-style: none !important;
    border-bottom: 1px solid #dee2e6 !important; 
}

.nav-tabs .nav-link {
    position: relative !important;
    display: block !important;
    padding: 10px 15px !important; 
    margin-right: 2px !important;
    line-height: 1.42857143 !important;
    text-transform: uppercase !important; 
    border: 1px solid transparent !important;
    border-radius: 0 !important; 
    color: #0057b7 !important; 
    background-color: transparent !important;
    -webkit-transition: all 0.2s !important;
    transition: all 0.2s !important; 
}

/* --- BLÅGULA SPECIALFLIKAR (ALLA GRUPPER, MATCHER & PROFILER) --- */
.nav-tabs .nav-link[href="#all_games"],       .nav-tabs button[data-bs-target="#all_games"],
.nav-tabs .nav-link[href="#groupA"],          .nav-tabs button[data-bs-target="#groupA"],
.nav-tabs .nav-link[href="#groupB"],          .nav-tabs button[data-bs-target="#groupB"],
.nav-tabs .nav-link[href="#groupC"],          .nav-tabs button[data-bs-target="#groupC"],
.nav-tabs .nav-link[href="#groupD"],          .nav-tabs button[data-bs-target="#groupD"],
.nav-tabs .nav-link[href="#groupE"],          .nav-tabs button[data-bs-target="#groupE"],
.nav-tabs .nav-link[href="#groupF"],          .nav-tabs button[data-bs-target="#groupF"],
.nav-tabs .nav-link[href="#groupG"],          .nav-tabs button[data-bs-target="#groupG"],
.nav-tabs .nav-link[href="#groupH"],          .nav-tabs button[data-bs-target="#groupH"],
.nav-tabs .nav-link[href="#groupI"],          .nav-tabs button[data-bs-target="#groupI"],
.nav-tabs .nav-link[href="#groupJ"],          .nav-tabs button[data-bs-target="#groupJ"],
.nav-tabs .nav-link[href="#groupK"],          .nav-tabs button[data-bs-target="#groupK"],
.nav-tabs .nav-link[href="#groupL"],          .nav-tabs button[data-bs-target="#groupL"],
.nav-tabs .nav-link[href="#medals"],          .nav-tabs button[data-bs-target="#medals"],
.nav-tabs .nav-link[href="#goldenboot"],      .nav-tabs button[data-bs-target="#goldenboot"] {
    background: #0057B7 !important;
    color: #FFDD00 !important;
    border: 1px solid #0057B7 !important;
}

/* --- HOVRING & AKTIVT LÄGE --- */

/* Vanlig flik vid hovring */
.nav-tabs .nav-link:hover {
    color: #0056b3 !important;
    border-color: #eee #eee #dee2e6 !important;
    text-decoration: none !important;
    outline: none !important;
}

/* AKTIVT läge för SAMTLIGA blågula flikar */
.nav-tabs .nav-link[href="#all_games"].active,   .nav-tabs button[data-bs-target="#all_games"].active,
.nav-tabs .nav-link[href="#groupA"].active,      .nav-tabs button[data-bs-target="#groupA"].active,
.nav-tabs .nav-link[href="#groupB"].active,      .nav-tabs button[data-bs-target="#groupB"].active,
.nav-tabs .nav-link[href="#groupC"].active,      .nav-tabs button[data-bs-target="#groupC"].active,
.nav-tabs .nav-link[href="#groupD"].active,      .nav-tabs button[data-bs-target="#groupD"].active,
.nav-tabs .nav-link[href="#groupE"].active,      .nav-tabs button[data-bs-target="#groupE"].active,
.nav-tabs .nav-link[href="#groupF"].active,      .nav-tabs button[data-bs-target="#groupF"].active,
.nav-tabs .nav-link[href="#groupG"].active,      .nav-tabs button[data-bs-target="#groupG"].active,
.nav-tabs .nav-link[href="#groupH"].active,      .nav-tabs button[data-bs-target="#groupH"].active,
.nav-tabs .nav-link[href="#groupI"].active,      .nav-tabs button[data-bs-target="#groupI"].active,
.nav-tabs .nav-link[href="#groupJ"].active,      .nav-tabs button[data-bs-target="#groupJ"].active,
.nav-tabs .nav-link[href="#groupK"].active,      .nav-tabs button[data-bs-target="#groupK"].active,
.nav-tabs .nav-link[href="#groupL"].active,      .nav-tabs button[data-bs-target="#groupL"].active,
.nav-tabs .nav-link[href="#medals"].active,      .nav-tabs button[data-bs-target="#medals"].active,
.nav-tabs .nav-link[href="#goldenboot"].active,  .nav-tabs button[data-bs-target="#goldenboot"].active {
    background: #0057B7 !important; 
    color: #FFDD00 !important;      
    border-color: #0057B7 #0057B7 transparent !important; 
}

/* Aktivt läge för standardflikar (vit/grå) */
.nav-tabs .nav-link.active {
    color: #444444 !important; 
    background-color: #ffffff !important; 
    border-color: #dee2e6 #dee2e6 #ffffff !important; 
    border-radius: 0 !important;
}

/* ==========================================================================
   7. KNAPPAR OCH IKONER
   ========================================================================== */

.btn, 
button, 
input[type="button"], 
input[type="submit"] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;            
    line-height: 1.42857143 !important;    
    font-weight: normal !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border-radius: 0 !important;           
    text-transform: none !important;
    -webkit-transition: all 0.2s !important;
    transition: all 0.2s !important;       
}

.btn-primary,
.button-primary {
    color: #ffffff !important;             
    background-color: #0057b7 !important;  
    border-color: #0057b7 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff !important;
    background-color: #004494 !important;  
    border-color: #004494 !important;
}

/* --- FONT AWESOME 6-IKONER --- */
.fas, 
.fa-solid, 
.fa-regular,
[class^="icon-"], 
[class*=" icon-"] {
    font-weight: 900 !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin-right: 5px;                     
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.fa-check::before {
    content: "\f00c" !important;          
}

/* --- GAMLA ANPASSNINGAR (GULA MARKERINGAR) --- */
#tabset2 .all_games,
#tabset3 .goldenboot {
    background-color: yellow !important;
}

/* ==========================================================================
   PLOCKA BORT PILEN FRÅN SPRÅKVÄLJARENS DROPDOWN
   ========================================================================== */

/* Döljer standard-pilen som skapas via CSS (Bootstrap-standard) */
.mod-languages .dropdown-toggle::after,
.container-header .dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

/* Säkerställer att eventuellt inbyggt marginal-avstånd där pilen låg försvinner */
.mod-languages .dropdown-toggle,
.container-header .dropdown-toggle {
    padding-right: 0.5rem !important; /* Ger ett stramt och jämnt andningsrum */
}

.mod-whosonline ul {
    display: inline !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tvingar alla element i listan att ligga på rad */
.mod-whosonline ul li {
    display: inline !important;
}

/* ==========================================================================
   Diverse uppjazzade modulrubriker
   ========================================================================== */

.usa-block-title {
    color: #FFFFFF !important;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
    
    /* Ger texten en skarp skugga så att bokstäverna poppar ordentligt från ränderna */
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9);
    
    /* Det blå fältet till vänster (30%) med 75% opacitet (rgba) */
    background: 
        linear-gradient(to right, rgba(60, 59, 110, 0.75) 30%, transparent 30%),
        linear-gradient(
            to bottom,
            rgba(178, 34, 52, 0.75) 0%, rgba(178, 34, 52, 0.75) 14.2%,
            rgba(255, 255, 255, 0.75) 14.2%, rgba(255, 255, 255, 0.75) 28.4%,
            rgba(178, 34, 52, 0.75) 28.4%, rgba(178, 34, 52, 0.75) 42.6%,
            rgba(255, 255, 255, 0.75) 42.6%, rgba(255, 255, 255, 0.75) 56.8%,
            rgba(178, 34, 52, 0.75) 56.8%, rgba(178, 34, 52, 0.75) 71.0%,
            rgba(255, 255, 255, 0.75) 71.0%, rgba(255, 255, 255, 0.75) 85.2%,
            rgba(178, 34, 52, 0.75) 85.2%, rgba(178, 34, 52, 0.75) 100%
        );
    
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15); /* En subtil ljus kantlinje */
    
    /* Frostad glaseffekt: Suddar ut det som ligger bakom rubriken för maximal läsbarhet */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.usa-striped-title {
    font-weight: 900; /* Tjock text gör att ränderna syns mycket bättre */
    text-transform: uppercase;
    
    /* Skapar 7 skarpa ränder (röd, vit, röd, vit...) */
    background: linear-gradient(
        to bottom,
        #B22234 0%, #B22234 14.2%,
        #FFFFFF 14.2%, #FFFFFF 28.4%,
        #B22234 28.4%, #B22234 42.6%,
        #FFFFFF 42.6%, #FFFFFF 56.8%,
        #B22234 56.8%, #B22234 71.0%,
        #FFFFFF 71.0%, #FFFFFF 85.2%,
        #B22234 85.2%, #B22234 100%
    );
    
    /* Magin som trycker in bakgrunden i texten */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
    /* Valfritt: Lägg till en subtil skugga så att de vita ränderna syns mot ljus bakgrund */
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

.ukraine-block-title {
/*    color: #FFFFFF !important;*/
    padding: 10px 20px;
/*    font-weight: bold;
    text-transform: uppercase;*/
    
    /* Skarp skugga runt texten för maximal läsbarhet mot både gult och blått
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.85); */
    
    /* Vågrät gradient: Solid gul (33.3%), toning (33.3%-66.6%), solid blå (66.6%-100%) */
    background: linear-gradient(
        to right, 
        #FFD700 0%, #FFD700 25%, 
        #FFD700 25%, #0057B7 75%, 
        #0057B7 75%, #0057B7 100%
    );
    
    border-radius: 4px;
/*    border: 1px solid rgba(255, 255, 255, 0.15);*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ==========================================================================
   Hover-effekt till Resultat-tabellen
   ========================================================================== */

.ub-hover-cell {
    /* Mjuk övergång för ljusstyrka och skugga */
    transition: filter 0.1s ease-in-out, background-color 0.1s ease-in-out;
    cursor: help; /* Ändrat till ett frågetecken eftersom det är en infotext (title) som visas, inte en länk! */
}

.ub-hover-cell:hover {
    /* Gör bakgrunden och texten 15% ljusare så det syns tydligt i tabellen */
    filter: brightness(1.15);
    
    /* Ger cellen en subtil inre skugga för att markera den utan att flytta på tabellraden */
    background-color: rgba(255, 255, 255, 0.08); 
}