/*html, body {height: 100%;}*/

/* layout.css */

/* ==================================== */
/* ============  GENERAL ============== */
/* ==================================== */

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    /* background handled by .fixed-bg */
}

/* Ensure padding does not cause width overflow */
*, *::before, *::after {
    box-sizing: border-box;
}


/* Fixed background for all screens */
.fixed-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-attachment: fixed;
}

.fixed-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* General Slide parameters */
.slide1,
.slide2,
.slide3,
.slide4,
.slide5,
.slide6,
.slide7,
.slide8 {
    position: relative;
    width: min(1400px, 90%);
    margin: 5rem auto;       /* [top bottom] controls spacing between slides. */
    align-items: center;
    border-radius: 3rem;
    z-index: 1;
}

/* ==================================== */
/* ============  SLIDE 1 ============== */
/* ==================================== */

.slide1 {
    min-height: 85vh;         /* 85% of full viewport height per slide */
    display: flex;
    justify-content: center;   /* horizontally center content */
    /*background-color: rgba(255, 255, 255, 0.1);*/ /* optional: semi-transparent layer for readability */
    margin: 5rem auto;
}

.imageS1 {
    position: absolute;   /* allows precise positioning inside the container */
    top: 50%;             /* vertical center */
    transform: translateY(-50%); /* vertically center the image */
    min-width: 40vw;
    max-width: 100vw;       /* adjust image size */
    height: auto;
}

.imageS1.centre-top {
    top: 50%; /* position near the top */
    left: 50%; /* center horizontally */
    transform: translate(-50%, -50%); /* centering */
}

.imageS1.centre-bottom {
    top: 70%; /* position near the bottom */
    left: 50%; /* center horizontally */
    transform: translate(-50%, -50%); /* centering */
}

/* ==================================== */
/* ============  SLIDE 2 ============== */
/* ==================================== */

.slide2OLD {
    position: relative;        /* positioning context for images */
    width: 80vw;
    min-height: 75vh;         /* 85% of full viewport height per slide */
    display: flex;
    justify-content: center;   /* horizontally center content */
    align-items: center;       /* vertically center content if needed */
    /*background-color: rgba(255, 255, 255, 0.4); /* optional: semi-transparent layer for readability */
    background-color: #EAE4CC;
    max-width: 90vw;
    margin: 10vw auto;
    border-radius: 5vw;
    z-index: 1;           /* keeps content above background */
}

.slide2OLD2 {
    position: relative;        /* positioning context for images */
    width: min(1400px, 92%);
    height: 35vw;
    min-height: 300px;         /* 85% of full viewport height per slide */
    display: flex;
    justify-content: center;   /* horizontally center content */
    align-items: center;       /* vertically center content if needed */
    /*background-color: rgba(255, 255, 255, 0.4); /* optional: semi-transparent layer for readability */
    background-color: #EAE4CC;
    max-width: 90vw;
    margin: 10vw auto;
    border-radius: 5vw;
    z-index: 1;           /* keeps content above background */
}

.slide2 {
    min-height: 300px;
    padding: 4rem 8rem 4rem 4.5em;      /* [top right bottom left] controls spacing content and slides edges. */
    display: flex;
    justify-content: space-between;  /* space out text and image */
    gap: 5rem;                   /* gap between text and image */
    background-color: #EAE4CC;
}

.imageS2OLD {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* only vertical centering */
    max-width: 30vw;
    height: auto;
    max-height: 70vh;
}

.imageS2 {
    position: relative;
    flex: none;           /* do not allow flexbox to resize */
    max-width: 400px;     /* preferred max size on desktop */
    width: 80%;          /* scale down with container */
    height: auto;         /* ALWAYS preserve intrinsic aspect ratio */
    display: block;       /* prevent inline stretching quirks */
}

.slide2-text-container {
    position: relative;
    display: flex;
    flex-direction: column;  /* stack children vertically */
    align-items: center;     /* center each child horizontally */
    gap: 0.5em;              /* vertical spacing between lines */
    text-align: center;      /* fallback for child text */
    /*background-color: rgba(255, 255, 255, 0.4);*/
    z-index: 2;
}

