/* THE LOOK OF H2O ADVENTURES  (Option B, "Big photos")
   This file is the only one that differs between the three sites.
   Chorro Ecolodge and Chocolatico get their own copy with other colors and typefaces;
   the parts themselves (site.css) stay the same. */

/* Layout: full-width photographs with square edges; text panels laid over them;
   pale sun and river tints behind alternating bands; uppercase serif headings. */
:root {
  color-scheme: light;
  --ink: #1E2A21;            /* running text (green-black) */
  --navy: #2A3B2E;           /* headings, footer, main surfaces: forest green (October 9, request #78) */
  --paper: #FFFFFF;          /* page ground */
  --tint-sun: #F3F0E2;       /* pale cream band */
  --tint-river: #E9EEE2;     /* pale olive band */
  --line: #CDD5C6;           /* hairlines */
  --accent: #5F6E3A;         /* small serif labels, links on hover: dark olive */
  --yellow: #FFE600;         /* the logo yellow: main button */
  --board: #029E9D;          /* the teal board: stays teal (Leo, October 9) */
  --noticebar: #17233E;      /* the thin notice line: keeps its first colour (Leo, October 9) */
  --mountain: #4DB6AC;       /* the mountains */
  --river: rgba(12, 183, 242, .5);  /* the moving water */
  --river-solid: #85DBF8;    /* the water colour on white, for backgrounds */
  /* Leo's card palette (October 7): slate #3E5F70, dusty blue #6C8A95, forest #2A3B2E, moss #506343,
     olive #768451, cream #F0E2BB, sand #C7AB6A. October 9 (request #76): the cards cycle forest, moss and olive. */
  --card-1: #2A3B2E;         /* forest green */
  --card-2: #506343;         /* moss green */
  --card-3: #768451;         /* olive green */
  --book: #C7AB6A;           /* sand: every Book now button (October 9, request #88) */
  --book-hover: #B3974F;
  --wa: #25D366;             /* WhatsApp button */
  --wa-ink: #0B2B17;
  --shade: rgba(14, 24, 16, .42);   /* darkening over hero photos */

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: Mulish, 'Trebuchet MS', 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1280px;
  --radius: 0px;             /* square corners throughout */
}

/* ---- H2O only: the board and the moving river scene, kept from the current h2ocr.com ---- */
.board {
  background: var(--board);
  border: 10px solid rgba(0, 0, 0, .1);
  box-shadow: inset -1px 2px 10em #404040;
  color: #fff;
}
.board__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 26px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px;
}
.board__text { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.board__action { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
.board .notice__phone { color: #fff; font-weight: 800; white-space: nowrap; }

.loop-wrapper { position: relative; width: 100%; height: 170px; overflow: hidden; border-bottom: 3px solid var(--mountain); }
.mountain {
  position: absolute; right: -900px; bottom: -20px; width: 2px; height: 2px;
  box-shadow: 0 0 0 50px var(--mountain), 60px 50px 0 70px var(--mountain), 90px 90px 0 50px var(--mountain),
    250px 250px 0 50px var(--mountain), 290px 320px 0 50px var(--mountain), 320px 400px 0 50px var(--mountain);
  transform: rotate(130deg);
  animation: mtn 20s linear infinite;
}
.hill {
  position: absolute; right: -900px; bottom: -50px; width: 400px; height: 20px; border-radius: 50%;
  box-shadow: 0 0 0 50px var(--river), -20px 0 0 20px var(--river), -90px 0 0 50px var(--river),
    250px 0 0 50px var(--river), 290px 0 0 50px var(--river), 620px 0 0 50px var(--river);
  animation: hill 4s 2s linear infinite;
}
.rafters { position: absolute; left: 0; bottom: 0; width: 200px; height: 100px; animation: rafters 20s linear infinite; }
.rafters img { display: block; width: 200px; height: auto; max-width: none; }
@keyframes rafters { 0% { left: 0; } 50% { left: calc(100% - 190px); } 100% { left: -50px; } }
@keyframes mtn { 100% { transform: translateX(-2000px) rotate(130deg); } }
@keyframes hill { 100% { transform: translateX(-2000px); } }
@media (prefers-reduced-motion: reduce) {
  .mountain, .hill, .rafters { animation-play-state: paused; }
  .mountain { right: 20%; }
  .rafters { left: 12%; }
}