/* ============================================================================
   neowake® Help Center Theme — Bright
   Maps the neowake Design System (Figma Style Guide) onto the HubSpot
   Knowledge Base (clone of @hubspot/cms-knowledge-base-theme).

   Sources of truth:
     - neowake_design_system.md (Obsidian Vault, Style Guide, April 2026)
     - 05_operations/hubspot_brand_settings.md (reconciled Bright-Theme mapping
       incl. WCAG-AA correction: body text #4D4D4D, not the literal #7E7E7E)

   Scope of deployment: KB pages on 147685766.hs-sites-eu1.com
   (later support.neowake.de after the domain cutover).

   Strategy:
     Layer A — global rebrand (fonts / colors / links / buttons). Only
               "safe" properties that cannot break the KB chrome layout.
     Layer B — article-body typographic scale + vertical rhythm. Scoped to
               the rich-text article body only, so KB home / category cards
               keep their tuned component sizing.

   All values are multiples of the 4px grid. No hard-coded hex outside the
   token block in section 2 — everything else references var(--nw-*).
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Brand fonts — self-hosted on the neowake CDN (Bunny)
      Only the weights the Style Guide actually uses:
        Gilroy   300 (Light) · 600 (SemiBold) · 700 (Bold)   → Headings
        Futura PT 400 (Book) · 700 (Bold)                     → Body / UI / Buttons
      woff2 + woff cover every modern browser; legacy eot/ttf/svg dropped.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Gilroy'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('https://neowake-external.b-cdn.net/General/Fonts/gilroy/Gilroy-Light.woff2') format('woff2'),
       url('https://neowake-external.b-cdn.net/General/Fonts/gilroy/Gilroy-Light.woff') format('woff');
}
@font-face {
  font-family: 'Gilroy'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://neowake-external.b-cdn.net/General/Fonts/gilroy/Gilroy-SemiBold.woff2') format('woff2'),
       url('https://neowake-external.b-cdn.net/General/Fonts/gilroy/Gilroy-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Gilroy'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://neowake-external.b-cdn.net/General/Fonts/gilroy/Gilroy-Bold.woff2') format('woff2'),
       url('https://neowake-external.b-cdn.net/General/Fonts/gilroy/Gilroy-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Futura PT'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://neowake-external.b-cdn.net/General/Fonts/futura-pt/FuturaPT-Book.woff2') format('woff2'),
       url('https://neowake-external.b-cdn.net/General/Fonts/futura-pt/FuturaPT-Book.woff') format('woff');
}
@font-face {
  font-family: 'Futura PT'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://neowake-external.b-cdn.net/General/Fonts/futura-pt/FuturaPT-Bold.woff2') format('woff2'),
       url('https://neowake-external.b-cdn.net/General/Fonts/futura-pt/FuturaPT-Bold.woff') format('woff');
}


/* ---------------------------------------------------------------------------
   2. Design tokens — Bright Theme (the ONLY place hex values live)
   --------------------------------------------------------------------------- */
:root {
  /* Core brand */
  --nw-blue:            #0171E2;   /* $blue-default  — primary CTA, links       */
  --nw-blue-dark:       #005BB6;   /* $blue-dark     — hover / focus            */
  --nw-yellow:          #FFD814;   /* $yellow-default — promo / badges ONLY     */

  /* Bright semantic surfaces / text */
  --nw-surface-primary: #FAFAFA;   /* $white-default — page background          */
  --nw-surface-card:    #F5F5F5;   /* $white-dark    — cards / surfaces         */
  --nw-surface-white:   #FFFFFF;   /* $white-light   — overlays / inputs        */
  --nw-text-heading:    #4D4D4D;   /* $grey-darker   — headings                 */
  --nw-text-body:       #4D4D4D;   /* AA-corrected primary body (see note)      */
  --nw-text-muted:      #7E7E7E;   /* $grey-default  — captions / muted ONLY    */
  --nw-link:            #0171E2;
  --nw-link-hover:      #005BB6;
  --nw-border:          #C6C6C6;   /* $grey-light    — borders / dividers       */
  --nw-tint-info:       #E9F2FF;   /* $blue-lighter  — info panel tint          */

  /* Fonts */
  --nw-font-heading:    'Gilroy', sans-serif;
  --nw-font-body:       'Futura PT', sans-serif;

  /* Spacing scale (4px grid) — desktop base */
  --nw-space-xs:  8px;
  --nw-space-sm:  12px;
  --nw-space-md:  16px;
  --nw-space-lg:  24px;
  --nw-space-xl:  32px;
  --nw-space-2xl: 48px;
}

