/* =====================================================================
   ask.career carousel styles
   Desktop-first. Works in current Chrome, Edge, Firefox and Safari.
   ===================================================================== */

/* ---------- 1. Easy-to-change settings ---------- */
:root {
  --ask-page-bg: #0e1b2b;          /* page background (deep navy)        */
  --ask-frame-bg: #16293d;         /* shows while an image is loading    */
  --ask-white: #ffffff;
  --ask-ink: #0e1b2b;              /* icon colour on white buttons       */
  --ask-accent: #ffb300;           /* focus ring + hover accent (amber)  */
  --ask-radius: 14px;
  --ask-fade-speed: 700ms;         /* cross-fade time between slides     */
}

/* ---------- 2. Basic page reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ask-page-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

.page {
  width: 100%;
  min-height: 100vh;
  padding: 48px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* ---------- 3. Carousel frame ---------- */
.ask-carousel {
  width: 100%;
  max-width: 960px;   /* Make this smaller or larger to resize the carousel */
  margin: 0 auto;
}

.ask-carousel:focus {
  outline: none;      /* the container itself is not a control */
}

.ask-carousel__stage {
  position: relative;
}

/* The viewport keeps the 512 x 286 shape of the images at any width.
   286 / 512 = 55.86%  */
.ask-carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--ask-radius);
  background: var(--ask-frame-bg);
  -webkit-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ask-carousel__viewport::before {
  content: "";
  display: block;
  padding-top: 55.86%;
}

/* ---------- 4. Slides (stacked on top of each other, cross-fade) ---------- */
.ask-carousel__slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ask-carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity var(--ask-fade-speed) ease, visibility 0s linear var(--ask-fade-speed);
  transition: opacity var(--ask-fade-speed) ease, visibility 0s linear var(--ask-fade-speed);
}

.ask-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  -webkit-transition: opacity var(--ask-fade-speed) ease, visibility 0s linear 0s;
  transition: opacity var(--ask-fade-speed) ease, visibility 0s linear 0s;
}

.ask-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ---------- 5. Previous / Next arrows ---------- */
.ask-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ask-ink);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  opacity: 0;   /* hidden until the mouse is over the carousel */
  -webkit-transition: opacity 200ms ease, background-color 200ms ease, -webkit-transform 200ms ease;
  transition: opacity 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.ask-carousel__arrow--prev { left: 16px; }
.ask-carousel__arrow--next { right: 16px; }

.ask-carousel__stage:hover .ask-carousel__arrow,
.ask-carousel__arrow:focus {
  opacity: 1;
}

.ask-carousel__arrow:hover {
  background: var(--ask-accent);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

/* ---------- 6. Controls under the image ---------- */
.ask-carousel__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 18px;
}

.ask-carousel__toggle {
  width: 34px;
  height: 34px;
  margin: 0 14px 0 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--ask-white);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ask-carousel__toggle:hover {
  background: var(--ask-white);
  color: var(--ask-ink);
  border-color: var(--ask-white);
}

/* Show the play icon when paused, the pause icon when playing */
.ask-carousel__toggle .icon-play { display: none; }
.ask-carousel.is-paused .ask-carousel__toggle .icon-pause { display: none; }
.ask-carousel.is-paused .ask-carousel__toggle .icon-play { display: block; }

.ask-carousel__dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Each dot is a 28px-wide button (easy to click) with a small visible pill inside */
.ask-carousel__dot {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ask-carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.38);
  -webkit-transition: width 250ms ease, margin 250ms ease, background-color 250ms ease;
  transition: width 250ms ease, margin 250ms ease, background-color 250ms ease;
}

.ask-carousel__dot:hover::before {
  background: rgba(255, 255, 255, 0.75);
}

.ask-carousel__dot.is-active::before {
  width: 30px;
  margin-left: -15px;
  background: var(--ask-white);
}

/* ---------- 7. Keyboard focus ring (visible only when using the keyboard) ---------- */
.ask-carousel__arrow:focus,
.ask-carousel__toggle:focus,
.ask-carousel__dot:focus {
  outline: 3px solid var(--ask-accent);
  outline-offset: 3px;
}

/* Browsers that support :focus-visible hide the ring for mouse clicks */
.ask-carousel__arrow:focus:not(:focus-visible),
.ask-carousel__toggle:focus:not(:focus-visible),
.ask-carousel__dot:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- 8. Respect "reduce motion" system setting ---------- */
@media (prefers-reduced-motion: reduce) {
  .ask-carousel__slide,
  .ask-carousel__slide.is-active,
  .ask-carousel__arrow,
  .ask-carousel__dot::before,
  .ask-carousel__toggle {
    -webkit-transition: none;
    transition: none;
  }
}