/* ============================================================
   VEDIO Help Center (Help Scout Docs) — CLEAN + MAINTAINABLE
   - Keeps Vedio colors + purple hero with stars
   - Pretty front page (Frequently Read + Categories)
   - Pretty Category + Article pages (white main card + nice sidebar)
   - Same hover color/feel everywhere (like front page)
   - Frequently Read icons (CSP-safe) via HTTPS masks
   ============================================================ */

/* ------------------------------
   0) Fonts + Tokens
-------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root{
  --vd-accent: #803ab7;
  --vd-accent2:#a03aef;

  --vd-text:   #0f172a;
  --vd-muted:  #64748b;

  --vd-border: #e6eaf2;
  --vd-card:   #ffffff;

  --vd-bg1: rgba(160, 58, 239, 0.04);
  --vd-bg2: rgba(128, 58, 183, 0.04);

  --vd-shadow:       0 10px 28px rgba(15, 23, 42, 0.08);
  --vd-shadow-soft:  0 8px 22px rgba(15, 23, 42, 0.06);
  --vd-shadow-hover: 0px 30px 20px -20px rgba(128, 58, 183, 0.20);

  /* Hover background like your front page cards */
  --vd-hover-bg: linear-gradient(135deg, #ffffff 0%, #f9f1ff 100%);

  --vd-radius: 12px;
  --vd-radius-lg: 14px;

  --vd-container: 1120px;
  --vd-gutter: 24px;

  /* Z-index layers */
  --z-base: 1;
  --z-sidebar: 2;
  --z-search: 3;
  --z-dropdown: 4;
  --z-chat: 100; 
}

/* ------------------------------
   1) Base reset / page background
-------------------------------- */
*{ box-sizing:border-box; }
html, body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
}
body{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:14px;
  line-height:1.55;
  color: var(--vd-text);
  background: linear-gradient(135deg, var(--vd-bg1) 0%, var(--vd-bg2) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ol, ul {
  padding: 4px;
  margin: 0 0 9px 25px;
}


#contentArea{
  background: linear-gradient(135deg, var(--vd-bg1) 0%, var(--vd-bg2) 100%);
  min-height: 100vh;
  padding: 0; 
}


.container-fluid{
  max-width: var(--vd-container);
  margin: 0 auto;
  padding: 0 var(--vd-gutter);
}

/* Remove random HR spacing from HS */
#contentArea hr{ display:none !important; }

/* Links */
a{
  color: var(--vd-accent);
  text-decoration:none;
  font-weight: 600;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover{ text-decoration: underline; color: var(--vd-accent); }

/* Override Help Scout default link colors for specific elements */
#serp-dd .result a:hover,
#serp-dd .result > li.active,
#fullArticle strong a,
#fullArticle a strong,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: #803ab7;
}

/* Focus - remove outline on clickable elements */
a:focus, 
button:focus, 
input:focus, 
select:focus, 
textarea:focus{
  outline: none !important;
}

/* Keep outline only for keyboard navigation (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid rgba(128, 58, 183, 0.35);
  outline-offset: 2px;
}

/* Remove focus outline from clickable boxes */
.articleList li a:focus,
.article-list li a:focus,
ul.articleList li a:focus,
ul.articles li a:focus,
.articles-list li a:focus,
.popArticles a:focus,
.category-list .category a:focus,
#searchResults .result a:focus,
.search-results .result a:focus,
.results .result a:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* ------------------------------
   2) Top Nav / Branding
-------------------------------- */
#mainNav{ background: transparent; }

.navbar .navbar-inner{
  background: var(--vd-card) !important;
  border-bottom: 1px solid var(--vd-border);
  box-shadow: none;
  padding: 16px 0;
}

/* Hide contact button */
#contact,
.navbar #contact,
.navbar .nav #contact,
.navbar li#contact,
.contactUs{
  display: none !important;
}

/* Brand link (logo + KB text) */
.navbar .brand{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  color: var(--vd-text);
  text-decoration: none;
  padding-left: 11px;
}

/* If HS prints brand text inside span, hide it so we control it */
.navbar .brand span{ display:none; }

/* Vedio logo */
.navbar .brand::before{
  content:"";
  width: 74px;
  height: 34px;
  display:inline-block;
  background-image: url('data:image/png;base64,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');
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* “Knowledge Base” label */
.navbar .brand::after{
  content:"Helpcenter";
  font-weight: 800;
  font-size: 18px;
  color: var(--vd-text);
  border-bottom: 2px solid var(--vd-accent);
  padding-bottom: 0px;
  margin-left: 10px;
  margin-top: 4px;
}

/* ------------------------------
   3) HERO / Search (purple + stars)
-------------------------------- */
#docsSearch{
  background: linear-gradient(135deg, var(--vd-accent2) 0%, var(--vd-accent) 100%);
  border-top:none;
  border-bottom:none;
  padding: 26px 0 38px;
  text-align:center;
  position: relative;
  overflow:visible;
  z-index: 1;
}

/* stars */
#docsSearch::before,
#docsSearch::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-repeat:no-repeat;
  opacity:1;
}

#docsSearch::before{
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 0l2.5 7.5L20 10l-7.5 2.5L10 20l-2.5-7.5L0 10l7.5-2.5z" fill="none" stroke="rgba(255,255,255,0.30)" stroke-width="1"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 0l1.5 4.5L14 8l-4.5 1.5L8 14l-1.5-4.5L2 8l4.5-1.5z" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M7 0l1.4 4.2L13 7l-4.6 1.8L7 13l-1.4-4.2L1 7l4.6-1.8z" fill="none" stroke="rgba(255,255,255,0.20)" stroke-width="0.8"/></svg>');
  background-size: 80px 80px, 60px 60px, 50px 50px;
  background-position: 10% 18%, 89% 21%, 16% 83%;
}

#docsSearch::after{
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M9 0l2.1 6.3L18 9l-6.9 2.7L9 18l-2.1-6.3L0 9l6.9-2.7z" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 0l1.2 3.6L12 6l-3.6 1.2L6 12l-1.2-3.6L0 6l3.6-1.2z" fill="none" stroke="rgba(255,255,255,0.20)" stroke-width="0.7"/></svg>');
  background-size: 70px 70px, 45px 45px;
  background-position: 72% 21%, 50% 93%;
}

/* Hide HS original button */
#docsSearch button{ display:none !important; }

/* Title */
#docsSearch h1{
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-size: 0; /* hide original text */
}
#docsSearch h1::before{
  content:"Hvordan kan vi hjælpe dig?";
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color:#fff;
}

/* Search input */
#searchBar{
  position: relative;
  z-index: 10000;
  max-width: 560px;
  margin: 0 auto;
}
#searchBar .search-query{
  width: 100%;
  height: 52px;
  padding: 0 16px 0 52px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 8px 22px rgba(0,0,0,0.14);
  font-size: 15px;
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20"><path d="M19.5 18.5l-5.5-5.5c1-1.3 1.5-2.9 1.5-4.5C15.5 4.9 12.1 1.5 8 1.5S0.5 4.9 0.5 9s3.4 7.5 7.5 7.5c1.6 0 3.2-0.5 4.5-1.5l5.5 5.5c0.3 0.3 0.7 0.3 1 0l1-1c0.3-0.3 0.3-0.7 0-1zM2 9c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" fill="%23999"/></svg>');
  background-repeat:no-repeat;
  background-position: 18px center;
  background-size: 18px 18px;
}
#searchBar .search-query:focus{
  outline:none;
  border-color: rgba(255,255,255,0.50);
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

/* Dropdown attach under input - ONLY for front page, don't change this */
#serp-dd{
  position:absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  border-radius: 10px !important;
  overflow-x: hidden !important;
  border: 1px solid rgba(32,32,32,0.12) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12) !important;
  background:#fff !important;
  z-index: var(--z-dropdown) !important;
  margin-top: 8px !important; /* Desktop: margin between search bar and dropdown */
}
#serp-dd:before, #serp-dd:after{ display:none !important; }
#serp-dd .result{
  margin: -4px !important;
  max-height: 485px !important;
  overflow: auto !important;
}
#serp-dd .result li{
  padding: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

#serp-dd .result li:last-child{ border-bottom:none !important; }
#serp-dd .result a{ 
  font-weight:700 !important; 
  color: var(--vd-text) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
#serp-dd .result a * {
  pointer-events: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
#serp-dd .result li:hover a,
#serp-dd .result li:hover{
  background: var(--vd-accent) !important;
  border-radius: 10px !important;
}
#serp-dd .result li:hover a{
  color: #fff !important;
}
#serp-dd .result .active a,
#serp-dd .result li.active{
  background: var(--vd-accent) !important;
  border-radius: 10px !important;
}
#serp-dd .result .active a{
  color: #fff !important;
}

/* =========================================================
   HIDE DROPDOWN WHEN NO RESULTS - COMPLETELY REMOVED
   Hide the entire dropdown when there are no results
   ========================================================= */
/* Hide entire dropdown when it only contains "no results" (no article links) */
#serp-dd:not(:has(.result li a)),
#serp-dd:not(:has(.result > li > a)),
/* Also hide if result container is empty or only has "no results" */
#serp-dd .result:not(:has(li a)),
#serp-dd .result:not(:has(> li > a)),
/* Hide "no results" message elements */
#serp-dd .result li:not(:has(a)),
#serp-dd .result > li:not(:has(a)) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ------------------------------
   4) Front page sections
-------------------------------- */