.september-date,
.at,
.venue {
    font-family: 'holy-river';
    font-weight: normal;
    font-style: normal;
    line-height: 1;          /* better than 0.5em for readability */
    color: #343E2D;
}

.september-date {
    font-size: 7rem;
}
.at {
    font-size: 4rem;
}
.venue {
    font-family: 'eschaton';
    font-weight: 100;        /* use numeric value instead of 'light' */
    font-size: 5rem;
}


/* ==================================== */
/* ============  SLIDE 3 ============== */
/* ==================================== */

.slide3 {
    min-height: 500px;
    padding: 4rem 5rem 1rem 5em;      /* [top right bottom left]*/
    display: flex;
    justify-content: center;   /* horizontally center content */
    /*background-color: rgba(255, 255, 255, 0.4); /* optional: semi-transparent layer for readability */
    background-color: #55634A;
}

.slide3-text-container {
    position: relative;
    display: flex;
    flex-direction: column;  /* stack children vertically */
    align-items: center;     /* center each child horizontally */
    gap: 0.5em;              /* vertical spacing between lines, adjust as needed */
    text-align: center;      /* fallback for child text */

    /* Use transparent PNG colour background */
    /* background-image: url('../assets/images/backgrounds/slide3_textBox.png');*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;      /* stretch to fill container */
    /*background-position: center; /* center the image */
    

    /*background-color: rgba(255, 255, 255, 0.2);*/
    z-index: 2;
}

.slide3-text-container .title,
.slide3-text-container .mainText,
.slide3-text-container .names {
    font-family: 'holy-river';
    font-weight: normal;
    font-style: normal;
    color: #E4DFD0;
}

.slide3-text-container .title {
    font-size: 6rem;
    line-height: 1;          /* better than 0.5em for readability */
}

.slide3-text-container .mainText {
    font-family: 'eschaton';
    font-weight: 100;        /* use numeric value instead of 'light' */
    font-size: 1.5rem;
    line-height: 1.3;        /* increase vertical spacing between lines */
    letter-spacing: 0.05em;  /* small spacing between letters */

    width: 80%;
    max-width: 90%;
}

.slide3-text-container .names {
    font-size: 3.5rem;
    line-height: 0.4em;          /* better than 0.5em for readability */
}


/* ==================================== */
/* ============  SLIDE 4 ============== */
/* ==================================== */

.slide4 {
    height: auto;
    min-height: 700px;         /* 85% of full viewport height per slide */
    padding: 4rem 5rem 2.5rem 5em;      /* [top right bottom left]*/
    display: flex;
    justify-content: center;   /* horizontally center content */
    flex-direction: column;  /* stack children horizontally */
    align-items: center;     /* center each child horizontally */
    gap: 3rem;
    background-color: #EAE4CC;
}

.imageS4OLD {
    position: absolute;
    top: 60%;
    transform: translateY(-50%); /* only vertical centering */
    height: 70%;
}

.slide4-text-containerOLD {
    position: absolute;      /* position relative to the slide */
    top: 10%;
    width: 70vw;
    min-height: 10vh;
    display: flex;
    flex-direction: column;  /* stack children vertically */
    align-items: center;     /* center each child horizontally */
    gap: 0.5em;              /* vertical spacing between lines, adjust as needed */
    text-align: center;      /* fallback for child text */
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 2;
}

.imageS4 {
    position: relative;
    flex: none;           /* do not allow flexbox to resize */
    max-width: 750px;     /* preferred max size on desktop */
    width: 60%;          /* scale down with container */
    height: auto;         /* ALWAYS preserve intrinsic aspect ratio */
    display: block;       /* prevent inline stretching quirks */
}

