/* ==========================================================================
   Bubout Travel – site stylesheet
   --------------------------------------------------------------------------
   One file for the whole site, written mobile first: the base rules are for
   phones, and @media (min-width: …) blocks add the tablet/desktop layout.

   Contents
     1.  Design tokens (colours, sizes, fonts)
     2.  Fonts
     3.  Base elements
     4.  Typography helpers
     5.  Layout helpers
     6.  Buttons
     7.  Hero header (top bar, navigation, title, scroll zoom)
     8.  Photo gallery inside the hero
     9.  Intro block (title + text + checklist)
     10. Checklist
     11. Home: photo fan + highlights
     12. Trip cards
     13. Agenda (departure dates)
     14. Tabs (Jouw reis / Reisprogramma)
     15. Day-by-day programme
     16. Booking block + forms
     17. Testimonials slider
     18. Text pages (info, privacy, terms) and split layouts
     19. Footer
     20. Fade in while scrolling
     21. Reduced motion
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */

:root {
  /* Colours */
  --color-text: #3d424c;
  --color-white: #ffffff;
  --color-red: #c20e1a;
  --color-green: #31ad2f;
  --color-sand: #f9f4ee;          /* light background of cards, tabs and panels */
  --color-field: #f7f7f7;         /* form field background */
  --color-border: #dee2e8;
  --color-hover: #f4f4f4;

  /* Status labels in the agenda */
  --color-status-available-bg: #e3f9eb;
  --color-status-available-text: #1e8542;
  --color-status-full-bg: #ffcccc;
  --color-status-full-text: #940707;
  --color-status-underway-bg: #fff3c4;
  --color-status-underway-text: #7a5a00;
  --color-status-past-bg: #ececec;
  --color-status-past-text: #5c5c5c;

  /* Layout */
  --max-width: 1200px;
  --gutter: 16px;                 /* space left/right of the content; 24px from tablet up */
  --radius: 8px;
  --painted-edge-height: 75px;    /* height of the brush-stroke edge under the hero */

  /* Fade in while scrolling (section 20) */
  --reveal-distance: 24px;        /* how far a part slides up */
  --reveal-duration: 0.8s;
  --reveal-easing: cubic-bezier(0.2, 0.7, 0.2, 1);   /* fast start, soft landing */

  /* Fonts */
  --font-body: "Montserrat", sans-serif;
  --font-script: "Wonderstory", cursive;
}

@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
}


/* 2. Fonts (self-hosted, so no visitor data goes to third parties)
   ========================================================================== */

@font-face {
  font-family: "Wonderstory";
  src: url("../fonts/wonderstory.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 3. Base elements
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  font-feature-settings: "calt" off;
}

/* While the mobile menu is open, the page behind it should not scroll. */
body.menu-is-open {
  overflow: hidden;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  overflow-wrap: break-word;
}

/* 40px on desktop; a bit smaller on phones so the sun accent still fits */
h2 {
  margin: 0;
  font-size: clamp(30px, 4vw + 16px, 40px);
  font-weight: 600;
  line-height: 1.225;
}

h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
}

h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

