/* ============================================================================
   ModernCyber 2026 — support.moderncyber.com (HubSpot KB + customer portal)
   "Document mode": dark ink masthead over a white reading body.

   Attach (already live) via domain-level Site Header HTML for
   support.moderncyber.com:
     <link rel="stylesheet" href="https://www.moderncyber.com/hubfs/portal/portal-brand.css">

   ---------------------------------------------------------------------------
   ARCHITECTURE (rewritten 2026-08-13 — v2)

   The stock KB theme (@hubspot/cms-knowledge-base-theme) is entirely
   CUSTOM-PROPERTY DRIVEN. The KB settings UI emits ~170 vars into an inline
   <style> on `.theme-overrides` (set on <body> AND on .kb-body-wrapper), and
   every template rule reads them: `a { color: var(--a-primary-body-font-color) }`,
   `.header__top { background-color: var(--header-top-bar-background-color) }`,
   and so on.

   v1 of this file fought those rules per-element with !important and lost the
   ones that sit behind higher specificity (module CSS nests
   `.hs-kb-home-list a:not(.unstyled)`), while WINNING some it should have left
   alone — which is what broke the top bar (light-grey auth links forced onto
   the white top bar) and the search button.

   v2 sets the VARIABLES instead. One override cascades to every surface the
   template renders, including the logged-in ticket pages we cannot audit
   anonymously, with no specificity war and no !important. Plain CSS is used
   ONLY for what has no variable behind it: the radial masthead gradient, the
   dot mesh, the accent bar, and article code/table/quote typography.

   All inline <style> blocks are emitted BEFORE this file's <link>, so equal
   specificity resolves in our favour — `!important` is not needed and is not
   used except where the template hard-codes a value inline.

   NATIVE-FIRST NOTE: most vars below have a matching field in
   Settings → Content → Knowledge Base → Customize. Setting them there is the
   better home and makes the matching block here redundant (harmless either
   way). The two that are outright settings BUGS, worth fixing in the UI:
     link colour        #1773D1 (HubSpot stock blue)  → #096E9B
     link hover colour  #415239 (olive green!)        → #0EA5E9

   Hex values are the canonical brand-token values from tokens.css, inlined —
   the stock KB theme is not part of mc2026-theme, so HubL theme fields and
   tokens.css are both out of reach here.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
/* Space Grotesk is not loaded by the portal natively; DM Sans already is.
   Fast path to drop this: Settings → Branding → Manage brand fonts → add
   Space Grotesk, then set it as the KB heading font. */

/* ===========================================================================
   1 · BRAND TOKENS → template variables
   Both selectors carry .theme-overrides in the live DOM; matching the
   template's own specificity (0,2,0) and loading later is enough to win.
   ======================================================================== */
