/*general*/

@font-face {
    font-family: 'Auntie';
    src: url('/data/fonts/Auntie-BWzGn.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'oohBaby';
    src: url('/data/fonts/OoohBaby-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gaugu-light';
    src: url('/data/fonts/Gaegu-Light.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gaugu-regular';
    src: url('/data/fonts/Gaegu-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gaugu-bold';
    src: url('/data/fonts/Gaegu-Bold.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Meowscript';
    src: url('/data/fonts/MeowScript-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 14px;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    /*    margin-bottom: 60px;*/
    position: relative;
    background-color: #FAF5E8;
}

.col-container {
    padding: 50px 20px;
}

section {
    height: 100vh;
    width: 100vw;
}

@media (max-width: 575px) {
    section {
        height: auto;
        width: 100vw;
    }
}


/* phone landscape*/
@media (orientation: landscape) and (max-height: 500px) { /* landscape phone layout */
    .col-container {
        padding: 40px 20px;
    }
}

@media (orientation: portrait) and (min-width: 575px) {
    section {
        height: auto;
        width: 100vw;
    }
}

/* Naviation */

.nav-link {
    font-family: Gaugu-regular;
    color: #FAF5E8;
    font-size: 1.2rem
}

    .nav-item :focus, .nav-item:hover, .nav-link :focus, .nav-link:hover {
    color: #778667 !important;
}

.my-navbar {
    /*            background-color: #7d5c3b;*/
    /*    background-color: #B47264;*/
    /*    background-color: #778667;*/
    /*    background-color: black;*/
    background-color: #483F37;
    opacity: 0.7;
}

.custom-toggler.navbar-toggler {
    border-color: #FAF5E8;
}

/* Setting the stroke to green using rgb values (0, 128, 0) */

.custom-toggler .navbar-toggler-icon {
    background-image: none;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(250, 245, 232, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24' /%3E%3C/svg%3E");
}

/*Welcome*/
.welcome-section {
    background-color: #FAF5E8;
}

section.welcome {
    background-color: #FAF5E8;
}

div.welcome-div {
    background: url(../data/uitnodiging2.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    background-position: left bottom;
    margin: 0;
    padding: 0;
}

.welcome-div {
    background-color: #F7F3E9;
    height: 100vh;
    width: 100vw;
}

section.welcome .container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

div.title {
    color: #7d5c3b;
}

div.title.names {
    font-size: 6rem;
    font-family: 'Auntie', sans-serif;
}

div.title.date {
    font-size: 3rem;
    font-family: 'oohBaby', sans-serif;
}

@media (max-width: 575px), (orientation: landscape) and (max-height: 575px) { /* landscape phone layout */
    div.title.names {
        font-size: 4rem;
        font-family: 'Auntie', sans-serif;
    }

    div.title.date {
        font-size: 2rem;
        font-family: 'oohBaby', sans-serif;
    }
}

/*Program*/
section.program {
    /*    background-color: #F7F2E3;*/
    background-color: #F7F1E2;
    padding: 20px;
}

.program-image {
    aspect-ratio: 1;
    width: 30vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom
}

.program-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.program-col-party {
    display: flex;
    justify-content: center;
}

program-inner {
    width: 100%;
    max-width: 300px; /* adjust to match your image width */
    margin: 0 auto;
    text-align: center; /* centers Goeste in Wies + address */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.program-link {
    color: #7d5c3b;
    text-decoration: none;
}

.planblock {
    display: flex;
    flex-direction: column;
    padding: 0 30px;
}

.planrow {
    display: flex;
    justify-content: space-between; /* space between left and right */
    width: 100%;
}

    div.plantitle {
        align-content: center;
    }

    div.plantitle.hour {
        color: #7d5c3b;
        font-size: 2rem;
        font-family: 'oohBaby', sans-serif;
    }

    div.plantitle.event {
        color: #B47264;
        font-size: 2rem;
        font-family: 'Meowscript', sans-serif;
    }

        div.plantitle.place {
            color: #778667;
            font-size: 2rem;
            font-family: 'Gaugu-light', sans-serif;
            text-align: center;
        }

        div.plantitle.address {
            color: #778667;
            font-size: 1.3rem;
            font-family: 'Gaugu-light', sans-serif;
            text-align: center;
            text-decoration: none !important;          
        }
        div.address {
            color: #778667;
            font-size: 1.3rem;
            font-family: 'Gaugu-light', sans-serif;
            text-align: center;
            text-decoration: none !important;
        }
/*Phone portrait*/
@media (max-width: 575px) {

    .program-image {
        width: 80vw; /* fits nicely on mobile */
        max-width: 250px; /* optional for large screens */
        height: 200px; /* all images same height */
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain; /* image fits without cropping */
    }

    .program-col + .program-col {
        margin-top: 30px;
    }

    div.plantitle.hour {
        font-size: 1.5rem;
    }

    .planblock {
        display: flex;
        flex-direction: column;
        padding: 0 5px;
    }
}
/* phone landscape*/
@media (orientation: landscape) and (max-height: 500px) { /* landscape phone layout */
    div.plantitle.hour {
        color: #7d5c3b;
        font-size: 1.3rem;
        font-family: 'oohBaby', sans-serif;
    }

    div.plantitle.event {
        color: #B47264;
        font-size: 1.5rem;
        font-family: 'Meowscript', sans-serif;
    }

    div.plantitle.place {
        color: #778667;
        font-size: 1.3rem;
        font-family: 'Gaugu-light', sans-serif;
    }

    div.plantitle.address {
        color: #778667;
        font-size: 1rem;
        font-family: 'Gaugu-light', sans-serif;
    }


    .program-image {
        aspect-ratio: 1;
        width: 25vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom
    }
}



/*Practical info*/
section.practicalinfo {
    background-color: #FAF5E8;
    padding: 20px;
}

div.practicalinfo {
    align-content: center;
}

.practicalinfo-row {
    min-height: 80vh;
    display: flex;
    align-items: stretch;
}
.practicalinfo-col {
    display: flex;
}


.practicalinfo-box {
    position: relative;
    flex: 1;
    border: 2px solid #7d5c3b; /* adjust color */
    border-radius: 8px;
    padding: 30px 20px 20px; /* extra top padding for icon */
    /*margin-top: 20px;*/
    text-align: center; /* center all text */
    display: flex;
    flex-direction: column;
    /**justify-content: center; /* vertically center content */
}
.practicalinfo-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 70px;
    height: 6px;
    background-color: #FAF5E8; /* same as section background */
    transform: translateX(-50%);
}

.practicalinfo.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centers the whole group */
    gap: 40px; /* space between the two blocks */
    color: #778667;
    font-size: 2.2rem;
    font-family: 'Gaugu-light', sans-serif;
}

.practicalinfo.bullet {
    align-content: center;
    color: #B47264;
    font-size: 1.7rem;
    margin: 0;
    padding: 0;
}

/* icon “hole” at the top center */
.practicalinfo-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FAF5E8; /* same as section background to create the hole effect */
    padding: 6px 10px;
    border-radius: 50px;
    color: #7d5c3b;
}

.bevestigbutton {
    border: 2px dashed;
    border-radius: 8px;
    color: #B47264;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.7rem;
    margin: 4px 2px;
    cursor: pointer;
}

.praticalinfo-link {
    color: #B47264;
    text-decoration: none;
}



@media (max-width: 575px) {
    .practicalinfo-col {
        width: 100%;
        flex: 0 0 auto;
        max-width: 100%;
    }

        .practicalinfo-col + .practicalinfo-col {
            margin-top: 30px;
        }

    .practicalinfo.content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px; /* space between the two blocks */
        color: #778667;
        font-size: 1.8rem;
        font-family: 'Gaugu-light', sans-serif;
    }

    .practicalinfo.bullet {
        align-content: center;
        color: #B47264;
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
    }

    .practicalinfo-row {
        display: flex;
        flex-direction: column;
    }
}

/* phone landscape*/
@media (orientation: landscape) and (max-height: 500px) { /* landscape phone layout */
    .practicalinfo.content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px; /* space between the two blocks */
        color: #778667;
        font-size: 1.2rem;
        font-family: 'Gaugu-light', sans-serif;
    }

    .practicalinfo.bullet {
        align-content: center;
        color: #B47264;
        font-size: 1rem;
        margin: 0;
        padding: 0;
    }

    .bevestigbutton {
        border: 2px dashed;
        border-radius: 8px;
        color: #B47264;
        padding: 20px 34px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1.2rem;
        margin: 4px 2px;
        cursor: pointer;
    }
}

@media (orientation: portrait) and (min-width: 575px) {
    .practicalinfo-row {
        display: flex;
        align-items: stretch;
        min-height: auto;
    }
}


/*Form*/

.form-row {
    min-height: 85vh;
    display: flex;
    align-items: stretch;
}
.form-image {
    max-height: 60vh;
    max-width: 40vw;
    object-fit: contain;
    display: flex;
}

.form-col {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/ /* centers content vertically */
    justify-content: space-between;
}

.image-col {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
    align-items: center; /* horizontal center */
}

.form-section {
    background-color: #F7F1E2;
}

.form-border {
    color: #7d5c3b;
}

h2.formtext {
    color: #7d5c3b;
    font-family: 'Gaugu-bold', sans-serif;
}

h3.formtext {
    color: #7d5c3b;
    font-family: 'Gaugu-bold', sans-serif;
}

h5.formtext {
    color: #B47264;
    font-family: 'Gaugu-regular', sans-serif;
}

.text-label {
    color: #778667;
    font-family: 'Gaugu-regular', sans-serif;
}

/*.form-control {
    background-color: #FAF5E8;
}*/

input[type=text] {
    /*    width: 100%;
    padding: 12px;
    margin: 8px 0;*/
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #FBF9F5;
   
    font-family: 'Gaugu-Light', sans-serif;
    color: #7d5c3b;
}

    input[type=text]:focus {
        background-color: #FBF9F5;
        color: #7d5c3b;
        outline: none !important;
        box-shadow: none !important;
        border: 1px solid #B47264;
    }

/*    input[type=text]::-webkit-autofill {
        background-color: #FBF9F5 !important;
        -webkit-text-fill-color: #7d5c3b !important;
        box-shadow: 0 0 0px 1000px #FBF9F5 inset !important;
        outline: none !important;
    }*/

.form-validate {
    font-family: 'Gaugu-Light', sans-serif;
    color:red
}
    input[type=text]::-webkit-autofill, input[type=text]::-webkit-autofill:focus {
        border: 1px solid red !important;
        -webkit-text-fill-color: #7d5c3b !important;
        box-shadow: 0 0 0 1000px #FBF9F5 inset !important;
        background-color: #FBF9F5 !important;
    }
input[type='radio'] {
    accent-color: #778667;
    background-color: #FBF9F5;
}
.confirmform {
    border: 2px dashed;
    border-radius: 8px;
    color: #B47264;
    padding: 20px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.7rem;
    margin: 2px 2px;
    cursor: pointer;
    background-color: transparent;
    font-family: 'Gaugu-regular', sans-serif;
}



@media (max-width: 575px) {
    .form-row {
        display: flex;
        flex-direction: column;
    }

    .form-image {
        max-height: 60vh;
        max-width: 80vw;
        object-fit: contain;
        display: flex;
    }

    .form-col {
        width: 100%;
        flex: 0 0 auto;
        max-width: 100%;
    }

    .image-col {
        width: 100%;
        flex: 0 0 auto;
        max-width: 100%;
        align-items: center; /* horizontal center */
    }
}
/*rsvpok*/
#rsvpok {
    display: flex;
    justify-content: center;
    align-items: center;
}
.Thankyou-container {
    text-align: center;
    width: 100%;
}

div.Thankyou {
    text-align: center;
    font-size: 4rem;
    font-family: 'Auntie', sans-serif;
}
div.Thankyou.title {
    color: #7d5c3b;
}

div.Thankyou.name {
    color: #778667;
}

.rsvpok-col {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.buttons-row {
    margin-top: 3rem;
    display: flex;
    align-items: stretch;
}

.thankyoubutton {
    border: 2px dashed;
    border-radius: 8px;
    color: #B47264;
    padding: 20px 34px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 4px 2px;
    cursor: pointer;
    font-family: Gaugu-light;
    width: 100%; /* fill column width */
    height: 100%;
}

@media (max-width: 575px) {
    div.Thankyou {
        text-align: center;
        font-size: 2rem;
        font-family: 'Auntie', sans-serif;
    }

    .thankyoubutton {
        border: 2px dashed;
        border-radius: 4px;
        color: #B47264;
        padding: 4px 8px;
        text-align: center;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin: 4px 4px;
        cursor: pointer;
        font-family: Gaugu-light;
    }

    #rsvpok {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }
}