/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./static/css/custom.css ***!
  \****************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap);
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./static/css/custom.css (1) ***!
  \********************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap);
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./static/css/custom.css (2) ***!
  \********************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap);
/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./static/css/custom.css (3) ***!
  \********************************************************************************************************************/
@charset "UTF-8";
/* ============================================================
   Design tokens — Citro refresh (coral-red + navy)
   Locked palette 2026-06-23. Tweak values here; the rest of the
   file references these via var(). Pass 1 = color + type only.
   ============================================================ */
:root {
  --kb-navy: #1f262e; /* headers, footer, dark buttons, headings */
  --kb-accent: #ec4c41; /* coral-red: primary actions, links, icons */
  --kb-accent-hover: #d8443a; /* darker coral for hover/active */
  --kb-text: #282b2e; /* body text */
  --kb-muted: #303b46; /* secondary / meta text */
  --kb-bg: #f9fafb; /* page background */
  --kb-surface: #ffffff; /* cards */
  --kb-border: #e9edf1; /* dividers / card borders */
  --kb-shadow: rgba(31, 38, 46, 0.12);
  --kb-link: #2563eb; /* blue text links (article lists) */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--kb-navy);
  font-family: "Poppins", sans-serif !important;
}

body {
  color: var(--kb-text);
  background-color: var(--kb-bg);
  font-family: "Poppins", sans-serif !important;
}

/* the article-page body class "kb-article" collides with the base `.kb-article`
   rule (intended for article list items), which sets padding-bottom: 15px and showed
   as white space below the footer. Zero it on the body only (not the list items). */
body.kb-article {
  padding-bottom: 0;
}

/* header: white floating pill (pass 3) */
#site-header {
  background: transparent;
  opacity: 1; /* base _site-header.scss sets opacity:.85, which made the pill see-through */
  position: fixed; /* other pages: header stays visible on scroll */
  top: 0;
  left: 0;
  right: 0;
}

/* homepage: header overlaps the hero but scrolls away with the page (body.kb-home set in the layout) */
.kb-home #site-header {
  position: absolute;
}

/* header uses the body font (Poppins); base theme sets Nunito on the header/nav */
#site-header,
#site-header * {
  font-family: "Poppins", sans-serif !important;
}

/* ===== non-home pages: header is a full-width white bar (not the home pill) ===== */
body:not(.kb-home) #site-header {
  background: var(--kb-surface);
  box-shadow: 0 1px 0 var(--kb-border);
  padding: 0;
  height: 96px; /* base sets a taller header; logo/nav centered within */
  min-height: 96px;
}

body:not(.kb-home) #site-header .kb-container {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto; /* centered content, no floating pill margin */
  height: 96px; /* shorter bar; logo/nav centered within */
}

/* drop the pill's vertical dividers */
body:not(.kb-home) #site-header .kb-container::before,
body:not(.kb-home) #site-header .kb-container::after {
  display: none;
}

/* plain nav links in the bar (no pill chips) */
body:not(.kb-home) #nav-primary-menu2 #menu-primary-nav > li:not(:last-child) > a {
  background: transparent;
  border-color: transparent;
}

/* also drop the pill's nav connector lines */
body:not(.kb-home) #nav-primary-menu2 #menu-primary-nav > li:nth-child(1)::after,
body:not(.kb-home) #nav-primary-menu2 #menu-primary-nav > li:nth-child(2)::after {
  display: none;
}

#site-header .kb-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(31, 38, 46, 0.15);
  padding: 0 24px;
  height: 90px; /* explicit — nav content was inflating it otherwise */
  max-width: 1180px;
  margin: 22px auto;
}

/* ===== Option 2: homepage header morphs into the flat sticky bar on scroll =====
   At the top the header is the floating pill/card over the hero. Once you scroll past it,
   header.js (inline script in _header.html.heex) adds `.scrolled` and the header becomes the
   same flat, full-width white bar used on every other page (sliding down from the top), so a
   rounded pill never floats awkwardly over the page content. The full-width bar background sits
   on #site-header; .kb-container stays the centered content band (logo/nav reference it). */
.kb-home #site-header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0; /* base #site-header padding was making the bar taller than its container */
  min-height: 0;
  height: 96px; /* match the full-width header on the other pages (body:not(.kb-home)) */
  background: var(--kb-surface);
  box-shadow: 0 2px 14px rgba(31, 38, 46, 0.14);
  animation: kb-header-drop 0.28s ease;
}

@keyframes kb-header-drop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.kb-home #site-header.scrolled .kb-container {
  width: min(1180px, 92%);
  max-width: none;
  margin: 0 auto;
  height: 96px; /* match the full-width header on the other pages */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* drop the pill's vertical dividers + desktop-nav chips/connectors so the bar reads flat
   (mirrors the body:not(.kb-home) flat-bar treatment used on the other pages) */
.kb-home #site-header.scrolled .kb-container::before,
.kb-home #site-header.scrolled .kb-container::after {
  display: none;
}

.kb-home #site-header.scrolled #nav-primary-menu2 #menu-primary-nav > li:not(:last-child) > a {
  background: transparent;
  border-color: transparent;
}

.kb-home #site-header.scrolled #nav-primary-menu2 #menu-primary-nav > li:nth-child(1)::after,
.kb-home #site-header.scrolled #nav-primary-menu2 #menu-primary-nav > li:nth-child(2)::after {
  display: none;
}

#page-header {
  background: linear-gradient(rgba(31, 38, 46, 0.5), rgba(31, 38, 46, 0.6)), url(https://cdn.livehelpnow.net/customizations/1/hero_banner.png) center/cover no-repeat;
  background-color: var(--kb-navy);
  /* downward flat-bottomed trapezoid tab: ~50% wide top, 40% wide base, 52px deep, steep sides */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 52px), 75% calc(100% - 52px), 70% 100%, 30% 100%, 25% calc(100% - 52px), 0 calc(100% - 52px));
}

/* override base .ph-large padding (140px 0 40px) so the hero isn't cramped */
#page-header.ph-large {
  padding: 200px 20px 140px;
}

/* landscape phones / short viewports: the big 200/140 padding + the base max-height:100vh
   cap force the search bar down into the hero's 52px bottom notch, where the white corner
   cutouts cover it. Shrink the vertical padding so the hero fits and the bar clears the notch. */
@media (max-height: 500px) {
  #page-header.ph-large {
    padding-top: 128px; /* clear the logo/header with breathing room (logo bottom ~90) */
    padding-bottom: 72px; /* > 52px notch so the search bar clears the bottom cutouts */
  }
}

/* Home only: the clip-path trapezoid above clips the live-search dropdown (a
   clip-path clips ALL descendants — z-index can't escape it). Recreate the same
   notch with two white corner cutouts (pseudo-elements don't clip descendants),
   so the dropdown can overhang the hero unclipped. #kb-site-container behind the
   hero is #fff, so the cutouts are white. (.kb-detail/.kb-categories already set
   clip-path:none; the article page hides the hero.) */
.kb-home #page-header {
  clip-path: none;
  overflow: visible;
  position: relative;
}

.kb-home #page-header::before,
.kb-home #page-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 52px;
  width: 30%;
  background: #fff;
  z-index: 1;
}

.kb-home #page-header::before { /* left slant: hero 25%@top -> 30%@bottom */
  left: 0;
  clip-path: polygon(0 0, 83.34% 0, 100% 100%, 0 100%);
}

.kb-home #page-header::after { /* right slant: hero 75%@top -> 70%@bottom */
  right: 0;
  clip-path: polygon(16.66% 0, 100% 0, 100% 100%, 0 100%);
}

#site-header .kb-logo {
  height: auto;
  margin: 0; /* base sets margin:10px auto, pushing the absolute logo 10px below center */
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

#site-header .kb-logo img {
  content: url(https://cdn.livehelpnow.net/customizations/1/logo.svg); /* color lockup: coral diamonds + navy text (clean vector) */
  display: block; /* removes inline line-box gap so absolute centering is exact */
  height: 46px;
  width: auto;
  max-width: none; /* base caps at 180px / 50px, which blocked the logo from scaling up */
  max-height: none;
}

#nav-primary ul > li:nth-child(3) {
  color: var(--kb-accent);
}

#advanced-search-buttons {
  display: none;
}

#main-search-button {
  background-color: var(--kb-accent);
}

#main-search-button i {
  display: none;
}

.category-widget {
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  transition: box-shadow 0.15s ease-out;
}

.category-widget:hover {
  box-shadow: 0 6px 18px 0 var(--kb-shadow);
}

#category-widget-container-title,
#category-widget-description {
  color: var(--kb-muted);
  text-align: left;
}

#category-widget-description {
  font-size: 18px;
}

.kb-title-accent {
  color: var(--kb-accent);
}

#category-widget-container-title {
  font-weight: 500;
  line-height: 1.3; /* a touch more room when it wraps to 2 lines on small screens */
}

/* 2-then-3 card layout, full width (first two cards span half, the rest a third).
   base inset removed via padding:0 so cards align with the heading/page. */
#category-widget {
  padding: 0;
  /* base app.css adds responsive margin-left (7% / 12%) + side padding in media queries
     for the old inset layout, which pushes the grid right of the section title (and past
     the container's right edge). Zero it so the cards line up flush with the title. */
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* every row equal height -> all cards match the tallest, across rows */
  gap: 24px;
  width: 100%;
}

.category-widget-link {
  display: flex; /* flex-fill the card instead of height:100% — avoids the grid-auto-rows:1fr
                    min-content over-sizing that padded every card ~32px past the tallest */
  text-decoration: none;
}

#category-widget-description {
  color: var(--kb-muted);
}

.category-widget-description {
  color: var(--kb-muted);
  font-size: 14px;
}

.category-widget-icon {
  color: var(--kb-accent);
  opacity: 1;
}

/* base pads this 50px-left / 25px-right (to clear the old absolute icon), which
   throws off the centered text */
.category-widget-info {
  padding: 0;
}

.category-widget-title {
  font-weight: 500;
  color: var(--kb-navy);
}

/* ----- category card images (pinned homepage widget + categories page): show the
   category's imageUrl as a banner across the top of the card; the folder icon still
   shows when a category has no image. Base display is in the main SCSS (all clients);
   these are the client-1 refinements. First pass — tune once we can see them. ----- */
/* double-class so this beats the later `.category-widget { justify-content: center }` */
.category-widget.category-widget--has-image {
  padding: 0 !important; /* base adds padding-top:20px / left:15px for the inline-icon layout */
  overflow: hidden; /* clip the banner to the card's rounded corners */
  /* the card is a flex column that centers its content (fine for the icon layout);
     with an image we top-align so the banner sits flush at the top, its corners clip
     to the card radius, and every card's image lines up regardless of description length.
     The grid already stretches cards in a row to equal height, so shorter cards just get
     empty space at the bottom. */
  justify-content: flex-start;
}

.category-widget-image {
  display: block;
  width: 100%; /* the card is a flex column with align-items:center — stretch the banner full width */
  align-self: stretch;
}

.category-widget-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* taller banner (matches the livehelpnow.net feature cards) vs the old 150px letterbox */
  object-fit: cover;
}

.category-widget--has-image .category-widget-info {
  padding: 18px 22px 24px;
}

/* /kb category cards with an image: match the homepage popular-category cards —
   full-width banner flush at the top, corners clipped, title + description below.
   (double .kb-category so it beats `.kb-categories .kb-category { justify-content: center }`) */
.kb-categories .kb-category.kb-category--has-image {
  padding: 0;
  overflow: hidden; /* clip the banner to the card's rounded corners */
  justify-content: flex-start; /* top-align: banner flush at the top, cards line up */
}

.kb-categories .kb-category__image {
  display: block;
  width: 100%;
  align-self: stretch;
}

.kb-categories .kb-category__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* taller banner (matches the livehelpnow.net feature cards) vs the old 150px letterbox */
  object-fit: cover;
}

.kb-categories .kb-category--has-image .kb-category__header {
  /* !important + higher specificity to beat `.kb-categories .kb-category__header { padding:0 !important }` */
  padding: 18px 22px 24px !important; /* title + description sit below the banner (matches the homepage 18px gap) */
}

#all-categories-link {
  display: block;
  text-align: center; /* center the (content-width) button */
  text-decoration: none;
}

#all-categories {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto; /* base sets a fixed width; shrink to content */
  /* base centers via `margin: 0 33%` assuming a 31%-wide button; our pill is
     content-width, so those % side margins overflow and shove it off-center -- zero
     them and let #all-categories-link's text-align:center do the centering */
  margin-left: 0;
  margin-right: 0;
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  background-color: var(--kb-accent);
  color: #fff;
  font-weight: 600;
}

#all-categories p {
  margin: 0;
}

#all-categories::after {
  content: "→"; /* arrow after the label */
  font-size: 17px;
  line-height: 1;
}

#all-categories:hover {
  background-color: var(--kb-accent-hover);
  color: #fff;
}

.article-title-highlight {
  color: var(--kb-accent) !important;
}

/* homepage pins: dark title instead of the coral highlight (scoped to pins for now;
   .article-title-highlight is shared across search/category/tag/article pages) */
#homepage-pins .kb-article__title,
#homepage-pins .kb-article__title a {
  color: var(--kb-navy) !important;
}

.homepage-file {
  color: var(--kb-accent);
}

.kb-meta__views {
  color: var(--kb-muted);
}

.kb-meta__views i {
  color: var(--kb-accent);
}

.kb-meta__usefulness {
  background: var(--kb-navy) !important;
}

.kb-meta__comments {
  background: var(--kb-accent) !important;
  color: #fff;
}

.kb-meta__comments i {
  color: #fff;
}

#homepage-pins .entry-content {
  color: var(--kb-muted);
}

.category-name-title {
  color: var(--kb-navy);
}

.widget-title {
  color: var(--kb-navy) !important;
}

.widget-title-underline-1 {
  border-bottom: 2px solid var(--kb-accent);
  margin: 0;
  position: relative;
  top: -25px;
  width: 89px;
}

.widget-title-underline-2 {
  border-bottom: 2px solid var(--kb-accent);
  margin: 0;
  position: relative;
  top: -25px;
  width: 66px;
}

.widget-title-underline-3 {
  border-bottom: 2px solid var(--kb-accent);
  margin: 0;
  position: relative;
  top: -25px;
  width: 53px;
}

