/* Harbert Bridge shared brand | Version 2.0.0
 * Target: the three enhanced LWR sites ONLY.
 * Static Resource name: HarbertExperienceBrand (upload this CSS, not the ZIP).
 * Installation: INSTALLATION.html. Full rationale: RESEARCH.md.
 * Core branding is active globally through documented DXP hooks.
 * No body/html font-size or line-height; no field, shadow, neutral, status,
 * spacing, SLDS-class, or internal Flow selectors. No JavaScript or font fetch.
 * Supported components consume these hooks; local palettes/overrides can win.
 * The two legacy Aura sites must not reference this resource.
 */

/* Shared palette. Both selectors declare custom properties only. Body scope
 * handles ordinary inherited root-theme values; closer component settings can
 * still override them. Do not fight such settings with !important. */
:root, body {
  --harbert-brand-version: "2.3.0";
  --harbert-navy: #0b2341;
  --harbert-orange: #e86100;
  --harbert-brick: #cc4e0b;
  --harbert-white: #ffffff;
  --harbert-ink: #222222;
  --harbert-surface: #f6f6f6;
  --harbert-action-hover: #081a31;
  --harbert-action-active: #061426;
  --harbert-action-deep: #040e1b;
  --harbert-font: "sweet-sans-pro", "Sweet Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --harbert-button-radius: 0.25rem;
  --dxp-g-root: var(--harbert-white);
  --dxp-g-root-1: var(--harbert-surface);
  --dxp-g-root-2: #ededed;
  --dxp-g-root-3: #e3e3e3;
  --dxp-g-root-contrast: var(--harbert-ink);
  --dxp-g-root-contrast-1: var(--harbert-ink);
  --dxp-g-root-contrast-2: var(--harbert-ink);
  --dxp-g-root-contrast-3: var(--harbert-ink);
  --dxp-g-brand: var(--harbert-navy);
  --dxp-g-brand-1: var(--harbert-action-hover);
  --dxp-g-brand-2: var(--harbert-action-active);
  --dxp-g-brand-3: var(--harbert-action-deep);
  --dxp-g-brand-contrast: var(--harbert-white);
  --dxp-g-brand-contrast-1: var(--harbert-white);
  --dxp-g-brand-contrast-2: var(--harbert-white);
  --dxp-g-brand-contrast-3: var(--harbert-white);
}

/* Standard LWR presentation hooks: active on all three participating sites.
 * Input typography and dimensions continue to come from the existing theme. */
:root, body {
  --dxp-s-link-text-color: var(--dxp-g-brand);
  --dxp-s-link-text-color-hover: var(--dxp-g-brand-1);
  --dxp-s-link-text-decoration: underline;
  --dxp-s-link-text-decoration-hover: underline;
  --dxp-s-link-text-decoration-focus: underline;
  --dxp-s-button-color: var(--dxp-g-brand);
  --dxp-s-button-border-color: var(--dxp-g-brand);
  --dxp-s-button-color-contrast: var(--dxp-g-brand-contrast);
  --dxp-s-button-color-hover: var(--dxp-g-brand-1);
  --dxp-s-button-border-color-hover: var(--dxp-g-brand-1);
  --dxp-s-button-color-hover-contrast: var(--dxp-g-brand-contrast-1);
  --dxp-s-button-color-focus: var(--dxp-g-brand-2);
  --dxp-s-button-border-color-focus: var(--dxp-g-brand-2);
  --dxp-s-button-color-focus-contrast: var(--dxp-g-brand-contrast-2);
  --dxp-s-secondary-button-color: var(--dxp-g-root);
  --dxp-s-secondary-button-border-color: var(--dxp-g-brand);
  --dxp-s-secondary-button-text-color: var(--dxp-g-brand);
  --dxp-s-secondary-button-color-hover: var(--dxp-g-root-1);
  --dxp-s-secondary-button-border-color-hover: var(--dxp-g-brand-1);
  --dxp-s-secondary-button-text-color-hover: var(--dxp-g-brand-1);
  --dxp-s-secondary-button-color-focus: var(--dxp-g-root-1);
  --dxp-s-secondary-button-border-color-focus: var(--dxp-g-brand-2);
  --dxp-s-secondary-button-text-color-focus: var(--dxp-g-brand-2);
  --dxp-s-tertiary-button-color: transparent;
  --dxp-s-tertiary-button-border-color: transparent;
  --dxp-s-tertiary-button-text-color: var(--dxp-g-brand);
  --dxp-s-tertiary-button-color-hover: var(--dxp-g-root-1);
  --dxp-s-tertiary-button-border-color-hover: transparent;
  --dxp-s-tertiary-button-text-color-hover: var(--dxp-g-brand-1);
  --dxp-s-tertiary-button-color-focus: var(--dxp-g-root-1);
  --dxp-s-tertiary-button-border-color-focus: transparent;
  --dxp-s-tertiary-button-text-color-focus: var(--dxp-g-brand-2);
  --dxp-s-button-font-family: var(--harbert-font);
  --dxp-s-button-font-weight: 600;
  --dxp-s-button-radius-border: var(--harbert-button-radius);
  --dxp-s-button-small-radius-border: var(--harbert-button-radius);
  --dxp-s-button-large-radius-border: var(--harbert-button-radius);
  --dxp-s-text-heading-extra-large-color: var(--dxp-g-brand);
  --dxp-s-text-heading-extra-large-font-family: var(--harbert-font);
  --dxp-s-text-heading-large-color: var(--dxp-g-brand);
  --dxp-s-text-heading-large-font-family: var(--harbert-font);
  --dxp-s-text-heading-medium-color: var(--dxp-g-brand);
  --dxp-s-text-heading-medium-font-family: var(--harbert-font);
  --dxp-s-text-heading-small-color: var(--dxp-g-brand);
  --dxp-s-text-heading-small-font-family: var(--harbert-font);
  --dxp-s-text-heading-extra-small-color: var(--dxp-g-brand);
  --dxp-s-text-heading-extra-small-font-family: var(--harbert-font);
  --dxp-s-text-heading-extra-extra-small-color: var(--dxp-g-brand);
  --dxp-s-text-heading-extra-extra-small-font-family: var(--harbert-font);
}

