/* ==== Tema-variabler (behåll gärna) ==== */
:root{
  --accent:#B81867;
  --accent-2:#a61c6e;
  --text:#1f1f1f;
  --muted:#666;
  --bg:#ffffff;
  --bg-soft:#f3dce8;
  --border:#e6e6e6;
  --maxw:1200px;
  --contentw:1100px;
}

/* Bas */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#f2f2f6;
  line-height:1.6;
}

/* ==== HEADER / NAVBAR (Quarto) ==== */
#quarto-header .navbar{
  background:#B81867 !important;   /* din färg */
}
#quarto-header .navbar .navbar-brand,
#quarto-header .navbar .nav-link{
  color:#fff !important;
  font-weight:700;
}
#quarto-header .navbar .nav-link.active,
#quarto-header .navbar .nav-link:hover,
#quarto-header .navbar .nav-link:focus{
  color:#fff !important;
  text-decoration:underline;
}
#quarto-header .navbar-toggler{
  border-color:rgba(255,255,255,.6);
}
#quarto-header .navbar-toggler-icon{
  filter:invert(1) grayscale(1); /* gör hamburgaren vit */
}

/* Låt själva Quarto-grid fylla bredden (ingen smal container) */
.quarto-container{
  max-width: 100%;
}

/* ==== SIDEBAR (vänster, Quarto) ==== */
#quarto-sidebar{
  background:var(--bg-soft);
  border-right:2px solid var(--border);
}
#quarto-sidebar .sidebar-menu-container{
  padding:1rem;
}
#quarto-sidebar a{
  color:#5a3ab6;
  text-decoration:underline;
  text-underline-offset:2px;
}
#quarto-sidebar a:hover{ text-decoration:none; }

/* ==== TOC / marginal (höger, Quarto) – valfritt pimpa aktiva länkar ==== */
#quarto-margin-sidebar .active > a,
#quarto-margin-sidebar a.active{
  font-weight:700; color:var(--accent);
}

/* ==== INNEHÅLL / "paper card" look ==== */
.page-columns .content{
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:28px 36px;
}

