/* ==========================================================
   New Step Travel And Tour — Design Tokens (Phase 4)
   ========================================================== */

:root {
  /* Brand colors (client-specified) */
  --color-blue: #2F8FC2;
  --color-blue-dark: #256F99;
  --color-orange: #FA810E;
  --color-orange-dark: #C4630A;
  --color-green: #00AA00;
  --color-green-dark: #007A00;
  --color-light-orange: #F5E0C9;

  /* Neutrals */
  --color-ink: #0B2A3A;       /* headings / body text */
  --color-ink-soft: #3E5A68;  /* secondary text */
  --color-cloud: #F7FAFC;     /* page background */
  --color-white: #FFFFFF;
  --color-border: #E2E8ED;

  /* Semantic aliases */
  --color-primary: var(--color-blue);
  --color-secondary: var(--color-orange);
  --color-success: var(--color-green);
  --color-bg-accent: var(--color-light-orange);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, Segoe UI, sans-serif;

  --fs-h1: clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3: 1.375rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Layout */
  --radius-card: 14px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(11, 42, 58, 0.08);
  --max-width: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cloud);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; max-width: 65ch; color: var(--color-ink-soft); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-blue); color: var(--color-white); }
.btn-primary:hover { background: var(--color-blue-dark); }
.btn-secondary { background: var(--color-orange); color: var(--color-white); }
.btn-secondary:hover { background: var(--color-orange-dark); }
.btn-whatsapp { background: var(--color-green); color: var(--color-white); }
.btn-whatsapp:hover { background: var(--color-green-dark); }
.btn-outline { background: transparent; color: var(--color-blue); border: 1.5px solid var(--color-blue); }
.btn-outline:hover { background: rgba(2, 145, 209, 0.08); }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
}
.badge-featured { background: var(--color-light-orange); color: var(--color-orange-dark); }
.badge-available { background: rgba(0, 170, 0, 0.12); color: var(--color-green-dark); }

/* Cards */
.card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.card-body { padding: 1.25rem; }

/* Top contact bar */
.topbar {
  background: var(--color-ink);
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-small);
  padding: 0.5rem 0;
}
.topbar a { color: inherit; text-decoration: none; margin-right: 1.25rem; }

/* Main nav */
.navbar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 20;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: var(--fs-small); }
.nav-links a:hover { color: var(--color-blue); }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: var(--color-blue); text-decoration: none; }

/* ==========================================================
   Global responsive safety net.
   Many forms and content grids (admin tour/flight-offer forms,
   dashboard stat cards, category cards, media library, tour
   gallery) use inline grid-template-columns rather than a
   dedicated class, so component-specific media queries in
   site.css/admin.css/editorial.css can't reach them. This
   collapses all of them to a single column on phones at once.
   tokens.css loads on every page (public, admin, and login),
   so this applies everywhere regardless of which other
   stylesheets are loaded.
   ========================================================== */
@media (max-width: 700px) {
  [style*="grid-template-columns:repeat"],
  [style*="grid-template-columns: repeat"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}