/* Dropuut — Tenthuisje verhuur. Plain CSS, no build step. */

:root {
  --color-bg: #f5f9f8;          /* cool sea-mist white, page body */
  --color-surface: #ffffff;
  --color-text: #1e3a45;        /* deep sea, primary text */
  --color-text-muted: #55707a;  /* slate-blue, secondary text */
  /* Trying the Vlieland flag's own colors (green + white) instead of the
     North Sea blue / light dune yellow below — kept here, commented, in
     case the owner decides to switch back:
       --color-primary: #2e6478;  North Sea blue, links/buttons
       --color-primary-dark: #1e4a5a;
       --color-secondary: #1e3a45; same dark blue, footer
       --color-accent: #f4e7b8;   light dune-grass yellow, hero band
     --color-accent-dark stays its original dune-sand gold below — it
     represents actual dunes in the .hero-wave shape, not the brand
     blue/yellow being swapped out, so it wasn't part of this change. */
  --color-primary: #1b7a3d;     /* Vlieland flag green, links/buttons */
  --color-primary-dark: #125c2e;
  --color-secondary: #163a22;   /* dark green, footer */
  --color-accent: #ffffff;      /* Vlieland flag white, hero band */
  --color-accent-dark: #d3ac3e; /* dark dune yellow, the hero-wave shape */
  --color-border: #d8e2e0;
  --color-free: #2e5b41;        /* marram green */
  --color-busy: #9c4a2c;        /* driftwood coral */
  --font-heading: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Brush/marker feel like the real logo, for the brand title only —
     system handwriting fonts, no webfont/CDN needed. */
  --font-brand: 'Marker Felt', 'Bradley Hand', 'Noteworthy', 'Segoe Print', 'Chalkboard SE', 'Comic Sans MS', cursive;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(30, 58, 69, 0.08);
  --max-width: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Sticky footer: on short pages (little body text, e.g. stortemelk.html)
   the footer used to end wherever the content happened to stop, leaving
   bare page background below it instead of sitting at the bottom of the
   viewport. body becomes a full-viewport-height flex column with <main>
   (not the header/footer include-divs) absorbing the extra space. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
}

body > main {
  flex: 1 0 auto;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

/* Subheadings that should read as plain bold text, not the decorative
   serif heading font — used on privacyverklaring.html. */
.plain-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
}

p { margin: 0 0 1em; }

a {
  color: var(--color-primary);
}

img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

/* Header / nav */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__brand {
  font-size: 1.5rem;
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* Brand title only (nav logo) — not used for any other
   heading on the site. */
.brand-title {
  font-family: var(--font-brand);
  font-style: normal;
  font-weight: normal;
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.site-header__toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--color-text);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.96rem;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--color-primary);
}

.site-nav__cta {
  background: var(--color-primary);
  color: #fff !important;
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

.site-nav__cta:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 780px) {
  .site-header__toggle {
    display: flex;
  }
  .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: 0.75rem;
  }
  .site-nav--open {
    display: flex;
  }
  .site-header__inner {
    flex-wrap: wrap;
  }
}

/* Hero */

.hero {
  /* Full-bleed background — deliberately NOT combined with .container on
     the same element, so the accent color fills the whole viewport width
     (matching .hero-wave below it) instead of stopping at --max-width and
     leaving a mismatched .container-colored gap on wide/ultrawide screens.
     The actual content sits in a nested .container div instead. */
  background: var(--color-accent);
  text-align: center;
}

