/* Southern Expeditions – Modern UI (colors preserved) */
:root {
  --bg: #f5f2e9;
  --text: #2f2f2f;
  --muted: #777;
  --surface: #ffffff;
  --surface-alt: #eeece3;
  --brand: #3e4f3e;
  --brand-2: #4a6b4f;
  --brand-3: #c2673f;
  --accent: #e5a049;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; color: var(--text); background: var(--bg); }
img { max-width:100%; display:block; height:auto; }

.container { width: min(1200px, 92%); margin-inline: auto; }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(62,79,62,0.12) 100%), var(--surface);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: .75rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color: var(--brand); font-weight: 800; letter-spacing:.3px; }
.brand img { width:72px; }
.nav { display:flex; gap:1rem; align-items:center; }
.nav a { text-decoration:none; color: var(--brand); font-weight:700; padding:.5rem .75rem; border-radius:.5rem; }
.nav a:hover { background: rgba(74,107,79,0.08); }

/* Hero */
.hero { position: relative; background: url('img/hero.jpg') center/cover no-repeat; color:#fff; }
.hero::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); }
.hero .content { position:relative; z-index:1; padding: clamp(3rem, 8vw, 7rem) 0; text-align:center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin:0 0 .75rem; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.hero p { font-size: clamp(1rem, 2.4vw, 1.2rem); opacity:.98; max-width: 60ch; margin: 0 auto 1.25rem; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.cta-row { display:flex; gap:.75rem; justify-content:center; flex-wrap: wrap; }

.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:.65rem; border:1px solid transparent; cursor:pointer; text-decoration:none; font-weight:700; }
.btn-primary { background: var(--brand-2); color:#fff; }
.btn-primary:hover { background: var(--brand-3); }
.btn-ghost { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.16); }

/* Sections */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--brand-2); margin: 0 0 .5rem; }
.lead { color: var(--muted); max-width: 70ch; }

/* Cards grid */
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.25rem; }
.card { background: var(--surface); border-radius: 16px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.card-body { padding: 1rem 1rem 1.2rem; }
.card h3 { margin:.25rem 0 .4rem; }
.card p { margin:0 0 .75rem; color: var(--muted); }

/* Reviews */
.reviews { background: var(--surface-alt); }
.review { background: var(--surface); padding: 1rem; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.05); display:grid; grid-template-columns: 56px 1fr; gap: .9rem; align-items:start; }
.review img { width:56px; height:56px; border-radius:50%; object-fit:cover; }

/* Footer */
.footer { background: var(--brand); color: #f5f2e9; }
.footer .container { padding: 1rem 0; text-align:center; }

/* Floating WhatsApp */
.whatsapp-fab {
  position: fixed; right: 18px; bottom: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: #25D366; color:white; font-size: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  z-index: 60; text-decoration:none;
}
.whatsapp-fab:hover { filter: brightness(0.95); }

/* Table (Tours) */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse: collapse; background: var(--surface); border-radius: 14px; overflow:hidden; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.table th, .table td { padding: .9rem 1rem; border-bottom: 1px solid rgba(0,0,0,.06); text-align:left; }
.table thead th { background: var(--brand); color:#fff; }
.table tr:hover { background: rgba(0,0,0,.02); }

/* Accessibility */
.skip-link { position: absolute; left: -999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position: static; width:auto; height:auto; padding: .5rem .75rem; background: var(--brand-2); color:#fff; border-radius:.5rem; }

@media (max-width: 780px) {
  .nav { display:none; }
  .header-inner { justify-content: space-between; }
  .menu-toggle { display:inline-flex; }
}
.menu-toggle { display:none; align-items:center; gap:.5rem; padding:.45rem .7rem; border-radius:.5rem; border: 1px solid rgba(0,0,0,.08); color: var(--brand); background: var(--surface); cursor:pointer; }

.btn:focus{outline:2px solid rgba(255,255,255,.7); outline-offset:2px}
.btn-primary:active{transform: translateY(1px)}