/*
 * ==========================================================================
 * Spinwinners ES Homepage
 * ==========================================================================
 *
 * Locatie:
 * /wp-content/plugins/templates/homepage-es/style.css
 *
 * Opbouw:
 * - hero
 * - gele trustbalk
 * - donkerpaarse bonussectie
 * - donkerpaarse contentsectie
 * - paars tekstvlak
 * - witte tekst
 * - gele accenten
 * - homepage slotkaarten
 */


/* ==========================================================================
   VARIABELEN
   ========================================================================== */

:root {

    --sw-home-purple: #5d249e;
    --sw-home-purple-dark: #350156;
    --sw-home-purple-deep: #2a0d45;

    --sw-home-yellow: #ffea00;

    --sw-home-white: #ffffff;

    --sw-home-container: 1180px;
    --sw-home-bonus-width: 1180px;
    --sw-home-content-width: 1180px;

    --sw-home-heading-font: "Organetto", Arial, sans-serif;
    --sw-home-body-font: Arial, sans-serif;
}


/* ==========================================================================
   ALGEMENE PAGINA
   ========================================================================== */

.sw-home,
.sw-home * {
    box-sizing: border-box;
}

.sw-home {
    width: 100%;

    margin: 0;
    padding: 0;

    background: var(--sw-home-purple-dark);

    color: var(--sw-home-white);
}

.sw-home-container {
    width: min(
        var(--sw-home-container),
        calc(100% - 40px)
    );

    margin-right: auto;
    margin-left: auto;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.sw-home-hero {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 250px;

    align-items: center;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(8, 3, 16, 0.40),
            rgba(8, 3, 16, 0.63)
        ),
        url("https://spinwinners.info/wp-content/uploads/2024/10/header-spinwinners.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    color: var(--sw-home-white);
}

.sw-home-hero__inner {
    position: relative;
    z-index: 2;

    display: flex;

    min-height: 250px;

    align-items: center;
    justify-content: center;

    padding-top: 35px;
    padding-bottom: 35px;

    text-align: center;
}


/* ==========================================================================
   H1
   ========================================================================== */

.sw-home .sw-home-h1 {
    width: 100%;
    max-width: 940px;

    margin: 0 auto !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: var(--sw-home-heading-font) !important;

    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;

    letter-spacing: -0.8px;

    text-align: center !important;
    text-transform: uppercase !important;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.32);
}

.sw-home .sw-home-h1 .sw-home-h1__yellow {
    color: var(--sw-home-yellow) !important;
}


/* ==========================================================================
   GELE TRUSTBALK
   ========================================================================== */

.sw-home-trustbar {
    position: relative;
    z-index: 5;

    width: 100%;
    height: 32px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--sw-home-yellow);

    color: #211329;
}

.sw-home-trustbar__inner {
    display: flex;

    width: min(
        1000px,
        calc(100% - 40px)
    );

    height: 100%;

    align-items: center;
    justify-content: space-between;

    margin: 0 auto;
}

.sw-home-trustbar__item {
    display: flex;

    flex: 1 1 33.333%;

    align-items: center;
    justify-content: center;

    min-width: 0;

    color: #211329;

    font-family: var(--sw-home-body-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;

    white-space: nowrap;
}

.sw-home-trustbar__check {
    display: inline-block;

    margin-right: 5px;

    color: #111111;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.sw-home-trustbar__text {
    display: inline-block;
}


/* ==========================================================================
   BONUSSECTIE
   ========================================================================== */

.sw-home-bonuses {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 68px 20px 120px;

    background: var(--sw-home-purple-dark);
}

.sw-home-bonuses__inner {
    width: min(
        var(--sw-home-bonus-width),
        calc(100% - 40px)
    );

    max-width: none;

    margin-right: auto;
    margin-left: auto;
}

.sw-home-bonuses .bonus-boxes,
.sw-home-bonuses .bonus-box-wrapper,
.sw-home-bonuses .bonus-boxes-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Voetnoot onder de boxen, bijv. "*Winsten uit free spins zijn direct opneembaar." (NL) */
.sw-home .sw-home-bonuses__note {
    margin: 18px 0 0;

    font-size: 13px;
    line-height: 1.5;
    text-align: center;

    color: #fff;
    opacity: 0.85;
}

.sw-home-bonuses > *:first-child,
.sw-home-bonuses__inner > *:first-child {
    margin-top: 0;
}

.sw-home-bonuses > *:last-child,
.sw-home-bonuses__inner > *:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   SEO / CONTENT ACHTERGROND
   ========================================================================== */

.sw-home-seo {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0 0 75px;

    background: var(--sw-home-purple-dark);
}


/* ==========================================================================
   PAARS CONTENTVLAK
   ========================================================================== */

/*
 * Zelfde maximale breedte als bonussectie: 1180px.
 * Zelfde hoofdpaarse kleur als de rest van de Spinwinners styling.
 */

.sw-home-content {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: var(--sw-home-content-width);

    margin: -55px auto 0;

    padding: 48px 52px 52px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    background: var(--sw-home-purple);

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.20);
}