/* OPTIONAL: one class on an existing header/footer SECTION, never on a Flow
 * section or its ancestor. Makes that section navy with inverse text/hooks.
 * Existing local child palettes can override inheritance; inspect if needed.
 * The class does not build a menu or replace the existing theme layout. */
.harbert-masthead {
  --dxp-g-root: var(--harbert-navy);
  --dxp-g-root-1: #173b60;
  --dxp-g-root-2: #1e466d;
  --dxp-g-root-3: #26517a;
  --dxp-g-root-contrast: var(--harbert-white);
  --dxp-g-brand-contrast: var(--harbert-navy);
  --dxp-g-root-contrast-1: var(--harbert-white);
  --dxp-g-brand-contrast-1: var(--harbert-navy);
  --dxp-g-root-contrast-2: var(--harbert-white);
  --dxp-g-brand-contrast-2: var(--harbert-navy);
  --dxp-g-root-contrast-3: var(--harbert-white);
  --dxp-g-brand-contrast-3: var(--harbert-navy);
  --dxp-g-brand: var(--harbert-white);
  --dxp-g-brand-1: #f6f6f6;
  --dxp-g-brand-2: #ededed;
  --dxp-g-brand-3: #e3e3e3;
  --dxp-s-link-text-color: var(--dxp-g-brand);
  --dxp-s-link-text-color-hover: var(--dxp-g-brand-1);
  --dxp-s-link-text-decoration: underline;
  --dxp-s-link-text-decoration-hover: underline;
  --dxp-s-link-text-decoration-focus: underline;
  --dxp-s-button-color: var(--dxp-g-brand);
  --dxp-s-button-border-color: var(--dxp-g-brand);
  --dxp-s-button-color-contrast: var(--dxp-g-brand-contrast);
  --dxp-s-button-color-hover: var(--dxp-g-brand-1);
  --dxp-s-button-border-color-hover: var(--dxp-g-brand-1);
  --dxp-s-button-color-hover-contrast: var(--dxp-g-brand-contrast-1);
  --dxp-s-button-color-focus: var(--dxp-g-brand-2);
  --dxp-s-button-border-color-focus: var(--dxp-g-brand-2);
  --dxp-s-button-color-focus-contrast: var(--dxp-g-brand-contrast-2);
  --dxp-s-secondary-button-color: var(--dxp-g-root);
  --dxp-s-secondary-button-border-color: var(--dxp-g-brand);
  --dxp-s-secondary-button-text-color: var(--dxp-g-brand);
  --dxp-s-secondary-button-color-hover: var(--dxp-g-root-1);
  --dxp-s-secondary-button-border-color-hover: var(--dxp-g-brand-1);
  --dxp-s-secondary-button-text-color-hover: var(--dxp-g-brand-1);
  --dxp-s-secondary-button-color-focus: var(--dxp-g-root-1);
  --dxp-s-secondary-button-border-color-focus: var(--dxp-g-brand-2);
  --dxp-s-secondary-button-text-color-focus: var(--dxp-g-brand-2);
  --dxp-s-tertiary-button-color: transparent;
  --dxp-s-tertiary-button-border-color: transparent;
  --dxp-s-tertiary-button-text-color: var(--dxp-g-brand);
  --dxp-s-tertiary-button-color-hover: var(--dxp-g-root-1);
  --dxp-s-tertiary-button-border-color-hover: transparent;
  --dxp-s-tertiary-button-text-color-hover: var(--dxp-g-brand-1);
  --dxp-s-tertiary-button-color-focus: var(--dxp-g-root-1);
  --dxp-s-tertiary-button-border-color-focus: transparent;
  --dxp-s-tertiary-button-text-color-focus: var(--dxp-g-brand-2);
  --dxp-s-button-font-family: var(--harbert-font);
  --dxp-s-button-font-weight: 600;
  --dxp-s-button-radius-border: var(--harbert-button-radius);
  --dxp-s-button-small-radius-border: var(--harbert-button-radius);
  --dxp-s-button-large-radius-border: var(--harbert-button-radius);
  --dxp-s-text-heading-extra-large-color: var(--dxp-g-brand);
  --dxp-s-text-heading-extra-large-font-family: var(--harbert-font);
  --dxp-s-text-heading-large-color: var(--dxp-g-brand);
  --dxp-s-text-heading-large-font-family: var(--harbert-font);
  --dxp-s-text-heading-medium-color: var(--dxp-g-brand);
  --dxp-s-text-heading-medium-font-family: var(--harbert-font);
  --dxp-s-text-heading-small-color: var(--dxp-g-brand);
  --dxp-s-text-heading-small-font-family: var(--harbert-font);
  --dxp-s-text-heading-extra-small-color: var(--dxp-g-brand);
  --dxp-s-text-heading-extra-small-font-family: var(--harbert-font);
  --dxp-s-text-heading-extra-extra-small-color: var(--dxp-g-brand);
  --dxp-s-text-heading-extra-extra-small-font-family: var(--harbert-font);
  background-color: var(--harbert-navy);
  color: var(--harbert-white);
  border-bottom: 3px solid var(--harbert-orange);
}