/* Put some breathing room below hero */
.most-pop-articles{
  margin: 34px auto 0;
  max-width: var(--vd-container);
  padding: 0 var(--vd-gutter);
}
.collection{
  max-width: var(--vd-container);
  margin: 0 auto;
  padding: 0 var(--vd-gutter);
  border: none !important;
}

/* Titles */
.most-pop-articles h2,
.most-pop-articles h3,
.collection h2{ display:none !important; }

/* “Frequently Read Articles” title */
.most-pop-articles::before{
  content:"Populære artikler";
  display:block;
  font-size: 18px;
  font-weight: 900;
  color: var(--vd-text);
  margin: 22px 0 14px;
  padding-left: 26px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="%23803ab7" d="M12 17.3l-6.2 3.7l1.7-7.1L2 8.9l7.3-.6L12 1.7l2.7 6.6l7.3.6l-5.5 5l1.7 7.1z"/></svg>');
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-position: 0 50%;
}

/* Frequently read grid */
.popArticles{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Limit to only 6 most popular articles */
.popArticles li:nth-child(n+7){
  display: none !important;
}

/* Card */
.popArticles li{
  background: var(--vd-card);
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  padding: 12px 14px !important; /* Ensure our padding takes precedence */
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

/* Margin for Frequently Read Articles - override Help Scout defaults */
.most-pop-articles .popArticles li,
.threeCol .popArticles li,
.twoCol .popArticles li{
  margin-bottom: 1em !important;
}
.popArticles li:hover{
  transform: translateY(-2px);
  border-color: rgba(128, 58, 183, 0.45);
  box-shadow: var(--vd-shadow-hover);
  background: var(--vd-hover-bg);
}

/* Link inside */
.popArticles a{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  color: #0f172a !important;
  font-weight: 800;
  font-size: 14px; /* Smaller font size */
  text-decoration:none;
  position: relative;
  padding-left: 50px; /* Adjusted for smaller icon */
  overflow: hidden !important; /* Add overflow hidden for text truncation */
  min-width: 0 !important; /* Allow flex item to shrink */
}

/* Truncate text content in Frequently Read Articles */
.popArticles a span,
.popArticles a {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Ensure text element inside link truncates */
.popArticles a > *:not(::after) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.popArticles a::after{
  content:"›";
  font-size: 22px;
  color: #94a3b8;
  margin-left: 8px;
  flex-shrink: 0 !important; /* Prevent arrow from shrinking */
}
.popArticles li:hover a::after{ color: var(--vd-accent); }

/* Hide Help Scout default paper/document icons in Frequently Read Articles */
.popArticles a .icon,
.popArticles a i.icon,
.popArticles a span.icon,
.popArticles a i[class*="icon"],
.popArticles a span[class*="icon"],
.popArticles a svg,
.popArticles a img[class*="icon"]{
  display: none !important;
}

/* Hide Help Scout default paper/document icons in category article lists */
.articleList a .icon,
.article-list a .icon,
ul.articleList a .icon,
ul.articles a .icon,
.articles-list a .icon,
.articleList a i.icon,
.article-list a i.icon,
ul.articleList a i.icon,
ul.articles a i.icon,
.articles-list a i.icon,
.articleList a span.icon,
.article-list a span.icon,
ul.articleList a span.icon,
ul.articles a span.icon,
.articles-list a span.icon,
.articleList a i[class*="icon"],
.article-list a i[class*="icon"],
ul.articleList a i[class*="icon"],
ul.articles a i[class*="icon"],
.articles-list a i[class*="icon"],
.articleList a span[class*="icon"],
.article-list a span[class*="icon"],
ul.articleList a span[class*="icon"],
ul.articles a span[class*="icon"],
.articles-list a span[class*="icon"],
.articleList a svg,
.article-list a svg,
ul.articleList a svg,
ul.articles a svg,
.articles-list a svg,
.articleList a img[class*="icon"],
.article-list a img[class*="icon"],
ul.articleList a img[class*="icon"],
ul.articles a img[class*="icon"],
.articles-list a img[class*="icon"]{
  display: none !important;
}

/* -------- Categories grid on front page -------- */
.category-list{
  margin: 26px auto 60px;
  max-width: var(--vd-container);
  padding: 0 var(--vd-gutter);
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.category-list::before{
  content:"Se alle kategorier";
  grid-column: 1 / -1;
  display:block;
  font-size: 18px;
  font-weight: 900;
  color: var(--vd-text);
  margin: 10px 0 14px;
}

/* Category card */
.category-list .category{
  background: var(--vd-card);
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  padding: 18px 18px 18px 24px;
  display:flex;
  align-items:center;
  gap: 18px;
  min-height: 96px;
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  position: relative;
  text-align: left !important; /* Force left alignment */
}

/* Ensure consistent text alignment in category list - centered vertically, left-aligned horizontally */
.category-list .category h3,
.category-list .category h3 a {
  text-align: left !important; /* Left align horizontally */
  align-self: center !important; /* Center vertically in flex container */
  width: 100% !important; /* Take full width of flex item */
}

/* Ensure text container doesn't center horizontally but stays vertically centered */
.category-list .category > *:not(::before) {
  text-align: left !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-self: center !important; /* Center vertically */
}

/* Icon bubble - base styling for photos */
.category-list .category::before{
  content:"";
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex: 0 0 64px;
  background: linear-gradient(135deg, rgba(128, 58, 183, 0.16) 0%, rgba(160, 58, 239, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(128, 58, 183, 0.12);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   CATEGORY BILLEDER - Indsæt dine billede-URL'er her
   
   Sådan gør du:
   1. Find URL'en til dit billede (fx: https://example.com/billede.jpg)
   2. Erstat "YOUR_IMAGE_URL_HERE" med din URL
   3. Billedet vil automatisk vises i cirklen
   
   Du kan også bruge base64 kodede billeder (som eksemplet for Getting Started)
   ========================================================= */

/* 1st category - funktioner i platformen */
.category-list .category:nth-child(1)::before,
#category-1::before{
  background-image: url("https://image2url.com/r2/default/images/1770893142161-d4ad0ed0-d7e5-4f31-92c6-21a53599b59e.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 2nd category - Hooks */
.category-list .category:nth-child(2)::before,
#category-12::before{
  background-image: url("https://image2url.com/r2/default/images/1770894830425-b53dab4c-c45f-46cc-b586-277a400aa725.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 3rd category - kom godt i gang med Vedio */
.category-list .category:nth-child(3)::before,
#category-4::before{
  background-image: url("https://image2url.com/r2/default/images/1770893323330-9236dd0a-85c9-4390-8498-966c78e44cf3.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 4th category - platforme */
.category-list .category:nth-child(4)::before,
#category-40::before{
  background-image: url("https://image2url.com/r2/default/images/1770895615694-d75c71b3-9f78-472d-9ff4-4990128d106a.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 5th category -  Sådan filmer du */
.category-list .category:nth-child(5)::before,
#category-27::before{
  background-image: url("https://image2url.com/r2/default/images/1770894011296-cac6bafa-7ed0-4c28-adc0-f1a14eb729b3.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 6th category - Pricing and Packages */
.category-list .category:nth-child(6)::before,
#category-41::before{
  background-image: url("https://image2url.com/r2/default/images/1770896561232-08216982-c18b-4e26-8278-1c4f3f443c75.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 7th category - Script Generator */
.category-list .category:nth-child(7)::before,
#category-211::before{
  background-image: url("https://www.hollywoodreporter.com/wp-content/uploads/2025/01/Screen-Shot-2025-01-30-at-7.55.44-PM.jpg?w=2000&h=1126&crop=1") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 8th category - Video Ideas */
.category-list .category:nth-child(8)::before{
  background-image: url("https://www.tubebuddy.com/wp-content/uploads/2024/04/10-1568x820.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* You can also target by category ID if Help Scout assigns them */
/* Example: #category-123::before { background-image: url("YOUR_URL"); } */

/* Title + description */
.category-list .category h3{
  margin:0;
  padding:0;
  line-height:1.1;
}
.category-list .category h3 a{
  display:inline-block;
  background: none;
  color: var(--vd-text);
  padding: 0;
  border-radius: 0;
  font-size: 18px;
  font-weight: 800;
  text-decoration:none;
  margin-bottom: 8px;
}

/* Ensure all category h3 titles are 18px to prevent text wrapping */
.category-list .category h3 {
  font-size: 18px !important;
}

.category-list .category p{
  margin:0;
  color: var(--vd-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Hover matches front page feel */
.category-list .category:hover{
  transform: translateY(-2px);
  border-color: rgba(128, 58, 183, 0.45);
  box-shadow: var(--vd-shadow-hover);
  background: var(--vd-hover-bg);
}
.category-list .category:hover p{ color: #475569; }
.category-list .category .article-count{ display:none !important; }

/* ------------------------------
   5) Category + Article pages (sidebar + content)
-------------------------------- */

/* Ensure the background goes FULL width behind everything */
#contentArea,
#contentArea .container-fluid{
  background: transparent !important;
}

/* Layout wrapper (Help Scout usually has .row-fluid containing #sidebar + main) */
.row-fluid{
  display:flex !important;
  gap: 28px;
  align-items: flex-start;
  padding: 34px 0 60px;
}

/* Remove left padding from container on category/article pages so sidebar is flush left */
body .row-fluid .container-fluid,
body .container-fluid{
  padding-left: 0 !important;
}

/* Sidebar */
#sidebar{
  flex: 0 0 320px;
  width: 320px;
  position: sticky;
  top: 92px; /* below navbar */
  align-self: flex-start;
  background: transparent !important;
}

/* =========================================================
   SEARCH BOXES - ORGANIZED BY LOCATION
   Easy to edit each search bar individually
   ========================================================= */

/* --- 1) FRONT PAGE SEARCH BAR (#searchBar) --- */
#searchBar{
  position: relative;
  z-index: var(--z-search);
  max-width: 560px;
  margin: 0 auto;
}
#searchBar .search-query{
  width: 100%;
  height: 52px;
  padding: 0 16px 0 52px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 8px 22px rgba(0,0,0,0.14);
  font-size: 15px;
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20"><path d="M19.5 18.5l-5.5-5.5c1-1.3 1.5-2.9 1.5-4.5C15.5 4.9 12.1 1.5 8 1.5S0.5 4.9 0.5 9s3.4 7.5 7.5 7.5c1.6 0 3.2-0.5 4.5-1.5l5.5 5.5c0.3 0.3 0.7 0.3 1 0l1-1c0.3-0.3 0.3-0.7 0-1zM2 9c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" fill="%23999"/></svg>');
  background-repeat:no-repeat;
  background-position: 18px center;
  background-size: 18px 18px;
}
#searchBar .search-query:focus{
  outline:none;
  border-color: rgba(255,255,255,0.50);
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

/* --- 2) SIDEBAR SEARCH BAR (Category/Article pages) --- */
/* Sidebar positioning - flush left */
body #sidebar {
  position: sticky !important;
  top: 1px !important;
  align-self: flex-start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Hide sidebar search button (right icon) */
body #sidebar .search button,
body #sidebar form button,
body #sidebar button[type="submit"],
body #sidebar .search-button{
  display: none !important;
}

/* Sidebar search input - EDIT THIS SECTION TO CHANGE SIDEBAR SEARCH */
body #sidebar .search-query,
body #sidebar input[type="search"],
body #sidebar input{
  display: block !important;
  width: 280px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 6px 0 !important;
  height: 52px;
  padding: 0 16px 0 48px; /* More left padding to move text away from icon */
  border-radius: 10px;
  border: 2px solid rgba(128, 58, 183, 0.20);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  font-size: 15px;
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20"><path d="M19.5 18.5l-5.5-5.5c1-1.3 1.5-2.9 1.5-4.5C15.5 4.9 12.1 1.5 8 1.5S0.5 4.9 0.5 9s3.4 7.5 7.5 7.5c1.6 0 3.2-0.5 4.5-1.5l5.5 5.5c0.3 0.3 0.7 0.3 1 0l1-1c0.3-0.3 0.3-0.7 0-1zM2 9c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" fill="%23999"/></svg>');
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 18px 18px;
}
body #sidebar .search-query:focus,
body #sidebar input[type="search"]:focus,
body #sidebar input:focus{
  outline: none;
  border-color: rgba(128, 58, 183, 0.40);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

/* --- 3) OTHER SEARCH BOXES (Category/Article page headers) --- */
.categoryHead .search-query,
.categoryHead input[type="search"],
.categoryHead input,
#categoryContent .search-query,
#categoryContent input[type="search"],
#categoryContent input,
#docsContent .search-query,
#docsContent input[type="search"],
#docsContent input,
#contentArea .search-query,
#contentArea input[type="search"],
#contentArea input{
  width: 100%;
  height: 52px;
  padding: 0 16px 0 12px;
  border-radius: 10px;
  border: 2px solid rgba(128, 58, 183, 0.20);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  font-size: 15px;
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20"><path d="M19.5 18.5l-5.5-5.5c1-1.3 1.5-2.9 1.5-4.5C15.5 4.9 12.1 1.5 8 1.5S0.5 4.9 0.5 9s3.4 7.5 7.5 7.5c1.6 0 3.2-0.5 4.5-1.5l5.5 5.5c0.3 0.3 0.7 0.3 1 0l1-1c0.3-0.3 0.3-0.7 0-1zM2 9c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" fill="%23999"/></svg>');
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 18px 18px;
}
.categoryHead .search-query:focus,
.categoryHead input[type="search"]:focus,
.categoryHead input:focus,
#categoryContent .search-query:focus,
#categoryContent input[type="search"]:focus,
#categoryContent input:focus,
#docsContent .search-query:focus,
#docsContent input[type="search"]:focus,
#docsContent input:focus,
#contentArea .search-query:focus,
#contentArea input[type="search"]:focus,
#contentArea input:focus{
  outline: none;
  border-color: rgba(128, 58, 183, 0.40);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

/* Sidebar heading (CATEGORIES) if present */
#sidebar h3,
#sidebar h4{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vd-muted);
  font-weight: 900;
  margin: 10px 0 10px 6px;
}

/* Main content column */
#fullArticle,
#mainContent,
#docsContent,
.contentArea,
#content{
  flex: 1 1 auto;
  min-width: 0;
}

/* Main “big box” should be WHITE everywhere (articles + category pages) */
#fullArticle{
  background: #fff;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius-lg);
  box-shadow: var(--vd-shadow);
  padding: 34px 36px;
}

/* Hide "View in Help Scout" button - but NOT dropdown links */
#fullArticle a[href*="helpscout"],
#fullArticle a.btn,
.contentWrapper a[href*="helpscout"],
body a[href*="helpscout"]:not(#serp-dd .result a):not(body #sidebar #serp-dd .result a),
a[href*="helpscout"]:not(#serp-dd .result a):not(body #sidebar #serp-dd .result a) {
  display: none !important;
  visibility: hidden !important;
}

/* Category title */
#fullArticle h1.title,
.contentWrapper h1{
  font-size: 31px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2em;
  color: var(--vd-text);
  margin: 0px 0 60px;
}

/* Sort dropdown */
#categoryHead .sort select,
.categoryHead .sort select,
.sort select,
#fullArticle select{
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  font-weight: 700;
  color: var(--vd-muted);
}

/* Article list inside a category = “cards” with SAME hover as front page */
.articleList,
.article-list,
ul.articleList,
ul.articles,
.articles-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: 2px; /* Small gap between article boxes */
}

.articleList li,
.article-list li,
ul.articleList li,
ul.articles li,
.articles-list li{
  background: #fff;
  border: 1px solid var(--vd-border);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 0;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  position: relative;
  cursor: pointer !important;
  min-height: 0px;
}

.articleList li {
  margin: 0.4em 0;
  padding-left: 25px;
}

/* Category pages - article list links */
.articleList li a,
.article-list li a,
ul.articleList li a,
ul.articles li a{
  padding: 18px 45px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 57px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  color: var(--vd-text) !important;
  text-decoration: none !important;
  /* font-size removed - handled by specific rules below */
  font-weight: 800 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}


/* Article title font-size ONLY on category pages (not search results) */
#categoryContent .articleList li a,
#categoryContent .article-list li a,
#categoryContent ul.articleList li a,
#categoryContent ul.articles li a{
  /* font-size handled by final override at end of file */
  font-weight: 800 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Search results - different padding (exclude from category page styling) */
#serp .articleList li a,
#serp .article-list li a,
#serp ul.articleList li a,
#serp ul.articles li a{
  padding: 18px 20px !important;
}

.articles-list li a{
  padding: 12px 20px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  color: var(--vd-text) !important;
  text-decoration: none !important;
}

/* Search results specific styling */
#serp .articleList>li a {
  font-size: 18px;
  display: inline-block;
  margin-bottom: 5px;
}

/* Make sure all text and elements inside link are clickable */
.articleList li a *,
.article-list li a *,
ul.articleList li a *,
ul.articles li a *,
.articles-list li a *{
  pointer-events: none;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.articleList li:hover,
.article-list li:hover,
ul.articleList li:hover,
ul.articles li:hover,
.articles-list li:hover{
  border-color: rgba(128, 58, 183, 0.45);
  box-shadow: var(--vd-shadow-hover);
  transform: translateY(-2px);
  background: var(--vd-hover-bg);
}

/* Ensure Frequently Read Articles are NOT affected - keep them compact */
.popArticles li a{
  display: flex !important;
  flex-direction: row !important; /* Keep horizontal layout */
  align-items: center !important;
  padding: 16px 18px 16px 64px !important; /* Original padding */
  min-height: auto !important;
}

/* Article title styling - same font as front page, larger size */
.articleList li a .title,
.article-list li a .title,
ul.articleList li a .title,
ul.articles li a .title,
.articles-list li a .title,
.articleList li a strong,
.article-list li a strong,
ul.articleList li a strong,
ul.articles li a strong,
.articles-list li a strong,
.articleList li a b,
.article-list li a b,
ul.articleList li a b,
ul.articles li a b,
.articles-list li a b,
.articleList li a h3,
.article-list li a h3,
ul.articleList li a h3,
ul.articles li a h3,
.articles-list li a h3,
/* Article title styling - only for search results and other pages (NOT category pages) */
#serp .articleList li a > *:first-child,
#serp .article-list li a > *:first-child,
#serp ul.articleList li a > *:first-child,
#serp ul.articles li a > *:first-child,
.search-results .articleList li a > *:first-child,
.search-results .article-list li a > *:first-child,
.search-results ul.articleList li a > *:first-child,
.search-results ul.articles li a > *:first-child{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important; /* Larger than front page (14px) - only for search results */
  color: var(--vd-text) !important;
  margin: 0 0 6px 0 !important; /* Margin below title */
  padding: 0 !important;
  line-height: 1.4 !important;
  display: block;
}

ul.articleList li .snippet,
ul.articles li .snippet,
.articles-list li .snippet,
.articleList li .summary,
.article-list li .summary,
ul.articleList li .summary,
ul.articles li .summary,
.articles-list li .summary,
.articleList li p:not(:first-child),
.article-list li p:not(:first-child),
ul.articleList li p:not(:first-child),
ul.articles li p:not(:first-child),
.articles-list li p:not(:first-child),
.articleList li a > *:not(:first-child),
.article-list li a > *:not(:first-child),
ul.articleList li a > *:not(:first-child),
ul.articles li a > *:not(:first-child),
.articles-list li a > *:not(:first-child),
.articleList li a p,
.article-list li a p,
ul.articleList li a p,
ul.articles li a p,
.articles-list li a p,
.articleList li a span:not(.title),
.article-list li a span:not(.title),
ul.articleList li a span:not(.title),
ul.articles li a span:not(.title),
.articles-list li a span:not(.title){
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Search results page paragraph styling */
#serp p{
  font-size: 14px !important;
  color: #585858 !important;
  line-height: 1.55em !important;
  margin-bottom: 1.5em !important;
}


/* Article typography */
#fullArticle p,
#fullArticle li,
#fullArticle ul,
#fullArticle ol{
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0.5em;
  color: #334155;
}
#fullArticle h2{
  font-size: 27px;
  font-weight: 900;
  color: var(--vd-text);
  margin: 6px 0 1px;
}
#fullArticle h3{
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  margin: 0px 0 0px;
}

/* Code blocks */
#fullArticle code{
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #e11d48;
  font-weight: 700;
}
#fullArticle pre{
  background: #1e293b;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 12px;
  overflow-x:auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
#fullArticle pre code{
  background: transparent;
  color: inherit;
  padding: 0;
  font-weight: 500;
}

/* Footer */
footer.center{
  text-align:center;
  padding: 40px 0 60px;
  margin-top: 40px;
  color: #94a3b8;
  border-top: none;
}

/* ------------------------------
   6) Responsive
-------------------------------- */
@media (max-width: 768px) {
  .navbar .btn-navbar {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
    width: 0;
    height: 0;
    text-shadow: none;
    border: 0;
    background: 0 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

@media (max-width: 430px){
  .popArticles{ grid-template-columns: 1fr; }
  .category-list{ grid-template-columns: 1fr; }

  .row-fluid{
    display:block !important;
    padding: 18px 0 48px;
  }
  #sidebar{
    position: relative;
    top: auto;
    width: auto;
    margin-bottom: 16px;
  }
  #fullArticle{
    padding: 26px 22px;
  }

  
  /* Mobile: docsSearch styling */
  #docsSearch {
    padding: 1.5em 0 1.3em !important;
    margin: 0 -9px 3em !important;
  }
  /* Mobile navbar brand styling */
  .navbar .brand::after {
    content: "Helpcenter" !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    color: var(--vd-text) !important;
    border-bottom: 2px solid var(--vd-accent) !important;
    padding-bottom: 0px !important;
    margin-left: 10px !important;
    margin-top: 4px !important;
  }
  
  /* Mobile: margin between search bar and dropdown */
  #serp-dd {
    margin-top: 4px !important;
  }
  
  /* Mobile: search bar styling */
  #searchBar .search-query {
    border-radius: 5px !important;
    margin-right: -16px !important;
    margin-bottom: 8px !important;
    margin-top: -10px !important;
  }
  
  /* Mobile most-pop-articles styling */
  body .most-pop-articles::before {
    display: block !important;
    margin: 0px 0px 40px 7px !important;
    padding: 0px !important;
  }
  
  .most-pop-articles::before {
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding-left: 0 !important;
    background-position: 0 50% !important;
    font-size: 16px !important;
  }
  
  /* Mobile: Ensure arrows are always on the right */
  .popArticles a {
    justify-content: space-between !important;
  }
  
  .popArticles a::after {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  
  /* Mobile: Body-specific rules to override */
  body .most-pop-articles .popArticles > li > a {
    justify-content: space-between !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    line-height: 1.2 !important;
    padding: 0 20px 0 25px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  
  body .most-pop-articles .popArticles > li > a span {
    white-space: nowrap !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Ensure text elements inside link truncate */
  body .most-pop-articles .popArticles > li > a > *:not(::after) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  body .most-pop-articles .popArticles > li > a::after {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  
  /* Mobile: Override two-col padding */
  .most-pop-articles.two-col .popArticles a {
    padding: 0 4px 0 5px !important;
  }
  
  /* Mobile: two-col list item styling */
  .most-pop-articles.two-col .popArticles li {
    text-align: left !important;
    float: none !important;
    width: 100% !important;
  }
  
  /* Mobile: list item padding */
  body .most-pop-articles .popArticles > li {
    padding: 3px 0px !important;
    border-radius: 10px !important;
  }
  
  /* Mobile: Category list rounded corners on left side */
  body #sidebar .nav-list,
  body #sidebar ul{
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
  }
  
  /* Mobile: Frequently Read Articles - individual adjustment */
  body .most-pop-articles {
    margin: 22px auto 0 auto !important;
    padding: 0 10px 0px 0px !important;
  }
  
  /* Mobile: Browse All Categories - individual adjustment */
  body .category-list {
    padding: 0 14px 0px 19px !important;
    margin: 22px auto 0 auto !important;
    max-width: 100% !important;
  }
  
  /* Mobile: Article list on category pages (Revisioner, Hotdogs etc.) - individual adjustment */
  .articleList li a,
  .article-list li a,
  ul.articleList li a,
  ul.articles li a {
    padding: 22px 38px !important;
  }
  
  /* Mobile: Category content container padding */
  body #categoryContent {
    padding: 22px 14px 40px 19px !important;
  }
  
  /* Mobile: Category head padding to match */
  body #categoryHead {
    padding-left: 19px !important;
    padding-right: 14px !important;
  }
}
/* =========================================================
   Front page layout + sort select sizing
   ========================================================= */

