/* Base layout + dark navy theme */
:root{
--navy-900: #071127; /* very dark navy */
--navy-800: #0b2136;
--navy-700: #12314a;
--muted: #bfc8d6;
--accent: #c6a96b; /* subtle warm accent */
--glass: rgba(255,255,255,0.04);
--radius: 12px;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: linear-gradient(180deg,var(--navy-900),var(--navy-800));
color:#e8eef6;
-webkit-font-smoothing:antialiased;
-moz-osx-smoothing:grayscale;
line-height:1.5;
}

/* ------------------------------------------------------------------ */
/* GLOBAL LAYOUT & UTILITIES */
/* ------------------------------------------------------------------ */

.container{max-width:1100px;margin:0 auto;padding:2rem}
.section{padding:1.5rem 0}
.lead{color:var(--muted);max-width:100ch}
.center {
  text-align: center;
  margin-top: 24px;
}


/* Typography */
h1,h2,h3,h4{font-family:'Playfair Display', serif;color:#fff;margin:0 0 0.6rem}
h1{font-size:clamp(2rem,4.5vw,3.25rem);line-height:1}
.huge{font-size:4rem}
p{margin:0 0 1rem}

/* ------------------------------------------------------------------ */
/* NAVIGATION */
/* ------------------------------------------------------------------ */

.nav{background:transparent;position:sticky;top:0;z-index:40;padding:1rem 0}
.nav__inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'Playfair Display';text-decoration:none;color:#fff;font-weight:700;font-size:1.125rem}
.nav__links{list-style:none;margin:0;padding:0;display:flex;gap:0.6rem}

/* Mobile Toggle Button (Hamburger) */
.nav__toggle {
  display: none; /* Hidden by default */
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 24px;
  cursor: pointer;
  z-index: 50;
  position: relative;
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--muted);
  margin: 6px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ------------------------------------------------------------------ */
/* MEDIA QUERIES (Responsiveness) - MODIFIED */
/* ------------------------------------------------------------------ */

@media (max-width:760px){
  .hero{height:64vh;min-height:420px}
  .hero__content{padding:2rem}
  
  .nav__toggle {
    display: block; /* Show button on mobile */
    /* Position the button on the right */
    margin-left: auto; 
  }

  /* Menu links */
  .nav__links {
    /* Hide links by default on mobile, this overwrites display:flex */
    display: none; 
    position: absolute;
    top: 100%; /* Below the nav bar */
    left: 0;
    width: 100%;
    flex-direction: column;
    background: var(--navy-800); /* Darker background for menu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    padding: 1rem 2rem;
  }

  /* Show the menu when the 'is-open' class is applied by JS */
  .nav__links.is-open {
    display: flex; 
  }

  /* Adjust link style for vertical stacking */
  .nav__links li {
    width: 100%;
    margin: 0.5rem 0;
  }
  
  .nav__links .btn-link {
    width: 100%;
    text-align: center;
  }

  /* Table: Hide headers on mobile */
  .venues-table thead {
    display: none; 
  }

  /* Table: Make rows behave like blocks */
  .venues-table, .venues-table tbody, .venues-table tr {
    display: block;
  }

  /* Table: Style rows as distinct cards */
  .venues-table tr {
    border: 1px solid var(--navy-700);
    margin-bottom: 1rem;
    border-radius: var(--radius);
    overflow: hidden;
  }
  
  /* Table: Make cells display as blocks */
  .venues-table td {
    display: block;
    text-align: right;
    padding: 0.75rem 1rem;
    border: none; /* Remove individual cell borders on mobile */
    position: relative;
    /* Apply a faint border to visually separate cells */
    border-bottom: 1px dashed var(--navy-800);
  }
  
  /* Table: Last cell in a row doesn't need a bottom border */
  .venues-table tr td:last-child {
    border-bottom: none;
  }
  
  /* Table: Create the "header" label before the content on mobile */
  .venues-table td:before {
    content: attr(data-label) ": "; /* Add colon and space */
    float: left;
    font-weight: 700;
    color: #fff;
  }
  
  /* Remove the background striping for mobile rows for a cleaner block look */
  .venues-table tr:nth-child(even) {
    background-color: transparent; 
  }

} /* <--- This is the correct end of the media query */

/* ------------------------------------------------------------------ */
/* BUTTONS */
/* ------------------------------------------------------------------ */

.btn-link{display:inline-block;padding:0.55rem 0.9rem;border-radius:8px;background:var(--glass);color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,0.04);backdrop-filter:blur(4px);transition:transform .18s ease, background .18s}
.btn-link:hover{transform:translateY(-3px);background:rgba(255,255,255,0.03)}

.btn{display:inline-block;padding:0.7rem 1rem;border-radius:10px;background:var(--accent);color:var(--navy-900);text-decoration:none;font-weight:700}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted)}
.btn--large{padding:0.95rem 1.25rem;font-size:1.05rem}

/* ------------------------------------------------------------------ */
/* HERO SECTION */
/* ------------------------------------------------------------------ */

