/* ================================
   Jenson8 Help Scout Docs Theme
   Dark header, light canvas, dark tiles
   (Brand colours & Parabolica typography)
   ================================ */

/* ---------- Brand tokens (from guidelines) ---------- */
:root {
  --j8-pink: #FF45CE;                /* Brand Pink */
  --j8-blue: #1C49FF;                /* Brand Blue */
  --j8-ink: #0F222E;                 /* Deep Navy (main text / header) */
  --j8-ink-2: #182127;               /* Dark card surface */
  --j8-bg: #FFFFFF;                  /* Page background */
  --j8-muted: #51535A;               /* Supporting text */
  --j8-line: #E5E7EB;                /* Light divider */
  --j8-surface: #F7F9FB;             /* Light surface background */
  --j8-shadow: 0 8px 24px rgba(15, 34, 46, 0.12);
  --j8-radius: 16px;
  --j8-radius-lg: 20px;
}

/* ---------- Base canvas ---------- */
html, body {
  background: var(--j8-bg);
  color: var(--j8-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links: brand blue, pink underline on hover */
a, .contentWrapper a, .most-pop-articles .popArticles a {
  color: var(--j8-blue);
  text-decoration: none;
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover,
.contentWrapper a:hover,
.most-pop-articles .popArticles a:hover {
  color: var(--j8-pink);
  text-decoration: underline;
  text-decoration-color: var(--j8-pink);
  text-underline-offset: 2px;
}

/* ---------- Header / Navbar (dark, like site) ---------- */
.navbar .navbar-inner {
  background: var(--j8-ink) !important; /* brand dark blue */
  border-bottom: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
  padding-block: 14px;
  max-height: 70px;
}
.navbar .brand,
.navbar .nav li a,
.navbar .icon-private-w {
  color: #fff !important;
  font-weight: 400;
  font-family: Parabolica, Inter, ui-sans-serif;
  margin-top: -25px;
}
.navbar .nav li a:hover,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: var(--j8-pink) !important;
}
.btn.btn-navbar .icon-bar { background: #fff; }

/* Hide a specific collection link in the top nav (kept by request) */
.nav li a[href*="/collection/232"] { display: none !important; }

/* Keep the main navbar always visible at the top */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* above page content, but below modals */
}

.navbar .navbar-inner {
  background: rgba(15, 34, 46, 0.9) !important; /* var(--j8-ink) with ~90% opacity */
  border-bottom: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
  padding-block: 14px;

  /* optional: frosted glass effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Make room for the fixed header so content doesn't sit underneath it */
body {
  padding-top: 95px; /* adjust if your header is taller/shorter */
}

/* Compact + nudge up the top nav links */
.navbar .nav li a {
  position: relative !important;
  top: -45px !important;        /* 👈 actually moves the link upwards */
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 20px !important;
}


/* ---------- Search header ---------- */
#docsSearch { background: url(https://j8-knowledge-base-assets.s3.eu-west-2.amazonaws.com/honeycomb.jpg);
  margin-bottom: 0;
  background-size: cover;
  background-position: center;
}

#searchBar {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
}
#searchBar input.search-query {
  background: #fff;
  border: 1px solid var(--j8-line);
  border-radius: 999px;
  box-shadow: var(--j8-shadow);
  padding: 14px 18px;
  font-size: 16px;
  outline: none;
  font-family: Inter, Parabolica, ui-sans-serif;
}
#searchBar input.search-query:focus {
  border-color: var(--j8-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--j8-blue) 24%, transparent);
}
#searchBar button[type="submit"] {
  background: var(--j8-pink);
  color: #fff;
  border: 0; border-radius: 999px;
  padding: 12px 18px; font-weight: 600; line-height: 1;
  box-shadow: var(--j8-shadow);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  font-family: Parabolica, Inter, ui-sans-serif;
}
#searchBar button[type="submit"]:hover { transform: translateY(-1px); }
#searchBar button[type="submit"]:active { transform: translateY(0); box-shadow: none; }

/* Typeahead dropdown polish */
#serp-dd { border-radius: var(--j8-radius); overflow: hidden; box-shadow: var(--j8-shadow); }
#serp-dd .result > li.active, #serp-dd .result a:hover { background: #f5f7ff; }

/* ---------- Home: tile grid (flex fallback + grid) ---------- */
:root{
  --tile-min: 300px;      /* wider = bigger cards, fewer per row */
  --tile-gap: 40px;       /* spacing between cards */
  --tile-lift: 5px;       /* hover lift (keep <= gap) */
  --tile-scale: 1.02;     /* subtle hover scale */
  --content-max: 1200px;  /* page width for home grid & content area */
}
#contentArea.container-fluid{ max-width: var(--content-max) !important; }

