/*-- scss:defaults --*/


// Fonts
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,550;1,400&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Roboto+Condensed:ital,wght@0,300;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');
$toc-font-size: 11.5px;
$sidebar-font-size: 14px;

// Toc

$toc-color: #00495D;

// Sidebar
$sidebar-bg: white;
$sidebar-hl: #ED6A55;

// Titles
$h1-font-size: 20pt;
$h2-font-size: 16pt;
$h3-font-size: 14pt;
$h4-font-size: 12pt;
$h5-font-size: 11pt; // Exempelvärde för h5
$headings-font-weight:  700 !default;

/*-- scss:rules --*/

/* Grundläggande färg */
.menu-text {
    color: #00495D;
}

/* Hover-effekt */
.menu-text:hover {
    color: #20AC6C;
}

a:hover {
    color: #20AC6C;
}

a.sidebar-item-text.sidebar-link:hover,
a.sidebar-item-text.sidebar-link:hover .chapter-title {
    color: #20AC6C;
}

a.pagination-link:hover,
a.pagination-link:hover .nav-page-text,
a.pagination-link:hover .chapter-title,
a.pagination-link:hover .bi {
    color: #20AC6C;
}

.bi-arrow-right-short,
.bi-arrow-left-short {
    color: #00495D;
}

header#title-block-header.quarto-title-block.default.page-columns.page-full .quarto-title-banner {
    display: none;
}

#quarto-content>* {
    padding-top: 10px;
}

main {
    margin-top: 10px;
    margin-bottom: 1em;
}

.quarto.title-block {
    background-color: #00495D;
    padding: 40px; 
    border: 2px solid #FFFFFF; 
    border-radius: 10px; 
    width: 100%; /* Detta kommer att göra att blocket sträcker sig över hela förälderelementets bredd */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

.main-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700; 
    font-size: 48px;
    color: #FFFFFF;
    margin-bottom: 20px; 
    text-align: center;
}

.subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
}


/* Denna regel kan användas för att stilisera span.chapter-title utanför .sidebar */
span.chapter-title {
    font-size: 20pt;
    margin-bottom: 7.5px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
}

/* Denna regel påverkar endast span.chapter-title inom .sidebar */
.sidebar span.chapter-title {
    font-size: 10pt; /* Eller vilken storlek du önskar för menyn */
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    color: #00495D;
}

/* Denna regel påverkar endast span.chapter-title inom .sidebar */
.page-navigation span.chapter-title {
    font-size: 14.875px; /* Eller vilken storlek du önskar för menyn */
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    color: #00495D;
}

span.nav-page-text {
    font-size: 14.875px; /* Eller vilken storlek du önskar för menyn */
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    color: #00495D;
}

.textx {
    font-family: 'Crimson Pro', serif;
    font-size: 19px;
    line-height: 1.3;
    color: #333;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.textx a {
    color: #00495D;
}

.textx a:hover {
    color: #20AC6C;
}

.texty {
    font-family: 'Roboto', serif;
    font-size: 14px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}


h1, h2, h3, h4, h5 {
    max-width: 550px;
    margin: 7.5px auto 5px; /* Top margin 7.5px, automatiskt vänster och höger för centrering, och 5px bottenmarginal */
    padding: 0; /* Ta bort all padding */
    color: #00495D;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    text-decoration: none;
}

h2, .h2 {
    border-bottom: none;
}


li {
    font-size: 13.5px;
    max-width: 550px;
}

main.content.quarto-banner-title-block#quarto-document-content {
    margin-top: 0;
    padding-top: 0;
}

.sidebar-title.mb-0.py-0 {
    display: none;
}

div.sidebar-item-container .sidebar-link.active {
    font-size: 12pt !important; 
    line-height: 1.2;   // Gör texten större när den är aktiv
}

div.sidebar-item-container .sidebar-link.active::before {
    content: '●';                  // Använder en cirkel som en markör
    color: #00495D;                // Färg på cirkeln
    margin-right: 5px;             // Ger lite utrymme mellan cirkeln och texten
}

div.sidebar-item-container .sidebar-link.active .chapter-title {
    font-size: 11pt !important;
    line-height: 1.2;    // Gör texten större när den är aktiv
    /* tagit bort ::before regeln för chapter-title här */
}

