/* ===== PRM Career Slideshow ===== */

.prm-career-slideshow {
  --card-bg: rgba(60,60,60,0.92);
  --subheading-color: #BFC7CD;
  --heading-color: #FFFFFF;
  --desc-color: #FFFFFF;
  --indicator-active: #1A64A8;
  --indicator-inactive: #FFFFFF;
  --indicator-w: 20px; /* Not used anymore - indicators flex to fill width */
  --indicator-h: 4px; /* Not used - using --indicator-size for square */
  --indicator-size: 8px; /* Size of square indicators */
  --indicator-gap: 0; /* No gap - indicators touch each other */
  --indicator-padding: 8px; /* Padding from left/right edges of card */
  --card-pad-left: 36px; /* Card left padding (used for indicator margins) */
  --card-pad-right: 36px; /* Card right padding (used for indicator margins) */
  --card-pad-bottom: 24px; /* Padding above indicators */

  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
  /* Prevent Elementor overlays or buttons from appearing */
  isolation: isolate;
}

/* Hide any Elementor overlays or buttons that might appear (but not our indicators) */
.prm-career-slideshow .elementor-background-overlay,
.prm-career-slideshow .elementor-button-wrapper,
.prm-career-slideshow .elementor-icon:not(.prm-career-slideshow__indicators *),
.prm-career-slideshow [class*="elementor-overlay"],
.prm-career-slideshow .eicon-play,
.prm-career-slideshow .eicon-chevron-right,
.prm-career-slideshow .eicon-chevron-left,
.prm-career-slideshow .elementor-shape,
.prm-career-slideshow svg[class*="arrow"],
.prm-career-slideshow svg[class*="play"],
.prm-career-slideshow a[class*="button"],
.prm-career-slideshow a[class*="arrow"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide any arrows or play buttons that might appear from parent Elementor container */
.elementor-widget-container:has(.prm-career-slideshow) .elementor-background-overlay,
.elementor-widget-container:has(.prm-career-slideshow) .elementor-button,
.elementor-widget-container:has(.prm-career-slideshow) .eicon-play,
.elementor-widget-container:has(.prm-career-slideshow) .eicon-chevron-right,
.elementor-widget-container:has(.prm-career-slideshow) .eicon-chevron-left,
.elementor-widget-container:has(.prm-career-slideshow) [class*="arrow"],
.elementor-element:has(.prm-career-slideshow) .elementor-background-overlay,
.elementor-element:has(.prm-career-slideshow) .elementor-button,
.elementor-element:has(.prm-career-slideshow) .eicon-play,
.elementor-element:has(.prm-career-slideshow) .eicon-chevron-right,
.elementor-element:has(.prm-career-slideshow) .eicon-chevron-left,
.elementor-element:has(.prm-career-slideshow) [class*="arrow"],
.elementor-element:has(.prm-career-slideshow) [class*="icon"],
.elementor-element:has(.prm-career-slideshow) svg,
.elementor-element:has(.prm-career-slideshow) i[class*="icon"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide any absolutely positioned elements with circular backgrounds (likely the arrow icon) */
.elementor-element:has(.prm-career-slideshow) > *:not(.elementor-widget-container):not(.prm-career-slideshow) {
  position: relative !important;
}

.elementor-element:has(.prm-career-slideshow) [style*="position: absolute"][style*="right"],
.elementor-element:has(.prm-career-slideshow) [style*="position: absolute"][style*="right"] * {
  display: none !important;
  visibility: hidden !important;
}

/* Ensure viewport only contains bg and card - hide any other elements */
.prm-career-slideshow__viewport > *:not(.prm-career-slideshow__bg):not(.prm-career-slideshow__card) {
  display: none !important;
  visibility: hidden !important;
}

/* Hide any pseudo-elements on viewport that might be arrows */
.prm-career-slideshow__viewport::before,
.prm-career-slideshow__viewport::after {
  display: none !important;
  content: none !important;
}

.prm-career-slideshow__empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.prm-career-slideshow__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.prm-career-slideshow__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 400ms ease;
  will-change: opacity;
  opacity: 1;
  /* Prevent any overlays or buttons from appearing */
  pointer-events: none;
  z-index: 0; /* Background stays at z-index 0, card is at 17 (15px visual elevation) */
}

/* Ensure no pseudo-elements or overlays appear on background */
.prm-career-slideshow__bg::before,
.prm-career-slideshow__bg::after {
  display: none !important;
  content: none !important;
}

/* Optional overlay if enabled */
.prm-career-slideshow--has-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay, transparent);
  pointer-events: none;
  z-index: 1;
}

.prm-career-slideshow__card {
  position: absolute !important; /* Card positioned absolutely in viewport */
  left: var(--card-left, 40px);
  top: var(--card-top, 40px);
  max-width: var(--card-maxw, 640px);
  background: var(--card-bg);
  color: var(--desc-color);
  border-radius: 8px !important; /* Ensure border radius is applied - override Elementor */
  border: 2px solid rgba(255, 255, 255, 0.6) !important; /* 2px solid white border with 60% opacity - override Elementor */
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); /* Shadow for elevation */
  z-index: 17 !important; /* Rise above background image (z-index 0) - creates 15px visual separation */
  /* Card stays static - no transitions or movement */
  transition: none !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important; /* Allow indicators to extend beyond border */
  /* Override bottom padding from Elementor - indicators will be at bottom border */
  padding-bottom: 0 !important;
}

