/* Custom Stylesheet hash:16052883481789586994 dated 16 Sep, 2026 15:30:05+America/New_York */
/* ==========================================================================
   Correlated Solutions help center - header brand treatment
   Paste into: Customize -> Custom CSS  (correlated.kayako.com)

   Palette source: cs-brand-foundations.html, Color section.
     Correlated Blue  #12527A   primary
     Deep Navy        #003257   hover / pressed
     Amber            #E39D22   primary accent - CTAs, highlights
     Ink              #231F20   text on amber

   Contrast measured against the live page, not estimated:
     white on #12527A .............. 8.35:1   AAA
     white 75% on #12527A .......... 5.50:1   AA
     #231F20 on #E39D22 ............ 7.07:1   AAA
   Do not swap the amber CTA to white text - that pair is 2.30:1.

   Scope: .header__top only, which is the customer-facing bar. Kayako's
   agent toolbar (.admin-header) is deliberately untouched - it renders
   only for signed-in agents and no customer ever sees it.
   ========================================================================== */

/* 1. The bar itself ------------------------------------------------------ */
.header__top {
  background: #12527A;
  border-bottom-color: #003257;
}

/* 2. Wordmark reversed out of the navy.
      FALLBACK ONLY. The uploaded logo is single-ink #12527A on a
      transparent field, so brightness(0) invert(1) resolves to pure
      #FFFFFF - the "white reversed out of navy" lockup the brand guide
      sanctions. Preferred fix is uploading the real white asset; see the
      note accompanying this file. */
.header__top .branding__logo {
  filter: brightness(0) invert(1);
}

/* 3. Header links ------------------------------------------------------- */
.header__top .menu__link,
.header__top .menu__link .menu__truncate,
.header__top .menu__link .menu__icon,
.header__top .menu > a:not(.menu__submit) {
  color: #FFFFFF;
}

.header__top .menu__link:hover,
.header__top .menu__link:hover .menu__truncate,
.header__top .menu > a:not(.menu__submit):hover {
  color: rgba(255, 255, 255, 0.75);
}

/* 4. Primary CTA in amber with ink text.
      The :not(.menu__submit) above is load-bearing: .menu__submit is also
      a .menu > a, and that selector outranks this block on specificity
      (0,2,1 vs 0,2,0). Without it the CTA renders white on amber - 2.30:1.
      .menu__submit ships as display:inline with no padding, so the pill
      geometry is added here rather than only recoloured. */
.header__top .menu__submit,
.header .wrap--body > a.button {
  display: inline-block;
  padding: 8px 16px;
  border: 0;
  border-radius: 2px;
  background: #E39D22;
  color: #231F20;
  font-weight: 600;
}

.header__top .menu__submit:hover,
.header .wrap--body > a.button:hover {
  background: #D08F1B;
  color: #231F20;
}

/* 5. Account dropdown stays a light popover. It is nested inside
      .header__top, so it has to be exempted from the white-text rules
      above or it renders white-on-white. */
.header__top .nav__menu {
  background: #FFFFFF;
}

.header__top .nav__menu a,
.header__top .nav__menu a .menu__truncate {
  color: #505357;
}

.header__top .nav__menu a:hover {
  color: #12527A;
}

/* 6. Avatar needs an edge so it does not float on the blue. */
.header__top .menu__avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* 7. Mobile search icon sits inside the header on small screens. */
.header .search--mobile .icon-search {
  color: #FFFFFF;
}
a, a:hover, a:focus, a:active, .u-visuallink, .u-visuallink:hover,
.heading--blue,
.fr-toolbar .fr-command.fr-btn.fr-active,
.fr-popup .fr-command.fr-btn.fr-active,
.fr-desktop .fr-command.fr-active:hover,
.fr-desktop .fr-command.fr-active:focus,
.fr-desktop .fr-command.fr-active.fr-selected,
.fr-popup .fr-colors-tabs .fr-colors-tab:hover,
.fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab,
.tab__notCurrent a:hover {
	color: #12527a;
}

.button--primary,
.button--primary:hover:enabled,
.button--primary:focus:enabled,
.button--primary:active:enabled,
.nav__menu a:hover, .nav__menu a:active, .dd__link:hover,
.fr-popup .fr-checkbox input:checked + span,
.fr-popup .fr-colors-tabs .fr-colors-tab[data-param1="background"]::after,
.fr-image-resizer .fr-handler,
.fr-image-progress-bar-layer > div.fr-loader span,
.autocomplete--field__item:hover, .autocomplete--field__item.is-selected {
	background-color: #12527a;
}

.textfield:focus,
.search-wrapslim .inputaddon__field:focus,
.file-btn:focus, .file-btn.is-active, .dz-drag-hover {
	border-color: #12527a;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 4px -1px #12527a;
}

.button--primary:focus:enabled, .button--primary:active:enabled,
.select:focus, .drill-default:focus, .drill-default.drill-focus {
	box-shadow: 0 0 3px 0 #12527a;
}

.tab > li,
.textfield.picker__input--active,
.textfield--heading:focus,
.pager__selected,
.tab__notCurrent:hover,
.picker__select--month:focus, .picker__select--year:focus,
.picker__day--highlighted, .picker__day--selected:hover,
.picker--focused .picker__day--selected, .picker__button--clear:focus,
.picker__button--close:focus,
.fr-popup .fr-input-line input[type="text"]:focus,
.fr-popup .fr-input-line textarea:focus,
.fr-popup .fr-checkbox input:checked + span,
.fr-popup .fr-checkbox input:focus + span,
.fr-image-resizer, .fr-image-upload-layer.fr-drop,
table td.fr-selected-cell, table th.fr-selected-cell,
.fr-table-resizer div,
.fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
	border-color: #12527a;
}

input[type="checkbox"].switch:focus + div {
	box-shadow: 0 0 .2em 1px #12527a, 0 1px 1px hsla(0,0%,100%,.6);
}

.picker__day--today:before,
.picker__button--today:before {
	border-top-color: #12527a;
}