.sidebar-logo {
    background-color: #ffffff;  // Vit bakgrund
    display: inline-block;      // För att se till att bakgrunden tar upp hela bredden och höjden
    width: auto;                // Bredd baserat på bilden (kan anpassas efter behov)
    height: auto;               // Höjd baserat på bilden (kan anpassas efter behov)
    padding: 5px;               // Ett litet utrymme runt logon så att den vita bakgrunden syns tydligt (kan justeras eller tas bort)
}

div.sidebar-item-container .sidebar-link.active,
div.sidebar-item-container .sidebar-link.active .chapter-title {
    color: #00495D;
    line-height: 1.2;
    font-weight: bold; 
}

#TOC .nav-link.active {
    font-weight: bold;
}

li.sidebar-item.sidebar-item-section > .sidebar-item-container {
    margin-top: 7.5px;
    line-height: 1.2;
}

p > img.img-fluid {
    display: block;
    max-width: 100%;
    width: auto; /* Återställer varje breddsinställning till auto */
    height: auto;
    margin: 0 auto; /* Centrerar bilden horisontellt */
}

strong {
    color: #00495D;
    font-size: 19px;
}

ul li p strong {
    font-size: 19px; 
}

ul li ul li {
    font-size: 10pt;
}

// Kort

.card {
  border: 1px solid #00495D;
  border-radius: 5px;
  padding: 20px;
  background-color: #00495D;
  color: #ffffff; /* vit text */
  width: 300px;   /* eller den bredd du föredrar */
}

.header, .content, .summary {
  margin-bottom: 10px;
}

/* Grundstil för alla tabbar */
.nav-link {
    font-family: 'Roboto', sans-serif;
    color: #00495D;
    font-weight: normal;
}

/* Stil för den aktiva tabben */
.nav-link.active {
    font-weight: bold;
    color: #00495D !important;  /* Lägger till !important för att säkerställa att färgen inte överskrids av andra stilar */
}

/* För passiva länkar */
.sidebar-item-text.sidebar-link {
    line-height: 1.2; /* eller vilket värde du föredrar */
    margin-top: 2.5px;    /* Avstånd ovanför länken */
}

