/* ================================================================
   BASE.CSS — Flexwave Travels
   Reset · Typography · Shared Utilities · Animations
   Colors are set at runtime by config.js → :root custom properties
   ================================================================ */

/* ── Fallback values (overridden by config.js at runtime) ── */
:root {
  --primary:      #FFB800;
  --primary-rgb:  255, 184, 0;
  --primary-dark: #e0a200;
  --dark:         #0A0A0A;
  --dark-2:       #111111;
  --card:         #141414;
  --card-2:       #1a1a1a;
  --white:        #ffffff;
  --glass:        rgba(255,255,255,0.05);
  --border:       rgba(255,255,255,0.08);
  --text-muted:   #888;
  --text-light:   #ccc;

  /* Design tokens */
  --radius:       24px;
  --transition:   0.3s cubic-bezier(0.4,0,0.2,1);
  --max-w:        1200px;
  --max-wide:     1300px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background-color: var(--dark);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img  { max-width:100%; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width:4px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:2px; }

/* ── Animations ── */
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse   { 0%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.4)} 70%{box-shadow:0 0 0 14px rgba(var(--primary-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0)} }
@keyframes fadeInUp{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ── Section commons ── */
section { padding:90px 5%; }

.section-intro { text-align:center; margin-bottom:55px; }
.section-intro h2 { font-family:'Playfair Display',serif; font-size:clamp(28px,4vw,42px); margin-bottom:12px; }
.section-intro p  { color:var(--text-muted); font-size:16px; }

.section-tag {
  display:inline-block;
  background:rgba(var(--primary-rgb),.12);
  color:var(--primary);
  padding:6px 16px; border-radius:50px;
  font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:14px;
  border:1px solid rgba(var(--primary-rgb),.2);
}

/* ── Buttons ── */
.btn-primary {
  background:var(--primary); color:#000;
  padding:16px 35px; border-radius:50px;
  font-weight:600; display:inline-block;
  transition:var(--transition);
}
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); }

.btn-ghost {
  border:1px solid var(--border); color:var(--white);
  padding:16px 35px; border-radius:50px;
  display:inline-block; transition:var(--transition);
}
.btn-ghost:hover { background:var(--white); color:#000; }

.btn-whatsapp {
  width:100%; background:#25D366; color:#fff;
  padding:14px; border:none; border-radius:12px;
  font-weight:600; cursor:pointer; font-size:14px;
  display:flex; justify-content:center; align-items:center; gap:10px;
  transition:var(--transition); font-family:'Inter',sans-serif;
}
.btn-whatsapp:hover { background:#1ebe5b; transform:translateY(-2px); }

/* ── Breadcrumbs ── */
.breadcrumbs {
  max-width:var(--max-w); margin:0 auto;
  padding:16px 5%; display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-muted);
}
.breadcrumbs a           { color:var(--text-muted); transition:var(--transition); }
.breadcrumbs a:hover     { color:var(--primary); }
.breadcrumbs .sep        { opacity:.4; }
.breadcrumbs .current    { color:var(--primary); }

/* ── Accessibility ── */
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}