/* list wrapper (home collections) */
.collection-category > .category-list,
.category-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--tile-gap) !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important; /* show lift outside flow */
}
.collection-category > .category-list > *,
.category-list > * {
  flex: 1 1 var(--tile-min) !important;
  max-width: 100% !important;
}
@supports (display: grid){
  .collection-category > .category-list,
  .category-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr)) !important;
    gap: var(--tile-gap) !important;
  }
}

/* ---- CARD (dark tiles) ---- */
.collection-category > .category-list > .category,
.category-list > .category,
.category-list > li.category,
.category {
  position: relative !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  height: auto !important;

  background: var(--j8-ink-2);
  color: #fff;
  border: 1px solid rgba(24,33,39,.7);
  border-radius: 20px;
  padding: 20px 20px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  transition:
    transform .22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow .25s ease,
    border-color .25s ease;
  will-change: transform;
  z-index: 0;
}

/* Decorative bar */
.category::before{
  content:""; display:block; height:3px; width:36px; border-radius:2px;
  background: linear-gradient(90deg, var(--j8-pink), var(--j8-blue));
  margin-bottom: 10px; opacity: .9;
}

/* Text & chip */
.category h3{
  color:#fff !important;
  margin: 30px 0 6px;
  font-weight: 900; /* Parabolica Black */
  font-family: Parabolica, Inter, ui-sans-serif;
  letter-spacing: -0.01em;
}
.category p{
  color:#E5E8EC !important;
  font-family: Inter, Parabolica, ui-sans-serif;
}
.category .article-count{
  display:inline-block;
  margin:30px 0 40px;
  padding:4px 12px;
  font: 600 12px/1.1 Inter, Parabolica, ui-sans-serif;
  color:#fff;
  background: rgba(28,73,255,.20);
  border: 1px solid rgba(28,73,255,.55);
  border-radius: 999px;
}

/* ---- HOVER LIFT ---- */
.collection-category > .category-list > .category:hover,
.category-list > .category:hover,
.category:hover{
  transform: translateY(calc(-1 * var(--tile-lift))) scale(var(--tile-scale));
  box-shadow:
    0 20px 40px rgba(28,73,255,.20),
    0 10px 25px rgba(0,0,0,.18);
  border-color: var(--j8-blue);
  z-index: 2;
}
.category:hover::before{ opacity: 1; filter: brightness(1.15); }

/* make sure wrappers never clip the lifted card */
.collection-category, #contentArea, #main, body {
  overflow: visible !important;
}

/* ---------- Home: collection titles (above tiles) ---------- */
.collection-category > h2 {
  margin: 50px 0 20px;
  font: 900 1.6rem/1.2 Parabolica, Inter, ui-sans-serif; /* Parabolica Black */
  letter-spacing: -0.01em;
  color: var(--j8-pink);
}
.collection-category > h2 a {
  color: var(--j8-pink) !important;
  text-decoration: none;
}
.collection-category > h2 a:hover {
  color: color-mix(in srgb, var(--j8-pink) 85%, var(--j8-blue));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Category page: article list cards ---------- */
.articleList{
  list-style: none;
  padding: 0;
  margin: 1rem auto 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* remove any legacy margin Help Scout adds to list items */
.articleList li { margin: 0 !important; }

/* Each list item as a dark mini-card */
.articleList li{
  background: var(--j8-ink-2);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  padding: .8rem 1rem;
  transition: transform .18s cubic-bezier(0.22,1,0.36,1),
              box-shadow .25s ease,
              border-color .25s ease,
              background .25s ease;
  position: relative;
}

/* Decorative accent bar */
.articleList li::before{
  content:"";
  position:absolute;
  left:12px;
  top:0;
  width:4px;
  height:100%;
  background: linear-gradient(180deg, var(--j8-pink), var(--j8-blue));
  border-radius: 16px 0 0 16px;
  opacity:.8;
}

/* Hover effect: lift + glow */
.articleList li:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(28,73,255,.18);
  border-color: var(--j8-blue);
  background: color-mix(in srgb, var(--j8-ink-2) 85%, var(--j8-blue) 15%);
  z-index: 2;
}

/* Article link inside card */
.articleList li a{
  display:block;
  text-decoration:none;
  color:#fff;
  position:relative;
  font: 600 1rem/1.5 Inter, Parabolica, ui-sans-serif;
  padding-left: 4rem;
}

/* Hide the article icon */
.articleList li a i { display: none !important; }

/* Hover colour change */
.articleList li a:hover {
  color: var(--j8-pink);
  text-decoration: underline;
  text-decoration-color: var(--j8-pink);
  text-underline-offset: 2px;
}

/* Category title styling (above the list) */
#categoryHead {
  text-align: left;
  margin-bottom: 2.5rem;
}
#categoryHead h1 {
  color: var(--j8-pink);
  font: 900 clamp(1.8rem, 4vw, 2.4rem)/1.2 Parabolica, Inter, ui-sans-serif;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
