/* Ladda in typsnitt */
@import url('https://googleapis.com');

/* Phoca gallery photoswipe */
.pswp__bg {
    background: #fff;  /* Bakgrund ändrad */
}
/* ==========================================================================
   PHOCA GALLERY: DÖLJ SVG-IKONEN FRAMFÖR KATEGORINAMNET
   ========================================================================== */
/* Hittar och döljer den specifika SVG-kategoriikonen */
svg.ph-si-category,
svg.ph-si.ph-si-category,
.ph-si-category {
    display: none !important;
}

/* Valfritt: Om det blir ett litet tomt mellanrum till vänster om texten där ikonen satt */
.ph-category-title-container a, 
.ph-category-title {
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* Phoca Gallery undertitel galleribild */
.pswp__caption__center {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: #CCC;
}

/* ==========================================================================
   PHOCA GALLERY: CENTRERA KATEGORITITELN UNDER BILDEN
   ========================================================================== */
.pg-category-box-title,
div.pg-category-box-title {
    display: block !important;
    text-align: center !important; /* Centrerar text, länkar och spänner */
    width: 100% !important;
    margin: 5px auto 0 auto !important; /* Ger lite luft mellan bild och text */
    padding: 0 !important;
}

/* Säkerställer att länkarna inuti behållaren också flyter centrerat */
.pg-category-box-title a,
.pg-category-box-title span {
    display: inline-block !important;
    float: none !important; /* Tar bort eventuell vänsterjustering */
    text-align: center !important;
}

/* Centrera hela behållaren där bilderna laddas */
.container-component main, 
#phocagallery {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    /* text-align: center !important;*/
    float: none !important;
    width: 100% !important;
}

/* Tvinga raderna och bildboxarna att hålla sig i mitten */
#phocagallery .row, 
#phocagallery .pg-category-view,
.pg-category-view {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Säkerställ att inga äldre flytregler krockar */
#phocagallery [class*="col-"],
#phocagallery .phocagallery-box-file {
    float: none !important;
}



/* Artiklar och text */
/* Skapa en smal kolumn */
.smal-kolumn {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
/* login formuläret och profilsidan*/
.com-users-profile__edit, 
.com-users-profile, 
.com-users-login {
  max-width: 850px;
}

@media print {
  .custom-print-btn {
    display: none !important;
  }
}

@media print {
  /* Gömmer menyer, logotyp, sidofält, sökfält och sidfot */
  header, 
  footer, 
  .header, 
  .footer, 
  .sidebar, 
  .moduletable, 
  nav, 
  .navigation {
    display: none !important;
  }

  /* Gömmer själva utskriftsknappen på utskriften */
  button, 
  .btn {
    display: none !important;
  }

  /* Justerar huvudinnehållet så att det tar upp hela sidans bredd på papperet */
  main, 
  #content, 
  .site-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
}
/* Styling för ny utskriftsknapp */
.custom-print-btn {
  background-color: #fffffF; // #2b6cb0; /* Snygg blå färg (ändra till din egen färgkod om du vill) */
  color: #0f0f0f; /* Vit text */
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 15px 10px 0px 10px;
  border: none;
  border-radius: 6px; /* Ger runda, mjuka hörn */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px; /* Avstånd mellan ikonen och texten */
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lätt skugga under knappen */
  margin: -15px  3px -7px 3px;
}

/* Effekt när man hovrar över knappen */
.custom-print-btn:hover {
  background-color: #1a4373; /* Mörkare blå vid hovring */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Effekt när man klickar på knappen */
.custom-print-btn:active {
  transform: translateY(1px); /* Knappen trycks ner något */
}

/* Höja ikonen 2px */
/* Höjer Font Awesome-ikonen inuti utskriftsknappen */
.custom-print-btn .fa-print {
  position: relative;
  top: -7px; /* Negativt värde flyttar ikonen UPPÅT. Ändra till -3px eller -4px om den ska högre upp */
}





/* Ändrar typsnitt på hemsidan */
/* ==========================================================================
   STYLING FÖR AKTIV SIDA (Samma typsnitt och stil som menyn)
   ========================================================================== */
.current-page-notice,
.current-page-notice span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    text-transform: uppercase !important; /* Gör om titeln till stora bokstäver */
    font-size: 13px !important; /* Samma storlek som menytexten */
    letter-spacing: 2px !important; /* Samma lyxiga, glesa utseende */
    color: #ced4d9 !important; /* Behåller din ljusgrå/silverfärg från logoblocket */
    font-weight: 500 !important;
    display: inline-block !important;
    margin-top: 5px !important; /* Ger lite luft under huvudnamnet */
}



/* ==========================================================================
   FETSTIL FÖR AKTIVT MENYVAL (Både på dator och mobil)
   ========================================================================== */
.cai-menu-container li.current a,
.cai-menu-container li.active a,
.cai-menu-container .nav-item.current .nav-link,
.cai-menu-container .nav-item.active .nav-link,
#navbar1 li.current a,
#navbar1 li.active a {
    font-weight: 700 !important; /* Ändrar från 500 till 700 (fetstil) */
}