/* 1) Sort dropdown exactly like you want */
#categoryHead .sort select{
    width: 145px !important;
    height: 35px !important;
    margin: 0 !important;
    line-height: 24px !important;
    font-size: 11px !important;
  }
  
  /* =========================================================
     FRONT PAGE: Frequently Read Articles
     - Fix icon overlap + nicer spacing
     ========================================================= */
  .popArticles li{
    padding: 12px 14px !important;
  }
  
  .popArticles a{
    padding-left: 50px !important;
    min-height: 48px !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  
  /* Icon-related code removed */
  
  /* =========================================================
     FRONT PAGE: Browse All Categories
     - Fix tiny boxes + weird line breaks + huge gaps
     ========================================================= */
  
  /* Make the grid fill the available width nicely */
  .category-list{
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
  
  /* Ensure every category card stretches to full column width */
  .category-list .category{
    width: 100% !important;
    min-height: 120px !important;
    padding: 22px 22px !important;
    align-items: center !important;
  }
  
  /* Stop ugly word breaks like "Add-\nons" */
  .category-list .category,
  .category-list .category *{
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
  
  /* Make category title readable (no tiny pill look) */
  .category-list .category h3{
    margin: 0 !important;
    text-align: left !important;
    align-self: center !important; /* Center vertically */
    width: 100% !important;
  }
  
  .category-list .category h3 a{
    background: transparent !important;
    color: var(--vd-text) !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-align: left !important;
    align-self: center !important; /* Center vertically */
    width: 100% !important;
  }
  
  /* Ensure all category h3 titles are 18px to prevent text wrapping */
  .category-list .category h3,
  .category-list .category h3 a {
    font-size: 18px !important;
  }
  
  /* Keep description clean */
  .category-list .category p{
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--vd-muted) !important;
    max-width: 46ch !important;
  }
  
  /* Keep your hover feel */
  .category-list .category:hover{
    background: var(--vd-hover-bg) !important;
    box-shadow: var(--vd-shadow-hover) !important;
    border-color: rgba(128, 58, 183, 0.45) !important;
    transform: translateY(-2px) !important;
  }
  /* =========================================================
   TIGHTER HOME LAYOUT
   ========================================================= */

/* Section spacing tighter */
.most-pop-articles{
    margin: 26px auto 0 auto !important;
    padding-top: 0 !important;
  }
  
  /* Make the header sit like a real section title (higher up) */
  .most-pop-articles::before{
    display: block !important;
    margin: 0 0 14px 0 !important;     /* closer to cards */
    padding-left: 0 !important;        /* align with grid */
    background-position: 0 50% !important;
  }
  
  /* Frequently Read grid tighter + smaller cards */
  .popArticles{
    gap: 10px !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .popArticles li{
    padding: 12px 14px !important;     /* consistent padding */
    border-radius: 10px !important;
  }
  
  /* Less tall row + closer text */
  .popArticles a{
    padding-left: 50px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  
  /* Icon-related code removed */
  
  /* =========================================================
     Browse Categories tighter + smaller cards
     ========================================================= */
  .category-list{
    margin: 18px auto 48px auto !important;
    gap: 12px !important;
  }
  
  .category-list::before{
    margin-bottom: 14px !important;
  }
  
  /* Make category cards a bit smaller + tighter */
  .category-list .category{
    min-height: 92px !important;
    padding: 16px 16px !important;
    border-radius: 10px !important;
    gap: 12px !important;
  }
  
  /* Smaller bubble */
  .category-list .category::before{
    width: 100px !important;
    height: 100px !important;
    flex: 0 0 100px !important;
  }
  
  /* Category title matches Frequently Read Articles */
  .category-list .category h3 a{
    font-weight: 800 !important;
    margin-bottom: 2px !important;
  }
  
  /* Optional: keep everything aligned flush - Desktop only */
  @media (min-width: 401px){
  body .category-list::before{
    margin: 0px 0px 12px 5px !important;
  }
  .most-pop-articles,
  .category-list,
  .collection{
    padding-left: 24px !important;
    padding-right: 24px !important;
    }
  }
  /* =========================================================
   FORCE HOME PAGE TIGHT LAYOUT (Hard override)
   ========================================================= */

/* --- Sort select EXACT --- */
#categoryHead .sort select{
    width: 145px !important;
    height: 35px !important;
    margin: 0 !important;
    line-height: 24px !important;
    font-size: 11px !important;
  }
  
  /* --- Frequently Read Articles: header higher + tighter --- */
  body .most-pop-articles{
    margin: 22px auto 0 auto !important;
    padding: 0 24px !important;
  }
  
  body .most-pop-articles::before{
    display: block !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }
  
  body .most-pop-articles .popArticles{
    margin-top: 0 !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  
  body .most-pop-articles .popArticles > li{
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }
  
  /* Text align for two-col layout */
  .most-pop-articles.two-col .popArticles li{
    text-align: left !important;
  }
  
  body .most-pop-articles .popArticles > li > a{
    padding-left: 50px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  
  /* Icon-related code removed */
  
  /* Limit to only 6 most popular articles */
  body .most-pop-articles .popArticles > li:nth-child(n+7){
    display: none !important;
  }
  
  /* --- Browse All Categories: smaller cards + tighter grid --- */
  @media (min-width: 401px){
  body .category-list{
    margin: 18px auto 46px auto !important;
    padding: 0 24px !important;
    gap: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  }
  
  
  body .category-list .category{
    min-height: 92px !important;
    padding: 16px 16px !important;
    border-radius: 10px !important;
    gap: 12px !important;
    text-align: left !important; /* Force left alignment */
  }
  
  body .category-list .category::before{
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px !important;
  }
  
  body .category-list .category h3{
    margin: 0 !important;
    text-align: left !important;
    align-self: center !important; /* Center vertically */
    width: 100% !important;
  }
  
  body .category-list .category h3 a{
    font-weight: 800 !important;
    text-align: left !important;
    align-self: center !important; /* Center vertically */
    width: 100% !important;
  }
  
  /* Mobile: stack */
  @media (max-width: 430px){
    body .category-list{ grid-template-columns: 1fr !important; }
  }
  /* =========================================================
   FIX: Center text vertically in Frequently Read Articles
   (ONLY these boxes)
   ========================================================= */

body .most-pop-articles .popArticles > li > a{
    display: flex !important;
    align-items: center !important;      /* vertical centering */
    gap: 14px !important;
    line-height: 1.2 !important;
    padding-left: 25px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  
  /* Make sure text itself behaves nicely */
  body .most-pop-articles .popArticles > li > a span,
  body .most-pop-articles .popArticles > li > a{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  
  /* Ensure text elements inside link truncate */
  body .most-pop-articles .popArticles > li > a > *:not(::after) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Icon-related code removed */
  /* =========================================================
   Frequently Read Articles — header spacing fix
   ========================================================= */
  @media (min-width: 401px){
body .most-pop-articles::before{
    display: block !important;
    margin: 0 0 40px 0 !important;  /* more air before boxes */
    padding: 0 !important;
    }
    
    /* Desktop: Category list rounded corners on left side */
    body #sidebar .nav-list,
    body #sidebar ul{
      border-top-left-radius: 12px !important;
      border-bottom-left-radius: 12px !important;
    }
  }
  /* =========================================================
   LEFT SIDEBAR on Category + Article pages
   (Search + Categories to the LEFT)
   ========================================================= */

/* Make main layout a flex row (if it isn't already) */
body .row-fluid{
    display: flex !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  
  /* Sidebar always on the LEFT */
  body #sidebar{
    order: 0 !important;
    flex: 0 0 340px !important;
    width: 340px !important;
    margin: 0 !important;
  }
  
  /* Main content on the RIGHT */
  body #main-content,
  body #fullArticle,
  body .contentWrapper,
  body .main-content{
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  /* In case HelpScout uses floats on these pages, disable them */
  body #sidebar,
  body #main-content,
  body #fullArticle{
    float: none !important;
  }
  
  /* Keep sidebar sticky (optional, remove if you don't want) */
  body #sidebar{
    position: sticky !important;
    top: 92px !important;
    align-self: flex-start !important;
  }
  
  /* Mobile: stack sidebar above content */
  @media (max-width: 430px){
    body .row-fluid{
      flex-direction: column !important;
    }
    body #sidebar{
      width: 100% !important;
      flex: 1 1 auto !important;
      position: relative !important;
      top: auto !important;
    }
  }
  /* =========================================================
   Sidebar card spacing + remove contentWrapper padding
   + give article more space (all articles)
   ========================================================= */


/* 2) Remove padding from contentWrapper (fix the broken "padding: px px;") */
.contentWrapper{
  padding: 0 !important;
}

/* 3) Articles: move sidebar more LEFT + give main article more width */
body .row-fluid{
  gap: 18px !important;                 /* smaller gap so content gets more room */
}

/* Make sidebar narrower so article area becomes bigger */
body #sidebar{
  flex: 0 0 280px !important;           /* was ~320-340 */
  width: 280px !important;
}

/* Make article/content column take the remaining space */
body #fullArticle,
body #main-content,
body .contentWrapper{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* OPTIONAL: slightly reduce page side padding on article/category pages
   so sidebar sits further left and article gets more room */
body .container-fluid{
  max-width: var(--vd-container) !important;
  padding-left: 16px !important;        /* was 24 */
  padding-right: 16px !important;
}

/* Mobile: keep it stacked */
@media (max-width: 430px){
  body #sidebar{
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  body .container-fluid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Remove weird corner notch / spike on article card */
#fullArticle::before,
#fullArticle::after,
.article::before,
.article::after {
  display: none !important;
}

/* Ensure article card is fully rounded */
#fullArticle,
.article,
.contentWrapper {
  border-radius: 16px !important;
  overflow: hidden !important;
}
/* Sidebar tighter & more left */
#sidebar {
    width: 260px !important;
    flex: 0 0 260px !important;
    margin-left: 0 !important;
  }
  /* Article area gets more space */
#fullArticle,
#main-content {
  max-width: none !important;
  width: 100% !important;
}

/* Reduce gap between sidebar and article */
.row-fluid {
  gap: 16px !important;
}
/* Make article pages wider overall */
.container-fluid {
    max-width: 1240px !important; /* was ~1120 */
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* preamium look slet */
  #fullArticle {
    padding: 40px 44px !important;
  }
  /* =========================================================
   UNIFY Category + Article layout (use article-card everywhere)
   + remove all notches/spikes
   + make bottom feedback look integrated
   ========================================================= */

/* 1) Make BOTH category and article content use the same card look */
#fullArticle,
.contentWrapper,
#main-content,
.article,
.category,
#categoryHead,
#categoryContent {
  background: #fff !important;
  border: 1px solid var(--vd-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--vd-shadow) !important;
  overflow: hidden !important; /* important to kill corner artifacts */
}

/* Ensure consistent internal padding (same feel everywhere) */
#fullArticle,
.contentWrapper,
#main-content,
#categoryContent {
  padding: 40px 44px !important;
}

/* If category page has a header area with title/sort, keep it inside the same card */
#categoryHead{
  border-bottom: 1px solid var(--vd-border) !important;
  padding: 26px 44px !important;
  border-radius: 16px !important; /* Runde hjørner i bunden også */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  position: relative !important;
  overflow: visible !important;
  z-index: auto !important;
}

/* Category title in categoryHead */
#categoryHead h1,
#categoryHead hgroup,
#categoryHead hgroup h1 {
  margin: 0 !important;
  width: calc(100% - 180px) !important; /* Reserve space for sort dropdown */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(20px, 4vw, 32px) !important; /* Responsive font size that scales down */
  line-height: 1.2em !important; /* Line height for category page heading */
}