p {
  margin: 0 0 16px;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

strong,
b {
  font-weight: 700;
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* 4. Typography helpers
   ========================================================================== */

/* Script heading, e.g. "Onze reizen" above the trip cards */
.script-heading {
  margin: 0 0 40px;
  font-family: var(--font-script);
  font-size: 100px;
  font-weight: 400;
  line-height: 60px;
  text-align: center;
}

/* Bold subtitle under a section heading, e.g. "in 8 dagen" */
.subtitle {
  margin: 8px 0 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
}

/* A subtitle further down a text block, e.g. "Contactgegevens" */
h3.subtitle {
  margin-top: 32px;
}

/* Small yellow sun drawn after a heading (brand accent).
   It is an inline box glued to the last word, so it follows the text when
   the heading wraps. The negative margins give it zero size for layout:
   it pokes out above the line without moving any text. */
.has-sun::after {
  content: "";
  display: inline-block;
  width: 1.25em;             /* 50px next to a 40px heading */
  height: 1.25em;
  margin: -0.6em -1em -0.65em -0.25em;
  vertical-align: top;
  background: url("../img/brand/sun-accent.svg") no-repeat center / contain;
}

/* The script font is much larger; keep its sun at the normal size */
.script-heading.has-sun::after {
  width: 50px;
  height: 50px;
  margin: -10px -40px -40px -10px;
}

/* "Naar de inhoud": invisible until a keyboard user tabs to it as the very
   first thing on the page, then shown top left above everything */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* The content area only receives focus from the skip link; no ring needed */
main:focus {
  outline: none;
}

/* Text only for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* 5. Layout helpers
   ========================================================================== */

/* Centred column with the site's maximum width and side gutters */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Decorations (like the sun accent) may stick out a little past the screen
   edge on phones; cut them off instead of making the page scroll sideways. */
main {
  overflow-x: clip;
}

/* Vertical space between the big blocks of a page */
.section {
  margin-block: 56px;
}


/* 6. Buttons
   ========================================================================== */

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius);   /* same corners as the cards */
  background: var(--color-text);
  color: var(--color-white);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover gets a little lighter instead of black: a softer change, white text
   stays well above the 4.5:1 contrast minimum */
.button:hover {
  background: color-mix(in srgb, var(--color-text) 85%, var(--color-white));
}

.button:active {
  background: var(--color-text);
}

.button--large {
  padding: 12px 40px;
  font-size: 18px;
}


/* 7. Hero header
   --------------------------------------------------------------------------
   Big photo with the logo, menu and page title on top. The bottom gets a
   painted white edge. The photo zooms in slowly while scrolling (site.js).
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  height: clamp(560px, 100svh, 800px);
  overflow: hidden;
  padding-top: 30px;
  color: var(--color-white);
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  will-change: transform;
}

/* Darkens the photo a little so the white text stays readable */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Painted brush-stroke edge at the bottom of the hero */
.hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: var(--painted-edge-height);
  /* The image's bottom pixel row is half see-through, which let a thin line of
     the photo show; a solid white strip under the last pixels hides it */
  background:
    url("../img/brand/painted-edge.webp") repeat-x center bottom,
    linear-gradient(var(--color-white), var(--color-white)) center bottom / 100% 6px no-repeat;
  pointer-events: none;
}

/* --- Top bar: logo + navigation ----------------------------------------- */

.topbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  transition: opacity 1s;
}

.topbar__logo img {
  width: 130px;
}

@media (min-width: 600px) {
  .topbar__logo img {
    width: 174px;
  }
}

/* Round "hamburger" button, only on small screens */
.menu-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu-button img {
  width: 48px;
  height: 48px;
}

/* The button shows three lines, or a cross while the menu is open */
.menu-button__close,
.menu-is-open .menu-button__open {
  display: none;
}

.menu-is-open .menu-button__close {
  display: block;
}

/* While the drawer is open the button stays visible on top of it, so it can
   be used to close the menu again (the drawer is in the same layer) */
.menu-is-open .menu-button {
  position: relative;
  z-index: 60;
}

/* --- Navigation: mobile drawer (default) -------------------------------- */

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: min(80%, 360px);
  height: 100%;
  overflow-y: auto;
  padding: 64px 10px 24px;
  background: var(--color-white);
  color: var(--color-text);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.site-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease;
}

.site-nav__list,
.site-nav__submenu {
  list-style: none;
}

.site-nav__link {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.site-nav__link:hover {
  background: #f3f3f3;
}

/* Group label without its own page ("Thema reizen") */
.site-nav__label {
  cursor: default;
}

.site-nav__submenu {
  margin: 5px 0 0;
  padding-left: 15px;
}

.site-nav__submenu a {
  display: block;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
}

.site-nav__submenu a:hover {
  background: #eaeaea;
}

/* Blurred white layer behind the open mobile menu; a click on it closes the menu */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  cursor: pointer;
}

/* --- Navigation: desktop bar --------------------------------------------- */

