/*
    WEDDING INVITATION - MOBILE-FIRST STYLES
    Easy to customize - look for CUSTOMIZATION comments
*/

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Smooth scrolling for anchor links */
    scroll-behavior: smooth;
    /* Prevent horizontal scroll on mobile */
    overflow-x: hidden;
    /* Enable momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Ensure full height is scrollable on iOS */
    min-height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #ffffff;
    /* CUSTOMIZATION: Change background color here */
    line-height: 1;
    overflow-x: hidden;
    /* Ensure body height doesn't restrict scrolling on iOS */
    min-height: 100vh;
    position: relative;
}

/* ===== MAIN CONTAINER ===== */
.invitation-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    /* Remove any spacing between sections */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ===== SECTION STYLES ===== */
.invitation-section {
    width: 100%;
    /* Each section takes full viewport width */
    position: relative;
    /* Remove spacing between images */
    display: block;
    line-height: 0;
    margin: 0;
    padding: 0;
    /* Remove any extra spacing */
}

/* ===== IMAGE STYLES ===== */
.section-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    /* Remove any spacing that browsers might add */
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 0;

    /* Smooth image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Style for inline SVG */
.section-image svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Clickable link overlays */
.link-overlay {
    position: absolute;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    /* Enable pointer events on iOS */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    /* Debug: uncomment to see link areas */
    /* background: rgba(255, 0, 0, 0.2); */
    /* border: 1px solid red; */
}

/* Ensure accommodation link is above other elements on iOS */
.accommodation-link {
    z-index: 100;
    position: absolute;
}

/* ===== FADE-IN ANIMATION ===== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* CUSTOMIZATION: Adjust animation duration (0.8s) for faster/slower fade */
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* First section appears immediately on load */
.invitation-section:first-child {
    opacity: 1;
    transform: translateY(0);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablets (portrait) */
@media screen and (min-width: 600px) {
    .invitation-container {
        /* Center content with max width on tablets */
        max-width: 600px;
        /* CUSTOMIZATION: Adjust max width for tablets */
        margin: 0 auto;
    }
}

/* Tablets (landscape) and small desktops */
@media screen and (min-width: 900px) {
    .invitation-container {
        max-width: 800px;
        /* CUSTOMIZATION: Adjust max width for desktops */
        margin: 0 auto;
        padding: 0;
        /* No padding to keep sections seamless */
    }
}

/* Large desktops */
@media screen and (min-width: 1200px) {
    .invitation-container {
        max-width: 1000px;
        /* CUSTOMIZATION: Adjust max width for large screens */
        margin: 0 auto;
    }

    /* Smoother animation on powerful devices */
    .fade-in {
        transition: opacity 1s ease-out, transform 1s ease-out;
    }
}

/* ===== LOADING STATE ===== */
/* Show a subtle loading effect before images load */
.section-image {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f8f8f8 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

.section-image[src] {
    background: none;
    animation: none;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    .invitation-section {
        page-break-inside: avoid;
    }
}

/* ===== ACCESSIBILITY ===== */
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fade-in {
        transition: none;
        opacity: 1;
        transform: none;
    }
}