/* ==========================================================================
   ÌÀ²»ÈÈÊÓƵ — Accessible Slider component   (columbia-slider.css)
   --------------------------------------------------------------------------
   Built on accessible-slick (Slick 1.8.1@accessible360.1) + Foundation 5.

   LOAD ORDER:  app.css  →  columbia-slider.css
   (app.css already ships Slick's structural CSS and the old Slick theme, so
   slick.min.css / accessible-slick-theme.min.css are NOT needed. Every rule
   below is scoped to .cc-slider so existing sliders on the site keep working.)

   LAYOUTS (modifier classes on .cc-slider)
     .cc-slider--split   6-column image | 6-column text panel (Foundation grid)
     .cc-slider--image   image only, full width

   PANEL COLORS (split only)   default teal ("Blue")  |  .cc-slider--purple  |  .cc-slider--gray

   TUNING: override any of the custom properties below on .cc-slider (or on a
   parent) — e.g.  <div class="cc-slider cc-slider--image" style="--cc-ratio: 16/9">
   ========================================================================== */

.cc-slider {
  /* brand colors — values match app.css (.blue-bg / .yellow-bg) */
  --cc-panel:        #048194;   /* teal panel                                */
  --cc-panel-text:   #fff;
  --cc-btn-bg:       #fff;      /* panel link buttons */
  --cc-btn-text:     var(--cc-panel);
  --cc-control:      #803d97;   /* purple prev/next                          */
  --cc-control-hover:#612e73;
  --cc-control-icon: #fff;
  --cc-dot-on:       #000;      /* active dot                                */
  --cc-dot-off:      #848484;   /* inactive dot — 3.7:1 on white (WCAG 1.4.11 needs 3:1); mockup's #e6e6e6 is 1.3:1 */
  --cc-dot-hover:    #5e5e5e;
  --cc-focus:        #000;
  --cc-placeholder:  #b8b8b8;

  /* image shape: small screens / medium-and-up (Foundation "medium" = 40.063em) */
  --cc-ratio-small:  4 / 3;
  --cc-ratio:        5 / 3;     /* split: the image half. mockup ≈ 877×525   */

  /* control sizing (mobile → desktop values are swapped in the media query) */
  --cc-arrow:        44px;
  --cc-dot:          24px;
  --cc-gap:          16px;
  --cc-dot-gap:      12px;      /* space between dots (wraps to extra rows if there are many slides on a phone) */

  position: relative;
  display: block;
  margin: 0 0 1.5rem;
  font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cc-slider--image { --cc-ratio: 21 / 9; }

.cc-slider--purple { --cc-panel: #803d97; }   /* white on #803d97 = 6.9:1 */
.cc-slider--gray {                           /* light gray = app.css .gray-bg; text flips to dark */
  --cc-panel:      #efefef;
  --cc-panel-text: #222;
  --cc-btn-bg:     #222;
  --cc-btn-text:   #fff;
}

@media only screen and (min-width: 40.063em) {
  .cc-slider {
    --cc-arrow: 60px;
    --cc-dot:   30px;
    --cc-gap:   45px;
    --cc-dot-gap: 45px;
  }
}

/* ---- Neutralise legacy app.css slick rules (scoped to this component) ----- */
.cc-slider.slick-slider,
.cc-slider.slick-slider.slick-dotted { margin-bottom: 1.5rem !important; }

.cc-slider *,
.cc-slider *:before,
.cc-slider *:after { box-sizing: border-box; }

/* ---- Before JS runs (or if JS fails): show the first slide only ----------- */
.cc-slider:not(.slick-initialized) .cc-slider__slide ~ .cc-slider__slide { display: none; }

/* ---- Slides ---------------------------------------------------------------- */
.cc-slider .slick-list { overflow: hidden; }

.cc-slider .slick-track {
  display: flex;                     /* equal-height slides when text lengths differ */
}
.cc-slider .slick-track:before,
.cc-slider .slick-track:after { content: none; display: none; }

.cc-slider .slick-slide {
  float: none;
  height: auto;                      /* let flex stretch (core sets 100%)         */
}
.cc-slider.slick-initialized .slick-slide {
  display: flex;
  flex-direction: column;
}
.cc-slider .slick-slide > .cc-slider__row,
.cc-slider .slick-slide > .cc-slider__media { flex: 1 1 auto; }

.cc-slider .slick-slide:focus { outline: none; }

/* ---- Media (image) --------------------------------------------------------- */
.cc-slider .cc-slider__media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--cc-ratio-small);
  background: var(--cc-placeholder);
}
.cc-slider .cc-slider__media img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: var(--cc-focal, 50% 50%);
}
.cc-slider a.cc-slider__media { text-decoration: none; }

