/************************************************************
 * HOMEPAGE HERO CAROUSEL – FIXED HEIGHT 578PX
 ************************************************************/

/* Full width carousel container (inside its wrapper) */
#homepageCarousel {
  width: 100%;
}

/************************************************************
 * SLIDE + IMAGE — FIXED HEIGHT, CROP TOP
 ************************************************************/
#homepageCarousel .carousel-item {
  position: relative;
  height: 578px; /* FIXED HEIGHT 578px */
  overflow: hidden;
}

#homepageCarousel .carousel-item img {
  width: 100%;
  height: 100%; /* ensures 578px */
  object-fit: cover;
  object-position: center bottom; /* keep bottom visible, crop top */
  display: block;
}

/************************************************************
 * IMAGE WRAPPER FIX (Views fields) — PREVENT WHITE BAR
 * Ensure all wrappers inherit the fixed 578px height so img can be 100%.
 ************************************************************/
#homepageCarousel .carousel-item .views-field,
#homepageCarousel .carousel-item .views-field .field-content,
#homepageCarousel .carousel-item .views-field img {
  height: 100%;
}

#homepageCarousel .carousel-item .views-field,
#homepageCarousel .carousel-item .views-field .field-content {
  width: 100%;
}

/* Force the image to actually fill the slide */
#homepageCarousel .carousel-item .views-field img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
  display: block;
  max-width: none; /* prevents some theme rules from shrinking height indirectly */
}

/************************************************************
 * CAPTION OVERLAY — FULL HEIGHT MATCHES 578PX
 * (Single source of truth)
 ************************************************************/
#homepageCarousel .carousel-caption {
  position: absolute;
  inset: 0; /* replaces top/right/bottom/left:0 */
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 0;

  /* Default (center); overridden by caption-left/right/center rules below */
  justify-content: center;
}

/************************************************************
 * CAPTION TEXT BOX — MATCH WP LOOK
 * (Single source of truth)
 ************************************************************/
#homepageCarousel .carousel-caption-box {
  background-color: rgba(0, 0, 0, 0.6);

  /* Wider than 600px */
  max-width: 760px;

  /* Keep responsive behavior but avoid always being 100% */
  width: min(760px, 100%);

  padding: 42px 24px 60px;
  margin: 0 auto;

  color: #ffffff;
  text-align: center;

  /* Global vertical lift */
  transform: translateY(-60px);
}

/* Heading style */
#homepageCarousel .carousel-caption-box h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 44px;
  line-height: 57.2px;
  font-weight: 500;
  margin: 0 0 48px;
  color: #ffffff;
}

/************************************************************
 * CTA BUTTON — WP STYLE, SQUARE CORNERS
 ************************************************************/
#homepageCarousel .carousel-caption-box .action-button.blue {
  display: inline-block;
  min-width: 180px;
  padding: 20px 40px;
  box-sizing: border-box;
  text-align: center;

  background-color: rgb(5, 128, 163);
  color: #ffffff !important;

  border: 1px solid transparent;
  border-radius: 0; /* square edges */

  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;

  transition: all 0.2s ease-out;
}

#homepageCarousel .carousel-caption-box .action-button.blue:hover,
#homepageCarousel .carousel-caption-box .action-button.blue:focus {
  color: #ffffff;
  text-decoration: none;
}

#homepageCarousel .carousel-caption-box .action-button.blue:hover {
  background-color: rgb(3, 104, 133);
  transform: translateY(-1px);
}