.hero__lead {
  max-width: 640px;
  margin: 0 auto 1.5rem;
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

/* flex-wrap:nowrap + flex:1 on the buttons themselves (not the container)
   keeps the two CTAs side by side at any width, including mobile — text
   wraps inside a button rather than the buttons stacking. */
.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.9rem;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.hero__actions .button {
  flex: 0 1 auto;
  text-align: center;
}

@media (max-width: 480px) {
  .hero__actions {
    gap: 0.5rem;
  }
  .hero__actions .button {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }
}

/* Coastal wave divider under the hero band: dark dune ridge breaking into
   sea (blue) — a thin blue waterline right at the seam. Two-tone dune:
   light yellow above (open sky/grass), darker gold here (the dune itself).
   Negative margin overlaps the bottom of .hero so its masked-away
   (transparent) parts reveal the hero's own background instead of the
   page background behind it — without the overlap this leaves a visible
   white gap at the seam. */
.hero-wave {
  position: relative;
  height: 56px;
  margin-top: -56px;
  background: var(--color-accent-dark);
  border-bottom: 3px solid var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,25 C850,50 1050,5 1200,30 L1200,60 L0,60 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,25 C850,50 1050,5 1200,30 L1200,60 L0,60 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Every page's hero shows one landscape photo (data-field-src, still a
   normal <img> so it stays editable through the CMS), inset with a side
   margin so the accent yellow frames it left/right (in addition to the
   letterboxing above --max-width and the .hero-wave below). Height is
   roughly a third of the viewport so there's still room left to read the
   page's own text above the fold on desktop. Startpagina omits the title
   (the site header already carries the brand name); every other page
   shows its H1 in a small card near the bottom of the photo. */
.hero--photo {
  overflow: hidden;
  height: clamp(170px, 24vh, 300px);
}

.hero--photo .container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.hero__bg-photo {
  /* width:88% (not left+right+width:auto) is deliberate: <img> is a
     replaced element, and replaced elements with width:auto size from
     their intrinsic aspect ratio rather than stretching to fill left/right
     — which silently ignored `right` and left the photo anchored to
     `left`, rendering it off-center. An explicit width keeps it centered
     regardless of each photo's own aspect ratio. */
  position: absolute;
  top: 0;
  left: 6%;
  width: 88%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  z-index: 0;
}

.hero__photo-title {
  position: relative;
  z-index: 1;
  background: var(--color-accent);
  border-radius: var(--radius);
  padding: 0.6rem 1.5rem;
  margin: 0 8% 1.5rem 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 6px 24px rgba(30, 58, 69, 0.18);
}

/* Startpagina's title is a full sentence rather than a short page name —
   smaller than the site-wide h1 size so it doesn't dominate the hero or
   wrap onto three lines. */
/* Startpagina only: instead of a title floating on top of the photo (too
   big a block over a full sentence-length title), a solid green bar below
   the photo. It comes right after .hero-wave (the dune transition), not
   before it, so the green expands the hero band downward past the dunes
   rather than sitting between the photo and the dunes — .hero-wave's own
   -56px margin-top still overlaps the photo above it exactly like on
   every other page. Padding is just enough to fit one line of text. */
.hero__title-bar {
  background: var(--color-primary);
  padding: 0.6rem 1.25rem;
  text-align: center;
}

.hero__title-bar-text {
  margin: 0;
  color: #fff;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
}

.button {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.button:hover {
  background: var(--color-primary-dark);
}

.button--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.button--secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Sections */

.section {
  /* See .hero above: longhand only, .section is combined with .container
     on the same element and both must not fight over the padding shorthand. */
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.section--muted {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Prijzen: 6 months forced to 2 rows of 3 on desktop instead of
   auto-fit's variable column count. */
.card-grid--prices {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 780px) {
  .card-grid--prices {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}

/* huisje-drop-ut.html's "Foto's" section, see content/huisje-drop-ut.json.
   .photo-gallery__grid (photos.items, the full 25-photo series) stays in
   the DOM but hidden — it's only there as the data source for the
   lightbox slideshow (assets/js/gallery.js reads every <img> in it). What
   visitors actually see is .photo-teaser: the first three photos
   (photos.items[0..2], each its own clickable thumbnail opening the
   lightbox at that index) plus two same-size CTA buttons — "Toon volledige
   foto show" (opens the lightbox at photo 1) and a de-emphasized
   secondary-style link to the Google Photos album. */
.photo-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.photo-teaser__photos {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.photo-teaser__photo {
  display: block;
  width: 150px;
  max-width: 100%;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.photo-teaser__photo img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  margin: 0;
  border-radius: var(--radius);
}

.photo-teaser__photo:hover img {
  opacity: 0.88;
}

/* Both CTAs share a fixed width/height (rather than sizing to their own
   text) so "Toon volledige foto show" and "Ga naar Google Photos
   impressie" — different lengths — read as one deliberate pair, not a
   mismatched button and a much longer one. */
.photo-teaser__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.photo-teaser__actions .button {
  width: 220px;
  max-width: 100%;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 1rem;
}

/* Lightbox — full-size slideshow for the photo series above. Hidden by
   default via the `hidden` attribute; assets/js/gallery.js toggles it and
   swaps .lightbox__img's src/alt/title to step through photos.items. */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 3rem 1rem;
}

.lightbox[hidden] {
  display: none;
}

/* Image + caption grouped together and centered as one unit, so the
   caption sits in normal flow right below the photo instead of floating
   over it (it used to be absolutely positioned against the whole
   overlay, which put it on top of the image's own bottom edge). Explicit
   vh-based max-height (not a %, which wouldn't reliably resolve against
   an auto-height flex-item parent) leaves room for the caption below. */
.lightbox__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 90vh;
  min-height: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(90vh - 2.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox__caption {
  margin: 0.75rem 0 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  font-size: 0.95rem;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  border: none;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: #fff;
}

.lightbox__close {
  top: 1rem;
  right: 1rem;
}

.lightbox__prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 480px) {
  .lightbox__prev,
  .lightbox__next {
    width: 38px;
    height: 38px;
  }
}

/* Pricing */

.price-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.price-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.price-list li:last-child {
  border-bottom: none;
}

.price-list li span:first-child {
  color: var(--color-text-muted);
}

.price-list li span:last-child {
  font-weight: 600;
}

/* Explains the Weekend/Midweek/Week/ITGWO shorthand used in the price
   cards above, once, instead of repeating "(vrijdag t/m maandag)" etc.
   inline on every card it applies to. */
.price-notes {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Link list — 2-3 text columns on wider screens so all ~19 links (plus
   footer) fit on one screen instead of one long single-column list. */

.link-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  column-gap: 2.5rem;
}

@media (min-width: 640px) {
  .link-list {
    column-count: 2;
  }
}

@media (min-width: 980px) {
  .link-list {
    column-count: 3;
  }
}

.link-list li {
  border-bottom: 1px solid var(--color-border);
  break-inside: avoid;
}

.link-list li:last-child {
  border-bottom: none;
}

.link-list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--color-text);
}

.link-list a:hover {
  color: var(--color-primary);
}

.link-list a::before {
  content: "→";
  color: var(--color-primary);
}

/* Calendar */

.calendar {
  margin-top: 1.5rem;
}

/* Several months shown at once (assets/js/calendar.js), instead of paging
   one big month at a time — auto-fit columns mean each month (and so each
   day cell within its 7-column grid) is naturally much smaller than a
   single month stretched across the whole container used to be. */
.calendar__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}

@media (max-width: 780px) {
  .calendar__months {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.calendar__month-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0 0 0.5rem;
  text-transform: capitalize;
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar__weekday {
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  padding: 0.15rem 0;
}

.calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.calendar__day--empty {
  background: transparent;
  border: none;
}

.calendar__day--free {
  background: rgba(75, 122, 75, 0.12);
  color: var(--color-free);
}

.calendar__day--busy {
  background: rgba(181, 84, 31, 0.14);
  color: var(--color-busy);
  text-decoration: line-through;
}

.calendar__day--past {
  opacity: 0.4;
}

.calendar__legend {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.calendar__legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.calendar__legend-swatch--free { background: var(--color-free); }
.calendar__legend-swatch--busy { background: var(--color-busy); }

.calendar__status {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Forms */

/* .form is a flex column, align-items:flex-start, so the submit button
   sizes to its own content instead of stretching full width (the default
   for a plain block/grid layout) — .form__columns is the one child that
   opts back into full width via align-self. */
.form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.form__columns {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form input,
.form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  background: var(--color-surface);
}

.form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Desktop: two columns (naam/email/telefoon, onderwerp/bericht), and
   within each field a label to the left instead of stacked above it.
   Mobile keeps a single stacked column — both a two-column layout and a
   fixed-width label column get cramped on narrow screens. */
@media (min-width: 781px) {
  .form__columns {
    flex-direction: row;
    gap: 2rem;
  }
  .form__col {
    flex: 1 1 0;
  }
  /* Naam/email/telefoon are short single-line inputs; onderwerp/bericht
     needs the room, especially the message textarea — give it more of the
     row so a longer message doesn't force excess scrolling to write. */
  .form__col:first-child {
    flex: 0 1 36%;
  }
  .form__col:last-child {
    flex: 1 1 64%;
  }
  .form__col > div {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .form__col > div:has(textarea) {
    align-items: flex-start;
  }
  .form label {
    width: 100px;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-top: 0.1rem;
    text-align: right;
  }
}

.form__status {
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  display: none;
}

.form__status--visible {
  display: block;
}

.form__status--success {
  background: rgba(75, 122, 75, 0.12);
  color: var(--color-free);
}

.form__status--error {
  background: rgba(181, 84, 31, 0.14);
  color: var(--color-busy);
}

/* Footer */

.site-footer {
  background: var(--color-secondary);
  color: #f3efe8;
  margin-top: 1.5rem;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.5rem;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

.site-footer p {
  margin: 0 0 0.35em;
}

.site-footer a {
  color: #f3efe8;
}

.site-footer__copy {
  color: rgba(243, 239, 232, 0.7);
}