.kb_widget_articles .kb-widget__entry-title {
  color: var(--kb-accent) !important;
}

.topic-author {
  color: var(--kb-muted) !important;
}

.authored-by {
  color: var(--kb-muted) !important;
}

.homepage-widget-file {
  color: var(--kb-accent);
}

.o-button.orange-border {
  color: var(--kb-accent) !important;
  box-shadow: inset 0 0 0 0.125rem var(--kb-accent) !important;
}

.o-button.orange-border:hover {
  background-color: var(--kb-accent) !important;
  color: #fff !important;
}

.b-button.bluedark-border {
  color: var(--kb-navy) !important;
  box-shadow: inset 0 0 0 0.125rem var(--kb-navy) !important;
}

.b-button.bluedark-border:hover {
  background-color: var(--kb-navy) !important;
  color: #fff !important;
}

/* /kb */
.kb-category .kb-category__title a {
  color: var(--kb-navy) !important;
}

.knowledge-category-main-folder {
  color: var(--kb-navy);
}

.knowledge-category-sub-folder {
  color: var(--kb-navy);
}

.category-children {
  color: var(--kb-navy) !important;
}

.knowledge-category-file {
  color: var(--kb-accent);
}

.kb_widget_articles .kb-widget__entry-title-sidebar {
  color: var(--kb-accent) !important;
}

.articles-authors-aside-file {
  color: var(--kb-accent);
}

.knowledge-category-circle-right {
  color: var(--kb-accent);
}

.kb-category__view-all {
  color: var(--kb-accent) !important;
}

.kb-site-search-breadcrumbs .kb-site-search__button-breadcrumbs {
  background-color: var(--kb-navy) !important;
}

/* /category/:id */
.category-tag-main-folder {
  color: var(--kb-navy);
}

.kb-category__title {
  color: var(--kb-navy);
}

.category-tag-sub-folder {
  color: var(--kb-navy);
}

.category-tag-file {
  color: var(--kb-accent);
}

#category-search-form-button {
  background-color: var(--kb-accent) !important;
}

/* article page */
label.heart {
  color: var(--kb-accent);
}

#btnSubscribe {
  background-color: var(--kb-navy);
  border: 2px solid var(--kb-navy);
}

.entry .entry-title {
  color: var(--kb-navy);
}

.time {
  color: var(--kb-muted);
}

.author-name {
  color: var(--kb-muted);
}

.heart-style {
  color: var(--kb-accent);
}

.category-name {
  color: var(--kb-accent);
}

.tag-name {
  color: var(--kb-accent);
}

#article-content .kb-entry-content {
  color: var(--kb-text);
}

.allow-comments {
  color: var(--kb-navy);
}

.kb-article-related .kb-article-related__title {
  color: var(--kb-navy);
}

.kb-article-list a {
  color: var(--kb-accent);
}

.article-related-file {
  color: var(--kb-accent);
}

.child-category-container i {
  color: var(--kb-accent);
}

.category-nav-container-main i {
  color: var(--kb-accent);
}

.category-nav-article-container i {
  color: var(--kb-accent);
}

.category-nav-child-article-container i {
  color: var(--kb-accent);
}

#sidebar-categories .widget a {
  color: var(--kb-text);
}

.articles-aside-file {
  color: var(--kb-accent);
}

.kb-widget-author__postcount {
  color: var(--kb-navy);
}

.page-numbers a {
  color: var(--kb-accent) !important;
}

#category-search-button button {
  background-color: var(--kb-accent);
}

.date {
  color: var(--kb-muted);
}

.kb_widget_authors .kb-widget-author__title {
  color: var(--kb-accent) !important;
  font-weight: 500;
}

#content .entry-content.author {
  color: var(--kb-text);
}

article .authored-by {
  color: var(--kb-muted) !important;
}

.author-widget-file {
  color: var(--kb-accent);
}

#sidebar .widget a {
  color: var(--kb-text);
  font-weight: 500;
}

#sidebar .widget a:hover {
  color: var(--kb-accent);
}

/* ============================================================
   Live-search typeahead dropdown (SDK renders .lhn_result rows into
   #kb-site-search__results as you type in the main search bar). Match the
   refreshed KB look: white card, outline file icon, navy titles, muted excerpt.
   ============================================================ */
/* .kb-site-search prefix matches the base's specificity (it pins the bottom
   corners to 2px) so border-radius:14px applies to ALL four corners */
.kb-site-search #kb-site-search__results {
  top: 72px; /* gap so it's detached from the bar */
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  box-shadow: 0 14px 34px 0 var(--kb-shadow); /* softer than base dark shadow */
  padding: 6px 0;
  max-height: 440px;
  z-index: 50000; /* INNER pages: above the content + the breadcrumbs bar (#page-header-breadcrumbs
                     is absolute z:9999) but below the fixed header (z:100000). The homepage
                     overrides this to 999 below -- it has no breadcrumbs and its header drops to
                     z:1000 when scrolled, so the typeahead must sit below 1000 there. */
}

/* homepage: no breadcrumbs bar, and the header morphs to z:1000 on scroll -- keep the typeahead
   below that (still above the page content) so it never scrolls over the header */
.kb-home .kb-site-search #kb-site-search__results {
  z-index: 999;
}

#kb-site-search__results .lhn_result {
  padding: 13px 18px 13px 46px; /* room for the outline icon */
  border-bottom: 1px solid var(--kb-border);
}

#kb-site-search__results .lhn_result:last-child {
  border-bottom: none;
}

#kb-site-search__results .lhn_result:hover {
  background: var(--kb-bg);
}

/* outline muted file icon, matching the other pages (base: coral, absolute) */
#kb-site-search__results .lhn_result .fa-file-alt {
  left: 18px;
  top: 15px;
  font-size: 16px;
  color: transparent !important;
  -webkit-text-stroke: 1.2px var(--kb-muted);
}

/* title -> navy 600; show the FULL title (wrap, no ellipsis) with the same line-height as the
   article titles (base clamped it to one line + ellipsis) */
#kb-site-search__results .lhn_result .lhn_content a {
  color: var(--kb-navy) !important;
  font-weight: 600;
  padding-right: 0;
  margin-bottom: 3px;
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}

/* excerpt -> muted, compact */
#kb-site-search__results .lhn_result .lhn_content {
  color: var(--kb-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* hide the views/ratings pills (match the search-results cards) */
#kb-site-search__results .lhn_metadata {
  display: none;
}

#kb-search-results .entry-content p {
  color: var(--kb-text);
}

.knowledge-search-file {
  color: var(--kb-accent) !important;
  font-size: 20px;
}

/* /auth */
.signin-button button {
  background-color: var(--kb-accent) !important;
}

.auth-title {
  color: var(--kb-navy);
}

#sso-dropdown-menu {
  background: var(--kb-navy);
}

#sso-menu-btn .fa-caret-down {
  color: var(--kb-accent) !important;
}

/* /sp */
.create-ticket .lhnSubmit {
  background-color: var(--kb-accent) !important;
}

.lhnCallbackForm button {
  background-color: var(--kb-accent) !important;
  margin: 20px 0px 50px 0px;
}

/* footer */
#site-footer-widgets {
  background: var(--kb-navy);
  color: #fff !important;
}

#site-footer-widgets .widget-title {
  color: #fff !important;
}

#site-footer-widgets a {
  color: #fff !important;
}

#site-footer-widgets i {
  color: #fff !important;
}

.HT_Social_Widget_Display {
  padding-right: 0 !important;
}

#site-footer-widgets .contact-name {
  font-weight: 600;
}

/* help out center */
div#lhnHocButton div.lhnHocChatBtn {
  background-color: var(--kb-accent);
}

div#lhnHocButton div.lhnHocBackBubble {
  background-color: var(--kb-navy);
}

div#lhnHocButton div.lhnHocBackBubble:after {
  border-color: var(--kb-navy) var(--kb-navy) transparent transparent;
}

/* HOC notification badge: the KB's base CSS applies a global line-height: 30px, which
   the count bubble inherits. Because the widget is display:flex, its height grows to fit
   the 30px line-box, making it 18×30 (a vertical oval) instead of the SDK's intended 18px
   circle (min-width/height: 18px + border-radius: 18px). Collapse the line-height/height
   back to 18px so it's a circle again; the width rule keeps the normal 1–2 digit badge
   round while leaving the ≥100 pill (.lhnLargeNotificationBadge) alone. Client 1 only. */
#lhnHocButton .lhnNotification.lhnEntries,
.lhnHocButton .lhnNotification.lhnEntries {
  height: 18px !important;
  min-height: 18px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
}
#lhnHocButton .lhnNotification.lhnEntries:not(.lhnLargeNotificationBadge),
.lhnHocButton .lhnNotification.lhnEntries:not(.lhnLargeNotificationBadge) {
  width: auto !important;
  min-width: 18px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.avatar {
  -webkit-border-radius: 99%;
  -moz-border-radius: 99%;
  -ms-border-radius: 99%;
}

#categories {
  color: var(--kb-navy);
}

/*
#lhnHocButton {
    zoom: 0.8;
}
*/
.zcwf_title {
  display: none;
}

input[title=Reset] {
  display: none;
}

.zcwf_col_fld input[type=text], .zcwf_col_fld textarea {
  width: 95% !important;
}

.zcwf_button {
  max-width: 240px !important;
  color: #fff !important;
}

.crmWebToEntityForm {
  background-color: transparent !important;
}

.zcwf_lblTopBottom .zcwf_col_fld {
  margin-top: 0px !important;
}

.zcwf_col_lab label {
  margin-bottom: 0px !important;
  font-size: 14px;
  font-family: poppins, sans-serif !important;
}

.zcwf_col_lab label span {
  display: none;
}

.zcwf_lblRight .zcwf_button {
  color: #fff !important;
}

#article-content-html a.button {
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: 0 0;
  box-shadow: none;
  text-decoration: none;
  line-height: 1.25;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  padding: 0.4em 20px 0.4em 20px;
  height: 44px;
  border: 1px solid var(--kb-accent);
  background-color: var(--kb-accent);
  border-radius: 4px;
  margin: 15px;
}

.article-question {
  margin: 30px 0 30px;
  font-family: Nunito, sans-serif;
  color: var(--kb-navy);
  font-size: 28px !important;
  font-style: italic;
}

.entry-title {
  font-size: 28px !important;
  font-weight: 400;
}

p {
  margin-top: 12px;
}

.zcwf_lblLeft .zcwf_button, .zcwf_lblLeft .formsubmit {
  color: #fff !important;
}

#all-categories p {
  margin-top: 0px !important;
}

/* ===== Pass 2: hero (background photo + legible heading + search) ===== */
#page-header-title {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 8px;
}

#page-header-tagline {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.kb-site-search {
  position: relative;
}

#search-input-container {
  flex: 1;
}

#search-input-container input {
  border-radius: 8px;
  border: 1px solid var(--kb-border);
  padding: 14px 104px 14px 20px; /* right room for the inset "Search" button */
  background: #fff;
  box-sizing: border-box;
  width: 100%;
}

/* coral button inset inside the white search box (thin white outline all around) */
#main-search-button {
  position: absolute;
  /* stretch to the input's full height, inset 1px on all sides (thin white outline).
     !important beats the base's per-breakpoint fixed heights / right:0 that otherwise
     leave gaps -- notably in landscape / short viewports. */
  top: 1px !important;
  bottom: 1px !important;
  right: 1px !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important; /* base sets width:44px / min-width:50px !important (icon size) */
  min-width: 0 !important;
  border-radius: 0 7px 7px 0; /* square left; right nests inside the box's 8px (1px inset) */
  padding: 0 18px;
  text-transform: none !important; /* base uppercases buttons; design wants "Search" */
  display: flex;
  align-items: center;
  justify-content: center;
}

#main-search-button::after {
  content: "Search";
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}

/* very small phones: the "Search" text label eats too much of the input width, so swap
   it for a magnifying-glass icon (like the old design) and give the field back its room.
   Uses an inline SVG background so it doesn't depend on the icon font loading/aligning. */
@media (max-width: 549px) {
  #main-search-button::after {
    content: none; /* hide the "Search" text label */
  }
  #main-search-button::before {
    content: none; /* hide the base's own FontAwesome ::before magnifying glass -- it
                      renders as a "box" on this site (font isn't v4) and would double up
                      with our SVG below */
  }
  #main-search-button i {
    display: none;
  }
  #main-search-button {
    width: 50px !important;
    /* base sets a fixed height (~42px) at small widths, which stops the button stretching
       to the input's full height (top:1px/bottom:1px) -- force it back so the coral fills
       the whole field */
    height: auto !important;
    min-height: 0 !important;
    top: 1px;
    bottom: 1px;
    right: 1px !important; /* base forces right:0 at small widths (button touches the input
                             edge); pull it in 1px so there's a matching white sliver on the
                             right, like the top/bottom */
    padding: 0;
    background-color: var(--kb-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
  }
  #search-input-container input {
    padding-right: 60px; /* icon button (~50px) is far narrower than the "Search" label */
  }
}

/* ===== Pass 3: header nav (dark links, hide separator, coral Sign in) ===== */
#nav-primary-menu2 #menu-primary-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav-primary-menu2 #menu-primary-nav > li > a {
  color: var(--kb-navy);
  font-weight: 500;
  text-transform: none; /* base uppercases; labels are already sentence-case in the data */
}

/* Home / Categories / Submit a ticket at 16px (not the Sign in button) */
#nav-primary-menu2 #menu-primary-nav > li:not(:last-child) > a {
  font-size: 16px;
}

#nav-primary-menu2 #menu-primary-nav > li:nth-last-child(3) {
  display: none; /* the "|" separator */
}

#nav-primary-menu2 #menu-primary-nav > li:last-child > a {
  background: var(--kb-accent);
  color: #fff;
  padding: 9px 16px;
  border-radius: 6px;
  font-weight: 600;
}

/* ===== Pass 4: category cards + article-list card ===== */
/* keep the original #category-widget layout from app.css (my grid override
   collapsed the columns); only restyle the cards' appearance below */