@media (min-width: 1000px) {
  .menu-button,
  .nav-backdrop {
    display: none;
  }

  .site-nav {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0;
    background: none;
    color: var(--color-white);
    transform: none;
    visibility: visible;
    transition: none;
  }

  /* The logo keeps its size; the menu takes the space that is left */
  .topbar__logo {
    flex-shrink: 0;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* Each menu item stays on one line */
  .site-nav__link {
    padding: 10px 12px;
    white-space: nowrap;
  }

  .site-nav__link:hover {
    background: none;
    color: #dadada;
  }

  /* The last item ("Contact") is drawn as an outlined button */
  .site-nav__item:last-child .site-nav__link {
    padding: 10px 18px;
    border: 1px solid var(--color-white);
    border-radius: var(--radius);
  }

  .site-nav__item:last-child .site-nav__link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
  }

  /* Dropdown under "Onze reizen" / "Thema reizen" */
  .site-nav__group {
    position: relative;
  }

  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: none;
    min-width: max-content;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    background: var(--color-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: #333333;
  }

  .site-nav__group:hover .site-nav__submenu,
  .site-nav__group:focus-within .site-nav__submenu {
    display: block;
  }

  .site-nav__submenu a {
    padding: 10px 15px;
  }

  .site-nav__submenu a:hover {
    background: #f3f3f3;
  }
}

/* More room between the menu items once the screen is wide enough */
@media (min-width: 1200px) {
  .site-nav__list {
    gap: 32px;
  }

  .site-nav__link {
    padding: 10px 15px;
  }
}

/* --- Title in the middle of the hero ------------------------------------- */

.hero__text {
  position: relative;
  z-index: 3;
  max-width: var(--max-width);
  margin: 104px auto 0;
  padding-inline: var(--gutter);
  text-align: center;
  transition: opacity 1s;
}

/* The h1 holds the title and the subtitle, so search engines read both
   ("8-daagse Groepsrondreis: Lente in Macedonië"); it looks the same as two lines. */
.hero__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.hero__heading .hero__title,
.hero__heading .hero__subtitle {
  display: block;
}

.hero__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(80px, 10vw + 40px, 180px);
  font-weight: 400;
  line-height: 0.75;
}