/* ==========================================================================
   BODYTEKST
   ========================================================================== */

.sw-home .sw-home-content p {
    margin: 0 0 21px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: var(--sw-home-body-font);
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}


/* ==========================================================================
   H2
   ========================================================================== */

.sw-home .sw-home-content h2 {
    position: relative;

    margin: 52px 0 20px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: var(--sw-home-heading-font) !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;

    letter-spacing: -0.35px;

    text-transform: none !important;
}

.sw-home .sw-home-content h2:first-child {
    margin-top: 0 !important;
}

.sw-home .sw-home-content h2::after {
    display: block;

    width: 48px;
    height: 4px;

    margin-top: 12px;

    border-radius: 3px;

    background: var(--sw-home-yellow);

    content: "";
}


/* ==========================================================================
   H3
   ========================================================================== */

.sw-home .sw-home-content h3 {
    margin: 34px 0 13px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: var(--sw-home-heading-font) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    letter-spacing: -0.2px;

    text-transform: none !important;
}


/* ==========================================================================
   LINKS
   ========================================================================== */

.sw-home .sw-home-content a,
.sw-home .sw-home-content a:visited {
    color: var(--sw-home-yellow) !important;

    font-weight: 700;

    text-decoration: underline;
    text-decoration-color:
        rgba(255, 234, 0, 0.70);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sw-home .sw-home-content a:hover,
.sw-home .sw-home-content a:focus {
    color: #ffffff !important;

    text-decoration-color: #ffffff;
}


/* ==========================================================================
   LIJSTEN
   ========================================================================== */

.sw-home .sw-home-content ul,
.sw-home .sw-home-content ol {
    margin: 5px 0 25px 23px !important;
    padding: 0 !important;
}

.sw-home .sw-home-content li {
    margin: 0 0 10px !important;
    padding: 0 0 0 3px !important;

    color: #ffffff !important;

    font-family: var(--sw-home-body-font);
    font-size: 17px !important;
    line-height: 1.65 !important;
}

.sw-home .sw-home-content li::marker {
    color: var(--sw-home-yellow);

    font-weight: 700;
}

.sw-home .sw-home-link-list {
    margin-top: 7px !important;
    margin-bottom: 28px !important;
}

.sw-home .sw-home-link-list li {
    margin-bottom: 11px !important;
}

.sw-home .sw-home-link-list span {
    color: #ffffff !important;
}


/* ==========================================================================
   STRONG / BOLD
   ========================================================================== */

.sw-home .sw-home-content strong,
.sw-home .sw-home-content b {
    color: #ffffff;

    font-weight: 700;
}


/* ==========================================================================
   ALGEMENE CTA
   ========================================================================== */

.sw-home .sw-home-text-cta {
    margin-top: 8px !important;
    margin-bottom: 31px !important;
}

.sw-home .sw-home-text-cta a,
.sw-home .sw-home-text-cta a:visited {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 11px 18px;

    border-radius: 7px;

    background: var(--sw-home-yellow);

    color: var(--sw-home-purple-dark) !important;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.sw-home .sw-home-text-cta a:hover,
.sw-home .sw-home-text-cta a:focus {
    background: #ffffff;

    color: var(--sw-home-purple-dark) !important;

    transform: translateY(-1px);
}


/* ==========================================================================
   AFBEELDINGEN
   ========================================================================== */

.sw-home .sw-home-content img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   FAQ
   ==========================================================================

   Zelfde structuur als de FAQ op de es-pagina's (zie
   archive-pages-es/style.css): <section class="spinwinners-faq"> met
   <details><summary> en een ronde plus/min-knop.

   Maar in de kleuren van de homepage, want die is donker en de es-pagina's
   zijn licht. Een lichte FAQ-kaart hier neerzetten zou een designkeuze zijn
   die nog openstaat.

   De kaarten en de sectie eromheen liggen qua helderheid vrijwel gelijk
   (1,04:1), dus de scheiding moet van de rand komen en niet van de vulling.
   ========================================================================== */

.sw-home .sw-home-content .spinwinners-faq,
.sw-home .sw-home-content .sw-faq {
    width: 100%;

    margin: 40px 0 8px;
    padding: 0;
}

.sw-home .sw-home-content .spinwinners-faq details,
.sw-home .sw-home-content .sw-faq details {
    display: block;

    margin: 12px 0 !important;
    padding: 0 18px !important;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;

    background: var(--sw-home-purple-deep) !important;

    transition:
        border-color 0.18s ease,
        transform 0.18s ease;
}

.sw-home .sw-home-content .spinwinners-faq details:hover,
.sw-home .sw-home-content .sw-faq details:hover {
    transform: translateY(-1px);

    border-color: rgba(255, 255, 255, 0.24) !important;
}

.sw-home .sw-home-content .spinwinners-faq details[open],
.sw-home .sw-home-content .sw-faq details[open] {
    transform: none;

    padding-bottom: 18px !important;

    border-color: rgba(255, 234, 0, 0.45) !important;
}


/*
 * Klikbare vraagbalk
 */

.sw-home .sw-home-content .spinwinners-faq summary,
.sw-home .sw-home-content .sw-faq summary {
    position: relative;

    display: flex !important;
    min-height: 56px;

    align-items: center;

    margin: 0 -18px !important;
    padding: 16px 62px 16px 18px !important;

    border: 0 !important;
    outline: 0;

    cursor: pointer;
    list-style: none;

    background: transparent !important;
    color: #ffffff !important;

    font-family: var(--sw-home-body-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: left;

    transition: color 0.18s ease;
}

.sw-home .sw-home-content .spinwinners-faq summary:hover,
.sw-home .sw-home-content .sw-faq summary:hover {
    color: var(--sw-home-yellow) !important;
}

.sw-home .sw-home-content .spinwinners-faq summary:focus-visible,
.sw-home .sw-home-content .sw-faq summary:focus-visible {
    outline: 3px solid rgba(255, 234, 0, 0.55);
    outline-offset: -3px;
}

/* Standaard browserpijltje verbergen */

.sw-home .sw-home-content .spinwinners-faq summary::-webkit-details-marker,
.sw-home .sw-home-content .sw-faq summary::-webkit-details-marker {
    display: none;
}

.sw-home .sw-home-content .spinwinners-faq summary::marker,
.sw-home .sw-home-content .sw-faq summary::marker {
    content: "";
}


/*
 * Ronde plus/min-knop
 */

.sw-home .sw-home-content .spinwinners-faq summary::after,
.sw-home .sw-home-content .sw-faq summary::after {
    position: absolute;
    top: 50%;
    right: 16px;

    display: flex;
    width: 30px;
    height: 30px;

    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;

    content: "+";

    font-family: var(--sw-home-body-font);
    font-size: 21px;
    font-weight: 700;
    line-height: 1;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.sw-home .sw-home-content .spinwinners-faq details[open] > summary::after,
.sw-home .sw-home-content .sw-faq details[open] > summary::after {
    background: var(--sw-home-yellow);
    color: var(--sw-home-purple-dark);

    content: "−";
}


/*
 * Antwoordgedeelte
 *
 * De homepage-template draait do_blocks() maar bewust niet the_content, dus
 * wpautop komt er niet aan te pas: het antwoord staat als kale tekst in
 * <details> en niet in een <p>. Opmaak die aan `details p` hangt, grijpt hier
 * dus niet.
 *
 * Daarom staat de tekstopmaak op <details> zelf — die erft de tekst wel — en
 * komt het inspringen van de padding op <details> en niet van een marge op de
 * kinderen. Zo'n marge raakte namelijk ook de inline <a>'s in het antwoord, met
 * gaten rond elke link tot gevolg. De <summary> houdt zijn eigen kleur en
 * korpsgrootte en trekt zichzelf met een negatieve marge weer op volle breedte.
 */

.sw-home .sw-home-content .spinwinners-faq details,
.sw-home .sw-home-content .sw-faq details {
    color: #ded1e8 !important;

    font-family: var(--sw-home-body-font) !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
}

.sw-home .sw-home-content .spinwinners-faq details p,
.sw-home .sw-home-content .sw-faq details p {
    margin: 0 0 16px !important;
    padding: 0 !important;

    background: transparent !important;
    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.sw-home .sw-home-content .spinwinners-faq details p:first-of-type,
.sw-home .sw-home-content .sw-faq details p:first-of-type {
    margin-top: 4px !important;
}

.sw-home .sw-home-content .spinwinners-faq details p:last-child,
.sw-home .sw-home-content .sw-faq details p:last-child {
    margin-bottom: 0 !important;
}

.sw-home .sw-home-content .spinwinners-faq details a,
.sw-home .sw-home-content .spinwinners-faq details a:visited,
.sw-home .sw-home-content .sw-faq details a,
.sw-home .sw-home-content .sw-faq details a:visited {
    color: var(--sw-home-yellow) !important;

    text-decoration: underline;
}


/* ==========================================================================
   SLOTKAARTEN
   ==========================================================================

   De kaarten komen uit slots-catalog-es. Die stylesheet kleurt de titel en
   "Ver reseña →" alleen binnen .sw-es-archive .sw-es-archive-content — de
   wrappers van /es/slots/, die hier niet bestaan. Zonder de regels hieronder
   valt de kaarttitel dus terug op de gele linkkleur van .sw-home-content en de
   kop op het h3-formaat van de pagina: gele tekst op een witte kaart.

   De kaart krijgt hier het donkere palet van de homepage, zoals de FAQ eronder.
   Vulling en sectie liggen qua helderheid dicht bij elkaar, dus de scheiding
   komt van de rand.
   ========================================================================== */

.sw-home .sw-home-content .swsc-card {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    background: var(--sw-home-purple-deep) !important;

    box-shadow: none !important;
}

.sw-home .sw-home-content .swsc-card:hover {
    border-color: rgba(255, 255, 255, 0.24) !important;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important;
}


/*
 * Vlak achter de schermafbeelding, zichtbaar zolang die laadt.
 */

.sw-home .sw-home-content .swsc-image {
    background: rgba(255, 255, 255, 0.06);
}


/*
 * Kaarttitel: niet de paginakop van 22px met 34px erboven, maar het formaat
 * van de kaarten op /es/slots/.
 */

.sw-home .sw-home-content .swsc-card h3.swsc-title {
    margin: 0 0 10px !important;
    padding: 0 !important;

    font-family: var(--sw-home-body-font) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    letter-spacing: normal;
}

.sw-home .sw-home-content .swsc-card h3.swsc-title a,
.sw-home .sw-home-content .swsc-card h3.swsc-title a:visited {
    color: #ffffff !important;

    text-decoration: none !important;
}

.sw-home .sw-home-content .swsc-card h3.swsc-title a:hover,
.sw-home .sw-home-content .swsc-card h3.swsc-title a:focus {
    color: var(--sw-home-yellow) !important;
}


/*
 * "Ver reseña →"
 */

.sw-home .sw-home-content a.swsc-review,
.sw-home .sw-home-content a.swsc-review:visited {
    color: var(--sw-home-yellow) !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    text-decoration: none !important;
}

.sw-home .sw-home-content a.swsc-review:hover,
.sw-home .sw-home-content a.swsc-review:focus {
    text-decoration: underline !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .sw-home .sw-home-h1 {
        max-width: 780px;

        font-size: 39px !important;
    }

    .sw-home-bonuses {
        padding-top: 52px;
        padding-bottom: 100px;
    }

    .sw-home-bonuses__inner {
        width: calc(100% - 24px);
    }

    .sw-home-content {
        margin-top: -48px;

        padding: 42px 38px 46px;
    }

}


/* ==========================================================================
   MOBIEL
   ========================================================================== */

@media (max-width: 768px) {

    .sw-home-container {
        width: calc(100% - 24px);
    }


    /* ----------------------------------------------------------------------
       HERO
       ---------------------------------------------------------------------- */

    .sw-home-hero {
        min-height: 208px;

        background-position: center center;
    }

    .sw-home-hero__inner {
        min-height: 208px;

        padding-top: 25px;
        padding-bottom: 25px;
    }

    .sw-home .sw-home-h1 {
        max-width: 540px;

        padding: 0 5px !important;

        font-size: 34px !important;
        line-height: 1.08 !important;

        letter-spacing: -0.5px;
    }


    /* ----------------------------------------------------------------------
       TRUSTBALK
       ---------------------------------------------------------------------- */

    .sw-home-trustbar {
        height: 34px;
    }

    .sw-home-trustbar__inner {
        position: relative;

        display: block;

        width: 100%;
        height: 34px;

        margin: 0;
    }

    .sw-home-trustbar__item {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        display: flex;

        width: 100%;
        height: 34px;

        align-items: center;
        justify-content: center;

        padding: 0 15px;

        opacity: 0;

        font-size: 13px;

        white-space: nowrap;

        transform: translateX(20px);

        animation-name: swHomeTrustSlide;
        animation-duration: 7.5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    .sw-home-trustbar__item--1 {
        animation-delay: 0s;
    }

    .sw-home-trustbar__item--2 {
        animation-delay: 2.5s;
    }

    .sw-home-trustbar__item--3 {
        animation-delay: 5s;
    }

    .sw-home-trustbar__check {
        margin-right: 6px;

        font-size: 16px;
    }


    /* ----------------------------------------------------------------------
       BONUSSECTIE
       ---------------------------------------------------------------------- */

    .sw-home-bonuses {
        padding: 37px 11px 85px;
    }

    .sw-home-bonuses__inner {
        width: 100%;
        max-width: none;

        margin-right: auto;
        margin-left: auto;
    }


    /* ----------------------------------------------------------------------
       CONTENT
       ---------------------------------------------------------------------- */

    .sw-home-seo {
        padding: 0 0 50px;

        background: var(--sw-home-purple-dark);
    }

    .sw-home-content {
        margin-top: -38px;

        padding: 31px 24px 35px;

        border-radius: 13px;

        background: var(--sw-home-purple);

        box-shadow:
            0 11px 30px rgba(0, 0, 0, 0.18);
    }

    .sw-home .sw-home-content p,
    .sw-home .sw-home-content li {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .sw-home .sw-home-content h2 {
        margin-top: 43px !important;

        font-size: 26px !important;
        line-height: 1.23 !important;
    }

    .sw-home .sw-home-content h2::after {
        width: 42px;
        height: 4px;

        margin-top: 10px;
    }

    .sw-home .sw-home-content h3 {
        margin-top: 30px !important;

        color: #ffffff !important;

        font-size: 21px !important;
        line-height: 1.3 !important;
    }


}


/* ==========================================================================
   TRUSTBALK ANIMATIE
   ========================================================================== */

@keyframes swHomeTrustSlide {

    0% {
        opacity: 0;
        transform: translateX(22px);
    }

    4% {
        opacity: 1;
        transform: translateX(0);
    }

    28% {
        opacity: 1;
        transform: translateX(0);
    }

    32% {
        opacity: 0;
        transform: translateX(-22px);
    }

    100% {
        opacity: 0;
        transform: translateX(-22px);
    }

}


/* ==========================================================================
   KLEINE MOBIELE SCHERMEN
   ========================================================================== */

@media (max-width: 480px) {

    .sw-home .sw-home-h1 {
        font-size: 30px !important;
        line-height: 1.09 !important;
    }

    .sw-home-bonuses {
        padding-bottom: 78px;
    }

    .sw-home-content {
        margin-top: -34px;

        padding: 27px 19px 32px;
    }

    .sw-home .sw-home-content h2 {
        font-size: 24px !important;
    }

    .sw-home .sw-home-content h3 {
        color: #ffffff !important;

        font-size: 20px !important;
    }

}


/* ==========================================================================
   TOEGANKELIJKHEID
   ========================================================================== */

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {

    .sw-home-trustbar__item {
        display: none;

        animation: none;
        transform: none;
    }

    .sw-home-trustbar__item--1 {
        display: flex;

        opacity: 1;
    }

}


/* ==========================================================================
   HOMEPAGE ZONDER BONUSSECTIE
   ========================================================================== */

/*
 * Het contentvlak wordt normaal 55px omhoog getrokken tot in de onderpadding
 * van de bonussectie. Op een markt zonder partners (zoals /de/ in opbouw)
 * ontbreekt die sectie en zou het vlak over de gele trustbalk schuiven.
 * De modifier staat op de sw-home-seo-sectie in de post_content.
 */

.sw-home-seo--zonder-bonussen .sw-home-content {
    margin-top: 65px;
}

@media (max-width: 768px) {

    .sw-home-seo--zonder-bonussen .sw-home-content {
        margin-top: 45px;
    }

}