.button {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  padding: 1em 1.1em;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color .25s ease-out, color .25s ease-out;
  font-family: sweet-sans-pro, Helvetica, Roboto, Arial, sans-serif;
  font-size: 1.1rem;
  -webkit-appearance: none;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  color: #cc4e0b
}

.button {
  border: 0;
  font-weight: 400;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
  text-align: left;
  text-decoration: none !important;
  color: #cc4e0b;
  transition: .4s color;
  position: relative;
  z-index: 1
}

.button.readMore {
  padding-right: 3.61111rem
}

.button:focus,
.button:hover {
  background: #e65722;
  color: #fff
}

.button:focus:after,
.button:hover:after {
  opacity: 1;
  transform: translateX(0)
}

.button:not(.expanded) {
  margin-right: .83333rem
}

.button:not(.expanded)+.button {
  margin-bottom: 1rem
}

.button .readMore-icon {
  margin-left: 0;
  line-height: 1;
  position: absolute;
  top: calc(50% - .61111rem);
  right: 2.22222rem;
  z-index: 1
}

.button .readMore-icon svg {
  transform: translateX(.77778rem)
}

@media print,
screen and (min-width:64em) {
  .button .readMore-icon {
    margin-left: 1.94444rem
  }
}

.button.small {
  padding: .66667rem 1.38889rem
}

.button.small.readMore {
  padding-right: 2.77778rem
}

.button.small.readMore.button--light {
  padding-right: 1.94444rem
}

.button.small .readMore-icon {
  right: 1.66667rem
}

.button.small .readMore-icon svg {
  transform: translateX(.55556rem) translateY(.16667rem)
}

.button.button--wide .readMore-icon,
.button.expanded .readMore-icon {
  float: right
}

.button.button--notchless {
  background: #cc4e0b;
  color: #fff;
  box-shadow: none
}

.button.button--notchless:focus,
.button.button--notchless:hover {
  background: #e65722
}

.button.button--notchless path {
  stroke: #fff
}

.button.button--notchless.button--light {
  color: #fff;
  background-color: #3e5984;
  box-shadow: 0 1px 4px 2px rgba(0, 0, 0, .28)
}

.button.button--notchless.button--light .button-icon path {
  stroke: #9bd9e9
}

.button.button--notchless.secondary {
  background: #0b2341
}