/* category cards: rounded, padded, hover lift */
.category-widget {
  display: flex; /* base is inline-block, which shrink-wraps the card */
  flex-direction: column;
  align-items: center; /* center icon + text horizontally */
  justify-content: center; /* center content vertically */
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  flex: 1; /* fill the (now flex) .category-widget-link instead of height:100% */
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.category-widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px 0 var(--kb-shadow);
}

/* icon -> soft coral chip */
.category-widget-icon {
  display: inline-flex;
  position: static; /* base (_homepage.scss) sets position:absolute, taking it out of flow */
  align-items: center;
  justify-content: center;
  width: auto; /* override base width:3% */
  margin-bottom: 16px;
  color: var(--kb-accent);
}

.category-widget-title {
  font-size: 20px;
  margin: 0 0 8px;
}

/* article-list section -> wrap the (existing-layout) columns in one bordered card */
#homepage-widgets {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  /* the categories container already carries ~92px of internal bottom space
     (60px button margin + 32px padding); no extra top margin, so the visual
     gap to the widgets matches the widgets->faq / faq->snh gaps (~92px). */
  margin-top: 0;
}

/* card box wraps only the 3-column grid (news/blog is a separate sibling section) */
#homepage-widgets > .kb-container {
  box-sizing: border-box;
  width: min(1180px, 92%); /* same width band as the FAQ / still-need-help sections
                              (.kb-home-band) so the card insets match at every width */
  margin: 0 auto;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  padding: 36px 20px; /* 20px offsets the grid's -20px gutter so columns hit 164-1276 */
  box-shadow: 0 4px 16px 0 var(--kb-shadow);
}

/* vertical dividers between the three columns */
#homepage-widgets .widget + .widget {
  border-left: 1px solid var(--kb-border);
}

/* once the 3 columns stack (base .kb-grid-4 -> width:100% at <=860px), the left divider
   is wrong and the sections run together with no vertical gap -- swap it for a top
   divider + spacing so Popular / Top Rated / Latest read as distinct blocks */
@media (max-width: 860px) {
  #homepage-widgets .widget + .widget {
    border-left: none;
    border-top: 1px solid var(--kb-border);
    margin-top: 26px;
    padding-top: 26px;
  }
}

/* hide the news/blog block below the widgets (LHN homepage only) */
.blog-row {
  display: none;
}

/* ===== homepage-widgets: Popular / Top Rated / Latest Articles (Figma) ===== */
/* heading + coral underline spanning the full heading width */
#homepage-widgets .widget-title {
  display: inline-block;
  color: var(--kb-navy) !important;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3; /* a touch more room when it wraps to 2 lines on small screens */
  margin: 0 0 16px;
  padding-bottom: 9px;
  border-bottom: 3px solid var(--kb-accent);
}

/* old fixed-width underline bars (only underlined the first word) */
#homepage-widgets .widget-title-underline-1,
#homepage-widgets .widget-title-underline-2,
#homepage-widgets .widget-title-underline-3 {
  display: none;
}

/* no file icons in the Figma list */
#homepage-widgets .homepage-widget-file {
  display: none;
}

/* blue underlined links, spaced, no row dividers */
#homepage-widgets .kb-widget__entry-title {
  color: var(--kb-link) !important;
  text-decoration: underline;
  font-size: 15px;
}

#homepage-widgets .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#homepage-widgets .widget > ul > li {
  border-bottom: none;
  padding-bottom: 0;
  padding-left: 0; /* base sets 25px, insetting links from the heading */
  margin-bottom: 17px;
  line-height: 1.4;
}
/* last link in a column: no trailing gap, so the card bottom hugs the content */
#homepage-widgets .widget > ul > li:last-child {
  margin-bottom: 0;
}
/* the base grid adds a 40px bottom gutter to every column; with a single row that
   just balloons the card's bottom whitespace -> drop it. */
#homepage-widgets .widget {
  margin-bottom: 0;
}

/* consistency pass: hide the "by <author>" byline (Figma shows links only) */
#homepage-widgets .topic-author {
  display: none;
}

/* ===== Pass 5: header detail (dividers, nav chips, connectors) ===== */
/* vertical dividers, equidistant from each end of the pill */
#site-header .kb-container {
  position: relative;
}

#site-header .kb-container::before,
#site-header .kb-container::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: rgba(31, 38, 46, 0.22);
}

#site-header .kb-container::before {
  left: 210px;
}

#site-header .kb-container::after {
  right: 210px;
}

/* static ancestors so the absolutely-centered titles reference the pill (.kb-container),
   not a base-positioned ancestor that was pushing them onto the Sign in button */
#nav-primary,
#nav-primary-menu2 {
  position: static;
  float: none !important;
}

/* nav fills the pill and centers the (content-width) menu — so item gaps are
   purely the 30px flex gap, not space distributed by justify-content on a 100%-wide ul */
#nav-primary {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* roomier nav row */
#nav-primary-menu2 #menu-primary-nav {
  gap: 30px;
}

/* middle nav items as subtly outlined chips */
#nav-primary-menu2 #menu-primary-nav > li:not(:last-child) > a {
  background: rgba(31, 38, 46, 0.035);
  border: 1px solid var(--kb-border);
  border-radius: 8px;
  padding: 8px 16px;
}

/* horizontal connector lines between the middle items */
#nav-primary-menu2 #menu-primary-nav > li {
  position: relative;
  margin: 0;
  padding: 0;
}

/* The Home->Categories slot carries an extra ~18px the box model doesn't expose
   (Home's flex slot measures 48px vs 30px elsewhere); pull it back to even the gap. */
#nav-primary-menu2 #menu-primary-nav > li#home-menu-li {
  margin-right: -18px;
}

#nav-primary-menu2 #menu-primary-nav > li:nth-child(1)::after,
#nav-primary-menu2 #menu-primary-nav > li:nth-child(2)::after {
  content: "";
  position: absolute;
  right: -24px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--kb-border);
  transform: translateY(-50%);
}

/* Sign in pinned to the right zone */
#nav-primary-menu2 #menu-primary-nav > li:last-child {
  position: absolute !important;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

#nav-primary-menu2 #menu-primary-nav > li > a {
  white-space: nowrap;
}

/* ===== Categories dropdown: hide caret, open on hover, refresh colors ===== */
#category-dropdown-caret {
  display: none; /* caret hidden; menu opens on hover (also fixes uneven nav spacing) */
}

/* base sets right:18px which (with position:relative on the li) shifts Categories left,
   enlarging the gap on its right toward "Submit a ticket" */
#category-dropdown {
  right: auto;
}

#category-dropdown:hover .category-dropdown {
  display: block;
}

.category-dropdown {
  background: var(--kb-navy);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(31, 38, 46, 0.28);
  padding: 6px 0;
  overflow: hidden;
}

.category-dropdown-name a {
  color: #fff !important;
  text-transform: none !important; /* base uppercases + 800-weights (more specific); match the header */
  font-weight: 500 !important;
}

.category-dropdown-name:hover {
  background: var(--kb-accent);
}

.category-dropdown-name a:hover {
  color: #fff !important;
}

/* ============================================================
   Categories page (/kb) — KnowledgeView, body.kb-categories
   Transform the list+sidebar layout into a card grid (Figma).
   ============================================================ */
/* drop the sidebar; content goes full width */
.kb-categories #sidebar {
  display: none;
}

.kb-categories #content {
  width: 100% !important; /* base .sidebar-right floats #content to ~70% */
  float: none;
}

/* hide the per-category article lists + view-all link (cards only) */
.kb-categories .kb-article-list,
.kb-categories .kb-category__view-all {
  display: none;
}

/* category list -> responsive card grid */
.kb-categories .kb-archive--two-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* every row equal height -> all cards match the tallest, across rows */
  gap: 24px;
  list-style: none;
  margin: 24px 0 0; /* gap below the section subtitle */
  padding: 0;
}

/* breadcrumbs + section head align to the content band left edge (154); the card
   grid is pulled out by its gutter (see .kb-archive rule below) so the cards, the
   heading, and the breadcrumbs all share the same left edge as the header. */
.kb-categories .kb-breadcrumbs {
  margin-left: 0;
}

/* breadcrumbs: current page (last crumb) in coral */
.kb-categories .kb-breadcrumbs li:last-child a {
  color: var(--kb-accent);
}

/* "All knowledge Base Categories" section title + subtitle (above the cards) */
.kb-categories .kb-cat-section-head {
  margin: 40px 0 0 0;
}

.kb-categories .kb-cat-section-title {
  margin: 0 0 6px;
  color: var(--kb-navy);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3; /* match the homepage heading (#category-widget-container-title) so the two
                       lines aren't cramped when it wraps */
  text-align: left;
}

.kb-categories .kb-cat-section-subtitle {
  margin: 0;
  color: var(--kb-muted);
  font-size: 16px;
  text-align: left;
}

/* base clearfix ::before/::after become stray grid cells (offsetting the cards) */
.kb-categories .kb-archive--two-cols::before,
.kb-categories .kb-archive--two-cols::after {
  display: none;
}

/* space below the cards so they don't touch the footer */
.kb-categories #primary {
  padding-bottom: 80px;
}

.kb-categories .kb-archive--two-cols > li {
  list-style: none;
  margin: 0;
  width: 100%; /* base forces 50% (old 2-col layout); fill the grid column */
  display: flex; /* let the card fill this cell via flex-stretch, NOT height:100% (below) */
}

/* each category -> a card */
.kb-categories .kb-category {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* flex-fill the (flex) li instead of height:100% — height:100% made grid-auto-rows:1fr
     size each row to the description's min-content (worst-case wrap), inflating every card
     ~40px past the tallest card's real height. flex:1 sizes rows to actual rendered height. */
  flex: 1;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.kb-categories .kb-category:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px 0 var(--kb-shadow);
}

/* icon (coral) above the title + description, centered */
.kb-categories .kb-category__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important; /* base (nested) adds 50px-left padding (old icon-left layout) */
  border-bottom: none; /* base adds a 2px underline */
}

.kb-categories .knowledge-category-main-folder {
  position: static; /* base sets position:absolute, taking the icon out of flow */
  color: var(--kb-accent);
  font-size: 32px;
  margin-bottom: 16px;
}

.kb-categories .kb-category__title {
  margin: 0 0 8px;
}

.kb-categories .kb-category__title a {
  color: var(--kb-navy) !important; /* match homepage cards (navy, not coral) */
  font-weight: 500;
  font-size: 20px;
}

.kb-categories .kb-category__desc {
  margin: 0;
  color: var(--kb-muted);
  font-size: 14px;
  line-height: 1.8; /* match the home page .category-widget-description (was inheriting a larger value) */
}

/* ----- non-home pages: clear the fixed 96px header ----- */
body:not(.kb-home) #kb-site-container {
  padding-top: 96px;
}

/* ----- inner pages: content below the header is no wider than the header
   (match #site-header .kb-container's 1180px, centered) ----- */
.kb-categories #page-header-breadcrumbs .kb-container,
.kb-categories #primary .kb-container,
.kb-detail #page-header-breadcrumbs .kb-container,
.kb-detail #primary .kb-container {
  max-width: 1180px;
}

/* ----- categories page hero: light + compact + coral heading (not the dark homepage hero) ----- */
.kb-categories #page-header {
  background: var(--kb-bg);
  background-image: none;
  clip-path: none;
}

.kb-categories #page-header.ph-large {
  padding: 38px 20px 42px; /* shrunk now that the tagline is hidden */
}

.kb-categories #page-header-title {
  color: var(--kb-navy) !important; /* navy hero titles across all inner pages */
  font-weight: 500;
  font-size: 40px;
}

.kb-categories #page-header-tagline {
  display: none;
}

/* hide the breadcrumbs scroll-search (!important beats the JS .show() on scroll) */
.kb-categories .kb-site-search-breadcrumbs-block {
  display: none !important;
}

/* ============================================================
   Detail pages (category /kb/category/:id + tag /kb/tag/:id) — body.kb-detail
   Shared: light hero w/ the item name, coral breadcrumb, carded body, right nav.
   Subcategory-only rules no-op on the tag page (it has no subcats card).
   ============================================================ */
/* ----- hero: light + compact + NAVY category-name heading (not the dark homepage hero) ----- */
.kb-detail #page-header {
  background: var(--kb-bg);
  background-image: none;
  clip-path: none;
}

.kb-detail #page-header.ph-large {
  padding: 44px 20px 48px;
}

.kb-detail #page-header-title {
  color: var(--kb-navy) !important; /* navy hero titles across all inner pages */
  font-weight: 500;
  font-size: 40px;
}

.kb-detail #page-header-tagline {
  display: none; /* Figma hero has no tagline */
}

/* ----- breadcrumbs: current page (last crumb) coral; hide the scroll-search ----- */
.kb-detail .kb-breadcrumbs li:last-child a {
  color: var(--kb-accent);
}

/* the <li> (not the <a>) renders the truncation ellipsis via text-overflow, so color it coral too
   -- otherwise a long last crumb's "..." stays the default dark color (seen on the search page) */
.kb-detail .kb-breadcrumbs li:last-child {
  color: var(--kb-accent);
}

.kb-detail .kb-site-search-breadcrumbs-block {
  display: none !important;
}

/* the base caps the breadcrumb trail to width:70% to leave room for the scroll-search box,
   but that search is hidden on detail pages -- so reclaim the space (same as .kb-sp) and let
   the current-page crumb show much more before it ellipsizes. Stays one line + overflow:hidden,
   so long names still truncate cleanly (no wrap/spill). */
.kb-detail .kb-breadcrumbs {
  max-width: 100%;
  width: 100%;
}

/* ----- the category name now lives in the hero, so drop the in-body category header
   (folder icon + title + article count + in-page search button) ----- */
.kb-detail .kb-category__header {
  display: none;
}

/* ----- body: two stacked cards (Subcategories / Articles) ----- */
.kb-detail #primary {
  padding: 40px 0 40px; /* top gap (breadcrumbs->cards) == bottom gap (pagination->footer) */
}

/* author page only: its #content has a 90px margin-top, so the top gap
   (breadcrumbs->first card) is ~80px, not 40px. Match the bottom gap
   (pagination->footer, which equals this padding-bottom) to that top gap.
   Scoped via :has(.author-sidebar) so category/tag pages keep their 40px. */
.kb-detail #primary:has(.author-sidebar) {
  padding-bottom: 80px;
}

