@charset "UTF-8";
/* ==========================================================================
   CERTAIN HELP CENTER — TOKENS   [ BLOCK A of 2 ]
   --------------------------------------------------------------------------
   PASTE immediately AFTER the `@charset "UTF-8";` line at the top of
   style.css, and ABOVE Copenhagen's `***** Base *****` comment.

   @charset must stay the very first thing in the file, so paste below it.

   Nothing in this block uses Zendesk's SCSS variables or its darken/lighten
   helpers, so it sits safely alongside the rest of the file. Do not remove a
   variable from the ORIGINAL rules below — those are what let the Guide theme
   settings drive the colours.

   Theme: Platform HC, June 2020 HC Revamp lineage
   Date:  2026-08-31
   ========================================================================== */

/* ==========================================================================
   CERTAIN HELP CENTER — DESIGN TOKENS
   --------------------------------------------------------------------------
   Paste this block at the VERY TOP of Copenhagen's style.css, above
   everything else, then append certain-hc-theme.css after Copenhagen's rules.

   Scope:  Certain Platform help center  (platform-support.certain.com)
           Certain Touchpoint help center (touchpoint-support.certain.com)
           Certain Greet help center      (brand 41074035115031)

   One stylesheet, three brands. Only the LOGO changes between them — see
   the PER-BRAND section at the bottom of this file.

   Derived from:
     - certain-brand rev. 2 (May 2026) — palette, type, Light Mode spec
     - the live Touchpoint Video Onboarding Guide article (.tp-* language)
     - greet-tokens.css / greet-helpcenter-theme.css (2026-08-25) — the
       Copenhagen trap fixes, which are carried forward here verbatim

   MODE: Light Mode, committed. certain-brand names Light Mode the default
   for "anything published outside Touchpoint" — a help center is published
   external content, so Touchpoint's Deep Intelligence Dark Mode does NOT
   apply here. It is scoped to Touchpoint mobile and executive dashboards.
   Do not introduce a third mode. Navy is chrome (header / hero / footer /
   CTA), never a content surface.
   ========================================================================== */

:root {

  /* ---- Navy: the anchor. Chrome only, never a body background. ---------- */
  --c-navy:              #0b2958;  /* Lanyard Blue — headings, buttons, CTA  */
  --c-navy-deep:         #072140;  /* header bar, hero panel, footer         */
  --c-navy-deeper:       #061A32;  /* hairline under header / above footer   */
  --c-navy-hover:        #0B284C;  /* primary button hover                   */

  /* ---- Accent: Impact Blue --------------------------------------------- */
  /* #2cd1cc is 8.53:1 on navy-deep and 7.54:1 behind navy text, so it is
     safe as a FILL, a rule, a border and a link-on-navy. It is 1.67:1 as
     small text on Mist, which fails AA — so small teal TEXT uses the deep
     variant below. This split is deliberate; do not collapse it.          */
  --c-teal:              #2cd1cc;  /* fills, rules, hover borders, icon tint */
  --c-teal-text:         #0C6F6C;  /* small teal TEXT on white/Mist: 5.29:1  */
  --c-teal-tint:         rgba(44, 209, 204, 0.12);  /* icon chip background  */
  --c-teal-tint-hover:   rgba(44, 209, 204, 0.08);  /* row hover wash        */

  /* ---- Semantic ------------------------------------------------------- */
  --c-green:             #2fb36d;  /* Kiosk Green — success, active rail     */
  --c-green-text:        #1C7A4A;  /* Kiosk Green as text on light          */
  --c-violet:            #9381fb;  /* Radient Violet — intelligence ONLY     */
  --c-warn:              #D29804;
  --c-danger:            #C51111;

  /* ---- Surfaces -------------------------------------------------------- */
  --c-white:             #FFFFFF;
  --c-mist:              #EDF1F8;  /* section alternation, panel fill        */
  --c-spearmint:         #D6F3EC;  /* callout fill                           */
  --c-silver:            #F2F2F2;  /* input background                       */
  --c-code-bg:           #F0F0F0;

  /* ---- Borders --------------------------------------------------------- */
  --c-border:            #dde2ea;  /* certain-brand card border              */
  --c-border-soft:       #eef1f6;  /* internal dividers inside a card        */
  --c-border-input:      #BFBFBF;
  --c-border-navy:       rgba(255, 255, 255, 0.16);  /* on navy chrome       */

  /* ---- Text ------------------------------------------------------------ */
  --c-text:              #171717;  /* body                                   */
  --c-text-muted:        #4A5A72;  /* descriptions, meta — 6.19:1 on Mist    */
  --c-text-faint:        #5b6b85;  /* 16px+ only; 4.77:1 on Mist            */
  --c-text-on-navy:      #FFFFFF;
  --c-text-on-navy-soft: #cdd6e4;  /* 9.74:1 on navy                        */
  --c-link:              #0846AA;  /* body links — 8.51:1 on white          */
  --c-link-hover:        #0b2958;
  --c-link-on-navy:      #2cd1cc;

  /* ---- Type ------------------------------------------------------------ */
  --c-font-head: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --c-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --c-font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale. certain-brand: H1 38 / H2 28 / H3 20, body 16/1.55.
     FLOOR IS 14px. Every step below is >= 14px on purpose — the live
     article used 13px in five places and those are raised here.           */
  --c-fs-hero:      44px;   /* hero H1 — the one step above brand H1        */
  --c-fs-h1:        38px;
  --c-fs-h2:        28px;
  --c-fs-h3:        20px;
  --c-fs-h4:        17px;
  --c-fs-body:      16px;
  --c-fs-sm:        15px;   /* dense UI, card descriptions                  */
  --c-fs-label:     14px;   /* eyebrows, counts, pills, meta — THE FLOOR    */
  --c-lh-body:      1.55;
  --c-lh-tight:     1.25;
  --c-lh-head:      1.15;
  --c-tracking-cap: 0.04em; /* the only place letter-spacing is used        */

  /* ---- Spacing scale --------------------------------------------------- */
  /* Copenhagen's own spacing is ad hoc; this is the answer to item 1 of the
     design brief. 4px base, doubling-ish. Use these, not raw px.          */
  --c-sp-1:   4px;
  --c-sp-2:   8px;
  --c-sp-3:  12px;
  --c-sp-4:  16px;
  --c-sp-5:  24px;
  --c-sp-6:  32px;
  --c-sp-7:  44px;
  --c-sp-8:  64px;
  --c-sp-9:  88px;

  /* ---- Shape ----------------------------------------------------------- */
  --c-radius-sm:    6px;   /* buttons                                       */
  --c-radius:       8px;   /* inputs, code blocks, chips                    */
  --c-radius-chip:  9px;   /* icon chips (matches the live article)         */
  --c-radius-card: 12px;   /* cards, accordion rows                         */
  --c-radius-lg:   14px;   /* the TOC card                                  */
  --c-radius-xl:   16px;   /* the full-width panel                          */

  /* ---- Elevation: overlay tint, NEVER a drop shadow -------------------- */
  /* certain-brand forbids drop shadows in UI. The live article's
     .tp-row:hover box-shadow is replaced by these. Greet's app calls this
     the "elevate" pattern and ships a zero-alpha shadow scale to enforce it. */
  --c-elevate-1:  rgba(0, 0, 0, 0.03);
  --c-elevate-2:  rgba(0, 0, 0, 0.08);
  --c-focus-ring: 0 0 0 3px rgba(44, 209, 204, 0.45);

  /* ---- Layout ---------------------------------------------------------- */
  --c-col:        1160px;  /* the centered content column                   */
  --c-measure:      68ch;  /* prose reading measure — Bringhurst 45-75      */
  --c-gutter:       20px;  /* minimum edge padding at any width             */
}

/* ==========================================================================
   PER-BRAND — the only thing that differs between the three help centers
   --------------------------------------------------------------------------
   The palette, type, spacing and every component above are IDENTICAL across
   Platform, Touchpoint and Greet. Accent is Impact Blue on all three.

   Set the logo in Guide admin (Themes -> Customize -> Settings -> Logo):

     Platform    assets/certain-platform-logo-reverse-white.svg
     Touchpoint  assets/certain-touchpoint-logo-reverse-white.svg
     Greet       assets/certain-greet-logo-reverse-color.png

   Reverse variants ONLY on the navy header. The -color lockups put a navy
   wordmark on a navy bar and it vanishes; Greet's teal glyph is 1.89:1 on
   white and must never sit on a light surface.

   If a brand ever needs its own accent, override ONE line in that brand's
   theme rather than forking this file:

     Greet green-accent variant:
       :root { --c-teal: #2fb36d; --c-teal-text: #1C7A4A;
               --c-teal-tint: rgba(47,179,109,.12);
               --c-teal-tint-hover: rgba(47,179,109,.08); }

   Not currently applied — all three brands run Impact Blue as of 2026-08-31.
   ========================================================================== */

/* Logo sizing is shared. Copenhagen writes the logo as an <img> in .logo. */
.logo img,
.header .logo img {
  height: 34px;
  width: auto;
  max-width: 260px;
  display: block;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: rgba(255, 255, 255, 1);
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  color: #0D2958;
}

h4 {
  font-size: 16px;
}

a {
  color: rgba(24, 109, 242, 1);
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

input {
  font-weight: 300;
  max-width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border .12s ease-in-out;
}

input:focus {
  border: 1px solid rgba(24, 109, 242, 1);
}

input[disabled] {
  background-color: #ddd;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(/hc/theming_assets/01HZPGPTFRVSQVDBZVWNNRH5F9) no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid rgba(24, 109, 242, 1);
}

select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #ddd;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}

textarea:focus {
  border: 1px solid rgba(24, 109, 242, 1);
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  text-align: initial;
}

.dropdown-toggle:focus {
  outline: 0;
  text-decoration: underline;
}

.dropdown-toggle::after {
  color: inherit;
}

/***** Buttons *****/
.button, [role="button"] {
  border: 1px solid rgba(24, 109, 242, 1);
  border-radius: 4px;
  color: rgba(24, 109, 242, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

@media (min-width: 768px) {
  .button, [role="button"] {
    width: auto;
  }
}

.button::after, [role="button"]::after {
  color: rgba(24, 109, 242, 1);
}

.button:hover, .button:active, .button:focus, .button[aria-selected="true"], [role="button"]:hover, [role="button"]:active, [role="button"]:focus, [role="button"][aria-selected="true"] {
  background-color: rgba(24, 109, 242, 1);
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
}

.button[aria-selected="true"]:hover, .button[aria-selected="true"]:focus, .button[aria-selected="true"]:active, [role="button"][aria-selected="true"]:hover, [role="button"][aria-selected="true"]:focus, [role="button"][aria-selected="true"]:active {
  background-color: #09429b;
  border-color: #09429b;
}

.button[data-disabled], [role="button"][data-disabled] {
  cursor: default;
}

.button-large, input[type="submit"] {
  background-color: rgba(24, 109, 242, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}

.button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  background-color: #09429b;
}

.button-large[disabled], input[type="submit"][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #666;
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #333333;
  border: 1px solid #ddd;
  background-color: #f7f7f7;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: #666;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}

[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
}

@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

.form-field input:focus {
  border: 1px solid rgba(24, 109, 242, 1);
}

.form-field input[type="text"] {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-field input[type="text"]:focus {
  border: 1px solid rgba(24, 109, 242, 1);
}

.form-field input[type="checkbox"] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}

.form-field .nesty-input:focus {
  border: 1px solid rgba(24, 109, 242, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(24, 109, 242, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type="checkbox"] + label {
  margin: 0 0 0 10px;
}

.form-field.required > label::after {
  content: "*";
  color: #f00;
  margin-left: 2px;
}

.form-field .optional {
  color: #666;
  margin-left: 4px;
}

.form-field p {
  color: #666;
  font-size: 12px;
  margin: 5px 0;
}

[data-loading="true"] input,
[data-loading="true"] textarea {
  background: transparent url(/hc/theming_assets/01HZPGPTMR61GBJ9Z21RQHWM4B) 99% 50% no-repeat;
  background-size: 16px 16px;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #666;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li a:visited {
  color: #09429b;
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
  background-color: transparent;
}

@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 37px;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

.user-nav[aria-expanded="true"] {
  background-color: transparent;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}

.nav-wrapper a {
  border: 0;
  color: rgba(24, 109, 242, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper a {
    display: inline-block;
  }
}

[dir="rtl"] .nav-wrapper a {
  padding: 0 0 0 20px;
}

.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  background-color: transparent;
  color: rgba(24, 109, 242, 1);
  text-decoration: underline;
}

.nav-wrapper a.login {
  display: inline-block;
}

.nav-wrapper .icon-menu {
  border: 0;
  color: rgba(24, 109, 242, 1);
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper .icon-menu {
    display: none;
  }
}

[dir="rtl"] .nav-wrapper .icon-menu {
  margin-left: 10px;
  margin-right: 0;
}

.nav-wrapper .icon-menu:hover, .nav-wrapper .icon-menu:focus, .nav-wrapper .icon-menu:active {
  background-color: transparent;
  color: rgba(24, 109, 242, 1);
}

h1#support-center {
  color: #FFFFFF;
  font-size: 50px;
  font-weight: 450;
  margin-bottom: 15px;
}

p#new-request {
  color: #FFFFFF;
  border: 0.5px solid #FFFFFF;
  border-radius: 4px;
  padding: 2px 5px 2px 5px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  opacity: 85%;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}

.user-info .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}

.user-info > [role="button"] {
  border: 0;
  color: #FFFFFF;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > [role="button"]:hover, .user-info > [role="button"]:focus {
  color: #FFFFFF;
  background-color: transparent;
}

.user-info > [role="button"]::after {
  color: #FFFFFF;
  padding-right: 15px;
}

[dir="rtl"] .user-info > [role="button"]::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}

#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}

.avatar img {
  height: 40px;
  width: 40px;
}

.avatar .icon-agent::before {
  background-color: rgba(24, 109, 242, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  color: rgba(51, 51, 51, 1);
  content: "\1F464";
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 14px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}

.footer a {
  color: #666;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}

@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}

.footer-language-selector {
  color: #666;
  display: inline-block;
  font-weight: 300;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
}

@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}

.breadcrumbs li {
  color: #666;
  display: inline;
  font-weight: 300;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}

.breadcrumbs li a:visited {
  color: rgba(24, 109, 242, 1);
}

/***** Search field *****/
.search {
  position: relative;
}

.search input[type="search"] {
  border: 1px solid #D3D3D3;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #D3D3D3 inset;
  box-sizing: border-box;
  color: #999;
  height: 50px;
  padding-left: 20px;
  padding-right: 40px;
  -webkit-appearance: none;
  width: 90%;
}

[dir="rtl"] .search input[type="search"] {
  padding-right: 40px;
  padding-left: 20px;
}

.search input[type="search"]:focus {
  border: 1px solid $brand-color;
  color: #555;
}

.search::before {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  color: #777;
  content: "\1F50D";
  font-size: 18px;
  position: absolute;
  right: 40px;
}

[dir="rtl"] .search::before {
  right: 15px;
  left: auto;
}

.search-full input[type="search"] {
  border: 1px solid #fff;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01HZPGPX79TEWBGVZZ0V4ZJF77);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    margin: 0;
  }
}

.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}

.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}

.page-header-description {
  font-style: italic;
  font-weight: 300;
  margin: 0 0 30px 0;
  word-break: break-word;
}

@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}

.page-header .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
  min-height: 50px;
  padding-bottom: 15px;
}

@media (min-width: 768px) {
  .sub-nav {
    align-items: baseline;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .sub-nav input[type="search"] {
    min-width: 300px;
  }
}

.sub-nav input[type="search"]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}

@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}

.blocks-item {
  border: 1px solid rgba(24, 109, 242, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(24, 109, 242, 1);
  display: flex;
  flex: 1 0 340px;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  margin-right: 30px;
}

@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #D6E8F5;
}

img#img-bottom-user-guides {
  display: inline;
}

img#img-top-user-guides {
  display: none;
}

img#img-bottom-academy {
  display: inline;
}

img#img-top-academy {
  display: none;
}

img#img-bottom-dev {
  display: inline;
}

img#img-top-dev {
  display: none;
}

img#img-bottom-knowledgebase {
  display: inline;
}

img#img-top-knowledgebase {
  display: none;
}

img#img-bottom-tp {
  display: inline;
}

img#img-top-tp {
  display: none;
}

img#img-bottom-arrive {
  display: inline;
}

img#img-top-arrive {
  display: none;
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
}

.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}

.blocks-item-internal .icon-lock::before {
  content: "\1F512";
  font-size: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: #333333;
}

.blocks-item-link {
  color: rgba(24, 109, 242, 1);
  padding: 20px 30px;
}

.blocks-item-link:hover, .blocks-item-link:focus, .blocks-item-link:active {
  text-decoration: none;
}

