/* Default styles (non-gradient mode - black theme) */
.site-header__nav-link {
  color: var(--color-near-black) !important;
}
.find-my-rep-button {
  background-color: transparent;
  border: 1px solid var(--color-black) !important;
  color: var(--color-black) !important;
  height: 46px;
  padding: 16px 0;
    width: 156px;
    display: flex;
    justify-content: center;
}
.site-header__navigation-container {
  flex: 1;
}

/* Default desktop-logo visibility (blue shown, white hidden) is declared in
   header.css alongside the cross-fade transition, so no override is needed here. */

/* Gradient mode styles (white theme - when gradientOnImage is "Yes").
   IMPORTANT: `header-gradient-mode` is toggled at runtime (per carousel slide,
   see List.ImageSliderItemsWithTransparentHeaderMenu.cshtml), so it must only
   ever change COLOUR — never size, spacing or position. Anything layout-related
   would make the page jump every time the hero slide rotates. Spacing for both
   the default and `--scrolled` states lives in header.css and is shared by both
   themes. Uppercasing is already on `.site-header__nav-list` in header.css. */
body.header-gradient-mode .site-header__nav-link {
  color: var(--color-white) !important;
}
body.header-gradient-mode .site-header__nav-link:hover {
  color: var(--color-sky-blue) !important;
}
body.header-gradient-mode .find-my-rep-button {
  background-color: transparent;
  border: 1px solid var(--color-white) !important;
  color: var(--color-white) !important;
}

body.header-gradient-mode .find-my-rep-button:hover {
  background-color: var(--color-sky-blue) !important;
  color: var(--color-white) !important;
  border-color: var(--color-sky-blue) !important;
}

/* Desktop Logo - Swap logos in gradient mode (cross-fade via opacity; see header.css). */
body.header-gradient-mode .desktop-logo-blue {
  opacity: 0;
  pointer-events: none;
}
body.header-gradient-mode .desktop-logo-white {
  opacity: 1;
  pointer-events: auto;
}

/* User Menu Dropdown - Dark Theme Colors */
.cj-header-user-menu__toggle {
  color: var(--color-white) !important;
}

.cj-header-user-menu__menu {
  background-color: var(--color-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-black) 8%, transparent);
}

.cj-header-user-menu__item,
.cj-header-user-menu__item-link {
  color: var(--color-near-black) !important;
}

.cj-header-user-menu__item:hover {
  background-color: color-mix(in srgb, var(--color-black) 4%, transparent) !important;
}

.user-menu__active {
  background-color: color-mix(in srgb, var(--color-dark-blue) 8%, transparent) !important;
  color: var(--color-dark-blue) !important;
}

.cj-header-user-menu__item-icon {
  color: var(--color-dark-blue) !important;
}
/* Desktop only: absolutely position the logo/nav bar so it sits on top of
   the hero gradient. On mobile/tablet the desktop bar is collapsed (see
   header.css mobile breakpoint) and the separate .mobile-header-bar handles
   the fixed mobile header, so these rules must not apply below 1024px. */
@media (min-width: 1024px) {
  .site-header__logo-nav-bar {
    position: absolute !important;
    z-index: 999 !important;
    width: 100% !important;
    max-width: 1248px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
  }

  /* VALENT ONLY. Keep the logo/nav bar in normal flow whenever the page is
     not a transparent-header overlay hero. Absolute positioning (above) is
     for overlay heroes so the bar can sit over the hero with no header box
     height. On opaque-header pages (e.g. page-hero-banner, which never sets
     `.header-overlay-hero`) that left `.site-header` at ~0 height until
     `--scrolled` flipped the bar to relative — so between scrollY 0 and the
     sticky threshold the dark hero slid up behind the floating nav and
     bisected the logo/links. In-flow at rest gives the white header real
     height for the whole scroll range.
     Overlay-hero pages still use absolute at rest; `--scrolled` flips them
     to relative so the sticky white header has height + box-shadow.
     Deliberately NOT scoped to `.header-gradient-mode` (toggled per slide,
     colour only). Greenheck keeps its previous gradient-only flip below. */
  body.valentair:not(.header-overlay-hero) .site-header__logo-nav-bar,
  body.valentair .site-header--scrolled .site-header__logo-nav-bar {
    position: relative !important;
  }

  /* Override styles when inside Sitefinity page editor */
  .sfPageEditor .site-header__logo-nav-bar {
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    max-width: none !important;
  }
}
.site-header__container {
  padding: 0 !important;
}
/* .page-mask and .site-header__dropdown-panel used to be forced to
   z-index: 10 / z-index: 1 with a fully transparent panel background here.
   That inverted the stacking header.css sets up (panel z-index: 1000 over
   mask z-index: 999, panel opaque white) and let the dark mask bleed through
   the panel everywhere it extends past the icon-row's inner white container
   (.site-header__dropdown-panel-container below) - the "black space below
   the nav" the mega-menu dropdown showed on every hero page. Removed so the
   dropdown panel stays opaque and on top like header.css intends. */
