/* Default styles (non-gradient mode - black theme) */
.site-header__nav-link {
  color: rgb(var(--color-near-black)) !important;
}
.find-my-rep-button {
  background-color: transparent;
  border: 1px solid rgb(var(--color-black)) !important;
  color: rgb(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") */
body.header-gradient-mode .site-header__nav-link {
  color: rgb(var(--color-white)) !important;
  text-transform: uppercase;
}
body.header-gradient-mode .site-header__nav-link:hover {
  color: rgb(var(--color-sky-blue)) !important;
}
body.header-gradient-mode .find-my-rep-button {
  background-color: transparent;
  border: 1px solid rgb(var(--color-white)) !important;
  color: rgb(var(--color-white)) !important;
}

body.header-gradient-mode .find-my-rep-button:hover {
  background-color: rgb(var(--color-sky-blue)) !important;
  color: rgb(var(--color-white)) !important;
  border-color: rgb(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: rgb(var(--color-white)) !important;
}

.cj-header-user-menu__menu {
  background-color: rgb(var(--color-white)) !important;
  border: 1px solid rgba(var(--color-black), 0.08);
}

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

.cj-header-user-menu__item:hover {
  background-color: rgba(var(--color-black), 0.04) !important;
}

.user-menu__active {
  background-color: rgba(var(--color-dark-blue), 0.08) !important;
  color: rgb(var(--color-dark-blue)) !important;
}

.cj-header-user-menu__item-icon {
  color: rgb(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;
  }

  /* 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 {
  z-index: 10 !important;
  background-color: rgba(var(--color-black), 1);
  opacity: 0.6;
}
.site-header__dropdown-panel {
  /* top: 161px !important; */
  z-index: 1 !important;
  background-color: rgb(255 255 255 / 0%) !important;
  padding: 30px 0 24px 0 !important;
  box-shadow: none !important;
}
.site-header__dropdown-panel-container {
  position: relative;
  background-color: rgb(var(--color-white));
  padding: 32px 0;
}

/* ==========================================================================
   Gradient Mode — Scrolled (Sticky) State
   --------------------------------------------------------------------------
   Sticky positioning, the shared scroll transitions and the `--scrolled`
   box-shadow are all declared once in header.css and apply in gradient mode
   too. This block only contains rules that are specific to the gradient
   variant: the transparent nav bar on hero, the forced position/layout
   flip back to the in-flow white bar when scrolled, plus the colour and
   logo swaps. Keep this file focused on the *differences*, not duplicates.
   ========================================================================== */
@media (min-width: 1024px) {
  body.header-gradient-mode .site-header__logo-nav-bar {
    background-color: transparent;
  }

  /* The logo-nav-bar is position:absolute !important on the hero to sit on
     top of the gradient image; in the scrolled state we flip it back into
     the normal flow so the sticky white bar behaves like the standard header.
     The !important values below override the absolute-positioned defaults
     defined earlier in this file. */
  body.header-gradient-mode .site-header--scrolled .site-header__logo-nav-bar {
    position: relative !important;
    height: 84px;
    max-width: 1248px !important;
    margin: 0 auto !important;
    align-items: center;
  }

  body.header-gradient-mode .site-header--scrolled .header-logo {
    width: 287px;
    margin: 0;
    min-height: auto;
  }

  body.header-gradient-mode .site-header--scrolled .header-logo > a {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    height: auto;
  width: 100%;
  }

  body.header-gradient-mode .site-header--scrolled .site-header__navigation-container {
    margin-right: 0;
  }

  /* Scrolled-state logo sizing moved to the base rule in header.css, which
     uses --desktop-logo-height-scrolled (declared in common.css) and applies
     on both light and gradient-hero pages. No gradient-specific override
     needed here anymore. */

  body.header-gradient-mode .site-header--scrolled .site-header__container {
    padding-bottom: 0 !important;
  }

  body.header-gradient-mode .site-header--scrolled .site-header__navigation {
    padding-bottom: 0;
    align-items: center;
  }

  body.header-gradient-mode .site-header--scrolled .site-header__nav-link {
    padding-bottom: 0;
  }

  body.header-gradient-mode .site-header--scrolled .site-header__nav-list {
    margin-bottom: 0;
  }

  /* 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: rgb(var(--color-near-black)) !important;
  }
  body.header-gradient-mode .site-header--scrolled .site-header__nav-link:hover {
    color: rgb(var(--color-dark-blue)) !important;
  }

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

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

#mobile-nav-toggle .material-symbols-outlined {
  color: rgb(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: #000000;
}

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: rgb(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: rgb(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) {
  /* Gradient pages render the hero full-bleed underneath the fixed mobile
     header, so we explicitly drop the --mobile-header-height top offset
     applied to <main> in common.css and remove the max-width cap. */
  .header-gradient-mode 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) {
  /* Gradient pages render the hero full-bleed underneath the fixed mobile
     header, so we explicitly drop the --mobile-header-height top offset
     applied to <main> in common.css and remove the max-width cap. */
  .header-gradient-mode 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;
}