.blocks-item-title {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 500;
  color: #0D2958;
}

.blocks-item-description {
  margin-top: 0px;
  color: #989898;
  font-weight: 400;
}

.blocks-item-description:not(:empty) {
  margin-top: 0px;
  color: #989898;
  font-weight: 400;
}

td.center {
  text-align: center;
  width: 15%;
  height: 40px;
}

td.center:hover {
  cursor: pointer;
}

a.kbtext {
  color: #26375c;
  font-weight: 475;
  text-decoration: none;
}
/***** Homepage *****/
.section {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.promoted-articles-flex {
  flex: 50%;
}

.community-flex {
  flex: 50%;
}

@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}

.promoted-articles-item {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  margin-right: 30px;
}

@media (min-width: 1224px) {
  .promoted-articles-item {
    align-self: flex-end;
    margin-right: 30px;
    width: 100%;
    /* Three columns on desktop */
  }
  [dir="rtl"] .promoted-articles-item {
    margin: 0 0 0 30px;
  }
}

.promoted-articles-item a {
  color: #333333;
}

.promoted-articles-item .icon-lock::before {
  vertical-align: baseline;
}

.promoted-articles-item:last-child {
  border: 0;
}

@media (min-width: 1024px) {
  .promoted-articles-item:last-child {
    border-bottom: 1px solid #ddd;
  }
}

section#promoted-articles {
  float: left;
  position: relative;
}

.home-page-subheader {
  color: #A9A9A9;
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 20px;
  text-align: left;
}

.home-page-border {
  border-bottom: 1px solid #ddd;
  margin-right: 30px;
  margin-bottom: 0px;
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}

.community-image {
  min-height: 300px;
  background-image: url(/hc/theming_assets/01HZPGPXMM9K6Z4N21D8FZGYWF);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

section#community-box {
  float: right;
}

div#community-box {
  border-radius: 15px;
  float: right;
  width: 390px;
  height: 375px;
  background: #F8F8F8;
}

.community-box-header {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 550;
  font-size: 22px;
  text-align: center;
  color: #0D2958;
  padding-top: 10px;
  padding-bottom: 30px;
}

.community-box-description {
  font-family: $text-font;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #0D2958; 
  padding-left: 30px;
  padding-right: 30px;
}

.community-box-link {
  text-align: center;
}
/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}

.recent-activity-list {
  padding: 0;
}

.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}

.recent-activity-item-parent {
  font-size: 16px;
}

.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  color: #333333;
  display: inline-block;
  width: 100%;
}

@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}

.recent-activity-item-link {
  font-size: 14px;
  font-weight: 300;
}

.recent-activity-item-meta {
  margin: 15px 0 0 0;
  float: none;
}

@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir="rtl"] .recent-activity-item-meta {
    float: left;
  }
}

.recent-activity-item-time, .recent-activity-item-comment {
  color: #666;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
}

.recent-activity-item-comment {
  padding-left: 5px;
}

[dir="rtl"] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}

.recent-activity-item-comment::before {
  display: inline-block;
}

.recent-activity-item-comment span::before {
  color: rgba(24, 109, 242, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 15px;
  padding-right: 3px;
  vertical-align: middle;
}

[dir="rtl"] .recent-activity-item-comment span::before {
  padding-left: 3px;
}

.recent-activity-controls {
  padding-top: 15px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}

.category-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}

.section-tree .section {
  flex: initial;
}

@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%;
    /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}

.section-tree-title {
  margin-bottom: 0;
}

.section-tree-title a {
  color: #333333;
}

.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}

.article-list-item a {
  color: #333333;
}

.article-list-item .icon-lock::before {
  vertical-align: baseline;
}

.icon-star::before {
  color: rgba(24, 109, 242, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}

.section-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}

.section-subscribe .dropdown-toggle::after {
  display: none;
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}

.article-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}

.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}

.article-avatar {
  margin-right: 10px;
}

.article-author {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}

.article-title .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.article [role="button"] {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}

@media (min-width: 768px) {
  .article [role="button"] {
    width: auto;
  }
}

.article-info {
  max-width: 100%;
}

.article-meta {
  display: inline-block;
  vertical-align: middle;
}

.article-body img {
  height: auto;
  max-width: 100%;
}

.article-body ul, .article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol, .article-body li > ul, .article-body li > ol {
  margin: 0;
}

.article-body ul {
  list-style-type: disc;
}

.article-body a:visited {
  color: #09429b;
}

.article-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.article-body > p:last-child {
  margin-bottom: 0;
}

.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}

.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.article-comment-count {
  color: #666;
  font-weight: 300;
}

.article-comment-count:hover {
  text-decoration: none;
}

.article-comment-count .icon-comments {
  color: rgba(24, 109, 242, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
  }
}

.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}

.article-relatives > * {
  flex: 1 0 auto;
  margin-right: 0;
}

.article-relatives > *:last-child {
  margin: 0;
}

@media (min-width: 768px) {
  .article-relatives > * {
    margin-right: 20px;
  }
}

.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}

.article-vote {
  background: transparent;
  border: 1px solid rgba(24, 109, 242, 1);
  color: rgba(24, 109, 242, 1);
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

.article-vote::before {
  font-size: 8px;
  margin-right: 10px;
}

[dir="rtl"] .article-vote::before {
  margin-right: 0;
  margin-left: 10px;
}

.article-vote::after {
  content: attr(title);
  /* Yes/No label*/
}

.article-vote:focus, .article-vote:active {
  background-color: transparent;
  color: rgba(24, 109, 242, 1);
}

.article-vote:hover {
  background-color: rgba(24, 109, 242, 1);
}

.article-vote:hover::before, .article-vote:hover::after, .article-vote[aria-selected="true"]::before, .article-vote[aria-selected="true"]::after {
  color: rgba(51, 51, 51, 1);
}

.article-vote-up::before {
  content: "\2713";
}

.article-vote-down::before {
  content: "\2715";
}

.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}

.article-return-to-top {
  border-top: 1px solid #ddd;
}

@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}

.article-return-to-top a {
  color: #333333;
  display: block;
  padding: 20px 0;
}

.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}

.article-return-to-top .icon-arrow-up::before {
  font-size: 16px;
  margin-left: 5px;
}

[dir="rtl"] .article-return-to-top .icon-arrow-up::before {
  margin-right: 10px;
}

.article-unsubscribe {
  background-color: rgba(24, 109, 242, 1);
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
}

.article-unsubscribe:hover {
  background-color: #09429b;
  border-color: #09429b;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
}

.sidenav-item {
  border-radius: 4px;
  color: #333333;
  display: block;
  font-weight: 300;
  margin-bottom: 10px;
  padding: 10px;
}

.sidenav-item.current-article, .sidenav-item:hover {
  background-color: rgba(24, 109, 242, 1);
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
}

.recent-articles h3,
.related-articles h3 {
  font-size: 15px;
  margin: 20px 0;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item::before {
  color: #333333;
  content: "\1F4CE";
  font-size: 15px;
  left: 0;
  position: absolute;
  top: 5px;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .attachments .attachment-item::before {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #666;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share a {
  border-radius: 50%;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  width: 25px;
}

.share a::before {
  color: #666;
  display: block;
  font-size: 23px;
  text-align: center;
  width: 100%;
}

.share a:hover {
  text-decoration: none;
}

.share a:hover::before {
  color: rgba(24, 109, 242, 1);
}

.share-twitter::before {
  content: "\e901";
}

.share-facebook::before {
  content: "\e903";
}

.share-linkedin::before {
  content: "\e900";
}

.share-googleplus::before {
  content: "\e902";
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.comment-heading {
  margin-bottom: 5px;
  margin-top: 0;
}

.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}

.comment-overview p {
  margin-top: 0;
}

.comment-callout {
  color: #666;
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(24, 109, 242, 1);
}

.comment-sorter {
  display: inline-block;
  float: right;
}

.comment-sorter .dropdown-toggle {
  color: #666;
  font-weight: 300;
  font-size: 13px;
}

[dir="rtl"] .comment-sorter {
  float: left;
}

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid rgba(24, 109, 242, 1);
  padding: 40px 20px 20px;
}

@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}

.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}

.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}

.comment-avatar {
  margin-right: 10px;
}

[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.comment-meta {
  flex: 1 0 auto;
}

.comment-labels {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}

.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}

.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}

.comment-container {
  width: 100%;
}

.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}

@media (min-width: 768px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}

.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}

@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}

.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}

.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}

.comment-ccs {
  display: none;
}

.comment-ccs + textarea {
  margin-top: 10px;
}

.comment-attachments {
  margin-top: 10px;
}

.comment-attachments a {
  color: rgba(24, 109, 242, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.comment-body img {
  height: auto;
  max-width: 100%;
}

.comment-body ul, .comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .comment-body ul, [dir="rtl"] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.comment-body ul > ul, .comment-body ol > ol, .comment-body ol > ul, .comment-body ul > ol, .comment-body li > ul, .comment-body li > ol {
  margin: 0;
}

.comment-body ul {
  list-style-type: disc;
}

.comment-body a:visited {
  color: #09429b;
}

.comment-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: inline-block;
  text-align: center;
  width: 35px;
}

.vote a {
  outline: none;
}

.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #666;
  display: block;
  margin: 3px 0;
}

[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up:hover::before,
.vote-down:hover::before {
  color: rgba(24, 109, 242, 1);
}

.vote-up::before, .vote-down::before {
  color: #666;
  font-size: 24px;
}

.vote-up::before {
  content: "\2B06";
}

.vote-down::before {
  content: "\2B07";
}

.vote-voted::before {
  color: rgba(24, 109, 242, 1);
}

.vote-voted:hover::before {
  color: #09429b;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari*/
}

.actions .dropdown-toggle {
  font-size: 0;
  margin: 15px 0;
}

.actions .dropdown-toggle:hover::before, .actions .dropdown-toggle:focus::before, .actions .dropdown-toggle:active::before {
  background-color: #f7f7f7;
}

.actions .dropdown-toggle::before {
  background-color: transparent;
  border-radius: 50%;
  color: #666;
  content: "\2699";
  display: block;
  font-size: 13px;
  margin: auto;
  padding: 5px;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01HZPGPXENS8WF6WKTB7RQGPPZ);
  margin-bottom: 10px;
}

.community-footer {
  padding-top: 50px;
  text-align: center;
}

.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}

.community-header {
  margin-bottom: 30px;
}

.community-header h4 {
  margin-bottom: 0;
}

.post-to-community {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}

.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow .dropdown {
  width: 100%;
}

.community-follow [role="button"] {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow [role="button"] {
    width: auto;
  }
}

.community-follow [role="button"]:hover {
  background-color: rgba(24, 109, 242, 1);
}

.community-follow [role="button"]:hover::after, .community-follow [role="button"]:focus::after {
  border-color: rgba(51, 51, 51, 1);
  color: rgba(51, 51, 51, 1);
}

.community-follow [role="button"][aria-selected="true"] {
  background-color: rgba(24, 109, 242, 1);
  color: rgba(51, 51, 51, 1);
}

.community-follow [role="button"][aria-selected="true"]::after {
  border-left: 1px solid rgba(51, 51, 51, 1);
  color: rgba(51, 51, 51, 1);
}

.community-follow [role="button"][aria-selected="true"]:hover {
  background-color: #09429b;
  border-color: #09429b;
}

.community-follow [role="button"]::after {
  border-left: 1px solid rgba(24, 109, 242, 1);
  content: attr(data-follower-count);
  color: rgba(24, 109, 242, 1);
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

@media (min-width: 768px) {
  .community-follow [role="button"]::after {
    position: static;
  }
}

[dir="rtl"] .community-follow [role="button"]::after {
  border-left: 0;
  border-right: 1px solid rgba(24, 109, 242, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}

.striped-list-info {
  flex: 2;
}

.striped-list-title {
  color: rgba(24, 109, 242, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}

.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}

.striped-list-title:visited {
  color: #09429b;
}

.striped-list .meta-group {
  margin: 5px 0;
}

.striped-list-count {
  color: #666;
  font-weight: 300;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}

@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}

.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}

@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}

.striped-list-count-item:last-child::after {
  display: none;
}

.striped-list-number {
  font-weight: 300;
  text-align: center;
}

@media (min-width: 768px) {
  .striped-list-number {
    color: #333333;
    display: block;
    font-weight: 400;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #1eb848;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}

.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(24, 109, 242, 1);
}

.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}

[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}

.status-label-pending, .status-label-not-planned {
  background-color: #eee;
  color: #666;
}

.status-label-pending {
  text-align: center;
}

.status-label-open {
  background-color: #cc3340;
}

.status-label-closed {
  background-color: #ddd;
}

.status-label-solved {
  background-color: #999;
}

.status-label-new {
  background-color: #ffd12a;
}

.status-label-hold {
  background-color: #000;
}

.status-label-open, .status-label-closed, .status-label-solved, .status-label-new, .status-label-hold, .status-label-answered {
  text-transform: lowercase;
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}

.post-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}

.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}

.post-header .status-label {
  vertical-align: super;
}

.post-title {
  margin-bottom: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}

.post-title h1 {
  display: inline;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}

.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.post-avatar {
  margin-bottom: 30px;
}

.post-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}

.post-info-container {
  display: flex;
  margin-bottom: 40px;
}

.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .post-info {
  padding-right: 0;
  padding-left: 20px;
}

.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}

[dir="rtl"] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}

.post-body img {
  height: auto;
  max-width: 100%;
}

.post-body ul, .post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .post-body ul, [dir="rtl"] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.post-body ul > ul, .post-body ol > ol, .post-body ol > ul, .post-body ul > ol, .post-body li > ul, .post-body li > ol {
  margin: 0;
}

.post-body ul {
  list-style-type: disc;
}

.post-body a:visited {
  color: #09429b;
}

.post-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.post-comment-count {
  color: #666;
  font-weight: 300;
}

.post-comment-count:hover {
  text-decoration: none;
}

.post-comment-count .icon-comments {
  color: rgba(24, 109, 242, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}

.post-sidebar h5 {
  font-weight: 600;
}

@media (min-width: 1024px) {
  .post-sidebar h5 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
}

.post-comments {
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex-direction: column;
  max-height: 45px;
  overflow: hidden;
  font-size: 14px;
}

@media (min-width: 768px) {
  .collapsible-nav {
    border: 0;
    height: auto;
    flex-direction: row;
    max-height: none;
  }
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}

.collapsible-nav-list li {
  color: #333333;
  line-height: 45px;
  order: 1;
}

@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}

.collapsible-nav-list li a {
  color: #333333;
  display: block;
}

@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}

.collapsible-nav-list li[aria-selected="true"] {
  order: 0;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    border-bottom: 4px solid rgba(24, 109, 242, 1);
    order: 1;
    padding: 15px 0 11px 0;
  }
}

.collapsible-nav-list li[aria-selected="true"] a {
  color: #333333;
}

.collapsible-nav-list li[aria-selected="true"]::after {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  content: "\25BE";
  position: absolute;
  right: 0;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"]::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-list li[aria-selected="true"]::after {
  left: 0;
  right: auto;
}

.collapsible-nav[aria-expanded="true"] {
  max-height: none;
}

.collapsible-nav[aria-expanded="true"] li[aria-selected="true"]::after {
  content: "\2715";
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
  content: "\2715";
}

@media (min-width: 1024px) {
  .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
    display: none;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-title::after {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  content: "\25BE";
  position: absolute;
  right: 10px;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-title::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-title::after {
  left: 10px;
  right: auto;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  border: 0;
  margin-bottom: 20px;
}

.my-activities-sub-nav {
  background-color: transparent;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .my-activities-sub-nav li:hover {
    border-bottom: 4px solid #ddd;
  }
}

.my-activities-sub-nav li[aria-selected="true"] {
  border-color: rgba(24, 109, 242, 1);
}

.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}

@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.my-activities-table thead {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}

.my-activities-table td:not(:first-child) {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}

.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

.requests-table-toolbar .organization-subscribe,
.requests-table-toolbar .organization-unsubscribe {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe,
  .requests-table-toolbar .organization-unsubscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe, [dir="rtl"]
  .requests-table-toolbar .organization-unsubscribe {
    margin: 0 10px 0 0;
  }
}

.requests-table-toolbar .organization-unsubscribe {
  background-color: rgba(24, 109, 242, 1);
  color: rgba(51, 51, 51, 1);
}

.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}

.requests-table-toolbar + .requests {
  margin-top: 40px;
}

.requests .requests-table-meta {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}

@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
.subscriptions-unsubscribe a {
  background: rgba(24, 109, 242, 1);
  border-radius: 4px;
  color: rgba(51, 51, 51, 1);
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .subscriptions-unsubscribe a {
    width: auto;
  }
}

.subscriptions-unsubscribe a:hover {
  background-color: #09429b;
  text-decoration: none;
}

