/* =====================================================================
   WebwinkelKeur — standalone front-end styles
   All classes are prefixed with `wwk-` and require no CSS framework.
   ===================================================================== */

/* Theming ------------------------------------------------------------
   Only the button follows the theme's brand colour: --wwk-primary uses
   the theme token first (Bootstrap >= 5.3 sets --bs-primary on :root)
   with a fallback. --theme-on-primary is a token of the Spits starter
   theme: the readable text colour on the primary.

   Badge and stars are fixed: they belong to the WebwinkelKeur context.
   A theme that wants something else redefines --wwk-* in its own
   stylesheet, which loads later and wins.
   -------------------------------------------------------------------- */
:root {
    --wwk-card-bg: #f9fafb;
    --wwk-badge-bg: #dbeafe;
    --wwk-badge-color: #1e40af;
    --wwk-primary: var(--bs-primary, #1e40af);
    --wwk-primary-contrast: var(--theme-on-primary, #ffffff);
    --wwk-star: #fbbf24;
    --wwk-star-empty: #d1d5db;
    --wwk-text: #111827;
    --wwk-text-muted: #6b7280;
    --wwk-radius: 8px;
}

/* WebwinkelKeur mark ------------------------------------------------- */
.wwk-logo-mark {
    display: inline-block;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: url("../../images/favicon-webwinkelkeur.svg") center / contain no-repeat;
}

/* ValuedShops (the other languages than Dutch) */
.wwk-logo-mark--valuedshops {
    background-image: url("../../images/favicon-valuedshops.svg");
}

/* Stars --------------------------------------------------------------- */
.wwk-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    line-height: 1;
}

.wwk-star {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: var(--wwk-star);
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.wwk-star--full {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
}

.wwk-star--half {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M341.5 13.5C337.5 5.2 329.1 0 319.9 0s-17.6 5.2-21.6 13.5L229.7 154.8 76.5 177.5c-9 1.3-16.5 7.6-19.3 16.3s-.5 18.1 5.9 24.5L174.2 328.4 148 483.9c-1.5 9 2.2 18.1 9.7 23.5s17.3 6 25.3 1.7l137-73.2 137 73.2c8.1 4.3 17.9 3.7 25.3-1.7s11.2-14.5 9.7-23.5L465.6 328.4 576.8 218.2c6.5-6.4 8.7-15.9 5.9-24.5s-10.3-14.9-19.3-16.3L410.1 154.8 341.5 13.5zM320 384.7V79.1l52.5 108.1c3.5 7.1 10.2 12.1 18.1 13.3l118.3 17.5L423 303c-5.5 5.5-8.1 13.3-6.8 21l20.2 119.6L331.2 387.5c-3.5-1.9-7.4-2.8-11.2-2.8z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M341.5 13.5C337.5 5.2 329.1 0 319.9 0s-17.6 5.2-21.6 13.5L229.7 154.8 76.5 177.5c-9 1.3-16.5 7.6-19.3 16.3s-.5 18.1 5.9 24.5L174.2 328.4 148 483.9c-1.5 9 2.2 18.1 9.7 23.5s17.3 6 25.3 1.7l137-73.2 137 73.2c8.1 4.3 17.9 3.7 25.3-1.7s11.2-14.5 9.7-23.5L465.6 328.4 576.8 218.2c6.5-6.4 8.7-15.9 5.9-24.5s-10.3-14.9-19.3-16.3L410.1 154.8 341.5 13.5zM320 384.7V79.1l52.5 108.1c3.5 7.1 10.2 12.1 18.1 13.3l118.3 17.5L423 303c-5.5 5.5-8.1 13.3-6.8 21l20.2 119.6L331.2 387.5c-3.5-1.9-7.4-2.8-11.2-2.8z'/%3E%3C/svg%3E");
}

.wwk-star--empty {
    background-color: var(--wwk-star-empty);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
}

/* Score badge --------------------------------------------------------- */
.wwk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    background-color: var(--wwk-badge-bg);
    color: var(--wwk-badge-color);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
}

/* Scale after a score ("/5", "/10"): smaller and lighter than the score */
.wwk-scale {
    margin-left: 0.05em;
    font-size: 0.7em;
    font-weight: 500;
    opacity: 0.7;
}

/* Button -------------------------------------------------------------- */
.wwk-button {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 0.375rem;
    background-color: var(--wwk-primary);
    color: var(--wwk-primary-contrast);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.wwk-button:hover,
.wwk-button:focus {
    opacity: 0.9;
    color: var(--wwk-primary-contrast);
}

/* =====================================================================
   Reviews component / archive
   ===================================================================== */
.wwk-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.wwk-header__main {
    flex: 1 1 320px;
}

.wwk-header__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.wwk-header__stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.wwk-header__count,
.wwk-header__sub {
    color: var(--wwk-text-muted);
    font-size: 0.9rem;
}

.wwk-header__title {
    margin: 0 0 0.25rem;
}

.wwk-header__sub {
    margin: 0;
}

.wwk-reviews__logo {
    width: 6rem;
    height: auto;
}

.wwk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.wwk-review {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1.25rem;
    background-color: var(--wwk-card-bg);
    border-radius: var(--wwk-radius);
    box-sizing: border-box;
}

.wwk-review__head,
.wwk-review__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wwk-review__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.9rem;
    color: var(--wwk-text);
}

.wwk-review__author {
    font-weight: 600;
    color: var(--wwk-text);
}

.wwk-pagination {
    margin-top: 2rem;
}

.wwk-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.wwk-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--wwk-card-bg);
    color: var(--wwk-text);
    text-decoration: none;
    box-sizing: border-box;
}

