/* =====================================================================
   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 — built around the logo's own green and gold.
     The deep forest tone is the logo green darkened, so the site and the
     mark read as one family rather than two unrelated palettes. */
  --primary:       #1B3A17;
  --primary-dark:  #142E11;
  --primary-soft:  #3A6B31;
  --primary-tint:  #EAF1E5;

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

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

  /* Surfaces */
  --page:          #F7F6F2;
  --card:          #FFFFFF;
  --surface-alt:   #F0EFE8;
  --surface-dark:  #1B3A17;

  /* Text */
  --ink:           #1C2718;
  --ink-soft:      #3F4C38;
  --ink-muted:     #5E6B57;
  --on-dark:       #FFFFFF;
  --on-dark-soft:  #C8D9BE;
  --on-gold:       #3A2405;

  /* Lines */
  --line:          #E3E1D8;
  --line-strong:   #CFCDC1;

  /* 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(28, 39, 24, 0.06);
  --shadow:    0 4px 16px rgba(28, 39, 24, 0.08);
  --shadow-lg: 0 12px 32px rgba(28, 39, 24, 0.12);

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

  /* 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; }
/* Placeholder tint while a photo loads. Logos and other transparent art opt out,
   otherwise the tint shows through wherever the image is see-through. */
img { background: var(--surface-alt); }
img[src$=".svg"],
.site-logo img,
.no-img-bg { 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(--primary);
  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 dark 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 rule 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(--primary);
  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
   --------------------------------------------------------------------- */
/* display:block matters — .ratio is applied to <a> and <span> wrappers, and
   aspect-ratio has no effect on an inline element, so the box would collapse
   to nothing and the absolutely positioned image inside would vanish. */
.ratio { display: block; 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; }
}