/* NOTE on body text: the Style Guide's Bright-Theme table maps $text-body to
   #7E7E7E, but that fails WCAG AA on #FAFAFA (~3.9:1). Per
   hubspot_brand_settings.md we use #4D4D4D (~8.1:1, AAA) for readable text and
   keep #7E7E7E strictly for muted/caption text. */


/* ---------------------------------------------------------------------------
   3. LAYER A — global rebrand (all KB pages)
      Rebrand the stock theme's own CSS variables so native KB components
      (search, cards, breadcrumbs, footer) inherit the brand automatically.
   --------------------------------------------------------------------------- */
.kb-body-wrapper,
body {
  --primary-color: var(--nw-blue);
  --body-bg-color: var(--nw-surface-primary);
  --primary-body-font-family: var(--nw-font-body);

  background-color: var(--nw-surface-primary);
  color: var(--nw-text-body);
  font-family: var(--nw-font-body);
}

/* KB header: hide the top nav menu column.
   Pre-existing neowake rule, consolidated here from the KB "Header HTML" box
   so the whole KB styling lives in one asset. */
.header__menu-col { display: none !important; }

/* Headings everywhere: brand font + colour + weight.
   (Sizes stay component-native here — see Layer B for the article scale.) */
.kb-body-wrapper h1, .kb-body-wrapper h2, .kb-body-wrapper h3,
.kb-body-wrapper h4, .kb-body-wrapper h5, .kb-body-wrapper h6 {
  font-family: var(--nw-font-heading);
  color: var(--nw-text-heading);
  font-weight: 600;               /* Gilroy SemiBold */
}
.kb-body-wrapper h1 { font-weight: 700; }   /* Gilroy Bold */

/* Links */
.kb-body-wrapper a {
  color: var(--nw-link);
  text-decoration: none;
}
.kb-body-wrapper a:hover,
.kb-body-wrapper a:focus {
  color: var(--nw-link-hover);
  text-decoration: underline;
}

/* Buttons — ALWAYS blue (Style Guide: yellow is promo/warning only).
   Selectors cover the common HubSpot KB button classes; confirm against the
   live DOM if a CTA is missed. */
.kb-body-wrapper .hs-button,
.kb-body-wrapper .button,
.kb-body-wrapper button,
.kb-body-wrapper input[type="submit"],
.kb-body-wrapper a.cta_button {
  background-color: var(--nw-blue);
  color: var(--nw-surface-white);
  font-family: var(--nw-font-body);
  font-weight: 700;               /* Futura PT Bold */
  font-size: 18px;
  line-height: 24px;
  border: none;
  border-radius: 9999px;          /* pill — maximaler Radius */
  padding: 12px 28px;
  transition: background-color .15s ease;
}
.kb-body-wrapper .hs-button:hover,
.kb-body-wrapper .button:hover,
.kb-body-wrapper button:hover,
.kb-body-wrapper input[type="submit"]:hover,
.kb-body-wrapper a.cta_button:hover {
  background-color: var(--nw-blue-dark);
  color: var(--nw-surface-white);
  text-decoration: none;
}

/* Cards / category tiles */
.kb-body-wrapper .hs-kb-home-list__category {
  background-color: var(--nw-surface-card);
  border: 1px solid var(--nw-border);
  border-radius: 12px;
}

/* Search input */
.kb-body-wrapper .hs-kb-search-input-wrapper input {
  border: 1px solid var(--nw-border);
  border-radius: 8px;
  font-family: var(--nw-font-body);
}
.kb-body-wrapper .hs-kb-search-input-wrapper input:focus {
  border-color: var(--nw-blue);
  outline: none;
}

