/* ==========================================================================
   S-5! KNOWLEDGE CENTER — BRAND OVERRIDE STYLESHEET

   FONTS: Arial per S-5! Corporate Style Guide (06.24.24)
   ========================================================================== */
/*
Transforms the stock HubSpot Knowledge Base to match s-5.com design language VERSION: 1.9 LAST UPDATED: 2026-08-18 KEY v1.9 CHANGES: - Legal footer block (Worker-injected, verbatim from www): 4 policy links + terms fine print PREVIOUS (v1.8): - Hidden Customer Portal + Sign In links from header (desktop nav + mobile menu); pages remain reachable by direct URL PREVIOUS (v1.7): - Search button icon: span background forced transparent (was dark, hiding gold) - SVG icon sized to 16px with white fill for clear magnifying glass on gold PREVIOUS FIXES (v1.6): - Header left/right padding (24px) on wrapper rows - Search button repositioned inside input (top: 57px, form relative) PREVIOUS FIXES (v1.5): - Logo replacement in header and footer via CSS content property - Logo URL stored in --s5-logo-url custom property for easy updates PREVIOUS FIXES (v1.4): - Header uses background SHORTHAND to override HubSpot theme's white bg
 - Header padding drastically reduced for compact appearance - Search hero is flat #1a1a1a (no gradient) for seamless header integration - Footer empty wrapper collapsed,
tighter spacing overall========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
   --s5-gold: #FDC82F;
   --s5-gold-hover: #E8B520;
   --s5-gold-dark: #C29F3D;
   --s5-gold-light: #FCD34D;
   --s5-black: #1a1a1a;
   --s5-charcoal: #2b2b2b;
   --s5-dark-gray: #333333;
   --s5-white: #ffffff;
   --s5-off-white: #f8f8f6;
   --s5-light-gray: #f0f0ec;
   --s5-mid-gray: #888888;
   --s5-border-gray: #e0e0dc;
   --s5-font-body: 'PT Sans', Arial, Helvetica, sans-serif;
   --s5-font-heading: 'PT Sans', Arial, Helvetica, sans-serif;
   --s5-section-padding: 48px;
   --s5-card-padding: 28px;
   --s5-container-max: 1200px;
   --s5-transition: all 0.25s ease;

   /* Logo — change this URL to swap logos site-wide */
   --s5-logo-url: url('https://www.s-5.com/wp-content/uploads/2020/04/E27FDA9C-8B1A-456C-AD8A-43AB83459AB6.png');
}

/* --------------------------------------------------------------------------
   GLOBAL / BASE
   -------------------------------------------------------------------------- */