/* Typografi */
.page-columns .content h1.title{
  color:var(--accent);
  font-weight:900;
}
h2{ color:var(--accent); font-size:1.6rem; margin:2rem 0 .5rem 0; font-weight:800; }
h3{ color:#7a2d57; margin:1.2rem 0 .3rem 0; font-weight:700; }
h2 + p, h3 + p{ margin-top:.4rem; }
p{ margin:1rem 0; }
a{ color:#2a55cc; }
a:hover{ text-decoration:none; }
hr{ border:0; border-top:1px solid var(--border); margin:1.5rem 0; }
ul,ol{ padding-left:1.25rem; }
li{ margin:.35rem 0; }
img{ max-width:100%; height:auto; }
pre,code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
pre{
  background:#f7f7f7; border:1px solid #ececec; border-radius:8px;
  padding:.85rem; overflow:auto;
}

/* ==== Minska gapet efter Quarto-titel ==== */
.quarto-title-block{ margin-bottom:.5rem !important; }
.content > :first-child{ margin-top:0 !important; }

/* ==== Panel-tabset – lite styling (Quarto sköter funktionaliteten) ==== */
.panel-tabset > .nav-tabs{
  border-bottom:1px solid #dee2e6; margin-bottom:1rem; gap:.5rem;
}
.panel-tabset > .nav-tabs .nav-link{
  padding:.5rem .75rem; border:1px solid transparent;
  border-radius:.375rem .375rem 0 0;
}
.panel-tabset > .nav-tabs .nav-link.active{
  border-color:#dee2e6 #dee2e6 #fff; background:#fff;
}

/* ==== Footertext inne i content ==== */
.page-columns .content .page-footer{
  margin-top:3rem; padding-top:1rem; border-top:1px solid var(--border);
  color:var(--muted); font-size:.95rem;
}

/* ==== Responsivitet ==== */
@media (max-width: 992px){
  .page-columns .content{ padding:20px 18px; border-radius:10px; }
}



/* Container för nedladdningsknappen */
.download-dropdown {
  position: relative;
  display: inline-block;
}

/* Själva knappen */
.download-btn {
  background-color: #0066CC;
  color: white;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  white-space: nowrap;
}

/* Menyn (dold som standard) */
.download-menu {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 1000;
}

/* Länkar i menyn */
.download-menu a {
  display: block;
  padding: 4px 10px;
  font-size: 0.85rem;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover-effekt på länkar */
.download-menu a:hover {
  background-color: #f2f2f2;
}

/* Visa meny vid hover */
.download-dropdown:hover .download-menu {
  display: block;
}



/* =====================================================
   Floating kontakt-widget (chatt-ikon + kontaktbox)
   ===================================================== */

/* Yttersta behållaren som håller både knapp och ruta */
.contact-widget {
  position: fixed;          /* Ligger fast på skärmen även vid scroll */
  right: 20px;              /* Avstånd från högerkanten */
  bottom: 20px;             /* Avstånd från nederkanten */
  z-index: 10000;            /* Säkerställer att den ligger över annat innehåll */
  
  user-select: none;        /* Förhindrar att text utanför rutan markeras */
}


/* Den runda chatt-knappen (💬) */
.contact-button {
  width: 58px;              /* Knappens bredd */
  height: 58px;             /* Knappens höjd */
  border-radius: 50%;       /* Gör knappen helt rund */
  background: var(--accent);/* Färg från temavariabel */
  color: #fff;              /* Vit ikon/text */
  display: flex;            /* Centrerar innehållet */
  align-items: center;      /* Vertikal centrering */
  justify-content: center;  /* Horisontell centrering */
  font-size: 2rem;          /* Storlek på 💬-ikonen */
  cursor: pointer;          /* Visar att knappen är klickbar */
  box-shadow: 0 6px 16px rgba(0,0,0,.2); /* Skugga för “flytande” känsla */
  
  user-select: none;        /* Förhindrar textmarkering på knappen */
}

/* Själva kontakt-rutan (dold tills man klickar) */
.contact-widget .floating-contact-box {
  display: none;            /* Dold som standard */
  position: absolute;       /* Positioneras relativt .contact-widget */
  bottom: 75px;             /* Placeras ovanför chatt-knappen */
  right: 0;                 /* Högerjusterad mot knappen */
  width: 360px;             /* Bredd på rutan */
  min-height: 50px;         /* valfri minhöjd */
  padding: 14px 14px;       /* Inre marginaler */
  background: #fff;         /* Vit bakgrund */
  border: 1px solid var(--border); /* Diskret ram */
  border-radius: 10px;      /* Rundade hörn */
  padding-left: 16px;
  padding-right: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12); /* Skugga */
  font-size: 1rem;          /* Textstorlek */
  line-height: 1.4;         /* Radavstånd */
  color: var(--text);       /* Textfärg från tema */
  z-index: 1000000;
  
  user-select: text;        /* Tillåter markering och kopiering av text */
  cursor: text;             /* Visar textmarkör vid hover */
  overflow: visible;       /* Stoppar markering utanför */
  contain: layout paint;  /* Isolerar rutan från övrig layout */
  pointer-events: auto;
}


/* Den osynliga checkboxen som styr öppna/stäng */
#contact-toggle {
  position: absolute;       /* Tas ur flödet */
  opacity: 0;               /* Helt osynlig */
  pointer-events: none;     /* Går inte att klicka direkt */
}

/* När checkboxen är ikryssad → visa kontakt-rutan */
#contact-toggle:checked ~ .floating-contact-box {
  display: block;
}


/* Enkel fade-in-animation när rutan visas */
.contact-widget .floating-contact-box {
  animation: fadeIn .2s ease-out;
}

/* Definition av fade-in-animationen */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dölj hela widgeten på små skärmar (mobil) */
@media (max-width: 768px) {
  .contact-widget {
    display: none;
  }
}