/* Harbert Bridge shared brand | Version 3.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: "3.0";
  --harbert-navy: #0b2341;
  --harbert-orange: #e86100;
  --harbert-brick: #cc4e0b;
  --harbert-brick-hover: #a83f08;
  --harbert-brick-active: #8f3506;
  --harbert-teal: #006c9a;
  --harbert-white: #ffffff;
  --harbert-ink: #222222;
  --harbert-surface: #e7e9ec;
  --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: 8px solid var(--harbert-orange);
}

/* OPTIONAL: orange primary buttons. Put the class on the section or column
 * that holds the main Bridge actions, never on a Flow section or its ancestor.
 * Only the primary-button hooks change; Secondary/Tertiary keep the navy palette. */
.harbert-accent-buttons {
  --dxp-s-button-color: var(--harbert-brick);
  --dxp-s-button-border-color: var(--harbert-brick);
  --dxp-s-button-color-contrast: var(--harbert-white);
  --dxp-s-button-color-hover: var(--harbert-brick-hover);
  --dxp-s-button-border-color-hover: var(--harbert-brick-hover);
  --dxp-s-button-color-hover-contrast: var(--harbert-white);
  --dxp-s-button-color-focus: var(--harbert-brick-active);
  --dxp-s-button-border-color-focus: var(--harbert-brick-active);
  --dxp-s-button-color-focus-contrast: var(--harbert-white);
}


.button {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  padding: 1em 1.1em;
  border: 0;
  border-radius: 2px;
  background-color: #fff;
  color: var(--harbert-brick);
  /*font-family: sweet-sans-pro, Helvetica, Roboto, Arial, sans-serif;*/
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color .25s ease-out, color .4s;
}

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

.button:hover,
.button:focus {
  background-color: var(--harbert-orange);
  color: #fff;
}

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

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

.button .readMore-icon {
  position: absolute;
  top: calc(50% - .61111rem);
  right: 2.22222rem;
  z-index: 1;
  margin-left: 0;
  line-height: 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: 2rem
}

.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: var(--harbert-brick);
  color: #fff;
  box-shadow: none
}

.button.button--notchless:focus,
.button.button--notchless:hover {
  background: var(--harbert-orange);
}

.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: var(--harbert-navy)
}

.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) .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: var(--harbert-orange);
  width: auto
}

.button:not(.button--notchless):before {
  content: "";
  background-color: var(--harbert-orange);
  position: absolute;
  transform: translateX(calc(-100% + 15px));
  transition: .3s transform;
  z-index: -1;
  left: -.05556rem;
  top: -.05556rem;
  width: calc(100% + .83333rem);
  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: var(--harbert-brick)
}

.button:not(.button--notchless).secondary {
  color: var(--harbert-brick)
}

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

.button:not(.button--notchless).secondary:before {
  background-color: var(--harbert-navy);
}

.button:not(.button--notchless).secondary .angle svg {
  fill: var(--harbert-navy);
}

.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: var(--harbert-brick)
}

.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: #006c9a
}

.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: var(--harbert-brick)
}

.button:not(.button--notchless).button--light.secondary path {
  stroke: var(--harbert-navy)
}

.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: var(--harbert-brick)
}

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

.button--icon .button-icon {
  margin-right: .55556rem;
  color: var(--harbert-orange);
}

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

/* ==========================================================================
 * COMPONENT CLASSES (v3.0)
 * All opt-in: nothing changes until a class is typed into a component's
 * (or section's) CSS class field in Experience Builder and the site is
 * published. Typography uses the DXP text hooks, so it reaches inside
 * Text Block components without targeting internal markup.
 * IMPORTANT: after applying a class, reset that component's own Style
 * settings (font size, colors, padding) to default - component-level
 * settings sit closer to the element and will beat the class.
 * ========================================================================== */

/* PAGE TITLE - Text Block, Text Style = Heading 1 (one per page).
 * Shrinks the theme's 2.5rem Heading 1 to 2rem for page titles only. */
.harbert-page-title {
  --dxp-s-text-heading-extra-large-font-size: 2.5rem;
  --dxp-s-text-heading-extra-large-line-height: 1.2;
  --dxp-s-text-heading-extra-large-font-weight: 900;
  --dxp-s-text-heading-extra-large-letter-spacing: 0;
  --dxp-s-text-heading-extra-large-text-transform: none;
  --dxp-s-text-heading-extra-large-color: var(--harbert-navy);
  display: block;
  margin: 2rem 0 0.75rem;
  padding: 0;
}

