/*
 * Webber Testimonials — Frontend Styles
 * ──────────────────────────────────────────────────────────────────────────────
 * CSS custom properties (overridable via PHP Settings → Accent Colour
 * or per shortcode with accent_color="#hex"):
 *
 *  --wtm-primary         Main accent colour   (default: #C8102E — theme red)
 *  --wtm-primary-hover   Darker shade for hover states
 *  --wtm-primary-light   Very light tint for avatar background
 *  --wtm-star            Star colour          (default: #FBBF08 — golden)
 */

/* ════════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — defaults match webber-tosot-v1 colour scheme
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand colours — overridden by PHP inline style when accent is changed */
    --wtm-primary:         #C8102E;
    --wtm-primary-hover:   color-mix(in srgb, var(--wtm-primary) 82%, #000);
    --wtm-primary-light:   color-mix(in srgb, var(--wtm-primary) 10%, #fff);

    /* Neutral palette */
    --wtm-text:             #1a1a1a;
    --wtm-text-muted:#666666;
    --wtm-bg:               #ffffff;
    --wtm-bg-alt:         #F5F5F5;
    --wtm-border:        #DADADA;
    --wtm-black:          #000000;

    /* Component tokens */
    --wtm-radius:          0.375rem;
    --wtm-shadow:  0px 0px 32.2px 3px rgba(0, 0, 0, 0.09);
    --wtm-shadow-hover:    0 10px 28px rgba(0, 0, 0, 0.12);
    --wtm-transition:      all 0.3s ease;
    --wtm-star:            #FBBF08;
    --wtm-font:            inherit;   /* inherits theme font — works out-of-the-box on any site */

    /* Spacing */
    --wtm-card-padding:    32px;
    --wtm-gap:             24px;
    --wtm-avatar-size:     56px;
}

/* ════════════════════════════════════════════════════════════════════════════
   WRAPPER
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-wrapper {
    font-family:    var(--wtm-font);
    color:          var(--wtm-text);
    box-sizing:     border-box;
    /* Allow peeking cards to bleed outside the wrapper horizontally.
       overflow-y is intentionally 'visible' so dot bullets below the stage
       are never clipped by a scrollable ancestor that only clips on x. */
    overflow-x:     visible;
    overflow-y:     visible;
    /* Bottom padding reserves space for the dot bullets so they're never
       hidden behind following content on pages with tight spacing. */
    padding-bottom: 16px;
}
.wtm-wrapper *,
.wtm-wrapper *::before,
.wtm-wrapper *::after {
    box-sizing: inherit;
}

/* ════════════════════════════════════════════════════════════════════════════
   GROUP TITLE
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-group-title {
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--wtm-text);
    margin:        0 0 24px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--wtm-primary);
    letter-spacing: -0.3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD  — base
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-card {
    background:       var(--wtm-bg);
    border-radius:    var(--wtm-radius);
    padding:          var(--wtm-card-padding);
    display:          flex;
    flex-direction:   column;
    height:           100%;
    position:         relative;
    transition:       var(--wtm-transition);
    /*overflow:         hidden;   !* clip the featured badge corner *!*/
}

/* ── Card variants ─────────────────────────────────────────────────────────── */
.wtm-card--default {
    box-shadow: var(--wtm-shadow);
  /* Rectangle 310 */

  /*position: absolute;*/
  /*width: 392px;*/
  /*height: 241.57px;*/

  box-shadow: 0px 0px 32.2px 3px rgba(0, 0, 0, 0.09);
  border-radius: 12px;
  border:     none;
}
.wtm-card--bordered {
    box-shadow: none;
    border:     1px solid var(--wtm-border);
}
.wtm-card--shadow {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14);
    border:     none;
}
.wtm-card--minimal {
    box-shadow:  none;
    border:      none;
    background:  transparent;
    padding-left: 0;
    padding-right: 0;
}
.wtm-card--minimal::before {
    content:    '';
    display:    block;
    height:     3px;
    width:      48px;
    background: var(--wtm-primary);
    margin-bottom: 20px;
    border-radius: 2px;
}