body.theme-overrides,
.kb-body-wrapper.theme-overrides {
  /* -- palette ---------------------------------------------------------- */
  --primary-color: #0EA5E9;
  --accent-color: #0EA5E9;
  --body-bg-color: #FFFFFF;

  /* -- body text: stock #33475B slate → brand ink ----------------------- */
  --primary-body-font-family: 'DM Sans', 'Segoe UI', sans-serif;
  --primary-body-font-color: #010101;
  --primary-body-line-height: 1.65;

  /* -- headings: Space Grotesk + ink (stock was DM Sans #33475B) --------- */
  --secondary-header-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --secondary-header-font-color: #010101;
  --h1-secondary-header-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --h1-secondary-header-font-color: #010101;
  --h2-secondary-header-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --h2-secondary-header-font-color: #010101;
  --h3-secondary-header-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --h3-secondary-header-font-color: #010101;
  --h4-secondary-header-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --h4-secondary-header-font-color: #010101;
  --h5-secondary-header-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --h5-secondary-header-font-color: #010101;
  --h6-secondary-header-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --h6-secondary-header-font-color: #5E7382;

  /* -- links: THE BUG. Stock blue #1773D1, hover olive #415239.
        Blue 700 on white is AA (5.9:1); hover lifts to signal. ---------- */
  --a-primary-body-font-color: #096E9B;
  --a-hover-primary-body-font-color: #0EA5E9;

  /* -- masthead: both bars go transparent so the single radial gradient
        painted on .header in §2 reads as one continuous ink block ------- */
  --header-top-bar-background-color: transparent;
  --header-bottom-bar-background-color: transparent;
  --top-bar-font-color: #B8C7D2;
  --top-bar-hover-font-color: #0EA5E9;
  --header-menu-font-color: #B8C7D2;
  --header-menu-main-font-color: #B8C7D2;
  --header-menu-main-hover-font-color: #0EA5E9;
  --header-menu-submenu-font-color: #010101;
  --header-menu-hover-submenu-font-color: #096E9B;

  /* -- buttons: native picker forces white text and a 20px pill; brand is
        ink-on-signal at 8px (signal is an accent, never a background) --- */
  --header-button-background-color: #0EA5E9;
  --header-button-hover-background-color: #0C89C2;
  --header-button-font-color: #021019;
  --header-button-hover-font-color: #021019;
  --header-button-border-radius: 8px;
  --primary-button-background-color: #0EA5E9;
  --primary-button-hover-background-color: #0C89C2;
  --primary-button-font-color: #021019;
  --primary-button-hover-font-color: #021019;
  --primary-button-border-radius: 8px;
  --secondary-button-background-color: #E7F6FE;
  --secondary-button-hover-background-color: #D3EDFC;
  --secondary-button-font-color: #075274;
  --secondary-button-hover-font-color: #075274;
  --secondary-button-border-radius: 8px;

  /* -- KB home search block. Kept a FLAT dark colour, not transparent: the
        wrapper also renders on category/search pages, where a transparent
        background would put the white label on white. §3 paints the real
        gradient on the home page only. -------------------------------- */
  --search-input-wrapper-background-color: #05121B;
  --search-field-label-font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --search-field-label-font-color: #FFFFFF;
  --search-field-label-font-size: 32px;
  --search-field-text-font-color: #010101;
  --search-field-button-background-color: #0EA5E9;
  --search-field-button-icon-color: #021019;

  /* -- category cards -------------------------------------------------- */
  --hs-kb-card-highlight-border-color: #0EA5E9;
  --hs-kb-home-tiles-background-color: #FFFFFF;
  --hs-kb-home-tiles-corner-radius: 10px;

  /* -- footer (gradient painted in §6; var keeps the fallback on brand) - */
  --footer-bg-color: #010101;
  --footer-font-color: #B8C7D2;
  --footer-menu-font-color: #B8C7D2;
  --footer-menu-hover-font-color: #0EA5E9;

  /* -- social icons: signal is an accent, so outline not solid fill ----- */
  --social-follow-icon-background-color: rgba(255,255,255,.08);
  --social-follow-icon-color: #B8C7D2;
}

/* The template reads --body-bg-color but never applies it to <body>; without
   this, body is transparent and only <html>'s UA white shows through. */
body { background-color: #FFFFFF; }

/* ===========================================================================
   2 · MASTHEAD — no variable exists for a gradient background
   ======================================================================== */
.header {
  background: radial-gradient(120% 160% at 85% -20%, #10222E 0%, #05121B 38%, #010101 78%);
  position: relative;
}

/* Accent bar — always fades right. On the KB home the search block continues
   the same ink field directly below the nav, so the bar moves to the bottom of
   THAT block (§3) instead of cutting the masthead in half. */
.header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #0EA5E9, #0C89C2 55%, transparent);
}
.hs-knowledge-listing-page .header::after { display: none; }

/* ===========================================================================
   3 · KB HOME HERO — gradient + dot mesh (home only, per brand rules)
   ======================================================================== */
.hs-knowledge-listing-page .hs-kb-search-input-wrapper {
  background: radial-gradient(120% 160% at 85% -20%, #10222E 0%, #05121B 38%, #010101 78%);
  position: relative;
  padding: 64px 20px 72px;
}
.hs-knowledge-listing-page .hs-kb-search-input-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(115deg, transparent 55%, rgba(0,0,0,.9));
  mask-image: linear-gradient(115deg, transparent 55%, rgba(0,0,0,.9));
  pointer-events: none;
}
.hs-knowledge-listing-page .hs-kb-search-input-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #0EA5E9, #0C89C2 55%, transparent);
}
/* Keep the search UI above the mesh layer. */
.hs-kb-search-input-wrapper .hs-search-field { position: relative; z-index: 1; }

.hs-search-field__label { font-weight: 600; letter-spacing: -.01em; }

/* Field + button as one 8px unit. The template lays the button out flush
   (margin:0) in the inline-button layout; v1 gave it its own 8px radius and a
   signal fill, which read as a detached floating box beside the field. */
