/*!
 * VelocityEHS Help Center Reskin: KnowAll theme (help.ehs.com/ih/)
 * Loaded by mu-plugins/vehs-reskin.php only when the active theme is KnowAll.
 * Pure CSS over the stock theme: same templates, same layout, new brand styles.
 * The theme prints its Customizer colours/fonts inline in <head> and the site's
 * "Additional CSS" after that, so rules here use !important to win the cascade.
 *
 * Brand tokens (VelocityEHS brand guide, designer's notes 2026-10-22):
 *   #8FFF3E  High-Vis Green   primary button background
 *   #000000  Black            header, headings, body copy, button text
 *   #2C3CBB  Electric Blue    links, breadcrumbs, "Need Support" callout box
 *   #3A352E  Forged Steel     secondary button background
 *   #5D564B  Utility Cement   secondary text (descriptions, excerpts, meta)
 *   #FFFFFF  White            text on black/blue
 *
 * Type system (same as the updated main Help Center):
 *   Proxima Nova Wide  H1s, hero statement, buttons (semibold 600)
 *   Ballinger          H2-H6, body copy, breadcrumbs, navigation hierarchy
 *   Ballinger Mono     labels / metadata: nav items, tags, "updated on", footer nav
 *   Case: H1s and subheads stay as stored (Title / Sentence case); caps only on
 *   nav items, tags, CTAs and the "INDUSTRIAL HYGIENE" header label.
 * ========================================================================== */

:root {
  --ih-green:  #8FFF3E;
  --ih-black:  #000000;
  --ih-blue:   #2C3CBB;
  --ih-steel:  #3A352E;
  --ih-cement: #5D564B;
  --ih-white:  #ffffff;
  --ih-panel:  #f4f5f5;   /* KnowAll's own light panel grey, kept */
  --ih-rule:   #e6e6e6;   /* KnowAll's own hairline, kept */
}

/* ==========================================================================
 * 1. TYPOGRAPHY
 * ========================================================================== */

/* Body copy and form text: Ballinger (the Adobe kit has no 600, so bold = 700) */
body,
input, select, textarea, optgroup,
p, li, td, th, dd, dt, blockquote, figcaption, label, small {
  font-family: "ballinger", sans-serif !important;
}
body {
  font-weight: 400;
  color: var(--ih-black) !important;
}

/* H2-H6: Ballinger bold, black, stored case */
h2, h3, h4, h5, h6,
.widget .widget__title,
.hkb-feedback .hkb-feedback__title,
.hkb-article-related .hkb-article-related__title {
  font-family: "ballinger", sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  color: var(--ih-black) !important;
}

/* H1s (article title, category title, 404) and the hero statement:
 * Proxima Nova Wide semibold, stored case (Title Case comes from the CMS) */
h1,
.hkb-article .hkb-article__title,
.ht-categoryheader .ht-categoryheader__title,
.site-header .site-header__title {
  font-family: "proxima-nova-wide", sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--ih-black) !important;
}

/* Labels / metadata: Ballinger Mono, all caps */
.nav-header > ul > li > a,
.nav-footer a,
.hkb-article-tags a,
.hkb-article .hkb-article__lastupdated,
.hkb_widget_articles .hkb-meta li,
.hkb-article-attachment__link .hkb-article-attachment__size,
.hkb-article-attachment__link .hkb-article-attachment__img span {
  font-family: "ballinger-mono", monospace !important;
  text-transform: uppercase !important;
  letter-spacing: .04em;
}

/* ==========================================================================
 * 2. TEXT COLOURS
 * ========================================================================== */

/* Links: Electric Blue */
a {
  color: var(--ih-blue);
}
.hkb-article__content a,
.hkb-article-related a,
.hkb-category .hkb-category__articlelist a,
.site-footer a,
.widget ul a,
.ht-articlelist a:hover,
a:hover {
  color: var(--ih-blue) !important;
}
a:hover {
  text-decoration: underline;
}

/* Secondary text: Utility Cement */
.hkb-category .hkb-category__description,
.ht-categoryheader .ht-categoryheader__description,
.hkb-articlemini .hkb-article__excerpt,
.hkb-article .hkb-article__lastupdated,
.hkb-article-attachment__link .hkb-article-attachment__size,
.hkb-feedback .hkb-feedback__title,
.hkb-breadcrumbs,
.hkb-breadcrumbs li:last-child,
.site-footer .site-footer__copyright,
.site-footer .nav-footer a,
.ht-pageheader .ht-pageheader__backlink,
.hkb-article-tags a {
  color: var(--ih-cement) !important;
}
::placeholder {
  color: var(--ih-cement) !important;
  opacity: 1;
}

/* ==========================================================================
 * 3. HEADER: black bar, High-Vis Green wordmark + "INDUSTRIAL HYGIENE"
 * ========================================================================== */

