/* ==========================================================================
   Legacy overrides
   LOAD THIS LAST — after style.css, responsive.css and every other file.

   style.css is the original theme and it is staying, so a handful of its
   selectors still beat the rebuilt CSS. Not because of load order — because
   they are more specific, or use !important, and neither can be won by
   loading later.

   Each block below names the exact rule it is countering. If you ever retire
   style.css, delete this whole file: nothing here is new design, it is only
   undoing rules that should no longer apply to the rebuilt pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero height
   Countering:  #main-slide .item { min-height: 700px }   (specificity 1,1,0)

   700px is taller than most phone screens, so the first slide filled the
   entire viewport and pushed everything else below the fold.
   -------------------------------------------------------------------------- */

#main-slide .item.hm-slide {
  min-height: 78vh;
}

@media (max-width: 767px) {
  #main-slide .item.hm-slide {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   2 & 3. Carousel controls hidden until hover
   Countering:  #main-slide .carousel-control.left,
                #main-slide .carousel-control.right,
                #main-slide .carousel-indicators { opacity: 0 }

   The old design revealed the arrows and dots only on hover. There is no
   hover on a phone, so on mobile they were permanently invisible — the
   carousel looked like a single static image with no way to reach slides
   two and three.
   -------------------------------------------------------------------------- */

#main-slide .carousel-control.hm-hero__control,
#main-slide .carousel-indicators.hm-hero__dots {
  opacity: 1;
  filter: none;
}

#main-slide .carousel-control.hm-hero__control {
  opacity: 0.55;
}

#main-slide .carousel-control.hm-hero__control:hover,
#main-slide .carousel-control.hm-hero__control:focus {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Arrow icon box
   Countering:  #main-slide .carousel-control i
                { background: rgba(0,0,0,.3); width: 60px; height: 60px;
                  line-height: 58px; font-size: 36px }
   -------------------------------------------------------------------------- */

#main-slide .hm-hero__control i {
  width: auto;
  height: auto;
  line-height: 1;
  font-size: 26px;
  background: none;
}

#main-slide .hm-hero__control:hover i,
#main-slide .hm-hero__control:focus i {
  background: none;
  color: var(--ims-ink-invert);
}

/* --------------------------------------------------------------------------
   5. Carousel dots
   Countering:  .carousel-indicators li
                { width: 10px !important; height: 10px !important;
                  margin: 1px !important; border-radius: 100% !important }

   !important cannot be beaten by specificity or order, only by !important —
   which is why these four declarations carry it. It is the one place in the
   rebuild that needs it.
   -------------------------------------------------------------------------- */

.hm-hero__dots li {
  width: 28px !important;
  height: 3px !important;
  margin: 0 4px !important;
  border-radius: 0 !important;
}

.hm-hero__dots li.active {
  width: 44px !important;
  background: var(--ims-brand);
}

/* --------------------------------------------------------------------------
   6. Isotope filter buttons
   Countering:  .isotope-nav ul li a
                { color: #303030; font-size: 14px; padding: 10px 0;
                  font-weight: 600; border-bottom: 2px solid transparent }
                .isotope-nav ul a.active { color: #ffc000; border-color: #ffc000 }

   The filter markup keeps class="isotope-nav" because ini.isotope.js binds
   to it, so these rules still reach the buttons and stripped their padding
   and border. The amber #ffc000 active colour also clashes with the brand
   blue used everywhere else in the rebuild.
   -------------------------------------------------------------------------- */

.isotope-nav.pj-filters,
.isotope-nav.gl-filters {
  display: block;
  margin: 0;
}

.isotope-nav.pj-filters ul li,
.isotope-nav.gl-filters ul li {
  float: none;
  margin-right: 0;
}

.isotope-nav.pj-filters ul li a,
.isotope-nav.gl-filters ul li a {
  display: inline-block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ims-ink-soft);
  background: var(--ims-paper);
  border: 1px solid var(--ims-rule);
}

.isotope-nav.pj-filters ul li a:hover,
.isotope-nav.pj-filters ul li a:focus,
.isotope-nav.gl-filters ul li a:hover,
.isotope-nav.gl-filters ul li a:focus {
  color: var(--ims-ink);
  border-color: var(--ims-ink);
}

.isotope-nav.pj-filters ul a.active,
.isotope-nav.gl-filters ul a.active {
  color: var(--ims-ink-invert);
  background: var(--ims-ink);
  border-color: var(--ims-ink);
}

/* --------------------------------------------------------------------------
   7. Back to top
   Countering:  #back-to-top { right: 40px; top: auto; z-index: 10 }
                #back-to-top.affix { bottom: 30px }
                #back-to-top .btn.btn-primary { ... }

   z-index 10 sat below the header's z-index 20, so the button could be
   covered. The old markup also wrapped a .btn inside the container; the
   rebuilt button IS the element, so the inner-button rules no longer apply.
   -------------------------------------------------------------------------- */

#back-to-top.ft-top-btn {
  right: 22px;
  bottom: 22px;
  top: auto;
  z-index: 30;
}

@media (max-width: 767px) {
  #back-to-top.ft-top-btn {
    right: 14px;
    bottom: 14px;
  }
}

/* --------------------------------------------------------------------------
   8. Section padding
   Countering:  section, .section-padding { padding: 40px 0 }

   Not a specificity problem — a bare element selector loses to any class —
   but the rebuilt sections that set padding only at one breakpoint would
   inherit 40px at the other. Listed here so the relationship is documented
   rather than discovered later.
   -------------------------------------------------------------------------- */

section.ct-channels {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Copy protection
   The old pages attached a copy handler that blocked selection and fired an
   alert. It is not carried over. If any page still has it, this makes sure
   text stays selectable.
   -------------------------------------------------------------------------- */

.body-inner,
.body-inner p,
.body-inner a {
  -webkit-user-select: text;
  user-select: text;
}