#homepageCarousel .carousel-caption-box .action-button.blue:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/************************************************************
 * LANDING PAGE HOMEPAGE – FULL BLEED HERO FIX
 * (works whether it's the front page or just /node/217)
 ************************************************************/

/* Let the hero break out of the centered content container */
.node--type-landing-page #homepageCarousel {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Make sure wrappers don’t clip it */
.node--type-landing-page .layout--onecol,
.node--type-landing-page .layout__region--content {
  overflow: visible;
}

/* Remove extra top spacing on first section so it hugs the header nicely */
.node--type-landing-page .layout--onecol:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

/************************************************************
 * LANDING PAGE HERO – REMOVE EXTRA WHITE BANDS + PENCIL
 ************************************************************/

/* Kill margin/padding on the landing page wrapper itself */
.node--type-landing-page.node--view-mode-full {
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill extra spacing inside the node content */
.node--type-landing-page.node--view-mode-full .node__content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill spacing on the one-column layout that wraps the carousel */
.node--type-landing-page .layout.layout--onecol {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Kill spacing on the carousel block and its inner content */
.block-views-blockwhatcanyoudo-homepage-carousel-block-1,
.block-views-blockwhatcanyoudo-homepage-carousel-block-1 .block__content,
.block-views-blockwhatcanyoudo-homepage-carousel-block-1 .view,
.block-views-blockwhatcanyoudo-homepage-carousel-block-1 .view-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide ALL contextual edit UI inside this carousel block */
.block-views-blockwhatcanyoudo-homepage-carousel-block-1 .contextual {
  display: none !important;
}

/************************************************************
 * CAPTION POSITIONING (LEFT / RIGHT / CENTER)
 * Keep LEFT and RIGHT distinct; avoid jumpy behavior.
 ************************************************************/

/* LEFT */
#homepageCarousel .caption-left .carousel-caption {
  justify-content: flex-start;
}
/* Your prior LEFT was very aggressive; this is smoother but still inset on desktop */
#homepageCarousel .caption-left .carousel-caption-box {
  margin-left: clamp(20px, 9vw, 28%);
  margin-right: 0;
}

/* RIGHT */
#homepageCarousel .caption-right .carousel-caption {
  justify-content: flex-end;
}
#homepageCarousel .caption-right .carousel-caption-box {
  margin-right: clamp(24px, 6vw, 22%);
  margin-left: 0;

  max-width: 550px;

  /* Keep your per-right lift distinct from the global lift */
  transform: translateY(-50px);
}

/* CENTER */
#homepageCarousel .caption-center .carousel-caption {
  justify-content: center;
}

/************************************************************
 * RESPONSIVE BEHAVIOR (MATCH LEGACY WP FEEL)
 * Under ~1200px, RIGHT slides start behaving more like LEFT.
 ************************************************************/
@media (max-width: 1199.98px) {

  #homepageCarousel .caption-right .carousel-caption {
    justify-content: flex-start;
  }

  #homepageCarousel .caption-right .carousel-caption-box {
    margin-right: 0;

    /* Use the same LEFT-style clamp at this size */
    margin-left: clamp(20px, 7vw, 28%);
  }
}

/************************************************************
 * SMALLER SCREENS — SAFE GUTTER (NO EDGE COLLISION)
 ************************************************************/
@media (max-width: 985px) {

  #homepageCarousel {
    --hc-gutter: 16px; /* increase to 20px/24px if needed */
  }

  /* Prevent edge collisions while keeping positioning rules intact */
  #homepageCarousel .carousel-caption-box {
    width: min(760px, calc(100% - (2 * var(--hc-gutter))));
  }

  #homepageCarousel .caption-left .carousel-caption-box {
    margin-left: var(--hc-gutter);
    margin-right: 0;
  }

  #homepageCarousel .caption-right .carousel-caption-box {
    margin-right: var(--hc-gutter);
    margin-left: 0;
  }

  #homepageCarousel .caption-center .carousel-caption-box {
    margin-left: auto;
    margin-right: auto;
  }
}

/************************************************************
 * HOMEPAGE CAROUSEL – CONTROL STRIP (WP-STYLE) – FINAL
 * (Everything below is the “folded in” corrected version.)
 ************************************************************/

/* Ensure carousel is a positioning context for overlay controls */
#homepageCarousel {
  position: relative;
}

/*
 * Align the control strip to the same LEFT edge as your site’s content column.
 * - Desktop: aligns to the page container left edge (not far-left viewport)
 * - Mobile: uses safe gutter
 *
 * Strategy:
 * - Center reference point at 50% (viewport center)
 * - Shift left by half of the content max width
 * - Add a small inset so it’s not glued to the edge
 */
/* Control strip: align to content column, but clamp so it never goes off-screen */
#homepageCarousel .homepage-carousel-controls {
  position: absolute;
  bottom: 18px;
  z-index: 60;

  /* Keep inside viewport */
  max-width: calc(100vw - 32px);

  /*
   * Compute a "content left edge" that:
   * - behaves like a centered 1315px container on wide screens
   * - collapses to 16px gutter on narrow screens
   */
  left: max(
    16px,
    calc(50% - (min(var(--wcyd-content-max, 1315px), calc(100vw - 32px)) / 2))
  );

  /* no transform needed with the computed left */
  transform: none;
}

/* Control strip row styling (WP-like white bar with teal border) */
#homepageCarousel .cycle-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgb(5, 128, 163);
  border-radius: 5px;

  padding: 4px;
  box-sizing: border-box;

  color: rgb(51, 51, 51);
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  line-height: 22.8571px;

  /* WP control bar height feel */
  min-height: 38px;
}

/* Shared button baseline (toggle/prev/next) */
#homepageCarousel .hc-control {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgb(51, 51, 51);
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 3px;
  font-weight: 700;
  font-size: 28px;
}