/* Category description text - move below title */
#categoryHead p,
#categoryHead .description,
#categoryHead hgroup p,
#categoryHead hgroup + p {
  margin: 0 !important;
  width: calc(100% - 180px) !important; /* Reserve space for sort dropdown */
  font-size: 14px !important;
  color: var(--vd-muted) !important;
  line-height: 1.5em !important;
}

/* Sort dropdown in categoryHead - positioned absolutely to the right */
#categoryHead .sort {
  position: absolute !important;
  top: 26px !important;
  right: 44px !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 1000 !important;
}

#categoryHead .sort form {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
}

#categoryHead .sort select {
  flex: 0 0 auto !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1001 !important;
}

/* Ensure parent containers don't clip the dropdown */
#categoryHead,
#categoryHead hgroup,
#main-content,
#categoryContent {
  overflow: visible !important;
}

/* If category page uses separate boxes, remove double borders */
#categoryContent{
  border: none !important;
  box-shadow: none !important;
  border-radius: 16px !important; /* Runde hjørner i toppen også */
  padding: 22px 44px 40px !important;
}

/* 2) Remove ALL known HelpScout "notch" pseudo-elements */
#fullArticle::before, #fullArticle::after,
.contentWrapper::before, .contentWrapper::after,
#main-content::before, #main-content::after,
.article::before, .article::after,
#categoryHead::before, #categoryHead::after,
#categoryContent::before, #categoryContent::after,
#categoryWrap::before, #categoryWrap::after,
#docsContent::before, #docsContent::after,
#contentArea::before, #contentArea::after {
  content: none !important;
  display: none !important;
}