@media only screen and (min-width: 40.063em) {
  .cc-slider--image .cc-slider__media { aspect-ratio: var(--cc-ratio); }
}

/* ---- Split layout: Foundation 5 grid  (.row.collapse > .small-12.medium-6.columns) */
.cc-slider .cc-slider__row {
  width: 100%;
  max-width: none;                   /* Foundation .row caps at 75rem — fill the component */
  margin: 0;
}
.cc-slider .cc-slider__row:before,
.cc-slider .cc-slider__row:after { content: none; display: none; }

@media only screen and (min-width: 40.063em) {
  .cc-slider .cc-slider__row {
    display: flex;
    align-items: stretch;
  }
  .cc-slider .cc-slider__row > .columns {
    float: none;
    flex: 0 0 50%;                   /* hold Foundation's medium-6 = 50% even if an image has a wide intrinsic ratio */
    min-width: 0;
    max-width: 50%;
  }
  .cc-slider--split .cc-slider__media { aspect-ratio: var(--cc-ratio); }
}

/* ---- Text panel ------------------------------------------------------------ */
.cc-slider .cc-slider__panel {
  display: flex;
  align-items: center;               /* vertically centred, as in the mockup      */
  background: var(--cc-panel);
  color: var(--cc-panel-text);
}

/* padding lives on the inner wrapper: Foundation's .row.collapse > .columns
   zeroes the padding of the column itself */
.cc-slider .cc-slider__panel-inner {
  width: 100%;
  padding: 2rem 1.5rem;
}
@media only screen and (min-width: 40.063em) {
  .cc-slider .cc-slider__panel-inner { padding: 2.5rem 4.25rem; }   /* 68px sides */
}

/* Slide text = one WYSIWYG region (.cc-slider__text). Plain paragraphs are the large
   20/30 body text; headings (or any element with .cc-slider__meta) are the small bold
   uppercase 16/24 lines from the mockup. */
.cc-slider .cc-slider__text {
  font-size: 1.125rem;               /* 18/27 on small screens … */
  line-height: 1.5;
  font-weight: 400;
  color: inherit;
}
.cc-slider .cc-slider__text p,
.cc-slider .cc-slider__text ul,
.cc-slider .cc-slider__text ol {
  margin: 0 0 1.25rem;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}
.cc-slider .cc-slider__text ul,
.cc-slider .cc-slider__text ol { padding: 0; margin-left: 1.25rem; }
.cc-slider .cc-slider__text li { margin: 0 0 .5rem; font-size: inherit; line-height: inherit; }

.cc-slider .cc-slider__text h1,
.cc-slider .cc-slider__text h2,
.cc-slider .cc-slider__text h3,
.cc-slider .cc-slider__text h4,
.cc-slider .cc-slider__text h5,
.cc-slider .cc-slider__text h6,
.cc-slider .cc-slider__text .cc-slider__meta {
  margin: 0 0 1.25rem;
  font-family: inherit;
  font-size: 1rem;                   /* 16/24 bold caps */
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: inherit;
}
.cc-slider .cc-slider__text strong,
.cc-slider .cc-slider__text b { font-weight: 700; }
.cc-slider .cc-slider__text a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.cc-slider .cc-slider__text a:hover { text-decoration-thickness: 2px; }
.cc-slider .cc-slider__text > :last-child { margin-bottom: 0; }

@media only screen and (min-width: 40.063em) {
  .cc-slider .cc-slider__text { font-size: 1.25rem; line-height: 1.5; }   /* 20/30 */
}

.cc-slider .cc-slider__link {
  display: inline-block;
  margin-top: 1.25rem;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.cc-slider .cc-slider__link:hover { text-decoration-thickness: 2px; }

/* Link style "Small Button" / "Large Button" from the Link shared field.
   Foundation's .button is teal-on-teal here, so the buttons are inverted: white fill, panel-color text. */
.cc-slider .cc-slider__panel a.cc-slider__link--button {
  display: inline-block;
  margin: 1.25rem 0 0;
  border: 2px solid var(--cc-btn-bg);
  border-radius: 0;
  background: var(--cc-btn-bg);
  color: var(--cc-btn-text);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.cc-slider .cc-slider__panel a.cc-slider__link--small { padding: .625rem 1.25rem; font-size: 1rem; }
.cc-slider .cc-slider__panel a.cc-slider__link--large { padding: 1rem 2rem;      font-size: 1.125rem; }
.cc-slider .cc-slider__panel a.cc-slider__link--button:hover,
.cc-slider .cc-slider__panel a.cc-slider__link--button:focus {
  background: transparent;
  color: var(--cc-panel-text);
  text-decoration: none;
}

/* ---- Controls row: [prev] [dots] [next] ----------------------------------- */
.cc-slider .cc-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-gap);
  margin-top: 1.875rem;              /* 30px under the slide, as in the mockup */
  padding: 0 .5rem;
}
.cc-slider .cc-slider__dots {
  display: block;
  flex: 0 1 auto;
  min-width: 0;                      /* lets the dots shrink and wrap instead of pushing the arrows off-screen */
}