/* ==========================================================================
   MOBIL-SPECIFIK FIX: Fetstil för aktiv länk inuti rullgardinen
   ========================================================================== */
.cai-menu-container .navbar-collapse .nav-link.active,
.cai-menu-container .navbar-collapse a.active,
#navbar1.show .nav-link.active,
#navbar1.show a.active,
#navbar1.show .active a,
#mod-menu1 .active a {
    font-weight: 700 !important; /* Garanterar fetstil på mobilen */
}
/* ==========================================================================
   STYLING FÖR KLICKBAR LOGOTEXT
   ========================================================================== */
.cai-logo-container a {
    text-decoration: none !important; /* Tar bort det fula strecket under namnet */
    color: inherit !important; /* Tvingar länken att behålla din valda färg */
    display: inline-block !important;
}

/* Valfritt: Ger en subtil effekt när man håller muspekaren över namnet */
.cai-logo-container a:hover {
    opacity: 0.7 !important;
}

/* ==========================================================================
   TA BORT SKUGGOR OCH RAMAR RUNT FLAGGORNA
   ========================================================================== */
/* Tar bort skuggor, bakgrunder och ramar från länkarna och listpunkterna */
.cai-flags-container a,
.cai-flags-container li,
.cai-flags-container .mod-languages a,
.cai-flags-container .mod-languages img {
    box-shadow: none !important;
    filter: none !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Dubbelkollar att webbläsarens inbyggda rendering för bilder inte lägger till en dyster skugga */
.cai-flags-container img, 
.mod-languages__list img {
    box-shadow: 0 0 0 transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: drop-shadow(0 0 0 transparent) !important;
}

/* Gör den flagga som INTE är aktiv mer transparent (t.ex. 40% synlighet) */
.cai-flags-container ul.mod-languages__list li a img {
    opacity: 0.4 !important;
}

/* Tvingar den AKTIVA flaggans bild att vara helt opak (100% synlighet) */
.cai-flags-container ul.mod-languages__list li.lang-active a img {
    opacity: 1 !important;
}

/* Gör att flaggan lyser upp till 100% när man håller muspekaren över den (hover) */
.cai-flags-container ul.mod-languages__list li a img:hover {
    opacity: 1 !important;
}





/* ==========================================================================
   1. GEMENSAM REGLERING PÅ TEXT (Minimalistisk Sans-Serif enligt CAI)
   ========================================================================== */
.cai-menu-container .mod-menu a, 
.cai-menu-container .navbar-nav .nav-link,
.cai-menu-container a,
.navbar-collapse a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    color: #000000 !important; /* Tvingar fram kolsvart text */
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.cai-menu-container a:hover, 
.cai-menu-container .nav-link:hover {
    opacity: 0.5 !important;
    color: #000000 !important;
}

/* ==========================================================================
   2. REGLER ENBART FÖR DATORER (Skärmar fr.o.m. 992px)
   ========================================================================== */
@media (min-width: 992px) {
    /* Tvingar datorns header att ligga på en perfekt horisontell rad */
    header.header, 
    .header, 
    .container-header, 
    .site-grid,
    .grid-child.container-nav {
        display: flex !important;
        flex-direction: row !important; /* Flöde från vänster till höger */
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 15px 20px !important;
        grid-template-columns: none !important; /* Tar bort dolda rutnät */
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 1. LOGOTYPEN LÄNGST TILL VÄNSTER */
    .cai-logo-container {
        order: 1 !important;
        margin-right: auto !important; /* Skjuter ut menyn och flaggorna till höger */
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }

    /* Samlar navigeringen och flaggorna till högerkanten */
    .grid-child.container-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 40px !important;
    }

    /* 2. MENYN PLACERAS I MITTEN (TILL HÖGER OM LOGGAN) */
    .cai-menu-container {
        order: 2 !important;
        margin: 0 !important;
    }

    /* 3. SPRÅKFLAGGORNA ABSOLUT LÄNGST TILL HÖGER */
    .cai-flags-container {
        order: 3 !important;
    }

    /* Nollställer alla bakgrunder och fula färgstaplar på datorn */
    .cai-menu-container .navbar,
    .cai-menu-container .navbar-collapse,
    .cai-menu-container .collapse,
    .collapse {
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        flex-basis: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: flex-end !important;
    }

    /* Lägger menyalternativen (HOME, GALLERY) horisontellt på rad */
    .cai-menu-container ul.mod-menu, 
    .cai-menu-container .navbar-nav,
    .cai-menu-container ul,
    #mod-menu1 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 25px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cai-menu-container li {
        display: inline-block !important;
        width: auto !important;
    }

    /* Döljer mobilknappen i datorläge */
    .navbar-toggler, button.navbar-toggler, .icon-menu {
        display: none !important;
    }
}