.site-header__dropdown-panel-container {
  position: relative;
  background-color: var(--color-white);
  padding: 32px 0;
}

/* ==========================================================================
   Gradient Mode — Scrolled (Sticky) State
   --------------------------------------------------------------------------
   COLOUR ONLY (on Valent). The compact-state geometry (heights, paddings,
   max-width, alignment), the scroll transitions and the `--scrolled`
   box-shadow are all declared once in header.css and apply identically with
   and without `.header-gradient-mode`. Do not re-declare any spacing here:
   the class is toggled per hero slide at runtime, so a layout difference
   between the two themes shows up as a jump mid-carousel.

   The geometry rules that used to live in this block were byte-for-byte
   duplicates of the header.css `--scrolled` rules, so deleting them changed
   nothing for either brand. The one exception was `position: relative` — see
   the Greenheck-only rule below.
   ========================================================================== */
@media (min-width: 1024px) {
  body.header-gradient-mode .site-header__logo-nav-bar {
    background-color: transparent;
  }

  /* GREENHECK ONLY — preserved as-is. Greenheck reaches this file only via the
     ImageSliderItems widget templates, and there the in-flow flip on scroll has
     always been gradient-mode-only. Valent gets the flip unconditionally (see
     the `body.valentair` rule above); this keeps Greenheck byte-identical. */
  body:not(.valentair).header-gradient-mode .site-header--scrolled .site-header__logo-nav-bar {
    position: relative !important;
  }

  /* Swap logos: fade blue back in, fade white out. */
  body.header-gradient-mode .site-header--scrolled .desktop-logo-blue {
    opacity: 1;
    pointer-events: auto;
  }
  body.header-gradient-mode .site-header--scrolled .desktop-logo-white {
    opacity: 0;
    pointer-events: none;
  }

  /* Nav links & buttons revert to dark/standard colours */
  body.header-gradient-mode .site-header--scrolled .site-header__nav-link {
    color: var(--color-near-black) !important;
  }
  body.header-gradient-mode .site-header--scrolled .site-header__nav-link:hover {
    color: var(--color-dark-blue) !important;
  }

  body.header-gradient-mode .site-header--scrolled .find-my-rep-button {
    border-color: var(--color-black) !important;
    color: var(--color-black) !important;
  }
  body.header-gradient-mode .site-header--scrolled .find-my-rep-button:hover {
    background-color: var(--color-sky-blue) !important;
    color: var(--color-white) !important;
    border-color: var(--color-sky-blue) !important;
  }
}

/* Mobile Header - Default (non-gradient mode) */
.mobile-header-bar {
  background-color: var(--color-white);
}

#mobile-nav-toggle .material-symbols-outlined {
  color: var(--color-near-black);
}

/* Default mobile-logo visibility is declared in header.css alongside the
   cross-fade transition, so no override is needed here. */

/* Mobile Header - Gradient Mode (transparent with white elements) */
body.header-gradient-mode .mobile-header-bar {
  background-color: var(--color-near-black-2);
}

body.header-gradient-mode #mobile-nav-toggle .material-symbols-outlined {
  color: white;
}

/* Mobile Header - Gradient Mode (Scrolled) */
body.header-gradient-mode .site-header--scrolled .mobile-header-bar {
  background-color: var(--color-white) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.header-gradient-mode .site-header--scrolled #mobile-nav-toggle .material-symbols-outlined {
  color: var(--color-dark-blue);
}