.kb-detail #kb.kb-template-category .kb-category {
  padding: 0; /* .kb-category is now just a transparent shell around the cards */
}

.kb-detail .kb-detail-card {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 8px 32px 24px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  margin-bottom: 24px;
}

.kb-detail .kb-detail-card__title {
  margin: 24px 0 8px;
  color: var(--kb-navy);
  font-weight: 600;
  font-size: 22px;
}

/* rows */
.kb-detail .kb-detail-card .kb-article {
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--kb-border);
}

.kb-detail .kb-detail-card .kb-article:last-child {
  border-bottom: none;
}

/* titles -> navy (base/refresh render them coral via .article-title-highlight) */
.kb-detail .kb-detail-card .kb-article__title a {
  color: var(--kb-navy) !important;
  font-weight: 400;
}

/* subcategory + article item titles a touch smaller (base sets 18px) */
.kb-detail #kb .kb-detail-card .kb-article .kb-article__title {
  font-size: 16px;
}

/* articles card: drop engagement meta (per design) + reclaim its reserved space; no row dividers */
.kb-detail .kb-detail-card--articles .kb-meta {
  display: none;
}

.kb-detail .kb-detail-card--articles .kb-article__title {
  padding-right: 0 !important; /* base reserves 25% for the (now-hidden) meta */
}

/* article titles: base clamps to ONE line + ellipsis (we only recolored it) -- instead show the
   FULL title, wrapping to as many lines as needed (no ellipsis). The file icon is
   position:absolute so it stays aligned with the first line, and the whole-row stretched link
   still covers the row (its ::after references the position:relative row, not the title). */
.kb-detail .kb-detail-card--articles .kb-article__title {
  white-space: normal !important;
  overflow: visible !important;
}

.kb-detail .kb-detail-card--articles .kb-article__title a {
  white-space: normal !important;
  line-height: 1.3; /* base 1.13 was cramped; unified to 1.3 to match author + search titles */
}

.kb-detail #kb .kb-detail-card--articles .kb-article {
  border-bottom: none; /* #kb prefix beats base #kb.kb-template-category .kb-article */
  padding-top: 16px; /* keep base padding-left:30px (room for the file icon); roomier rows */
  padding-bottom: 16px;
}

/* subcategories card: article count on its own line + a right chevron */
.kb-detail .kb-detail-card--subcats .kb-article {
  position: relative;
  padding-right: 28px;
}

.kb-detail .kb-detail-card--subcats .kb-category__count {
  display: block;
  margin-top: 2px;
  color: var(--kb-muted);
  font-size: 13px;
  font-weight: 400;
}

.kb-detail .kb-detail-card--subcats .kb-article::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--kb-muted);
  border-top: 2px solid var(--kb-muted);
  transform: translateY(-50%) rotate(45deg);
}

/* ----- icon + count polish (match Figma) ----- */
/* counts: drop the base "(" / ")" wrappers -> "9 Articles" */
.kb-detail .kb-detail-card .kb-category__count:before,
.kb-detail .kb-detail-card .kb-category__count:after {
  content: "";
}

/* subcategory folder icon -> navy glyph in a light rounded chip, centered on the 2-line row */
.kb-detail .kb-detail-card--subcats .kb-article__title {
  display: flex;
  align-items: center;
}

.kb-detail .kb-detail-card--subcats .category-tag-sub-folder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  border-radius: 8px;
  background: var(--kb-bg);
  font-size: 16px;
  /* outline folder (no dark fill) from the solid glyph */
  color: transparent;
  -webkit-text-stroke: 1.3px var(--kb-muted);
}

/* subcats: no row dividers + more space under the title (per design feedback) */
.kb-detail #kb .kb-detail-card--subcats .kb-article {
  border-bottom: none;
}

.kb-detail .kb-detail-card--subcats .kb-detail-card__title {
  margin-bottom: 20px;
}

/* article file icon -> outline in the same muted color as the subcategory folders */
.kb-detail .kb-detail-card--articles .category-tag-file {
  color: transparent;
  -webkit-text-stroke: 1.3px var(--kb-muted);
  font-size: 18px; /* match the author + search article icons (base is 16px) */
}

/* ----- whole-row click target (subcategory + article rows): only the title link was
   clickable; make the entire row (icon, whitespace, chevron) a hit area with a hover cue.
   The row is position:relative, so a full-bleed ::after on its link stretches the click area
   over the whole row; the decorative chevron gets pointer-events:none so clicks fall through. */
.kb-detail .kb-detail-card--subcats .kb-article,
.kb-detail .kb-detail-card--articles .kb-article {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}

.kb-detail .kb-detail-card--subcats .kb-article:hover,
.kb-detail .kb-detail-card--articles .kb-article:hover {
  background: var(--kb-bg);
}

.kb-detail .kb-detail-card--subcats .category-children::after,
.kb-detail .kb-detail-card--articles .kb-article__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kb-detail .kb-detail-card--subcats .kb-article::after {
  pointer-events: none; /* chevron is decorative -- let clicks fall through to the row link */
}

/* more breathing room under the Articles title */
.kb-detail .kb-detail-card--articles .kb-detail-card__title {
  margin-bottom: 20px;
}

/* ----- sidebar: "Categories" nav card (replaces Popular Articles for client 1) ----- */
.kb-detail #sidebar .kb-cat-nav {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
}

.kb-detail #sidebar .kb-cat-nav__title {
  margin: 0 0 20px; /* more space under the title (matches the Articles card) */
  color: var(--kb-navy);
  font-weight: 600;
  font-size: 22px;
}

.kb-detail #sidebar .kb-cat-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-detail #sidebar .kb-cat-nav__item a {
  display: block;
  padding: 14px 0; /* more space between category names (similar to the article rows) */
  color: var(--kb-muted);
  font-size: 15px;
  font-weight: 400;
}

.kb-detail #sidebar .kb-cat-nav__item a:hover {
  color: var(--kb-navy);
}

.kb-detail #sidebar .kb-cat-nav__item.is-active a {
  color: var(--kb-navy);
  font-weight: 600;
}

/* long category lists: cap to the articles-column height (JS sets max-height),
   fade the cut-off, and reveal the rest with the toggle button */
.kb-detail #sidebar .kb-cat-nav__scroll {
  position: relative;
  overflow: hidden;
}
.kb-detail #sidebar .kb-cat-nav.is-capped:not(.is-expanded) .kb-cat-nav__scroll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--kb-surface));
  pointer-events: none;
}
.kb-detail #sidebar .kb-cat-nav__toggle {
  display: none;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--kb-border);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kb-detail #sidebar .kb-cat-nav.is-capped .kb-cat-nav__toggle {
  display: block;
}
.kb-detail #sidebar .kb-cat-nav__toggle:hover {
  border-color: var(--kb-accent);
  background: #fff5f4;
}

/* ----- pagination: modern outlined pills (first / prev / Page N of M / next / last).
   Shared by the KB detail lists (.kb-detail) and the /sp support-requests list (.kb-sp). ----- */
.kb-detail .kb-pagination,
.kb-sp .kb-pagination {
  padding: 4px 0 0; /* tight gap below the articles card (card already has 24px margin) */
  font-size: 14px;
}

.kb-detail .kb-pagination ul,
.kb-sp .kb-pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.kb-detail .kb-pagination ul li,
.kb-sp .kb-pagination ul li {
  display: inline-flex;
  margin: 0;
}

.kb-detail .kb-pagination ul li a,
.kb-sp .kb-pagination ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  border: 1px solid var(--kb-border);
  border-radius: 999px; /* pill */
  padding: 8px 16px;
  background: var(--kb-surface);
  line-height: 1;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

/* navy text (beat the global `.page-numbers a` coral !important) */
.kb-detail .page-numbers a,
.kb-sp .page-numbers a {
  color: var(--kb-navy) !important;
}

.kb-detail .kb-pagination ul li a:hover,
.kb-sp .kb-pagination ul li a:hover {
  border-color: var(--kb-accent);
  color: var(--kb-accent) !important;
}

/* /sp: the pager follows the requests table (no articles card above it), so give it a
   little more breathing room */
.kb-sp .kb-pagination {
  padding-top: 22px;
  margin-bottom: 8px;
}

/* ----- author page (/kb/author/:id): article excerpts as individual cards ----- */
.kb-detail #content .entry {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  margin-bottom: 20px;
}

.kb-detail .entry .entry-title {
  margin: 0 0 6px;
  font-size: 20px !important; /* `.entry-title{28px !important}` (~line 895, for the article-page
                                 h1) was leaking onto the author list titles -- beat it */
  line-height: 1.3;
}

.kb-detail .entry .entry-title a {
  color: var(--kb-navy) !important; /* base renders coral via .article-title-highlight */
  font-weight: 500;
}

.kb-detail .entry .author-widget-file {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--kb-muted); /* outline icon, matches the other pages */
}

.kb-detail .entry .entry-meta,
.kb-detail .entry .entry-meta .date,
.kb-detail .entry .entry-meta .authored-by {
  color: var(--kb-muted) !important;
  font-size: 13px;
}

.kb-detail .entry .entry-meta {
  margin: 0 0 14px;
}

.kb-detail .entry .entry-content {
  color: var(--kb-text);
}

/* author-page "[...]" excerpt link: removed the blue (--kb-link) override so it falls back to the
   base #999 gray, matching the search-results "[...]" (Brent prefers the gray) */

/* ----- author page sidebar: author info card ----- */
.kb-detail #sidebar.author-sidebar .kb_widget_authors {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
}

.kb-detail .author-sidebar .widget-title {
  color: var(--kb-navy);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 18px;
}

.kb-detail .author-sidebar .kb-widget-author__avatar {
  width: 64px;
  height: 64px;
  margin: 0 14px 8px 0;
}

.kb-detail .author-sidebar .author-page-title {
  color: var(--kb-navy) !important;
  font-weight: 600;
  font-size: 18px;
  top: 0; /* base nudges it +10px */
  padding-top: 20px; /* vertically center against the 64px avatar */
  margin: 0;
}

.kb-detail .author-sidebar .author-description,
.kb-detail .author-sidebar .total-articles-label,
.kb-detail .author-sidebar .author-categories,
.kb-detail .author-sidebar .author-tags {
  color: var(--kb-navy);
  font-weight: 500;
}

.kb-detail .author-sidebar .kb-widget-author__postcount {
  color: var(--kb-muted);
}

.kb-detail .author-sidebar .nav ul li a {
  color: var(--kb-link);
}

/* collapse/expand chevron on the categories + tags toggles (CSS-drawn on the existing <i>,
   so no template change and no FontAwesome dependency). Rotates via .is-open (added by the JS). */
.kb-detail .author-sidebar .author-categories i,
.kb-detail .author-sidebar .author-tags i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--kb-muted);
  border-top: 2px solid var(--kb-muted);
  transform: rotate(45deg); /* points right (collapsed) */
  transition: transform 0.2s ease-out;
  margin-right: 10px;
  font-size: 0; /* neutralize the empty legacy FA glyph */
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.kb-detail .author-sidebar .author-categories.is-open i,
.kb-detail .author-sidebar .author-tags.is-open i {
  transform: rotate(135deg); /* points down (expanded) */
}

/* once the author sidebar stacks BELOW the article list (<=1050), add breathing room between the
   article pagination and the Author Information card (base zeroes the aside's margin-top when
   stacked; desktop keeps them side-by-side so this doesn't apply there) */
@media (max-width: 1050px) {
  .kb-detail #sidebar.author-sidebar {
    margin-top: 28px !important;
  }
  /* when the author card sits above the footer (stacked), match the whitespace below it to the
     ~60px gap above the first article card (breadcrumbs->card) so top/bottom are symmetric.
     Base padding-bottom is 80 (+20 from the layout = 100 gap); 40 (+20) = ~60. */
  .kb-detail #primary:has(.author-sidebar) {
    padding-bottom: 40px;
  }
}

/* ============================================================
   Article page (/kb/article/:id) — ArticlePageView, body.kb-article
   Figma: no hero, no category tree, no rate/subscribe — a clean article
   (title + reading time + body) with a "Content" TOC sidebar, and Popular/
   Top Rated + Prev/Next at the bottom. Start by hiding the extra chrome.
   ============================================================ */
/* search hero */
.kb-article #page-header {
  display: none;
}

/* left column: category-nav tree + popular + authors (Popular/Top Rated will return at the bottom) */
.kb-article #sidebar-categories {
  display: none;
}

/* article meta: date / rating hearts / author / comments / categories / tags */
.kb-article #article-content .kb-entry-meta {
  display: none;
}

/* quick-start aside stays, but hide its rating + subscribe (design keeps only the aside) */
.kb-article .quickstart-aside .hearts,
.kb-article .quickstart-aside #subscribeAlert,
.kb-article .quickstart-aside #subscribeLabel,
.kb-article .quickstart-aside #unsubscribeLabel,
.kb-article .quickstart-aside #unsubscribeAlert,
.kb-article .quickstart-aside #errorAlert,
.kb-article .quickstart-aside #subscribe,
.kb-article .quickstart-aside #unsubscribe {
  display: none;
}

/* breadcrumbs scroll-search (!important beats the JS .show() inline style) */
.kb-article .kb-site-search-breadcrumbs-block {
  display: none !important;
}

/* breadcrumb: current page (last crumb) coral */
.kb-article .kb-breadcrumbs li:last-child a {
  color: var(--kb-accent);
}

/* base caps the trail to width:70% for a scroll-search that's hidden on the article page --
   reclaim the space so the article-title crumb shows more before truncating (same as .kb-detail) */
.kb-article .kb-breadcrumbs {
  max-width: 100%;
  width: 100%;
}

/* breadcrumbs container: 1180px like the header */
.kb-article #page-header-breadcrumbs .kb-container {
  max-width: 1180px;
}

/* article body: #primary becomes the 1180px centered band, laid out as [content | TOC] via flex.
   (base offset #primary left:24%/width:76% + floats content/aside for the now-hidden left sidebar) */
.kb-article #primary.sidebar-right.article-primary {
  left: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 64px; /* 24px sides align the content/TOC with the header logo + breadcrumb */
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* the .clearfix ::before/::after become stray flex items and offset the columns — drop them */
.kb-article #primary.article-primary::before,
.kb-article #primary.article-primary::after {
  display: none;
}