.button.button--notchless.secondary:focus,
.button.button--notchless.secondary:hover {
  background: #336fd9
}

.button.button--notchless.secondary path {
  stroke: #fff
}

.button:not(.button--notchless) {
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background: 0 0
}

.button:not(.button--notchless):after {
  content: "";
  background-color: #fff;
  position: absolute;
  top: 0;
  margin: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -2
}

.button:not(.button--notchless):before {
  transform: translateX(calc(-100% + 15px))
}

.button:not(.button--notchless) .angle {
  transition: .3s right, .3s transform;
  z-index: -1;
  left: auto;
  transform: translateX(.83333rem);
  right: 100%;
  width: auto
}

.button:not(.button--notchless) .angle svg {
  fill: #e65722;
  width: auto
}

.button:not(.button--notchless):before {
  content: "";
  background-color: #e65722;
  position: absolute;
  transition: .3s transform;
  z-index: -1;
  top: 0;
  left: -.05556rem;
  top: -.05556rem;
  width: calc(100% + .83333rem);
  height: 100%;
  height: calc(100% + .11111rem);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%)
}

.button:not(.button--notchless):focus,
.button:not(.button--notchless):hover {
  color: #fff;
  background: 0 0
}

.button:not(.button--notchless):focus:not(.button--light) .angle,
.button:not(.button--notchless):hover:not(.button--light) .angle {
  right: 0;
  transform: translateX(-2.5rem)
}

.button:not(.button--notchless):focus:before,
.button:not(.button--notchless):hover:before {
  transform: translateX(0)
}

.button:not(.button--notchless):focus.readMore:before,
.button:not(.button--notchless):hover.readMore:before {
  transform: translateX(-3.05556rem)
}

.button:not(.button--notchless).small:focus:before,
.button:not(.button--notchless).small:hover:before {
  transform: translateX(-2.5rem)
}

.button:not(.button--notchless) .readMore-icon {
  width: 0
}

.button:not(.button--notchless) .readMore-icon path {
  stroke: #cc4e0b
}

.button:not(.button--notchless).secondary {
  color: #cc4e0b
}

.button:not(.button--notchless).secondary path {
  stroke: #3e5984
}

.button:not(.button--notchless).secondary:before {
  background-color: #0b2341;
}

.button:not(.button--notchless).secondary .angle svg {
  fill: #0b2341;
}

.button:not(.button--notchless).secondary:focus,
.button:not(.button--notchless).secondary:hover {
  color: #fff
}

.button:not(.button--notchless).secondary:focus path,
.button:not(.button--notchless).secondary:hover path {
  stroke: #cc4e0b
}

.button:not(.button--notchless).button--light {
  color: #fff
}

.button:not(.button--notchless).button--light:not(.secondary):before {
  background-color: #ffffff
}

.button:not(.button--notchless).button--light:not(.secondary) .angle svg {
  fill: #ffffff
}

.button:not(.button--notchless).button--light:not(.secondary):after {
  background-color: #0093d2
}

.button:not(.button--notchless).button--light:not(.secondary) .readMore-icon {
  opacity: 0;
  transition: .3s opacity
}

.button:not(.button--notchless).button--light:not(.secondary) .readMore-icon path {
  stroke: #ffffff
}

.button:not(.button--notchless).button--light:not(.secondary):focus .readMore-icon,
.button:not(.button--notchless).button--light:not(.secondary):hover .readMore-icon {
  opacity: 1
}

.button:not(.button--notchless).button--light:not(.secondary):focus:before,
.button:not(.button--notchless).button--light:not(.secondary):hover:before {
  transform: translateX(calc(-100% + 15px))
}

.button:not(.button--notchless).button--light:not(.secondary) path {
  stroke: #fff
}

.button:not(.button--notchless).button--light.secondary {
  background-color: #fff;
  color: #cc4e0b
}

.button:not(.button--notchless).button--light.secondary path {
  stroke: #0b2341
}

.button:not(.button--notchless).button--light.secondary:before {
  display: none
}

.button:not(.button--notchless).button--light.secondary:focus path,
.button:not(.button--notchless).button--light.secondary:hover path {
  stroke: #cc4e0b
}

.button--icon {
  text-align: center
}

.button--icon .button-icon {
  margin-right: .55556rem;
  color: #e65722
}

@media print,
screen and (min-width:64em) {
  .button--wide {
    width: 15rem
  }
}

/* OPTIONAL content accents; no descendant field or typography selectors. */
.harbert-accent-rule { border-top: 3px solid var(--harbert-orange); }
.harbert-panel { background-color: var(--harbert-surface); }