.hero__subtitle {
  margin: 16px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

/* Home page: the subtitle sits closer to the title */
.hero__subtitle--close {
  margin-top: 0;
}

@media (min-width: 600px) {
  .hero__text {
    margin-top: 88px;
  }
}

/* When the gallery is open, the title and menu step aside */
.hero.gallery-is-open .topbar,
.hero.gallery-is-open .hero__text {
  opacity: 0;
  pointer-events: none;
}


/* 8. Photo gallery inside the hero
   --------------------------------------------------------------------------
   Closed: a small round preview with a dashed ring at the bottom left.
   Open:   the photos fill the whole hero, with previous/next/close buttons.
   The photo box is always as big as the hero. Closed, it is scaled down into
   the circle (so most of the photo shows, small); opening scales it up while
   its round mask grows, so the circle stays round until it fills the hero.
   ========================================================================== */

.gallery {
  /* Centre of the round preview, measured inside the 1200px content column */
  --preview-x: max(112px, calc(50% - var(--max-width) / 2 + 112px));
  --preview-y: calc(100% - 205px);
  --preview-radius: 87px;
  /* How small the hero-sized photo is drawn inside the closed circle. The
     circle, before scaling (radius / scale), must fit inside the hero:
     348px on phones, 544px from 600px wide (the hero is at least 560px tall) */
  --preview-scale: 0.5;

  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.gallery__slides {
  position: absolute;
  inset: 0;
  background: #222222;
  /* The mask is drawn before scaling, so divide the radius by the scale */
  clip-path: circle(calc(var(--preview-radius) / var(--preview-scale)) at 50% 50%);
  transform:
    translate(calc(var(--preview-x) - 50%), calc(var(--preview-y) - 50%))
    scale(var(--preview-scale));
  /* Closing: the mask shrinks to a circle first, then the circle flies back */
  transition:
    clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.6, 0, 0.3, 1) 0.15s;
}

.gallery.is-open .gallery__slides {
  /* 72% reaches the corners (100% is half the diagonal divided by 0.71) */
  clip-path: circle(72% at 50% 50%);
  transform: none;
  pointer-events: auto;
  /* Opening is closing played backwards: the circle flies to the middle and
     grows (still round), then the mask opens up. Same durations and overlap;
     each curve is the closing curve mirrored. */
  transition:
    transform 0.7s cubic-bezier(0.7, 0, 0.4, 1),
    clip-path 0.6s cubic-bezier(0.8, 0, 0.6, 1) 0.25s;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}

.gallery__slide.is-active {
  opacity: 1;
}

/* Invisible button on top of the round preview that opens the gallery */
.gallery__open {
  position: absolute;
  top: calc(var(--preview-y) - var(--preview-radius));
  left: calc(var(--preview-x) - var(--preview-radius));
  width: calc(var(--preview-radius) * 2);
  height: calc(var(--preview-radius) * 2);
  padding: 0;
  border: 3px dashed var(--color-white);
  border-radius: 50%;
  background: none;
  cursor: zoom-in;
  pointer-events: auto;
  transition: opacity 0.3s;
}

.gallery__hint {
  position: absolute;
  top: calc(var(--preview-y) - 28px);
  left: calc(var(--preview-x) + var(--preview-radius) + 22px);
  /* 176px, or less when the screen is too narrow for that */
  width: min(176px, calc(100% - var(--preview-x) - var(--preview-radius) - 22px - var(--gutter)));
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  transition: opacity 0.3s;
}

@media (min-width: 600px) {
  .gallery {
    --preview-scale: 0.32;
  }

  .gallery__hint {
    font-size: 18px;
  }
}

/* Ring and hint come back only once the closing circle has landed */
.gallery__open,
.gallery__hint {
  transition: opacity 0.3s 0.7s;
}

.gallery.is-open .gallery__open,
.gallery.is-open .gallery__hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Close / previous / next, only visible while open */
.gallery__controls {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
}

.gallery.is-open .gallery__controls {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s 0.6s;
}

.gallery__button {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-shadow: 0 4px 23px rgba(0, 0, 0, 0.21);
  cursor: pointer;
  pointer-events: auto;
}

.gallery__button img {
  width: 64px;
  height: 64px;
}

/* Dark see-through pill, so the white text stays readable on light photos
   (white on 55% black over pure white is still about 4.8:1 contrast; lower
   than 55% fails WCAG AA) */
.gallery__button--close {
  top: 80px;
  right: 30px;
  gap: 4px;
  padding: 5px 10px 5px 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.2s;
}

.gallery__button--close:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* The cross fills about half of its file, so 32px shows an 18px cross */
.gallery__button--close img {
  width: 32px;
  height: 32px;
}

.gallery__button--previous {
  top: 50%;
  left: 20px;
}

.gallery__button--next {
  top: 50%;
  right: 20px;
}

/* The arrow icon points left; turn it around for "next" */
.gallery__button--next img {
  transform: rotate(180deg);
}

@media (min-width: 900px) {
  .gallery__button--close {
    right: 100px;
  }

  .gallery__button--previous {
    left: 100px;
  }

  .gallery__button--next {
    right: 100px;
  }
}


/* 9. Intro block (title + text + checklist)
   ========================================================================== */

.intro__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  margin-top: 40px;
}

.intro__text {
  max-width: 640px;
}

.intro__aside {
  max-width: 420px;
}

/* Intro made of short headed lists ("Voor wie is deze reis?" on Onze reizen):
   small bold headings, and lines with a short dash in front; a wrapped line
   lines up with the text, not with the dash */
.intro__text--lists h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 24px;
}

.intro__text--lists h3:not(:first-child) {
  margin-top: 40px;
}

.intro__text--lists ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.intro__text--lists li {
  position: relative;
  padding-block: 4px;
  padding-left: 18px;
}

/* Small, light dot as bullet: there to guide the eye, not to stand out */
.intro__text--lists li::before {
  content: "";
  position: absolute;
  top: 15px;                      /* middle of the lower-case letters */
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 40%, transparent);
}

/* Centred variant on the home page */
.intro--centered {
  max-width: 720px;
  text-align: center;
}

.intro--centered .subtitle {
  margin: 24px 0;
  line-height: 40px;
}

@media (min-width: 1100px) {
  .intro__text {
    padding-right: 40px;
  }
}


/* 10. Checklist (green tick / red cross before each line)
   ========================================================================== */

/* In the page files a checklist is a <div> around a list typed in the admin. */
.checklist,
.checklist ul {
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 4px;
}

.checklist li::before {
  content: "";
  flex: none;
  width: 17px;
  height: 13px;
  background: url("../img/icons/checkmark.svg") no-repeat center / contain;
}