/* prev / next — reset Foundation 5's global <button> look first.
   app.css has !important rules for the OLD slick arrows (hidden until hover,
   PNG backgrounds, empty :before), so the few properties it forces are
   re-declared here with !important and higher specificity. */
.cc-slider.slick-slider .slick-prev,
.cc-slider.slick-slider .slick-next,
.cc-slider.slick-slider:hover .slick-prev,
.cc-slider.slick-slider:hover .slick-next {
  position: static;
  top: auto; left: auto; right: auto;
  transform: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--cc-arrow);
  height: var(--cc-arrow);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cc-control) none !important;
  color: var(--cc-control-icon);
  font-size: 0;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
  transition: background-color .2s ease-out;
}
.cc-slider .slick-prev:before,
.cc-slider .slick-next:before { content: none !important; }

.cc-slider.slick-slider .slick-prev:hover,
.cc-slider.slick-slider .slick-next:hover,
.cc-slider.slick-slider .slick-prev:focus,
.cc-slider.slick-slider .slick-next:focus {
  background: var(--cc-control-hover) none !important;
  color: var(--cc-control-icon);
  opacity: 1;
}
.cc-slider.slick-slider .slick-prev.slick-disabled,
.cc-slider.slick-slider .slick-next.slick-disabled { opacity: .4; cursor: default; }

.cc-slider .cc-slider__chevron {
  display: block;
  width: 40%;
  height: 40%;
  pointer-events: none;
}

/* dots */
.cc-slider .slick-dots {
  position: static;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--cc-dot-gap);
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.cc-slider .slick-dots li {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
.cc-slider .slick-dots li button {
  display: block;
  width: var(--cc-dot);
  height: var(--cc-dot);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cc-dot-off);
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color .2s ease-out;
}
.cc-slider .slick-dots li button:before { content: none; }
.cc-slider .slick-dots li button:hover { background: var(--cc-dot-hover); }
.cc-slider .slick-dots li.slick-active button,
.cc-slider .slick-dots li.slick-active button:hover {
  background: var(--cc-dot-on);
}

/* ---- Focus (WCAG 2.4.7 / 2.4.11) ------------------------------------------ */
.cc-slider button:focus,
.cc-slider a:focus {
  outline: 3px solid var(--cc-focus);
  outline-offset: 3px;
}
.cc-slider button:focus:not(:focus-visible),
.cc-slider a:focus:not(:focus-visible) { outline: none; }
.cc-slider .cc-slider__panel a:focus { outline-color: var(--cc-panel-text); }

/* ---- Autoplay pause/play (only rendered when autoplay is on) -------------- */
.cc-slider .slick-autoplay-toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  font-size: 0;
}
.cc-slider .slick-autoplay-toggle-button:hover,
.cc-slider .slick-autoplay-toggle-button:focus { background: #f0f0f0; color: #000; }

/* icons are drawn on pseudo-elements because Slick toggles the spans' inline display */
.cc-slider .slick-pause-icon:before,
.cc-slider .slick-play-icon:before { content: ""; display: inline-block; vertical-align: middle; }
.cc-slider .slick-pause-icon:before {
  width: 14px; height: 16px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.cc-slider .slick-play-icon:before {
  width: 0; height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
}

/* ---- Screen-reader-only helper (accessible-slick markup uses this class) -- */
.cc-slider .slick-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Motion & contrast preferences ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cc-slider .slick-track { transition: none !important; }
  .cc-slider .slick-prev,
  .cc-slider .slick-next,
  .cc-slider .slick-dots li button { transition: none; }
}
@media (forced-colors: active) {
  .cc-slider .slick-prev,
  .cc-slider .slick-next { border: 2px solid ButtonText; }
  .cc-slider .slick-dots li button { border: 2px solid ButtonText; }
  .cc-slider .slick-dots li.slick-active button { background: Highlight; }
}