/* ==========================================================================
   Full Speed Patio & Lounge — Brand Stylesheet
   Colors pulled from the Canva design:
   Navy:  #1a2744   Orange: #e8631d   Gold/Tan: #c9a15a   Off-white bg: #f4f2ee
   ========================================================================== */

:root {
  --fs-navy: #1a2744;
  --fs-orange: #e8631d;
  --fs-gold: #c9a15a;
  --fs-cream: #f4f2ee;
  --fs-white: #ffffff;
  --fs-text: #2b2b2b;
  --fs-radius: 6px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--fs-text);
  margin: 0;
  background: var(--fs-white);
}

h1, h2, h3 { font-family: 'Poppins', sans-serif; font-weight: 700; }

/* Buttons */
.fs-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  margin: 6px 8px 6px 0;
  transition: opacity .2s ease;
}
.fs-btn:hover { opacity: .85; }
.fs-btn-primary { background: var(--fs-gold); color: var(--fs-navy); }
.fs-btn-outline { background: transparent; border: 2px solid var(--fs-navy); color: var(--fs-navy); }
.fs-btn-outline-light { background: transparent; border: 2px solid var(--fs-white); color: var(--fs-white); }

/* Header */
.fs-header { background: var(--fs-navy); padding: 16px 32px; }
.fs-header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
.fs-logo img { height: 42px; }
.fs-nav-menu { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.fs-nav-menu a { color: var(--fs-white); text-decoration: none; font-weight: 500; }
.fs-nav-menu a:hover { color: var(--fs-orange); }

/* Hero */
.fs-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 100px 40px;
  color: var(--fs-white);
}
.fs-hero-inner { max-width: 600px; }
.fs-hero h1 { font-size: 2.4rem; margin-bottom: 16px; }
.fs-hero p { font-size: 1.05rem; margin-bottom: 24px; }
.fs-hero-side-image {
  position: absolute;
  right: 40px;
  bottom: -60px;
  width: 260px;
  border-radius: var(--fs-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Intro */
.fs-intro { max-width: 1100px; margin: 100px auto 40px; padding: 0 24px; }
.fs-intro-columns { display: flex; gap: 40px; }
.fs-intro-columns p { flex: 1; }
.fs-intro-full { margin-top: 24px; font-weight: 500; }

/* Weekly Events */
.fs-weekly { text-align: center; padding: 60px 24px; background: var(--fs-cream); }
.fs-weekly h2 { color: var(--fs-orange); }
.fs-weekly-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 1100px; margin: 32px auto; }
.fs-weekly-card img { width: 100%; border-radius: var(--fs-radius); margin-bottom: 12px; }
.fs-weekly-card h3 { margin: 0 0 4px; }

/* Celebrations */
.fs-celebrations { display: flex; gap: 40px; background: var(--fs-navy); color: var(--fs-white); padding: 60px 40px; flex-wrap: wrap; }
.fs-celebrations-text { flex: 1; min-width: 280px; }
.fs-celebrations h2 { color: var(--fs-gold); }
.fs-perfect-for-list { list-style: disc; padding-left: 20px; }
.fs-celebrations-images { flex: 1; min-width: 280px; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.fs-celebrations-images img { width: 100%; border-radius: var(--fs-radius); }

/* Packages */
.fs-packages { padding: 60px 24px; text-align: center; }
.fs-packages h2 { color: var(--fs-orange); margin-bottom: 32px; }
.fs-packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.fs-package-card { border: 1px solid #ddd; border-radius: var(--fs-radius); padding: 28px; text-align: left; }
.fs-package-capacity { color: var(--fs-gold); font-style: italic; margin-top: -8px; }
.fs-package-pricing { list-style: none; padding: 0; margin: 16px 0; }

/* Gallery */
.fs-gallery-preview { background: var(--fs-gold); color: var(--fs-white); text-align: center; padding: 60px 24px; }
.fs-gallery-full { text-align: center; padding: 60px 24px; background: var(--fs-navy); color: var(--fs-white); }
.fs-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; max-width: 1100px; margin: 24px auto; }
.fs-gallery-grid img { width: 100%; border-radius: var(--fs-radius); aspect-ratio: 1; object-fit: cover; }

/* Page hero (Booking / About simple heading banner) */
.fs-page-hero { text-align: center; padding: 60px 24px; }
.fs-page-hero h1 { color: var(--fs-orange); }

/* About hero image */
.fs-about-hero { height: 320px; background-size: cover; background-position: center; border-radius: 0 0 60px 60px; }
.fs-who-we-are { text-align: center; max-width: 700px; margin: 0 auto; padding: 50px 24px; background: var(--fs-cream); }
.fs-who-we-are h2 { color: var(--fs-orange); }

/* Calendar */
.fs-calendar { text-align: center; padding: 60px 24px; }
.fs-calendar h2 { color: var(--fs-gold); }
.fs-calendar-embed { max-width: 900px; margin: 24px auto; }

/* Booking form section */
.fs-booking-form-section { background: var(--fs-gold); padding: 60px 24px; }
.fs-booking-form-section h2 { color: var(--fs-navy); text-align: center; }
.fs-booking-form-wrap { max-width: 700px; margin: 0 auto; background: var(--fs-white); border-radius: var(--fs-radius); padding: 32px; }

/* Footer */
.fs-footer { background: var(--fs-navy); color: var(--fs-white); padding: 40px 32px; }
.fs-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; max-width: 1200px; margin: 0 auto; }
.fs-footer-logo img { height: 48px; }
.fs-footer-contact p { margin: 4px 0; }
.fs-footer-contact a { color: var(--fs-white); text-decoration: none; }

/* Responsive */
@media (max-width: 768px) {
  .fs-intro-columns { flex-direction: column; }
  .fs-hero-side-image { display: none; }
  .fs-header-inner { flex-direction: column; gap: 12px; }
}