.checklist--excluded li::before {
  width: 17px;
  height: 17px;
  background-image: url("../img/icons/cross.svg");
}


/* 11. Home: photo fan + highlights
   --------------------------------------------------------------------------
   Three photos lie on top of each other. When they scroll into view, the
   left and right photo fan out (site.js adds .is-fanned).
   ========================================================================== */

.photo-fan {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  margin-top: 30px;
  overflow: hidden;
}

/* Cut off only at the sides (no sideways scrolling on phones), so the
   tilted corners of the fanned-out photos are never cut off at the bottom */
@supports (overflow: clip) {
  .photo-fan {
    overflow-x: clip;
    overflow-y: visible;
  }
}

.photo-fan__photo {
  position: absolute;
  width: 180px;
  transition: transform 2s ease;
}

.photo-fan__photo--middle {
  z-index: 2;
}

.photo-fan.is-fanned .photo-fan__photo--left {
  transform: translate(-120px, 20px) rotate(-10deg);
}

.photo-fan.is-fanned .photo-fan__photo--right {
  transform: translate(120px, 20px) rotate(10deg);
}

.highlights {
  position: relative;
  margin: -140px var(--gutter) 0;
  padding: 200px 0 64px;
  border-radius: var(--radius);
  background: var(--color-sand);
}

.highlights__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 40px 60px;               /* rows, columns */
  list-style: none;
}

.highlights__item {
  flex: 1 0 100%;                 /* one per row on phones, two from 600px */
  max-width: 400px;
  text-align: center;
}

.highlights__item img {
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
}

.highlights__item h3 {
  margin: 0;
}

.highlights__quote {
  align-self: end;
  margin: 0;
  padding-bottom: 10px;
  color: var(--color-red);
  font-size: 24px;
  font-style: italic;
  font-weight: 600;
  line-height: 29px;
  text-align: left;
}

/* Extra room between the sand highlights block and "Onze reizen" below it */
.highlights + .section {
  margin-top: 96px;
}

@media (min-width: 400px) {
  .highlights__item {
    padding-inline: 16px;
  }
}

@media (min-width: 600px) {
  .highlights__item {
    flex-basis: 40%;
  }
}

@media (min-width: 800px) {
  .photo-fan {
    height: 600px;
    margin-top: -50px;
  }

  .photo-fan__photo {
    width: 240px;
  }

  .photo-fan.is-fanned .photo-fan__photo--left {
    transform: translate(-200px, 25px) rotate(-10deg);
  }

  .photo-fan.is-fanned .photo-fan__photo--right {
    transform: translate(200px, 25px) rotate(10deg);
  }

  .highlights {
    margin-top: -250px;
  }

  .highlights__list {
    gap: 56px 110px;
  }
}


/* 12. Trip cards
   ========================================================================== */

.trip-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  list-style: none;
}

.trip-card {
  display: flex;
  flex-direction: column;
  width: 368px;
  max-width: 100%;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--color-sand);
}

/* All card photos get the same shape, so the cards line up */
.trip-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 24px;
  border-radius: var(--radius);
  object-fit: cover;
}

.trip-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
}

.trip-card__subtitle {
  margin: 0 0 16px;
  font-weight: 600;
}

.trip-card__subtitle:empty {
  display: none;
}

.trip-card__icons {
  display: flex;
  gap: 12px;
  margin: auto 0 12px;
  padding-top: 24px;
  list-style: none;
}

.trip-card__price {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.trip-card .button {
  align-self: flex-start;
}

/* Wide card ("Reis op maat"): as wide as the row of cards above it.
   Below 808px one card wide, from 808px two (368 + 24 + 368), both stacked
   like a normal card with the photo on top; from 1200px three cards wide,
   with text left and photo right. */
@media (min-width: 808px) {
  .trip-card--wide {
    width: 760px;
  }
}

.trip-card--wide .trip-card__media {
  order: -1;
}

.trip-card--wide .trip-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.trip-card--wide .trip-card__subtitle {
  font-weight: 400;
  margin-bottom: 24px;
}

.trip-card--wide .trip-card__price {
  margin: 40px 0 8px;
}

/* The photo is a collage: show all of it, at its own shape */
.trip-card--wide .trip-card__image {
  aspect-ratio: 640 / 458;
}

@media (min-width: 1200px) {
  .trip-card--wide {
    width: 1152px;
    flex-direction: row;
    gap: 40px;
  }

  .trip-card--wide .trip-card__media {
    order: 0;
  }

  .trip-card--wide .trip-card__body,
  .trip-card--wide .trip-card__media {
    flex: 1;
    min-width: 0;
  }

  .trip-card--wide .trip-card__image {
    margin: 0;
  }
}


/* 13. Agenda (departure dates)
   ========================================================================== */

.agenda {
  margin: 64px 0 56px;
  list-style: none;
}

/* Departure slots left empty in the admin (also hidden without JavaScript). */
.agenda li:has(> [data-trip-start=""]) {
  display: none;
}

.agenda__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
}

