/* =====================================================================
   Sanvi Tours and Travels — theme foundation
   Tokens, type scale and base layer. Components arrive in Phase 3.

   Typeface pairing mirrors the logo itself: a geometric humanist sans
   (matching the "anvi" wordmark) for interface and body text, and a
   transitional serif (matching the "Tours and Travels" subtitle) for
   headings. Both are variable fonts, self-hosted, subset to latin.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Fonts — self-hosted so there is no third-party connection on first paint
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-variable.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */
:root {
  /* Brand — sampled from the logo */
  --indigo:        #2F1E59;
  --indigo-dark:   #1F1435;
  --indigo-soft:   #4A3A73;
  --indigo-tint:   #EDEAF3;

  --gold:          #D29935;
  --gold-light:    #ECB74E;
  --gold-deep:     #BC7B1B;
  --gold-tint:     #FBF2E1;

  --green:         #6EA13F;
  --green-text:    #4E7A2B;
  --green-deep:    #3A5C1F;
  --green-tint:    #EDF3E4;

  /* Surfaces */
  --page:          #F9F6F4;
  --card:          #FFFFFF;
  --surface-alt:   #F3EFEA;
  --surface-dark:  #2F1E59;

  /* Text */
  --ink:           #1F1533;
  --ink-soft:      #4A4458;
  --ink-muted:     #6B6478;
  --on-dark:       #FFFFFF;
  --on-dark-soft:  #C9C2DA;
  --on-gold:       #3A2405;

  /* Lines */
  --line:          #E7E2DC;
  --line-strong:   #D6CFC6;

  /* Actions */
  --whatsapp:      #128C4A;
  --whatsapp-dark: #0E7038;
  --call:          #4E7A2B;
  --call-dark:     #3A5C1F;

  /* Semantic */
  --success:       #2E7D32;
  --success-bg:    #EDF3E4;
  --warning:       #B26A00;
  --warning-bg:    #FBF2E1;
  --danger:        #B3261E;
  --danger-bg:     #FBEAE9;
  --star:          #D29935;

  /* Type */
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Type scale — 1.25 major third, fluid between 360px and 1280px */
  --step--1: clamp(0.83rem, 0.80rem + 0.12vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.36vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.64vw, 1.87rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.02vw, 2.44rem);
  --step-4:  clamp(2.07rem, 1.72rem + 1.57vw, 3.17rem);

  /* Spacing — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Depth — used sparingly, only where elevation carries meaning */
  --shadow-sm: 0 1px 2px rgba(31, 20, 53, 0.06);
  --shadow:    0 4px 16px rgba(31, 20, 53, 0.08);
  --shadow-lg: 0 12px 32px rgba(31, 20, 53, 0.12);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --header-height: 76px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  180ms;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
img { background: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--indigo);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 700; }

p { margin: 0 0 var(--space-4); max-width: 68ch; }

a {
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--green-deep); }

strong, b { font-weight: 700; }
small { font-size: var(--step--1); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }

/* On indigo sections, invert the whole type stack */
.on-dark { color: var(--on-dark-soft); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark a { color: var(--gold-light); }
.on-dark a:hover { color: #FFFFFF; }

/* ---------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------- */
.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.container-narrow { width: min(100% - 2rem, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: var(--space-8); }
@media (min-width: 768px) { .section { padding-block: var(--space-9); } }

.section-page  { background: var(--page); }
.section-card  { background: var(--card); }
.section-alt   { background: var(--surface-alt); }
.section-dark  { background: var(--surface-dark); }

/* Heading rule echoing the indigo line under the logo wordmark */
.section-title { margin-bottom: var(--space-6); }
.section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-top: var(--space-3);
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  border-radius: 2px;
}
.section-title.is-centered { text-align: center; }
.section-title.is-centered::after { margin-inline: auto; }

/* ---------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 999;
  background: var(--indigo);
  color: var(--on-dark);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: var(--on-dark); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------
   Layout stability — reserving space prevents CLS on image-heavy pages
   --------------------------------------------------------------------- */
.ratio { position: relative; overflow: hidden; background: var(--surface-alt); }
.ratio > img, .ratio > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-1x1  { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------------
   Print — customers print itineraries and fare quotes
   --------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .floating-actions, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}