.subscriptions-table td:last-child {
  display: block;
}

@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}

.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}

.subscriptions-table .user-avatar {
  margin-right: 10px;
}

.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #666;
  font-size: 13px;
  font-weight: 300;
}

@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #666;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}

.request-container .comment-container {
  min-width: 0;
}

.request-breadcrumbs {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #666;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}

.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid rgba(24, 109, 242, 1);
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(24, 109, 242, 1);
}

.request-main input#mark_as_solved {
  display: none;
}

.request-title {
  width: 100%;
}

@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}

.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

.request-sidebar h5 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h5 {
    display: none;
  }
}

.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}

.request-details:last-child {
  border: 0;
}

.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}

.request-details dd {
  padding: 0 10px;
  width: 60%;
}

.request-details dd::after {
  content: "\A";
  white-space: pre;
}

.request-details dt {
  color: #666;
  font-weight: 300;
  width: 40%;
}

.request-details .request-collaborators {
  display: inline-block;
}

.request-attachments dt, .request-attachments dd {
  width: 100%;
}

.request-attachments dd {
  margin: 10px 0 0 0;
}

.request-form textarea {
  min-height: 120px;
}

.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination * {
  display: inline-block;
}

.pagination li {
  border-radius: 50%;
  height: 40px;
  float: left;
  margin-left: 5px;
  width: 40px;
}

@media (min-width: 768px) {
  .pagination li {
    height: 30px;
    width: 30px;
  }
}

[dir="rtl"] .pagination li {
  float: right;
}

.pagination li:hover:not(.pagination-current) {
  background-color: #f3f3f3;
}

.pagination li:hover:not(.pagination-current) span, .pagination li:hover:not(.pagination-current) a {
  color: #333333;
  text-decoration: none;
}

.pagination a, .pagination span {
  font-size: 15px;
  color: #666;
  padding: 10px 12px;
}

@media (min-width: 768px) {
  .pagination a, .pagination span {
    font-size: 13px;
    padding: 5px 12px;
  }
}

.pagination-current {
  background-color: rgba(24, 109, 242, 1);
}

.pagination-current a, .pagination-current span {
  color: rgba(51, 51, 51, 1);
}

.pagination-first {
  border-radius: 3px 0 0 3px;
}

[dir="rtl"] .pagination-first {
  border-radius: 0 3px 3px 0;
}

.pagination-last {
  border-radius: 0 3px 3px 0;
}

[dir="rtl"] .pagination-last {
  border-radius: 3px 0 0 3px;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #666;
  font-size: 13px;
  font-weight: 300;
}

.meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}

/***** Icons *****/
[class^="icon-"]::before,
[class*=" icon-"]::before,
.icon,
.search::before,
.recent-activity-item-comment span::before,
.article-vote::before,
.attachments .attachment-item::before,
.share a::before,
.vote-up::before,
.vote-down::before,
.actions .dropdown-toggle::before,
.collapsible-nav-list li[aria-selected="true"]::after,
.collapsible-sidebar-title::after,
.search-result-votes::before,
.search-result-meta-count::before {
  font-family: "copenhagen-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1em;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

.icon-lock::before {
  content: "\1F512";
}

.icon-star::before {
  content: "\2605";
}

.icon-linkedin::before {
  content: "\e900";
}

.icon-twitter::before {
  content: "\e901";
}

.icon-googleplus-::before {
  content: "\e902";
}

.icon-facebook::before {
  content: "\e903";
}

.icon-agent::before {
  content: "\1F464";
}

.icon-close::before {
  content: "\2715";
}

.icon-arrow-up::before {
  content: "\2B06";
}

.icon-arrow-down::before {
  content: "\2B07";
}

.icon-attachments::before {
  content: "\1F4CE";
}

.icon-comments::before {
  content: "\1F4AC";
}

.icon-search::before {
  content: "\1F50D";
}

.icon-vote::before {
  content: "\1F44D";
}

.icon-handle::before {
  content: "\25BE";
}

.icon-check::before {
  content: "\2713";
}

.icon-gear::before {
  content: "\2699";
}

.icon-menu::before {
  content: "\2630";
}

.icon-article::before {
  content: "\1F4C4";
}

.icon-post::before {
  content: "\1F4D4";
}

.icon-notification-alert::before {
  content: "\26A0";
}

.icon-notification-error::before {
  content: "\00D7";
}

.icon-notification-info::before {
  content: "\2139";
}

.icon-notification-success::before {
  content: "\2714";
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #f7f7f7;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}

[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 65px;
  height: 65px;
}

.profile-avatar .icon-agent::before {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.profile-header .basic-info .name {
  margin: 0;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir="rtl"] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir="rtl"] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.profile-header .options [data-action="edit-profile"] {
  background-color: rgba(24, 109, 242, 1);
  border: 0;
  color: rgba(51, 51, 51, 1);
  line-height: normal;
  padding: 8px 20px;
  outline-color: rgba(24, 109, 242, 1);
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #666;
  font-weight: 300;
  flex: 0 0 100px;
  margin-right: 10px;
}

[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}

@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}

@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(24, 109, 242, 1);
  border-radius: 4px;
  color: rgba(24, 109, 242, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

.profile-private-badge::after {
  content: "\1f512";
  margin-left: 5px;
  font-family: "copenhagen-icons";
  vertical-align: middle;
  line-height: 15px;
}

@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #f2f2f2;
  border: 0;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #666;
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}

.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}

.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}

[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}

@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}

@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}

@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-list > .profile-contribution::before {
  left: 0;
  position: absolute;
  font-size: 16px;
  color: #ccc;
  font-family: "copenhagen-icons";
  line-height: 25px;
}

[dir="rtl"] .profile-contribution-list > .profile-contribution::before {
  right: 0;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}

[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}

[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.profile-section .private-activity::before {
  content: "\1f512";
  font-family: "copenhagen-icons";
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
  margin-right: 10px;
}

[dir="rtl"] .profile-section .private-activity::before {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir="rtl"] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir="rtl"] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}

@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}

[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}

@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity::before {
  position: absolute;
  left: 0;
  width: 28px;
  border-radius: 50%;
  content: "";
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 1);
  background-position: 50% 50%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #ccc;
  font-family: "copenhagen-icons";
}

[dir="rtl"] .profile-activity::before {
  right: 0;
}

@media (min-width: 768px) {
  .profile-activity::before {
    left: -14px;
  }
  [dir="rtl"] .profile-activity::before {
    right: -14px;
  }
}

.profile-articles > .profile-contribution::before,
.profile-activity-list > li[class$="-article"]::before {
  content: "\1f4c4";
}

.profile-posts > .profile-contribution::before,
.profile-activity-list > li[class$="-post"]::before {
  content: "\1f4d4";
}

.profile-comments > .profile-contribution::before,
.profile-activity-list > li[class$="-comment"]::before {
  content: "\1f4ac";
  line-height: 35px;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 45%;
  }
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-result-description {
  margin-top: 15px;
}

.search-result-votes, .search-result-meta-count {
  color: #666;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
  color: rgba(24, 109, 242, 1);
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result-votes::before {
  content: "\1F44D";
}

.search-result-meta-count::before {
  content: "\1F4AC";
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

.search-result-breadcrumbs li:last-child::after {
  content: "·";
  display: inline-block;
  margin: 0 5px;
}


.promoted-community-flex {
  display: flex;
}
/* ==========================================================================
   CERTAIN HELP CENTER — NEW STYLING   [ BLOCK B of 2 ]
   --------------------------------------------------------------------------
   PASTE at the VERY BOTTOM of style.css, after the final existing rule
   (`.promoted-community-flex { display: flex; }`).

   Requires BLOCK A at the top of the file.

   This block must be LAST. It layers on top of both Copenhagen and the
   theme's own 2020 customizations, and it is written assuming those rules
   still exist above it. Do not delete or reorder anything above.

   Two parts:
     PART 1  shared theme        identical on Platform / Touchpoint / Greet
     PART 2  Platform bridge     the hand-coded home page, plus a
                                 reconciliation layer (section 10) for the
                                 2020 rules that fight PART 1

   Date: 2026-08-31
   ========================================================================== */


/* ##########################################################################
   PART 1 of 2 — SHARED THEME
   ########################################################################## */

/* ==========================================================================
   CERTAIN HELP CENTER — THEME OVERRIDES
   --------------------------------------------------------------------------
   Additive overrides for Zendesk Guide, Copenhagen v4.49.
   APPEND this file to the BOTTOM of style.css. Do not trim Copenhagen's own
   rules — they are ~88% of the file and style a dozen templates that are easy
   to forget (request list, my activities, profile, service catalog, search
   results, mobile nav). They gzip to ~22 KB. Leave them alone.

   Requires certain-hc-tokens.css pasted at the TOP of style.css.
   Requires the fonts + Lucide lines from document_head_snippet.hbs.

   Brands: Platform / Touchpoint / Greet. Identical CSS, logo differs.
   Date:   2026-08-31        Owner: Jeff Yarnell, Sr. Support Engineer

   READ THE TRAPS. Sections marked [TRAP n] were each found the hard way in a
   live theme. Re-introducing one costs an afternoon. See README_Install.md.
   ========================================================================== */


/* ==========================================================================
   1. FOUNDATION
   ========================================================================== */

body {
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  line-height: var(--c-lh-body);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--c-font-head);
  color: var(--c-navy);
  line-height: var(--c-lh-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--c-fs-h1); font-weight: 800; }
h2 { font-size: var(--c-fs-h2); font-weight: 800; }
h3 { font-size: var(--c-fs-h3); font-weight: 700; }
h4 { font-size: var(--c-fs-h4); font-weight: 700; }

a { color: var(--c-link); text-decoration: none; }
a:hover, a:focus { color: var(--c-link-hover); text-decoration: underline; }

/* Visible focus everywhere. Copenhagen's default outline is inconsistent and
   several components suppress it entirely. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
  border-radius: var(--c-radius-sm);
}

/* certain-brand: minimum 14px on native-size assets, no exceptions.
   Copenhagen drops several elements to 11-13px. */
.meta-data,
.meta-data li,
.article-meta,
.comment-meta,
.form-field .hint,
.searchbox-suggestions li,
.breadcrumbs,
.breadcrumbs li,
.powered-by-zendesk,
.footer-inner,
.share-label {
  font-size: var(--c-fs-label) !important;
}

/* Nothing on the page may cause a horizontal scrollbar. Verified from 320px. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, iframe, video, table { max-width: 100%; }
img { height: auto; }


/* ==========================================================================
   2. HEADER  [TRAP 1]
   --------------------------------------------------------------------------
   Copenhagen makes .header ITSELF the centered container: it is a direct
   child of <body> with max-width:1160px and auto margins. A background on it
   therefore CANNOT reach the viewport edges, unlike .hero and .footer which
   carry no cap. Releasing the cap and moving the centering into padding gives
   a full-bleed bar with content still on the 1160px column.
   ========================================================================== */

.header {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline: max(var(--c-gutter), calc((100% - var(--c-col)) / 2));
  background: var(--c-navy-deep);
  border-bottom: 1px solid var(--c-navy-deeper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-sp-4);
  min-height: 68px;
}

.header a,
.header .nav-wrapper a,
.header .user-nav a {
  color: var(--c-text-on-navy);
  font-size: var(--c-fs-label);
  font-weight: 500;
}
/* SPECIFICITY: the base rule above lists `.header .nav-wrapper a` and
   `.header .user-nav a` at 0-2-1, which outscore a plain `.header a:hover`
   at 0-1-1 — the hover would never fire. The hover selectors are repeated at
   matching specificity. Same reason `.submit-a-request` is excluded: it is an
   accent CTA with its own hover, and a teal-on-teal hover is invisible. */
.header a:hover,
.header a:focus,
.header .nav-wrapper a:hover,
.header .nav-wrapper a:focus,
.header .user-nav a:hover,
.header .user-nav a:focus {
  color: var(--c-teal);
  text-decoration: none;
}
.header .nav-wrapper a.submit-a-request:hover,
.header .nav-wrapper a.submit-a-request:focus { color: var(--c-navy); }

/* [TRAP 3] The signed-in user's NAME is rendered by Copenhagen through the
   user-nav dropdown TOGGLE, which inherits the theme LINK color — #0846AA on
   a #072140 bar, i.e. invisible. A generic `.header a` rule does not reach
   it. These selectors do. Do not delete them. */
.user-info .dropdown-toggle,
.user-info .dropdown-toggle:hover,
.user-info .dropdown-toggle:focus,
.nav-wrapper .dropdown-toggle,
.user-nav .dropdown-toggle {
  color: var(--c-text-on-navy) !important;
}
.user-info .dropdown-toggle::after { border-top-color: var(--c-text-on-navy); }

/* The dropdown MENU is a light surface — reset link color back inside it. */
.header .dropdown-menu,
.nav-wrapper .dropdown-menu {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: var(--c-sp-2);
}
.header .dropdown-menu a,
.nav-wrapper .dropdown-menu a {
  color: var(--c-text);
  border-radius: var(--c-radius-sm);
  padding: var(--c-sp-2) var(--c-sp-3);
}
.header .dropdown-menu a:hover {
  background: var(--c-mist);
  color: var(--c-navy);
}

/* "Submit a request" in the header = accent CTA, per certain-brand. */
.header .submit-a-request,
.header a.submit-a-request {
  background: var(--c-teal);
  color: var(--c-navy) !important;
  font-weight: 700;
  padding: var(--c-sp-2) var(--c-sp-4);
  border-radius: var(--c-radius-sm);
}
.header .submit-a-request:hover {
  background: var(--c-white);
  color: var(--c-navy) !important;
}


/* ==========================================================================
   3. HERO — flat navy band
   --------------------------------------------------------------------------
   Copenhagen has no "no hero image" option and writes the image as an inline
   background-image on .hero, so it must be overridden with !important.
   certain-brand explicitly sanctions Lanyard Blue for hero PANELS; the rule
   it forbids is navy as a body/content background. This is a panel.
   ========================================================================== */

.hero {
  background-image: none !important;
  background-color: var(--c-navy-deep);
  border-bottom: 1px solid var(--c-navy-deeper);
  padding: var(--c-sp-9) var(--c-gutter);
  min-height: 0;
  height: auto;
  text-align: center;
}

.hero-inner {
  max-width: var(--c-col);
  margin: 0 auto;
  padding: 0;
}

.hero-inner h1,
.hero h1 {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-hero);
  font-weight: 800;
  line-height: var(--c-lh-head);
  color: var(--c-text-on-navy);
  margin: 0 auto var(--c-sp-4);
  max-width: 20ch;
  text-shadow: none;
}

/* The teal rule under the hero heading. Uses ::after on .hero-inner h1 so it
   needs no extra markup — authors and templates stay untouched. */
.hero-inner h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--c-teal);
  border-radius: 2px;
  margin: var(--c-sp-5) auto 0;
}

.hero .page-header p,
.hero-inner > p {
  color: var(--c-text-on-navy-soft);
  font-size: 18px;
  max-width: 60ch;
  margin: 0 auto var(--c-sp-6);
}


/* ==========================================================================
   4. SEARCH  [TRAP 4]
   --------------------------------------------------------------------------
   Double border: form.search carries a 1px border AND a 30px pill radius,
   while the input inside carries 1px and 8px — a rounded rectangle sitting
   ~1px inside a pill. Style ONE of them, not both. Here: strip the wrapper,
   let the input carry the border.
   ========================================================================== */

.hero .search,
form.search,
.search {
  max-width: 620px;
  margin: 0 auto;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.search input[type="search"],
.search input {
  width: 100%;
  height: 54px;
  padding: 0 52px 0 var(--c-sp-5);
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-white);
  border-radius: var(--c-radius-card);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--c-text-faint); }
.search input:focus {
  border-color: var(--c-teal);
  box-shadow: var(--c-focus-ring);
  outline: none;
}

