/* SalesLogs help centre: home and category pages (screens 1a, 1e, 1h).
   Loaded from Template settings > Custom HTML > Home + categories header.
   Depends on the tokens in kb-theme.css. */

/* =========================================================================
   HOME (1a). body.hs-knowledge-listing-page
   ========================================================================= */

/* ---- Hero: HubSpot search module becomes the centred hero ---- */
body.hs-knowledge-listing-page .hs-kb-search-input-wrapper{padding:120px var(--container-pad)}
body.hs-knowledge-listing-page .hs-kb-search-input-wrapper .hs-search-field{display:flex;flex-direction:column;align-items:center;text-align:center}
body.hs-knowledge-listing-page .hs-search-field__bar,
body.hs-knowledge-listing-page .hs-search-field__form{width:720px;max-width:100%;justify-content:center}
/* Theme editor search label = "How can we help?". Eyebrow and supporting line are drawn around it. */
body.hs-knowledge-listing-page .hs-search-field__label{font:400 56px/1.05 var(--font-sans);letter-spacing:-.03em;text-align:center;margin-bottom:36px}
body.hs-knowledge-listing-page .hs-search-field__label::before{content:"Help centre";display:block;font:400 16px/1 var(--font-sans);letter-spacing:0;color:var(--sl-blue);margin-bottom:24px}
body.hs-knowledge-listing-page .hs-search-field__label::after{content:"Step-by-step guides for every role in your dealership.";display:block;max-width:360px;margin:24px auto 0;font:400 18px/1.7 var(--font-sans);letter-spacing:0;color:var(--sl-graphite)}
/* Popular links (kb-listing.js). Space is reserved so nothing below moves. */
html.slkb-js:not(.slkb-no-popular) body.hs-knowledge-listing-page .hs-kb-search-input-wrapper:not(:has(.slkb-popular)) .hs-search-field{padding-bottom:44px}
.slkb-popular{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:24px;font:400 14px/1.4 var(--font-sans);letter-spacing:.02em}
.slkb-popular>span{color:var(--sl-stone)}
@media (max-width:767px){
  body.hs-knowledge-listing-page .hs-kb-search-input-wrapper{padding:72px var(--container-pad)}
  body.hs-knowledge-listing-page .hs-search-field__label{font-size:40px;line-height:1.1}
}