a.agenda__item:hover {
  background: var(--color-hover);
}

/* Fully booked trips are shown, but faded and not clickable */
.agenda__item--full {
  opacity: 0.5;
}

.agenda__info {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}

.agenda__date {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
}

.agenda__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.agenda__action img {
  width: 24px;
  height: 24px;
}

/* An empty spacer keeps "Volgeboekt" in line with the other labels */
.agenda__action-spacer {
  width: 24px;
}

/* All labels at least as wide as "Beschikbaar", text centred, so the column
   lines up; a longer label ("Nog enkele plaatsen") simply grows */
.status {
  display: inline-block;
  box-sizing: border-box;
  min-width: 8em;
  text-align: center;
  padding: 8px 11px;
  border-radius: 4px;
  font-weight: 600;
}

.status--available {
  background: var(--color-status-available-bg);
  color: var(--color-status-available-text);
}

.status--full {
  background: var(--color-status-full-bg);
  color: var(--color-status-full-text);
}

/* "Nog enkele plaatsen": still bookable, shown in the same warm colour as "Onderweg" */
.status--few {
  background: var(--color-status-underway-bg);
  color: var(--color-status-underway-text);
}

/* Set by site.js from the trip's dates: "Onderweg" and "Afgelopen" */
.status--underway {
  background: var(--color-status-underway-bg);
  color: var(--color-status-underway-text);
}

.status--past {
  background: var(--color-status-past-bg);
  color: var(--color-status-past-text);
}