.enhanced-quote {
    font-family: 'Noto Serif', serif;
    color: #00495D;
    max-width: 550px;
    border-left: 4px solid #00495D;
    padding-left: 20px;
    font-style: italic;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.enhanced-box {
    border: 1.5px solid #00495D;
    border-radius: 5px;
    max-width: 550px;
    padding: 20px;
    margin: 20px auto; /* Centrerar rutan horisontellt och ger vertikal marginal */
    background-color: #f5f8fa; /* Lägger till en svag bakgrundsfärg, kan ändras efter behov */
}

.summary-title {
    font-family: 'Noto Serif', serif;
    color: #00495D;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.textx li {
    font-size: 19px;
}

/* Minskar färgintensiteten för länkar i citat */
span.citation a {
    color: #4a4a4a; /* Mörkgrå istället för den vanliga blå länkfärgen */
    text-decoration: none; /* Tar bort understrykningen */
}

/* Lägger till en subtil understrykning när användaren hovrar över länken */
span.citation a:hover {
    text-decoration: underline;
}

span.citation {
    font-size: 85%; /* 90% av den ursprungliga storleken; justera som önskat */
}


@media (max-width: 991px) {
    .quarto-page-breadcrumbs .breadcrumb-item a {
        font-family: 'Roboto', sans-serif;
        font-size: 13.5px;
        line-height: 1.2; 
        display: flex; 
        align-items: baseline;
        vertical-align: top;
        margin: 0;
        padding: 0;
    }
    
    .quarto-page-breadcrumbs .breadcrumb-item .chapter-title {
        font-weight: normal;
        font-family: 'Roboto', sans-serif;
        font-size: 13.5px;
        padding: 0 0 0px 0; /* Lägg till den specifika paddingen här */
        margin: 0 0 0 0; /* Lägg till den specifika paddingen här */
    }

    .quarto-page-breadcrumbs .breadcrumb-item .chapter-number {
        display: none;
        font-weight: normal;
        font-family: 'Roboto', sans-serif;
        font-size: 13.5px;
    }

.breadcrumb-item::before {
    vertical-align: middle; /* detta borde räcka för att centrera den med texten, men det beror på andra stilar och strukturer */
}
}

@media (max-width: 991px) {
    .nav-footer {
        display: none;
    }
}

@media (max-width: 991px) {
    .page-navigation .chapter-title {
        display: none;
    }
}

@media (max-width: 991px) {
    .nav-page-text {
        display: none;
    }
}

/* Anpassning för skärmar under 991px */
@media (max-width: 990px) {
    .quarto.title-block {
        padding: 10px;
        margin-bottom: 10px;
    }

    .quarto.title-block .main-title {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 700; 
        font-size: 36px;
        color: #FFFFFF;
        margin-bottom: 5px;       /* Minska bottenmarginal */
        line-height: 1.2;        /* Justera line-height för att minska glappet mellan raderna */
        text-align: center;
    }

    .quarto.title-block .subtitle {
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 1.2;        /* Justera line-height för att minska glappet mellan raderna */
        text-align: center;
    }
}

[data-tippy-root] {
    max-width: 300px;          /* eller en annan lämplig bredd */
    word-wrap: break-word;     /* Tillåt ord att brytas */
    overflow: hidden;          /* Förhindra att innehållet går utanför tooltip */
}

.csl-entry {
    max-width: 550px; /* Eller vilken bredd du vill ha */
    overflow-wrap: break-word; /* Detta får ord att brytas vid kanten av förälderselementet */
}

.csl-entry a {
    word-break: break-all; /* Detta bryter länkar så att de passar inom det maximala breddvärdet */
    display: inline-block; /* Se till att länken tar upp hela bredden upp till max-width */
}

/* Allmän stil för flikarna */
.panel-tabset .nav.nav-tabs .nav-item {
    margin-bottom: -1px; /* För att ta bort mellanrum mellan fliken och innehållet */
}

.panel-tabset .nav.nav-tabs .nav-link {
    font-size: 9pt; /* Mindre textstorlek */
    padding: 5px 10px; /* Mindre padding för en mer kompakt känsla */
    border: none; /* Tar bort standardborders */
    border-bottom: 2px solid transparent; /* Lägger till en transparent border i botten för att hålla layouten konsekvent */
    transition: all 0.3s; /* Övergångseffekt för hover och active states */
    max-width: 200px; /* Ange en maxbredd för texten */
    white-space: normal; /* Tillåt radbrytning */
    overflow-wrap: break-word; /* Bryt långa ord vid gränsen om nödvändigt */
    line-height: 1.1; /* Minskat radavstånd */
}

/* Hover-effekt för flikarna */
.panel-tabset .nav.nav-tabs .nav-link:hover {
    background-color: #FCFAFA; /* En svagt grå bakgrundsfärg vid hover */
    border-bottom: 2px solid #00495D; /* En blå understrykning vid hover */
}

/* Aktiv flik-stil */
.panel-tabset .nav.nav-tabs .nav-link.active {
    background-color: #fff; /* Vit bakgrundsfärg för den aktiva fliken */
    font-weight: bold; /* Fet text för den aktiva fliken */
    border-bottom: 2px solid #00495D; /* En blå understrykning för den aktiva fliken */
}

table {
  font-family: "Roboto", sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-size: 14px; /* Justera detta värde för att ändra textstorleken */
}

/* Dölj fotnoterna längst ner i dokumentet */
.footnotes {
  display: none;
}

.footnote-ref {
    padding: 2px 4px;
    border: 1px solid #d9d9d9;
    background-color: #f9f9f9;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
}

.footnote-ref:hover {
    background-color: #e6e6e6;
}

.small-text {
        font-size: 10pt;
    }

.tab-content img.img-fluid {
    margin: 0;
    display: block;
    width: 100%;
    height: auto;
}

.tab-content {
    margin-top: 0px;
    border-left: #dee2e6 1px solid;
    border-right: #dee2e6 1px solid;
    border-bottom: #dee2e6 1px solid;
    margin-left: 0;
    padding: 0; /* Ändrade från 1em till 0 */
    margin-bottom: 1em;
}

.verysmall .table{
  font-size: 12px;
}