/* Sometimes the notch is an absolutely positioned child element */
#fullArticle .corner,
#main-content .corner,
.contentWrapper .corner,
.article .corner {
  display: none !important;
}

/* 3) Make bottom "Did this answer your question?" look like part of the article card */
.articleFoot,
#articleFoot,
#feedback,
.hs-article-feedback,
#fullArticle .articleFoot,
#fullArticle .footer,
#fullArticle footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Target the actual feedback bar (HelpScout varies by theme) */
#fullArticle .answer,
#fullArticle .didThisAnswer,
#fullArticle .question,
#fullArticle .helpful,
#fullArticle .rate-article,
#fullArticle .rating,
#fullArticle .article-feedback,
#fullArticle .kb-feedback,
#fullArticle .feedback {
  margin: 28px -44px -40px !important; /* stretch to card edges */
  padding: 18px 44px !important;
  background: rgba(15, 23, 42, 0.03) !important;
  border-top: 1px solid var(--vd-border) !important;
  border-radius: 0 0 16px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Make the emoji/buttons look nicer + aligned */
#fullArticle .rate-article a,
#fullArticle .rating a,
#fullArticle .article-feedback a,
#fullArticle .kb-feedback a,
#fullArticle .feedback a{
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid var(--vd-border) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.06) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

