/*
Theme Name: Rideup Child
Template: rideup
Theme URI: https://1.envato.market/rideup-wp
Description: Rideup Child Theme
Author: Awaiken Themes
Author URI: https://awaikenthemes.com/
Version: 1.0.0
Text Domain: rideup-child
*/

/* Specifieke styling voor de Bedankt Pagina Template */

/* 1. Reset de algemene container padding aan de bovenkant zodat de header kan 'zweven' */
.page-template-page-bedankt .site-main {
    padding-top: 0;
    margin-top: 0;
}

/* 2. De Full-width Banner die achter de header valt */
.thank-you-banner {
    width: 100%;
    height: 60vh; /* Vult het hele scherm, ook achter de header */
    margin-top: -100px; /* Forceert de banner achter de transparante header, pas getal aan aan je header hoogte */
    overflow: hidden;
    position: relative;
    z-index: 1; /* Zorgt dat het achter de header blijft */
}

.thank-you-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt dat de foto het scherm vult zonder te vervormen */
    object-position: center top; /* Houdt Tommy's hoofd mooi in beeld */
    border-radius: 0;
    box-shadow: none;
}

/* 3. De Gecentreerde Inhoud onder de banner */
.page-template-page-bedankt .thank-you-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    z-index: 2; /* Zorgt dat tekst over de banner valt als ze overlappen */
    position: relative;
}

.thank-you-content h1 {
    font-size: 3rem;
    color: #333;
    margin-bottom: 20px;
    font-weight: 700;
}

.thank-you-content p {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 40px;
}

/* 4. De Home Knop (Gestyled als de Aanmelden knop) */
.page-template-page-bedankt .btn-home {
    display: inline-flex; /* Voor het pijltje */
    align-items: center;
    gap: 8px; /* Ruimte tussen tekst en pijltje */
    padding: 14px 28px;
    background-color: #bfa36a; /* Exacte beige kleur van 'Aanmelden' knop */
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 6px; /* Zelfde afronding als 'Aanmelden' */
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.page-template-page-bedankt .btn-home:hover {
    background-color: #ac935c; /* Iets donkerder beige bij hover */
    color: #ffffff !important;
}

/* Het pijltje ↗ stylen */
.page-template-page-bedankt .btn-home .arrow {
    font-size: 1.1em;
    font-weight: 400;
}