/* =============================================================================
   Custom Fast Slider — Frontend Base Stylesheet
   Loaded on any page that contains a slider shortcode or Gutenberg block.

   IMPORTANT — What does NOT belong here:
   Dynamic, per-instance values (width, height, animation type, transition
   duration) are injected by CFS_Frontend::build_instance_css() via
   wp_add_inline_style(), scoped to the instance's unique ID (e.g., #cfs-slider-1).
   Keeping them separate ensures two sliders on the same page do not interfere
   with each other.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER WRAPPER — the outer container
   Width / Height / Mobile Height are injected per-instance by PHP.
   ───────────────────────────────────────────────────────────────────────────── */
.cfs-slider-wrap {
    position: relative;
    max-width: 100%;        /* Never overflow its parent */
    overflow: hidden;       /* Clip slides that are off-screen */
    background-color: #e5ebed;
    font-family: "Georgia", "Times New Roman", serif;
    margin: 0 auto;

    /* Keyboard-navigable: tabindex="0" on the element in HTML */
    outline: none;
}

/* Custom keyboard focus ring — more visible than the browser default */
.cfs-slider-wrap:focus-visible {
    outline: 3px solid #127f9e;
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER TRACK — contains all slide elements
   display / position rules are per-instance (set by PHP inline CSS).
   ───────────────────────────────────────────────────────────────────────────── */
.cfs-track {
    width: 100%;
    height: 100%;
    /* Opt into GPU compositing for smoother transform animations */
    will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────────────
   INDIVIDUAL SLIDE
   flex / position / display / opacity rules are per-instance (PHP inline CSS).
   ───────────────────────────────────────────────────────────────────────────── */
.cfs-slide {
    height: 100%;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDE CONTENT BOX — white card overlaid on the background image
   ───────────────────────────────────────────────────────────────────────────── */
.cfs-slide-content {
    background: #ffffff;
    padding: 45px 35px;
    width: 90%;
    max-width: 420px;
    margin-left: 15%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.cfs-slide-content h2 {
    font-size: 32px;
    color: #333;
    margin: 0 0 15px 0;
    font-weight: normal;
    line-height: 1.2;
}

/* Decorative squiggle divider rendered as a repeating SVG background */
.cfs-squiggle {
    width: 60px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpolyline points='0,8 5,2 10,8 15,2 20,8' fill='none' stroke='%23127f9e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    margin-bottom: 25px;
}

/* Description text — output via wp_kses_post so may contain inline HTML */
.cfs-desc {
    font-size: 15px;
    color: #222;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.cfs-desc p {
    margin: 0 0 10px 0;
}

/* Call-to-action link button */
.cfs-btn {
    display: inline-block;
    background-color: #127f9e;
    color: #ffffff;
    padding: 12px 25px;
    text-decoration: none;
    font-size: 14px;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 8px; /* gap between multiple buttons */
    transition: background-color 0.3s ease;
}

.cfs-btn:hover,
.cfs-btn:focus {
    background-color: #0d5e75;
    color: #ffffff;
    text-decoration: none;
}

.cfs-btn:focus-visible {
    outline: 3px solid #0d5e75;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION ARROWS (Prev / Next buttons)
   ───────────────────────────────────────────────────────────────────────────── */
.cfs-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cfs-nav-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%) scale(1.08);
}

.cfs-nav-btn:focus-visible {
    outline: 3px solid #127f9e;
    outline-offset: 2px;
}

.cfs-nav-btn svg {
    width: 18px;
    height: 18px;
    stroke: #127f9e;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none; /* Prevent svg from being the event.target */
}

.cfs-prev { left: 30px; }
.cfs-next { right: 30px; }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINATION DOTS
   ───────────────────────────────────────────────────────────────────────────── */
.cfs-dots-wrapper {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    z-index: 10;
}

/* Each dot is a <button> for proper keyboard/screen-reader semantics */
.cfs-dot {
    width: 9px;
    height: 9px;
    background-color: #a0a0a0;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.cfs-dot:hover {
    background-color: #127f9e;
    transform: scale(1.15);
}

.cfs-dot.active,
.cfs-dot[aria-selected="true"] {
    background-color: #127f9e;
    transform: scale(1.15);
}

.cfs-dot:focus-visible {
    outline: 2px solid #127f9e;
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Mobile adjustments
   The height override is handled per-instance by PHP inline CSS.
   Only layout and positioning corrections live here.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cfs-slide {
        justify-content: center;
    }

    .cfs-slide-content {
        margin: 0 auto;
        max-width: 85%;
        padding: 35px 25px;
        text-align: center;
    }

    .cfs-squiggle {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
    }

    /* Hide arrows on mobile — swipe gestures replace them */
    .cfs-nav-btn {
        display: none;
    }

    .cfs-dots-wrapper {
        bottom: 20px;
    }
}