.hs-search-field__input {
  border: 1px solid #DCE7EE;
  border-radius: 8px 0 0 8px;
  box-shadow: none;
  padding: 14px 16px;
  color: #010101;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}
.hs-search-field__input:focus {
  border-color: #0EA5E9;
  outline: none;
}
.hs-kb-search-input-wrapper .hs-search-field__bar .hs-search-field__button {
  border: 0;
  border-radius: 0 8px 8px 0;
  align-self: stretch;
  padding: 0 20px;
  cursor: pointer;
}

/* ===========================================================================
   4 · CATEGORY CARDS (AAG card style; no native card control in the
       content_rich layout, which ships no card chrome at all)
   ======================================================================== */
.hs-kb-home-list__category {
  background: #FFFFFF;
  border: 1px solid #DCE7EE;
  border-radius: 10px;
  padding: 28px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hs-kb-home-list__category:hover {
  border-color: #0EA5E9;
  box-shadow: 0 6px 24px rgba(5,18,27,.07);
}
/* The KB renders an empty icon slot (no icon chosen per category), which the
   module still reserves 32px + 1rem of space for. Collapse it. */
.hs-kb-home-list__icon:has(.hs-kb-home-list__empty-icon) { display: none; }

.hs-kb-home-list__text__category-title {
  font-size: 20px;
  margin-bottom: .5rem;
}
/* Matches the module's own nested `.hs-kb-home-list a:not(.unstyled)`
   specificity (0,2,0); the var in §1 already lands the same colour. */
.hs-kb-home-list a:not(.unstyled) { color: #096E9B; }
.hs-kb-home-list a:not(.unstyled):hover { color: #0EA5E9; }
.hs-kb-home-list__text__category-link { font-weight: 600; }
.hs-kb-category-article-list__link { padding: .35em 0; }

/* ===========================================================================
   5 · ARTICLE TYPOGRAPHY — deep-technical KB needs blog-grade code + tables
   ======================================================================== */
.hs-kb-breadcrumbs { font-size: 13px; }

/* Sidebar category accordion: the active item ships a flat tinted block; the
   AAG chip treatment (blue-50 fill, blue-800 text, 8px) is the brand form. */
.hs-kb-sidebar .hs-kb-category-accordion_link {
  border-radius: 8px;
  color: #096E9B;
}
.hs-kb-sidebar .hs-kb-category-accordion_link--active {
  background-color: #E7F6FE;
  color: #075274;
  font-weight: 600;
}

.article-wrapper { font-size: 16.5px; line-height: 1.65; }

.article-wrapper pre,
.kb-body-wrapper pre {
  background: #05121B;
  color: #E8F1FA;
  border: 1px solid rgba(22,106,144,.35);
  border-radius: 10px;
  padding: 18px 22px;
  overflow-x: auto;
}
/* The article template puts a 1px #E1E3EA border on every <code>, which draws a
   light box around code sitting inside the dark <pre>. */
.article-wrapper pre code,
.kb-body-wrapper pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: 0;
}
.article-wrapper code,
.kb-body-wrapper code {
  background: #F0F5F8;
  color: #075274;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: .92em;
}

.article-wrapper table,
.kb-body-wrapper table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-wrapper th,
.kb-body-wrapper th { color: #096E9B; text-align: left; }
.article-wrapper th, .article-wrapper td,
.kb-body-wrapper th, .kb-body-wrapper td {
  padding: 10px 14px;
  border: 1px solid rgba(22,106,144,.35);
}

/* The template draws the quote bar with an absolutely-positioned :before
   filled from --secondary-color, which also fills secondary buttons — so it is
   recoloured here rather than by hijacking that variable. */
.article-wrapper blockquote:before,
.kb-body-wrapper blockquote:before { background-color: #0EA5E9; }

.article-wrapper img { border-radius: 10px; max-width: 100%; height: auto; }

.hs-kb-related-articles { border-top: 1px solid #DCE7EE; }
.hs-kb-feedback { border: 1px solid #DCE7EE; border-radius: 10px; }

/* ===========================================================================
   6 · TICKETS — status pills + list card
   Selectors written against HubSpot's ticket-listing markup; verifiable only
   while signed in (see the QA note in launch/portal-rollback.md).
   ======================================================================== */
.kb-body-wrapper .hs-ticket-listing,
.kb-body-wrapper table.tickets {
  background: #FFFFFF;
  border: 1px solid #DCE7EE;
  border-radius: 10px;
}
.hs-pill--open,    .status-open    { background: #E7F6FE; color: #075274; }
.hs-pill--waiting, .status-waiting { background: #FFF4E5; color: #8A5A00; }
.hs-pill--closed,  .status-closed  { background: #F4F7F9; color: #5E7382; }

/* ===========================================================================
   7 · FOOTER — gradient parity with the website (no native gradient setting)
   ======================================================================== */
.footer {
  background: radial-gradient(120% 160% at 85% -20%, #10222E 0%, #05121B 38%, #010101 78%);
  border-top: 1px solid rgba(255,255,255,.08);
  /* The template only colours .footer p and .footer a from --footer-font-color,
     so anything else in the footer inherited body ink (#010101) — black on
     black. Setting it on the container makes every descendant inherit. */
  color: #B8C7D2;
}
.footer__bottom { background: transparent; }
a.hs-kb-social_follow__link:hover { background-color: rgba(14,165,233,.22); }