.hero{position:relative;height:70vh;min-height:520px;display:flex;align-items:center}
.hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(20%) contrast(85%);opacity:0.95}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,10,18,0.65) 0%, rgba(2,8,20,0.6) 75%, rgba(2, 8, 20, 0.9) 100%)}
.hero__content{position:relative;z-index:2;padding:3rem;color:#fff;max-width:820px}
.eyebrow{letter-spacing:2px;text-transform:uppercase;font-size:0.85rem;color:var(--muted);margin-bottom:0.75rem}
.hero__title{font-size:clamp(1.6rem,4vw,3rem);margin-bottom:0.4rem}
.hero__est{font-size:1.1rem;color:var(--muted);margin-top:0.5rem}
.est-year{font-family:'Playfair Display';font-weight:700;color:var(--accent);font-size:1.5rem;margin-left:0.5rem}

.small-hero {
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* COMPONENT STYLES */
/* ------------------------------------------------------------------ */

/* Values */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin-top:3rem}
.values article{background:rgba(255,255,255,0.02);padding:1rem;border-radius:10px}


/* Waters grid */
.waters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:3rem}
.waters-grid figure{background:rgba(255,255,255,0.02);border-radius:10px;overflow:hidden}
.waters-grid img{width:100%;height:160px;object-fit:cover;display:block}
.waters-grid figcaption{padding:0.75rem}
.waters-grid figcaption strong{display:block}


/* Benefits */
.benefits{list-style:none;padding:0;margin:1rem 0 2rem}
.benefits li{background:rgba(255,255,255,0.02);padding:0.9rem;border-radius:8px;margin-bottom:0.6rem}


/* Events List */
.events-list {
  display: grid;
  gap: 20px;
}

.event-card {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 20px;
}


/* Membership Table */
.membership-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--muted);
}

.membership-table th,
.membership-table td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.membership-table th {
  text-align: left;
  color: #fff;
}


/* ------------------------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------------------------ */

.site-footer{background:linear-gradient(180deg,var(--navy-800),var(--navy-700));padding:2.25rem 0;color:var(--muted);margin-top:3rem}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem}
.site-footer a{color:var(--muted);text-decoration:underline}
.copyright{text-align:center;padding-top:1rem;color:#8f9aa8}

/* Media query for tablets and phones */
@media (max-width: 768px) {
    .footer__grid {
        /* This changes the grid to stack sections one below the other */
        grid-template-columns: 1fr;
        gap: 20px; /* Slightly less gap on mobile */
    }

    /* Add spacing between stacked sections for better readability */
    .footer__grid > div {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
    }

    /* Remove the bottom border from the last section */
    .footer__grid > div:last-child {
        border-bottom: none;
    }

    /* Center the text and links for a mobile-friendly look */
    .footer__grid h4 {
        text-align: center;
    }

    .footer__grid address,
    .footer__grid p {
        text-align: center;
    }

    .footer__grid ul {
        text-align: center;
    }

    .footer__grid ul li {
        /* Make list items blocks for easier tapping */
        display: block;
        margin: 5px 0;
    }
}

/* Style for the WhatsApp QR code image */
.social img.qr-code {
    /* Enforce the size */
    width: 100px;
    height: 100px; /* Use 100px for height as well to maintain a square shape */
    
    /* Display properties for better layout */
    display: block; /* Makes the image take up its own line */
    margin: 10px auto 5px auto; /* Centers the QR code above the "WhatsApp" text */
    border-radius: 5px; /* Optional: adds soft corners */
}

/* Ensure the link wraps the image and text nicely */
.social li {
    /* If you want all social items (including QR) to be inline */
    display: inline-block;
    margin-right: 25px;
    text-align: center; /* Centers content within the list item */
}


/*Map Section*/

.map-section {
  margin-top: 3rem;
  text-align: center;
}

.map-section iframe {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.map-section a {
  display: inline-block;
  margin-top: 0.5rem;
  color: #0056b3;
  text-decoration: underline;
}

/* Waters Table - Updated Styles */
.table-section {
  margin-top: 3rem;
  text-align: center;
}

.filters {
  margin-bottom: 1rem;
}

.filters label {
  margin-right: 0.5rem;
  font-weight: 600;
  color: #fff; /* Ensure label is visible */
}

.filters select {
  margin-right: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--navy-700);
  background: var(--navy-800);
  color: #fff;
  appearance: none; /* remove default select styling for better dark mode look */
}

.table-container {
  overflow-x: auto; /* Allows horizontal scrolling for non-mobile table if needed */
  background: var(--navy-700);
  border-radius: var(--radius);
  padding: 1rem;
}

.venues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: var(--muted); /* Default text color */
}

.venues-table th, .venues-table td {
  padding: 10px 12px;
  /* Use a lighter border line to integrate with dark theme */
  border: 1px solid var(--navy-800);
  text-align: left;
}

.venues-table th {
  background-color: var(--navy-900); /* Darker header background */
  color: var(--accent); /* Highlight header text */
  font-weight: 700;
  white-space: nowrap; /* Prevent wrapping of column headers */
}

/* Fix for the repeating header look: remove background striping */
.venues-table tr:nth-child(even) {
  /* No special background for even rows in desktop view to remove the 'repeating header' effect */
  background-color: transparent; 
}

/* Ensure data rows have a subtle background if needed, but transparent is cleaner for dark mode */
.venues-table tbody tr {
    background-color: transparent;
}
/* A subtle hover can improve user experience */
.venues-table tbody tr:hover {
    background-color: var(--glass);
}