.site-header {
  background: var(--ih-black) !important;
}
.site-header .site-header__banner {
  padding: 16px 0 !important;
}

/* Logo link becomes a flex row: SVG wordmark | divider | product label */
.site-logo {
  margin-right: 24px;
}
.site-logo a {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1;
  text-decoration: none !important;
}
.site-logo img {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
}
/* "INDUSTRIAL HYGIENE": Proxima Nova Wide semibold, uppercase, white.
 * Generated text so no template edit is needed; the logo's alt text still
 * reads the site name for screen readers. */
.site-logo a::after {
  content: "Industrial Hygiene" !important;
  display: inline-block;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.7);
  font-family: "proxima-nova-wide", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ih-white);
  white-space: nowrap;
}
@media screen and (max-width: 479px) {
  .site-logo img { height: 24px; }
  .site-logo a::after {
    margin-left: 12px;
    padding-left: 12px;
    font-size: 11px;
    letter-spacing: .06em;
  }
}

/* Header nav (menu location is empty today; styled for when one is added):
 * Ballinger Mono caps, white on black */
/* The theme prints the phone-width "Menu" hamburger whenever a menu is assigned
 * to the header location, even when that menu has no items (today's case), so
 * it opens nothing. Hide it until a menu list actually exists. */
.nav-header:not(:has(> ul)) .nav-header__mtoggle {
  display: none !important;
}
.nav-header ul li a {
  color: var(--ih-white);
}
.nav-header > ul > li > a {
  font-size: 13px;
}
.nav-header > ul > li:hover > a {
  background: rgba(255, 255, 255, 0.12);
}
.nav-header > ul ul a {
  font-family: "ballinger", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0;
}

/* Home search band: hero statement white, white pill field */
.site-header .site-header__title {
  color: var(--ih-white) !important;
}
/* The field autofocuses on load, so its focus state is its resting look:
 * keep the theme's soft white halo rather than adding a heavy ring. */
.hkb-site-search .hkb-site-search__field {
  background: var(--ih-white);
  color: var(--ih-black);
}

/* ==========================================================================
 * 4. INNER PAGE HEADER BAND (breadcrumbs + search): white, blue crumbs
 * ========================================================================== */

.ht-pageheader {
  background: var(--ih-white) !important;
  border-bottom: 1px solid var(--ih-rule);
}
.hkb-breadcrumbs,
.hkb-breadcrumbs a {
  font-family: "ballinger", sans-serif !important;
}
.hkb-breadcrumbs a {
  color: var(--ih-blue) !important;
  font-weight: 500;
}
.hkb-breadcrumbs a:hover {
  text-decoration: underline;
}
.hkb-breadcrumbs .hkb-breadcrumbs__icon {
  fill: var(--ih-blue) !important;
}
.ht-pageheader .hkb-site-search .hkb-site-search__field {
  border: 1px solid #cfcbc4;
  box-shadow: none;
}
.ht-pageheader .hkb-site-search .hkb-site-search__field:focus {
  border-color: var(--ih-blue);
}

/* ==========================================================================
 * 5. BUTTONS
 * ========================================================================== */

/* Primary: High-Vis Green, black text, Proxima Nova Wide caps. Border width is
 * the theme's existing 0, so nothing to recolour. Hover inverts to black/green. */
button:not(.nav-header__mtoggle):not(.hkb-site-search__button),
input[type="submit"],
input[type="button"],
input[type="reset"],
.hkb_widget_exit .hkb_widget_exit__btn,
.ht-mobile-exit .hkb_widget_exit__btn,
.hkb-feedback .ht-voting-comment__submit,
.wp-block-button__link,
.wp-element-button {
  font-family: "proxima-nova-wide", sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em;
  background-color: var(--ih-green) !important;
  color: var(--ih-black) !important;
  border-color: var(--ih-green) !important;
  text-shadow: none !important;
}
button:not(.nav-header__mtoggle):not(.hkb-site-search__button):hover,
button:not(.nav-header__mtoggle):not(.hkb-site-search__button):focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
.hkb_widget_exit .hkb_widget_exit__btn:hover,
.hkb_widget_exit .hkb_widget_exit__btn:focus,
.ht-mobile-exit .hkb_widget_exit__btn:hover,
.hkb-feedback .ht-voting-comment__submit:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--ih-black) !important;
  color: var(--ih-green) !important;
  border-color: var(--ih-black) !important;
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled] {
  background-color: var(--ih-cement) !important;
  color: var(--ih-white) !important;
  border-color: var(--ih-cement) !important;
}

/* Secondary: Forged Steel, white text. On this theme that is the article
 * "Was this helpful?" yes / no pair (their white check and cross icons stay). */