/* Hide Chrome's search-cancel button — the Greet app makes the same call. */
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Copenhagen's magnifier icon button. */
.search .search-icon,
.search button[type="submit"] {
  position: absolute;
  right: var(--c-sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-navy);
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Search inside the page body (search results page) sits on white, so the
   input needs a visible border there. */
main .search input,
.search-results-column .search input {
  border-color: var(--c-border-input);
}

/* Autocomplete panel. */
.searchbox-suggestions,
.search-suggestions {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  margin-top: var(--c-sp-2);
  overflow: hidden;
  text-align: left;
}
.searchbox-suggestions li a { padding: var(--c-sp-3) var(--c-sp-4); display: block; }
.searchbox-suggestions li a:hover { background: var(--c-mist); text-decoration: none; }


/* ==========================================================================
   5. PAGE SHELL
   ========================================================================== */

main,
.container,
.container-divider + main {
  max-width: var(--c-col);
  margin: 0 auto;
  padding-inline: var(--c-gutter);
}

/* Copenhagen draws a stray full-width divider immediately under the hero.
   The hero already has a border-bottom; two lines read as a mistake. */
.container-divider { display: none; }

/* Vertical rhythm — brief item 1. Copenhagen's section spacing is inherited
   and inconsistent; this is the single source of it. */
.section,
.home-section,
.category-content,
.section-tree,
.article-sidebar,
.search-results {
  margin-block: var(--c-sp-8);
}

.page-header {
  margin-bottom: var(--c-sp-6);
  padding-bottom: 0;
  border: none;
}
.page-header h1 { margin: 0 0 var(--c-sp-3); }

/* Alternating sections: White / Mist only. */
.section--alt {
  background: var(--c-mist);
  padding-block: var(--c-sp-8);
  margin-inline: calc(var(--c-gutter) * -1);
  padding-inline: var(--c-gutter);
}


/* ==========================================================================
   6. HOME PAGE — category cards  (brief item 2)
   ========================================================================== */

.blocks-list,
.category-list,
.section-list {
  display: grid;
  /* min(300px, 100%) not a bare 300px. A bare minmax(300px, 1fr) forces a
     300px track even when the container is narrower, which overflows the page
     below a ~340px viewport. The media query at the bottom of this file also
     collapses this to 1fr, but the guard belongs here so the grid can never
     overflow on its own if that breakpoint ever moves. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--c-sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.blocks-item,
.category-list .category-list-item {
  margin: 0;
  border: none;
  background: none;
  height: 100%;
}

.blocks-item-link,
.blocks-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: var(--c-sp-5);
  text-align: left;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}

/* Elevate, not shadow — overlay tint on hover. certain-brand forbids drop
   shadows in UI, and Greet's app ships a zero-alpha shadow scale to enforce
   the same rule. */
/* SPECIFICITY: `.blocks-item.hc-lead .blocks-item-link` further down scores
   0-3-0 and would outscore a plain `.blocks-item-link:hover` at 0-1-0, so the
   lead card would never get its hover. The lead selector is repeated here. */
.blocks-item-link:hover,
.blocks-item a:hover,
.blocks-item.hc-lead .blocks-item-link:hover {
  border-color: var(--c-teal);
  background: linear-gradient(var(--c-elevate-1), var(--c-elevate-1)), var(--c-white);
  text-decoration: none;
}
/* The lead card's resting fill is Mist, so its hover tints Mist, not white. */
.blocks-item.hc-lead .blocks-item-link:hover {
  background: linear-gradient(var(--c-elevate-1), var(--c-elevate-1)), var(--c-mist);
}

/* Copenhagen emits these as <span>, which are inline. Inside a column-flex
   card they happen to stack anyway; inside the row-flex lead card they run
   together on one line. Make them block so the card works either way. */
.blocks-item-title,
.blocks-item-description,
.hc-count {
  display: block;
}

.blocks-item-title,
.blocks-item h4 {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 var(--c-sp-2);
  line-height: var(--c-lh-tight);
}

.blocks-item-description,
.blocks-item p {
  font-size: var(--c-fs-sm);
  line-height: var(--c-lh-body);
  color: var(--c-text-muted);
  margin: 0;
}

/* Icon chip at the top of a category card. Works whether the icon comes from
   an inline Lucide <em data-lucide> or Copenhagen's own svg. */
.blocks-item-link .hc-chip,
.blocks-item-link > svg:first-child {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--c-radius-chip);
  background: var(--c-teal-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--c-sp-4);
}
.blocks-item-link .hc-chip svg { width: 20px; height: 20px; stroke: var(--c-teal-text); }

/* Article count on a card. */
.hc-count {
  margin-top: var(--c-sp-4);
  font-size: var(--c-fs-label);
  font-weight: 600;
  color: var(--c-teal-text);
}

/* "Start here" lead card — spans the full row on wide screens. Add class
   hc-lead in home_page.hbs, or leave it off; the grid works either way. */
.blocks-item.hc-lead { grid-column: 1 / -1; }
.blocks-item.hc-lead .blocks-item-link {
  background: var(--c-mist);
  border-color: var(--c-border);
  flex-direction: row;
  align-items: center;
  gap: var(--c-sp-5);
}
.blocks-item.hc-lead .blocks-item-title { font-size: var(--c-fs-h2); font-weight: 800; }


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.button,
button,
input[type="submit"],
.form-field input[type="submit"],
a.button {
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  font-weight: 600;
  padding: var(--c-sp-3) var(--c-sp-5);
  border-radius: var(--c-radius-sm);
  border: 1px solid var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
  box-shadow: none;
}
/* SPECIFICITY: `a.button` and `a.button-secondary` in the base rules score
   0-1-1 and outscore a plain `.button:hover` at 0-1-0 — so an <a class="button">
   (which is most of them: Follow, Browse all categories, Submit a request)
   would never change on hover. Every hover here carries the `a.` form too. */
.button:hover,
button:hover,
input[type="submit"]:hover,
a.button:hover {
  background: var(--c-navy-hover);
  border-color: var(--c-navy-hover);
  color: var(--c-white);
  text-decoration: none;
}

/* Secondary: white with a navy outline. */
.button-secondary,
.button--secondary,
a.button-secondary {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.button-secondary:hover,
a.button-secondary:hover,
a.button.button-secondary:hover {
  background: var(--c-mist);
  color: var(--c-navy);
  border-color: var(--c-navy);
}

/* Accent CTA: Impact Blue fill, navy text. 7.54:1.

   SPECIFICITY: `a.button` in the primary rule scores 0-1-1 and outscores a
   plain `.hc-cta` at 0-1-0, so an <a class="button hc-cta"> painted itself
   NAVY instead of teal. Caught in the preview 2026-08-31 — the empty-state
   CTA was the wrong colour and looked like a design choice, not a bug. The
   `a.` forms below fix it. */
.button-accent,
.hc-cta,
a.button.button-accent,
a.button.hc-cta,
a.button-accent,
a.hc-cta {
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: var(--c-navy);
  font-weight: 700;
}
.button-accent:hover,
.hc-cta:hover,
a.button.button-accent:hover,
a.button.hc-cta:hover,
a.button-accent:hover,
a.hc-cta:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}


/* ==========================================================================
   8. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  margin: var(--c-sp-6) 0 var(--c-sp-5);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-sp-1) var(--c-sp-2);
  align-items: center;
}
.breadcrumbs li { color: var(--c-text-muted); }
.breadcrumbs li a { color: var(--c-text-muted); font-weight: 500; }
.breadcrumbs li a:hover { color: var(--c-navy); }
.breadcrumbs li:last-child a,
.breadcrumbs li:last-child { color: var(--c-navy); font-weight: 600; }

/* Copenhagen uses a ">" pseudo-element separator; keep it, tone it down. */
.breadcrumbs li + li::before {
  color: var(--c-border-input);
  margin-right: var(--c-sp-2);
}


/* ==========================================================================
   9. ARTICLE PAGE
   ========================================================================== */

.article {
  margin-bottom: var(--c-sp-9);
}

.article-header {
  margin-bottom: var(--c-sp-6);
  padding-bottom: var(--c-sp-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--c-sp-4);
}

.article-title,
h1.article-title {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h1);
  font-weight: 800;
  line-height: var(--c-lh-head);
  color: var(--c-navy);
  margin: 0;
  flex: 1 1 420px;
}
.article-title .status-label { vertical-align: middle; }

.article-author,
.article-meta {
  font-size: var(--c-fs-label);
  color: var(--c-text-muted);
}

/* ---- Reading measure ----------------------------------------------------
   Copenhagen leaves article prose around 800px, roughly 95-105 characters
   per line, against a researched comfortable range of 45-75 (Bringhurst,
   ~66 optimal). Cap the PROSE ELEMENTS individually rather than capping
   .article-body, so tables, code blocks and screenshots keep the full
   column. `ch` scales with font size. Direct-child selectors keep the cap
   off text inside table cells.
   ------------------------------------------------------------------------ */

.article-body { font-size: var(--c-fs-body); line-height: var(--c-lh-body); color: var(--c-text); }

.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > h2,
.article-body > h3,
.article-body > h4,
.article-body > blockquote,
.article-body > dl {
  max-width: var(--c-measure);
}

/* Wide content is explicitly exempt — it gets the whole column. */
.article-body > figure,
.article-body > table,
.article-body > pre,
.article-body > .tp-wrap,
.article-body > img,
.article-body > iframe,
.article-body > .hc-full { max-width: none; }

.article-body > p { margin: 0 0 var(--c-sp-4); }

.article-body > h2 {
  font-size: var(--c-fs-h2);
  font-weight: 800;
  margin: var(--c-sp-7) 0 var(--c-sp-3);
}
.article-body > h3 {
  font-size: var(--c-fs-h3);
  font-weight: 700;
  margin: var(--c-sp-6) 0 var(--c-sp-3);
}
.article-body > h4 {
  font-size: var(--c-fs-h4);
  font-weight: 700;
  margin: var(--c-sp-5) 0 var(--c-sp-2);
}

/* First heading in a body should not push a big top margin. */
.article-body > h2:first-child,
.article-body > h3:first-child { margin-top: 0; }

.article-body > ul,
.article-body > ol { margin: 0 0 var(--c-sp-4); padding-left: var(--c-sp-5); }
.article-body li { margin-bottom: var(--c-sp-2); }
.article-body li > ul,
.article-body li > ol { margin: var(--c-sp-2) 0 0; }

.article-body a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--c-link-hover); }

.article-body strong, .article-body b { font-weight: 600; color: var(--c-text); }
.article-body hr { border: none; border-top: 1px solid var(--c-border); margin: var(--c-sp-7) 0; }

/* ---- Inline code: a chip -------------------------------------------- */
.article-body code {
  font-family: var(--c-font-mono);
  font-size: 0.9em;
  background: var(--c-code-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
  padding: 2px 6px;
  color: var(--c-navy);
  white-space: nowrap;
}

/* ---- Code blocks: bordered, internal scroll, never widen the page ---- */
.article-body pre {
  font-family: var(--c-font-mono);
  font-size: var(--c-fs-label);
  line-height: 1.6;
  background: var(--c-code-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: var(--c-sp-4);
  margin: 0 0 var(--c-sp-5);
  overflow-x: auto;
  max-width: 100%;
}
.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
  font-size: inherit;
}

/* ---- Blockquote as a Spearmint callout ------------------------------- */
.article-body blockquote {
  background: var(--c-spearmint);
  border: none;
  border-left: 3px solid var(--c-teal);
  border-radius: 0 var(--c-radius) var(--c-radius) 0;
  padding: var(--c-sp-4) var(--c-sp-5);
  margin: 0 0 var(--c-sp-5);
  color: var(--c-text);
  font-style: normal;
}
.article-body blockquote > :last-child { margin-bottom: 0; }

/* ---- Tables  [TRAP 2] -----------------------------------------------
   Zendesk wraps article tables in figure.wysiwyg-table and sets
   display:table on it. OVERFLOW IS IGNORED ON A TABLE-DISPLAY BOX, so an
   overflow-x:auto rule there silently does nothing until you ALSO set
   display:block. A 9-column table has a ~689px minimum content width: at
   1297px it has room to compress, at 572px it forces a page-level
   horizontal scrollbar. This bug is INVISIBLE AT DESKTOP WIDTH. Always
   test at 320-600px.
   -------------------------------------------------------------------- */
.article-body figure.wysiwyg-table,
.article-body figure.table {
  display: block;          /* <-- without this, overflow-x does nothing */
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 var(--c-sp-5);
  -webkit-overflow-scrolling: touch;
}

/* Fallback for a table pasted without the editor's figure wrapper. */
.article-body > table { display: block; overflow-x: auto; max-width: 100%; }

.article-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--c-fs-sm);
}
.article-body th {
  background: var(--c-mist);
  color: var(--c-navy);
  font-family: var(--c-font-head);
  font-weight: 700;
  text-align: left;
  padding: var(--c-sp-3) var(--c-sp-4);
  border: 1px solid var(--c-border);
}
.article-body td {
  padding: var(--c-sp-3) var(--c-sp-4);
  border: 1px solid var(--c-border);
  vertical-align: top;
}
.article-body tbody tr:nth-child(even) td { background: #FAFBFD; }

/* ---- Images ---------------------------------------------------------- */
.article-body img {
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  max-width: 100%;
  height: auto;
}
.article-body figure { margin: 0 0 var(--c-sp-5); }
.article-body figcaption {
  font-size: var(--c-fs-label);
  color: var(--c-text-muted);
  margin-top: var(--c-sp-2);
}

/* ---- Attachments ----------------------------------------------------- */
.article-attachments {
  margin-top: var(--c-sp-6);
  padding-top: var(--c-sp-5);
  border-top: 1px solid var(--c-border);
}
.article-attachments .attachment-item a { font-size: var(--c-fs-sm); }


/* ==========================================================================
   10. ARTICLE SIDEBAR — the section tree  (brief item 5)
   ========================================================================== */

.article-sidebar,
.sidenav {
  font-size: var(--c-fs-sm);
}

.sidenav-title,
.article-sidebar h3 {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--c-tracking-cap);
  color: var(--c-text-muted);
  margin: 0 0 var(--c-sp-3);
}

.sidenav-item,
.article-sidebar .sidenav a {
  display: block;
  padding: var(--c-sp-3) var(--c-sp-4);
  border-radius: var(--c-radius-sm);
  border-left: 3px solid transparent;
  color: var(--c-text);
  font-size: var(--c-fs-sm);
  line-height: 1.4;
  background: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.sidenav-item:hover {
  background: var(--c-mist);
  color: var(--c-navy);
  text-decoration: none;
}

/* Active item: Kiosk Green rail, lifted from the Greet app's own sidebar.
   Copenhagen paints a solid blue block here — replaced.

   SPECIFICITY TRAP, found in the preview 2026-08-31. The base rule above is
   written as `.sidenav-item, .article-sidebar .sidenav a`. That second
   selector scores 0-2-1 (two classes + one element), which BEATS a plain
   `.sidenav-item.current` at 0-2-0 — so the active item silently lost its
   rail and its Mist fill while every other property looked fine. The
   descendant form below is repeated here to win. Do not "simplify" it back
   to the single-class selector. */
/* CLASS-NAME TRAP, found on the live Platform theme 2026-08-31. Copenhagen
   marks the active article in the section sidebar with `.current-article`,
   NOT `.current` and NOT `aria-current`. Targeting only `.current` meant the
   green rail never appeared on a real article page — it only worked in the
   mockup, where the markup was written by hand. All three forms are listed. */
.sidenav-item.current,
.sidenav-item.current-article,
.sidenav-item[aria-current="page"],
.article-sidebar .sidenav a.current,
.article-sidebar .sidenav a.current-article,
.article-sidebar a.sidenav-item.current-article,
.collapsible-sidebar a.sidenav-item.current-article,
.article-sidebar .sidenav a[aria-current="page"] {
  background: var(--c-mist);
  border-left-color: var(--c-green);
  color: var(--c-navy);
  font-weight: 600;
}


/* ==========================================================================
   11. ARTICLE FOOTER — vote, share, related  (brief item 5)
   ========================================================================== */

.article-votes {
  margin: var(--c-sp-7) 0 var(--c-sp-6);
  padding: var(--c-sp-5);
  background: var(--c-mist);
  border-radius: var(--c-radius-card);
  text-align: center;
  border: none;
}
.article-votes-question {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h4);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--c-sp-4);
}
.article-vote {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
  color: var(--c-navy);
  font-size: var(--c-fs-label);
  font-weight: 600;
  padding: var(--c-sp-2) var(--c-sp-5);
  margin: 0 var(--c-sp-1);
}
.article-vote-up:hover    { border-color: var(--c-green); background: rgba(47,179,109,.08); }
.article-vote-down:hover  { border-color: var(--c-danger); background: rgba(197,17,17,.06); }
.article-vote.article-vote-up[aria-pressed="true"]   { border-color: var(--c-green); background: rgba(47,179,109,.12); }
.article-vote.article-vote-down[aria-pressed="true"] { border-color: var(--c-danger); background: rgba(197,17,17,.10); }
.article-votes-controls .article-vote-label { font-size: var(--c-fs-label); }

.article-more-questions,
.article-return-to-top {
  font-size: var(--c-fs-sm);
  color: var(--c-text-muted);
  margin-top: var(--c-sp-4);
}

/* Request-a-ticket CTA at the end of an article. */
.hc-article-cta {
  background: var(--c-navy);
  border-radius: var(--c-radius-card);
  padding: var(--c-sp-6);
  text-align: center;
  margin: var(--c-sp-7) 0 0;
}
.hc-article-cta h3 { color: var(--c-white); font-size: var(--c-fs-h3); margin: 0 0 var(--c-sp-2); }
.hc-article-cta p  { color: var(--c-text-on-navy-soft); font-size: var(--c-fs-sm); margin: 0 0 var(--c-sp-4); }
.hc-article-cta a  { color: var(--c-link-on-navy); }