/* ---- Role tiles (kb-listing.js). Placeholder holds the space until they arrive. ---- */
.slkb-section{padding:var(--section-pad) 0}
.slkb-section--grey{background:var(--sl-light-grey)}
.slkb-section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:48px}
.slkb-section__head>div{display:flex;flex-direction:column;gap:16px}
.slkb-section__head p{font:400 16px/1.6 var(--font-sans);color:var(--sl-graphite);max-width:360px}
.slkb-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.slkb-role-tile{background:#fff;border-radius:var(--radius-sm);padding:24px;display:flex;flex-direction:column;gap:12px;min-height:180px;box-sizing:border-box;color:var(--sl-black)!important}
.slkb-role-tile strong{font:400 22px/1.3 var(--font-sans);transition:color var(--d-base) var(--ease)}
.slkb-role-tile:hover strong{color:var(--sl-blue)}
.slkb-role-tile span{font:400 16px/1.6 var(--font-sans);color:var(--sl-graphite);flex:1}
.slkb-role-tile em{font:500 14px/1.4 var(--font-sans);font-style:normal;color:var(--sl-blue)}
html.slkb-js:not(.slkb-role-view):not(.slkb-no-roles) body.hs-knowledge-listing-page #main-content:not(:has(.slkb-roles))::before{content:"";display:block;height:752px;background:var(--sl-light-grey)}
@media (max-width:1199px){
  .slkb-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.slkb-js:not(.slkb-role-view):not(.slkb-no-roles) body.hs-knowledge-listing-page #main-content:not(:has(.slkb-roles))::before{height:1100px}
}
@media (max-width:767px){
  .slkb-section__head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .slkb-role-grid{grid-template-columns:1fr;gap:12px}
  .slkb-role-tile{min-height:0}
  html.slkb-js:not(.slkb-role-view):not(.slkb-no-roles) body.hs-knowledge-listing-page #main-content:not(:has(.slkb-roles))::before{height:1500px}
}

/* ---- Collection cards (HubSpot category listing, Cards or Tiles layout) ---- */
body.hs-knowledge-listing-page #hs_cos_wrapper_knowledgebase_category_listing{max-width:var(--container-max);margin:0 auto;padding:var(--section-pad) var(--container-pad);box-sizing:content-box}
body.hs-knowledge-listing-page #hs_cos_wrapper_knowledgebase_category_listing::before{content:"By topic";display:block;font:400 15px/1 var(--font-sans);color:var(--sl-blue);margin-bottom:16px}
body.hs-knowledge-listing-page .hs-kb-home-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:none;margin:0;padding:0!important;justify-content:initial}
body.hs-knowledge-listing-page .hs-kb-home-list::before{content:"Browse every topic";grid-column:1/-1;font:400 40px/1.15 var(--font-sans);color:var(--sl-black);margin-bottom:24px}
body.hs-knowledge-listing-page .hs-kb-home-list__category{width:auto;max-width:none;min-width:0;margin:0;border-radius:var(--radius-card);padding:32px!important;box-shadow:inset 0 0 0 1px var(--sl-grey);background:#fff;border:0;display:flex;flex-direction:column;gap:16px;text-align:left}
body.hs-knowledge-listing-page .hs-kb-home-list__category-link{display:flex;flex-direction:column;gap:16px;padding:0!important;margin:0;color:var(--sl-black)!important;text-decoration:none;min-height:0!important}
/* HubSpot's theme gives the card link a fixed min-height; the article links sit at the bottom of the card instead, so cards in a row line up */
body.hs-knowledge-listing-page .hs-kb-home-list__category .slkb-card-links{margin-top:auto}
body.hs-knowledge-listing-page .hs-kb-home-list__icon{display:none}
body.hs-knowledge-listing-page .hs-kb-home-list__text{display:flex;flex-direction:column;gap:16px;text-align:left}
body.hs-knowledge-listing-page .hs-kb-home-list__text__category-title{font:400 22px/1.3 var(--font-sans);color:var(--sl-black);margin:0;transition:color var(--d-base) var(--ease)}
body.hs-knowledge-listing-page .hs-kb-home-list__category-link:hover .hs-kb-home-list__text__category-title{color:var(--sl-blue)}
body.hs-knowledge-listing-page .hs-kb-home-list__text__category-description{font:400 16px/1.6 var(--font-sans);color:var(--sl-graphite);margin:0}
/* Native "see all" link, if the layout renders one */
body.hs-knowledge-listing-page .hs-kb-home-list__text__category-link{font:500 14px/1.4 var(--font-sans)!important;color:var(--sl-black)!important;padding:0}
body.hs-knowledge-listing-page .hs-kb-home-list__text__category-link::after{display:none}
/* Top three articles and "All N articles" (kb-listing.js) */
.slkb-card-links{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--sl-grey);flex:1}
.slkb-card-links a{font:400 16px/1.4 var(--font-sans)}
.slkb-card-all{font:500 14px/1.4 var(--font-sans);color:var(--sl-black)!important}
.slkb-card-all:hover{color:var(--sl-blue)!important}
@media (max-width:1199px){body.hs-knowledge-listing-page .hs-kb-home-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  body.hs-knowledge-listing-page .hs-kb-home-list{grid-template-columns:1fr;gap:12px}
  body.hs-knowledge-listing-page .hs-kb-home-list::before{font-size:32px;line-height:1.2}
  body.hs-knowledge-listing-page .hs-kb-home-list__category{padding:24px!important}
}

/* ---- Recently updated (kb-listing.js) ---- */
.slkb-recent{display:grid;grid-template-columns:4fr 8fr;gap:24px;padding-bottom:var(--section-pad)}
.slkb-recent__head{display:flex;flex-direction:column;gap:16px}
.slkb-recent__list{border-top:1px solid var(--sl-grey)}
.slkb-recent__row{display:grid;grid-template-columns:minmax(0,1fr) 220px 160px;gap:24px;padding:20px 0;border-bottom:1px solid var(--sl-grey);align-items:baseline;color:var(--sl-black)!important}
.slkb-recent__row strong{font:400 18px/1.4 var(--font-sans);transition:color var(--d-base) var(--ease)}
.slkb-recent__row:hover strong{color:var(--sl-blue)}
.slkb-recent__row span{font:400 14px/1.4 var(--font-sans);letter-spacing:.02em;color:var(--sl-stone)}
.slkb-recent__row span:last-child{text-align:right}
.slkb-home-cta{padding-bottom:var(--section-pad)}
@media (max-width:1023px){.slkb-recent{grid-template-columns:1fr}}
@media (max-width:767px){.slkb-recent__row{grid-template-columns:1fr;gap:4px}.slkb-recent__row span:last-child{text-align:left}}

/* =========================================================================
   ROLE VIEW (1h): /?role=<slug> on the KB home. html.slkb-role-view is set by the
   inline bootstrap before paint, so HubSpot's home content never flashes.
   ========================================================================= */