.hkb-feedback .ht-voting-upvote,
.hkb-feedback .ht-voting-downvote,
.ht-btn--secondary,
.button-secondary {
  background-color: var(--ih-steel) !important;
  color: var(--ih-white) !important;
}
.hkb-feedback .ht-voting-upvote:hover,
.hkb-feedback .ht-voting-downvote:hover,
.ht-btn--secondary:hover,
.button-secondary:hover {
  background-color: var(--ih-black) !important;
  color: var(--ih-white) !important;
}

/* ==========================================================================
 * 6. SIDEBAR CALLOUT BOXES
 * ========================================================================== */

/* "Need Support?" (sidebar on desktop, inline box on mobile):
 * Electric Blue panel, white text, green button */
.widget.hkb_widget_exit,
.ht-mobile-exit {
  background: var(--ih-blue) !important;
  color: var(--ih-white) !important;
}
.widget.hkb_widget_exit .widget__title,
.ht-mobile-exit .ht-mobile-exit__title,
.hkb_widget_exit .hkb_widget_exit__content,
.ht-mobile-exit .hkb_widget_exit__content {
  color: var(--ih-white) !important;
}

/* "Popular Articles" / "Check out our new IH Navigation Articles!":
 * light panel stays, links Electric Blue bold */
.widget.hkb_widget_articles {
  background: var(--ih-panel);
}
.hkb_widget_articles a,
.hkb_widget_articles .hkb-widget__entry-title {
  color: var(--ih-blue) !important;
  font-weight: 700;
}
.hkb_widget_articles a:hover {
  text-decoration: underline;
}
.hkb_widget_articles .hkb-meta li {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ih-cement);
}

/* ==========================================================================
 * 7. HOME CATEGORY GRID + CATEGORY PAGE
 * ========================================================================== */

.hkb-category .hkb-category__title,
.hkb-category .hkb-category__link:hover .hkb-category__title {
  color: var(--ih-black) !important;
}
.hkb-category .hkb-category__link:hover .hkb-category__title {
  color: var(--ih-blue) !important;
}
.hkb-category .hkb-category__link:hover {
  background: var(--ih-panel);
}
.hkb-archive__title {
  color: var(--ih-black) !important;
}

/* Category icons: the current line icons are drawn inline with a teal stroke
 * that is not in the new palette. Recolour them black (per the mockup) until
 * the designer's new icon set arrives. */
.hkb-category__iconwrap svg [class*="hkbiconsvg"],
.hkb-category__iconwrap svg path,
.hkb-category__iconwrap svg circle,
.hkb-category__iconwrap svg rect,
.hkb-category__iconwrap svg line,
.hkb-category__iconwrap svg polyline,
.hkb-category__iconwrap svg polygon,
.hkb-category__iconwrap svg ellipse {
  stroke: var(--ih-black) !important;
}
.hkb-category__iconwrap svg [class*="hkbiconsvg-fill"] {
  fill: var(--ih-black) !important;
}

/* Article list on category pages */
.hkb-articlemini .hkb-article__title,
.hkb-articlemini .hkb-article__title a {
  color: var(--ih-black) !important;
}
.hkb-articlemini .hkb-article__link:hover .hkb-article__title,
.hkb-articlemini .hkb-article__title a:hover {
  color: var(--ih-blue) !important;
}
.ht-articlelist li {
  border-bottom-color: var(--ih-rule);
}

/* ==========================================================================
 * 8. ARTICLE PAGE
 * ========================================================================== */

.hkb-article .hkb-article__content {
  color: var(--ih-black);
}
.hkb-article .hkb-article__lastupdated {
  font-size: 13px;
}
/* list markers: black instead of the old link blue */
.hkb-article__content ol li::before,
.hkb-article__content ul li::before {
  background: var(--ih-black) !important;
  color: var(--ih-white) !important;
}
/* tags: mono caps chips */
.hkb-article-tags a {
  font-size: 12px;
  text-decoration: none;
  border: 1px solid var(--ih-rule);
  border-radius: 3px;
  padding: 4px 8px;
}
.hkb-article-tags a:hover {
  color: var(--ih-blue) !important;
  border-color: var(--ih-blue);
}
/* feedback box */
.hkb-feedback {
  background: var(--ih-panel) !important;
}
/* attachments */
.hkb-article-attachment__link .hkb-article-attachment__content {
  color: var(--ih-black);
}

/* ==========================================================================
 * 9. FOOTER
 * ========================================================================== */

.site-footer {
  background: var(--ih-panel) !important;
  border-top: 1px solid var(--ih-rule);
}
.site-footer .site-footer__copyright a {
  color: var(--ih-blue) !important;
}
.site-footer .nav-footer a {
  font-size: 12px;
}
.site-footer .nav-footer a:hover {
  color: var(--ih-blue) !important;
}