/* =========================
   GLOBAL RESET
   Removes default browser spacing and makes sizing easier to control.
   ========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   SMOOTH SCROLLING
   Makes anchor links scroll smoothly instead of jumping.
   ========================= */

html {
    scroll-behavior: smooth;
}

/* =========================
   BODY
   Sets the default font for the whole website.
   ========================= */

body {
    font-family: Arial, sans-serif;
}

/* =========================
   NAVIGATION BAR
   Transparent navbar positioned over the hero image.
   ========================= */

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    background: transparent;
    color: white;

    padding: 10px 25px 0 25px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    z-index: 100;
}

/* Logo inside navbar */
.logo img {
    height: 150px;
    width: auto;
}

/* Navigation links */
.navbar a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-weight: bold;
}

/* Positions desktop nav links */
.desktop-nav {
    padding-top: 5px;
}

/* Link hover effect */
.navbar a:hover {
    color: #f4a261;
}

/* =========================
   HERO SECTION
   Main full-screen image section.
   ========================= */

.hero {
    min-height: 100vh;

    background:
        linear-gradient(rgba(8, 18, 35, .55), rgba(8, 18, 35, .55)),
        url("images/waterfront.jpg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: flex-end;

    padding: 0 4% 90px;

    color: white;
}

.hero-content {
    max-width: 950px;
    padding-bottom: 120px;
}

.hero h2 {
    font-size: 64px;
    line-height: 1.05;
    margin-bottom: 25px;
}

.hero p {
    font-size: 22px;
    max-width: 650px;
}

/* =========================
   SHARED BUTTON STYLE
   Used across the site.
   ========================= */

.button {
    display: inline-block;
    background: #f4a261;
    color: #111;

    padding: 15px 28px;

    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

/* =========================
BOOKING COMING SOON POPUP
========================= */

.booking-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.booking-popup.active {
    display: flex;
}

.booking-card {
    position: relative;
    max-width: 500px;
    background: white;
    color: #111;
    padding: 40px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,.35);
}

.booking-card h2 {
    color: #0b3d3f;
    margin-bottom: 20px;
}

.booking-card p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.booking-close {
    position: absolute;
    top: 15px;
    right: 20px;
    border: none;
    background: none;
    font-size: 34px;
    cursor: pointer;
}

/* =========================
   ROOMS SECTION
   Full-width image section for lodging.
   ========================= */

.rooms-section {
    min-height: 80vh;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("images/room.jpg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: flex-end;      /* Moves content to bottom */
    justify-content: flex-start; /* Keeps content left */
    padding: 0 4% 80px;         /* Bottom padding */

    color: white;
}

.rooms-content {
    max-width: 700px;
}

.rooms-content h2 {
    font-size: 52px;
    margin-bottom: 20px;
}

.rooms-content p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* =========================
   PONTOON RENTALS SECTION
   Full-width image section for boat rentals.
   ========================= */

.rentals-section {
    min-height: 80vh;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("images/pontoon.jpg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: flex-end;      /* Moves content to bottom */
    justify-content: flex-start; /* Keeps content left */
    padding: 0 4% 80px;         /* Bottom padding */

    color: white;
}

.rentals-content {
    max-width: 700px;
}

.rentals-content h2 {
    font-size: 52px;
    margin-bottom: 20px;
}

.rentals-content p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* =========================
   TIKI BAR SECTION
   Full-width image section for tiki bar promotion.
   ========================= */

.tiki-section {
    min-height: 80vh;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("images/tikibar.jpg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: flex-end;      /* Moves content to bottom */
    justify-content: flex-start; /* Keeps content left */
    padding: 0 4% 80px;         /* Bottom padding */

    color: white;
}

.tiki-content {
    max-width: 700px;
}

.tiki-content h2 {
    font-size: 52px;
    margin-bottom: 20px;
}

.tiki-content p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* =========================
INFO BACKGROUND SECTION
Weather, map, and contact
========================= */

.info-background {
    background-image:
        linear-gradient(rgba(10, 8, 25, 0.65), rgba(10, 8, 25, 0.65)),
        url("images/riverchart.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/* =========================
CUSTOM WEATHER SECTION
========================= */

.weather-section {
    padding: 80px 8%;
    text-align: center;
    background: transparent;
}

.weather-section h2 {
    font-size: 42px;
    color: #0b3d3f;
    margin-bottom: 30px;
}

.custom-weather-card {
    max-width: 1100px;
    margin: 0 auto;
    background: #17102f;
    color: white;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.weather-section h2,
.map-section h2,
.contact-section h2 {
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.weather-main {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
}

.weather-main h3 {
    font-size: 64px;
    margin-bottom: 10px;
}

.weather-main h4 {
    font-size: 28px;
    margin-bottom: 15px;
}

.weather-main p {
    font-size: 18px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .weather-main {
        flex-direction: column;
        text-align: center;
    }

    .weather-main h3 {
        font-size: 52px;
    }
}
.weather-current {
    text-align: center;
}

.weather-icon {
    font-size: 64px;
    margin-bottom: 10px;
}

.forecast-icon {
    font-size: 34px;
    margin: 8px 0;
}

/* =========================
7-DAY FORECAST
========================= */

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    margin-top: 35px;
}

.forecast-day {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
}

.forecast-day h5 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #c89b3c;
}

.forecast-day p {
    font-size: 15px;
    margin: 6px 0;
}

.forecast-note {
    font-size: 13px;
    opacity: 0.85;
    font-style: italic;
}

@media (max-width: 1000px) {
    .forecast-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .forecast-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================
   GOOGLE MAP SECTION
   Displays business location.
   ========================= */

.map-section {
    padding: 80px 8%;
    background: transparent;
}

.map-section h2 {
    text-align: center;
    font-size: 36px;
    color: white;
    margin-bottom: 30px;
}

.map-section iframe {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
}

/* Directions button below map */
.directions-container {
    text-align: center;
    margin-top: 30px;
}

/* =========================
   CONTACT SECTION
   Contact card area.
   ========================= */

.contact-section {
    padding: 80px 8%;
    background-color: transparent;
    text-align: center;
}

.contact-section h2 {
    margin-bottom: 40px;
    font-size: 36px;
    color: white;
}

.contact-card {
    max-width: 600px;
    margin: auto;

    background: white;

    padding: 40px;

    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
}

.contact-card h3 {
    margin-bottom: 20px;
    color: #0b3d3f;
}

.contact-card p {
    margin: 12px 0;
    font-size: 18px;
}

.contact-button {
    display: inline-block;

    margin-top: 25px;

    background: #f4a261;
    color: #111;

    text-decoration: none;

    padding: 14px 28px;

    border-radius: 6px;
    font-weight: bold;
}

.contact-button:hover {
    opacity: .9;
}

/* =========================
   FOOTER
   Bottom section of website.
   ========================= */

.footer {
    background: #17102f;
    color: white;

    text-align: center;

    padding: 50px 20px;
}

.footer h3 {
    margin-bottom: 15px;
}

.footer p {
    margin: 10px 0;
}

/* =========================
   LIVE MUSIC PAGE HEADER
   Top section of the live music page.
   ========================= */

.music-header {
    background: #17102f;
    color: white;

    text-align: center;

    padding: 80px 20px;
}

.music-header h1 {
    font-size: 52px;
    margin-bottom: 20px;
}

.music-header p {
    font-size: 22px;
}

/* Return button section used on secondary pages */
.music-back {
    text-align: center;
    padding: 40px;
}

/* =========================
   UPCOMING LIVE MUSIC CARDS
   Dynamic event cards filled by music.js.
   ========================= */

   .upcoming-music {

    padding: 80px 8%;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("images/sunset.jpg");

    background-size: cover;

    background-position: center bottom;

    background-repeat: no-repeat;

    background-attachment: fixed;

    text-align: center;
}

.upcoming-music h2 {

    color: white;

    font-size: 42px;

    margin-bottom: 40px;

    text-shadow: 0 3px 10px rgba(0,0,0,.5);
}

/* Container holding all event cards */
.music-events {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 25px;
}

/* Individual event card */
.music-card {
    width: 80%;
    max-width: 1000px;
    min-height: 180px;

    background: rgba(23,16,47,.9);
    color: white;

    border: 2px solid #c89b3c;
    border-radius: 20px;

    padding: 25px;

    box-shadow: 0 10px 25px rgba(0,0,0,.35);

    transition: all .3s ease;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.music-card:hover {
    transform: translateY(-5px);

    border-color: #ffd700;

    box-shadow: 0 15px 35px rgba(255,215,0,.2);
}

/* Band name */
.music-card h3 {
    color: white;

    font-size: 36px;

    margin-bottom: 15px;

    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Event date and time */
.music-card p {
    color: rgba(255,255,255,.9);
    font-size: 18px;
}

/* Event description pulled from Google Calendar */
.music-description {
    margin-top: 15px;

    font-size: 16px;
    line-height: 1.6;

    font-style: italic;
    opacity: 0.85;
}

/* =========================
   MENU PAGE HEADER
   Top section of menu page.
   ========================= */

.menu-header {
    background: #17102f;
    color: white;

    text-align: center;

    padding: 80px 20px;
}

.menu-header h1 {
    font-size: 56px;
    margin-bottom: 15px;
}

.menu-header p {
    font-size: 20px;
    margin-bottom: 30px;
}
/* =========================
MENU BACKGROUND
Used by both desktop and mobile
========================= */

.menu-background {

    background:
        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.25)
        ),
        url("images/pavers.jpg");

    background-size: cover;

    background-position: bottom;

    background-repeat: no-repeat;

    padding: 60px 0;
}

.desktop-menu-image {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 30px;

    flex-wrap: wrap;

    padding: 60px 8%;

    text-align: center;
}

.desktop-menu-image img {
    width: 100%;
    max-width: 550px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    transition: transform .3s ease;
}

.desktop-menu-image img:hover {
    transform: scale(1.02);
}

/* =========================
   MOBILE HTML MENU
   Hidden on desktop, shown on phones.
   ========================= */

   .mobile-menu-html {
    display: none;
}

/* =========================
MOBILE MENU PDF BUTTON
========================= */

.menu-download {

    text-align: center;

    margin-bottom: 35px;
}

.menu-download .button {

    display: inline-block;

    padding: 16px 32px;

    font-size: 18px;
}
/* =========================
   MOBILE MENU CATEGORY CARD
========================= */

.menu-category {

    background: rgba(255,255,255,.88);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    padding: 30px;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,.35);

    box-shadow: 0 12px 30px rgba(0,0,0,.25);

    transition: all .3s ease;
}

.menu-category:hover {

    transform: translateY(-3px);

    box-shadow: 0 16px 35px rgba(0,0,0,.3);
}

.menu-category h2 {

    color: #0b3d3f;

    font-size: 30px;

    margin-bottom: 18px;

    padding-bottom: 10px;

    border-bottom: 2px solid #c89b3c;
}

.menu-category p {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin: 10px 0;

    font-size: 17px;
    line-height: 1.4;
}

/* =========================
   MOBILE MENU BUTTON
   Hidden on desktop.
   ========================= */

.menu-toggle {
    display: none;
}

/* =========================
   MOBILE SLIDE-OUT MENU
   Sidebar menu used on phones.
   ========================= */

.mobile-menu {
    position: fixed;
    top: 0;
    right: -280px;

    width: 280px;
    height: 100vh;

    background: rgba(23, 16, 47, 0.15);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-left: 1px solid rgba(255, 255, 255, 0.2);

    z-index: 999;

    padding: 80px 30px;

    display: flex;
    flex-direction: column;
    gap: 25px;

    transition: right .3s ease;

    overflow-y: auto;
}

/* Active class slides menu into view */
.mobile-menu.active {
    right: 0;
}

/* Links inside mobile menu */
.mobile-menu a {
    color: white;

    text-decoration: none;

    font-size: 22px;
    font-weight: bold;
}

/* X close button */
.close-menu {
    position: absolute;
    top: 20px;
    right: 25px;

    background: none;
    border: none;

    color: white;

    font-size: 36px;
}

/* =========================
   MOBILE RESPONSIVE STYLES
   Applies to phones and small tablets.
   ========================= */

@media (max-width: 768px) {

    /* Navbar spacing on phones */
    .navbar {
        padding: 10px 20px;
        align-items: flex-start;
    }

    /* Smaller logo on phones */
    .logo img {
        height: 90px;
    }

    /* Hide normal desktop nav on phones */
    .desktop-nav {
        display: none !important;
    }

    /* Show hamburger menu button */
    .menu-toggle {
        display: block;

        background: none;
        border: none;

        color: white;

        font-size: 36px;

        z-index: 1000;
    }

    /* Smaller section headlines */
    .hero h2,
    .rooms-content h2,
    .rentals-content h2,
    .tiki-content h2 {
        font-size: 38px;
        line-height: 1.1;
    }

    /* Smaller paragraph text */
    .hero p,
    .rooms-content p,
    .rentals-content p,
    .tiki-content p {
        font-size: 18px;
    }

    /* Adjust large image sections on phones */
    .hero,
    .rooms-section,
    .rentals-section,
    .tiki-section {
        min-height: 85vh;
        padding: 0 6% 60px;
    }

    /* Move hero text up slightly */
    .hero-content {
        padding-bottom: 60px;
    }

    /* Intro headline */
    .intro-section h2 {
        font-size: 30px;
    }

    /* Map title */
    .map-section h2 {
        font-size: 30px;
    }

    /* Contact title */
    .contact-section h2 {
        font-size: 30px;
    }

    /* Contact card spacing */
    .contact-card {
        padding: 30px 20px;
    }

    /* Live music title */
    .upcoming-music h2 {
        font-size: 30px;
    }

    /* Live music cards full width on phones */
    .music-card {
        width: 100%;
    }

    /* Hide desktop menu images on phones */
.desktop-menu-image {
    display: none;
}

    /* Show mobile-friendly HTML menu on phones */
    .mobile-menu-html {
        display: grid;

        padding: 60px 6%;

        gap: 25px;
    }

    /* Smaller menu page header */
    .menu-header h1 {
        font-size: 38px;
    }

    .menu-header p {
        font-size: 18px;
    }

    /* Helps menu item names and prices fit better */
    .menu-category p {
        font-size: 16px;
    }
}