/* Icon glyph sizing (bigger than before) */
#homepageCarousel .hc-control .hc-icon {
  font-size: 22px;
}

/* Hover feedback */
#homepageCarousel .hc-control:hover {
  background: rgba(5, 128, 163, 0.12);
}

/* Focus visibility (508 / keyboard) */
#homepageCarousel .hc-control:focus-visible {
  outline: 3px solid rgb(5, 128, 163);
  outline-offset: 2px;
}

/* Pager container */
#homepageCarousel .hc-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0 2px;
}

/* Dot appearance (BIGGER + clearer) */
#homepageCarousel .hc-dot {
  width: 14px;
  height: 14px;

  border-radius: 999px;
  border: 0;

  background: rgba(51, 51, 51, 0.35);

  padding: 0;
}

/* Active dot (teal like WP accents) */
#homepageCarousel .hc-dot.is-active {
  background: rgb(5, 128, 163);
}

/* Hover feedback */
#homepageCarousel .hc-dot:hover {
  filter: brightness(0.95);
}

/* Focus visibility for dots */
#homepageCarousel .hc-dot:focus-visible {
  outline: 3px solid rgb(5, 128, 163);
  outline-offset: 3px;
}

/************************************************************
 * RESPONSIVE: keep it inside viewport on small screens
 ************************************************************/
@media (max-width: 985px) {
  #homepageCarousel .homepage-carousel-controls {
    left: 16px;
    right: 16px;
    transform: none;
    margin-left: 0;
    max-width: calc(100vw - 32px);
  }

  /* Prevent the strip from overflowing */
  #homepageCarousel .cycle-controls {
    max-width: 100%;
  }
}

/************************************************************
 * HOMEPAGE CAROUSEL – MOBILE CAPTION FIX (SAFE)
 * Keep overlay full-bleed; constrain the caption box within it.
 ************************************************************/
@media (max-width: 768px) {

  /* Keep the overlay truly full-bleed */
  #homepageCarousel .carousel-caption {
    position: absolute;
    inset: 0;
    display: flex !important;

    /* Put the box near the top with safe padding */
    align-items: flex-start;
    justify-content: flex-start;

    /* Safe padding so it doesn't collide with header or controls */
    padding-top: 18px;
    padding-bottom: 70px;

    /* IMPORTANT: allow content to be visible */
    overflow: visible;
  }

  /* Remove the vertical “lift” that pushes it off-screen on mobile */
  #homepageCarousel .carousel-caption-box,
  #homepageCarousel .caption-right .carousel-caption-box {
    transform: none !important;

    /* Center to your content column (hero.css-style) */
    margin-left: auto !important;
    margin-right: auto !important;

    width: min(var(--wcyd-content-max, 1315px), 100%);
    padding-left: var(--wcyd-content-pad, 16px);
    padding-right: var(--wcyd-content-pad, 16px);

    /* But keep the black box itself sized safely */
    max-width: none;
  }

  /* If you want the BLACK box not to span the entire content width,
     constrain it separately (optional): */
  #homepageCarousel .carousel-caption-box {
    width: min(760px, calc(100% - 32px));
    padding: 22px 18px 26px;
    text-align: left; /* or center */
  }

  /* Mobile typography */
  #homepageCarousel .carousel-caption-box h2 {
    font-size: clamp(24px, 5.8vw, 32px);
    line-height: 1.15;
    margin: 0 0 18px;
  }
}

/************************************************************
 * HOMEPAGE CAROUSEL – MOBILE CTA SIZE TUNING
 ************************************************************/
@media (max-width: 768px) {

  #homepageCarousel .carousel-caption-box .action-button.blue {
    font-size: 16px;          /* down from 20px */
    line-height: 1.2;
    padding: 14px 22px;       /* down from 20px 40px */
    min-width: 140px;         /* down from 180px */

    /* Optional: slightly reduce visual weight */
    font-weight: 400;
  }
}

@media (max-width: 768px) {

  /* 1) Define a safe zone height for the control strip on mobile */
  #homepageCarousel {
    --hc-controls-safe: 64px; /* tune: 56–80px depending on your strip */
    --hc-caption-top: 14px;  /* tune: 10–24px */
  }

  /* 2) Keep caption overlay full-bleed but reserve bottom space for controls */
  #homepageCarousel .carousel-caption {
    padding-top: var(--hc-caption-top);
    padding-bottom: var(--hc-controls-safe);
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* 3) Lift the black box a bit by tightening its internal bottom padding */
  #homepageCarousel .carousel-caption-box {
    margin-bottom: 42px
  }

  /* 5) Keep caption content above controls */
  #homepageCarousel .carousel-caption {
    z-index: 70;
  }
}