/* styles.css - mobile-first basic styling for Sabor Village site */

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

:root{
  --green-forest: #2f6b46;
  --earth: #c68b4a;
  --muted: #f6f4ef;
  --text: #222;
}

/* Base */
html,body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--muted); line-height:1.5; }
.container { max-width:1100px; margin:0 auto; padding:1rem; }

/* Header / nav */
.site-header { background: linear-gradient(180deg, rgba(47,107,70,0.95), rgba(44,99,62,0.95)); color:#fff; padding:0.75rem 0; position:sticky; top:0; z-index:50; }
.site-brand { display:flex; align-items:center; gap:0.6rem; }
.site-brand h1 { font-size:1.1rem; letter-spacing:0.6px; margin:0; }
.nav { display:flex; gap:0.75rem; margin-left:auto; }
.nav a { color:#fff; text-decoration:none; padding:0.45rem 0.6rem; border-radius:6px; font-weight:600; font-size:0.95rem; }
.nav a:hover, .nav a:focus { background: rgba(255,255,255,0.08); outline: none; }

/* Responsive nav toggle */
.nav-toggle { display:none; background:transparent; border:none; color:white; font-size:1.15rem; margin-left:auto; }

/* Hero */
.hero { display:grid; gap:1rem; align-items:center; padding:2rem 0; grid-template-columns: 1fr; }
.hero .hero-img { width:100%; border-radius:12px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.15); }
.hero h2 { color:var(--green-forest); font-size:1.8rem; margin-bottom:0.5rem; }
.hero p { font-size:1.05rem; }

/* Cards */
.grid { display:grid; gap:1rem; grid-template-columns: repeat(1,1fr); }
.card { background:#fff; padding:1rem; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }

/* Gallery */
.gallery-grid { display:grid; gap:0.5rem; grid-template-columns: repeat(2,1fr); }
.gallery-grid img { width:100%; height:200px; object-fit:cover; border-radius:8px; }

/* Events */
.event { display:flex; gap:1rem; align-items:center; }

/* Footer */
.site-footer { margin-top:2rem; padding:1rem 0; text-align:center; color:#333; font-size:0.95rem; }

/* Contact form */
.form-row { display:flex; gap:0.6rem; flex-direction:column; margin-bottom:0.8rem; }
input, textarea, select { padding:0.7rem; border-radius:8px; border:1px solid #ddd; font-size:1rem; width:100%; }
button.primary { background:var(--green-forest); color:#fff; padding:0.7rem 1.1rem; border-radius:8px; border:none; cursor:pointer; font-weight:700; }
.error { color:#b12727; font-size:0.9rem; margin-top:0.35rem; }

/* Larger screens */
@media(min-width:768px){
  .hero { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: repeat(3,1fr); }
  .gallery-grid { grid-template-columns: repeat(3,1fr); }
  .nav-toggle { display:none; }
  .nav { display:flex; }
}

/* Small screens: show toggle */
@media(max-width:767px){
  .nav { display:none; }
  .nav.open { display:flex; flex-direction:column; gap:0.4rem; margin-top:0.6rem; background: rgba(255,255,255,0.03); padding:0.6rem; border-radius:8px; }
  .nav-toggle { display:block; }
}
/* Gallery-grid for event photos (if not already in gallery class) */
.gallery-grid img {
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:8px;
}

/* Card style margin tweaks */
.card.event {
  display: flex;
  flex-direction: column;
  gap:1rem;
}

/* Social media icons in footer (if not yet included) */
.site-footer .social-media {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-icon {
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Platform specific */
.social-icon.facebook { background: #3b5998; }
.social-icon.facebook:hover { background: #2d4373; }

.social-icon.twitter { background: #55acee; }
.social-icon.twitter:hover { background: #2795e9; }

.social-icon.whatsapp { background: #25D366; color: #fff; }
.social-icon.whatsapp:hover { background: #1DA851; }

/* Responsive for small viewports */
@media (max-width: 480px) {
  .site-footer .social-media {
    flex-direction: column;
    align-items: center;
  }
  .social-icon {
    width: 100%;
    text-align: center;
  }
}
/* Thumbnails in gallery */
.gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

/* Social Icons in footer (if not already) */
.site-footer .social-media {
  margin-top:1rem;
  display:flex;
  gap:1rem;
  justify-content:center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius:6px;
  color: #fff;
  font-weight:600;
  font-size:0.9rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.social-icon i {
  font-size:1.2rem;
}

.social-icon.facebook { background: #3b5998; }
.social-icon.facebook:hover { background: #2d4373; transform: scale(1.05); }

.social-icon.twitter { background: #55acee; }
.social-icon.twitter:hover { background: #2795e9; transform: scale(1.05); }

.social-icon.whatsapp { background: #25D366; }
.social-icon.whatsapp:hover { background: #1DA851; transform: scale(1.05); }
/* Gallery grid in attractions */
.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.gallery-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

/* Footer styles (if not already present) */
.site-footer {
  background: var(--green-forest);
  color: #fff;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Social media icons styling (if not already there) */
.site-footer .social-media {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  background: #444; /* you can choose base color */
  transition: background 0.3s ease, transform 0.2s ease;
}

.social-icon.facebook { background: #3b5998; }
.social-icon.facebook:hover { background: #2d4373; transform: scale(1.05); }

.social-icon.twitter { background: #55acee; }
.social-icon.twitter:hover { background: #2795e9; transform: scale(1.05); }

.social-icon.whatsapp { background: #25D366; }
.social-icon.whatsapp:hover { background: #1DA851; transform: scale(1.05); }

@media (max-width: 600px) {
  .gallery-grid img { height: 140px; }
  .social-icon { width: 100%; text-align: center; }
}
/* Hero section enhancements */
.hero {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}

.hero-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* Cards in grid (4 cards) */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card h3 {
  color: var(--green-forest);
  margin-bottom: 0.6rem;
}

/* Footer styles if not yet added or need tweaks */
.site-footer {
  background: var(--green-forest);
  color: #fff;
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover, .site-footer a:focus {
  text-decoration: underline;
}

.social-media {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: #444; /* fallback */
  transition: background 0.3s, transform 0.2s;
}

.social-icon.facebook { background: #3b5998; }
.social-icon.facebook:hover { background: #2d4373; transform: scale(1.1); }

.social-icon.twitter { background: #55acee; }
.social-icon.twitter:hover { background: #2795e9; transform: scale(1.1); }

.social-icon.whatsapp { background: #25D366; }
.social-icon.whatsapp:hover { background: #1DA851; transform: scale(1.1); }

/* Responsive: adjust hero layout on wider screens */
@media(min-width: 768px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 600px) {
  .social-icon {
    width: 35px;
    height: 35px;
  }
}
/* Add this at top or somewhere early in styles.css */

body {
  background-color: #f0e8d8; /* a soft light beige color; change this to your preferred shade */
  /* optional: you can also set background-image or gradient if desired */
}
/* Example background colours for specific section pages */

.section-gallery {
  background-color: #f0f8f5; /* light mint-green or whatever you prefer */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.section-about {
  background-color: #f8f4ec; /* soft warm beige */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.section-attractions {
  background-color: #eef7ef; /* very light greenish */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.section-events {
  background-color: #fffaf0; /* soft off-white / cream */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.section-contact {
  background-color: #f4f9f4; /* gentle pale green */
  padding-top: 2rem;
  padding-bottom: 2rem;
}
video {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}