body {
   font-family: var(--s5-font-body) !important;
   color: var(--s5-dark-gray) !important;
   background-color: var(--s5-off-white) !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body,
p,
li,
td,
th,
span,
div,
label,
input,
textarea,
select,
button {
   font-family: var(--s5-font-body) !important;
}

h1,
h2,
h3 {
   font-family: var(--s5-font-heading) !important;
   color: var(--s5-dark-gray) !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
}

h4,
h5,
h6 {
   font-family: var(--s5-font-body) !important;
   font-weight: 500 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.08em !important;
   color: var(--s5-dark-gray) !important;
}

a {
   color: var(--s5-gold-dark) !important;
   text-decoration: none !important;
   transition: var(--s5-transition) !important;
}

a:hover {
   color: var(--s5-gold-hover) !important;
}


/* --------------------------------------------------------------------------
   HEADER — one seamless dark bar, compact

   CRITICAL: HubSpot theme sets .header__top and .header__bottom to white
   via the `background` shorthand. We MUST override with `background`
   (not just background-color) to win specificity.
   -------------------------------------------------------------------------- */

/* Blanket rule: force dark on the header and every descendant */
.header {
   background: var(--s5-black) !important;
   border: none !important;
   border-bottom: 3px solid var(--s5-gold) !important;
   box-shadow: none !important;
}

/* Explicit override on the two main sections — uses background shorthand */
.header__top {
   background: var(--s5-black) !important;
   border: none !important;
   box-shadow: none !important;
   padding: 3px 0 !important;
}

.header__bottom {
   background: var(--s5-black) !important;
   border: none !important;
   box-shadow: none !important;
   padding: 6px 0 !important;
}

/* All other header descendants */
.header__wrapper--top,
.header__wrapper--bottom {
   background: var(--s5-black) !important;
   border: none !important;
   box-shadow: none !important;
   padding-left: 24px !important;
   padding-right: 24px !important;
}

.header__container,
.header__container--left,
.header__container--right,
.header__row,
.header .hs_cos_wrapper,
.header>.hs_cos_wrapper,
.header nav,
.header ul,
.header li {
   background: var(--s5-black) !important;
   border: none !important;
   box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   LOGO REPLACEMENT — Header
   Uses CSS content property to swap the <img> source without JS.
   Supported in Chrome 1+, Firefox 1+, Safari 1+, Edge 12+.
   -------------------------------------------------------------------------- */
.header__logo-image {
   content: var(--s5-logo-url) !important;
   max-height: 36px !important;
   width: auto !important;
   object-fit: contain !important;
}

/* Utility row (English, Contact Support, Customer Portal, Sign In) */
.header__top a,
.header__top .header__language-switcher-current-label {
   color: rgba(255, 255, 255, 0.6) !important;
   font-size: 11px !important;
   font-weight: 400 !important;
   letter-spacing: 0.02em !important;
}

.header__top a:hover {
   color: var(--s5-gold) !important;
}

/* Logo container — compact */
.header__logo {
   padding: 0 !important;
   margin: 0 !important;
}

/* Nav links — transparent bg so hover works */
.header__menu-link,
.header__nav-link {
   color: var(--s5-white) !important;
   background: transparent !important;
   font-family: var(--s5-font-body) !important;
   font-size: 12px !important;
   font-weight: 500 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.06em !important;
   padding: 4px 12px !important;
   transition: var(--s5-transition) !important;
}

.header__menu-link:hover,
.header__nav-link:hover {
   color: var(--s5-gold) !important;
}

/* Hide "Default HubSpot Blog" in header */
.header__menu-item--depth-1 .header__menu-link[href="/blog"] {
   font-size: 0 !important;
   visibility: hidden !important;
   width: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
   overflow: hidden !important;
}

/* "Return to S-5.com" — solid gold CTA */
.header__button,
a.header__button {
   background: var(--s5-gold) !important;
   color: var(--s5-black) !important;
   border: none !important;
   border-radius: 3px !important;
   padding: 6px 16px !important;
   font-family: var(--s5-font-body) !important;
   font-size: 10px !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.08em !important;
   transition: var(--s5-transition) !important;
   text-decoration: none !important;
}

.header__button:hover,
a.header__button:hover {
   background: var(--s5-gold-hover) !important;
   box-shadow: 0 2px 8px rgba(253, 200, 47, 0.35) !important;
}

/* CTA-style nav items */
.header__menu-item--button .header__menu-link {
   background: var(--s5-gold) !important;
   color: var(--s5-black) !important;
   border-radius: 4px !important;
   padding: 6px 16px !important;
   font-weight: 700 !important;
}

.header__menu-item--button .header__menu-link:hover {
   background: var(--s5-gold-hover) !important;
   color: var(--s5-black) !important;
}

/* Language icon */
.header__language-switcher-icon svg,
.header__language-switcher-icon path {
   fill: rgba(255, 255, 255, 0.6) !important;
}

/* Mobile menu */
.header__menu-toggle svg,
.header__menu-toggle path {
   fill: var(--s5-white) !important;
}

.header__menu-container--mobile {
   background: var(--s5-black) !important;
   border: none !important;
   border-top: 2px solid var(--s5-gold) !important;
}

.header__menu--mobile .header__menu-link {
   color: var(--s5-white) !important;
   border: none !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* --------------------------------------------------------------------------
   HERO / SEARCH

   FLAT background — matches header nav exactly for seamless dark block.
   No gradient, no decorative gold bar at top.
   -------------------------------------------------------------------------- */
.hs-kb-search-input-wrapper {
   background: var(--s5-black) !important;
   background-image: none !important;
   padding: 50px 24px 40px !important;
   position: relative !important;
   text-align: center !important;
   border: none !important;
}

/* Remove the decorative gold bar between nav and search */
.hs-kb-search-input-wrapper::before {
   display: none !important;
}

.hs-search-field__label {
   color: var(--s5-white) !important;
   font-family: var(--s5-font-heading) !important;
   font-size: 26px !important;
   font-weight: 400 !important;
   line-height: 1.3 !important;
   letter-spacing: -0.01em !important;
   margin-bottom: 18px !important;
   display: block !important;
}

.hs-search-field__bar {
   max-width: 600px !important;
   margin: 0 auto !important;
   position: relative !important;
}

.hs-search-field__form {
   position: relative !important;
}

.hs-search-field__input {
   background: rgba(255, 255, 255, 0.95) !important;
   border: 2px solid transparent !important;
   border-radius: 6px !important;
   padding: 12px 48px 12px 16px !important;
   font-size: 14px !important;
   font-family: var(--s5-font-body) !important;
   color: var(--s5-dark-gray) !important;
   width: 100% !important;
   box-sizing: border-box !important;
   transition: var(--s5-transition) !important;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.hs-search-field__input::placeholder {
   color: var(--s5-mid-gray) !important;
   font-style: italic !important;
}

.hs-search-field__input:focus {
   outline: none !important;
   border-color: var(--s5-gold) !important;
   box-shadow: 0 0 0 3px rgba(253, 200, 47, 0.25), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.hs-search-field__button {
   position: absolute !important;
   right: 5px !important;
   top: 57px !important;
   bottom: auto !important;
   transform: none !important;
   background: var(--s5-gold) !important;
   border: none !important;
   border-radius: 4px !important;
   width: 34px !important;
   height: 34px !important;
   cursor: pointer !important;
   transition: var(--s5-transition) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.hs-search-field__button:hover {
   background: var(--s5-gold-hover) !important;
}

/* Search icon: span wrapper must be transparent to show gold button */
.hs-search-field__button span,
.hs-search-field__button .hs_cos_wrapper {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100% !important;
   height: 100% !important;
   background: transparent !important;
   background-color: transparent !important;
}

.hs-search-field__button svg {
   width: 16px !important;
   height: 16px !important;
   display: block !important;
   overflow: visible !important;
   background: transparent !important;
}

.hs-search-field__button svg,
.hs-search-field__button svg g,
.hs-search-field__button svg path {
   fill: var(--s5-black) !important;
}

/* Search suggestions */
.hs-search-field__suggestions-container {
   background: var(--s5-white) !important;
   border: 1px solid var(--s5-border-gray) !important;
   border-radius: 0 0 6px 6px !important;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
   overflow: hidden !important;
}

.hs-search-field__suggestions li {
   padding: 12px 20px !important;
   border-bottom: 1px solid var(--s5-border-gray) !important;
   font-size: 14px !important;
}

.hs-search-field__suggestions li:hover,
.hs-search-field__suggestions li:focus {
   background: rgba(253, 200, 47, 0.08) !important;
}

.hs-search-field__suggestions li a {
   color: var(--s5-dark-gray) !important;
}

.hs-search-field__suggestions li a:hover {
   color: var(--s5-gold-dark) !important;
}


/* --------------------------------------------------------------------------
   CATEGORY CARDS
   -------------------------------------------------------------------------- */
.hs-kb-home-list--tiles {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr) !important;
   gap: 24px !important;
   padding: var(--s5-section-padding) 24px !important;
   max-width: var(--s5-container-max) !important;
   margin: 0 auto !important;
   background: var(--s5-off-white) !important;
}

@media (max-width: 992px) {
   .hs-kb-home-list--tiles {
      grid-template-columns: repeat(2, 1fr) !important;
   }
}

@media (max-width: 600px) {
   .hs-kb-home-list--tiles {
      grid-template-columns: 1fr !important;
   }
}

.hs-kb-home-list__category {
   background: var(--s5-white) !important;
   border-radius: 6px !important;
   border-left: 4px solid var(--s5-gold) !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
   transition: var(--s5-transition) !important;
   overflow: hidden !important;
   position: relative !important;
}

.hs-kb-home-list__category:hover {
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
   transform: translateY(-3px) !important;
   border-left-color: var(--s5-gold-hover) !important;
}

.hs-kb-home-list__category-link {
   display: flex !important;
   flex-direction: column !important;
   padding: var(--s5-card-padding) !important;
   text-decoration: none !important;
   height: 100% !important;
}

.hs-kb-home-list__icon,
.hs-kb-home-list__image {
   margin-bottom: 14px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
}

.hs-kb-home-list__icon svg,
.hs-kb-home-list__image img {
   width: 44px !important;
   height: 44px !important;
   object-fit: contain !important;
   opacity: 0.75 !important;
   transition: var(--s5-transition) !important;
}

.hs-kb-home-list__category:hover .hs-kb-home-list__icon svg,
.hs-kb-home-list__category:hover .hs-kb-home-list__image img {
   opacity: 1 !important;
   filter: sepia(1) saturate(3) hue-rotate(10deg) brightness(0.95) !important;
}

.hs-kb-home-list__text__category-title {
   font-family: var(--s5-font-heading) !important;
   font-size: 18px !important;
   font-weight: 600 !important;
   color: var(--s5-dark-gray) !important;
   margin-bottom: 8px !important;
   line-height: 1.3 !important;
   text-align: left !important;
}

.hs-kb-home-list__text__category-description {
   font-family: var(--s5-font-body) !important;
   font-size: 13px !important;
   line-height: 1.6 !important;
   color: var(--s5-mid-gray) !important;
   text-align: left !important;
}

.hs-kb-home-list--tiles .hs-kb-home-list__text {
   text-align: left !important;
}


/* --------------------------------------------------------------------------
   ARTICLE LISTING PAGE
   -------------------------------------------------------------------------- */
.hs-kb-article-list__item {
   padding: 14px 0 !important;
   border-bottom: 1px solid var(--s5-border-gray) !important;
}

.hs-kb-article-list__item a {
   color: var(--s5-dark-gray) !important;
   font-weight: 400 !important;
   font-size: 15px !important;
   transition: var(--s5-transition) !important;
   display: inline-block !important;
   padding: 4px 0 !important;
}

.hs-kb-article-list__item a:hover {
   color: var(--s5-gold-dark) !important;
   padding-left: 8px !important;
}

.hs-breadcrumb,
[class*="breadcrumb"] {
   font-size: 12px !important;
   text-transform: uppercase !important;
   letter-spacing: 0.06em !important;
   color: var(--s5-mid-gray) !important;
   padding: 16px 0 !important;
}

.hs-breadcrumb a,
[class*="breadcrumb"] a {
   color: var(--s5-mid-gray) !important;
}

.hs-breadcrumb a:hover,
[class*="breadcrumb"] a:hover {
   color: var(--s5-gold-dark) !important;
}


/* --------------------------------------------------------------------------
   ARTICLE DETAIL PAGE
   -------------------------------------------------------------------------- */
.hs-kb-article-body,
.hs-kb-article {
   max-width: 800px !important;
   margin: 0 auto !important;
   padding: 36px 24px 48px !important;
   line-height: 1.75 !important;
   font-size: 16px !important;
   color: var(--s5-dark-gray) !important;
}

.hs-kb-article-body h1,
.hs-kb-article h1 {
   font-family: var(--s5-font-heading) !important;
   font-size: 32px !important;
   font-weight: 600 !important;
   margin-bottom: 20px !important;
   padding-bottom: 14px !important;
   border-bottom: 3px solid var(--s5-gold) !important;
}

.hs-kb-article-body h2,
.hs-kb-article h2 {
   font-family: var(--s5-font-heading) !important;
   font-size: 24px !important;
   font-weight: 600 !important;
   margin-top: 36px !important;
   margin-bottom: 14px !important;
}

.hs-kb-article-body h3,
.hs-kb-article h3 {
   font-family: var(--s5-font-heading) !important;
   font-size: 19px !important;
   font-weight: 600 !important;
   margin-top: 28px !important;
   margin-bottom: 10px !important;
}

.hs-kb-article-body img,
.hs-kb-article img {
   max-width: 100% !important;
   height: auto !important;
   border-radius: 6px !important;
   margin: 20px 0 !important;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

.hs-kb-article-body code,
.hs-kb-article code {
   background: var(--s5-light-gray) !important;
   padding: 2px 6px !important;
   border-radius: 3px !important;
   font-size: 0.9em !important;
}

.hs-kb-article-body table,
.hs-kb-article table {
   width: 100% !important;
   border-collapse: collapse !important;
   margin: 20px 0 !important;
}

.hs-kb-article-body th,
.hs-kb-article th {
   background: var(--s5-black) !important;
   color: var(--s5-white) !important;
   font-weight: 600 !important;
   text-align: left !important;
   padding: 10px 14px !important;
   font-size: 13px !important;
   text-transform: uppercase !important;
   letter-spacing: 0.04em !important;
}

.hs-kb-article-body td,
.hs-kb-article td {
   padding: 10px 14px !important;
   border-bottom: 1px solid var(--s5-border-gray) !important;
   font-size: 14px !important;
}

.hs-kb-article-body tr:hover td,
.hs-kb-article tr:hover td {
   background: rgba(253, 200, 47, 0.04) !important;
}

.hs-kb-article-body blockquote,
.hs-kb-article blockquote {
   border-left: 4px solid var(--s5-gold) !important;
   background: var(--s5-light-gray) !important;
   padding: 16px 20px !important;
   margin: 20px 0 !important;
   border-radius: 0 6px 6px 0 !important;
   font-style: normal !important;
   color: var(--s5-dark-gray) !important;
}

.hs-kb-article-rating,
[class*="article-rating"],
[class*="article-feedback"] {
   margin-top: 40px !important;
   padding-top: 24px !important;
   border-top: 1px solid var(--s5-border-gray) !important;
}


/* --------------------------------------------------------------------------
   SIDEBAR / TOC
   -------------------------------------------------------------------------- */
.hs-kb-sidebar,
[class*="kb-sidebar"] {
   background: var(--s5-white) !important;
   border: 1px solid var(--s5-border-gray) !important;
   border-radius: 6px !important;
   padding: 20px !important;
}

.hs-kb-sidebar h3,
.hs-kb-sidebar h4,
[class*="kb-sidebar"] h3,
[class*="kb-sidebar"] h4 {
   font-family: var(--s5-font-body) !important;
   font-size: 11px !important;
   text-transform: uppercase !important;
   letter-spacing: 0.1em !important;
   color: var(--s5-mid-gray) !important;
   margin-bottom: 14px !important;
   padding-bottom: 10px !important;
   border-bottom: 2px solid var(--s5-gold) !important;
}


/* --------------------------------------------------------------------------
   FOOTER — compact, legible, logo replaced, empty wrapper collapsed
   -------------------------------------------------------------------------- */
.footer,
footer {
   background: var(--s5-black) !important;
   color: rgba(255, 255, 255, 0.9) !important;
   border: none !important;
   border-top: 3px solid var(--s5-gold) !important;
   padding: 16px 24px 12px !important;
}

/* Kill all child borders */
.footer *,
footer * {
   border: none !important;
}

/* Collapse the empty nav/menu wrapper HubSpot leaves behind */
.footer>.hs_cos_wrapper,
.footer>.hs_cos_wrapper>nav {
   height: 0 !important;
   min-height: 0 !important;
   max-height: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
   overflow: hidden !important;
}

/* LOGO REPLACEMENT — Footer */
.footer img.hs-image-widget,
footer img.hs-image-widget {
   content: var(--s5-logo-url) !important;
   max-height: 24px !important;
   width: auto !important;
   object-fit: contain !important;
}

/* All footer text — bright and readable */
.footer,
.footer p,
.footer span,
.footer div,
footer,
footer p,
footer span,
footer div {
   color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer links */
.footer a,
.footer__menu-link,
footer a {
   color: var(--s5-white) !important;
   font-size: 13px !important;
   transition: var(--s5-transition) !important;
}

.footer a:hover,
.footer__menu-link:hover,
footer a:hover {
   color: var(--s5-gold) !important;
}

/* Hide "Default HubSpot Blog" in footer */
.footer__menu-link[href="/blog"],
.footer__menu-item .footer__menu-link[href="/blog"] {
   display: none !important;
}

.footer__menu {
   display: flex !important;
   gap: 20px !important;
   flex-wrap: wrap !important;
   justify-content: center !important;
   margin-bottom: 12px !important;
}

.footer .hs-image-widget img,
footer img {
   max-height: 24px !important;
   opacity: 0.9 !important;
   margin-bottom: 4px !important;
}

/* Social icons — compact */
.hs-kb-social_follow {
   display: flex !important;
   gap: 8px !important;
   justify-content: center !important;
   margin: 8px 0 !important;
}

.hs-kb-social_follow__link {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 30px !important;
   height: 30px !important;
   border-radius: 50% !important;
   background: rgba(255, 255, 255, 0.18) !important;
   transition: var(--s5-transition) !important;
}

.hs-kb-social_follow__link:hover {
   background: var(--s5-gold) !important;
}

.hs-kb-social_follow__icon svg,
.hs-kb-social_follow__icon path {
   fill: rgba(255, 255, 255, 0.9) !important;
   width: 14px !important;
   height: 14px !important;
}

.hs-kb-social_follow__link:hover svg,
.hs-kb-social_follow__link:hover path {
   fill: var(--s5-black) !important;
}

/* Copyright row — minimal */
.footer__bottom {
   padding: 8px 0 0 !important;
   margin-top: 4px !important;
}

.footer__bottom,
.footer__bottom--left,
.footer__bottom--right {
   color: rgba(255, 255, 255, 0.6) !important;
   font-size: 11px !important;
   min-height: 0 !important;
   padding: 0 !important;
}

.footer__bottom a {
   color: rgba(255, 255, 255, 0.6) !important;
}

.footer__bottom a:hover {
   color: var(--s5-gold) !important;
}


/* --------------------------------------------------------------------------
   SEARCH RESULTS
   -------------------------------------------------------------------------- */
.hs-search-results__title {
   font-family: var(--s5-font-heading) !important;
   font-size: 18px !important;
   color: var(--s5-dark-gray) !important;
   font-weight: 500 !important;
}

.hs-search-results__title:hover {
   color: var(--s5-gold-dark) !important;
}

.hs-search-results__description {
   color: var(--s5-mid-gray) !important;
   font-size: 13px !important;
   line-height: 1.6 !important;
}

.hs-search-results__description strong,
.hs-search-results__description b,
.hs-search-highlight {
   color: var(--s5-dark-gray) !important;
   background: rgba(253, 200, 47, 0.2) !important;
   font-weight: 600 !important;
   padding: 1px 3px !important;
   border-radius: 2px !important;
}

.hs-pagination a,
[class*="pagination"] a {
   color: var(--s5-dark-gray) !important;
   padding: 6px 12px !important;
   border-radius: 4px !important;
   transition: var(--s5-transition) !important;
}

.hs-pagination a:hover,
[class*="pagination"] a:hover {
   background: var(--s5-gold) !important;
   color: var(--s5-black) !important;
}

.hs-pagination .active a,
[class*="pagination"] .active a {
   background: var(--s5-gold) !important;
   color: var(--s5-black) !important;
   font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
button[type="submit"],
input[type="submit"],
.hs-button,
.button,
.btn-primary {
   background: var(--s5-gold) !important;
   color: var(--s5-black) !important;
   border: none !important;
   border-radius: 4px !important;
   padding: 10px 22px !important;
   font-family: var(--s5-font-body) !important;
   font-size: 13px !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.06em !important;
   cursor: pointer !important;
   transition: var(--s5-transition) !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.hs-button:hover,
.button:hover,
.btn-primary:hover {
   background: var(--s5-gold-hover) !important;
   box-shadow: 0 4px 12px rgba(253, 200, 47, 0.3) !important;
}

.btn-secondary,
.button--secondary {
   background: transparent !important;
   color: var(--s5-gold) !important;
   border: 2px solid var(--s5-gold) !important;
}

.btn-secondary:hover,
.button--secondary:hover {
   background: var(--s5-gold) !important;
   color: var(--s5-black) !important;
}


/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="url"],
.hs-form textarea,
.hs-form select {
   border: 1px solid var(--s5-border-gray) !important;
   border-radius: 4px !important;
   padding: 11px 14px !important;
   font-family: var(--s5-font-body) !important;
   font-size: 14px !important;
   transition: var(--s5-transition) !important;
   background: var(--s5-white) !important;
}

.hs-form input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
   outline: none !important;
   border-color: var(--s5-gold) !important;
   box-shadow: 0 0 0 3px rgba(253, 200, 47, 0.15) !important;
}

.hs-form label {
   font-weight: 500 !important;
   color: var(--s5-dark-gray) !important;
   margin-bottom: 4px !important;
   font-size: 13px !important;
}


/* --------------------------------------------------------------------------
   SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: var(--s5-off-white);
}

::-webkit-scrollbar-thumb {
   background: var(--s5-border-gray);
   border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--s5-gold-dark);
}


/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {

   .header,
   .footer,
   .hs-kb-search-input-wrapper {
      display: none !important;
   }

   body {
      background: white !important;
      color: black !important;
   }

   .hs-kb-article-body h1 {
      border-bottom-color: #333 !important;
   }
}


/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.s5-gold-accent {
   border-left: 4px solid var(--s5-gold) !important;
   padding-left: 16px !important;
}

.s5-dark-bg {
   background: var(--s5-black) !important;
   color: var(--s5-white) !important;
}

.s5-caps-label {
   text-transform: uppercase !important;
   letter-spacing: 0.1em !important;
   font-size: 11px !important;
   font-weight: 500 !important;
   color: var(--s5-mid-gray) !important;
}

.s5-arial {
   font-family: var(--s5-font-body) !important;
}

/* --------------------------------------------------------------------------
   v1.8 — HIDE CUSTOMER PORTAL + SIGN IN LINKS IN HEADER
   Pages remain reachable by direct URL; only the header links are hidden.
   -------------------------------------------------------------------------- */

/* Sign In — desktop nav + mobile menu (distinctive class) */
a.header__auth-link {
   display: none !important;
}

/* Customer Portal — href targets tickets-view (class is generic) */
a.header__nav-link[href*="tickets-view"],
a.header__menu-link[href*="tickets-view"] {
   display: none !important;
}

/* Collapse emptied mobile menu items */
li.header__menu-item:has(a.header__auth-link),
li.header__menu-item:has(a.header__menu-link[href*="tickets-view"]) {
   display: none !important;
}

/* --------------------------------------------------------------------------
   v1.9 — LEGAL FOOTER (Worker-injected block; footer bg is --s5-black)
   -------------------------------------------------------------------------- */
.s5-legal-footer {
   text-align: center !important;
   padding: 14px 24px 20px !important;
   margin-top: 10px !important;
   border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.s5-legal-links {
   margin: 0 0 8px !important;
   font-size: 12px !important;
}

.s5-legal-links a {
   color: var(--s5-white) !important;
   text-decoration: none !important;
   transition: var(--s5-transition) !important;
}

.s5-legal-links a:hover {
   color: var(--s5-gold) !important;
}

.s5-legal-copy {
   max-width: 720px !important;
   margin: 0 auto !important;
   font-size: 11px !important;
   line-height: 1.6 !important;
   color: rgba(255, 255, 255, 0.6) !important;
}