/* ── Carousel nav — reusable external controls (.eos-cnav) ────────────
   Circle arrow buttons + page dots that live OUTSIDE the carousel they
   drive, so they can sit in their own row (the Figma puts them centred
   below the slides, which Divi's own arrow/dot positioning can't do —
   arrows are pinned to the vertical centre of the carousel's sides).

   Two independent things ship here:

   1. The BUTTON look, shared with the Services carousel. Same treatment
      the Figma uses for the insurance arrows: transparent, 2px ring in
      --darkest-teal, and on hover the ring fills and the glyph inverts
      to white. Size is a custom property so one rule serves both
      (2.5rem here, 3.625rem on Services via --lg).

   2. The DOTS, one per page.

   The wiring is in js/carousel-nav.js, which proxies clicks to the Divi
   carousel's own (hidden) arrows and dots rather than reimplementing the
   loop — see that file for why.

   Figma values are rounded off their raw exports on purpose:
     button 2.54588rem -> 2.5rem   dot 0.65844rem -> 0.625rem
   Rounding lands the whole group at ~238px against the Figma's 243px. */

.eos-cnav {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 1.5rem;   /* arrows to the dot group */
}


/* ── Arrow button ── */
.eos-cnav__btn {
  --cnav-btn      : 2.5rem;
  width           : var(--cnav-btn);
  height          : var(--cnav-btn);
  flex            : 0 0 auto;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  padding         : 0;
  background      : transparent;
  border          : 2px solid var(--darkest-teal);
  border-radius   : 50%;
  color           : var(--darkest-teal);
  cursor          : pointer;
  transition      : background-color 0.2s ease, color 0.2s ease;
}

/* Size is a custom property so a host can resize the button without
   restating the look. Services does exactly that from its own file:
   `.svc-nav .eos-cnav__btn { --cnav-btn: 3.625rem }`.

   Deliberately NOT a `--lg` modifier class: these buttons live inside Divi
   code modules, whose markup is stored in block-attribute JSON, and a `--`
   in that JSON terminates the HTML comment the block lives in. A container
   override needs no extra class in the markup at all. */

.eos-cnav__btn:hover {
  background : var(--darkest-teal);
  color      : var(--white);
}

.eos-cnav__btn:focus-visible {
  outline        : 2px solid var(--darkest-teal);
  outline-offset : 3px;
}

/* the glyph is stroked with currentColor, so it inverts with the button */
.eos-cnav__btn svg {
  display : block;
  width   : 1.5rem;
  height  : 1.5rem;
}


/* ── Small size (.eos-cnav-sm) ────────────────────────────────────────
   The In Her Words nav on Meet the Doctor: the Figma draws 29px buttons
   11px apart there against the 40px/24px default, and that is the whole
   difference — a size, not a second design. Set on the container so the
   markup only ever names one extra class, and on the button rather than
   the container because .eos-cnav__btn declares --cnav-btn itself, and a
   rule on the element beats an inherited value. */
.eos-cnav-sm { gap: 0.6875rem; }                                /* 11px */
.eos-cnav-sm .eos-cnav__btn { --cnav-btn: 1.8125rem; }          /* 29px */
.eos-cnav-sm .eos-cnav__btn svg {
  width  : 1.0625rem;   /* 17px — the default's 24/40 ratio, held */
  height : 1.0625rem;
}


/* ── Large size (.eos-cnav-lg) ────────────────────────────────────────
   The Home reviews nav. Figma Frame 9 (4026:551) measures the whole control
   at 346x58: two 58px arrows, six 15px dots spaced 35px on centre (so 20px
   gaps), and 20px between the dot group and each arrow. Same 58px the
   Services carousel already uses — that one sets it from its own file, this
   is the same tier named so any instance can opt in. */
.eos-cnav-lg { gap: 1.25rem; }                                  /* 20px */
.eos-cnav-lg .eos-cnav__btn { --cnav-btn: 3.625rem; }           /* 58px */
.eos-cnav-lg .eos-cnav__btn svg {
  width  : 2.1875rem;   /* 35px — the default's 24/40 ratio, held */
  height : 2.1875rem;
}
.eos-cnav-lg .eos-cnav__dots { gap: 1.25rem; }                  /* 20px */
.eos-cnav-lg .eos-cnav__dot  { --cnav-dot: 0.9375rem; }         /* 15px */

