/*
 * ==========================================================================
 * Spinwinners Root Homepage
 * ==========================================================================
 *
 * Locatie:
 * /wp-content/plugins/templates/homepage-root/style.css
 *
 * Laadt alleen op de voorpagina (zie homepage-root-loader.php).
 *
 * De twee lettertypen stonden tot 02-09-2026 in de custom fonts van Elementor
 * Pro. Die stylesheet komt alleen op Elementor-pagina's mee, dus zonder deze
 * @font-face-regels valt de kop terug op Arial.
 */


/* ==========================================================================
   LETTERTYPEN
   ========================================================================== */

@font-face {
    font-family: 'Orgetta';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../../../uploads/2024/10/Organetto-CndBold.woff2') format('woff2'),
         url('../../../uploads/2024/10/Organetto-CndBold.woff') format('woff');
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../../../uploads/2024/10/AvenirNextLTPro-Regular.woff2') format('woff2'),
         url('../../../uploads/2024/10/AvenirNextLTPro-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../../../uploads/2024/10/AvenirNextLTPro-Bold-1.woff2') format('woff2'),
         url('../../../uploads/2024/10/AvenirNextLTPro-Bold.woff') format('woff');
}


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

:root {
    --sw-root-purple-dark: #350156;
    --sw-root-purple-card: #5a0093;
    --sw-root-yellow: #ffea00;
    --sw-root-white: #ffffff;
}


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

/*
 * body.home en niet body: reset.css van het thema zet de achtergrond op wit en
 * laadt na deze stylesheet. Met de klasse erbij wint deze regel ongeacht de
 * volgorde. De klasse home staat op de voorpagina, en verder laadt dit
 * bestand toch nergens.
 */
body.home {
    background-color: var(--sw-root-purple-dark);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.sw-root-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    background-color: var(--sw-root-purple-dark);
}

.sw-root-header__logo {
    width: auto;
    max-width: 202px;
    height: auto;
}


/* ==========================================================================
   KOP EN ONDERTITEL
   ========================================================================== */

.sw-root {
    padding: 90px 20px 0;
    background-color: var(--sw-root-purple-dark);
    text-align: center;
}

/*
 * !important en een klasse, want het child theme zet alle h1 op "Organetto"
 * met !important, en dat lettertype bestaat nergens.
 */
.sw-root__h1 {
    margin: 0 0 12px;
    color: var(--sw-root-white) !important;
    font-family: 'Orgetta', Arial, sans-serif !important;
    font-size: 60px;
    line-height: 55px;
    font-weight: 700;
}

.sw-root__geel {
    color: var(--sw-root-yellow);
}

.sw-root__intro {
    margin: 0 0 55px;
    color: var(--sw-root-white);
    font-family: 'Avenir', Arial, sans-serif;
    font-size: 20px;
    line-height: 25px;
}

.sw-root__intro b {
    font-weight: bold;
}


/* ==========================================================================
   LANDENKIEZER
   ========================================================================== */

.sw-root__landen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 45px;
    max-width: 630px;
    margin: 0 auto;
    padding-bottom: 6px;
}

/*
 * De kleur staat er expliciet op: de site zet in de custom CSS elke link op
 * geel, en deze horen wit te zijn.
 */
.sw-root-land {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px 10px;
    border-radius: 10px;
    background-color: var(--sw-root-purple-card);
    color: var(--sw-root-white) !important;
    text-decoration: none !important;
    transition: transform 0.15s ease;
}

.sw-root-land:hover,
.sw-root-land:focus-visible {
    transform: translateY(-3px);
}

.sw-root-land__vlag {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
}

.sw-root-land__naam {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.sw-root-footer {
    padding: 30px 20px 60px;
    background-color: var(--sw-root-purple-dark);
    text-align: center;
}

/*
 * Bewust Arial en niet Orgetta: dat lettertype heeft alleen kapitalen, en de
 * regel staat op de huidige pagina ook in gewone schrijfwijze.
 */
.sw-root-footer a {
    color: var(--sw-root-white) !important;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}


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

@media (max-width: 768px) {

    .sw-root {
        padding-top: 40px;
    }

    .sw-root__h1 {
        font-size: 40px;
        line-height: 35px;
    }

    .sw-root__intro {
        margin-bottom: 40px;
    }

    .sw-root__landen {
        gap: 24px 20px;
    }

    .sw-root-land {
        padding: 14px 8px 8px;
    }
}