/* Mobile Logo - Swap logos in gradient mode (cross-fade via opacity; see header.css). */
body.header-gradient-mode .mobile-logo-blue {
  opacity: 0;
  pointer-events: none;
}
body.header-gradient-mode .mobile-logo-white {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Logo - Swap logos back in scrolled state */
body.header-gradient-mode .site-header--scrolled .mobile-logo-blue {
  opacity: 1;
  pointer-events: auto;
}
body.header-gradient-mode .site-header--scrolled .mobile-logo-white {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 878px) and (max-width: 1023px) {
  /* Hero pages using the transparent-header templates render the hero
     full-bleed underneath the fixed mobile header, so we drop the
     --mobile-header-height top offset applied to <main> in common.css and
     remove the max-width cap.
     Valent keys this off `.header-overlay-hero` (set once per page by the
     template) rather than `.header-gradient-mode`, which flips per slide and
     would otherwise shift the whole page mid-carousel. Greenheck keeps the
     original per-slide gating so nothing regresses there. */
  body:not(.valentair).header-gradient-mode main,
  body.valentair.header-overlay-hero main {
    margin: 0 auto !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Gradient-hero tablet pages use a slightly larger mobile logo than the
     regular tablet default. Redeclaring the CSS variable keeps a single
     source of truth on `.mobile-header-logo` (see header.css) instead of
     forcing the <img> size with !important. */
  :root {
    --mobile-logo-height: 43px;
  }
  .image-slider-content-wrapper,.selection-tools .grid-row-3-cols > *, .greenheck-header__navigation, .card-lort-subtitle, .card-lort-title, .card-lort-description, .card-ilcr-title, .card-ilcr-description, .selection-tools .grid-row-2-cols, .selection-tools .grid-row-3-cols, .card-bg-img-dk-center-title, .card-bg-img-dk-center-description{
    max-width: 736px !important;
    margin: 0 auto !important;
  }
  .selection-tools .grid-row-2-cols, .selection-tools .grid-row-3-cols{
    padding: 0 !important;
  }
  .card-ilcr-description table{
        margin: 20px auto !important;
  }
  .image-slider-content-wrapper{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .image-slider-slide-content.ck-no-slides .image-slider-content-wrapper {
    padding: 0 0px 13px !important;
}
   .card-ilcr-content{
    position: relative;
  }
  .card-ilcr-right{
    position: absolute;
    height: 100%;
    background: #0000004a !important;
  }
      .card-ilcr-left {
        background: #000 !important;
      }
}
@media (max-width: 877px) {
  /* See the tablet block above — same reasoning: Valent uses the page-level
     `.header-overlay-hero`, Greenheck keeps the per-slide
     `.header-gradient-mode`. */
  body:not(.valentair).header-gradient-mode main,
  body.valentair.header-overlay-hero main {
    margin: 0 auto !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Mobile logo sizing uses --mobile-logo-height from common.css (33px
     default). No override needed at this breakpoint for gradient pages —
     the variable already matches the intended size. */
  .image-slider-content-wrapper,.selection-tools .grid-row-3-cols > *, .greenheck-header__navigation, .card-lort-subtitle, .card-lort-title, .card-lort-description, .card-ilcr-title, .card-ilcr-description, .selection-tools .grid-row-2-cols, .selection-tools .grid-row-3-cols, .card-bg-img-dk-center-title, .card-bg-img-dk-center-description{
    max-width: 332px !important;
    margin: 0 auto !important;
  }
  .selection-tools .grid-row-2-cols, .selection-tools .grid-row-3-cols{
    padding: 0 !important;
  }
  .selection-tools .text-content.bold-h2{
    font-size: 22px !important;
  }
  .image-slider-content-wrapper{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .card-lort-subtitle{
    text-align: center !important;
  }
  .card-lort-left, .card-lort-overlay{
    background: none !important;
    background-color: #fff !important;
  }
  .card-lort-title, .card-lort-subtitle{
    color: rgba(51, 51, 51, 1) !important;
  }
  .card-lort-right{
    padding-top: 30px !important;
  }
  .card-lort-left{
    min-height: fit-content !important;
    padding-bottom: 0 !important;
  }
  .card-lort-description, .card-ilcr-title, .card-ilcr-description{
    text-align: center !important;
  }
  .card-ilcr-title{
    margin-bottom: 24px !important;
  }
  .selection-tools .card-bordered-top-title{
    text-align: left !important;
    width: 100% !important;
  }
  .card-bg-img-dk-center-content{
    gap:16px !important;
  }
  .card-ilcr-content{
    position: relative;
  }
  .card-ilcr-right{
    position: absolute;
    height: 100%;
    background: #0000004a !important;
  }
  
  .card-ilcr-description table,
  .card-ilcr-description tbody {
    display: block;
    width: 100%;
  }

  /* Each tr becomes a 2x2 grid */
  .card-ilcr-description tr {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    margin-bottom: 12px;
  }

  /* td 1 (img) → row 1, col 1 */
  .card-ilcr-description td:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
  }

  /* td 2 (text) → row 1, col 2 */
  .card-ilcr-description td:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
  }

  /* td 3 (img) → row 2, col 1 */
  .card-ilcr-description td:nth-child(3) {
    grid-row: 2;
    grid-column: 1;
  }

  /* td 4 (text) → row 2, col 2 */
  .card-ilcr-description td:nth-child(4) {
    grid-row: 2;
    grid-column: 2;
  }

  /* Remove inline widths set on tds */
  .card-ilcr-description td[style] {
    width: auto !important;
  }

  /* Remove inline height on trs */
  .card-ilcr-description tr[style] {
    height: auto !important;
  }
  .card-ilcr-description table{
    width: fit-content !important;
    border-collapse: collapse;
    margin: 20px auto;
    height: auto !important;
  }
  .card-ilcr-description table td{
    border:0 !important;
  }
}
/* Desktop: table renders normally */
.card-ilcr-description table {
  width: 100%;
  border-collapse: collapse;
}

.card-ilcr-description td {
  padding: 6px 8px;
  vertical-align: middle;
}