/* Social-follow icons (footer): brand-blue circle + white glyph.
   The theme renders the SVG with fill:currentColor, so the icon colour = the
   link's `color`. The generic link rule above (equal specificity, loads later)
   was tinting the glyphs blue on the grey circle. These higher-specificity
   rules (0,2,1) restore a clean, on-brand look. */
.kb-body-wrapper a.hs-kb-social_follow__link {
  background-color: var(--nw-blue);
  color: var(--nw-surface-white);
}
.kb-body-wrapper a.hs-kb-social_follow__link:hover,
.kb-body-wrapper a.hs-kb-social_follow__link:focus {
  background-color: var(--nw-blue-dark);
  color: var(--nw-surface-white);
  text-decoration: none;
}


/* ---------------------------------------------------------------------------
   4. LAYER B — article body typographic scale + vertical rhythm
      Scoped to the rich-text article body so it never touches KB home /
      category card headings. This is where the Style Guide's heading sizes,
      line-heights and — the original ask — the space ABOVE headings live.

      Rhythm model (grounded in the Style Guide spacing scale):
        margin-BOTTOM  = documented "$space-heading-*" (heading → following text)
        margin-TOP     = derived from the spacing scale (Style Guide documents
                         "after heading" but not "before"); larger than the
                         bottom so a heading binds to the text below it.
   --------------------------------------------------------------------------- */
.hs_cos_wrapper_type_inline_richtext_field {
  font-family: var(--nw-font-body);
  font-weight: 400;
  font-size: 18px;                /* $body.lg — long-form reading */
  line-height: 28px;
  color: var(--nw-text-body);

  /* per-breakpoint rhythm variables (desktop defaults) */
  --h2-top: var(--nw-space-2xl);  /* 48px — new major section       */
  --h3-top: var(--nw-space-xl);   /* 32px — new subsection  ← H3 top */
  --h4-top: var(--nw-space-lg);   /* 24px                           */
  --h5-top: var(--nw-space-md);   /* 16px                           */
  --h1-bot: var(--nw-space-lg);   /* 24px — $space-heading-lg        */
  --h2-bot: var(--nw-space-md);   /* 16px — $space-heading-md        */
  --hx-bot: var(--nw-space-sm);   /* 12px — $space-heading-sm (H3/4/5) */
}

/* Heading sizes (Gilroy) + rhythm — desktop */
.hs_cos_wrapper_type_inline_richtext_field h1 { font-size: 56px; line-height: 64px; font-weight: 700; margin: 0 0 var(--h1-bot); }
.hs_cos_wrapper_type_inline_richtext_field h2 { font-size: 40px; line-height: 48px; margin: var(--h2-top) 0 var(--h2-bot); }
.hs_cos_wrapper_type_inline_richtext_field h3 { font-size: 32px; line-height: 40px; margin: var(--h3-top) 0 var(--hx-bot); }
.hs_cos_wrapper_type_inline_richtext_field h4 { font-size: 28px; line-height: 36px; margin: var(--h4-top) 0 var(--hx-bot); }
.hs_cos_wrapper_type_inline_richtext_field h5 { font-size: 20px; line-height: 28px; margin: var(--h5-top) 0 var(--hx-bot); }

.hs_cos_wrapper_type_inline_richtext_field h2,
.hs_cos_wrapper_type_inline_richtext_field h3,
.hs_cos_wrapper_type_inline_richtext_field h4,
.hs_cos_wrapper_type_inline_richtext_field h5,
.hs_cos_wrapper_type_inline_richtext_field h6 {
  font-family: var(--nw-font-heading);
  font-weight: 600;
  color: var(--nw-text-heading);
}