.kb-article #primary > .kb-container {
  max-width: none;
  width: calc(100% - 320px); /* fill the band minus the TOC (280) + gap (40) */
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.kb-article .quickstart-aside {
  flex: 0 0 280px;
  width: auto;
  float: none;
  padding-left: 0;
  margin-top: 110px !important; /* drop the TOC below the article title; reduced by 35 to track
                                   #article-content's smaller top margin so it stays body-aligned */
}

.kb-article #article-content {
  width: 100% !important;
  float: none !important;
  margin-top: 55px !important; /* base 90px left too big a gap between the breadcrumbs and the title */
}

/* ----- article body + question ----- */
.kb-article .article-question {
  color: var(--kb-navy);
}

/* ----- "Content" TOC (the quick-start aside; jump-links generated by main_article_page.js).
   NOT a card — a plain heading list; active section is bold with an orange left line. ----- */
.kb-article .quickstart-aside,
.kb-article .quickstart-aside .kb_widget_quickstart {
  background: none !important;
  border: none;
  box-shadow: none;
  padding: 0;
}

.kb-article #article-quickstart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* hide the article name at the top; replace with a "Content" heading */
.kb-article #article-quickstart-list .quickstart-question {
  display: none;
}

.kb-article #article-quickstart-list::before {
  content: "Content";
  display: block;
  margin: 0 0 14px;
  color: var(--kb-accent);
  font-weight: 600;
  font-size: 18px;
}

.kb-article #article-quickstart-list li {
  margin: 0;
  padding: 0;
  border-bottom: none !important;
}

.kb-article .quickstart-heading-title {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
  color: var(--kb-muted) !important;
  font-size: 15px;
  font-weight: 400 !important;
  cursor: pointer;
}

/* active section: bold navy + orange left line (JS toggles .article-title-highlight on scroll) */
.kb-article .quickstart-heading-title.article-title-highlight {
  border-left-color: var(--kb-accent);
  color: var(--kb-navy) !important;
  font-weight: 600 !important;
}

/* ----- Related articles -> clean bordered box, navy title, blue links, no meta ----- */
.kb-article .kb-article-related {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 24px 32px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  margin-top: 40px;
}

.kb-article .kb-article-related__title {
  color: var(--kb-navy);
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
}

.kb-article .kb-article-related .related_title {
  color: var(--kb-link) !important;
}

.kb-article #article-content .kb-article-related .kb-meta {
  display: none !important;
}

/* ----- bottom: hide Related, show 2-column Popular + Top Rated (per Figma) ----- */
.kb-article #article-content .kb-article-related {
  display: none !important;
}

.kb-article .kb-article-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 24px 32px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  /* the body is now full-width, so an uncapped 1fr/1fr grid spread the two columns
     too far apart. Cap to the article body's width when the TOC is shown (calc(100% -
     320px)), left-aligned, so this footer keeps the original two-column proportions. */
  max-width: calc(100% - 320px);
  margin: 16px 0 0;
}

.kb-article #article-content .kb-article-bottom__title {
  display: inline-block !important; /* underline only spans the title text (base #article-content h3 forces block) */
  color: var(--kb-navy);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--kb-accent); /* thicker coral underline */
}

.kb-article #article-content .kb-article-bottom__list {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.kb-article #article-content .kb-article-bottom__list li {
  list-style: none !important; /* base #article-content li shows a bullet */
  margin: 0 0 12px;
  padding: 0;
}

.kb-article #article-content .kb-article-bottom__list a {
  color: var(--kb-link);
  font-size: 15px;
  text-decoration: underline !important; /* base #article-content a sets none */
}

/* ----- prev/next article pager (Figma: two large buttons below the Popular / Top-Rated
   card, driven by the related-articles list). Client 1 only (gated in the template). ----- */
.kb-article .kb-article-pager {
  display: flex;
  gap: 20px;
  max-width: calc(100% - 320px); /* align with .kb-article-bottom when the TOC is shown */
  margin: 64px 0 0; /* match the gap below the pager (pager -> footer) so it's symmetric */
}

.kb-article #article-content .kb-article-pager__link {
  flex: 1 1 0;
  min-width: 0; /* let a long title truncate instead of stretching the button */
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  text-decoration: none !important; /* base #article-content a underlines */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kb-article #article-content .kb-article-pager__link:hover {
  border-color: var(--kb-accent);
  box-shadow: 0 4px 16px 0 var(--kb-shadow);
}

.kb-article .kb-article-pager__link--next {
  align-items: flex-end;
  text-align: right;
}

.kb-article .kb-article-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1; /* the KB base line-height:30px otherwise makes each button ~100px tall */
  font-weight: 500;
  color: var(--kb-muted);
}

.kb-article #article-content .kb-article-pager__title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--kb-navy);
}

.kb-article .kb-article-pager__spacer {
  flex: 1 1 0; /* fills the empty half so a lone button keeps the same width */
}

/* a lone button (only prev OR only next) sits on the left instead of floating on
   the right; the trailing spacer holds the other half. */
.kb-article #article-content .kb-article-pager--single .kb-article-pager__link {
  align-items: flex-start;
  text-align: left;
}

/* ----- reading time under the title (with an article icon) ----- */
.kb-article #article-content .entry-title {
  margin-bottom: 4px; /* tighten the gap to the reading-time line (beats base #article-content rules) */
}

.kb-article #article-content .kb-reading-time {
  color: var(--kb-muted);
  font-size: 14px;
  margin: 0 0 24px; /* base #article-content p sets a 14px top margin */
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.kb-article .kb-reading-time-icon {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--kb-muted); /* outline file icon, matching the other pages */
  font-size: 15px;
}

/* ============================================================
   Search results page (/kb/search/:keywords) — KnowledgeBaseSearchView, body.kb-detail.kb-search.
   Reuses .kb-detail (light hero, coral breadcrumb, pagination pills, width).
   Simple layout: search results (left) + Popular Articles (right).
   ============================================================ */
/* keep the results header (.kb-detail hides .kb-category__header) */
.kb-search #content .kb-category__header {
  display: block;
  border-bottom: none;
  padding: 0 0 20px;
  position: relative; /* anchor the absolute search icon below */
}

/* results-heading search icon: place it BESIDE the title's first line. It was inline-block, so on
   mobile the wrapping title dropped BELOW it -- make it absolute at the left and pad the title. */
.kb-search #content .kb-category__header .fa-search {
  position: absolute;
  left: 0;
  top: 6px;
}

.kb-search #content .kb-category__header .search-results {
  color: var(--kb-navy);
  font-weight: 600;
  padding-left: 18px; /* clear the absolute search icon; the title also has a leading &nbsp; (~8px,
                         from the shared template) so 18 + 8 lands a clean ~10px gap after the icon */
}

/* each result -> a clean card */
.kb-search #content .kb-article {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  margin-bottom: 16px;
}

/* result title -> navy (base renders coral via .article-title-highlight) */
.kb-search #content .kb-article__title a {
  color: var(--kb-navy) !important;
  line-height: 1.3; /* match the author-page article titles */
}

/* category tags under the excerpt -> blue links */
.kb-search #content .kb-entry-meta .category-name-title {
  color: var(--kb-link);
}

/* "Categories" label span: left at the base muted colour (reverted from coral) */

/* Popular Articles sidebar -> card, pushed down so its top is even with the
   first result card (header is 52px tall and the first card begins at its bottom) */
.kb-search #sidebar .widget {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  margin-top: 52px;
}

/* widget title -> navy with a coral underline spanning the text (mirrors the
   Popular/Top Rated section at the bottom of the article page) */
.kb-search #sidebar .widget-title {
  display: inline-block;
  color: var(--kb-navy);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--kb-accent);
}

/* hide the Authors widget if present (user wants just Popular Articles) */
.kb-search #sidebar .kb_widget_authors {
  display: none;
}

/* mirror the article-page Popular/Top Rated list: no meta, no icon, blue
   underlined links (base renders these coral with an absolute file icon) */
.kb-search #sidebar .kb-meta {
  display: none !important;
}

.kb-search #sidebar .articles-authors-aside-file {
  display: none !important;
}

.kb-search #sidebar .kb-widget-article__format-standard {
  padding-left: 0; /* base reserves 25px for the (now hidden) icon */
}

/* drop the divider lines between articles (base: li border-bottom #e5e7e9),
   and give a bit more space between items (like the article-page Popular list) */
.kb-search #sidebar .widget > ul > li {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 16px;
}

.kb-search #sidebar .kb_widget_articles .kb-widget__entry-title-sidebar {
  color: var(--kb-link) !important; /* base forces coral !important */
  font-size: 15px;
  text-decoration: underline !important;
}

/* search results: hide meta badges, outline+inset the (absolute) file icon, bolder titles */
.kb-search #content .kb-article .kb-meta {
  display: none !important;
}

.kb-search #content .kb-article {
  padding-left: 52px; /* room for the absolutely-positioned icon + gap before the title */
}

.kb-search #content .knowledge-search-file {
  left: 24px; /* base pins it at left:0 (card edge); inset it */
  top: 26px; /* center the icon on the title's first line */
  bottom: auto; /* base top:16 + bottom:0 stretches the icon box */
  font-size: 18px !important; /* match the author-page file icon (base bumps it to 20px) */
  color: transparent !important; /* base sets coral w/ !important */
  -webkit-text-stroke: 1.2px var(--kb-muted); /* muted outline, matching other pages */
}

/* AI overview result uses fa-circle-info (base: absolute, top:16px, left:0) --
   inset it off the card edge and center it on the title (matches the article icon) */
.kb-search #content .ai-result .fa-circle-info {
  left: 24px;
  top: 27px;
  bottom: auto;
  color: var(--kb-accent); /* base #6d6d6d -> coral */
}

.kb-search #content .kb-article__title a {
  font-weight: 600 !important;
}

/* show the full title -> base truncates it to one line w/ an ellipsis
   (#kb.kb-template-category .kb-article__title @ min-width:1051px), reclaim the
   right padding (base reserves 25% for the hidden meta), and loosen line-height */
.kb-search #content #kb .kb-article__format-standard .kb-article__title {
  text-overflow: clip;
  white-space: normal;
  overflow: visible;
  padding-right: 0;
  line-height: 1.35;
}

/* ============================================================
   Support portal — submit a ticket (/sp/ticket). body.kb-sp.
   Form is SDK-rendered into #ticket-create-container:
     .lhnTicketForm > (intro <p>) + <form> > .lhnFields > .lhnField
       .lhnLabel (<p> + .lhnRequired *) + .lhnFieldInput > .lhnInput
     button.lhnSubmit.lhnFormButton
   ============================================================ */
/* constrain content to the header's 1180px band (base leaves it full-width) */
.kb-sp #page-header-breadcrumbs .kb-container,
.kb-sp #primary .kb-container {
  max-width: 1180px;
}

/* ----- hero: light + compact + coral title (drop the big dark photo hero + wedge,
   so the breadcrumbs sit under a clean flat edge — same as the KB detail pages) ----- */
.kb-sp #page-header {
  background: var(--kb-bg);
  background-image: none;
  clip-path: none;
}

.kb-sp #page-header.ph-large {
  padding: 44px 20px 48px;
}

.kb-sp #page-header-title {
  color: var(--kb-navy) !important; /* navy hero titles across all inner pages */
  font-weight: 500;
  font-size: 40px;
}

.kb-sp #page-header-tagline {
  display: none;
}

/* base caps .kb-breadcrumbs to width:70% to leave room for the floated search
   box on the KB list pages -- but /sp pages have no search box beside the crumbs,
   so let them use the full width (otherwise "Chat Request Details" truncates to
   "Cha...", especially on mobile) */
.kb-sp .kb-breadcrumbs {
  max-width: 100%;
  width: 100%;
}

/* last breadcrumb (current page) -> coral, matching the other inner pages */
.kb-sp .kb-breadcrumbs li:last-child a {
  color: var(--kb-accent);
}

/* content fills the full 1180 band (base pins sidebar-right #content to 70%) */
.kb-sp #primary.sidebar-right #content {
  width: 100%;
  float: none;
}

/* ----- two-column: promo image (left) + form (right, a bit wider).
   SHARED by the ticket (/sp/ticket) and callback (/sp/callback) forms. ----- */
.kb-sp .sp-ticket-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-top: 28px;
  margin: 0 0 68px;
}

/* left promo card -- the exported Figma image, trimmed to the card (503x615 @2x,
   shadow padding removed) so its visible top-left aligns with the header + form
   top. rounded corners are baked into the image; the shadow is re-added via
   drop-shadow (follows the rounded alpha, casts outward without shifting layout).
   40% keeps the form wider than the image. */
.kb-sp .sp-ticket-promo {
  flex: 0 0 40%;
  aspect-ratio: 1006/1230;
  background: url(https://cdn.livehelpnow.net/customizations/1/sp-ticket-promo.png) top left/contain no-repeat;
  filter: drop-shadow(0 6px 16px rgba(31, 38, 46, 0.18));
}

.kb-sp .create-ticket,
.kb-sp .create-callback {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.kb-sp #ticket-create-container,
.kb-sp #callback-create-container {
  padding: 0;
}

/* the form -> a light gray panel */
.kb-sp .lhnTicketForm,
.kb-sp .lhnCallbackForm {
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  box-shadow: none;
  padding: 26px 28px;
  box-sizing: border-box;
}

.kb-sp .lhnTicketForm form,
.kb-sp .lhnCallbackForm form {
  padding: 0; /* base adds a right padding */
}

/* hide the "Please provide..." intro line */
.kb-sp .lhnTicketForm > div:first-child,
.kb-sp .lhnCallbackForm > div:first-child {
  display: none;
}

/* fields in a flex column (lets the ticket page reorder to the Figma order) */
.kb-sp .lhnFields {
  display: flex;
  flex-direction: column;
}

.kb-sp .lhnField.lhnHidden,
.kb-sp .lhnHide {
  display: none;
}

.kb-sp .create-ticket .lhnField,
.kb-sp .create-callback .lhnField {
  width: 100%;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
}

/* labels -> navy 600, coral required star */
.kb-sp .create-ticket .lhnLabel,
.kb-sp .create-callback .lhnLabel {
  display: flex;
  align-items: center;
  color: var(--kb-navy);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.kb-sp .create-ticket .lhnLabel p,
.kb-sp .create-callback .lhnLabel p {
  margin: 0;
}

.kb-sp .create-ticket .lhnRequired,
.kb-sp .create-callback .lhnRequired {
  color: var(--kb-accent);
  margin-left: 3px;
}

/* inputs -> white fields on the gray panel */
.kb-sp .create-ticket .lhnFieldInput input,
.kb-sp .create-ticket .lhnFieldInput select,
.kb-sp .create-ticket .lhnFieldInput textarea,
.kb-sp .create-callback .lhnFieldInput input,
.kb-sp .create-callback .lhnFieldInput select,
.kb-sp .create-callback .lhnFieldInput textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--kb-border) !important; /* base sets #c1bcbc !important */
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  background: #fff;
  color: var(--kb-text);
  box-sizing: border-box;
}