.slide4-text-container {
    position: relative;
    display: flex;
    text-align: center;      /* fallback for child text */
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide4-text-container .title {
    font-family: 'holy-river';
    font-weight: normal;
    font-style: normal;
    font-size: 6rem;
    line-height: 1;          /* better than 0.5em for readability */
    color: #343E2D;
}


/* ==================================== */
/* ============  SLIDE 5 ============== */
/* ==================================== */

.slide5 {
    height: auto;
    min-height: 500px;         /* 85% of full viewport height per slide*/
    padding: 0rem 5rem 2.5rem 5em;      /* [top right bottom left]*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*background-color: rgba(255, 255, 255, 0.4); /* optional: semi-transparent layer for readability */
    background-color: #55634A;
}

.slide5 .title {
    font-family: 'holy-river';
    font-size: 6rem;
    text-align: center;
    margin-bottom: 0rem;
    color: #E4DFD0;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide5-row {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* align button to top of text block */
    gap: 5rem;
    width: 100%;
    max-width: 1100px;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide5-row .text-column {
    display: flex;
    flex-direction: column;
    gap: 0.7rem; /* space between text blocks */
    flex: 1;
    align-items: center;
    max-width: 550px;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.text-column .mainTextHeader {
    font-family: 'eschaton';
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.3;        /* increase vertical spacing between lines */
    letter-spacing: 0.05em;  /* small spacing between letters */
    text-align: center;
    color: #E4DFD0;
}

.text-column .mainText {
    font-family: 'eschaton';
    font-weight: 100;        /* use numeric value instead of 'light' */
    font-size: 1.5rem;
    line-height: 1.3;        /* increase vertical spacing between lines */
    letter-spacing: 0.05em;  /* small spacing between letters */
    text-align: center;
    color: #E4DFD0;
}

.text-column .mainTextNote {
    font-family: 'eschaton';
    font-weight: 100;
    font-size: 1rem;
    color: #E4DFD0;
}

.button-column {
    height: 100%;
    flex: 0 0 auto;
    display: flex;
    padding: 2rem 0rem 0rem 0rem;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.buttonS5 {
    max-width: 450px;
    border-radius: 2rem;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.buttonS5 img {
    width: 100%;
    height: auto;
    display: block;
}

.buttonS5:hover {
    transform: scale(1.05);
}

/* ==================================== */
/* ============  SLIDE 6 ============== */
/* ==================================== */

.slide6 {
    height: auto;
    min-height: 500px;         /* 85% of full viewport height per slide*/
    padding: 0rem 5rem 2.5rem 5em;      /* [top right bottom left]*/
    display: flex;
    flex-direction: column;
    justify-content: center;   /* horizontally center content */
    /*background-color: rgba(255, 255, 255, 0.4); /* optional: semi-transparent layer for readability */
    background-color: #EAE4CC;
}
.slide6 .title {
    font-family: 'holy-river';
    font-size: 6rem;
    text-align: center;
    margin-bottom: 0rem;
    color: #343E2D;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide6-row {
    display: flex;
    justify-content: center;
    align-items: stretch; /* align button to top of text block */
    gap: 5rem;
    width: 100%;
    max-width: 1100px;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide6-row .text-column {
    display: flex;
    flex-direction: column;
    gap: 0.7rem; /* space between text blocks */
    flex: 1;
    align-items: center;
    max-width: 550px;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide6-row .leftContainer,
.slide6-row .centreContainer,
.slide6-row .rightContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space between blocks */
    flex: 1; /* Equal widths */
    align-items: center;
    max-width: 400px;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.leftContainer .imageS6,
.centreContainer .imageS6,
.rightContainer .imageS6 {
    height: 15rem;
    width: auto;
    max-width: 90%;
    display: block;
    margin: 0 auto 0 auto; /* centers image with spacing */
    object-fit: contain;     /* preserves aspect ratio */
}

.slide6-row .leftText,
.slide6-row .centreText,
.slide6-row .rightText {
    font-family: 'eschaton';
    font-weight: 100;        /* use numeric value instead of 'light' */
    font-size: 1.5rem;
    line-height: 1.3;        /* increase vertical spacing between lines */
    letter-spacing: 0.05em;  /* small spacing between letters */
    text-align: center;
    color: #343E2D;
    /*background-color: rgba(0,0,0,0.2);*/
}

.buttonContainer {    
    margin-top: auto;  /* pushes button section to bottom */
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    align-items: center;
    /*background-color: rgba(0,0,0,0.2);*/
}

.buttonS6 {
    display: inline-block;
    padding: 1em 0.5em;
    border-radius: 2em;
    min-width: 20rem;
    margin: 0.8em 0; /* vertical and no horizontal space around button */

    font-family: 'eschaton';
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;

    text-decoration: none;
    color: #E4DFD0;
    background-color: #343E2D;

    transition: all 0.25s ease;
}
/* Hover effect */
.buttonS6:hover {
    /*background-color: #55634A;*/
    transform: translateY(-2px);
}
/* Click effect */
.buttonS6:active {
    transform: translateY(0);
}


/* ==================================== */
/* ============  SLIDE 7 ============== */
/* ==================================== */


.slide7 {
    height: auto;
    min-height: 600px;         /* 85% of full viewport height per slide*/
    padding: 0rem 5rem 2.5rem 5em;      /* [top right bottom left]*/
    display: flex;
    flex-direction: column;
    justify-content: center;   /* horizontally center content */
    /*background-color: rgba(255, 255, 255, 0.4); /* optional: semi-transparent layer for readability */
    background-color: #55634A;
}

.slide7 .title {
    font-family: 'holy-river';
    font-size: 6rem;
    text-align: center;
    margin-bottom: 0rem;
    color: #E4DFD0;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide7-row {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* align button to top of text block */
    gap: 5rem;
    width: 100%;
    max-width: 1100px;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.slide7-row .text-column {
    display: flex;
    flex-direction: column;
    gap: 0.7rem; /* space between text blocks */
    flex: 1;
    align-items: center;
    max-width: 550px;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.text-column .mainTextHeader {
    font-family: 'eschaton';
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.3;        /* increase vertical spacing between lines */
    letter-spacing: 0.05em;  /* small spacing between letters */
    text-align: center;
    color: #E4DFD0;
}

.text-column .mainText {
    font-family: 'eschaton';
    font-weight: 100;        /* use numeric value instead of 'light' */
    font-size: 1.5rem;
    line-height: 1.3;        /* increase vertical spacing between lines */
    letter-spacing: 0.05em;  /* small spacing between letters */
    text-align: center;
    color: #E4DFD0;
}

.text-column .mainTextNote {
    font-family: 'eschaton';
    font-weight: 100;
    font-size: 1rem;
    opacity: 0.8;
    color: #E4DFD0;
}

.slide7-row .image-column {
    height: 100%;
    flex: 0 0 auto;
    display: flex;
    padding: 2rem 0rem 0rem 0rem;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}

.imageS7 {
    width: 450px;
    max-width: 500px;
    height: auto;
    border-radius: 2rem;
    overflow: hidden;
    z-index: 2;
}


/* ==================================== */
/* ============  SLIDE 8 ============== */
/* ==================================== */

.slide8 {
    height: auto;
    min-height: 800px;         /* 85% of full viewport height per slide*/
    padding: 1rem 5rem 1rem 5em;      /* [top right bottom left]*/
    display: flex;
    justify-content: flex-end;   /* horizontally center content */
    /*background-color: rgba(255, 255, 255, 0.4); /* optional: semi-transparent layer for readability */
    
    /* Use transparent PNG colour background */
    background-image: url('../assets/images/backgrounds/functionHallNEW.jpg');
    background-repeat: no-repeat;
    background-size: cover;      /* stretch to fill container */
    background-position: center; /* center the image */
}

.rsvp-container {
    /*background-color: rgba(0,0,0,0.5);*/
    width: 45vw;              /* control form width */
}

.rsvp-container iframe {
    width: 100%;
    height: 80vh;
    border: none;
}



/* ==================================== */
/* ============== MOBILE ============== */
/* ==================================== */

@media (max-width: 900px) {

    /* Make slides full width */
    .slide1,
    .slide2,
    .slide3,
    .slide4,
    .slide5,
    .slide6,
    .slide7,
    .slide8 {
        margin: 2rem auto;
        border-radius: 1.5rem;
    }

    .slide2 {
        flex-direction: column;
        gap: 2rem;
        padding: 1.5rem 0rem 1.5rem 0rem;
        min-height: auto;
    }

    .slide3,
    .slide4 {
        padding: 1.5rem 0.5rem 0.5rem 0.5rem;
        gap: 1rem;
        min-height: auto;
    }

    .slide3-text-container .title,
    .slide4-text-container .title,
    .slide5 .title,
    .slide6 .title,
    .slide7 .title {
        font-size: 1.7rem;
        width: 100%;
    }

    .slide3-text-container .mainText,
    .text-column .mainText,
    .slide6-row .leftText,
    .slide6-row .centreText,
    .slide6-row .rightText {
        font-size: 0.7rem;
        width: 100%;
    }

    /* Slide-specific changes: */

    /* SLIDE 2 */
    .september-date {font-size: 2rem;}
    .at             {font-size: 1.2rem;}
    .venue          {font-size: 1.3rem;}

    /* SLIDE 3 */
    .slide3-text-container .names {font-size: 1.2rem;}

    /* SLIDE 4 */
    .imageS4        {width: 100%;}

    /* SLIDE 5 */
    .slide5 {
        padding: 0.2rem 1.5rem 1rem 1.5rem;
    }

    .slide5-row {
        flex-direction: column;   /* stack text + button vertically */
        align-items: center;      /* center everything horizontally */
        gap: 1rem;
    }

    .text-column {
        align-items: center;      /* center stacked text */
        max-width: 100%;
        text-align: center;
        gap: 0.2rem;
    }

    .text-column .mainTextHeader {
        font-size: 0.8rem;
        width: 100%;
    }

    .text-column .mainTextNote {
        font-size: 0.5rem;
        width: 100%;
    }

    .button-column {
        padding: 0;              /* remove large desktop top padding */
        justify-content: center; /* center button */
        width: 100%;
    }

    .buttonS5 {
        position: relative;
        width: 70%;
        right: auto;
    }

    /* SLIDE 6 */
    .slide6 {
        padding: 0.2rem 1.5rem 0.8rem 1.5rem;
    }
    .slide6-row {
        flex-direction: column;   /* stack text + button vertically */
        align-items: center;      /* center everything horizontally */
        gap: 1rem;
    }
    .slide6-row .leftContainer,
    .slide6-row .centreContainer,
    .slide6-row .rightContainer {
        gap: 0.5rem;
    }

    .leftContainer .imageS6,
    .centreContainer .imageS6,
    .rightContainer .imageS6 {
        height: 10rem;
    }

    .buttonContainer {
        margin-top: none;
        gap: 0em;
    }

    .buttonS6 {
        padding: 1.5em 0em;     /* vertical and no horizontal space around text inside button */
        border-radius: 1.5em;
        min-width: 10rem;
        margin: 0.3em 0;        /* vertical and no horizontal space around button */
        font-size: 0.8rem;
    }

    /* SLIDE 7 */

    .slide7 {
        padding: 0.2rem 1.5rem 1rem 1.5rem;
        min-height: auto;
    }

    .slide7-row {
        flex-direction: column;   /* stack text + button vertically */
        align-items: center;      /* center everything horizontally */
        gap: 1rem;
    }

    .slide7-row .image-column {
        display: none;
    }


    /* SLIDE 8 */

    .slide8 {
        height: auto;
        min-height: auto;
        justify-content: center;
        padding: 0.2rem 0rem 0.5rem 0rem;
        background-image: none !important;
    }

    .rsvp-container {
        background-color: transparent !important;
        width: 100%;           /* nearly full width */
        max-width: 100%;     /* optional: cap width for bigger phones */
    }

    .rsvp-container iframe {
        background-color: transparent !important;
        width: 100%;
        height: auto;         /* nearly full viewport height */
        min-height: 500px;    /* prevents too small iframe on short screens */
    }

}