/* ── Hover lift (not applied to minimal) ───────────────────────────────────── */
.wtm-card--default:hover,
.wtm-card--bordered:hover,
.wtm-card--shadow:hover {
    box-shadow: var(--wtm-shadow-hover);
    transform:  translateY(-3px);
}

/* ════════════════════════════════════════════════════════════════════════════
   FEATURED BADGE
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-featured-badge {
    position:       absolute;
    top:            0;
    right:          0;
    background:     var(--wtm-primary);
    color:          #fff;
    font-size:      0.65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:        4px 10px 4px 12px;
    border-radius:  0 var(--wtm-radius) 0 var(--wtm-radius);
    line-height:    1.6;
    display:        inline-flex;
    align-items:    center;
    gap:            3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   QUOTE AREA
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-quote-wrap {
    flex: 1;
    margin-bottom: 12px;
}

/* Large typographic quote mark */
.wtm-quote-icon {
    display:     block;
    font-size:   3.8rem;
    line-height: 1;
    color:       var(--wtm-primary);
    margin-bottom: 6px;
    /*opacity:     0.75;*/
    position: absolute;
    top: -32px;
}

.wtm-quote-text {
    /*font-size:   0.9rem;*/
    /*font-size:   16px;*/
    line-height: 1.5;
    color:       var(--wtm-text);
    padding-top: 12px;
}

.wtm-quote-text p{
  margin: 0 !important;
}