.kb-sp .create-ticket .lhnFieldInput textarea,
.kb-sp .create-callback .lhnFieldInput textarea {
  min-height: 120px;
  resize: vertical;
}

.kb-sp .create-ticket .lhnFieldInput input:focus,
.kb-sp .create-ticket .lhnFieldInput select:focus,
.kb-sp .create-ticket .lhnFieldInput textarea:focus,
.kb-sp .create-callback .lhnFieldInput input:focus,
.kb-sp .create-callback .lhnFieldInput select:focus,
.kb-sp .create-callback .lhnFieldInput textarea:focus {
  border-color: var(--kb-accent) !important;
  outline: none;
}

/* ----- TICKET-ONLY (scoped to .create-ticket so it never touches callback fields):
   Figma field order + placeholder-only text fields ----- */
.kb-sp .create-ticket .lhnField:has([crm=email]) {
  order: 1;
}

.kb-sp .create-ticket .lhnField:has([crm=account_number]) {
  order: 2;
}

.kb-sp .create-ticket .lhnField:has([crm=website]) {
  order: 3;
}

.kb-sp .create-ticket .lhnField:has([crm=inquiry]) {
  order: 4;
}

.kb-sp .create-ticket .lhnField:has(input[type=file]) {
  order: 5;
}

.kb-sp .create-ticket .lhnField:has([crm=email]) .lhnLabel,
.kb-sp .create-ticket .lhnField:has([crm=account_number]) .lhnLabel,
.kb-sp .create-ticket .lhnField:has([crm=website]) .lhnLabel {
  display: none;
}

/* ----- TICKET-ONLY: file-upload field -> dashed dropzone ("Drag & Drop or select
   file"). SDK renders a plain <input type=file>; cover it so a click anywhere opens
   the picker, and overlay the icon + text via pseudo-elements ----- */
.kb-sp .create-ticket .lhnField:has(input[type=file]) .lhnLabel {
  display: none;
}

.kb-sp .create-ticket .lhnField:has(input[type=file]) .lhnFieldInput {
  position: relative;
  border: 2px dashed var(--kb-border);
  border-radius: 10px;
  background: #fff;
  padding: 24px 16px;
  text-align: center;
}

.kb-sp .create-ticket .lhnField:has(input[type=file]) .lhnFieldInput::before {
  content: "\f093"; /* fa-upload (solid) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  color: var(--kb-muted);
  font-size: 20px;
  margin-bottom: 8px;
}

.kb-sp .create-ticket .lhnField:has(input[type=file]) .lhnFieldInput::after {
  content: "Drag & Drop or select file";
  color: var(--kb-muted);
  font-size: 14px;
}

.kb-sp .create-ticket .lhnField input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  background: transparent;
}

/* submit -> coral pill (shared by both forms) */
.kb-sp .lhnTicketForm button.lhnSubmit,
.kb-sp .lhnCallbackForm button.lhnSubmit {
  background: var(--kb-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 26px;
  width: auto;
  float: none;
  margin: 6px 0 0;
  font-weight: 600;
  line-height: 1; /* base sets line-height:45px, pushing the text off-center */
  font-size: 15px;
  text-transform: none;
  cursor: pointer;
}

.kb-sp .lhnTicketForm button.lhnSubmit:hover,
.kb-sp .lhnCallbackForm button.lhnSubmit:hover {
  background: var(--kb-accent-hover);
}

/* ticket-only: swap the SDK's "Submit" text for "Submit Ticket ->" */
.kb-sp .lhnTicketForm button.lhnSubmit {
  font-size: 0;
}

.kb-sp .lhnTicketForm button.lhnSubmit::after {
  content: "Submit Ticket  →";
  font-size: 15px;
}

/* ============================================================
   Support portal — Support Requests list (/sp/). body.kb-sp.
   Server-rendered: #support-requests > #chat-support >
     h3 + #sr-search-block(input + X + button) + #support-request-table + #no-search-results
   ============================================================ */
/* hero already shows "Support Requests" -> drop the redundant in-body heading */
.kb-sp #chat-support > h3 {
  display: none;
}

/* equal, roomy whitespace above (breadcrumbs -> card) and below (card -> footer);
   base leaves the card jammed against the footer. padding-top (not margin) so it
   adds instead of collapsing into #content's base 90px top margin */
.kb-sp #support-requests {
  padding-top: 28px;
  margin-bottom: 68px;
}

/* the requests list -> a card */
.kb-sp #chat-support {
  position: relative;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px 0 var(--kb-shadow);
  padding: 30px 26px; /* a bit more top; equal top/bottom (table margin-bottom zeroed below) */
}

/* search box -> top-right, refreshed (base pins it absolute w/ a gray button) */
.kb-sp #sr-search-block {
  position: relative;
  width: 300px;
  margin: 0 0 18px auto;
  top: auto;
  right: auto;
  display: block;
}

.kb-sp #sr-search-input {
  float: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  border: 1px solid var(--kb-border);
  border-radius: 8px;
  padding: 10px 46px 10px 14px;
  font-size: 14px;
}

.kb-sp #sr-search-input:focus {
  border-color: var(--kb-accent);
  outline: none;
}

.kb-sp #sr-search-button {
  top: 0;
  bottom: 0;
  right: 0;
  width: 40px;
  background: var(--kb-navy);
  border: none;
  border-radius: 0 8px 8px 0;
}

.kb-sp #sr-search-button i {
  color: #fff;
}

.kb-sp #clear-search-input {
  right: 48px;
  color: var(--kb-muted);
}

/* table */
.kb-sp #support-request-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0; /* base adds 30px, breaking the equal top/bottom card padding */
}

.kb-sp .support-request-header {
  position: static; /* base: sticky top:160 */
  background: transparent; /* base: #ebeef0 */
  color: var(--kb-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  vertical-align: middle; /* center headers that wrap to two lines with single-line ones */
  padding: 12px 14px;
  border-bottom: 2px solid var(--kb-border);
}

.kb-sp #support-request-body td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--kb-border);
  color: var(--kb-text);
  font-size: 14px;
  vertical-align: middle;
}

.kb-sp #support-request-body tr:last-child td {
  border-bottom: none;
}

/* first column (request id) -> navy medium */
.kb-sp #support-request-body td:first-child {
  color: var(--kb-navy);
  font-weight: 600;
}

/* row hover -> light fill (base adds a stray box-shadow + radius on the tr) */
.kb-sp .support-request:hover {
  background: var(--kb-bg);
  box-shadow: none;
  border-radius: 0;
}

.kb-sp .details-page-link {
  color: var(--kb-muted);
}

.kb-sp .support-request:hover .details-page-link {
  color: var(--kb-accent);
}

/*# sourceMappingURL=custom.css.map*/
/* phone field: the SDK's country/flag selector (.lhnPhoneSelectedCountry) overlays
   the input's left edge; restore left padding so the placeholder/value clears it */
.kb-sp .create-ticket .lhnPhoneInput input[type="tel"],
.kb-sp .create-callback .lhnPhoneInput input[type="tel"] {
    padding-left: 78px;
}

/* file-upload dropzone: once a file is picked, show its name instead of the prompt
   (a tiny client-1 script sets data-file on the .lhnFieldInput on change) */
.kb-sp .create-ticket .lhnField:has(input[type="file"]) .lhnFieldInput[data-file]:not([data-file=""])::before {
    content: "\f15b";   /* fa-file (solid) */
    color: var(--kb-accent);
}

.kb-sp .create-ticket .lhnField:has(input[type="file"]) .lhnFieldInput[data-file]:not([data-file=""])::after {
    content: attr(data-file);
    color: var(--kb-navy);
    font-weight: 600;
}

/* ============================================================
   Support portal — request details (/sp/:system/:id). body.kb-sp.
   Variants: chat (#chat-message-block + #chat-message-info), ticket, call.
   ============================================================ */

/* equal, roomy top/bottom whitespace like the other /sp pages */
.kb-sp #request-details {
    padding-top: 28px;
    margin-bottom: 68px;
}

.kb-sp .request-details-container {
    margin-top: 0;
    padding-bottom: 0;
}

/* title -> navy */
.kb-sp .request-details-container h3 {
    color: var(--kb-navy);
    font-weight: 600;
    font-size: 24px;
    margin: 0 0 22px;
}

/* ----- chat: transcript (left) + info (right), floated side by side ----- */
.kb-sp #chat-message-block {
    display: block;
    float: left;
    width: 68%;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px 0 var(--kb-shadow);
    padding: 4px 26px;
    box-sizing: border-box;
}

.kb-sp #chat-message {
    border-top: 1px solid var(--kb-border);
    margin: 0;
    padding: 18px 0;
}

.kb-sp #chat-message-block #chat-message:first-child {
    border-top: none;
}

.kb-sp .message-title-block {
    margin: 0 0 8px;
}

.kb-sp .message-name {
    color: var(--kb-navy);
    font-weight: 600;
}

.kb-sp .message-date {
    color: var(--kb-muted);
    font-size: 13px;
}

.kb-sp .message-text {
    color: var(--kb-text);
    line-height: 1.6;
}

/* ----- info card (chat) ----- */
.kb-sp #chat-message-info {
    position: static;
    float: right;
    width: 29%;
    margin: 0;
    top: auto;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px 0 var(--kb-shadow);
    padding: 22px 24px;
    box-sizing: border-box;
}

.kb-sp #chat-info-title {
    color: var(--kb-navy);
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 16px;
}

.kb-sp .info-section {
    margin-bottom: 13px;
}

.kb-sp .field-label {
    color: var(--kb-navy);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
}

.kb-sp .field-value {
    color: var(--kb-muted);
    font-size: 14px;
    margin: 0;
}

/* ----- ticket variant: comment thread (left) + info card (right) + reply box ----- */
.kb-sp #ticket-comment-block {
    display: block;
    float: left;
    width: 68%;
    margin: 0;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px 0 var(--kb-shadow);
    padding: 4px 26px;
    box-sizing: border-box;
}

.kb-sp #ticket-comment {
    border-top: 1px solid var(--kb-border);
    margin: 0;
    padding: 18px 0;
}

.kb-sp #ticket-comment-block #ticket-comment:first-child {
    border-top: none;
}

.kb-sp .ticket-comment-title-block {
    margin: 0 0 8px;
}

.kb-sp .comment-name {
    color: var(--kb-navy);
    font-weight: 600;
}

.kb-sp .comment-date {
    color: var(--kb-muted);
    font-size: 13px;
}

/* info card (matches the chat info card) */
.kb-sp #ticket-comment-info-block {
    width: 29%;
    margin: 0;
    top: auto;
    right: auto;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px 0 var(--kb-shadow);
    padding: 22px 24px;
    box-sizing: border-box;
    line-height: 1.5;
}

.kb-sp #ticket-comment-info-block h5 {
    color: var(--kb-navy);
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 16px;
}

/* reply box */
.kb-sp #add-ticket-comment-container {
    clear: left;
    width: 68%;
    margin: 24px 0 0;
    padding: 0;
    min-height: 0;
    background: transparent;
}

.kb-sp #add-ticket-comment-container h6 {
    color: var(--kb-navy);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 0;
    margin: 0 0 10px;
}

.kb-sp #comment-text {
    border: 1px solid var(--kb-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--kb-text);
}

.kb-sp #comment-text:focus {
    border-color: var(--kb-accent);
}

.kb-sp #comment-button-container {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 12px 0 0;
}

.kb-sp .add-attachments {
    color: var(--kb-muted);
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap; /* keep "Attach Files" on one line next to Submit */
}

.kb-sp .add-attachments:hover {
    color: var(--kb-accent);
}

.kb-sp .add-comment {
    background: var(--kb-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.kb-sp .add-comment:hover {
    background: var(--kb-accent-hover);
}

/* attachment dropzone (shown when "Attach Files" is clicked) */
.kb-sp #drop-container {
    margin-top: 14px;
}

.kb-sp .drop_location {
    border: 2px dashed var(--kb-border);
    border-radius: 10px;
    background: #fff;
    padding: 20px 16px;
    text-align: center;
}

.kb-sp .upload_note {
    color: var(--kb-muted);
    font-size: 14px;
}

/* attachment chip: base app.css renders each attached file as a fixed 90x90 square with
   overflow:hidden, which clips the filename entirely (only the size + X show). Rebuild it
   as a horizontal chip -- filename (truncated) on top, size below, remove-X on the right. */
.kb-sp .drop_location:has(.attachment-container) {
    text-align: left; /* chips flow from the left instead of centered */
}

.kb-sp .attachment-container {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: 340px;
    height: auto;
    min-height: 0;
    overflow: visible;
    text-align: left;
    vertical-align: top;
    margin: 0 12px 0 0;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    background: var(--kb-surface);
}

.kb-sp .attachment-container .attachment-icon {
    position: static;
    top: auto;
    max-width: none;
    min-width: 0; /* let the filename truncate instead of forcing the chip wide */
    display: flex;
    flex-direction: column;
}

.kb-sp .attachment-container .file-name {
    position: static;
    top: auto;
    order: 0; /* name above size */
    margin: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--kb-navy);
}

.kb-sp .attachment-container .file-size {
    position: static;
    top: auto;
    order: 1; /* size below name */
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--kb-muted);
}

.kb-sp .attachment-container .remove-attachment {
    position: static;
    top: auto;
    left: auto;
    order: 1; /* push the X to the right edge of the chip */
    margin: 0 0 0 auto;
    height: auto;
    width: auto;
    padding: 0 2px;
    font-size: 15px;
    line-height: 1;
    color: var(--kb-muted);
}