/* Related articles. */
.article-relatives,
.recent-articles {
  margin-top: var(--c-sp-7);
  padding-top: var(--c-sp-6);
  border-top: 1px solid var(--c-border);
}
.article-relatives h3 {
  font-size: var(--c-fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--c-tracking-cap);
  color: var(--c-text-muted);
  margin-bottom: var(--c-sp-3);
}
.article-relatives ul { list-style: none; padding: 0; margin: 0; }
.article-relatives li { margin: 0; border-bottom: 1px solid var(--c-border-soft); }
.article-relatives li:last-child { border-bottom: none; }
.article-relatives li a {
  display: block;
  padding: var(--c-sp-3) 0;
  font-size: var(--c-fs-sm);
  color: var(--c-link);
  text-decoration: none;
}
.article-relatives li a:hover { color: var(--c-navy); text-decoration: underline; }


/* ==========================================================================
   12. SECTION / CATEGORY PAGES — the article list
   ========================================================================== */

.article-list,
.section-list .article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-border);
}
.article-list-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--c-border);
}
.article-list-item a,
.article-list-link {
  display: block;
  padding: var(--c-sp-4) var(--c-sp-3);
  font-size: var(--c-fs-body);
  font-weight: 500;
  color: var(--c-link);
  text-decoration: none;
  border-radius: var(--c-radius-sm);
}
.article-list-item a:hover {
  background: var(--c-mist);
  color: var(--c-navy);
  text-decoration: none;
}
.article-promoted-icon { color: var(--c-teal-text); }

.section-tree .see-all-articles {
  font-size: var(--c-fs-sm);
  font-weight: 600;
}


/* ==========================================================================
   13. SEARCH RESULTS  (brief item 4)
   ========================================================================== */

.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-result {
  padding: var(--c-sp-5) 0;
  border-bottom: 1px solid var(--c-border);
}
.search-result-title a {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 700;
  color: var(--c-navy);
  text-decoration: none;
}
.search-result-title a:hover { color: var(--c-link); text-decoration: underline; }
.search-result-description {
  font-size: var(--c-fs-sm);
  color: var(--c-text-muted);
  margin: var(--c-sp-2) 0;
  max-width: var(--c-measure);
}
.search-result-meta-data,
.search-result-breadcrumbs {
  font-size: var(--c-fs-label);
  color: var(--c-text-muted);
}
.search-result-votes { font-size: var(--c-fs-label); }

/* Highlighted query term inside a result. */
.search-results-list em,
mark { background: var(--c-spearmint); color: var(--c-navy); font-style: normal; padding: 0 2px; }


/* ==========================================================================
   14. EMPTY AND ZERO-RESULT STATES  (brief item 4 — high impact)
   --------------------------------------------------------------------------
   A brand-new help center's most-viewed screen is an empty one. Copenhagen
   leaves these as unstyled bare paragraphs.
   ========================================================================== */

.no-results,
.search-results .no-results,
.section-empty,
.category-empty,
.requests-table-empty,
.hc-empty {
  background: var(--c-mist);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: var(--c-sp-8) var(--c-sp-6);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--c-fs-body);
  margin: var(--c-sp-6) 0;
}
/* Icon chip for an empty state. Copenhagen emits no icon here, so the markup
   supplies one: <span class="hc-empty-icon"><em data-lucide="search-x"></em></span>
   Do NOT do this with a ::before square — with no glyph inside, an empty
   teal box reads as a broken image rather than as a considered state. */
.hc-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--c-sp-4);
  border-radius: var(--c-radius-chip);
  background: var(--c-teal-tint);
}
.hc-empty-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--c-teal-text);
  stroke-width: 2;
}
.hc-empty h2,
.no-results h2 {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 var(--c-sp-2);
}
.hc-empty p { margin: 0 auto; max-width: 52ch; font-size: var(--c-fs-sm); }
.hc-empty .button { margin-top: var(--c-sp-5); }


/* ==========================================================================
   15. REQUEST FORM  (brief item 6 — the highest-stakes screen)
   ========================================================================== */

.form,
.request-form,
form.form {
  max-width: 720px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: var(--c-sp-6);
}

.form-field,
.request-form .form-field {
  margin-bottom: var(--c-sp-5);
}

.form-field label,
.form-field > label {
  display: block;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-label);
  font-weight: 600;
  color: var(--c-navy);
  margin-bottom: var(--c-sp-2);
}
.form-field label .required { color: var(--c-danger); margin-left: 2px; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea,
.form-field select,
.form-field .nesty-input {
  width: 100%;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border-input);
  border-radius: var(--c-radius);
  padding: var(--c-sp-3) var(--c-sp-4);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-field select { appearance: auto; }
.form-field textarea { min-height: 160px; line-height: var(--c-lh-body); resize: vertical; }

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--c-teal);
  box-shadow: var(--c-focus-ring);
  outline: none;
}

.form-field .hint,
.form-field p.hint {
  font-size: var(--c-fs-label);
  color: var(--c-text-muted);
  margin-top: var(--c-sp-2);
}

/* Validation. */
.form-field.invalid input,
.form-field.invalid textarea,
.form-field.invalid select { border-color: var(--c-danger); }
.form-field .form-field-error,
.notification-error {
  background: rgba(197,17,17,.06);
  border: 1px solid var(--c-danger);
  border-radius: var(--c-radius);
  color: #8E0C0C;
  font-size: var(--c-fs-label);
  padding: var(--c-sp-3) var(--c-sp-4);
  margin-top: var(--c-sp-2);
}
.notification-success {
  background: rgba(47,179,109,.08);
  border: 1px solid var(--c-green);
  border-radius: var(--c-radius);
  color: var(--c-green-text);
  font-size: var(--c-fs-sm);
  padding: var(--c-sp-4);
}

/* Attachment dropzone. */
.form-field .upload-dropzone,
.upload-dropzone {
  border: 1px dashed var(--c-border-input);
  border-radius: var(--c-radius);
  background: var(--c-mist);
  padding: var(--c-sp-5);
  font-size: var(--c-fs-sm);
  color: var(--c-text-muted);
  text-align: center;
}
.upload-dropzone:hover { border-color: var(--c-teal); }

.form-footer,
.request-form footer {
  margin-top: var(--c-sp-6);
  padding-top: var(--c-sp-5);
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: var(--c-sp-3);
  align-items: center;
  flex-wrap: wrap;
}


/* ==========================================================================
   16. MY ACTIVITIES / REQUEST LIST / PROFILE
   ========================================================================== */

.table,
.requests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--c-fs-sm);
}
.table th,
.requests-table th {
  background: var(--c-mist);
  color: var(--c-navy);
  font-family: var(--c-font-head);
  font-weight: 700;
  font-size: var(--c-fs-label);
  text-align: left;
  padding: var(--c-sp-3) var(--c-sp-4);
  border-bottom: 1px solid var(--c-border);
}
.table td,
.requests-table td {
  padding: var(--c-sp-4);
  border-bottom: 1px solid var(--c-border);
}
.table tbody tr:hover td { background: #FAFBFD; }

/* Status pills. */
.request-status,
.status-label {
  display: inline-block;
  font-size: var(--c-fs-label);
  font-weight: 700;
  border-radius: 20px;
  padding: var(--c-sp-1) var(--c-sp-3);
  border: 1px solid transparent;
}
.status-open,    .request-open     { background: var(--c-spearmint); color: #0B5A56; }
.status-pending, .request-pending  { background: #FFF4D6; color: #6B4E00; }
.status-solved,  .request-solved   { background: rgba(47,179,109,.14); color: var(--c-green-text); }
.status-closed,  .request-closed   { background: var(--c-silver); color: var(--c-text-muted); }

/* COLLISION TRAP, found on the live Platform theme 2026-08-31.
   `.sub-nav` is NOT always a tab strip. On the article and section templates
   Copenhagen uses `<nav class="sub-nav">` as the wrapper for the BREADCRUMBS
   plus a search field. Styling `.sub-nav` as a flex tab row with a bottom
   border mangled that bar. These rules are now scoped to `ul.sub-nav` — the
   list form, which is the only one that is actually a tab strip. */
.nav-tabs,
ul.sub-nav {
  border-bottom: 1px solid var(--c-border);
  display: flex;
  gap: var(--c-sp-5);
  padding: 0;
  margin-bottom: var(--c-sp-5);
  list-style: none;
}
.nav-tabs a,
ul.sub-nav a {
  display: block;
  padding: var(--c-sp-3) 0;
  border-bottom: 2px solid transparent;
  font-size: var(--c-fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
}
.nav-tabs a:hover,
ul.sub-nav a:hover { color: var(--c-navy); text-decoration: none; }
.nav-tabs .current a,
ul.sub-nav .current a { color: var(--c-navy); border-bottom-color: var(--c-teal); }

/* The breadcrumb form of .sub-nav: a plain row, no border, no flex. */
nav.sub-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-sp-3) var(--c-sp-5);
  border: none;
  margin: var(--c-sp-5) 0 var(--c-sp-6);
  padding: 0;
}
nav.sub-nav .breadcrumbs { margin: 0; flex: 1 1 auto; }
nav.sub-nav form.search { flex: 0 1 320px; max-width: 320px; margin: 0; }
nav.sub-nav form.search input { height: 42px; border-color: var(--c-border-input); }
@media (max-width: 767px) {
  nav.sub-nav form.search { flex: 1 1 100%; max-width: none; }
}

/* Comments on a request. */
.comment {
  border-bottom: 1px solid var(--c-border);
  padding: var(--c-sp-5) 0;
}
.comment-body { font-size: var(--c-fs-body); }
.comment-author { font-weight: 600; color: var(--c-navy); font-size: var(--c-fs-sm); }
.comment-official {
  background: var(--c-mist);
  border-left: 3px solid var(--c-teal);
  border-radius: 0 var(--c-radius) var(--c-radius) 0;
  padding: var(--c-sp-4) var(--c-sp-5);
}

/* Pagination. */
.pagination { display: flex; gap: var(--c-sp-2); justify-content: center; margin: var(--c-sp-7) 0; list-style: none; padding: 0; }
.pagination a,
.pagination span {
  display: block;
  min-width: 38px;
  text-align: center;
  padding: var(--c-sp-2) var(--c-sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
  font-size: var(--c-fs-label);
  font-weight: 600;
  color: var(--c-navy);
}
.pagination a:hover { background: var(--c-mist); text-decoration: none; }
.pagination .pagination-current,
.pagination [aria-current="page"] { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }


/* ==========================================================================
   17. FOOTER
   --------------------------------------------------------------------------
   NOTE: an earlier Greet build added a guard capping .powered-by-zendesk and
   then REMOVED it. Zendesk's script does recompute that element's inline
   width on resize (verified: it followed the window from 1267px to 557px).
   The 1927px reading that prompted the guard was a stale value in a preview
   pane resized without a reload. Do not re-add the cap.
   ========================================================================== */

.footer {
  background: var(--c-navy-deep);
  border-top: 1px solid var(--c-navy-deeper);
  padding: var(--c-sp-7) var(--c-gutter);
  margin-top: var(--c-sp-9);
  color: var(--c-text-on-navy-soft);
}
.footer-inner {
  max-width: var(--c-col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-sp-4);
  flex-wrap: wrap;
  font-size: var(--c-fs-label);
}
.footer a { color: var(--c-text-on-navy-soft); }
.footer a:hover { color: var(--c-teal); }


/* ==========================================================================
   18. tp-* COMPONENT LIBRARY  — promoted out of the article
   --------------------------------------------------------------------------
   Lifted from the live Touchpoint Video Onboarding Guide (2026-08-29) so
   authors no longer paste a 4.7 KB <style> block into every article. Class
   names are UNCHANGED, so existing articles keep working: their inline
   <style> simply duplicates what is here.

   THREE DELIBERATE CHANGES from the live article, confirmed 2026-08-31:
     1. Small teal TEXT moved from #2cd1cc to --c-teal-text #0C6F6C.
        The original was 1.67:1 on Mist — a WCAG AA failure. Impact Blue
        keeps every use where it passes: divider, chip tints, pill fills,
        hover borders.
     2. .tp-row:hover box-shadow replaced by the elevate pattern (teal
        border + 3% tint). certain-brand forbids drop shadows in UI.
     3. Everything at 13px raised to 14px — the brand floor. Affected:
        tp-toc-label, tp-toc-count, tp-toc-desc, tp-pill, tp-soonlabel.
   ========================================================================== */

/* ---- The panel ---------------------------------------------------------- */
.tp-wrap {
  font-family: var(--c-font-body);
  background: var(--c-mist);
  padding: var(--c-sp-7) 40px;
  border-radius: var(--c-radius-xl);
  margin-bottom: var(--c-sp-6);
}

.tp-eyebrow {
  font-size: var(--c-fs-label);
  font-weight: 600;
  letter-spacing: var(--c-tracking-cap);
  text-transform: uppercase;
  color: var(--c-teal-text);          /* was #2cd1cc — 1.67:1, failed AA */
  margin: 0 0 var(--c-sp-2);
}

.tp-title {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h1);
  font-weight: 800;
  line-height: var(--c-lh-head);
  color: var(--c-navy);
  margin: 0 0 var(--c-sp-3);
}

.tp-subtitle {
  font-size: var(--c-fs-body);
  line-height: var(--c-lh-body);
  color: var(--c-text-faint);
  margin: 0 0 var(--c-sp-6);
  max-width: 640px;
}

/* ---- The "in this guide" card ------------------------------------------- */
.tp-toc {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-lg);
  padding: var(--c-sp-3);
}
.tp-toc-label {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-label);       /* was 13px */
  font-weight: 700;
  letter-spacing: var(--c-tracking-cap);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: var(--c-sp-2) var(--c-sp-3) var(--c-sp-3);
}
.tp-toc-row,
.tp-toc a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--c-sp-3);
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.tp-toc a:hover { background: var(--c-teal-tint-hover); text-decoration: none; }
.tp-toc-text  { flex: 1; display: block; min-width: 0; }
.tp-toc-name  {
  display: block;
  font-family: var(--c-font-head);
  font-size: var(--c-fs-body);
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.3;
}
.tp-toc-count {
  font-size: var(--c-fs-label);       /* was 13px */
  font-weight: 500;
  color: var(--c-text-muted);
  white-space: nowrap;
  margin-left: var(--c-sp-2);
}
.tp-toc-desc {
  display: block;
  font-size: var(--c-fs-label);       /* was 13px */
  line-height: 1.45;
  color: var(--c-text-muted);
  margin-top: var(--c-sp-1);
}

/* ---- Section divider and headings --------------------------------------- */
.tp-divider {
  border: none;
  height: 3px;
  width: 56px;
  background: var(--c-teal);
  border-radius: 2px;
  margin: var(--c-sp-7) 0 var(--c-sp-5);
}

.tp-head { display: flex; align-items: center; gap: var(--c-sp-3); margin: 0 0 var(--c-sp-2); }
.tp-head h2 {
  font-family: var(--c-font-head);
  font-weight: 800;
  font-size: var(--c-fs-h2);
  color: var(--c-navy);
  line-height: var(--c-lh-tight);
  margin: 0;
}
.tp-secdesc {
  color: var(--c-text-faint);
  font-size: var(--c-fs-sm);
  line-height: var(--c-lh-body);
  margin: 0 0 var(--c-sp-4) 48px;
}

.tp-sub { display: flex; align-items: center; gap: 9px; margin: var(--c-sp-5) 0 var(--c-sp-3); }
.tp-sub h3 {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h4);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.3;
}