/* Phone drops the whole control to 70% of that, which the design states
   outright: Figma Group 18 (4083:631) measures 243x40.73 against the desktop
   Frame 9's 346x58 — the same ratio on both axes, 0.702. Without it the six
   dots plus two 58px arrows need 346px inside a 312px column at 390 and the
   dot row wraps onto a second line. */
@media (max-width: 767px) {
  .eos-cnav-lg { gap: 0.875rem; }                                 /* 14px */
  .eos-cnav-lg .eos-cnav__btn { --cnav-btn: 2.5rem; }             /* 40px */
  .eos-cnav-lg .eos-cnav__btn svg { width: 1.5rem; height: 1.5rem; }
  .eos-cnav-lg .eos-cnav__dots { gap: 0.875rem; }
  .eos-cnav-lg .eos-cnav__dot  { --cnav-dot: 0.65625rem; }        /* 10.5px */
}


/* ── Page dots ── */
/* WRAPPING IS NOT OPTIONAL. There is one dot per real slide, and the Before &
   After carousel runs to fourteen — at 390px that row wants 458px of flex
   content inside a 312px nav, which pushed the PREV arrow off the left of the
   screen and gave the whole page a 34px horizontal scroll. It read like a
   Divi carousel-track overflow and was mistaken for one more than once; it is
   ours. Wrapping the dots contains it without capping the count, so every
   slide keeps an indicator. */
.eos-cnav__dots {
  display     : flex;
  align-items : center;
  justify-content : center;
  flex-wrap   : wrap;
  min-width   : 0;      /* lets it shrink below its content width */
  gap         : 0.625rem;
}

/* The NAV itself must NOT wrap. Letting it wrap stacked the prev arrow, the dot
   row and the next arrow into a column — the dots now mirror Divi's paging so
   the row is short enough to fit, and if it ever is not, it is the dots that
   should reflow, not the arrows that flank them. */

.eos-cnav__dot {
  --cnav-dot    : 0.625rem;
  width         : var(--cnav-dot);
  height        : var(--cnav-dot);
  flex          : 0 0 auto;
  padding       : 0;
  background    : transparent;
  border        : 1px solid var(--darkest-teal);
  border-radius : 50%;
  cursor        : pointer;
  transition    : background-color 0.2s ease;
}

/* The Figma only draws the resting outline, so the active state is the
   conventional fill. aria-current doubles as the state hook and the
   accessible cue, so there is no class to keep in sync separately. */
.eos-cnav__dot[aria-current="true"] { background: var(--darkest-teal); }

.eos-cnav__dot:focus-visible {
  outline        : 2px solid var(--darkest-teal);
  outline-offset : 3px;
}


/* ── Hide the carousel's own controls, but ONLY once a nav has claimed it ──
   js/carousel-nav.js adds .eos-cnav-host after it successfully binds. That
   ordering matters: if the script never runs, Divi's native arrows and dots
   stay visible and the carousel is still operable. Hiding them from CSS
   alone would leave it dead.

   display:none is deliberate rather than visibility/opacity — the proxy
   calls .click() directly on these elements, which fires regardless of
   whether they are rendered. */
.eos-cnav-host .et_pb_group_carousel_arrow,
.eos-cnav-host .et_pb_group_carousel_dots { display: none; }


/* ── .eos-cnav-arrows — the carousel's OWN arrows, in the same button ──
   Opt in with the CSS class `eos-cnav-arrows` on a Divi Group Carousel.

   WHY BOTH MECHANISMS EXIST. A code-module nav can sit anywhere in the
   layout, which is the only way to get the Figma's centred-below row; but
   the Figma also puts arrows at the carousel's own left and right edges on
   In Her Words at desktop, and Divi already positions and wires arrows
   exactly there ("Arrows > Position: outside"). So that breakpoint keeps
   Divi's arrows and only borrows the look, and the code module takes over
   below it — no second nav, no duplicated loop maths.

   The handover is automatic and needs no breakpoint here: the code module
   carries its own `disabledOn`, and js/carousel-nav.js only stamps
   .eos-cnav-host (which hides these) while the nav is actually on screen.

   Divi's own positioning is deliberately left alone — this sets no top,
   left, right or transform, so "outside"/"inside" stays a builder choice. */
