@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Montserrat:wght@400;600;700&display=swap');

/* Theme palette (Thailand wedding) */
:root {
    --pink: #ff00cc;
    --pink50: #ff00cc8e;
    --coral: #f70;
    --coral50: #ff77008e;
    --yellow: #ffec17;
    --yellow50: #ffec178e;
    --blue: #29a7ff;
    --blue50: #29a7ff8e;
    --teal: #00ffee;
    --teal50: #00ffee8e;
    --green: #00d100;
    --green50: #00d1008e;
    
    --sand: #f6e8d5;
    --ink: #005252;
    --white: #ffffff;
    --magenta: #ff00cc; /* alias for neon/pink usage */
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

/* Base & Typography */
body {
    font-family: "gala", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    background-color: var(--sand);
    overflow-x: hidden; /* Prevents horizontal scroll */
}


h1, h2, h3 {
    font-family: "alana-smooth", cursive;
    color: var(--pink);
}

h4,
h5,
h6 {
    font-family: "Dancing Script", cursive;
    color: var(--pink);
    font-weight: 300;
    line-height: 1.1;
}

h1 { font-size: 5rem; }
h2 { font-size: 3.5rem; }
h3 { font-size: 2.5rem; }
h4 { font-size: 2rem; color: var(--ink); font-weight: 600; } /* Overriding for card titles */
h5 { font-size: 1.5rem; color: var(--ink); font-family: "Montserrat"; font-weight: 400; margin-bottom: 1rem; }

p {
    line-height: 1.6;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

/* Utility Classes */
.full-width-section {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.navbar-brand {
    background-image: url('../core/img/logo.png');
    background-size: cover;
    width: 120px;
    height: 120px;
}

.section-padding {
    padding: 5rem 0;
}

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

.section-title {
    text-align: center;
    background-color: var(--sand);
}

.section-title h3 {
    margin-top: -1rem;
    color: var(--teal);
}

.on-card-row {
    margin-bottom: 2em;
}

.img-fluid {
    width: 100%;
    height: 100%
}

.rounded-img {
    border-radius: 20px;

}

.box-headings {
    width: 25%;
    border: solid 3px var(--ink);
    margin: 20px auto; /* Replaces justify-self for reliable centering */
    padding: 0 1rem; /* Add some horizontal padding */
    text-align: center; /* Ensure text inside is centered */
}

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    letter-spacing: 2px;
}
.btn-primary {
    background-color: var(--magenta);
    color: var(--white);
}
.btn-primary:hover {
    background-color: #a23b93;
    transform: translateY(-2px);
}
.btn-secondary {
    background-color: var(--teal);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: #22a39a;
    transform: translateY(-2px);
}

/* Card Styling (for Schedule & Rooms) */
.card {
    border: 2px solid var(--ink);
    border-radius: 25px;
    box-shadow: var(--shadow);
    background: var(--white);
    height: 100%; /* Makes all cards in a row the same height */
    transition: all 0.3s ease;
}

/* Equal-height helper for card rows: make columns flex containers and cards stretch */
.equal-cards > [class*='col-'] {
    display: flex;
}
.equal-cards .card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.equal-cards img{
    border-radius: 22.5px;
}
.equal-cards .card .card-body {
    flex: 1 1 auto;
}

/* Override for date titles to use Dancing Script */
.title-card h3 {
    color: var(--ink);
    margin: 0;
}

.title-card{
    border: solid 2px var(--ink);
    margin-bottom: 2em;
    text-align: center;;
}

.card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.card-body {
    padding: 1.5rem;
    border-radius: 20px;
}

.room-card h5 {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 1.25rem;
    color: white;
    margin-bottom: 0.5rem;
}

.room-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 0.5rem;
}

/* Alternative Options & Bang Tao hotel headings color */
.alt-headings,
.bangtao-heading {
    color: var(--coral) !important;
}

/* Part 1: Hero Section */
.hero-section {
    height: 90vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('../core/img/bg-cover-photo.jpg');
    background-size: cover;
    background-position: bottom;
    border-radius: 25px;
}

.wedding-sign {
    position: absolute;
    width: 90%;
    height: 90%;
    background-image: url('../core/img/weddingsign.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
    

.hero-section h1 {
    position: relative;
    color: var(--sand);
    font-size: 6rem;
    font-weight: 300;
    text-align: center;
}
.hero-section h2 {
    color: var(--coral);
    font-size: 3rem;
    margin-top: -1.5rem;
}
.hero-section h3 {
    color: var(--coral);
    font-size: 2rem;
    margin-top: 1rem;
    font-family: "Montserrat";
    font-weight: 400;
}

/* Part 2: Schedule Section */
.schedule-section {
    background-color: var(--sand);
    background-image: url('../core/img/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.event-card {
    text-align: center;
    padding: 2rem 1rem;
    background-color: var(--coral50);
}
.schedule-section h2 {
    font-size: 8rem;
}
.event-card .card-icon {
    font-size: 3rem;
    color: var(--teal);
    margin-bottom: 1rem;
}
.event-card h3 {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--teal);
    
}

.adult-icon {
    font-size: 125%;
}

.child-icon {
    font-size: 75%;
    font-weight: 600;
}

.event-card h4 {
    text-shadow: 1px 1px var(--sand);
}

.event-card.highlighted-card {
    text-align: center;
    padding: 2rem 1rem;
    background-color: var(--teal);
    
}

.event-card.highlighted-card h3 {
    
    color: var(--pink);
    
}
.event-card.highlighted-card h4{
    color: var(--sand);
    text-shadow: 1px 1px var(--ink);
}
.event-card.highlighted-card h5 {
    color: var(--ink);
}
.event-card.highlighted-card .card-icon {
    color: var(--pink);
}

.event-pic-snorkel {
    background-image: url('../core/img/event-snorkel.jpg');
    background-size: cover;
    background-position: bottom;
    color: var(--sand);
}

.event-pic-drink {
    background-image: url('../core/img/event-card-drink.jpg');
    background-size: cover;
    background-position: center;
    color: var(--ink);
}


/* Part 3: Hotel Section */
.hotel-section {
    text-align: center;
}

.hotel-detail {
    background-color: var(--yellow50);
}

.hotel-section h2 {
    font-size: 8rem;
    
}

/* Part 4: Phuket Divider */
.phuket-divider-section {
    height: 200px;
    background-image: url('../core/img/phi-phi-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* This creates the parallax effect */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, .4) 0 0 0 100000px inset;
}
.phuket-divider-section h2 {
    font-size: 6rem;
    color: var(--pink);
    letter-spacing: 20px;
    text-transform: uppercase;
    /* Neon glow: white inner + magenta outer */
    text-shadow:
        0 0 3px #fff,
        0 0 6px #fff,
        0 0 10px #fff,
        0 0 16px var(--pink),
        0 0 28px var(--pink),
        0 0 42px var(--pink);
}

/* Part 5: Before Section */
.before-section { /* let global background show; only heading chip gets sand */
    background: transparent;
}
.before-section .section-title { background: transparent; }
.before-section .section-title h2 { 
    display:inline-block; 
    background-color: var(--sand); 
    padding:0 .75rem; 
    border-radius:8px; 
}
.before-section h2 {
    font-size: 8rem;
}

.junior-room {
    background-image: url('../core/img/rooms/junior-suite-garden.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.junior-seaview {
    background-image: url('../core/img/rooms/junior-seaview.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.family-suite {
    background-image: url('../core/img/rooms/family-suite.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.cape-suite-seaview {
    background-image: url('../core/img/rooms/cape-suite-seaview.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.signature-suite {
    background-image: url('../core/img/rooms/corner-suite.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.two-bed-villa {
    background-image: url('../core/img/rooms/two-bed-villa.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}


/* New Activity Card Styles */
.activity-card {
    overflow: hidden; /* Ensures the image corners are rounded if the card is rounded */
    height: 300px; /* Set a fixed height for all activity cards */
    display: flex; /* Make the card a flex container */
}

.activity-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* This will center the content horizontally as well */
    height: 100%;
}

.activity-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preserve aspect while filling card */
    border-radius: 0; /* Remove any previous border-radius */
}


/* Mobile tweaks for activity cards */
@media (max-width: 767.98px) {
    .activity-card {
        height: clamp(200px, 48vw, 280px); /* slightly shorter to reduce perceived zoom */
    }
    .activity-card-img {
        height: 100%; /* fill the column height to avoid whitespace under image */
        object-position: center; /* keep subject centered */
        object-fit: fill;
    }
    .activity-card .card-body {
        padding: 0.5rem; /* slightly tighter padding on mobile */
    }
}

/* Utilities to adjust image focal point when using object-fit: cover */
.object-pos-center-top { object-position: 50% 30%; }
.object-pos-top { object-position: 50% 20%; }
.object-pos-center-right { object-position: 80% 50%; }
.object-pos-center-left { object-position: 20% 50%; }


/* Part 6: Gallery Section */


/* --- New Simple Carousel Styles --- */
.simple-carousel-container {
    position: relative;
    margin-top: 2rem;
    /* JS sets overflow hidden; keep base accessible baseline here */
}

.simple-carousel {
    display: flex;
    flex-direction: row;
    gap: 0.75rem; /* JS reads this gap to align translate steps */
    align-items: stretch;
    user-select: none;
}

.couple-item {
    flex: 0 0 auto;
}

.couple-item .img-wrap {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    background: var(--ink);
    isolation: isolate;
    transition: box-shadow 0.3s ease;
}
.couple-item .img-wrap:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

.carousel-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transform-origin: center center;
    transition: transform 0.35s ease-out;
    will-change: transform;
}

.couple-item .img-wrap:hover .carousel-img { transform: scale(1.08); }

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: var(--white);
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.25s ease, transform 0.25s ease;
    z-index: 10;
}
.carousel-nav:hover { background: rgba(0,0,0,0.6); transform: translateY(-50%) scale(1.05); }
.carousel-nav.prev { left: 0.25rem; }
.carousel-nav.next { right: 0.25rem; }
.carousel-nav:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 768px) {
    .simple-carousel { gap: 0.5rem; }
    .carousel-img { height: 160px; }
    .carousel-nav { width: 40px; height: 40px; font-size: 1.3rem; }
}


/* Responsive Media Queries */
@media (max-width: 768px) {
    .simple-carousel {
        flex-direction: column; /* Stack items vertically on mobile */
        justify-content: flex-start;
        gap: 0.75rem; /* Small margin between items on mobile */
    }

    .navbar-brand {
    width: 50px;
    height: 50px;
    }

    .event-pic-snorkel,
    .event-pic-drink {
        min-height: 200px; /* Ensures these have height on mobile */
    }

    .couple-item {
        flex-basis: auto; /* Allow items to take full width */
        width: 100%;
    }

    .section-padding {
        padding: 3rem 0;
    }
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 2rem; }
    
    .hero-content h1 { font-size: 4rem; }
    .hero-content h2 { font-size: 2rem; margin-top: -1rem; }
    .hero-content h3 { font-size: 1.5rem; }

    .hotel-section h2 {
        font-size: 5rem;
    }

    .schedule-section h2 {
        font-size: 5rem;
    }

    .before-section h2 {
        font-size: 5rem;
    }

    .rsvp-section h2 {
        font-size: 5rem;
    }

    .event-card h3 {
        font-size: 1.5rem;
    }



    .phuket-divider-section {
        height: 150px;
    }

    .phuket-divider-section h2 {
        font-size: 38px;
        letter-spacing: 8px;
    }

    .card-right{
        align-content: center;
    }

    /* Fix for Bootstrap container-fluid if you use it */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero-section {
        height: 40vh;
        width: 100%;
    }

    .simple-carousel{
        flex-direction: row;
    }

    .box-headings {
        width: auto; /* Let width be determined by content */
        display: inline-block; /* Make the container only as wide as its content */
        margin-left: auto;
        margin-right: auto;
        display: block; /* Center the inline-block */
    }
}

/* Removed SimpleLightbox-specific styles */
/* (Cleanup) Removed temporary debug visibility overrides */

.prepared-card {
    position: relative;
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px; /* Ensure a consistent height */
}

.prepared-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
    border-radius: 22.5px; /* Match card's border-radius */
    z-index: 1;
}

.prepared-card > * {
    position: relative;
    z-index: 2;
}

.prepared-card-travel {
    background-image: url('../core/img/travel-card-bg.jpg');
}

.prepared-card-health {
    background-image: url('../core/img/health-card-bg.jpg');
}

.prepared-card-packing {
    background-image: url('../core/img/packing-card-bg.jpg');
}

/* Temporarily hide entire prepared section until content is finalized */
.prepared-section { display: none !important; }

/* --- Explore cards (Chiang Mai, Bangkok, Krabi, The Islands) --- */
.explore-card .explore-photos .explore-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* consistent shape across all places */
    object-fit: cover;
    border-radius: 12px; /* curved corners */
    display: block;
}

/* Generic explore-img usage (outside .explore-card .explore-photos) */
.explore-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}