/* ---- Icon chips --------------------------------------------------------- */
.tp-toc-icon, .tp-head-icon, .tp-sub-icon {
  border-radius: var(--c-radius-chip);
  background: var(--c-teal-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tp-toc-icon  { width: 32px; height: 32px; min-width: 32px; }
.tp-head-icon { width: 36px; height: 36px; min-width: 36px; }
.tp-sub-icon  { width: 24px; height: 24px; min-width: 24px; border-radius: 7px; }

/* Lucide renders 24x24 with stroke="currentColor"; size and colour it here.
   Chip fills are teal-tinted, so the glyph uses the deeper teal for contrast
   against the tint. */
.tp-toc-icon em, .tp-head-icon em, .tp-sub-icon em, .tp-chev em { display: flex; }
.tp-toc-icon svg, .tp-head-icon svg, .tp-sub-icon svg {
  stroke: var(--c-teal-text);
  stroke-width: 2;
  display: block;
}
.tp-toc-icon svg  { width: 16px; height: 16px; }
.tp-head-icon svg { width: 18px; height: 18px; }
.tp-sub-icon svg  { width: 13px; height: 13px; }

/* ---- Accordion rows ----------------------------------------------------- */
.tp-row {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  margin-bottom: var(--c-sp-3);
  padding: 14px var(--c-sp-5);
  transition: border-color .2s ease, background-color .2s ease;
}
/* Elevate, not shadow. Replaces the article's box-shadow. */
.tp-row:hover {
  border-color: var(--c-teal);
  background: linear-gradient(var(--c-elevate-1), var(--c-elevate-1)), var(--c-white);
}

.tp-sum {
  display: flex;
  align-items: center;
  gap: var(--c-sp-3);
  cursor: pointer;
  list-style: none;
}
.tp-sum::-webkit-details-marker { display: none; }
.tp-sum::marker { content: ""; }

.tp-chev { color: var(--c-text-muted); display: flex; align-items: center; transition: transform .2s ease; flex: 0 0 auto; }
.tp-chev svg { width: 14px; height: 14px; stroke: var(--c-text-muted); display: block; }
.tp-chev-off { width: 14px; }
details[open] > .tp-sum .tp-chev { transform: rotate(90deg); }

.tp-rowtitle {
  font-family: var(--c-font-head);
  flex: 1;
  font-size: var(--c-fs-sm);
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.35;
  min-width: 0;
}

.tp-pill {
  background: var(--c-teal);
  color: var(--c-navy);
  border-radius: 20px;
  font-size: var(--c-fs-label);       /* was 13px */
  font-weight: 700;
  padding: var(--c-sp-1) 14px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.tp-soon { border-style: dashed; }
.tp-soon:hover { border-color: var(--c-border); background: var(--c-white); }
.tp-soon .tp-rowtitle { color: var(--c-text-muted); }
.tp-soonlabel {
  color: var(--c-text-muted);
  font-size: var(--c-fs-label);       /* was 13px */
  font-weight: 700;
  white-space: nowrap;
}

.tp-body { border-top: 1px solid var(--c-border-soft); margin-top: var(--c-sp-5); padding-top: var(--c-sp-4); }
.tp-note { color: var(--c-text-muted); font-size: var(--c-fs-label); line-height: 1.6; margin: 0 0 14px; }

/* ---- Embedded video ----------------------------------------------------- */
/* 92% padding-bottom matches the Scribe embed's own aspect ratio. */
.tp-video {
  position: relative;
  padding-bottom: 92%;
  height: 0;
  overflow: hidden;
  border-radius: var(--c-radius);
  margin-top: var(--c-sp-5);
}
.tp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tp-video + .tp-video { margin-top: 14px; }

/* ---- Navy closing block ------------------------------------------------- */
.tp-close {
  background: var(--c-navy);
  border-radius: var(--c-radius-card);
  margin-top: var(--c-sp-7);
  padding: var(--c-sp-6);
  text-align: center;
}
.tp-close p { margin: 0; }
.tp-close-title {
  color: var(--c-white);
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 800;
  margin-bottom: var(--c-sp-2) !important;
}
.tp-close-body { color: var(--c-text-on-navy-soft); font-size: var(--c-fs-label); line-height: 1.7; }
.tp-close a { color: var(--c-link-on-navy); }

/* A .tp-wrap sits inside .article-body, which caps prose at 68ch. The panel
   is a full-column component, so exempt it and everything in it. */
.article-body .tp-wrap,
.article-body .tp-wrap > * { max-width: none; }
.article-body .tp-subtitle { max-width: 640px; }


/* ==========================================================================
   19. MOBILE  (brief item 7)
   --------------------------------------------------------------------------
   Copenhagen's own breakpoints stay in force; these are the deliberate
   narrow-width decisions on top. Test at 320 / 375 / 414 / 600 / 768.
   ========================================================================== */

@media (max-width: 900px) {
  /* Article page: sidebar stacks above the body, as a collapsed block. */
  .article-sidebar { margin-bottom: var(--c-sp-6); }
  .sidenav-item { padding: var(--c-sp-2) var(--c-sp-3); }
}

@media (max-width: 767px) {
  :root {
    --c-fs-hero: 30px;
    --c-fs-h1:   26px;
    --c-fs-h2:   22px;
    --c-fs-h3:   18px;
    /* body stays 16px; the 14px floor is never crossed */
  }

  .header {
    padding-inline: var(--c-gutter);
    min-height: 60px;
    flex-wrap: wrap;
    gap: var(--c-sp-2);
  }
  .logo img, .header .logo img { height: 28px; max-width: 190px; }

  .hero { padding: var(--c-sp-7) var(--c-gutter); }
  .hero-inner h1 { max-width: none; }
  .hero-inner h1::after { margin-top: var(--c-sp-4); }
  .search input { height: 48px; padding-right: 46px; }

  main, .container { padding-inline: var(--c-gutter); }

  .section, .home-section, .search-results { margin-block: var(--c-sp-6); }

  .blocks-list, .category-list, .section-list {
    grid-template-columns: 1fr;
    gap: var(--c-sp-4);
  }
  .blocks-item.hc-lead .blocks-item-link { flex-direction: column; align-items: flex-start; }

  .article-header { flex-direction: column; gap: var(--c-sp-3); }
  .article-body > p,
  .article-body > ul,
  .article-body > ol,
  .article-body > h2,
  .article-body > h3,
  .article-body > h4,
  .article-body > blockquote { max-width: none; }

  /* [TRAP 2] again, from the other side: the panel's own 40px side padding
     eats a phone screen. Cut it, and let wide children scroll internally. */
  .tp-wrap { padding: var(--c-sp-6) var(--c-sp-4); border-radius: var(--c-radius-card); }
  .tp-secdesc { margin-left: 0; }
  .tp-row { padding: var(--c-sp-3) var(--c-sp-4); }

  /* The pill drops under the title rather than squeezing it to two chars. */
  .tp-sum { flex-wrap: wrap; }
  .tp-rowtitle { flex: 1 1 100%; order: 2; }
  .tp-chev { order: 1; }
  .tp-pill, .tp-soonlabel { order: 3; margin-left: 26px; }

  .tp-close { padding: var(--c-sp-5); }
  .tp-video { padding-bottom: 120%; }

  .form, .request-form { padding: var(--c-sp-4); border: none; border-radius: 0; }
  .form-footer { flex-direction: column; align-items: stretch; }
  .form-footer .button { width: 100%; }

  .footer-inner { flex-direction: column; text-align: center; gap: var(--c-sp-3); }

  .nav-tabs, .sub-nav { overflow-x: auto; gap: var(--c-sp-4); }
}

@media (max-width: 400px) {
  .tp-wrap { padding: var(--c-sp-5) var(--c-sp-3); }
  .article-votes { padding: var(--c-sp-4); }
  .article-vote { display: block; width: 100%; margin: 0 0 var(--c-sp-2); }
}


/* ==========================================================================
   20. PRINT
   ========================================================================== */

@media print {
  .header, .hero, .footer, .article-sidebar, .article-votes,
  .hc-article-cta, .breadcrumbs, .search { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .article-body > * { max-width: none !important; }
  .tp-wrap { background: none; padding: 0; }
  .tp-row { break-inside: avoid; }
  details { display: block; }
  details > * { display: block !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}


/* ==========================================================================
   21. MOTION / ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link — Copenhagen ships the markup but hides it off-screen with no
   visible focus state. */
.skip-navigation:focus,
a.skip-navigation:focus {
  position: fixed;
  top: var(--c-sp-3);
  left: var(--c-sp-3);
  z-index: 999;
  background: var(--c-white);
  color: var(--c-navy);
  padding: var(--c-sp-3) var(--c-sp-4);
  border-radius: var(--c-radius-sm);
  border: 2px solid var(--c-teal);
  width: auto;
  height: auto;
  clip: auto;
}

/* ==========================================================================
   END
   ========================================================================== */



/* ##########################################################################
   PART 2 of 2 — PLATFORM BRIDGE
   ########################################################################## */

/* ==========================================================================
   CERTAIN HELP CENTER — PLATFORM BRIDGE
   --------------------------------------------------------------------------
   For converting the EXISTING live Platform theme, "June 2020 HC Revamp",
   rather than starting from a stock Copenhagen clone.

   APPEND ORDER in style.css:
     1. certain-hc-tokens.css        (very top)
     2. ... Copenhagen's own CSS, untouched ...
     3. certain-hc-theme.css         (bottom)
     4. certain-hc-bridge-platform.css   <-- THIS FILE, last
   This file must load last because it overrides both Copenhagen and the
   theme's own 2020-era customizations.

   ONLY LOAD THIS ON PLATFORM. Touchpoint and Greet do not have this markup;
   loading it there is harmless but pointless.

   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   Reconnaissance on 2026-08-31 found the live theme is ~95% stock Copenhagen.
   The article page, section page, category page, search results, request
   form, my-activities, profile, header and footer all use Copenhagen's own
   class names, so `certain-hc-theme.css` restyles them with no bridge at all.

   The exception is the HOME PAGE. `home_page.hbs` was hand-written in 2020.
   It does not use Copenhagen's category loop. Instead it hard-codes five
   blocks with per-item classes and per-item image ids:

     .blocks-item-knowledgebase   full-width panel, contains a hand-written
                                  <table> of section links using a.kbtext
     .blocks-item-user-guides     |
     .blocks-item-academy         |  three "other support resources" cards
     .blocks-item-dev             |
     .blocks-item-tp              cross-product card, links to Touchpoint

   Each block carries TWO <img> elements, #img-top-NAME and #img-bottom-NAME,
   swapped on hover to fake a hover state. That trick predates the current
   brand and is replaced here by the standard elevate pattern.

   CONSEQUENCE WORTH KNOWING: because the home page is hand-coded, adding a
   category in Guide does NOT add a card. Someone has to edit the template.
   The stock-Copenhagen clone is data-driven and does not have that problem.
   That is the real trade-off between the two conversion routes; it is a
   maintenance question, not a visual one.

   INLINE STYLES: the template carries a few inline style="" attributes
   (padding-bottom:0 on a link, width:100% and margins on the table). Inline
   styles beat any selector, so the handful of !important flags below are
   load-bearing. Each one is commented. Do not add more.
   ========================================================================== */


/* ==========================================================================
   1. HERO — the live theme paints a photo via an inline background-image
   --------------------------------------------------------------------------
   certain-hc-theme.css already overrides this with !important. Repeated here
   only because the live theme also adds .search-full, which needs sizing.
   Better still: remove the hero image in Guide admin -> Settings -> Images,
   which drops the request entirely.
   ========================================================================== */

.section.hero {
  background-image: none !important;   /* beats the template's inline style */
  background-color: var(--c-navy-deep);
}

/* SPACING TRAP, found in the preview 2026-08-31. On the live theme the hero is
   `<section class="section hero">` — it carries BOTH classes. certain-hc-theme.css
   gives `.section` a 64px margin-block for vertical rhythm, which put a white
   band above and below the navy hero. The hero is a full-bleed band and owns no
   outer margin. Same applies to the home sections that double up on `.section`. */
.section.hero { margin: 0 !important; }

/* The live .hero-inner holds a hidden h2, a stray svg and the form. Making it a
   flex column lets the injected title and rule be ORDERED, rather than landing
   after the form — ::before and ::after are the first and last children, so
   without this the teal rule renders underneath the search box. */
.section.hero .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--c-col);
  margin: 0 auto;
  padding: 0;
}
.section.hero .hero-inner > * { order: 3; width: 100%; }

/* The live hero has no visible <h1> — the real one is .visibility-hidden for
   screen readers and the design relied on the photo to carry the page. With a
   flat navy band there is nothing there, so give the band a real title.
   Prefer editing home_page.hbs to un-hide the h1; this is the CSS-only path. */
.section.hero .hero-inner::before {
  content: "Support Center";
  order: 1;                       /* above the rule and the search field */
  display: block;
  font-family: var(--c-font-head);
  font-size: var(--c-fs-hero);
  font-weight: 800;
  line-height: var(--c-lh-head);
  color: var(--c-text-on-navy);
  text-align: center;
  margin: 0 0 var(--c-sp-5);
}
.section.hero .hero-inner::after {
  content: "";
  order: 2;                       /* between the title and the search field */
  display: block;
  width: 56px;
  height: 3px;
  background: var(--c-teal);
  border-radius: 2px;
  margin: 0 0 var(--c-sp-6);
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .section.hero .hero-inner::before { font-size: 30px; }
}

/* The live theme puts a loose <svg> magnifier as a SIBLING of the form rather
   than inside it, so it cannot be positioned against the input. Hide it and
   let the input's own padding carry the space. */
.section.hero .hero-inner > svg { display: none; }

/* ---- SIX <br> TAGS, worth 120px of dead navy -------------------------
   Measured on the published site 2026-08-31, after the hero was reported as
   "too tall". `.hero-inner` contains SIX <br> elements, 20px each:

       h1#support-center ..... 78px
       form.search ........... 54px
       br x 6 ............... 120px   <-- this
       hero-inner total ...... 304px
       hero incl. padding .... 549px
       header + hero ......... 598px of 765px viewport = 78% of first screen

   In the 2020 design the hero was a fixed 300px band with a background photo
   and the <br>s pushed the search box down to sit visually centred over the
   image. With .hero-inner now a flex column at height:auto they do nothing
   but add empty space. Spacing here comes from the title margin and the teal
   rule instead.

   Hiding them is safe: a <br> in a flex container is not a line break, it is
   just a 20px-tall flex item. No template edit needed. */
.section.hero .hero-inner br { display: none; }


/* ==========================================================================
   2. SEARCH — .search-full variant
   --------------------------------------------------------------------------
   Rule 120 of the live style.css targets `.search-full input[type="search"]`.
   That wins over a bare `.search input` (0-1-1 vs 0-1-1 but later in file),
   so the new sizing has to name .search-full explicitly.
   ========================================================================== */

form.search.search-full {
  max-width: 620px;
  margin: 0 auto;
  border: none;
  background: none;
  border-radius: 0;
  position: relative;
}

.search-full input[type="search"] {
  width: 100%;
  height: 54px;
  padding: 0 52px 0 var(--c-sp-5);
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-white);
  border-radius: var(--c-radius-card);
  box-shadow: none;
}
.search-full input[type="search"]:focus {
  border-color: var(--c-teal);
  box-shadow: var(--c-focus-ring);
  outline: none;
}

/* Copenhagen's clear ("×") button, only present on .search-full. */
.search-full .clear-button {
  position: absolute;
  right: var(--c-sp-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: var(--c-sp-1);
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
}
.search-full .clear-button:hover { background: none; color: var(--c-navy); }
.search-full .clear-button svg { width: 16px; height: 16px; }


/* ==========================================================================
   3. HOME LAYOUT — the hand-coded five-block grid
   --------------------------------------------------------------------------
   The template wraps everything in .section.knowledge-base, then
   .categories.blocks > ul.blocks-list, then a sibling .articles section.
   ========================================================================== */

.section.knowledge-base {
  margin-block: var(--c-sp-8);
}
/* Both of these headings are .visibility-hidden in the template. Leave them
   hidden — they are there for screen readers and the design supplies its own
   labels. Do not "fix" them by making them visible; you will get two titles. */

.categories.blocks { margin-bottom: var(--c-sp-8); }

/* The grid: the Knowledge Base panel spans the full row, then the three
   resource cards sit in a row, then the Touchpoint card spans the full row.
   Explicit placement rather than auto-fit, because these five blocks are
   fixed and each has a different job. */
.knowledge-base .blocks-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--c-sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.blocks-item-knowledgebase { grid-column: 1 / -1; }
.blocks-item-tp            { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .knowledge-base .blocks-list { grid-template-columns: 1fr 1fr; }
  .blocks-item-user-guides { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .knowledge-base .blocks-list { grid-template-columns: 1fr; }
  .blocks-item-user-guides { grid-column: auto; }
}


/* ==========================================================================
   4. THE FIVE BLOCKS — card treatment
   ========================================================================== */

.knowledge-base .blocks-item {
  margin: 0;
  border: none;
  background: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* The card surface. On the resource cards the whole block is one <a>; on the
   Knowledge Base block the <a> only wraps the images, and the title,
   description and table are siblings. So the CARD is the <li>, not the <a>. */
.knowledge-base .blocks-item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: var(--c-sp-5);
  transition: border-color .18s ease, background-color .18s ease;
}
.knowledge-base .blocks-item:hover {
  border-color: var(--c-teal);
  background: linear-gradient(var(--c-elevate-1), var(--c-elevate-1)), var(--c-white);
}

/* The Knowledge Base panel is the lead surface — Mist, like the tp-wrap. */
.blocks-item-knowledgebase {
  background: var(--c-mist) !important;   /* beats the :hover rule above */
  padding: var(--c-sp-7) 40px !important; /* beats the template's inline padding */
  text-align: center;
}
.blocks-item-knowledgebase:hover {
  border-color: var(--c-border);
  background: var(--c-mist) !important;
}

/* The Touchpoint cross-product card. It was navy here until 2026-08-31; that
   is now wrong because the uploaded lockup is the light-surface colour variant
   and a navy wordmark on navy is invisible. Surface and hover are set in the
   logo-card block further down in this section — only alignment lives here. */
.blocks-item-tp {
  text-align: center;
}
/* NOTE: the white-on-navy title/description rules that used to live here were
   removed on 2026-08-31 when this card went back to a light surface. See the
   logo-card block in section 5. The card has no title element anyway. */
.blocks-item-tp .blocks-item-title { color: var(--c-navy); }

/* CARD-INSIDE-A-CARD TRAP, found in the preview 2026-08-31.
   certain-hc-theme.css styles `.blocks-item-link, .blocks-item a` as the card
   surface, because on stock Copenhagen the whole block IS one anchor. The live
   template is different: the knowledgebase block has THREE anchors — one round
   the images, one bare <a> round the <h4> title, and one per table link. The
   bare title anchor therefore drew a second bordered, padded card around the
   words "Knowledge Base".

   Reset every anchor inside these blocks, then re-style only the ones that
   should look like something (a.kbtext, in section 6). */
.knowledge-base .blocks-item a,
.knowledge-base .blocks-item-link {
  display: block;
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
  text-align: inherit;
  text-decoration: none;
  flex-direction: unset;
  height: auto;
}
.knowledge-base .blocks-item a:hover,
.knowledge-base .blocks-item-link:hover {
  background: none;
  border: none;
  text-decoration: none;
}

.knowledge-base .blocks-item-title {
  display: block;
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 700;
  color: var(--c-navy);
  line-height: var(--c-lh-tight);
  margin: var(--c-sp-3) 0 var(--c-sp-2);
}
.blocks-item-knowledgebase .blocks-item-title {
  font-size: var(--c-fs-h1);
  font-weight: 800;
}
.blocks-item-tp .blocks-item-title { font-size: var(--c-fs-h2); font-weight: 800; }

.knowledge-base .blocks-item-description {
  display: block;
  font-size: var(--c-fs-sm);
  line-height: var(--c-lh-body);
  color: var(--c-text-muted);
  margin: 0;
}
.blocks-item-knowledgebase .blocks-item-description {
  font-size: var(--c-fs-body);
  color: var(--c-text-faint);
  max-width: 640px;
  margin: 0 auto var(--c-sp-6);
}


/* ==========================================================================
   5. THE IMAGE-SWAP ICONS — #img-top-* / #img-bottom-*
   --------------------------------------------------------------------------
   The 2020 template stacks two uploaded PNGs per block and swaps them on
   hover. The brand now forbids that kind of ad-hoc affordance and the elevate
   pattern replaces it: ONE icon, always the same, and the CARD reacts.

   Kept as images rather than swapped for Lucide, because replacing them means
   editing home_page.hbs. If you do edit the template, drop both <img> tags and
   use <span class="hc-chip"><em data-lucide="NAME"></em></span> instead — that
   class is already in certain-hc-theme.css.
   ========================================================================== */

/* ID-SPECIFICITY TRAP, found on reading the real style.css 2026-08-31.
   The live theme sets these with ID selectors:
       img#img-bottom-user-guides { display: inline; }
       img#img-top-user-guides    { display: none; }
   An ID scores 1-0-0 and beats an attribute selector at 0-1-0 outright, so
   `[id^="img-top-"] { display: block }` loses and the icon stays hidden —
   while my !important on img-bottom hid the other one. Net result would have
   been NO icon at all on any card.

   Both rules therefore carry !important. This is one of the few places in
   this stylesheet where it is unavoidable: you cannot out-specify ten ID
   selectors without listing all ten. */
[id^="img-bottom-"] { display: none !important; }

/* Present the remaining icon in the standard teal chip. */
[id^="img-top-"] {
  display: block !important;
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin: 0;
  padding: 7px;
  box-sizing: content-box;
  background: var(--c-teal-tint);
  border-radius: var(--c-radius-chip);
  border: none;
}
/* Centred inside the two full-width panels, left-aligned on the three cards. */
.blocks-item-knowledgebase [id^="img-top-"],
.blocks-item-tp [id^="img-top-"] { margin: 0 auto var(--c-sp-4); }

/* CONTRAST: a 12% teal tint reads clearly on WHITE but nearly vanishes on the
   Mist panel. Measured in the preview 2026-08-31 — the faint version looked
   like a rendering fault. */
.blocks-item-knowledgebase [id^="img-top-"] {
  background: var(--c-white);
  border: 1px solid var(--c-border);
}

/* ---- NOT ALL FIVE IMAGES ARE ICONS -------------------------------------
   Reported on the published site 2026-08-31: the Touchpoint card was
   "extremely small". Measured:

       #img-top-knowledgebase   64 x 64    ratio 1.00   icon
       #img-top-user-guides     64 x 64    ratio 1.00   icon
       #img-top-academy         64 x 64    ratio 1.00   icon
       #img-top-dev             64 x 64    ratio 1.00   icon
       #img-top-tp             275 x 51    ratio 5.39   LOGO LOCKUP

   The `[id^="img-top-"]` rule above treated all five as icons and forced a
   26x26 content box. With object-fit:contain a 5.39:1 lockup then renders as
   a ~26px wide, ~5px tall sliver — which is exactly the reported symptom.

   It also mattered more on this card than the others, because the Touchpoint
   block has NO `.blocks-item-title` element at all — verified, the markup is
   image + description only. The logo IS the title, which is why the 2020
   design showed it large. Shrinking it removed the card's entire identity.

   An ID selector (1-0-0) beats the attribute selector (0-1-0), so no
   !important is needed to undo the chip here.

   IF A FUTURE CARD USES A LOGO rather than a square icon, add its id to this
   rule. CSS cannot branch on an image's aspect ratio.
   ---------------------------------------------------------------------- */
#img-top-tp {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-sizing: content-box;
  object-fit: contain;
  margin: 0 auto var(--c-sp-4);
}
@media (max-width: 640px) {
  #img-top-tp { max-width: 160px; max-height: 34px; }
}

/* The card has to go back to a LIGHT surface. The uploaded Touchpoint lockup
   is the colour variant — navy wordmark, teal glyph — drawn for white
   backgrounds. My earlier navy fill would have put a navy wordmark on navy,
   i.e. an invisible logo, and fixing that the other way round would mean
   asking someone to produce and upload a reverse asset. Mist keeps the
   existing file working, still reads as a distinct cross-product band
   against the three white cards beside it, and stays inside Light Mode. */
.blocks-item-tp {
  background: var(--c-mist) !important;
  border-color: var(--c-border) !important;
}
.blocks-item-tp:hover,
.blocks-item-tp:focus {
  background: linear-gradient(var(--c-elevate-1), var(--c-elevate-1)), var(--c-mist) !important;
  border-color: var(--c-teal) !important;
}
.blocks-item-tp .blocks-item-description,
.blocks-item-tp:hover .blocks-item-description,
.blocks-item-tp:focus .blocks-item-description {
  color: var(--c-text-muted);
  font-size: var(--c-fs-body);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
/* No title element on this card, so give the description room to breathe. */
.blocks-item-tp .blocks-item-link { padding: var(--c-sp-2) 0; }


/* ==========================================================================
   6. THE KNOWLEDGE BASE LINK TABLE — a.kbtext / td.center
   --------------------------------------------------------------------------
   A hand-written <table> inside the knowledgebase block holds the section
   links in three columns. A table is the wrong element for a link list, but
   rewriting it means editing the template, and it does at least collapse
   predictably. Restyled here as a link grid.

   If you edit home_page.hbs, replace the whole table with:
     <ul class="hc-kb-links"> <li><a href="...">Label</a></li> ... </ul>
   and the rule at the end of this section will style it with no table at all.
   ========================================================================== */

.blocks-item-knowledgebase table {
  width: 100% !important;      /* the template pins width inline */
  border-collapse: collapse;
  margin: 0 auto !important;
  border: none;
}
.blocks-item-knowledgebase table td,
.blocks-item-knowledgebase td.center {
  border: none;
  background: none;
  padding: var(--c-sp-1);
  text-align: center;
  vertical-align: middle;
}
/* Rule 162 of the live style.css is `td.center:hover`. The hover belongs on
   the link, not the cell, so neutralise it and move it to the anchor. */
.blocks-item-knowledgebase td.center:hover { background: none; }

a.kbtext,
.blocks-item-knowledgebase a.kbtext {
  display: block;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-sm);
  font-weight: 600;
  color: var(--c-link);
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: var(--c-sp-3) var(--c-sp-4);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
a.kbtext:hover,
.blocks-item-knowledgebase a.kbtext:hover {
  border-color: var(--c-teal);
  background: var(--c-white);
  color: var(--c-navy);
  text-decoration: none;
}

/* Narrow: a three-column table cannot reflow, so let it scroll inside its own
   box rather than widening the page. [TRAP 2] applies — display:block is
   required for overflow to do anything on a table-display element. */
@media (max-width: 640px) {
  .blocks-item-knowledgebase > div,
  .blocks-item-knowledgebase table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
  .blocks-item-knowledgebase table tbody,
  .blocks-item-knowledgebase table tr { display: block; }
  .blocks-item-knowledgebase table td { display: block; width: auto; }
  .blocks-item-knowledgebase { padding: var(--c-sp-6) var(--c-sp-4) !important; }
}

/* The template-free replacement, for when the table finally goes. */
.hc-kb-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--c-sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.hc-kb-links a {
  display: block;
  font-size: var(--c-fs-sm);
  font-weight: 600;
  color: var(--c-link);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: var(--c-sp-3) var(--c-sp-4);
  text-decoration: none;
}
.hc-kb-links a:hover { border-color: var(--c-teal); color: var(--c-navy); }


/* ==========================================================================
   7. RECOMMENDED ARTICLES — .promoted-articles
   --------------------------------------------------------------------------
   Rules 167-177 of the live style.css make this a flex column with
   border-bottom separators. That is close to the new list treatment already,
   so this mostly restyles type and spacing.
   ========================================================================== */

.knowledge-base .articles,
section.articles {
  margin-top: var(--c-sp-8);
}
section.articles > h2 {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--c-tracking-cap);
  color: var(--c-text-muted);
  margin: 0 0 var(--c-sp-3);
}

.article-list.promoted-articles {
  border-top: 1px solid var(--c-border);
  margin: 0;
  padding: 0;
  list-style: none;
}
.promoted-articles-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--c-border);
}
.promoted-articles-item:last-child { border-bottom: none; }
.promoted-articles-item a {
  display: block;
  padding: var(--c-sp-4) var(--c-sp-3);
  border: none;            /* rule 173 gives every item its own border-bottom */
  border-radius: var(--c-radius-sm);
  font-size: var(--c-fs-body);
  font-weight: 500;
  color: var(--c-link);
  text-decoration: none;
}
.promoted-articles-item a:hover {
  background: var(--c-mist);
  color: var(--c-navy);
  text-decoration: none;
}
.promoted-articles-item .icon-lock::before { color: var(--c-text-muted); }


/* ==========================================================================
   8. COMMUNITY AND RECENT ACTIVITY
   --------------------------------------------------------------------------
   Both are stock Copenhagen home sections and both are still enabled on
   Platform. certain-hc-theme.css deliberately designs no community surfaces
   (Greet was switching community off), so they are given a plain, tidy
   treatment here rather than left at 2020 defaults.

   If Platform turns community off, this whole section becomes dead code and
   can be deleted.
   ========================================================================== */

.section.home-section.community,
.section.home-section.activity {
  margin-block: var(--c-sp-8);
  padding-top: var(--c-sp-7);
  border-top: 1px solid var(--c-border);
}
.home-section > h2 {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 var(--c-sp-4);
}
.community-link {
  display: inline-block;
  font-size: var(--c-fs-body);
  font-weight: 600;
  color: var(--c-link);
}
.community-image { display: none; }   /* 2020 stock illustration, off-brand */

.recent-activity-header {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 var(--c-sp-4);
}
.recent-activity-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.recent-activity-item { border-bottom: 1px solid var(--c-border); padding: var(--c-sp-4) 0; }
.recent-activity-item-parent { font-size: var(--c-fs-label); color: var(--c-text-muted); }
.recent-activity-item-link { font-size: var(--c-fs-body); font-weight: 500; color: var(--c-link); }
.recent-activity-item-link:hover { color: var(--c-navy); }
.recent-activity-item-meta,
.recent-activity-item-time,
.recent-activity-item-comment { font-size: var(--c-fs-label); color: var(--c-text-muted); }
.recent-activity-controls .button { font-size: var(--c-fs-label); }


/* ==========================================================================
   9. LEFTOVERS FROM 2020
   ========================================================================== */

/* Rule 715 is `.promoted-community-flex`, a flex wrapper that no longer has
   markup on the page. Harmless, but zero it so a future template edit does
   not resurrect a stale layout. */
.promoted-community-flex,
.promoted-articles-flex,
.community-flex {
  display: block;
  flex-flow: unset;
}

/* Keep the accessibility helper doing its job — do not make these visible. */
.visibility-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ==========================================================================
   10. RECONCILING THE 2020 RULES
   --------------------------------------------------------------------------
   Added 2026-08-31 after reading the theme's ACTUAL style.css source rather
   than inferring it from the rendered page. Every item here is a rule in the
   live file that fights the new styling. None of these were visible in the
   standalone mockup, because the mockup loads only the new stylesheets — it
   never loads Copenhagen. That is the structural blind spot of previewing a
   theme outside the theme.

   The live file is Zendesk-flavoured SCSS: it uses <brand_color>, <text_color>,
   <link_color>, <heading_font>, <background_color> and darken[)/lighten[), which
   Guide compiles at publish time. Nothing in this stylesheet uses those, so
   plain CSS sits alongside them safely — but do not "tidy" a <variable> out of
   the original file, or the theme settings stop driving it.
   ========================================================================== */

/* ---- 10.1 The hero's vertical-centring hack ------------------------------
   .hero-inner carries `position:relative; top:50%; transform:translateY(-50%)`
   to centre itself inside a fixed 300px .hero. The new hero sizes itself from
   padding, so that transform shifts the whole block half its height upward and
   the title collides with the header. Also releases the 610px cap. */
.section.hero {
  height: auto;
  padding: 0 var(--c-gutter);   /* vertical padding moved to .hero-inner —
                                   the header is nested inside this band, see
                                   the STRUCTURAL note in section 10.8 */
}
.section.hero .hero-inner {
  position: static;
  top: auto;
  transform: none;
  max-width: var(--c-col);
}
/* NOTE: a mobile rule here used to set `.section.hero { padding: 44px 20px }`.
   Removed 2026-08-31 — it would have re-added vertical padding around the
   nested header at narrow width, and because it is a `padding` shorthand it
   also fought the 20px gutter. Narrow-width hero spacing now lives with the
   rest of it in section 10.8. */

/* ---- 10.2 The hero H1 and the request pill ------------------------------
   The live file styles `h1#support-center` (50px, weight 450) and
   `p#new-request` (a 0.5px white bordered pill). Both are ID selectors, so
   they win over anything class-based — they are restyled by id here.

   The ::before title injected in section 1 must NOT appear when a real
   h1#support-center is on the page, or the page shows two titles. :has()
   handles that; it is supported everywhere Guide runs in 2026. */
.section.hero .hero-inner:has(h1#support-center)::before { content: none; }

h1#support-center {
  font-family: var(--c-font-head);
  font-size: var(--c-fs-hero);
  font-weight: 800;
  line-height: var(--c-lh-head);
  color: var(--c-text-on-navy);
  margin: 0 0 var(--c-sp-5);
  order: 1;
}
h1#support-center::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--c-teal);
  border-radius: 2px;
  margin: var(--c-sp-5) auto 0;
}
/* With a real h1 present, the pseudo-rule in section 1 is off, so suppress the
   duplicate rule that ::after would otherwise draw twice. */