#categoryHead p.descrip {
  color: var(--j8-muted);
  font: 400 1rem/1.5 Inter, Parabolica, ui-sans-serif;
}

/* === Article Page: Title styling === */
#fullArticle .title {
  color: var(--j8-blue);              /* Brand headline colour */
  font: 900 clamp(2rem, 4vw, 2.8rem)/1.2 Parabolica, Inter, ui-sans-serif;
  letter-spacing: -0.01em;
  margin-bottom: 3rem;
  text-align: left;
  text-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Gradient accent underline (matches brand) */
#fullArticle .title::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  margin: 20px 0 30px 0;
  background: linear-gradient(90deg, var(--j8-pink), var(--j8-blue));
}

/* Article content & spacing */
#fullArticle,
#fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li,
#fullArticle blockquote, #fullArticle dd, #fullArticle table {
  color: var(--j8-ink);
  font-family: Inter, Parabolica, ui-sans-serif;
}

/* Extra gap after article ends */
#fullArticle {
  margin-bottom: 100px;   /* space before “last updated/help” */
}

/* hide help footer */
.articleFoot {display: none !important;}

/* === Remove Help Scout Docs sidebar and widen article === */

/* Hide the sidebar entirely */
#sidebar,
.lp #sidebar,
.chrome #sidebar {
  display: none !important;
}

/* Expand main content (Bootstrap layout uses .span9 next to .span3) */
.span9 {
  width: 100% !important;
  max-width: 1080px !important; /* tweak: 960–1200 for comfort */
  margin: 0 auto !important;
  float: none !important;
}

/* Optional: ensure outer container doesn't cap width too tightly */
.container,
.container-fluid {
  max-width: 1200px !important;
}

/* Remove border or frame around article content */
#fullArticle,
.article-content,
.contentWrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Buttons */
#fullArticle a.button,
.contentWrapper .button,
.hsds-btn,
.btn.btn-primary {
  background: var(--j8-blue) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  box-shadow: var(--j8-shadow) !important;
  font-family: Parabolica, Inter, ui-sans-serif;
}
#fullArticle a.button:hover,
.contentWrapper .button:hover,
.btn.btn-primary:hover {
  background: color-mix(in srgb, var(--j8-blue) 80%, var(--j8-pink));
}

/* Tables & callouts */
#fullArticle table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  border: 1px solid var(--j8-line); border-radius: 10px; overflow: hidden;
}
#fullArticle table th, #fullArticle table td {
  padding: 10px 12px; border-bottom: 1px solid var(--j8-line);
}
#fullArticle blockquote {
  border-left: 4px solid var(--j8-pink);
  background: var(--j8-surface);
  color: var(--j8-ink);
  padding: 12px 16px; border-radius: 8px;
}

/* ---------- Footer ---------- */
footer.center{
    margin-top: 50px;
  border-top: 1px solid var(--j8-line);
  padding: 32px 16px;
  color: var(--j8-muted);
  font-family: Inter, Parabolica, ui-sans-serif;
  background: #FFFFFF;
}
footer.center a{ color: var(--j8-blue); }
footer.center a:hover { color: var(--j8-pink); }

/* ---------- Beacon polish ---------- */
#beacon-container .BeaconFabButtonFrame { --pulse-background: var(--j8-blue) !important; }
#beacon-container .BeaconLauncherFrame,
#beacon-container iframe[title="Toggle Customer Support"] {
  filter: drop-shadow(var(--j8-shadow));
}

/* ---------- Small utilities ---------- */
hr, .divider { border-top: 1px solid var(--j8-line); }
.muted, .text-muted { color: var(--j8-muted) !important; }

/* ---------- Guardrails for dark tiles ---------- */
.category a, .category a:hover { color: #fff; text-decoration: none; }
.category .article-list a { color: #DAE2EA; }
.category .article-list a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--j8-pink);
}

/* Remove any lingering wrapper shadows/corners on category pages */
#contentArea #main-content .contentWrapper,
#contentArea #main-content .contentWrapper::before,
#contentArea #main-content .contentWrapper::after,
#contentArea .row-fluid,
#contentArea #main-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}



/*========example code for adding pictures to category tiles==========*/

/* Appstream tile */
/* #category-239::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("https://assets.jenson8.com/icons/appstream.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 12px;
}