/* Body flow */
.hs_cos_wrapper_type_inline_richtext_field p { margin: 0 0 var(--nw-space-md); }        /* $space-paragraph 16px */
.hs_cos_wrapper_type_inline_richtext_field ul,
.hs_cos_wrapper_type_inline_richtext_field ol { margin: 0 0 var(--nw-space-md); padding-left: 1.5em; }
.hs_cos_wrapper_type_inline_richtext_field li { margin-bottom: var(--nw-space-sm); }    /* $space-list 12px */
.hs_cos_wrapper_type_inline_richtext_field img,
.hs_cos_wrapper_type_inline_richtext_field figure,
.hs_cos_wrapper_type_inline_richtext_field table { margin: var(--nw-space-xl) 0; }      /* $space-block 32px */
.hs_cos_wrapper_type_inline_richtext_field a { color: var(--nw-link); text-decoration: underline; }
.hs_cos_wrapper_type_inline_richtext_field a:hover { color: var(--nw-link-hover); }

/* No stray gap at the very top; avoid double gaps between stacked headings */
.hs_cos_wrapper_type_inline_richtext_field > :first-child { margin-top: 0; }
.hs_cos_wrapper_type_inline_richtext_field h2 + h3,
.hs_cos_wrapper_type_inline_richtext_field h3 + h4,
.hs_cos_wrapper_type_inline_richtext_field h4 + h5 { margin-top: var(--nw-space-sm); }

/* Blockquote / callout */
.hs_cos_wrapper_type_inline_richtext_field blockquote {
  margin: var(--nw-space-xl) 0;
  padding: var(--nw-space-md) var(--nw-space-lg);
  border-left: 4px solid var(--nw-blue);
  background: var(--nw-tint-info);
  color: var(--nw-text-body);
}

/* Table borders on brand */
.hs_cos_wrapper_type_inline_richtext_field table th,
.hs_cos_wrapper_type_inline_richtext_field table td {
  border: 1px solid var(--nw-border);
  padding: var(--nw-space-sm) var(--nw-space-md);
}


/* ---------------------------------------------------------------------------
   5. Responsive — Tablet (768–1024px)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hs_cos_wrapper_type_inline_richtext_field {
    --h2-top: var(--nw-space-xl);  /* 32px */
    --h3-top: var(--nw-space-lg);  /* 24px */
    --h4-top: var(--nw-space-md);  /* 20px→16px grid */
    --h1-bot: 20px;                /* $space-heading-lg tablet */
  }
  .hs_cos_wrapper_type_inline_richtext_field h1 { font-size: 48px; line-height: 56px; }
  .hs_cos_wrapper_type_inline_richtext_field h2 { font-size: 36px; line-height: 44px; }
  .hs_cos_wrapper_type_inline_richtext_field h3 { font-size: 28px; line-height: 36px; }
  .hs_cos_wrapper_type_inline_richtext_field h4 { font-size: 24px; line-height: 32px; }
  .hs_cos_wrapper_type_inline_richtext_field h5 { font-size: 20px; line-height: 28px; }
}


/* ---------------------------------------------------------------------------
   6. Responsive — Mobile (≤767px)
      ASSUMPTION: the Style Guide has no mobile heading table (only desktop +
      tablet). Sizes below are a conservative scale-down on the 4px grid.
      Flag for Hiba/Ammar if the design team wants specific mobile values.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hs_cos_wrapper_type_inline_richtext_field {
    font-size: 16px; line-height: 24px;   /* $body.md */
    --h2-top: var(--nw-space-lg);  /* 24px */
    --h3-top: 20px;
    --h4-top: var(--nw-space-md);  /* 16px */
    --h1-bot: var(--nw-space-md);  /* 16px */
  }
  .hs_cos_wrapper_type_inline_richtext_field h1 { font-size: 40px; line-height: 48px; }
  .hs_cos_wrapper_type_inline_richtext_field h2 { font-size: 32px; line-height: 40px; }
  .hs_cos_wrapper_type_inline_richtext_field h3 { font-size: 24px; line-height: 32px; }
  .hs_cos_wrapper_type_inline_richtext_field h4 { font-size: 22px; line-height: 28px; }
  .hs_cos_wrapper_type_inline_richtext_field h5 { font-size: 18px; line-height: 26px; }
}