@media (min-width: 950px) {
  .agenda__item {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  .agenda__info {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    padding-top: 0;
  }

  .agenda__date {
    min-width: 220px;
  }

  .agenda__action {
    justify-content: flex-end;
    min-width: 200px;
  }
}


/* 14. Tabs ("Jouw reis" / "Reisprogramma")
   ========================================================================== */

.tabs {
  margin: 60px var(--gutter) 0;
}

.tabs__list {
  display: flex;
  gap: 8px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.tabs__tab {
  padding: 8px 16px;
  border: 2px solid var(--color-sand);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  position: relative;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 29px;
  cursor: pointer;
}

.tabs__tab[aria-selected="true"],
.tabs__tab--label {
  background: var(--color-sand);
}

/* When a tab sits right at the panel's left edge, the panel's round corner
   left a curved gap under it; this sand square fills it, so the tab's edge
   runs straight into the panel (where the panel is already sand underneath,
   it can't be seen) */
.tabs__tab::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -2px;
  width: var(--radius);
  height: var(--radius);
  background: var(--color-sand);
}

/* A single tab that is only a label ("Type reizen"), not a button */
.tabs__tab--label {
  margin: 0;
  cursor: default;
}

.tabs__panels {
  padding: 24px 16px 40px;
  border-radius: var(--radius);
  background: var(--color-sand);
}

.tabs__panel {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* "Wat is inbegrepen" / "Wat is niet inbegrepen" side by side */
.included {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 24px;
}

.included > div {
  max-width: 560px;
}

@media (min-width: 600px) {
  .tabs__list {
    gap: 30px;
  }

  .tabs__tab {
    font-size: 24px;
  }

  .tabs__panels {
    padding: 34px 48px 64px;
  }
}


/* 15. Day-by-day programme
   ========================================================================== */

.route {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.route__text {
  max-width: 500px;
}

.route__map {
  width: 100%;
  max-width: 560px;
}

.day-program {
  list-style: none;
}

.day {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.day__image {
  width: 220px;
  aspect-ratio: 220 / 260;
  object-fit: cover;
}

.day__text {
  max-width: 740px;
}

.day__title {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

@media (min-width: 600px) {
  .day {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .day__image {
    flex: none;
  }
}


/* 16. Booking block + forms
   ========================================================================== */

.booking {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px 0;
  margin-block: 120px;
}

.booking__intro {
  max-width: 940px;
}

.booking__steps {
  margin: 30px 0 40px;
  padding-left: 1.4em;
  line-height: 2rem;
}

.booking__steps ol {
  margin: 0;
  padding: 0;
}

.booking__steps li + li {
  margin-top: 1rem;
}

.booking__form {
  width: 100%;
  max-width: 560px;
}

.booking__contact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 30px;
}

/* Each column is one text field; an empty line in it shows as one empty line. */
.booking__contact-details > div {
  margin-bottom: 16px;
}

.booking__contact-details p {
  margin: 0;
}

.booking__contact-details p + p {
  margin-top: 1lh;
}

@media (min-width: 1100px) {
  .booking__intro {
    max-width: 480px;
    padding-right: 60px;
  }
}

/* --- Contact form --------------------------------------------------------- */

.form__label {
  display: block;
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.form__label:first-child {
  margin-top: 0;
}

.form__field {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--color-field);
  color: inherit;
  font: inherit;
}

/* Dropdowns: our own chevron instead of the browser's (Safari draws a small
   one low in the field), centred, with room so long dates don't run under it */
select.form__field {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background: var(--color-field) url("../img/icons/chevron-down.svg") no-repeat right 12px center / 20px 20px;
  cursor: pointer;
}

textarea.form__field {
  height: 145px;
  padding-top: 8px;
  resize: vertical;
}

.form__consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.form__consent input {
  flex: none;
}

/* Spam trap: hidden from people, bots tend to fill it in */
.form__trap {
  display: none;
}

.form .button {
  margin-top: 16px;
}

/* "(optioneel)" after a label: quieter than the label itself */
.form__optional {
  font-weight: 400;
}

/* A field with an error gets a red edge; the text under it says what's wrong */
.form__field[aria-invalid="true"],
.form__consent input[aria-invalid="true"] {
  border-color: var(--color-red);
  outline-color: var(--color-red);
}

.form__error {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--color-red);   /* 6.2:1 on white */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Warning icon (circle with "!") in front, so the error doesn't rely on
   colour alone */
.form__error::before,
.form__message[data-state="error"]::before,
.form__message[data-state="success"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 20px;
  background: url("../img/icons/error.svg") no-repeat center / 16px 16px;
}

/* The message box after sending: a slightly bigger icon */
.form__message[data-state="error"]::before {
  width: 18px;
  background-size: 18px 18px;
}

/* Answer under the button after sending */
.form__message {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-weight: 600;
}

.form__message:empty {
  display: none;
}

.form__message[data-state="sending"] {
  padding: 0;
  font-weight: 400;
}

.form__message[data-state="error"] {
  background: var(--color-status-full-bg);
  color: var(--color-status-full-text);
}

.form__message[data-state="success"] {
  background: var(--color-status-available-bg);
  color: var(--color-text);   /* the green text was only 4.2:1 here */
}

.form__message[data-state="success"]::before {
  width: 16px;
  background-image: url("../img/icons/checkmark.svg");
  background-size: 15px 12px;
}


/* 17. Testimonials slider
   --------------------------------------------------------------------------
   Full-width photo with a frosted card in the middle. Previous/next fade
   both the photo and the quote (site.js).
   ========================================================================== */

.testimonials {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 832px;
  padding: 64px var(--gutter);
  overflow: hidden;
}

.testimonials__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 3s;
}

.testimonials__photo.is-active {
  z-index: 1;
  opacity: 1;
}

.testimonials__card {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;          /* arrows in the vertical middle */
  gap: 4px;
  width: 100%;
  max-width: 680px;
  padding: 32px 4px;
  border-radius: var(--radius);
  /* 80% white: dark text stays above 4.5:1 contrast on every photo */
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (min-width: 600px) {
  .testimonials__card {
    gap: 12px;
    padding: 48px 12px;
  }
}

/* Only the current quote is shown, so the card hugs it: short quotes get a
   short card. The section around it keeps its height, so the page below does
   not move. Each new quote fades in. */
.testimonials__content {
  flex: 1;
  min-width: 0;
}

.testimonials__heading {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 26px;
  text-transform: uppercase;
}

.testimonial {
  margin: 0;
  animation: testimonial-in 0.6s ease;
}

@keyframes testimonial-in {
  from {
    opacity: 0;
  }
}

.testimonial__quote {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.testimonial__name {
  margin-top: 24px;
  font-family: var(--font-script);
  font-size: 48px;
  line-height: 48px;
}

@media (min-width: 600px) {
  .testimonial__name {
    font-size: 60px;
    line-height: 56px;
  }
}

.testimonials__button {
  flex: none;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.testimonials__button img {
  width: 28px;
  height: 28px;
}

.testimonials__button--next img {
  transform: rotate(180deg);
}

/* Painted white edge at the bottom, like under the hero */
.testimonials::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 3;
  width: 100%;
  height: var(--painted-edge-height);
  /* Solid white under the last pixels, as under the hero */
  background:
    url("../img/brand/painted-edge.webp") repeat-x center bottom,
    linear-gradient(var(--color-white), var(--color-white)) center bottom / 100% 6px no-repeat;
}




/* 18. Text pages and split layouts
   ========================================================================== */

/* Long running text (info pages, privacy statement, terms) */
.prose {
  max-width: 940px;
}

.prose h3 {
  margin-top: 56px;
}

.prose h4 {
  margin-top: 32px;
}

.prose ul {
  margin: 0 0 16px;
  padding-left: 1.4em;
}

/* Text next to a photo; stacks on small screens */
.split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.split--top {
  align-items: flex-start;
}

.split__text {
  max-width: 610px;
}

.split__image {
  width: 100%;
  max-width: 450px;
}

/* Signature under "Ons verhaal" */
.signature {
  margin: 50px 0 118px;
  font-family: var(--font-script);
  font-size: 100px;
  line-height: 60px;
}

/* Questions and answers on "Over Noord-Macedonië" */
.faq dt {
  margin-top: 24px;
  text-decoration: underline;
}

.faq dd {
  margin: 0;
}


/* 19. Footer
   ========================================================================== */

.site-footer {
  position: relative;
}

/* Painted edge with a soft shadow above the footer (on pages without slider) */
.site-footer--edge::before {
  content: "";
  display: block;
  height: var(--painted-edge-height);
  margin-top: 60px;
  background: url("../img/brand/painted-edge-shadow.webp") repeat-x center;
}

.site-footer__columns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.site-footer__logo {
  width: 174px;
}

.site-footer h3 {
  margin: 16px 0 8px;
}

.site-footer ul {
  list-style: none;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer address {
  font-style: normal;
}

/* An empty line in the admin starts a new paragraph: shown as one empty line,
   like the line breaks of the old hand-written pages. */
.site-footer address p {
  margin: 0;
}

.site-footer address p + p {
  margin-top: 1lh;
}

.social {
  display: flex;
  gap: 8px;
}

.social img {
  width: 32px;
  height: 32px;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.site-footer__partners-block {
  align-self: stretch;
}

.site-footer__partners-block h4 {
  margin: 0 0 20px;
}

.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 20px;
  margin-bottom: 16px;
}

.partners img {
  width: auto;
  height: 60px;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin: 0;
  padding-bottom: 20px;
  font-size: 12px;
  list-style: none;
}

.legal a {
  text-decoration: underline;
}

.site-footer__car {
  width: 100%;
  max-width: 420px;
}

@media (min-width: 630px) {
  .site-footer__columns {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .site-footer h3 {
    margin-top: 0;
  }
}

@media (min-width: 900px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  .site-footer__partners-block {
    align-self: auto;
  }
}


/* 20. Fade in while scrolling
   --------------------------------------------------------------------------
   site.js marks parts with data-reveal="waiting" and switches them to
   "shown" when they scroll into view (list in site.js, section 11).
   ========================================================================== */

[data-reveal] {
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
}

[data-reveal="waiting"] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}

@media print {
  [data-reveal="waiting"] {
    opacity: 1;
    transform: none;
  }
}


/* 21. Reduced motion: switch off the decorative animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}