.eos-cnav-arrows .et_pb_group_carousel_arrow {
  --cnav-btn      : 1.8125rem;   /* 29px, per the Figma */
  width           : var(--cnav-btn);
  height          : var(--cnav-btn);
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : transparent;
  border          : 2px solid var(--darkest-teal);
  border-radius   : 50%;
  color           : var(--darkest-teal);
  transition      : background-color 0.2s ease, color 0.2s ease;
}

.eos-cnav-arrows .et_pb_group_carousel_arrow:hover {
  background : var(--darkest-teal);
  color      : var(--white);
}

.eos-cnav-arrows .et_pb_group_carousel_arrow:focus-visible {
  outline        : 2px solid var(--darkest-teal);
  outline-offset : 3px;
}

/* Divi's glyph is a character in its ETmodules icon font — a chunky solid
   triangle-chevron at 48px that no font-size or color can turn into the
   Figma's thin arrow. It is a real text node, not a pseudo-element, so
   hiding it takes display:none (at 0,3,0 — Divi's own rule for it lands at
   0,3,0 in a DEFERRED sheet, and a tie there would lose on order). */
.eos-cnav-arrows .et_pb_group_carousel_arrow .et-pb-icon { display: none; }

/* The arrow is then painted as a mask, so one shape inherits the button's
   colour and inverts with it on hover — same trick, same path data, as the
   inline SVG in the code-module buttons, so the two are identical glyphs. */
.eos-cnav-arrows .et_pb_group_carousel_arrow::before {
  content    : '';
  display    : block;
  width      : 1.0625rem;   /* 17px — the button's own 24/40 ratio */
  height     : 1.0625rem;
  background : currentColor;
}

.eos-cnav-arrows .et_pb_group_carousel_arrow_prev::before {
  -webkit-mask : var(--cnav-arrow-prev) no-repeat center / contain;
          mask : var(--cnav-arrow-prev) no-repeat center / contain;
}

.eos-cnav-arrows .et_pb_group_carousel_arrow_next::before {
  -webkit-mask : var(--cnav-arrow-next) no-repeat center / contain;
          mask : var(--cnav-arrow-next) no-repeat center / contain;
}

/* Divi's "outside" arrows sit flush against the carousel's edge, which puts
   them right up against the text of the slide — the Figma leaves a channel
   between the two. Nudged outward with margin, NOT transform: transform is
   where Divi's own positioning lives, and restating it here would couple this
   file to the arrows' inside/outside setting. Set the gap to 0 to sit flush. */
.eos-cnav-arrows .et_pb_group_carousel_arrow_prev { margin-left  : calc(-1 * var(--cnav-arrow-gap)); }
.eos-cnav-arrows .et_pb_group_carousel_arrow_next { margin-right : calc(-1 * var(--cnav-arrow-gap)); }

/* Vertical placement. Divi pins arrows to 50% of the carousel, which is only
   right when a slide is one block of even height. On In Her Words each slide
   is a LABEL plus a paragraph, so 50% landed halfway down the paragraph —
   and it moved every time the copy changed length. Measured off the Figma,
   the arrows belong at the label/paragraph junction, which is a fixed
   distance from the top of the slide (label ~2rem + the gap under it) and
   therefore does NOT drift with the number of lines.

   Divi keeps owning the transform (translateY(-50%)), so this value is the
   arrow's CENTRE. Set --cnav-arrow-top to `50%` to hand it back to Divi.
   0,3,0 on purpose: Divi's own `top` for a dots-disabled carousel is 0,2,0
   in a deferred sheet, and a tie there would lose on load order. */
.eos-cnav-arrows.et_pb_group_carousel .et_pb_group_carousel_arrow {
  top : var(--cnav-arrow-top);
}

/* Held on the opt-in class rather than :root — they belong to this control,
   and keeping them here means the file is the one place the glyph is
   defined for both the native arrows and (as inline SVG) the code module. */
.eos-cnav-arrows {
  --cnav-arrow-gap  : 0.75rem;
  --cnav-arrow-top  : 4rem;
  --cnav-arrow-prev : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12 L5 12 M11 6 L5 12 L11 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cnav-arrow-next : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12 L19 12 M13 6 L19 12 L13 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}