html.slkb-role-view body.hs-knowledge-listing-page .hs-kb-search-input-wrapper,
html.slkb-role-view body.hs-knowledge-listing-page #hs_cos_wrapper_knowledgebase_category_listing{display:none}
.slkb-band{background:var(--sl-light-grey);padding:48px 0 64px}
.slkb-band .slkb-container{display:flex;flex-direction:column;gap:32px}
.slkb-crumbs{display:flex;flex-wrap:wrap;gap:10px;font:400 14px/1.4 var(--font-sans);letter-spacing:.02em;color:var(--sl-stone)}
.slkb-crumbs [aria-current]{color:var(--sl-black)}
.slkb-role-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.slkb-role-head>div{display:flex;flex-direction:column;gap:16px}
.slkb-role-head h1{font:400 56px/1.05 var(--font-sans);letter-spacing:-.03em}
.slkb-role-head p{font:400 16px/1.6 var(--font-sans);color:var(--sl-graphite);max-width:420px}
.slkb-role-groups{padding:96px 0 var(--section-pad);display:flex;flex-direction:column;gap:80px}
.slkb-role-group{display:grid;grid-template-columns:4fr 8fr;gap:24px}
.slkb-role-group__head{display:flex;flex-direction:column;gap:8px}
.slkb-role-group__head a{font:400 28px/1.25 var(--font-sans);color:var(--sl-black)}
.slkb-role-group__head a:hover{color:var(--sl-blue)}
.slkb-role-group .slkb-row{grid-template-columns:minmax(0,1fr) 260px;gap:32px}
html.slkb-role-view.slkb-js body.hs-knowledge-listing-page #main-content:not(:has(.slkb-role-page)){min-height:100vh}
@media (max-width:1023px){.slkb-role-group{grid-template-columns:1fr}}
@media (max-width:767px){.slkb-role-head{flex-direction:column;align-items:flex-start;gap:16px}.slkb-role-head h1{font-size:40px;line-height:1.1}.slkb-role-groups{padding-top:56px;gap:56px}}

/* =========================================================================
   CATEGORY (1e). body:has(.hs-kb-category-listing)
   HubSpot renders subcategories as sections on the category page, so the
   subcategory screen (1f) becomes "View all" expanding a group in place.
   The content and listing wrappers dissolve into one grid:
     row 1-3  title, description, tools (search + role chips)   full width
     row 4+   topics nav (col 1) | article groups (col 2)
   ========================================================================= */
body:has(.hs-kb-category-listing) .hs-kb-breadcrumb-container{padding-bottom:40px}
body:has(.hs-kb-category-listing) .hs-kb-content-wrapper--sidebar{grid-template-columns:240px minmax(0,1fr) 360px;row-gap:0}
body:has(.hs-kb-category-listing) section.hs-kb-content,
body:has(.hs-kb-category-listing) .hs-kb-category-listing{display:contents}
body:has(.hs-kb-category-listing) .hs-kb-category-listing>h1{grid-column:1/3;grid-row:1;font:400 48px/1.08 var(--font-sans);letter-spacing:-.03em;margin:0 0 16px}
body:has(.hs-kb-category-listing) .hs-kb-category-listing>p{grid-column:1/3;grid-row:2;font:400 18px/1.7 var(--font-sans);color:var(--sl-graphite);max-width:560px;margin:0}
body:has(.hs-kb-category-listing) .hs-kb-category-listing>ul,
body:has(.hs-kb-category-listing) .hs-kb-subcategory-listing{grid-column:2/4}
body:has(.hs-kb-category-listing) .hs-kb-sidebar{grid-column:1;grid-row:4/span 60;margin-top:64px;position:sticky;top:24px}
/* The first article block starts on row 4 beside the topics nav. Without this it fills
   row 3 whenever there are no role chips, and the nav drops below the articles. Later
   blocks follow it automatically. */
body:has(.hs-kb-category-listing) .hs-kb-category-listing>ul,
body:has(.hs-kb-category-listing) .hs-kb-category-listing:not(:has(>ul))+.hs-kb-subcategory-listing{grid-row-start:4}
/* First block in the content column sits 64px under the header area, like the nav */
body:has(.hs-kb-category-listing) .hs-kb-category-listing>ul{margin-top:64px}
body:has(.hs-kb-category-listing) .hs-kb-category-listing:not(:has(>ul))+.hs-kb-subcategory-listing{margin-top:64px}
/* Header tools (kb-listing.js): the native search form is moved beside the title,
   role chips go under the description */