/* PAGE INTRO - Rich Content Editor directly under the page title. */
.harbert-page-intro {
  display: block;
  max-width: 48rem;
  margin: 0 0 2rem;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--harbert-ink);
}

/* SECTION BAND - Text Block, Heading 2, Home pages only.
 * Replaces the per-component teal background and white text settings. */
.harbert-section-band {
  --dxp-s-text-heading-large-color: var(--harbert-white);
  --dxp-s-text-heading-large-font-size: 1.5rem;
  --dxp-s-text-heading-large-line-height: 1.25;
  --dxp-s-text-heading-medium-color: var(--harbert-white);
  display: block;
  background-color: var(--harbert-teal);
  color: var(--harbert-white);
  padding: 2rem 3rem;
  margin: 2rem 0;
}

/* SECTION HEADING - Text Block, Heading 2, inner pages (no band).
 * Same size as the band, navy text, thin orange rule underneath. */
.harbert-section-heading {
  --dxp-s-text-heading-large-font-size: 1.5rem;
  --dxp-s-text-heading-large-line-height: 1.25;
  --dxp-s-text-heading-large-color: var(--harbert-navy);
  display: block;
  padding: 0 0 0.5rem;
  margin: 2.5rem 0 1.25rem;
  border-bottom: 8px solid var(--harbert-orange);
}

/* SUBTITLE - Text Block, Heading 3, e.g. the Village Guide credit line. */
.harbert-subtitle {
  --dxp-s-text-heading-medium-font-size: 1.25rem;
  --dxp-s-text-heading-medium-font-style: italic;
  --dxp-s-text-heading-medium-line-height: 1.4;
  --dxp-s-text-heading-medium-color: var(--harbert-navy);
  display: block;
  max-width: 48rem;
  margin: 0 auto 1.5rem;
  text-align: center;
}

/* CARD ROW - the Columns component (or its section) holding cards/tiles. */
.harbert-card-row {
  display: block;
  padding: 0.5rem 0 2rem;
}

/* CARD - each Rich Content Editor + Button pair, or each Tile.
 * Keep descriptions to 1-2 lines so buttons line up across a row. */
.harbert-card {
  display: block;
  height: 100%;
  padding: 1.25rem 1rem;
  text-align: center;
}

/* NOTICE - an informational message, e.g. the Salesforce-license note. */
.harbert-notice {
  display: block;
  background-color: var(--harbert-surface);
  border-left: 8px solid var(--harbert-orange);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  color: var(--harbert-ink);
}

/* REDIRECT BLOCK - put on the SECTION holding "Oops, this isn't the
 * Bridge for you", the logo and the redirect buttons. */
.harbert-redirect {
  --dxp-s-text-heading-large-font-size: 1.75rem;
  --dxp-s-text-heading-large-color: var(--harbert-navy);
  display: block;
  text-align: center;
  background-color: var(--harbert-surface);
  border-top: 8px solid var(--harbert-orange);
  padding: 2.5rem 1.5rem;
  margin: 3rem 0 0;
}

/* REDIRECT LOGO - the Image component inside the redirect block. */
.harbert-redirect-logo {
  display: block;
  max-width: 180px;
  margin: 0 auto 1.5rem;
}

/* SPACED BUTTON - each redirect Button, so stacked buttons don't touch. */
.harbert-button-spaced {
  display: block;
  margin: 0.5rem auto;
  text-align: center;
}

/* TABS - the Tabs component (e.g. My Information). Keep width at 100%
 * so tabs line up with the page title and intro. */
.harbert-tabs {
  display: block;
  margin: 1rem 0 2rem;
}

/* Phones */
@media (max-width: 47.9375em) {
  .harbert-page-title {
    --dxp-s-text-heading-extra-large-font-size: 1.625rem;
    margin: 1.5rem 0 0.5rem;
  }
  .harbert-page-intro { font-size: 1rem; margin-bottom: 1.5rem; }
  .harbert-section-band,
  .harbert-section-heading {
    --dxp-s-text-heading-large-font-size: 1.25rem;
    margin-top: 2rem;
  }
  .harbert-section-band { padding: 0.625rem 1rem; }
  .harbert-redirect { padding: 2rem 1rem; }
}

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