/* HOLIDAE — style.css
   
   TABLE OF CONTENTS:
   1. Variables & Reset
   2. Header & Navigation
   3. Mobile Menu
   4. Hero Section
   5. Stats Strip
   6. Section & Container (shared styles)
   7. Destination Cards
   8. CTA Band
   9. Page Hero (for inner pages)
   10. Packages Page
   11. Gallery Page
   12. Contact Page
   13. Footer
   14. Popup
   15. Lightbox
   16. Mobile Responsive (media queries) */


/* 
   1. VARIABLES & RESET
   Variables = reusable values. Change once,
   updates everywhere they're used.
 */

:root {
    --sand: #f5efe6;
    --cream: #fdfaf6;
    --moss: #2e4a3a;
    --gold: #c9a84c;
    --charcoal: #1a1a1a;
    --mid: #555;
    --light: #888;
    --radius: 14px;
    --transition: .35s ease;
}

/* Remove default browser spacing on everything */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* padding doesn't add extra width */
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--charcoal);
    overflow-x: hidden;
}

img {
    display: block;
    width: 100%;
    object-fit: cover;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    /* remove bullet points */
}



/* 2. Header and navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 8%;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* LOGO */
.logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--moss);
    cursor: pointer;
}

.logo span {
    color: var(--gold);
    /* the "e" in Holidae is gold */
}

/* NAV LINKS */
.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mid);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--transition);
}

.nav-links a:hover {
    color: var(--moss);
}

/* BOOK NOW BUTTON */
.nav-button {
    background: var(--moss);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: background var(--transition);
}

.nav-button:hover {
    background: var(--gold);
}

/* HAMBURGER ICON (the ☰ symbol) — hidden on desktop */
.mobile-menu-icon {
    display: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--charcoal);
}


/* 
   3. MOBILE MENU
   The dropdown that appears on small screens
 */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: white;
    border-top: 1px solid #eee;
    padding: 10px 8% 20px;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu a {
    padding: 12px 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--charcoal);
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu a:hover {
    color: var(--moss);
}


/* 4. HERO SECTION
   The big full-screen image at the top */

.hero {
    position: relative;
    height: 100vh;
    /* 100% of the screen height */
    background: url("photos/hero.avif") center/cover no-repeat;
}

/* Dark overlay on top of the hero image */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* covers the whole section */
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.65),
            /* darker on the left */
            rgba(0, 0, 0, 0.2)
            /* lighter on the right */
        );
}

/* Text content on top of the overlay */
.hero-content {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    color: white;
    max-width: 580px;
}

/* Small gold label above the heading */
.tag {
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    font-weight: 600;
    margin-bottom: 14px;
}

/* Big heading */
.hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    line-height: 1.1;
    font-weight: 400;
}

/* gold "world's most" text */
.highlight {
    color: var(--gold);
    font-style: italic;
}

/* Paragraph below heading */
.subtext {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    font-size: 1rem;
}

/* The two buttons */
.hero-buttons {
    margin-top: 32px;
    display: flex;
    gap: 14px;
}

/* Gold filled button */
.btn-primary {
    display: inline-block;
    background: var(--gold);
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.btn-primary:hover {
    background: var(--moss);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Ghost / outline button */
.btn-secondary {
    display: inline-block;
    background: transparent;
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    transition: all var(--transition);
}

.btn-secondary:hover {
    background: white;
    color: var(--charcoal);
}


/* 5. STATS STRIP
   The dark green bar with numbers */
.stats-strip {
    background: var(--moss);
    padding: 44px 8%;
}

.stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    color: var(--gold);
    line-height: 1;
}

.stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
}


/* 6. SECTION & CONTAINER (shared styles)
   Used on every page section */
.section {
    padding: 80px 0;
}

/* Container limits the width and centres the content */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Small gold label above section titles */
.section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 10px;
}

/* Section heading */
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--charcoal);
    margin-bottom: 48px;
}


/* 7. DESTINATION CARDS */

/* 3 cards in a row */
.destination-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Each card */
.destination-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}

.destination-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.13);
}

/* Image area at top of card */
.destination-card-img {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.destination-card-img img {
    height: 100%;
    transition: transform 0.5s ease;
}

/* Image zooms slightly on hover */
.destination-card:hover .destination-card-img img {
    transform: scale(1.06);
}

/* Dark gradient over the image */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 55%);
}

/* "Trending" tag on the image */
.destination-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--moss);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 50px;
}

/* Text content inside the card */
.destination-card-body {
    padding: 20px 22px;
}

.destination-card-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--charcoal);
    margin-bottom: 8px;
}

/* "5 nights Island Escape" row */
.meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--light);
    margin-bottom: 16px;
}

/* The small dot between items */
.dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--light);
    flex-shrink: 0;
}

/* Price + Book button row at bottom of card */
.destination-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

/* Price text */
.price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--charcoal);
}

.price span {
    font-size: 0.78rem;
    color: var(--light);
    font-family: 'DM Sans', sans-serif;
}

/* Outline "Book" button on cards */
.btn-outline {
    background: transparent;
    color: var(--moss);
    padding: 9px 20px;
    border-radius: 50px;
    border: 1.5px solid var(--moss);
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.btn-outline:hover {
    background: var(--moss);
    color: white;
}


/* 8. Call to action BAND
   The dark green strip at the bottom of Home */
.cta-band {
    background: var(--moss);
    padding: 80px 28px;
    text-align: center;
    color: white;
}

.cta-band h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 300;
    margin-bottom: 12px;
}