#fullArticle .rate-article a:hover,
#fullArticle .rating a:hover,
#fullArticle .article-feedback a:hover,
#fullArticle .kb-feedback a:hover,
#fullArticle .feedback a:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(128,58,183,0.40) !important;
  box-shadow: var(--vd-shadow-hover) !important;
}

/* 4) Keep it nice on mobile */
@media (max-width: 430px){
  /* Mobile: Force sidebar and main content to stack vertically - override everything */
  body .row-fluid,
  body .container-fluid .row-fluid,
  .row-fluid,
  .container-fluid .row-fluid{ 
    flex-direction: column !important; 
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  
  body #sidebar,
  body .row-fluid #sidebar,
  body .container-fluid #sidebar,
  #sidebar,
  .row-fluid #sidebar,
  .container-fluid #sidebar{ 
    width: 100% !important; 
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    position: static !important;
    top: auto !important;
    align-self: stretch !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  body #main-content,
  body .row-fluid #main-content,
  body .container-fluid #main-content,
  #main-content,
  .row-fluid #main-content,
  .container-fluid #main-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  body #fullArticle,
  body .row-fluid #fullArticle,
  body .container-fluid #fullArticle,
  #fullArticle,
  .row-fluid #fullArticle,
  .container-fluid #fullArticle {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Mobile: Ensure categoryContent stacks vertically */
  body #categoryContent {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }
  
  /* Mobile: Keep categoryHead as flex column (same as desktop) so description is below title */
  body #categoryHead {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
    overflow: visible !important;
    position: relative !important;
  }
  
  body #categoryHead h1,
  body #categoryHead hgroup,
  body #categoryHead hgroup h1 {
    margin: 0 !important;
    width: calc(100% - 180px) !important; /* Reserve space for sort dropdown */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(18px, 5vw, 28px) !important; /* Responsive font size that scales down */
  }
  
  /* Category description text on mobile */
  body #categoryHead p,
  body #categoryHead .description,
  body #categoryHead hgroup p,
  body #categoryHead hgroup + p {
    margin: 0 !important;
    width: calc(100% - 180px) !important; /* Reserve space for sort dropdown */
    font-size: 14px !important;
    color: var(--vd-muted) !important;
    line-height: 1.5em !important;
  }
  
  body #categoryHead .sort {
    position: absolute !important;
    top: 22px !important;
    right: 14px !important;
    overflow: visible !important;
    z-index: 1000 !important;
  }
  
  body #categoryHead .sort select {
    position: relative !important;
    z-index: 1001 !important;
  }
  
  #fullArticle,
  .contentWrapper,
  #main-content,
  #categoryContent{
    padding: 22px 14px 40px 19px !important;
  }
  #categoryHead{
    padding: 22px 14px 22px 19px !important;
  }
  #fullArticle .answer,
  #fullArticle .didThisAnswer,
  #fullArticle .question,
  #fullArticle .helpful,
  #fullArticle .rate-article,
  #fullArticle .rating,
  #fullArticle .article-feedback,
  #fullArticle .kb-feedback,
  #fullArticle .feedback{
    margin: 22px -22px -26px !important;
    padding: 16px 22px !important;
  }
}
/* =========================================================
   CLEAN, PRETTY LAYOUT (no nested cards) — all pages
   ========================================================= */

/* ---------- PAGE LAYOUT ---------- */
body .container-fluid{
    max-width: 1240px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  body .row-fluid{
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  
  /* Sidebar left */
  body #sidebar{
    flex: 0 0 280px !important;
    width: 280px !important;
  }
  
  /* Main content right */
  body #main-content,
  body #fullArticle{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  /* Mobile stack */
  @media (max-width: 430px){
    /* Mobile: Force sidebar and main content to stack vertically - override everything */
    body .row-fluid,
    body .container-fluid .row-fluid,
    .row-fluid,
    .container-fluid .row-fluid{ 
      flex-direction: column !important; 
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 0 !important;
      align-items: stretch !important;
    }
    
    body #sidebar,
    body .row-fluid #sidebar,
    body .container-fluid #sidebar,
    #sidebar,
    .row-fluid #sidebar,
    .container-fluid #sidebar{ 
      width: 100% !important; 
      max-width: 100% !important;
      flex: 0 0 auto !important;
      flex-basis: auto !important;
      flex-grow: 0 !important;
      flex-shrink: 0 !important;
      order: 1 !important;
      position: static !important;
      top: auto !important;
      align-self: stretch !important;
      float: none !important;
      clear: both !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    body #main-content,
    body .row-fluid #main-content,
    body .container-fluid #main-content,
    #main-content,
    .row-fluid #main-content,
    .container-fluid #main-content {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 auto !important;
      flex-basis: auto !important;
      flex-grow: 0 !important;
      flex-shrink: 0 !important;
      order: 2 !important;
      display: flex !important;
      flex-direction: column !important;
      min-width: 0 !important;
      float: none !important;
      clear: both !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    body #fullArticle,
    body .row-fluid #fullArticle,
    body .container-fluid #fullArticle,
    #fullArticle,
    .row-fluid #fullArticle,
    .container-fluid #fullArticle {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 auto !important;
      flex-basis: auto !important;
      flex-grow: 0 !important;
      flex-shrink: 0 !important;
      order: 2 !important;
      min-width: 0 !important;
      float: none !important;
      clear: both !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    /* Mobile: Ensure categoryHead and categoryContent stack vertically */
    body #categoryContent {
      display: block !important;
      width: 100% !important;
      float: none !important;
    }
    
    /* Mobile: Keep categoryHead as flex column (same as desktop) so description is below title */
    body #categoryHead {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      width: 100% !important;
      gap: 21px !important;
      overflow: visible !important;
      position: relative !important;
    }
    
  body #categoryHead h1,
  body #categoryHead hgroup,
  body #categoryHead hgroup h1 {
    margin: 0 !important;
    width: calc(100% - 180px) !important; /* Reserve space for sort dropdown */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(18px, 5vw, 28px) !important; /* Responsive font size that scales down */
    line-height: 1.2em !important; /* Line height for category page heading */
  }
  
  /* Category description text on mobile */
  body #categoryHead p,
  body #categoryHead .description,
  body #categoryHead hgroup p,
  body #categoryHead hgroup + p {
    margin: 0 !important;
    width: calc(100% - 0px) !important; /* Reserve space for sort dropdown */
    font-size: 14px !important;
    color: var(--vd-muted) !important;
    line-height: 1.5em !important;
  }
    
    body #categoryHead .sort {
      position: absolute !important;
      top: 22px !important;
      right: 14px !important;
      overflow: visible !important;
      z-index: 1000 !important;
    }
    
    body #categoryHead .sort select {
      position: relative !important;
      z-index: 1001 !important;
    }
    
    /* Mobile most-pop-articles override */
    body .most-pop-articles::before {
      display: block !important;
      margin: 0 0 40px 7px !important;
      padding: 0 !important;
    }
    
    /* Mobile: Frequently Read Articles - individual adjustment */
    body .most-pop-articles {
      margin: 22px auto 0 auto !important;
      padding: 0 10px 0px 0px !important;
    }
    
    /* Mobile: Browse All Categories - individual adjustment */
    body .category-list {
      padding: 0 14px 0px 19px !important;
      margin: 22px auto 0 auto !important;
      max-width: 100% !important;
    }
    
    /* Mobile: Ensure arrows are always on the right */
    body .most-pop-articles .popArticles > li > a {
      justify-content: space-between !important;
      display: flex !important;
      align-items: center !important;
      gap: 14px !important;
      line-height: 1.2 !important;
      padding: 0 20px 0 25px !important;
      min-height: 44px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      white-space: nowrap !important;
      text-align: left !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      min-width: 0 !important;
    }
    
    body .most-pop-articles .popArticles > li > a span {
      white-space: nowrap !important;
      text-align: left !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
    
    /* Ensure text elements inside link truncate */
    body .most-pop-articles .popArticles > li > a > *:not(::after) {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
    
    body .most-pop-articles .popArticles > li > a::after {
      flex-shrink: 0 !important;
      margin-left: auto !important;
    }
    
    /* Mobile: Override two-col padding */
    .most-pop-articles.two-col .popArticles a {
      padding: 0 4px 0 5px !important;
    }
    
    /* Mobile: two-col list item styling */
    .most-pop-articles.two-col .popArticles li {
      text-align: left !important;
      float: none !important;
      width: 100% !important;
    }
    
    /* Mobile: list item padding */
    body .most-pop-articles .popArticles > li {
      padding: 3px 0px !important;
      border-radius: 10px !important;
    }
    
    /* Mobile: Category list padding and margin to match Frequently Read Articles */
    body .category-list {
      padding: 0 0cap 0px 0px !important;
      margin: 22px auto 0 auto !important;
      max-width: 100% !important;
    }
    
    /* Mobile: Article list on category pages (Revisioner, Hotdogs etc.) - individual adjustment */
    .articleList li a,
    .article-list li a,
    ul.articleList li a,
    ul.articles li a {
      padding: 22px 38px !important;
    }
    
    /* Mobile: Category content container padding */
    body #categoryContent {
      padding: 22px 14px 40px 19px !important;
    }
    
    /* Mobile: Category head padding to match */
    body #categoryHead {
      padding-left: 19px !important;
      padding-right: 14px !important;
    }
  }
  
  /* ---------- REMOVE NESTED CARDS (THE UGLY PART) ---------- */
  /* Make wrappers transparent so we only see ONE card */
  body .contentWrapper,
  body #main-content{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  /* ---------- THE ONE ARTICLE/CATEGORY CARD ---------- */
  body #fullArticle,
  body #categoryContent{
    background: #fff !important;
    border: 1px solid var(--vd-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--vd-shadow) !important;
    padding: 42px 48px !important;
    overflow: hidden !important;
  }
  
  /* NOTE: Artikel styling er nu flyttet til "ARTIKLER - ALLE REGLER SAMLET" sektionen nederst i filen */
  
  /* ---------- SIDEBAR SEARCH + CATEGORIES CARD ---------- */
  #sidebar .search input,
  #sidebar input[type="search"]{
    width: 100% !important;
  }
  