/* Strip the margin from the last paragraph inside the quote */
.wtm-quote-text > p:last-child {
    margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   STAR RATING
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-stars {
    display:       flex;
    gap:           2px;
    margin-bottom: 16px;
    line-height:   1;
}

.wtm-star {
    font-size: 1.05rem;
    color:     var(--wtm-border);
}
.wtm-star--filled {
    color: var(--wtm-star);
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTHOR FOOTER
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-author {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-top:  auto;  /* always push to card bottom */
    padding-top: 4px;
}

/* ── Avatar container ────────────────────────────────────────────────────── */
.wtm-avatar {
    width:          var(--wtm-avatar-size);
    height:         var(--wtm-avatar-size);
    border-radius:  50%;
    flex-shrink:    0;
    overflow:       hidden;
    border:         2px solid var(--wtm-primary);
    background:     var(--wtm-primary-light);
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     border-color 0.2s;
}

/* Photo inside avatar */
.wtm-avatar .wtm-avatar-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Icon-class avatar */
.wtm-avatar--icon {
    font-size: 1.4rem;
    color:     var(--wtm-primary);
}
.wtm-avatar--icon svg {
    width:  28px;
    height: 28px;
    fill:   var(--wtm-primary);
}

/* Initials fallback */
.wtm-avatar--initials span {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--wtm-primary);
    line-height: 1;
    user-select: none;
}

/* ── Author text ──────────────────────────────────────────────────────────── */
.wtm-author-info {
    flex:      1;
    min-width: 0;
}

.wtm-author-name {
    display:     block;
    font-weight: 700;
    /*font-size:   0.88rem;*/
    color:    var(--wtm-primary);
    line-height: 12px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.wtm-author-position {
    display:   block;
    font-size: 0.89rem;
    font-weight: bold;
    color:     var(--wtm-black);
    margin-top: 1px;
}

.wtm-author-company {
    display:      block;
    font-size:    0.89rem;
    color:        var(--wtm-black);
    font-weight:  600;
    margin-top:   1px;
}

.wtm-author-source {
    display:    block;
    font-size:    0.89rem;
    color:      var(--wtm-text-muted);
    margin-top: 3px;
    opacity:    0.8;
}
.wtm-author-source a {
    color:           var(--wtm-primary);
    text-decoration: none;
    transition:      opacity 0.2s;
}
.wtm-author-source a:hover {
    opacity: 0.75;
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════════
   NO-RESULTS
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-no-results {
    color:         var(--wtm-text-muted);
    text-align:    center;
    padding:       40px 20px;
    background:    var(--wtm-bg-alt);
    border-radius: var(--wtm-radius);
    font-size:     0.9rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   GRID LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-grid {
    display: grid;
    gap:     var(--wtm-gap);
}

.wtm-grid--cols-1 { grid-template-columns: 1fr; }
.wtm-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wtm-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wtm-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Grid responsive breakpoints ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .wtm-grid--cols-3,
    .wtm-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .wtm-grid--cols-2,
    .wtm-grid--cols-3,
    .wtm-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIST LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
.wtm-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--wtm-gap);
}

/* List cards go horizontal: author on left, quote on right */
.wtm-list .wtm-card {
    flex-direction: row;
    align-items:    flex-start;
    gap:            var(--wtm-gap);
}

.wtm-list .wtm-author {
    flex-direction: column;
    text-align:     center;
    min-width:      100px;
    flex-shrink:    0;
    margin-top:     0;
    padding-top:    0;
}

.wtm-list .wtm-author-name,
.wtm-list .wtm-author-position,
.wtm-list .wtm-author-company,
.wtm-list .wtm-author-source {
    white-space: normal;
    overflow:    visible;
    text-align:  center;
}

.wtm-list .wtm-quote-wrap {
    flex: 1;
    margin-bottom: 0;
}

.wtm-list .wtm-stars {
    margin-top: 8px;
}

/* Stack list items on small screens */
@media (max-width: 575px) {
    .wtm-list .wtm-card {
        flex-direction: column;
    }
    .wtm-list .wtm-author {
        flex-direction: row;
        text-align:     left;
        min-width:      unset;
    }
    .wtm-list .wtm-author-name,
    .wtm-list .wtm-author-position,
    .wtm-list .wtm-author-company,
    .wtm-list .wtm-author-source {
        text-align: left;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   CAROUSEL — Owl Carousel overrides
   ════════════════════════════════════════════════════════════════════════════ */

/* Allow peek (stagePadding) to bleed outside the wrapper without clipping */
.wtm-carousel.owl-carousel {
    overflow: visible;
    /*padding: 30px 0; !* vertical padding to accommodate nav arrows *!*/
}

/* Padding inside each Owl item so shadows are not clipped */
.wtm-carousel .owl-item {
    padding: 12px 8px;
}
.wtm-carousel .owl-stage-outer {
  padding: 20px 0 !important;
}

/* Equal-height cards within carousel items */
.wtm-carousel .owl-item .wtm-card {
    height: 100%;
}

/* ── Navigation arrows ────────────────────────────────────────────────────── */
.wtm-carousel .owl-nav {
    margin-top:  16px;
    text-align:  center;
    user-select: none;
}

.wtm-carousel .owl-nav button.owl-prev,
.wtm-carousel .owl-nav button.owl-next {
    background:    var(--wtm-bg)      !important;
    /*border:        2px solid var(--wtm-primary) !important;*/
    /*border-radius: 50%                !important;*/
    width:         42px;
    height:        42px;
    margin:        0 6px;
    color:         var(--wtm-primary) !important;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    transition:    var(--wtm-transition);
    outline:       none;
    padding:       0;
    line-height:   1;
}

.wtm-carousel .owl-nav button.owl-prev:hover,
.wtm-carousel .owl-nav button.owl-next:hover,
.wtm-carousel .owl-nav button.owl-prev:focus,
.wtm-carousel .owl-nav button.owl-next:focus {
    background: var(--wtm-primary)       !important;
    color:      #ffffff                  !important;
    transform:  scale(1.08);
}

.wtm-carousel .owl-nav button.owl-prev:active,
.wtm-carousel .owl-nav button.owl-next:active {
    transform: scale(0.96);
}

/* Hide disabled arrow on no-loop mode */
.wtm-carousel .owl-nav .disabled {
    opacity:        0.35;
    pointer-events: none;
}

/* ── Dot / Bullet navigation + Nav arrows visibility ──────────────────────── */
/*
 * ── Owl nav / dots visibility — controlled by data-nav / data-dots attributes ──
 *
 * PHP outputs data-nav="1|0" and data-dots="1|0" on the .wtm-carousel element
 * directly from the shortcode parameter (or its saved default).
 *
 * Priority chain (both declarations are !important so specificity decides):
 *   [data-nav="0"] / [data-dots="0"]  specificity (0,4,0)  →  display:none
 *   [data-nav="1"] / [data-dots="1"]  specificity (0,4,0)  →  display:block/flex
 *   broad layout rule                 specificity (0,3,0)  →  layout only, no display
 *   Owl's own  .owl-nav.disabled / .owl-dots.disabled       →  display:none (lowest)
 *
 * The companion JS applyVisible() removes Owl's inline style="display:none" (set
 * via jQuery .hide()) which would otherwise beat even CSS !important rules.
 */

/* Show nav when nav="1" */
.wtm-carousel.owl-carousel[data-nav="1"] .owl-nav,
.wtm-wrapper .wtm-carousel[data-nav="1"] .owl-nav {
    display:    block   !important;
    visibility: visible !important;
}
/* Hide nav when nav="0" */
.wtm-carousel.owl-carousel[data-nav="0"] .owl-nav,
.wtm-wrapper .wtm-carousel[data-nav="0"] .owl-nav {
    display: none !important;
}

/* Show dots when dots="1" */
.wtm-carousel.owl-carousel[data-dots="1"] .owl-dots,
.wtm-wrapper .wtm-carousel[data-dots="1"] .owl-dots {
    display:    flex    !important;
    visibility: visible !important;
}
/* Hide dots when dots="0" */
.wtm-carousel.owl-carousel[data-dots="0"] .owl-dots,
.wtm-wrapper .wtm-carousel[data-dots="0"] .owl-dots {
    display: none !important;
}

/* ── Broad layout rule — spacing / flex alignment only, NO display override ── */
.wtm-carousel.owl-carousel .owl-dots,
.wtm-wrapper .wtm-carousel .owl-dots {
    /* display is intentionally absent — governed by the [data-dots] rules above */
    justify-content: center;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             6px;
    margin-top:      20px;
    padding:         8px 0 4px;
    width:           100%;
    line-height:     1;
    text-align:      center;  /* legacy fallback */
}


/* Individual dot button — reset all browser chrome */
.wtm-carousel.owl-carousel .owl-dots .owl-dot,
.wtm-wrapper .wtm-carousel .owl-dots .owl-dot {
    display:            inline-flex !important;
    align-items:        center;
    justify-content:    center;
    background:         transparent !important;
    border:             none !important;
    outline:            none;
    padding:            5px;
    margin:             0;
    cursor:             pointer;
    -webkit-appearance: none;
    appearance:         none;
    flex-shrink:        0;
}

/* The visible dot circle */
.wtm-carousel.owl-carousel .owl-dots .owl-dot span,
.wtm-wrapper .wtm-carousel .owl-dots .owl-dot span {
    display:       block !important;
    width:         10px !important;
    height:        10px !important;
    border-radius: 50% !important;
    background:    #DADADA !important;
    background:    var(--wtm-border, #DADADA) !important;
    transition:    background 0.25s ease, transform 0.25s ease;
    margin:        0 !important;
    flex-shrink:   0;
}

/* Active + hover state */
.wtm-carousel.owl-carousel .owl-dots .owl-dot.active span,
.wtm-wrapper .wtm-carousel .owl-dots .owl-dot.active span,
.wtm-carousel.owl-carousel .owl-dots .owl-dot:hover span,
.wtm-wrapper .wtm-carousel .owl-dots .owl-dot:hover span {
    background: #C8102E !important;
    background: var(--wtm-primary, #C8102E) !important;
    transform:  scale(1.35);
}


/* ════════════════════════════════════════════════════════════════════════════
   REDUCED-MOTION — respect user preference
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .wtm-card,
    .wtm-carousel .owl-nav button,
    .wtm-carousel .owl-dots .owl-dot span {
        transition: none !important;
        transform:  none !important;
        animation:  none !important;
    }
}