/* =====================================================
   RESPONSIVE.CSS
===================================================== */


/* =====================================================
   TABLETS (992px)
===================================================== */

@media (max-width:992px){

.container{
    width:92%;
}

/* Navigation */

.menu-btn{
    display:block;
}

.nav-rsvp{
    display:none;
}

.nav-links{
    position:absolute;
    top:85px;
    left:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    align-items:center;
    gap:0;
    display:none;
    padding:20px 0;
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}

.nav-links.active{
    display:flex;
}

.nav-links li{
    width:100%;
    text-align:center;
}

.nav-links a{
    display:block;
    padding:16px;
}

.nav-links a::after{
    display:none;
}

/* Hero */

.hero{
    min-height:90vh;
}

.hero h1{
    font-size:4.5rem;
}

.hero h3{
    font-size:1.2rem;
}

.hero-text{
    font-size:1rem;
}

.hero-buttons{
    flex-direction:column;
}

.hero-buttons .btn{
    width:280px;
}

/* Story */

.story-section{
    flex-direction:column;
    gap:40px;
}

.story-image{
    width:100%;
    display:flex;
    justify-content:center;
}

.story-image img{
    max-width:500px;
    width:100%;
}

.story-text{
    text-align:left;
}

.story-text h3{
    text-align:center;
}

/* Countdown */

#countdown-timer{
    flex-wrap:wrap;
}

.time-box{
    min-width:140px;
}

/* Wedding Details */

.details-grid{
    flex-direction:column;
}

.venue{
    min-width:100%;
    max-width:100%;
}

.map-container iframe{
    width:100%;
    height:350px;
}

/* Gallery */

.gallery-grid{
    grid-template-columns:repeat(2,1fr);
}

.gallery-item {
    max-width: 500px;      /* or whatever feels right */
    margin: 0 auto;
} 

.gallery-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 20px;
}


/* RSVP */

.rsvp-card{
    padding:35px 25px;
}

#calendar-btn{
    margin-left:0;
    margin-top:20px;
}

}



/* =====================================================
   MOBILE (768px)
===================================================== */

@media (max-width:768px){

section{
    padding:70px 0;
}

/* Typography */

h1{
    font-size:3rem;
}

h2{
    font-size:2.2rem;
}

.hero h1{
    font-size:3.5rem;
}

.hero h3{
    font-size:1rem;
}

.wedding-date{
    font-size:1.1rem;
}

.hero-text{
    font-size:.95rem;
}

.our-story {
    padding-top: 40px;
}

#our-story {
        scroll-margin-top: 80px;
    } 

.story-section {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

.story-image {
        flex: 0 0 auto;
        width: 100%;
    }

.story-text {
        width: 100%;
    }

.section-title h2 {
        font-size: 2.2rem;
    } 

/* Buttons */

.btn{
    width:100%;
    text-align:center;
}

/* Countdown */

#countdown-timer{
    gap:15px;
}

.time-box{
    flex:1 1 45%;
    padding:18px;
}

.time-box span{
    font-size:36px;
}

/* Story */

.story-image img{
    max-width:100%;
    aspect-ratio:3/4;
}

.story-text h3{
    font-size:2rem;
}

.story-text p{
    font-size:1rem;
    line-height:1.8;
}

.story-text blockquote{
    font-size:1.4rem;
    padding:30px;
}

/* Colour Card */

.color-card{
    padding:30px 20px;
}

.color-palette{
    gap:35px;
}

.color-circle{
    width:75px;
    height:75px;
}

/* Maps */

.map-container iframe{
    height:280px;
}

/* Invitation */

.invitation-card{
    padding:30px 20px;
}

.invitation-image{
    max-width:100%;
}

/* Gallery */

.gallery-grid{
    grid-template-columns:1fr;
}

.gallery-item img{
    height:350px;
}

/* RSVP */

.rsvp-card{
    padding:30px 20px;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{
    font-size:16px;
}

.footer-content{
    flex-direction:column;
    gap:20px;
}

}



/* =====================================================
   SMALL PHONES (480px)
===================================================== */

@media (max-width:480px){

.hero h1{
    font-size:2.8rem;
}

.hero-buttons .btn{
    width:100%;
    padding-top: 20px;
}

.logo-script{
    font-size:2rem;
}

.section-title h2{
    font-size:2rem;
}

.time-box{
    flex:1 1 100%;
}

.color-palette{
    flex-direction:column;
    align-items:center;
}

.story-text blockquote{
    font-size:1.2rem;
}

}