.slkb-cat-search{grid-column:3;grid-row:1/3;align-self:end}
.slkb-cat-chips{grid-column:1/-1;grid-row:3;margin-top:40px}
.slkb-cat-search .hs-search-field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.slkb-cat-search .hs-search-field__input{height:52px;padding:0 20px;font-size:16px;border-color:var(--sl-grey)}
.slkb-cat-search .hs-search-field__button{display:none}
html.slkb-js body:has(.hs-kb-category-listing) .hs-kb-search-input-wrapper:not(#main-content *){display:none}
/* Article groups */
body:has(.hs-kb-category-listing) .hs-kb-subcategory-listing{border:0;margin:0 0 72px;padding:0}
body:has(.hs-kb-category-listing) .hs-kb-subcategory-listing:last-child{margin-bottom:var(--section-pad)}
body:has(.hs-kb-category-listing) .hs-kb-category-listing{border:0;margin:0;padding:0}
body:has(.hs-kb-category-listing) .hs-kb-subcategory-listing>h2{display:flex;justify-content:space-between;align-items:baseline;gap:24px;font:400 28px/1.25 var(--font-sans);padding-bottom:24px;margin:0;scroll-margin-top:24px}
.slkb-viewall{font:500 14px/1.4 var(--font-sans);color:var(--sl-blue);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.slkb-viewall:hover{color:var(--sl-blue-water)}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list{border-top:1px solid var(--sl-grey);margin:0;padding:0}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list--bordered{border-bottom:0}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list{list-style:none}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list>li{margin:0;padding:0;border-bottom:1px solid var(--sl-grey);list-style:none}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list>li::marker{content:none}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list>li[hidden],
body:has(.hs-kb-category-listing) .hs-kb-category-article-list .-hidden{display:none}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list__link{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding:20px 0;font:400 18px/1.4 var(--font-sans);color:var(--sl-black);line-height:1.4}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list__link:hover{color:var(--sl-blue)}
/* Rows decorated by kb-listing.js: title, summary, role text */
.slkb-link-main{display:flex;flex-direction:column;gap:4px}
.slkb-link-sum{font:400 16px/1.6 var(--font-sans);color:var(--sl-graphite)}
.slkb-link-roles{font:400 14px/1.6 var(--font-sans);letter-spacing:.02em;color:var(--sl-stone);text-align:right}
/* Native "show more" toggle */
body:has(.hs-kb-category-listing) .hs-kb-category-article-list__toggle{font:500 14px/1.4 var(--font-sans);color:var(--sl-blue);padding:16px 0}
body:has(.hs-kb-category-listing) .hs-kb-category-article-list__toggle:hover{color:var(--sl-blue-water)}
/* Rows hidden by the role chips. While a chip is on, groups show every match. */
html.slkb-role-filtered body:has(.hs-kb-category-listing) .hs-kb-category-article-list>li[hidden]:not(.slkb-filtered-out){display:block}
html.slkb-role-filtered .slkb-viewall{display:none}
.slkb-filtered-out{display:none!important}
.slkb-group-empty{font:400 16px/1.6 var(--font-sans);color:var(--sl-stone);padding:20px 0;border-bottom:1px solid var(--sl-grey)}
@media (max-width:1023px){
  body:has(.hs-kb-category-listing) .hs-kb-content-wrapper--sidebar{grid-template-columns:200px minmax(0,1fr)}
  body:has(.hs-kb-category-listing) .hs-kb-category-listing>h1,
  body:has(.hs-kb-category-listing) .hs-kb-category-listing>p{grid-column:1/-1}
  .slkb-cat-search{grid-column:1/-1;grid-row:3;margin-top:24px}
  .slkb-cat-chips{grid-row:4;margin-top:24px}
  body:has(.hs-kb-category-listing) .hs-kb-category-listing>ul,
  body:has(.hs-kb-category-listing) .hs-kb-subcategory-listing{grid-column:2}
  body:has(.hs-kb-category-listing) .hs-kb-sidebar{grid-row:5/span 60}
  body:has(.hs-kb-category-listing) .hs-kb-category-listing>ul,
  body:has(.hs-kb-category-listing) .hs-kb-category-listing:not(:has(>ul))+.hs-kb-subcategory-listing{grid-row-start:5}
  body:has(.hs-kb-category-listing) .hs-kb-category-article-list__link{grid-template-columns:1fr;gap:8px}
  .slkb-link-roles{text-align:left}
}
@media (max-width:767px){
  body:has(.hs-kb-category-listing) .hs-kb-content-wrapper--sidebar{display:grid;grid-template-columns:1fr}
  body:has(.hs-kb-category-listing) .hs-kb-category-listing>h1{font-size:40px;line-height:1.1}
  body:has(.hs-kb-category-listing) .hs-kb-category-listing>ul,
  body:has(.hs-kb-category-listing) .hs-kb-subcategory-listing{grid-column:1}
  body:has(.hs-kb-category-listing) .hs-kb-sidebar{grid-column:1;grid-row:auto;position:static;margin:56px 0}
  body:has(.hs-kb-category-listing) .hs-kb-category-listing>ul,
  body:has(.hs-kb-category-listing) .hs-kb-category-listing:not(:has(>ul))+.hs-kb-subcategory-listing{grid-row-start:auto}
  .slkb-cat-search,.slkb-cat-chips{grid-column:1}
}