.kb-sp .attachment-container .remove-attachment:hover {
    color: var(--kb-accent);
}

/* ----- call variant ----- */
/* hide the generic outer "Request Details" heading (only the call has .inner-card;
   its .system-title-block carries the real title) */
.kb-sp .request-details-container:has(.inner-card) > h3 {
    display: none;
}

.kb-sp .details-card:has(.inner-card) {
    width: 100%;
    margin: 0;
}

.kb-sp .inner-card {
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px 0 var(--kb-shadow);
    padding: 26px 30px;
}

.kb-sp .system-title-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px !important;   /* base inline style sets 50px */
}

.kb-sp .system-title-block i {
    color: var(--kb-accent);
    font-size: 26px;
}

.kb-sp .system-title-block h3 {
    color: var(--kb-navy);
    font-weight: 600;
    font-size: 22px;
    margin: 0;
}

/* details container: drop the blue border + gray fill */
.kb-sp .call-details-container {
    border: 1px solid var(--kb-border);
    background: transparent;
    border-radius: 12px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.kb-sp .call-details-title-block {
    background: var(--kb-bg);
    box-shadow: none;
    padding: 15px 18px;
    border-bottom: 1px solid var(--kb-border);
    border-radius: 0;
}

.kb-sp .call-details-title-block h5 {
    color: var(--kb-navy);
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

/* the field table */
.kb-sp .call-details-table-container {
    background: transparent;
    box-shadow: none;
}

.kb-sp .call-details-table-container table {
    box-shadow: none;
    border-collapse: collapse;
}

.kb-sp .call-details-table-container th {
    color: var(--kb-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 12px 18px;
    border-bottom: 2px solid var(--kb-border);
    background: transparent;
}

.kb-sp .call-details-table-container .support-request-row {
    box-shadow: none;
}

.kb-sp .call-details-table-container td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--kb-border);
    font-size: 14px;
    color: var(--kb-text);
}

.kb-sp .call-details-table-container tr:last-child td {
    border-bottom: none;
}

.kb-sp .call-details-table-container td:first-child {
    color: var(--kb-navy);
    font-weight: 600;
}

/* ===== user (sso) dropdown -> match the Categories dropdown exactly ===== */
#sso-dropdown-menu {
    background: var(--kb-navy);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(31, 38, 46, 0.28);
    padding: 6px 0;
    overflow: hidden;
    min-width: 180px;
    border: none;
}

#sso-dropdown-menu a {
    color: #fff !important;
    text-transform: none !important;   /* base uppercases the menu links */
    font-weight: 500 !important;
    padding: 9px 18px;
}

#sso-dropdown-menu a:hover {
    background: var(--kb-accent) !important;   /* base sets a white hover bg */
    color: #fff !important;
}

/* open on hover like the Categories dropdown (JS click still works too) */
#menu-primary-nav li:has(#sso-menu-btn):hover #sso-dropdown-menu {
    display: block;
}

/* ===== user (sso) menu button: name + caret dark so they show on the white header ===== */
#nav-primary-menu2 #menu-primary-nav #sso-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--kb-navy);
    font-weight: 500;
    text-transform: none;
}

#nav-primary-menu2 #menu-primary-nav #sso-menu-btn .fa-caret-down {
    color: var(--kb-navy) !important;   /* was coral; match the name/nav */
    font-size: 14px;
}

#sso-menu-btn .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

/* the FA fa-caret-down glyph renders as tofu (□) in this build -> draw a CSS triangle */
#nav-primary-menu2 #menu-primary-nav #sso-menu-btn .fa-caret-down {
    font-size: 0 !important;
    line-height: 1;
    margin-left: 2px;
}

#nav-primary-menu2 #menu-primary-nav #sso-menu-btn .fa-caret-down::before {
    content: "" !important;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--kb-navy);
    vertical-align: middle;
}

/* typeahead: the local SDK renders views + ratings in .lhn_content_footer
   (.lhn_views / .lhn_ratings), not .lhn_metadata -> hide them */
#kb-site-search__results .lhn_content_footer,
#kb-site-search__results .lhn_views,
#kb-site-search__results .lhn_ratings {
    display: none !important;
}

/* ============================================================
   Consistent content band: align ALL content to the header's logo/sign-in
   edges (154-1286) -- max-width 1180 + 24px side padding, same as the header
   pill's .kb-container, so content lines up with the visible header content
   on every page (home widgets, breadcrumbs, primary, footer).
   ============================================================ */
#page-header-breadcrumbs .kb-container,
#primary .kb-container,
#homepage-widgets .kb-container,
#site-footer-widgets .kb-container {
    max-width: 1180px !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* /kb "All Categories": the .kb-archive <li> gutter padding (20px) insets the
   OUTER cards, making the grid ~20px narrower than the header each side. Pull the
   grid out by the gutter so the outer cards align with the 154-1286 content band. */
.kb-categories #content .kb-archive {
    margin-left: -20px;
    margin-right: -20px;
}

/* ============================================================
   /auth — sign in / sign up / forgot + change password.
   Portal sibling of /sp: same light page-header band + a centered
   white card for the form. Scoped to body.kb-auth (client 1 only).
   ============================================================ */

/* page-header: light band + navy title, matching the /sp pages (the base
   #page-header is the headset hero; auth previously had no body class). */
.kb-auth #page-header {
  background: var(--kb-bg);
  background-image: none;
  clip-path: none;
}
.kb-auth #page-header.ph-large {
  padding: 44px 20px 48px;
}
.kb-auth #page-header-title {
  color: var(--kb-navy) !important;
  font-weight: 500;
  font-size: 40px;
}
.kb-auth #page-header-tagline {
  display: none;
}

/* the form wrapper -> a centered white card */
.kb-auth .signin-container,
.kb-auth .forgot-password-container {
  display: flow-root; /* contain the floated social column */
  width: 100%;
  max-width: 460px;
  margin: 56px auto 80px;
  padding: 44px 44px 40px;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  box-shadow: 0 12px 34px var(--kb-shadow);
}
/* sign-in is two-column (email form + social) -> wider card */
.kb-auth .signin-container:has(#portal-login) {
  max-width: 780px;
}

/* card title: hidden — the page-header band now shows the contextual title
   ("Sign in" / "Sign up" / "Reset password" / "Set new password"). */
.kb-auth .auth-title {
  display: none;
}
.kb-auth .auth-subtitle {
  display: block;
  margin: 0 0 24px;
  color: var(--kb-muted);
  font-size: 15px;
  text-align: center;
}

/* two-column split (sign-in only) */
.kb-auth #portal-login {
  box-sizing: border-box;
  width: 56%;
  display: inline-block;
  vertical-align: top;
  border-right: 1px solid var(--kb-border);
  padding-right: 40px;
}
.kb-auth #social-networl-login {
  box-sizing: border-box;
  width: 40%;
  float: right;
  padding-top: 2px;
}

/* inputs */
.kb-auth .signin-input {
  width: 100%;
  margin: 0 0 14px;
}
.kb-auth .signin-input input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--kb-text);
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 10px;
}
.kb-auth .signin-input input::placeholder {
  color: #9aa4af;
}
.kb-auth .signin-input input:focus {
  outline: none;
  border-color: var(--kb-accent);
  box-shadow: 0 0 0 3px rgba(236, 76, 65, 0.12);
}

/* submit / login button: coral pill, full-width of its column */
.kb-auth .signin-button {
  width: 100%;
  margin: 8px 0 0;
  text-align: left;
}
.kb-auth .signin-button button {
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background-color: var(--kb-accent) !important;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.kb-auth .signin-button button:hover {
  background-color: var(--kb-accent-hover) !important;
}

/* forgot / sign-up links under the sign-in form */
.kb-auth .sign-in-forgot-password {
  width: 100%;
  margin-top: 18px;
  font-size: 14px;
}
.kb-auth .sign-in-forgot-password a {
  color: var(--kb-link);
  text-decoration: none;
}
.kb-auth .sign-in-forgot-password a:hover {
  text-decoration: underline;
}

/* social sign-in -> outlined white buttons with the brand icon in colour */
.kb-auth #social-networl-login ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kb-auth .social-signin {
  display: flex;
  align-items: center;
  justify-content: center; /* center icon + text now that the button is full-width */
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 16px;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 10px;
  color: var(--kb-text);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* the base pins .social-signin to a fixed 220px via a selector that outranks a plain
   `.kb-auth .social-signin`, so use a high-specificity selector to make the button fill its
   container (mobile: matches the input width; desktop: fills the social column) */
.kb-auth #social-networl-login ul li.social-signin {
  width: 100% !important;
  max-width: none !important; /* base caps .social-signin at max-width:220px, which clamped the 100% */
}
.kb-auth .social-signin:hover {
  border-color: var(--kb-navy);
  box-shadow: 0 3px 10px var(--kb-shadow);
}
.kb-auth .social-signin a {
  margin: 0;
  color: var(--kb-text);
  text-decoration: none;
}
.kb-auth .social-signin.google i {
  color: #4285f4;
}
.kb-auth .social-signin.facebook i {
  color: #1877f2;
}

/* flash alerts */
.kb-auth .alert {
  border-radius: 10px;
  margin: 0 0 18px;
}

/* ============================================================
   Homepage FAQ + "Still need help?" (client 1). The FAQ reuses the
   pinned homepage articles as an accordion; both sections align to the
   same 1180 content band the Popular/Top-Rated/Latest card sits on.
   ============================================================ */

/* shared band: matches the widgets card outer edges (130-1310 @ 1440) */
.kb-home-band {
  width: min(1180px, 92%);
  margin: 0 auto;
}

/* ----- FAQ ----- */
#homepage-faq {
  margin-top: 92px;
}
#homepage-faq-title {
  margin: 0 0 10px;
  color: var(--kb-muted);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3; /* a touch more room when it wraps to 2 lines on small screens */
  text-align: left;
}
#homepage-faq-title .kb-title-accent {
  color: var(--kb-accent);
}
#homepage-faq-description {
  margin: 0 0 28px;
  color: var(--kb-muted);
  font-size: 18px;
  text-align: left;
}
.kb-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kb-faq-item {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kb-faq-item:hover {
  border-color: #d7dde4;
}
.kb-faq-item[open] {
  box-shadow: 0 4px 16px var(--kb-shadow);
}
.kb-faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}
.kb-faq-summary::-webkit-details-marker {
  display: none;
}
.kb-faq-question {
  color: var(--kb-navy);
  font-size: 16px;
  font-weight: 500;
}
.kb-faq-chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--kb-muted);
  border-bottom: 2px solid var(--kb-muted);
  transform: rotate(-45deg); /* points right when closed */
  transition: transform 0.2s ease;
}
.kb-faq-item[open] .kb-faq-chevron {
  transform: rotate(45deg); /* points down when open */
}
.kb-faq-answer {
  padding: 0 24px 20px;
  color: var(--kb-text);
  font-size: 15px;
  line-height: 1.6;
}
.kb-faq-answer p {
  margin: 0 0 12px;
}
.kb-faq-readmore {
  color: var(--kb-link);
  font-weight: 500;
  text-decoration: none;
}
.kb-faq-readmore:hover {
  text-decoration: underline;
}

/* ----- Still need help? ----- */
#still-need-help {
  margin: 92px 0 92px;
}
.snh-card {
  padding: 82px 24px;
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(125% 100% at 50% 122%, rgba(236, 76, 65, 0.95) 0%, rgba(236, 76, 65, 0.45) 40%, rgba(236, 76, 65, 0) 68%),
    var(--kb-navy);
}
.snh-title {
  margin: 0 0 12px;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
.snh-subtitle {
  margin: 0 auto 28px;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.55;
}
.snh-button {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--kb-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.snh-button:hover {
  background: var(--kb-accent-hover);
}

/* article page: hide the comments section ("Leave a comment?" + thread).
   base #article-content ID rule out-specifies the .allow-comments class -> !important */
.kb-article .allow-comments,
.kb-article #comments {
  display: none !important;
}

/* article page: when the article has no h1/h2 headings the "Content" TOC is empty,
   so hide the aside and let the body fill the full 1180 band. (.quickstart-heading
   items are appended by main_article_page.js, so :has() reacts if headings exist.) */
.kb-article #primary.article-primary:not(:has(.quickstart-heading)) .quickstart-aside {
  display: none;
}
.kb-article #primary.article-primary:not(:has(.quickstart-heading)) > .kb-container {
  width: 100%;
}

/* ==========================================================================
   RESPONSIVE (custom.css had none — the refresh was built at desktop width).
   Breakpoints: tablet <= 1024px, mobile <= 600px.
   ========================================================================== */

/* ----- homepage: category grid stacks 3 -> 2 -> 1 ----- */
@media (max-width: 900px) {
  #category-widget {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  #category-widget {
    grid-template-columns: 1fr;
  }
}
.category-widget-link,
.category-widget,
.category-widget-info {
  min-width: 0; /* let grid cells shrink instead of forcing the track to min-content */
}

/* ----- /kb All Categories: card grid stacks 3 -> 2 -> 1 ----- */
@media (max-width: 900px) {
  .kb-categories .kb-archive--two-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .kb-categories .kb-archive--two-cols {
    grid-template-columns: 1fr;
  }
  /* the desktop -20px gutter pull overflows once stacked -> drop it */
  .kb-categories #content .kb-archive {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ----- /auth: stack the email form + social columns (tablet + mobile).
   Base hides the social <900px and leaves an empty column + divider, so stack at 900. */
@media (max-width: 900px) {
  .kb-auth #portal-login {
    width: 100%;
    display: block;
    border-right: none;
    padding-right: 0;
  }
  .kb-auth #social-networl-login {
    width: 100%;
    float: none;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--kb-border);
  }
  .kb-auth #social-networl-login ul {
    display: block !important; /* base hides social <900px; keep it, stacked below the form */
  }
  /* the two-column card is max-width:780; once it stacks to single-column the fields stretch way
     too wide -> shrink it to the single-column width */
  .kb-auth .signin-container:has(#portal-login) {
    max-width: 460px;
  }
}
@media (max-width: 600px) {
  .kb-auth .signin-container,
  .kb-auth .forgot-password-container {
    padding: 32px 22px 28px;
  }
}

