/* ==========================================================================
   Testimonials carousel
   Loaded only on pages that have testimonial rows (see include/core.php).

   Two states:
     default                    - every slide stacked and visible (no-JS)
     .wrc-testimonials--ready   - slides stacked in one grid cell, crossfaded
   ========================================================================== */

.wrc-testimonials {
    max-width: 800px;
    margin: 0 auto 30px;
}

.wrc-testimonials__track {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrc-testimonials__slide {
    margin: 0 0 25px;
    padding: 30px 35px;
    background: #f9f9f9;
    border-left: 4px solid #6bb5a3;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.wrc-testimonials__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
}

.wrc-testimonials__text {
    margin: 0;
}

/* Quotation marks come from the design, not the content. The ACF field
   instructions tell the editor not to type them. */
.wrc-testimonials__text::before { content: "\201C"; }
.wrc-testimonials__text::after  { content: "\201D"; }

.wrc-testimonials__attribution {
    display: block;
    margin-top: 18px;
    font-size: 15px;
    font-style: normal;
    color: #6b7671;
}

.wrc-testimonials__attribution::before { content: "\2014\00A0"; }

/* Controls cannot work without JS, so they stay hidden until it marks ready. */
.wrc-testimonials__controls {
    display: none;
}

/* ==========================================================================
   Enhanced state
   ========================================================================== */

/* One grid cell, every slide inside it: the container height is set by the
   tallest slide automatically. No JS measuring, and it re-adapts for free on
   resize and when the footer text-resize widget changes the font size. */
.wrc-testimonials--ready .wrc-testimonials__track {
    display: grid;
}

.wrc-testimonials--ready .wrc-testimonials__slide {
    grid-area: 1 / 1;
    margin: 0;
    display: flex;
    align-items: center;            /* short quotes centre in the tallest card */
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms ease, visibility 0s linear 900ms;
}

.wrc-testimonials--ready .wrc-testimonials__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 900ms ease, visibility 0s linear 0s;
}

.wrc-testimonials--ready .wrc-testimonials__viewport {
    touch-action: pan-y;            /* keep vertical scrolling while swiping */
}

.wrc-testimonials--ready .wrc-testimonials__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.wrc-testimonials__arrow,
.wrc-testimonials__toggle {
    -webkit-appearance: none;
    appearance: none;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #6bb5a3;
    line-height: 0;
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease;
}

.wrc-testimonials__arrow:hover,
.wrc-testimonials__toggle:hover {
    color: #4a9182;
    background-color: rgba(107, 181, 163, .12);
}

.wrc-testimonials__arrow svg,
.wrc-testimonials__toggle svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.wrc-testimonials__dots {
    display: flex;
    gap: 10px;
    margin: 0 6px;
}

.wrc-testimonials__dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #6bb5a3;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 250ms ease;
}

.wrc-testimonials__dot[aria-current="true"] {
    background: #6bb5a3;
}

/* 10px dot, 24px tap target (WCAG 2.5.8 Target Size). */
.wrc-testimonials__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
}

.wrc-testimonials__arrow:focus-visible,
.wrc-testimonials__toggle:focus-visible,
.wrc-testimonials__dot:focus-visible {
    outline: 2px solid #6bb5a3;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .wrc-testimonials--ready .wrc-testimonials__slide,
    .wrc-testimonials--ready .wrc-testimonials__slide.is-active {
        transition: none;
    }
}

@media (max-width: 600px) {
    .wrc-testimonials__slide { padding: 22px 20px; }
    .wrc-testimonials__quote { font-size: 16px; }
}