.section.hero .hero-inner:has(h1#support-center)::after { content: none; }

p#new-request {
  order: 4;
  display: inline-block;
  width: auto;
  margin: var(--c-sp-5) auto 0;
  background: var(--c-teal);
  color: var(--c-navy);
  border: none;
  border-radius: var(--c-radius-sm);
  padding: var(--c-sp-2) var(--c-sp-4);
  font-family: var(--c-font-body);
  font-size: var(--c-fs-label);
  font-weight: 700;
  opacity: 1;
}

/* ---- 10.3 The search field ---------------------------------------------
   The live file gives `.search input[type="search"]` a 90% width, a 5px
   radius, an inset grey shadow and #999 text, and hangs a magnifier on
   `.search::before` with `background-color:#fff` — which paints a white blob
   over the new field. Hide the pseudo-element; Copenhagen's own clear button
   stays. */
.search::before,
.search-full::before { content: none !important; display: none !important; }

.search input[type="search"],
.search-full input[type="search"] {
  width: 100%;
  height: 54px;
  border-radius: var(--c-radius-card);
  box-shadow: none;
  color: var(--c-text);
  padding-left: var(--c-sp-5);
  padding-right: 52px;
}
.search input[type="search"]:focus,
.search-full input[type="search"]:focus {
  box-shadow: var(--c-focus-ring);
  color: var(--c-text);
}
@media (max-width: 767px) {
  .search input[type="search"],
  .search-full input[type="search"] { height: 48px; }
}