/* =========================================================
   MAKE ALL SEARCH RESULT BOXES FULLY CLICKABLE
   ========================================================= */

/* Search results page - make all result boxes fully clickable */
#searchResults .result,
#searchResults li,
.search-results .result,
.search-results li,
.results .result,
.results li,
#contentArea .result,
#contentArea li[class*="result"]{
  padding: 0 !important;
  position: relative !important;
  margin-bottom: 2px !important; /* Very tight spacing between boxes */
  cursor: pointer !important;
}

/* Make search result links cover the ENTIRE box - consolidated rule */
#searchResults .result a,
#searchResults li a,
.search-results .result a,
.search-results li a,
.results .result a,
.results li a,
#contentArea .result a,
#contentArea li[class*="result"] a{
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  inset: 0 !important; /* Covers entire box: top:0, right:0, bottom:0, left:0 */
  width: 100% !important;
  height: 100% !important;
  padding: 16px 20px 16px 20px !important; /* Reduced padding, icon will be positioned separately */
  text-decoration: none !important;
  box-sizing: border-box !important;
  color: var(--vd-text) !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  gap: 6px !important; /* Better spacing between title row and description */
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Make sure all text inside search result links is clickable and doesn't show text cursor */
#searchResults .result a *,
#searchResults li a *,
.search-results .result a *,
.search-results li a *,
.results .result a *,
.results li a *,
#contentArea .result a *,
#contentArea li[class*="result"] a *{
  pointer-events: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Ensure search result boxes have proper styling */
#searchResults .result,
#searchResults li,
.search-results .result,
.search-results li,
.results .result,
.results li,
#contentArea .result,
#contentArea li[class*="result"]{
  background: #fff !important;
  border: 1px solid var(--vd-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(15,23,42,0.05) !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: 60px !important;
  cursor: pointer !important;
}

/* Ensure no other elements can block clicks on the box */
#searchResults .result > *:not(a),
#searchResults li > *:not(a),
.search-results .result > *:not(a),
.search-results li > *:not(a),
.results .result > *:not(a),
.results li > *:not(a),
#contentArea .result > *:not(a),
#contentArea li[class*="result"] > *:not(a){
  pointer-events: none !important;
  position: relative !important;
  z-index: 1 !important;
}

#searchResults .result:hover,
#searchResults li:hover,
.search-results .result:hover,
.search-results li:hover,
.results .result:hover,
.results li:hover,
#contentArea .result:hover,
#contentArea li[class*="result"]:hover{
  border-color: rgba(128, 58, 183, 0.45) !important;
  box-shadow: var(--vd-shadow-hover) !important;
  transform: translateY(-2px) !important;
}


/* Title row - icon and title on same line */
#searchResults .result a h3,
#searchResults .result a h4,
#searchResults li a h3,
#searchResults li a h4,
.search-results .result a h3,
.search-results .result a h4,
.search-results li a h3,
.search-results li a h4,
.results .result a h3,
.results .result a h4,
.results li a h3,
.results li a h4,
#contentArea .result a h3,
#contentArea .result a h4,
#contentArea li[class*="result"] a h3,
#contentArea li[class*="result"] a h4,
#serp-dd .result a h3,
#serp-dd .result a h4{
  margin: 0 !important;
  padding: 0 0 0 50px !important; /* Make room for icon on left */
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--vd-text) !important;
  pointer-events: none !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  display: block !important;
}

#searchResults .result a p,
#searchResults .result a span,
#searchResults li a p,
#searchResults li a span,
.search-results .result a p,
.search-results .result a span,
.search-results li a p,
.search-results li a span,
.results .result a p,
.results .result a span,
.results li a p,
.results li a span,
#contentArea .result a p,
#contentArea .result a span,
#contentArea li[class*="result"] a p,
#contentArea li[class*="result"] a span,
#serp-dd .result a p,
#serp-dd .result a span{
  margin: 0 !important;
  padding: 0 !important;
  color: var(--vd-muted) !important;
  font-size: 13px !important;
  pointer-events: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
 /* =========================================================
   SEARCH DROPDOWNS - CONSOLIDATED
   All dropdowns work the same way
   ========================================================= */

/* Dropdown container - positioned relative to search input */
#searchBar,
#sidebar,
#sidebar .search,
#sidebar form,
#sidebar .searchbox,
#sidebar .searchBox{
  position: relative !important;
}

/* Front page dropdown - ONLY for front page */
#serp-dd{
  position:absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  border-radius: 10px !important;
  overflow-x: hidden !important;
  border: 1px solid rgba(32,32,32,0.12) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12) !important;
  background:#fff !important;
  z-index: var(--z-dropdown) !important;
  margin-top: -22px !important;
}
#serp-dd:before, #serp-dd:after{ display:none !important; }
#serp-dd .result li{
  padding: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
}
#serp-dd .result li:last-child{ border-bottom:none !important; }
#serp-dd .result a{ 
  font-weight:700 !important; 
  color: var(--vd-text) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
#serp-dd .result a * {
  pointer-events: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
#serp-dd .result .active a{ background: var(--vd-accent) !important; color:#fff !important; }
/* =========================================================
   SIDEBAR DROPDOWN (Category/Article pages only)
   ========================================================= */

/* Sidebar dropdown - SAME STYLING AS FRONT PAGE */
body #sidebar #serp-dd{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  margin-top: 8px !important; /* Same as front page */
  border-radius: 10px !important; /* Same as front page */
  background: #fff !important; /* Same as front page */
  border: 1px solid rgba(32,32,32,0.12) !important; /* Same as front page */
  box-shadow: 0 10px 30px rgba(15,23,42,0.12) !important; /* Same as front page */
  padding: 0 !important;
  overflow: visible !important;
  z-index: var(--z-dropdown) !important;
  max-height: 400px !important; /* Same as front page */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body #sidebar #serp-dd::before,
body #sidebar #serp-dd::after{
  display: none !important;
  content: none !important;
}
/* =========================================================
   SIDEBAR DROPDOWN - WITH RESULTS (ARTICLES)
   Edit this section to customize dropdown when showing article results
   ========================================================= */
body #sidebar #serp-dd .result:has(li a),
body #sidebar #serp-dd .result:has(> li > a) {
  margin: -3px !important; /* EDIT THIS: Change margin for results dropdown */
  padding: 0px !important; /* EDIT THIS: Change padding for results dropdown */
  list-style: none !important;
  max-height: 485px !important;
  overflow: auto !important;
}

/* =========================================================
   SIDEBAR DROPDOWN - HIDE WHEN NO RESULTS - COMPLETELY REMOVED
   Hide the entire sidebar dropdown when there are no results
   ========================================================= */