.cta-band p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    font-size: 1rem;
}


/* 9. PAGE HERO
   The banner at top of inner pages
   (Destinations, Packages, etc.) */
.page-hero {
    background: var(--moss);
    padding: 80px 28px 60px;
    text-align: center;
    color: white;
}

.page-hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 300;
    margin-bottom: 12px;
}

.page-hero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}


/* 10. PACKAGES PAGE */

/* 3 cards in a row */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.package-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    transition: transform var(--transition), box-shadow var(--transition);
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

.package-img {
    height: 200px;
    overflow: hidden;
}

.package-img img {
    height: 100%;
    transition: transform 0.5s ease;
}

.package-card:hover .package-img img {
    transform: scale(1.05);
}

.package-body {
    padding: 24px;
}

/* Small coloured label e.g. "Most Popular" */
.package-tag {
    display: inline-block;
    background: rgba(46, 74, 58, 0.1);
    color: var(--moss);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.package-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 10px;
}

.package-body>p {
    font-size: 0.88rem;
    color: var(--mid);
    line-height: 1.65;
    margin-bottom: 16px;
}

/* What's included list */
.package-includes {
    list-style: none;
    margin-bottom: 20px;
}

.package-includes li {
    font-size: 0.85rem;
    color: var(--mid);
    padding: 4px 0;
}

/* Price + button row */
.package-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}


/* 11. GALLERY PAGE */

/* 3-column grid of photos */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    height: 220px;
}

.gallery-item img {
    height: 100%;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

/* The "+" overlay that appears on hover */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(46, 74, 58, 0.55);
    color: white;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* hidden by default */
    transition: opacity var(--transition);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
    /* shows on hover */
}


/* 12. CONTACT PAGE */

/* Two-column layout: info on left, form on right */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.contact-info h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    margin-bottom: 14px;
}

.contact-info>p {
    font-size: 0.95rem;
    color: var(--mid);
    line-height: 1.75;
    margin-bottom: 36px;
}

/* Each contact detail row (icon + text) */
.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.contact-icon {
    font-size: 1.2rem;
    width: 44px;
    height: 44px;
    background: rgba(46, 74, 58, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-detail h5 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--light);
    margin-bottom: 3px;
}

.contact-detail p {
    font-size: 0.9rem;
    color: var(--charcoal);
    line-height: 1.5;
}

/* The contact form box */
.contact-form {
    background: white;
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
}

.contact-form h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    margin-bottom: 24px;
}

/* Two inputs side by side (first + last name) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Each field (label + input) */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 7px;
    color: var(--charcoal);
}

/* All inputs, selects and textareas share the same style */
.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--charcoal);
    background: white;
    transition: border-color var(--transition);
    appearance: none;
    }

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Blue border when the field is selected */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--moss);
}

/* Red error message (hidden by default) */
.error-msg {
    color: #e00;
    font-size: 0.78rem;
    margin-top: 5px;
    display: none;
    /* JS shows this when there's an error */
}

/* When JS adds "has-error" class, show the error */
.form-group.has-error input,
.form-group.has-error textarea {
    border-color: #e00;
}

.form-group.has-error .error-msg {
    display: block;
}


/* 13. FOOTER */
footer {
    background: var(--moss);
    color: rgba(255, 255, 255, 0.8);
    padding: 56px 8% 28px;
    margin-top: 0;
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand .logo {
    color: white;
    margin-bottom: 12px;
    display: block;
}

.footer-brand p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
}

.footer-col h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 16px;
}

.footer-col li {
    margin-bottom: 9px;
}

.footer-col a {
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--transition);
}

.footer-col a:hover {
    color: white;
}

.footer-bottom {
    max-width: 1200px;
    margin: 36px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}


/* 14. POPUP (Booking confirmation) */

/* The dark background behind the popup */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* JS adds "open" to show it */
.popup-overlay.open {
    display: flex;
}

/* The white box in the middle */
.popup {
    background: white;
    border-radius: 20px;
    padding: 44px 36px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: popIn 0.35s ease both;
}

/* Bounce-in animation */
@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.popup-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.popup h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.popup p {
    font-size: 0.92rem;
    color: var(--mid);
    line-height: 1.7;
    margin-bottom: 24px;
}

/* X button at top right of popup */
.popup-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--light);
    cursor: pointer;
}


/* 15. LIGHTBOX (Gallery full-screen view) */

/* Dark background when viewing a gallery image */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 999;
    display: none;
    /* hidden by default */
    align-items: center;
    justify-content: center;
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 10px;
    width: auto;
    /* override the global img width: 100% */
}

.lightbox-close {
    position: absolute;
    top: 22px;
    right: 26px;
    color: white;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
}


/* PAGE SWITCHING
   .page is hidden by default
   .page.active is shown */
.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeUp 0.4s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 16. MOBILE RESPONSIVE */
@media (max-width: 768px) {

    /* Hide desktop nav, show hamburger */
    .nav-links,
    .nav-button {
        display: none;
    }

    .mobile-menu-icon {
        display: block;
    }

    /* Stack destination cards */
    .destination-grid,
    .packages-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Stack stats to 2 columns */
    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stack contact layout */
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Stack footer */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Stack form name row */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Reduce hero text size */
    .hero-content h1 {
        font-size: 2.4rem;
    }

    /* Stack hero buttons */
    .hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        text-align: center;
    }

    .section {
        padding: 56px 0;
    }

    .contact-form {
        padding: 24px 18px;
    }
}