/* ---- 10.4 THE IMPORTANT ONE: .blocks-item:hover * ----------------------
   The live file contains:

       .blocks-item:hover *,
       .blocks-item:focus *,
       .blocks-item:active * { color: <brand_text_color>; text-decoration: none; }

   <brand_text_color> is WHITE. On the old design the whole card went navy on
   hover so white text made sense. The new cards stay white, so hovering any
   card turned every word inside it white on white — the card appeared to go
   blank. A universal-selector rule at 0-1-0 plus `*`, so it is beaten by
   naming the elements, which is what this does. */
.knowledge-base .blocks-item:hover .blocks-item-title,
.knowledge-base .blocks-item:focus .blocks-item-title,
.knowledge-base .blocks-item:active .blocks-item-title { color: var(--c-navy); }

.knowledge-base .blocks-item:hover .blocks-item-description,
.knowledge-base .blocks-item:focus .blocks-item-description,
.knowledge-base .blocks-item:active .blocks-item-description { color: var(--c-text-muted); }

.knowledge-base .blocks-item:hover a.kbtext,
.knowledge-base .blocks-item:focus a.kbtext { color: var(--c-link); }
.knowledge-base .blocks-item a.kbtext:hover { color: var(--c-navy); }

/* The navy Touchpoint card is the one place white-on-hover is still right. */
.blocks-item-tp:hover .blocks-item-title,
.blocks-item-tp:focus .blocks-item-title { color: var(--c-white); }
.blocks-item-tp:hover .blocks-item-description,
.blocks-item-tp:focus .blocks-item-description { color: var(--c-text-on-navy-soft); }

/* The old hover fill was #D6E8F5. Replaced by the elevate pattern. */
.knowledge-base .blocks-item:hover,
.knowledge-base .blocks-item:focus,
.knowledge-base .blocks-item:active {
  background-color: transparent;
}

/* ---- 10.5 The blocks grid ----------------------------------------------
   The live `.blocks-item` is a flex child: `flex: 1 0 340px`, `margin-right:
   30px`, `margin: 0 15px 30px` at >=768px, plus `text-align:center` and a
   <brand_color> border. Inside a CSS grid those margins fight `gap` and the
   340px basis forces overflow at narrow widths. */
.knowledge-base .blocks-item {
  flex: none;
  margin: 0;
  max-width: none;
  justify-content: flex-start;
  text-align: left;
}
.blocks-item-knowledgebase,
.blocks-item-tp { text-align: center; }

/* ---- 10.6 The link table's fixed cell sizing ---------------------------
   `td.center { width: 15%; height: 40px; }` — 15% of a 3-column table leaves
   55% unallocated and pins the row height. Let content size the cells. */
.blocks-item-knowledgebase td.center {
  width: auto;
  height: auto;
}

/* ---- 10.7 Promoted articles ---------------------------------------------
   `.promoted-articles-item { margin-right: 30px }` and the 1224px rule that
   sets `align-self: flex-end` leave a ragged right edge on a full-width list. */
.promoted-articles-item {
  margin-right: 0;
  align-self: auto;
  width: 100%;
  padding: 0;
}
section#promoted-articles { float: none; position: static; }

/* ---- 10.8 Header and footer -------------------------------------------
   `.header { height: 71px }` is a hard height — with the logo at 34px plus
   padding it can clip. `.footer` carries a grey `border-top` and a 60px
   `margin-top`, both wrong under a full-bleed navy band. `.footer-inner` is
   capped at 90% width above 1160px. */
/* The header was reported as too tall, but measurement pointed elsewhere: at
   desktop it is 68px with a 34px logo, while the HERO beneath it was 549px,
   making the navy band 598px of a 765px viewport. The six stray <br> tags in
   section 1 were most of that, and what was perceived as a tall header was
   really 78% of the first screen being navy.

   So the header is only eased slightly here — 68px to 60px, logo 34px to
   30px. Shrinking it harder would make the brand mark small to solve a
   problem the header did not cause. Dial these two together, roughly 2:1, if
   you still want it tighter. */
.header {
  height: auto;
  min-height: 60px;
}
.logo img,
.header .logo img { height: 30px; }

@media (max-width: 767px) {
  .header { min-height: 52px; }
  .logo img, .header .logo img { height: 24px; }
}

/* ---- STRUCTURAL: THE HEADER IS INSIDE THE HERO ------------------------
   Measured on the published site 2026-08-31, after the header was still
   reported as large having already been reduced to 60px:

       section.hero          padding: 64px 20px    h347
         |- div.header       h63   top 114   <-- pushed down by hero padding
         |- div.hero-inner   h156  top 177

   On stock Copenhagen — and on the Greet theme this project started from —
   `.header` is a direct child of <body>, a SIBLING of `.hero`. On this 2020
   Platform theme it is nested INSIDE the hero. So the hero's vertical padding
   was not padding the hero content, it was pushing the header down: 64px of
   empty navy sat above the logo before anything rendered.

   That is what "the top header is still large" actually was. The header row
   itself measured 63px, which is correct — the space above it was the fault.

   Fix: the band owns no vertical padding. The header sits flush at the top of
   the navy, and the hero CONTENT carries its own spacing instead. This is
   also why the earlier fix only appeared to shrink the hero: it reduced the
   padding on both sides of the header equally, so the gap above the logo
   shrank but never went away.

   NOTE FOR THE OTHER BRANDS: do not copy this block to Touchpoint or Greet
   without checking their DOM first. If their `.header` is a body-level
   sibling (the stock arrangement), the hero should keep its own padding and
   this rule would collapse the band. */
.section.hero { padding-block: 0; }
.section.hero > .header { min-height: 60px; }
.section.hero > .hero-inner { padding-block: var(--c-sp-7) var(--c-sp-8); }

@media (max-width: 767px) {
  .section.hero > .header { min-height: 52px; }
  .section.hero > .hero-inner { padding-block: var(--c-sp-6) var(--c-sp-7); }
}

.footer {
  border-top: none;
  margin-top: var(--c-sp-9);
  padding: var(--c-sp-7) var(--c-gutter);
}
.footer-inner {
  max-width: var(--c-col);
  width: 100%;
  padding: 0;
}
.footer a { color: var(--c-text-on-navy-soft); }
.footer-language-selector { color: var(--c-text-on-navy-soft); }

/* ---- 10.9 [role="button"] ----------------------------------------------
   Copenhagen renders most buttons as `<a role="button">`, and the live file
   styles `.button, [role="button"]` together. certain-hc-theme.css only names
   `.button`, so a role-button kept the 2020 look — 12px type, 4px radius,
   <brand_color> outline. Bring them into the new button system. */
[role="button"] {
  font-family: var(--c-font-body);
  font-size: var(--c-fs-label);
  font-weight: 600;
  border-radius: var(--c-radius-sm);
  border: 1px solid var(--c-navy);
  color: var(--c-navy);
  line-height: 1.6;
  padding: var(--c-sp-2) var(--c-sp-5);
}
[role="button"]:hover,
[role="button"]:focus,
[role="button"][aria-selected="true"] {
  background-color: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}
/* The article vote buttons are role-buttons too, and they set their own
   colours in section 11 of the theme file. Keep them out of the navy fill. */
.article-vote[role="button"],
.article-vote {
  color: var(--c-navy);
  border-color: var(--c-border);
  background: var(--c-white);
}
.article-vote:hover { background-color: var(--c-white); }

/* ---- 10.10 Section headings -------------------------------------------
   `.section h2 { text-align: center }`. Centred is right for the two full-
   width panels and wrong for a left-aligned list heading. */
section.articles > h2,
.home-section > h2,
.recent-activity-header { text-align: left; }

/* ---- 10.11 Body type ---------------------------------------------------
   The live file sets `body { font-size: 15px }` and `h1..h6 { font-weight:
   400 }`. certain-hc-theme.css sets 16px and 800 on headings, and is loaded
   after, so it already wins — listed here only so the difference is on the
   record rather than a surprise. `h3 { color:#0D2958 }` is one step off
   Lanyard Blue #0b2958 and is corrected by the theme file. */

/* ==========================================================================
   11. REQUEST FORM AND SEARCH RESULTS
   --------------------------------------------------------------------------
   Added 2026-08-31 after measuring the two customer-facing templates on the
   live preview. Four defects, all confirmed by computed style rather than by
   eye. The first is the one that mattered.
   ========================================================================== */

/* ---- 11.1 Search result titles had NO hierarchy -------------------------
   certain-hc-theme.css styles `.search-result-title a`. That element does not
   exist in this Copenhagen version — the real markup is:

       <li class="search-result">
         <a class="search-result-link">How to Set Your Registration Window…</a>

   So every result title rendered as plain Inter 16px weight 400: the same as
   body copy, on the page where scanning a list of titles IS the entire task.
   Measured, not guessed — `.search-result-title a` returned MISSING while
   `a.search-result-link` computed to `Inter 16px w400`. */
.search-result-link,
a.search-result-link,
.search-result-title a {
  display: inline-block;
  font-family: var(--c-font-head);
  font-size: var(--c-fs-h3);
  font-weight: 700;
  line-height: var(--c-lh-tight);
  color: var(--c-navy);
  text-decoration: none;
  margin-bottom: var(--c-sp-2);
}
.search-result-link:hover,
a.search-result-link:hover,
.search-result-title a:hover {
  color: var(--c-link);
  text-decoration: underline;
}

/* The 2020 rule `.search-results-list > li` scores 0-1-1 and outranks
   `.search-result` at 0-1-0, so the hairline stayed #ddd instead of the
   token. Same element, higher-scoring selector. */
.search-results-list > li,
.search-results-list > li:first-child {
  border-color: var(--c-border);
}
.search-results-list > li { padding: var(--c-sp-5) 0; }

/* ---- 11.2 Field hints were 12px --------------------------------------
   The live theme sets `.form-field p { font-size: 12px }` and Copenhagen
   renders a field's help text as a BARE <p> inside .form-field — so the
   `.form-field .hint` rule in the theme file never reached it.

   This is real instructional copy on the highest-stakes screen a customer
   touches ("Please tell us which Organization…"), sitting four points below
   the brand floor. Fixed by selector, not by !important. */
.form-field > p,
.form-field p:not(.hint) {
  font-size: var(--c-fs-label);
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: var(--c-sp-2) 0 0;
}

/* `.form footer a` was 13px. */
.form footer a,
.request-form footer a {
  font-size: var(--c-fs-label);
  color: var(--c-text-muted);
}

/* The attachment widget's "Add file" link measured 13px and carries NO class,
   so nothing in the theme reached it. It is the control that lets a customer
   attach the screenshot that makes their ticket solvable, so it should not be
   the smallest text on the page. */
.form a[class=""],
.form-field a:not([class]),
.upload-dropzone a,
.attachments a:not([class]) {
  font-size: var(--c-fs-label);
  font-weight: 600;
  color: var(--c-link);
}

/* ---- 11.3 The collaborators / CC field ------------------------------
   `input[id^="request_collaborators"]` sits OUTSIDE any .form-field wrapper
   — its parent carries no class at all — so it kept pure browser defaults:
   30px tall, 0/7.5px padding, black border. Every sibling input measured
   46px with a #BFBFBF border. Only visible to signed-in users with CC
   enabled, which is why it survived this long. */
/* !important, reluctantly. Verified on the live preview 2026-08-31: the rule
   above DID match (min-height took effect) but `padding` and `border` were
   still coming out as `0 7.5px` and currentColor. The winning declaration
   lives in one of Zendesk's own stylesheets — `application-*.css` or
   `theming_v1_support-*.css` — which are cross-origin and cannot be
   enumerated from the page, so there is no selector to out-specify. The
   0/0.5em padding shape is a token-widget default.

   This is the ONE place in this stylesheet where !important is used against
   an opponent that cannot be read. Do not copy the pattern elsewhere. */
.form input[id^="request_collaborators"],
.request-form input[id^="request_collaborators"],
.comment-ccs input[type="text"] {
  width: 100%;
  height: auto;
  min-height: 46px;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border-input) !important;
  border-radius: var(--c-radius);
  padding: var(--c-sp-3) var(--c-sp-4) !important;
}
/* The widget sizes the input with an inline `width` as you type, so the 100%
   above loses to it. Let the token list be the box instead. */
.form-field > ul:has(input[id^="request_collaborators"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.form input[id^="request_collaborators"]:focus,
.request-form input[id^="request_collaborators"]:focus {
  border-color: var(--c-teal);
  box-shadow: var(--c-focus-ring);
  outline: none;
}

/* ---- 11.3b THE NESTY DROPDOWNS ---------------------------------------
   Reported at 320px and confirmed by measurement 2026-08-31.

   Zendesk does not use the native <select> on the request form. It hides it
   (the real selects measure 0x0) and renders its own "Nesty" widget as
   `<a class="nesty-input">`, with the option list in `div.nesty-panel`.
   Nothing in the theme knew about either element, so two faults compounded:

   1. TEXT CLIPPED. The live theme sets `.form-field .nesty-input { height:
      40px; line-height: 40px }` with no padding. The new input styling adds
      `padding: 12px 16px`. Together, inside a fixed 40px box, the content
      needed 64px of height against a 38px client box — measured
      scrollHeight 64 / clientHeight 38. The label sat low and cut off, which
      is exactly the "a little off" look.

   2. FIELD COLLAPSED. The parent `.form-field` measured 176px inside a form
      offering ~286px at a 320px viewport, so the control was both short and
      ragged against the full-width text inputs beside it.

   Fixed by giving Nesty a real box model rather than by nudging numbers:
   height auto with a min-height matching the text inputs, normal
   line-height, and the field forced back to full width.
   ---------------------------------------------------------------------- */

/* The field itself. Something in the 2020 cascade lets select-type fields
   shrink to content; block + 100% puts them back in line with the rest. */
.form .form-field,
.request-form .form-field {
  display: block;
  width: 100%;
}

.form-field .nesty-input,
a.nesty-input {
  display: block;
  width: 100% !important;   /* Nesty writes its own inline max-width */
  box-sizing: border-box;
  height: auto;
  min-height: 46px;
  line-height: 1.4;
  padding: var(--c-sp-3) 40px var(--c-sp-3) var(--c-sp-4);
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border-input);
  border-radius: var(--c-radius);
  position: relative;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-field .nesty-input:hover,
a.nesty-input:hover { text-decoration: none; border-color: var(--c-navy); }
.form-field .nesty-input:focus,
a.nesty-input:focus {
  border-color: var(--c-teal);
  box-shadow: var(--c-focus-ring);
  outline: none;
}

/* It is a dropdown, so it should look like one. The native select's arrow is
   not available here because this is an <a>. */
.form-field .nesty-input::after,
a.nesty-input::after {
  content: "";
  position: absolute;
  right: var(--c-sp-4);
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--c-text-muted);
  border-bottom: 2px solid var(--c-text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* The open option list. Previously unstyled entirely. */
.nesty-panel {
  box-sizing: border-box;
  max-width: calc(100vw - 2 * var(--c-gutter));
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: var(--c-sp-2);
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  z-index: 20;
}
.nesty-panel a,
.nesty-panel li a {
  display: block;
  padding: var(--c-sp-3) var(--c-sp-4);
  border-radius: var(--c-radius-sm);
  color: var(--c-text);
  text-decoration: none;
  line-height: 1.4;
}
.nesty-panel a:hover,
.nesty-panel a:focus {
  background: var(--c-mist);
  color: var(--c-navy);
  text-decoration: none;
}
.nesty-panel .nesty-header,
.nesty-panel .nesty-selected {
  font-weight: 600;
  color: var(--c-navy);
}

/* ---- 11.4 The select arrow -------------------------------------------
   The 2020 theme drew its own dropdown arrow with
   `background: url(<assets-dropdown-arrow-svg>) no-repeat #fff` plus
   `-webkit-appearance: none`. certain-hc-theme.css sets `appearance: auto`,
   which hands rendering back to the browser — so the custom arrow is gone
   and the native one draws instead. That is the better outcome for
   accessibility and high DPI, but it leaves the 30px right padding stranded.
   Trim it so the text does not sit oddly far from the arrow. */
.form-field select,
select {
  padding-right: var(--c-sp-4);
  background-image: none;
}

/* ==========================================================================
   END — PLATFORM BRIDGE
   ========================================================================== */