/* Hide entire sidebar dropdown when it only contains "no results" (no article links) */
body #sidebar #serp-dd:not(:has(.result li a)),
body #sidebar #serp-dd:not(:has(.result > li > a)),
/* Also hide if result container is empty or only has "no results" */
body #sidebar #serp-dd .result:not(:has(li a)),
body #sidebar #serp-dd .result:not(:has(> li > a)),
/* Hide "no results" message elements */
body #sidebar #serp-dd .result li:not(:has(a)),
body #sidebar #serp-dd .result > li:not(:has(a)) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body #sidebar #serp-dd .result li{
  padding: 0 !important; /* Same as front page */
  border-bottom: 1px solid #f1f5f9 !important; /* Same as front page */
  position: relative !important; /* Same as front page */
  cursor: pointer !important; /* Same as front page */
  margin: 0 !important; /* Same as front page */
  border-radius: 10px !important; /* Same as front page */
  overflow: hidden !important; /* Same as front page */
  background: transparent !important; /* Same as front page */
  border-left: none !important; /* Remove sidebar-specific borders */
  border-right: none !important; /* Remove sidebar-specific borders */
  border-top: none !important; /* Remove sidebar-specific borders */
}
body #sidebar #serp-dd .result li:first-child{
  border-top: none !important; /* Remove sidebar-specific border */
  border-radius: 10px !important; /* Same as front page */
  box-shadow: none !important; /* Remove sidebar-specific shadow */
}
body #sidebar #serp-dd .result li:last-child{
  border-bottom: none !important; /* Same as front page */
}
body #sidebar #serp-dd .result a{
  display: block !important;
  width: 100% !important;
  height: 100% !important; /* Same as front page */
  padding: 14px 16px !important; /* Same as front page */
  font-weight: 700 !important; /* Same as front page */
  color: var(--vd-text) !important; /* Same as front page */
  text-decoration: none !important;
  box-sizing: border-box !important; /* Same as front page */
  position: relative !important; /* Same as front page */
  z-index: 2 !important; /* Same as front page */
  pointer-events: auto !important; /* Same as front page */
  cursor: pointer !important;
  user-select: none !important; /* Same as front page */
  -webkit-user-select: none !important; /* Same as front page */
  -moz-user-select: none !important; /* Same as front page */
  -ms-user-select: none !important; /* Same as front page */
}
body #sidebar #serp-dd .result a *{
  pointer-events: none !important; /* Same as front page */
  cursor: pointer !important; /* Same as front page */
  user-select: none !important; /* Same as front page */
  -webkit-user-select: none !important; /* Same as front page */
  -moz-user-select: none !important; /* Same as front page */
  -ms-user-select: none !important; /* Same as front page */
}
body #sidebar #serp-dd .result li:hover a,
body #sidebar #serp-dd .result li:hover{
  background: var(--vd-accent) !important; /* Same as front page */
  border-radius: 10px !important; /* Same as front page */
}
body #sidebar #serp-dd .result li:hover a{
  color: #fff !important; /* Same as front page */
}
body #sidebar #serp-dd .result .active a,
body #sidebar #serp-dd .result li.active{
  background: var(--vd-accent) !important; /* Same as front page */
  border-radius: 10px !important; /* Same as front page */
}
body #sidebar #serp-dd .result .active a{
  color: #fff !important; /* Same as front page */
}

/* =======================
   SIDEBAR CATEGORY LIST
   ======================= */

/* Sidebar wrapper spacing */
body #sidebar .search,
body #sidebar form,
body #sidebar .searchbox,
body #sidebar .searchBox{
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Category list card - positioned below search, flush left */
body #sidebar .nav-list,
body #sidebar ul{
  margin-top: 6px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  background: #fff !important;
  border: 0px solid var(--vd-border) !important;
  border-radius: 12px !important;
  border-left: none !important;
  padding: 0 14px 0 0 !important; 
  box-shadow: var(--vd-shadow) !important;
  text-align: left !important;
}
body #sidebar .nav-list li,
body #sidebar ul li{
  text-align: left !important;
}
body #sidebar .nav-list a,
body #sidebar ul a{
  display: flex !important;
  justify-content: space-between !important; 
  align-items: center !important;
  text-align: left !important;
  padding: 12px 16px 12px !important;
  border-radius: 10px !important;
  color: var(--vd-muted) !important;
  font-weight: 800 !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}
body #sidebar .nav-list a *,
body #sidebar ul a *{
  text-align: left !important;
}
body #sidebar .nav-list a:hover,
body #sidebar ul a:hover{
  background: var(--vd-hover-bg) !important;
  color: var(--vd-text) !important;
  box-shadow: var(--vd-shadow-soft) !important;
  transform: translateY(-1px) !important;
}
body #sidebar .nav-list .active a,
body #sidebar ul .active a,
body #sidebar a[aria-current="page"]{
  background: rgba(128, 58, 183, 0.10) !important;
  color: var(--vd-text) !important;
  box-shadow: inset 0 0 0 1px rgba(128, 58, 183, 0.18) !important;
}
body #sidebar .nav-list a .count,
body #sidebar ul a .count,
body #sidebar .nav-list a .article-count,
body #sidebar ul a .article-count,
body #sidebar .nav-list a::after,
body #sidebar ul a::after{
  margin-left: auto !important;
  flex-shrink: 0 !important; /* Prevent arrow from shrinking */
}

/* Hide empty search containers */
body #sidebar .search-results:empty,
body #sidebar .search-suggestions:empty,
body #sidebar .ais-Hits:empty,
body #sidebar .ais-Panel:empty{
  display: none !important;
}
body #sidebar .search::after,
body #sidebar .search::before{
  display: none !important;
  content: none !important;
}
/* Icon-related code removed - icons have been dropped */

/* =========================================================
   ARTIKLER - ALLE REGLER SAMLET
   Alle styling regler for artikler og artikel-indhold er samlet her
   ========================================================= */

/* ---------- 1) ARTIKEL CARD STYLING ---------- */
/* Hovedcontainer for artikler */
body #fullArticle,
body #categoryContent{
  background: #fff !important;
  border: 1px solid var(--vd-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--vd-shadow) !important;
  padding: 42px 48px !important;
  overflow: hidden !important;
}

/* Fjern corner spikes / notches */
body #fullArticle::before, body #fullArticle::after,
body #categoryContent::before, body #categoryContent::after{
  content: none !important;
  display: none !important;
}

/* ---------- 2) BILLEDER I ARTIKLER ---------- */
body #fullArticle img,
body #fullArticle video,
body #categoryContent img,
body #categoryContent video,
body #fullArticle iframe,
body #categoryContent iframe,
#fullArticle img,
#fullArticle video,
#categoryContent img,
#categoryContent video,
#fullArticle iframe,
#categoryContent iframe,
.article img,
.article video,
.article iframe,
.contentWrapper img,
.contentWrapper video,
.contentWrapper iframe {
  border-radius: 12px !important;
  overflow: hidden !important;
}

#fullArticle img {
  display: block;
  margin: 0em 0 0em 0;
  padding: 0px;
  border-radius: 4px;
  border: 1px solid #d6d6d6;
  box-sizing: border-box;
}

/* Centrer billeder */
#fullArticle .align-center img {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 3) VIDEOER OG IFRAMES I ARTIKLER ---------- */
body #fullArticle video,
body #categoryContent video,
body #fullArticle iframe,
body #categoryContent iframe,
#fullArticle video,
#categoryContent video,
#fullArticle iframe,
#categoryContent iframe,
.article video,
.article iframe,
.contentWrapper video,
.contentWrapper iframe {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ---------- 4) FEEDBACK BAR (INTEGRATED FOOTER) ---------- */
/* Feedback containers i bunden af artikler */
body #fullArticle .answer,
body #fullArticle .didThisAnswer,
body #fullArticle .helpful,
body #fullArticle .rate-article,
body #fullArticle .rating,
body #fullArticle .article-feedback,
body #fullArticle .kb-feedback,
body #fullArticle .feedback{
  margin: 34px -48px -42px !important;
  padding: 18px 48px !important;
  background: rgba(15,23,42,0.03) !important;
  border-top: 1px solid var(--vd-border) !important;
  border-radius: 0 0 18px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Rating buttons styling */
body #fullArticle .rate-article a,
body #fullArticle .rating a,
body #fullArticle .article-feedback a,
body #fullArticle .kb-feedback a,
body #fullArticle .feedback a{
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid var(--vd-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- 5) ARTIKEL RATINGS ---------- */
.articleRatings {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 60px !important;
  padding: 12px !important;
  margin-top: 8px !important;
  background: #fff !important;
  border: 1px solid #E9E5E5 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .05) !important;
  font-size: 14px !important;
  color: #858585 !important;
}

/* ---------- 6) LINKS I ARTIKLER ---------- */
/* Link farver i artikler */
#fullArticle strong a,
#fullArticle a strong {
  color: #803ab7;
}

/* =========================
   SLUT PÅ ARTIKLER SEKTION
   =========================*/

/* FINAL OVERRIDE: Article title font-size ONLY on category pages - highest specificity to override everything */
html body #categoryContent .articleList li a,
html body #categoryContent .article-list li a,
html body #categoryContent ul.articleList li a,
html body #categoryContent ul.articles li a{
  font-size: 28px !important; /* Change this value to adjust title size on category pages only */
}

html body #categoryContent .articleList li a > *:first-child,
html body #categoryContent .article-list li a > *:first-child,
html body #categoryContent ul.articleList li a > *:first-child,
html body #categoryContent ul.articles li a > *:first-child{
  font-size: 28px !important; /* Change this value to adjust title size on category pages only */
}

/* =========================================================
   REMOVE SCROLLBAR FROM DROPDOWNS
   ========================================================= */

/* Front page dropdown - remove scrollbar and disable scrolling */
#serp-dd {
  overflow-y: hidden !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#serp-dd::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#serp-dd .result {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#serp-dd .result::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Sidebar dropdown - remove scrollbar and disable scrolling */
body #sidebar #serp-dd {
  overflow-y: hidden !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body #sidebar #serp-dd::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
body #sidebar #serp-dd .result {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body #sidebar #serp-dd .result::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ================================
   CHAT WIDGET (HELP SCOUT BEACON) 
   ================================ */

/* Chat widget skal ligge over alt andet */
[id*="beacon"] iframe,
[class*="beacon"] iframe,
iframe[title*="Beacon"],
iframe[title*="chat"],
iframe[title*="Chat"] {
  z-index: var(--z-chat);
  position: fixed;
}