/* Moya Coast Travel & Tours — visual upgrade */
:root {
  --moya-navy: #073b4c;
  --moya-teal: #087e8b;
  --moya-gold: #f7b83e;
  --moya-cream: #f2fbfa;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #123849;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
img {
  max-width: 100%;
  height: auto;
}
button, input, select, textarea { max-width: 100%; }
a { transition: color .2s ease, background .2s ease; }

/* Hero selectors cover common existing homepage class names. */
.hero, .hero-section, .hero-banner, .hero-content,
[class*="hero-section"], [class*="hero-banner"] {
  background-color: var(--moya-navy);
  background-image:
    linear-gradient(90deg, rgba(3,43,58,.88), rgba(3,43,58,.20)),
    url("../images/moya-hero.jpg");
  background-size: cover;
  background-position: center 52%;
  color: #fff;
}
.hero h1, .hero-section h1, .hero-banner h1,
[class*="hero"] h1 {
  color: #fff;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  max-width: 850px;
}
.hero p, .hero-section p, .hero-banner p,
[class*="hero"] p { line-height: 1.7; }

/* Destination and package imagery. */
.destination-card, .destination-item, .package-card,
.tour-card, .destination-grid > *,
.destinations-grid > *, .packages-grid > * {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(7,59,76,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.destination-card:hover, .destination-item:hover,
.package-card:hover, .tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(7,59,76,.16);
}
.destination-card img, .destination-item img,
.package-card img, .tour-card img {
  width: 100%;
  object-fit: cover;
  display: block;
}
button, .button, .btn, a.button, a.btn {
  border-radius: 999px;
}
input, select, textarea {
  box-sizing: border-box;
  border-radius: 9px;
}
section { scroll-margin-top: 90px; }

@media (max-width: 768px) {
  body { overflow-wrap: anywhere; }
  h1 { font-size: clamp(2rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  nav, .navbar, .nav-links {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero, .hero-section, .hero-banner,
  [class*="hero-section"], [class*="hero-banner"] {
    background-position: center;
    padding-top: 36px;
    padding-bottom: 48px;
  }
  form, .search-form, .trip-search {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  input, select, textarea, button { min-height: 42px; }
  .destination-grid, .destinations-grid,
  .packages-grid, .package-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .destination-card, .destination-item,
  .package-card, .tour-card { min-width: 0; }
}