/* ----- article page: TOC + related card responsive ----- */
@media (max-width: 900px) {
  .kb-article #primary.article-primary {
    flex-direction: column; /* TOC (if any) stacks below the body */
  }
  .kb-article #primary > .kb-container {
    width: 100%;
  }
  .kb-article .quickstart-aside {
    flex: none;
    width: 100%;
    margin-top: 24px !important;
  }
  .kb-article .kb-article-bottom {
    max-width: none; /* was calc(100% - 320px); fill the width */
  }
  .kb-article .kb-article-pager {
    max-width: none; /* match: fill the width once the TOC stacks */
  }
}
@media (max-width: 600px) {
  .kb-article .kb-article-bottom {
    grid-template-columns: 1fr; /* Popular / Top Rated stack */
    gap: 20px;
  }
  .kb-article .kb-article-pager {
    flex-direction: column; /* stack the two buttons */
  }
  .kb-article .kb-article-pager__link--next {
    align-items: flex-start; /* left-align the Next button when stacked */
    text-align: left;
  }
}

/* ----- /sp portal (login-gated — stacking added blind, verify while signed in) ----- */
@media (max-width: 900px) {
  .kb-sp .sp-ticket-layout {
    flex-direction: column; /* promo + form stack */
    align-items: stretch; /* base is flex-start, which keeps the stacked form at
                             content width -- stretch it to fill the column */
  }
  .kb-sp .sp-ticket-promo {
    display: none; /* decorative "Find Answers Faster" image; hide on tablet/phone */
  }
  /* with the promo gone the form is the only child -- make sure it takes the
     full width (flex:1 grows on the vertical main axis in a column, not width) */
  .kb-sp .create-ticket,
  .kb-sp .create-callback {
    width: 100%;
  }
  /* request-details: stack the thread + info columns (they float 68%/29% on desktop).
     Chat stacks thread -> info, but ticket stacks info -> comment (different DOM order),
     so use an ORDER-INDEPENDENT gap: reset base top margins and give every stacked card
     the same 20px bottom margin. This also overrides base app.css's 100px bottom margin
     on the thread column, which would otherwise leave a huge gap once stacked. */
  .kb-sp #chat-message-block,
  .kb-sp #chat-message-info,
  .kb-sp #ticket-comment-block,
  .kb-sp #ticket-comment-info-block {
    float: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 20px;
  }
  /* reply box is 68% wide on desktop (matches the comment column) -- full width on phone */
  .kb-sp #add-ticket-comment-container {
    width: 100%;
  }
  /* the "Chat/Ticket/Call Transcript #… - …" title is 24px on desktop; too big
     once it wraps to 2-3 lines on a phone */
  .kb-sp .request-details-container h3 {
    font-size: 19px;
    margin-bottom: 18px;
  }
}
@media (max-width: 600px) {
  /* let wide tables scroll instead of overflowing the phone */
  .kb-sp #support-request-table,
  .kb-sp .call-details-table-container {
    overflow-x: auto;
  }
}

/* ----- /sp support-requests list: full-width content + responsive table ----- */
@media (max-width: 900px) {
  /* base re-narrows #content to 70% on small screens (no real sidebar exists) */
  .kb-sp #primary #content {
    width: 100% !important;
    float: none !important;
  }
}
@media (max-width: 600px) {
  .kb-sp #sr-search-block {
    width: 100%;
  }
  /* 6-column requests table -> one stacked card per row (label: value) */
  .kb-sp #support-request-table thead {
    display: none;
  }
  .kb-sp #support-request-table tbody,
  .kb-sp #support-request-table tr,
  .kb-sp #support-request-table td {
    display: block;
    width: auto;
  }
  .kb-sp #support-request-table tr {
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    padding: 6px 14px;
    margin-bottom: 12px;
  }
  .kb-sp #support-request-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border: none;
    text-align: right;
  }
  .kb-sp #support-request-table td::before {
    font-weight: 600;
    color: var(--kb-muted);
    text-align: left;
  }
  .kb-sp #support-request-table td:nth-child(1)::before { content: "Request ID"; }
  .kb-sp #support-request-table td:nth-child(2)::before { content: "Type"; }
  .kb-sp #support-request-table td:nth-child(3)::before { content: "Date"; }
  .kb-sp #support-request-table td:nth-child(4)::before { content: "Status"; }
  .kb-sp #support-request-table td:nth-child(5)::before { content: "Subject"; }
  .kb-sp #support-request-table td:nth-child(6) {
    display: none; /* redundant link icon; the whole row is clickable */
  }
}

/* ----- /sp requests table: keep it from expanding the layout (which would defeat
   the @media card-stack below). table-layout:fixed forces columns to fit the card. ----- */
@media (max-width: 768px) {
  .kb-sp #support-request-table {
    table-layout: fixed;
    width: 100%;
  }
  .kb-sp #support-request-table td,
  .kb-sp #support-request-table th {
    word-break: break-word;
  }
}

/* ----- mobile nav toggle: base renders #kb-nav-toggle white & static, overlapping
   the logo. Move it to the right and make it visible (navy). Collapse breakpoint raised to
   1000 (homepage) because the desktop nav crowds the pill below ~1000. ----- */
@media (max-width: 1000px) {
  #site-header .kb-container {
    position: relative;
  }
  #kb-nav-toggle {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    /* no transform here: a transformed ancestor would become the containing block
       for the position:fixed dropdown, breaking its full-width layout. */
  }
  #kb-nav-toggle,
  #kb-nav-toggle a,
  #kb-nav-toggle i,
  #kb-nav-toggle button {
    color: var(--kb-navy) !important;
  }
  #kb-nav-toggle button {
    background: transparent !important;
    border: none;
    font-weight: 600;
    cursor: pointer;
  }
}

/* ----- mobile: un-hide the hero band title (base hides #page-header-title) ----- */
@media (max-width: 900px) {
  #page-header-title {
    display: block !important;
  }
}

/* ----- mobile nav: full-width dropdown + CSS icons + collapsible categories ----- */
@media (max-width: 1000px) {
  /* MENU button: draw a hamburger (base icon glyph is TOFU) */
  #kb-nav-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
  #kb-nav-toggle button::before {
    content: "";
    width: 17px;
    height: 2px;
    background: var(--kb-navy);
    box-shadow: 0 5px 0 var(--kb-navy), 0 -5px 0 var(--kb-navy);
  }
  /* dropdown panel: full width, below the 96px header */
  #nav-primary-menu {
    position: fixed !important;
    top: 96px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--kb-surface) !important;
    border-top: 1px solid var(--kb-border);
    box-shadow: 0 16px 30px var(--kb-shadow);
    padding: 0 0 6px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    z-index: 200;
  }
  #nav-primary-menu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #nav-primary-menu > ul > li {
    float: none;
    display: block;
    position: relative;
    border-bottom: 1px solid var(--kb-border);
  }
  #nav-primary-menu > ul > li > a,
  #nav-primary-menu .category-dropdown-mobile-title {
    display: block;
    padding: 15px 24px;
    color: var(--kb-navy) !important;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  #nav-primary-menu > ul > li > a:hover,
  #nav-primary-menu .category-dropdown-mobile-title:hover {
    background: var(--kb-bg);
    color: var(--kb-accent) !important;
  }
  /* Categories caret: hide the TOFU icon, draw a CSS caret */
  #category-dropdown-caret-mobile {
    display: none;
  }
  #nav-primary-menu .category-dropdown-mobile-title::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--kb-muted);
  }
  /* Categories submenu: collapsed by default (header.js toggles it), indented */
  #nav-primary-menu .category-dropdown-mobile {
    display: none;
  }
  #nav-primary-menu .category-dropdown-mobile > div {
    border-top: 1px solid var(--kb-border);
  }
  #nav-primary-menu .category-dropdown-mobile a {
    display: block;
    padding: 12px 24px 12px 42px;
    color: var(--kb-muted) !important;
    font-size: 15px;
  }
  #nav-primary-menu .category-dropdown-mobile a:hover {
    background: var(--kb-bg);
    color: var(--kb-accent) !important;
  }
}

/* hide the base fa-bars glyph on the MENU button (TOFU); my button::before is the hamburger */
@media (max-width: 1000px) {
  #kb-nav-toggle button span::before {
    content: none !important;
  }
}

/* homepage header pill: base is max-width:1180 which spans edge-to-edge below 1180 (touches
   / looks too wide). Match the content band (min(1180px, 92%), same as .kb-home-band) so it
   floats with consistent, proportional side margins at every width. */
.kb-home #site-header .kb-container {
  width: min(1180px, 92%);
  max-width: none;
  margin: 22px auto;
  box-sizing: border-box;
}

/* ONLY when the menu is collapsed (hamburger, <=1000): soften the super-rounded pill to a
   moderate-radius card so the slide-out menu connects cleanly. When the full nav is shown
   (>1000) keep the rounded pill shape. */
@media (max-width: 1000px) {
  .kb-home #site-header .kb-container {
    border-radius: 18px;
  }
}

/* homepage mobile menu: make it read as the header card "expanding" (like the reference) --
   a card-width panel (16px side margins, matching the card) connected to the card's bottom
   with matching rounded bottom corners, instead of an edge-to-edge strip. Base is fixed at
   top:96px (sized for the 96px bar on other pages), so we re-anchor it to the card bottom. */
@media (max-width: 1000px) {
  .kb-home #nav-primary #nav-primary-menu {
    /* card bottom is 112 (landscape) .. 117 (portrait) -- anchor just above the min so it
       always overlaps the card by a hair (seamless white) instead of leaving a gap */
    top: 111px !important;
    /* match the pill's 92% band (4% each side) so the menu lines up with the card width */
    left: 4% !important;
    right: 4% !important;
    width: auto !important;
    border-top: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 26px rgba(31, 38, 46, 0.16);
  }
  /* while the menu is open, square the card's bottom corners so card + menu merge into one
     continuous rounded shape (jQuery slideToggle sets inline display:block when open) */
  .kb-home #site-header .kb-container:has(#nav-primary-menu[style*="display: block"]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* when the header is in its scrolled (flat, full-width) state, the slide-out menu drops from
     the bar's bottom edge-to-edge instead of from the floating card (bar height 64, fixed@0) */
  .kb-home #site-header.scrolled #nav-primary-menu {
    top: 92px !important; /* bar bottom is 96 -- overlap a hair so the seam is seamless white */
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 0 14px 14px;
  }
  /* lock page scroll while the menu is open so the header can't scroll/morph out from under the
     open menu -- keeps header + menu together as one overlay (replaces the old open-only pin).
     The viewport scroll container is <html>, so overflow:hidden must go there (not just body). */
  html:has(body.kb-home #nav-primary-menu[style*="display: block"]),
  body.kb-home:has(#nav-primary-menu[style*="display: block"]) {
    overflow: hidden;
  }
}

/* collapsed mobile menu (ALL client-1 pages -- custom.css is client-1 only): keep just the
   hamburger, drop the "Menu" text. IMPORTANT: app.js binds the open/close toggle to
   `#kb-nav-toggle span` (not the button), so the span must stay clickable -- make it a
   transparent overlay over the whole button (font-size:0 hides the "Menu" text) so tapping the
   hamburger toggles the menu instead of doing nothing. */
@media (max-width: 1000px) {
  #kb-nav-toggle button {
    position: relative;
    height: 44px; /* the icon-only button collapsed to the 2px hamburger box -- restore a
                     proper tap-target height (the span overlay fills it) */
  }
  #kb-nav-toggle button span {
    position: absolute;
    inset: 0;
    font-size: 0;
  }
}

/* mobile nav: override the base (#nav-primary #nav-primary-menu, 2 IDs) spacing/positioning */
@media (max-width: 1000px) {
  #nav-primary #nav-primary-menu {
    top: 96px !important;
    padding: 4px 0 8px !important;
  }
  #nav-primary #nav-primary-menu ul {
    margin: 0 !important;
    padding: 0 !important;
  }
  #nav-primary #nav-primary-menu ul li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    border-bottom: 1px solid var(--kb-border) !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #nav-primary #nav-primary-menu ul li a,
  #nav-primary #nav-primary-menu .category-dropdown-mobile-title {
    position: static !important;
    padding: 14px 24px !important;
    line-height: 1.4 !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    text-transform: none !important; /* base uppercases nav items >900; keep mixed case */
  }
  #nav-primary #nav-primary-menu .category-dropdown-mobile a {
    padding: 11px 24px 11px 42px !important;
  }
}

/* mobile nav fixes: no sticky-hover, caret on the title row, trim bottom space */
@media (max-width: 1000px) {
  #nav-primary #nav-primary-menu ul li a:hover,
  #nav-primary #nav-primary-menu .category-dropdown-mobile-title:hover {
    background: transparent;
    color: var(--kb-navy) !important; /* beat the original coral hover (also !important) */
  }
  #nav-primary #nav-primary-menu .category-dropdown-mobile a:hover {
    background: transparent;
    color: var(--kb-muted) !important;
  }
  /* caret anchored to the Categories title row (block), not the tall expanded li */
  #nav-primary #nav-primary-menu .category-dropdown-mobile-title {
    display: block !important;
    position: relative !important;
  }
  /* trim bottom whitespace */
  #nav-primary #nav-primary-menu {
    padding-bottom: 0 !important;
  }
  #nav-primary #nav-primary-menu > ul > li:last-child {
    border-bottom: none !important;
  }
}

/* Homepage collapse breakpoint raised to 1000: the base flips desktop-nav <-> hamburger at
   900, but the desktop nav crowds the pill below ~1000. Between 901-1000 (homepage only) show
   the hamburger, hide the desktop nav (#nav-primary-menu2), and make the mobile dropdown
   collapsible. (jQuery slideToggle sets inline display:block/none; the [style] selector lets
   us keep it hidden by default while still allowing it to open — the base forces
   display:inline-block!important >900, which we out-specify with .kb-home + the attr match.) */
@media (min-width: 901px) and (max-width: 1000px) {
  .kb-home #nav-primary #kb-nav-toggle {
    display: flex !important;
  }
  .kb-home #nav-primary #nav-primary-menu2 {
    display: none !important;
  }
  .kb-home #nav-primary #nav-primary-menu {
    display: none !important;
  }
  .kb-home #nav-primary #nav-primary-menu[style*="display: block"] {
    display: block !important;
  }
}