.wwk-pagination .page-numbers.current {
    background-color: var(--wwk-primary);
    color: var(--wwk-primary-contrast);
    font-weight: 600;
}

.wwk-pagination .page-numbers.dots {
    background: none;
}

/* =====================================================================
   Slider
   ===================================================================== */
.wwk-slider__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.wwk-slider__track::-webkit-scrollbar {
    display: none;
}

.wwk-slider__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

/* =====================================================================
   Summary widget (inline mark + stars + score)
   ===================================================================== */
.wwk-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.wwk-summary__score {
    font-weight: 700;
    color: var(--wwk-text);
}

.wwk-summary__count {
    font-size: 0.75rem;
    color: var(--wwk-text-muted);
}

/* =====================================================================
   Small widget (mark + single star + score)
   ===================================================================== */
.wwk-summary-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.wwk-summary-sm .wwk-logo-mark {
    width: 1.5rem;
    height: 1.5rem;
}

.wwk-summary-sm .wwk-star {
    width: 1.25rem;
    height: 1.25rem;
}

.wwk-summary-sm__score {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wwk-text);
}

/* =====================================================================
   Average widget (card)
   ===================================================================== */
.wwk-average {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    min-width: 216px;
    padding: 12px 36px 12px 16px;
    background-color: #ffffff;
    border-radius: var(--wwk-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.wwk-average__score {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--wwk-badge-color);
}

.wwk-average .wwk-stars {
    display: flex;
}

.wwk-average__link {
    display: block;
    margin-top: 0.25rem;
    color: var(--wwk-text-muted);
    font-size: 0.8rem;
    text-decoration: none;
}

.wwk-average__logo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 1.2rem;
    height: 1.2rem;
}

/* Fixed number of cards per row (block setting "Reviews per row") ----- */
.wwk-grid--cols-1 { grid-template-columns: 1fr; }
.wwk-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wwk-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wwk-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Block spits/webwinkelkeur-reviews: two styles -------------------------
   "White" (default): white section with grey cards. "Light": light grey
   section with white cards. Themes can adjust the colours through the
   --wwk-section-* tokens. */
.row-type-webwinkelkeur-reviews {
    --wwk-section-bg: #ffffff;
    --wwk-section-bg-alt: #f3f4f6;
    padding-block: var(--wwk-section-padding, 3rem);
    background-color: var(--wwk-section-bg);
}

.row-type-webwinkelkeur-reviews.is-style-light {
    --wwk-card-bg: #ffffff;
    background-color: var(--wwk-section-bg-alt);
}

/* Block editor: review-field chip (score / number of reviews) in title and subtitle.
   Replaced by the value on the front end, so only visible in the editor. */
.wwk-field-var {
    display: inline-block;
    padding: 0 0.35em;
    border-radius: 4px;
    background-color: var(--wwk-badge-bg);
    color: var(--wwk-badge-color);
    font-size: 0.85em;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .wwk-grid--cols-3,
    .wwk-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    .wwk-header__aside {
        align-items: flex-start;
    }

    .wwk-grid[class*="wwk-grid--cols-"] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 783px) {
    .wwk-slider__item {
        flex-basis: calc((100% - 2rem) / 3);
    }
}