/* ==========================================================================
   3. REGLER ENBART FÖR MOBIL (Skärmar under 992px - FIXAR PLACERINGEN)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Staplar blocken vertikalt under varandra */
    header.header, 
    .header, 
    .container-header, 
    .site-grid,
    .grid-child.container-nav,
    .container-nav {
        display: flex !important;
        flex-direction: column !important; /* Staplar blocken vertikalt */
        align-items: center !important; /* Centrerar elementen */
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 0 5px 0 !important;
        margin: 0 !important;
        gap: 15px !important;
        grid-template-columns: none !important;
        background: transparent !important;
        box-shadow: none !important;
        position: relative !important; /* Ger en fast bas för rullgardinen */
    }

    /* Tvingar logotypen att ligga helt centrerat överst */
    .cai-logo-container, 
    div.cai-logo-container {
        order: 1 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Lägger flaggor och hamburgare på en centrerat rad under loggan */
    .grid-child.container-nav {
        order: 2 !important;
        flex-direction: row !important;
        gap: 35px !important; /* Avstånd mellan flaggor och hamburgarknapp */
        width: 100% !important;
        justify-content: center !important;
    }

    /* Tvingar menymodulens behållare att ha full bredd på mobilen */
    .cai-menu-container {
        order: 2 !important;
        margin: 0 !important;
        width: 100% !important; /* Gör att den sträcker sig över skärmen */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .cai-flags-container {
        order: 1 !important; /* Lägger flaggorna till vänster om hamburgaren */
        margin: 0 !important;
        width: auto !important;
    }

    /* Tvingar fram mobilknappen */
    .navbar-toggler, 
    button.navbar-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 5px !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    /* Gör din unika ikon ("icon-menu") svart och tydlig */
    .cai-menu-container .icon-menu,
    .navbar-toggler .icon-menu {
        color: #000000 !important;
        font-size: 26px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Döljer rullgardinen helt i stängt läge */
    .cai-menu-container .navbar-collapse:not(.show),
    .cai-menu-container .collapse:not(.show) {
        display: none !important;
    }

    /* FIXAT UTANFÖR BILD: Den öppna mobilmenyn låses till mitten av skärmen */
    .cai-menu-container .navbar-collapse.show,
    #navbar1.show,
    .navbar-collapse.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        
        /* Centrerar rullgardinen perfekt utan att den flyger utanför till höger */
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* Drar tillbaka den till absolut center */
        width: 100vw !important; /* Sträcker ut sig exakt till skärmens bredd */
        max-width: 100vw !important;
        background-color: #ffffff !important; /* Ren, helvit bakgrund */
        
        /* SKAPAR RAMEN: Tunna svarta linjer över och under enligt CAI-galleriet */
        border-top: 1px solid #000000 !important;
        border-bottom: 1px solid #000000 !important;
        
        padding: 20px 0 !important;
        margin-top: 15px !important;
        z-index: 99999 !important;
    }

    /* Centrerar länklistan inuti den öppnade rullgardinen */
    .cai-menu-container .navbar-collapse.show ul,
    #navbar1.show ul,
    #navbar1.show ul#mod-menu1,
    .navbar-collapse.show ul {
        display: flex !important;
        flex-direction: column !important; /* Lägger länkarna under varandra */
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .cai-menu-container .navbar-collapse.show li,
    #navbar1.show li,
    .navbar-collapse.show li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    /* Tvingar fram synlighet och klickbarhet på länkarna i mitten av skärmen */
    .cai-menu-container .navbar-collapse.show a,
    #navbar1.show a,
    .navbar-collapse.show a {
        color: #000000 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important; /* Håller texten i mitten */
    }
}

/* Mobil-inställningar (Under 992px) */
@media (max-width: 991px) {
    /* Dölj undermenyn som standard */
    li.metismenu-item.level-1.parent > ul.mm-collapse {
        display: none !important;
        position: static !important;
        width: 100% !important;
    }

    /* Visa undermenyn när föräldern klickas/får fokus */
    li.metismenu-item.level-1.parent:focus-within > ul.mm-collapse {
        display: block !important;
    }
}

/* Desktop-inställningar (Över 992px) */
@media (min-width: 992px) {
    li.metismenu-item.level-1.parent:hover > ul.mm-collapse {
        display: block !important;
    }
}

/* 2026-06-09 */
/* --- 1. Positionera text till vänster och pil till höger --- */
li.metismenu-item.level-1.parent {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: space-between !important;
}

li.metismenu-item.level-1.parent > a {
    order: 1 !important;
    flex: 1 !important;
    width: auto !important;
}

li.metismenu-item.level-1.parent > button.mm-toggler {
    order: 2 !important;
    margin-left: auto !important;
}

/* --- 2. Dölj undermenyn som standard --- */
body li.metismenu-item.level-1.parent > ul.mm-collapse {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    order: 3 !important; /* Hamnar under länk/pil */
    width: 100% !important;
}

/* --- 3. Visa undermenyn vid hover --- */
body li.metismenu-item.level-1.parent:hover > ul.mm-collapse {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

/* 1. Ta bort understrykningen (både vanlig och dekorativ) */
li.metismenu-item.level-1 > a,
li.metismenu-item.level-1 > a::after,
li.metismenu-item.level-1 > a::before {
    text-decoration: none !important;
    border-bottom: none !important;
    content: none !important; /* Tar bort den dekorativa linjen */
    display: none !important; /* Säkerställer att linjen försvinner */
}

/* 2. Återställ länkens display så den syns (eftersom vi döljer pseudo-element ovan) */
li.metismenu-item.level-1 > a {
    display: block !important;
}

/* 3. Lägg till fetstil på aktuellt/aktivt val och vid hover */
li.metismenu-item.level-1.active > a,
li.metismenu-item.level-1.current > a,
li.metismenu-item.level-1.parent:hover > a {
    font-weight: bold !important;
}

/* --- TOTAL FÄRG- OCH VIKTFIX --- */

/* 1. Tvinga ALLA lägen att vara kolsvarta och utan animering */
/* Detta stoppar att texten blir "grå" vid direkt hover */
html body .container-header .metismenu .metismenu-item a,
html body .container-header .metismenu .metismenu-item a:hover,
html body .container-header .metismenu .metismenu-item:hover a,
html body .container-header .metismenu .metismenu-item.active a {
    color: #000000 !important;
    opacity: 1 !important;
    transition: none !important; /* Stoppar att färgen tonar till grått */
    text-decoration: none !important;
}

/* 2. Tvinga 700 vikt för både hovrat och aktivt läge */
html body .container-header .metismenu .metismenu-item:hover > a,
html body .container-header .metismenu .metismenu-item > a:hover,
html body .container-header .metismenu .metismenu-item.active > a {
    font-weight: 700 !important;
}

/* 3. Grundvikt 400 för de man inte pekar på */
html body .container-header .metismenu .metismenu-item > a {
    font-weight: 400;
}

/* 4. Ta bort linjer */
.container-header .metismenu a::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   4. SPRÅKFLAGGOR INSTÄLLNINGAR (Horisontella på rad)
   ========================================================================== */
.cai-flags-container ul.mod-languages__list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
}

/* 2026-05-24 Göm undernivån som standard på datorskärmar */
/* Gäller endast för datorskärmar (från 992px och uppåt) */
@media (min-width: 992px) {
    
    /* Göm den lilla pil-knappen bredvid "OM" på datorn */
    .metismenu-item .mm-toggler {
        display: none !important;
    }

    /* Gör huvudvalet (OM) till startpunkt för dropdown-rutan */
    .metismenu-item.parent {
        position: relative !important;
    }

    /* Tvinga undermenyn (CV) att dölja sig som standard på datorn */
    .metismenu-item .mm-collapse {
        display: none !important;
        height: auto !important; /* Återställer MetisMenus JavaScript-höjd */
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 180px !important;
        background-color: #ffffff !important;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.15) !important;
        z-index: 1000 !important;
        padding: 10px !important;
        list-style: none !important;
    }

    /* Visa undermenyn ENBART när man håller muspekaren över huvudvalet (OM) */
    .metismenu-item.parent:hover .mm-collapse {
        display: block !important;
    }

    /* Se till att undermenyns länkar (t.ex. CV) visas korrekt inuti rutan */
    .metismenu-item .mm-collapse .metismenu-item {
        display: block !important;
        width: 100% !important;
        padding: 5px 10px !important;
    }
}