/* Ensure card never moves or fades */
.prm-career-slideshow__card.is-transitioning,
.prm-career-slideshow__card[class*="transition"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Override Elementor's border-radius control - card must have 8px radius */
.elementor-widget-prm-career-slideshow .prm-career-slideshow__card {
  border-radius: 8px !important;
}

/* Override Elementor's border control - card must have 2px white border with 60% opacity */
.elementor-widget-prm-career-slideshow .prm-career-slideshow__card {
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
}

.prm-career-slideshow__subheading {
  color: var(--subheading-color);
  font-weight: 500;
  font-size: 0.9em;
  margin: 0 0 10px;
  transition: opacity 400ms ease;
  opacity: 1;
}

.prm-career-slideshow__subheading.is-transitioning {
  opacity: 0;
}

.prm-career-slideshow__heading {
  color: var(--heading-color);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 2em;
  line-height: 1.05;
  margin: 0 0 12px;
  transition: opacity 400ms ease;
  opacity: 1;
}

.prm-career-slideshow__heading.is-transitioning {
  opacity: 0;
}

.prm-career-slideshow__description {
  font-size: 1em;
  line-height: 1.6;
  margin: 0; /* Remove bottom margin - indicators will be at bottom */
  padding-bottom: 24px; /* Add padding above indicators */
  transition: opacity 400ms ease;
  opacity: 1;
  flex: 1 1 auto; /* Allow description to grow and take available space */
  min-height: 0; /* Allow flex item to shrink */
}

.prm-career-slideshow__description.is-transitioning {
  opacity: 0;
}

.prm-career-slideshow__description p {
  margin: 0 0 1em;
}

.prm-career-slideshow__description p:last-child {
  margin-bottom: 0;
}

.prm-career-slideshow__indicators {
  display: flex !important;
  gap: 2px !important; /* Small gap between chips so they're visually separate */
  align-items: stretch !important;
  /* Push indicators to bottom using flexbox */
  margin-top: auto !important;
  /* Override ALL Elementor margins - indicators sit directly on border */
  margin: 0 !important;
  margin-top: auto !important;
  margin-bottom: -2px !important; /* Sit directly on the 2px border */
  margin-left: calc(-36px + 8px) !important; /* Extend with 8px padding from left edge */
  margin-right: calc(-36px + 8px) !important; /* Extend with 8px padding from right edge */
  width: calc(100% + 56px) !important; /* Extend: 100% + 72px - 16px (8px padding each side) */
  /* Remove border radius - square corners */
  border-radius: 0 !important;
  /* Position indicators at bottom */
  position: relative;
}

.prm-career-slideshow__indicators button {
  flex: 1 !important; /* Stretch to fill available width evenly (50% for 2, 33% for 3, 25% for 4) */
  min-width: 0 !important; /* Allow flex items to shrink below content size */
  /* Make indicators rectangular bars with square (no radius) corners */
  height: 8px !important; /* Height of indicator bars - square-like but stretch width */
  border-radius: 0 !important; /* No border radius - square/sharp corners */
  background: var(--indicator-inactive, #FFFFFF) !important; /* Default to white if variable not set */
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background-color 200ms ease, filter 200ms ease;
  outline-offset: 2px;
  /* Ensure indicators are clickable and visible */
  position: relative;
  /* Override any Elementor button styles */
  box-shadow: none !important;
}

.prm-career-slideshow__indicators button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.prm-career-slideshow__indicators button:hover {
  filter: brightness(1.1);
}

.prm-career-slideshow__indicators button[aria-selected="true"] {
  background: var(--indicator-active, #1A64A8) !important; /* Default to PRM blue if variable not set - override any Elementor styles */
}

/* Responsive */
@media (max-width: 1024px) {
  .prm-career-slideshow {
    min-height: 460px;
  }

  .prm-career-slideshow__card {
    left: var(--card-left-tablet, 24px);
    top: var(--card-top-tablet, 24px);
    max-width: var(--card-maxw-tablet, 560px);
    padding-bottom: 0 !important; /* Remove bottom padding for indicators */
    z-index: 17; /* Maintain elevation above background */
  }
  
  /* Tablet: extend indicators for 28px padding */
  .prm-career-slideshow__indicators {
    margin-left: calc(-28px + var(--indicator-padding, 8px));
    margin-right: calc(-28px + var(--indicator-padding, 8px));
    width: calc(100% + 56px - calc(var(--indicator-padding, 8px) * 2));
  }
  
  .prm-career-slideshow__description {
    padding-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .prm-career-slideshow {
    min-height: 420px;
  }

  .prm-career-slideshow__card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 16px auto 24px;
    max-width: min(92vw, 560px);
    padding-bottom: 0 !important; /* Remove bottom padding for indicators */
    transform: none !important;
    z-index: 17; /* Maintain elevation above background */
  }
  
  /* Mobile: extend indicators for 24px padding */
  .prm-career-slideshow__indicators {
    margin-left: calc(-24px + var(--indicator-padding, 8px));
    margin-right: calc(-24px + var(--indicator-padding, 8px));
    width: calc(100% + 48px - calc(var(--indicator-padding, 8px) * 2));
  }
  
  .prm-career-slideshow__description {
    padding-bottom: 20px;
  }

  .prm-career-slideshow__heading {
    font-size: 1.5em;
  }

  .prm-career-slideshow__description {
    font-size: 0.95em;
  }
}