/*
Theme Name: Lyts Gelok
Theme URI: https://www.lytsgelok.nl
Author: Lars Curfs
Description: Eigen maatwerkthema voor Lyts Gelok, een tiny house in Kollumersweach (Friesland). De bezoeker komt binnen via een dronevlucht vanaf het weiland het huisje in, en landt daarna in de homepage met foto's en een boekingsaanvraag.
Version: 1.1
Text Domain: lyts-gelok
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Karla:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* -------------------------------------------------
   1. Design tokens
   Palet volgt het licht van de vlucht: buitenlucht boven het
   weiland, naar het warme licht binnen in het huisje.
------------------------------------------------- */
:root{
  --color-night:   #16241C;
  --color-meadow:  #33452E;
  --color-linen:   #F1EEDD;
  --color-ink:     #1B2119;
  --color-mist:    #93A79A;
  --color-dusk:    #E1A15C;
  --color-dusk-soft: rgba(225,161,92,0.16);
  --color-wood:    #7C4E30;
  --color-line:    rgba(241,238,221,0.16);
  --color-line-dark: rgba(27,33,25,0.12);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container-w: 1180px;
  --radius: 2px;
  --transition: 280ms cubic-bezier(.4,0,.2,1);

  /* wordt door JS gezet tijdens de vlucht: 0 = weiland, 1 = binnen */
  --flight: 0;
}

/* -------------------------------------------------
   2. Basis
------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-linen);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 0.5em; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
.container{ max-width: var(--container-w); margin:0 auto; padding:0 32px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--color-dusk);
  outline-offset: 3px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-dusk); display:inline-block; margin-bottom:14px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius: var(--radius);
  border:1px solid transparent;
  font-family: var(--font-body); font-weight:700; font-size:15px;
  cursor:pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary{ background: var(--color-dusk); color: var(--color-night); }
.btn-primary:hover{ transform: translateY(-2px); background:#eab179; }
.btn-outline{ border-color: currentColor; color: inherit; background:transparent; }
.btn-outline:hover{ background: var(--color-dusk-soft); }

/* -------------------------------------------------
   3. Horizonlijn (signatuur)
   Dezelfde lijn die tijdens de vlucht de voortgang aangeeft,
   keert terug als scheiding tussen de secties.
------------------------------------------------- */
.horizon{ position:relative; height:64px; overflow:hidden; }
.horizon::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background: linear-gradient(90deg, transparent, currentColor 15%, currentColor 85%, transparent);
  opacity:.35;
}
.horizon::after{
  content:""; position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background: currentColor; box-shadow:0 0 22px 4px currentColor; transform: translateY(-50%);
}
.horizon--dawn{ color: var(--color-wood); }
.horizon--dawn::after{ left:18%; }
.horizon--day{ color: var(--color-meadow); }
.horizon--day::after{ left:50%; }
.horizon--dusk{ color: var(--color-dusk); }
.horizon--dusk::after{ left:78%; }
.horizon--night{ color: var(--color-mist); }
.horizon--night::after{ left:92%; width:6px; height:6px; }

/* -------------------------------------------------
   4. Header
   Tijdens de vlucht buiten beeld; verschijnt bij de landing.
------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index:60;
  background: rgba(22,36,28,.92);
  backdrop-filter: blur(6px);
  color: var(--color-linen);
  border-bottom:1px solid var(--color-line);
  transition: transform var(--transition), opacity var(--transition);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-header.is-hidden{ transform: translateY(-100%); opacity:0; pointer-events:none; }

.site-title{ font-family: var(--font-display); font-size:22px; font-style:italic; font-weight:500; }
.site-title span{ font-style:normal; font-weight:600; color: var(--color-dusk); }
.main-nav ul{ display:flex; gap:32px; }
.main-nav a{
  font-size:14px; font-weight:500; padding:6px 2px;
  border-bottom:1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.main-nav a:hover{ border-color: var(--color-dusk); color: var(--color-dusk); }
.nav-toggle{ display:none; background:none; border:0; color: var(--color-linen); font-size:26px; cursor:pointer; }

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:fixed; inset:76px 0 0 0; background: var(--color-night);
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity var(--transition), transform var(--transition);
  }
  .main-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .main-nav ul{ flex-direction:column; padding:40px 32px; gap:22px; }
  .main-nav a{ font-size:20px; }
}

/* -------------------------------------------------
   5. De vlucht (hero)
   Standaard: gewone hero van 100vh met loopende video.
   Met JS (.is-flight): hoge scrollsectie waarin de video
   meeschuift met de scrollpositie — je vliegt naar binnen.
------------------------------------------------- */
.flight{
  position:relative;
  background: var(--color-night);
  color: var(--color-linen);
}
.flight-viewport{
  position:relative;
  height:100vh; height:100svh;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.flight.is-flight{ height:340vh; }
.flight.is-flight .flight-viewport{ position:sticky; top:0; }

.flight-media{ position:absolute; inset:0; z-index:0; }
.flight-media video,
.flight-media img{ width:100%; height:100%; object-fit:cover; }
.flight-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,28,21,.25) 0%, rgba(16,28,21,.15) 45%, rgba(16,28,21,.85) 100%);
}

/* Aanwijzing om te scrollen; verdwijnt zodra de vlucht begint */
.flight-hint{
  position:absolute; left:50%; bottom:34px; transform: translateX(-50%);
  z-index:3; text-align:center;
  font-family: var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color: rgba(241,238,221,.7);
  transition: opacity var(--transition);
}
.flight-hint .arrow{ display:block; margin-top:8px; animation: hintDrift 2.2s ease-in-out infinite; }
@keyframes hintDrift{ 0%,100%{ transform: translateY(0); opacity:.6; } 50%{ transform: translateY(6px); opacity:1; } }
.flight.is-landed .flight-hint{ opacity:0; }

/* Bijschriften onderweg: weiland -> erf -> binnen */
.flight-captions{
  position:absolute; left:0; right:0; top:50%; transform: translateY(-50%);
  z-index:2; text-align:center; pointer-events:none;
}
.flight-caption{
  position:absolute; left:0; right:0;
  font-family: var(--font-display); font-style:italic;
  font-size: clamp(24px, 3.4vw, 40px);
  color: var(--color-linen);
  opacity:0; transition: opacity 400ms ease;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.flight-caption.is-visible{ opacity:1; }

/* Titelblok: staat er direct bij een gewone hero, en verschijnt
   bij de vlucht pas als je binnen bent geland. */
.flight-content{
  position:relative; z-index:3;
  padding: 90px 0 84px;
  max-width:720px;
}
.flight.is-flight .flight-content{
  opacity:0; transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.flight.is-flight.is-landed .flight-content{ opacity:1; transform:none; }

.flight h1{ font-size: clamp(40px, 6vw, 68px); line-height:1.05; color: var(--color-linen); }
.flight h1 em{ color: var(--color-dusk); font-style:italic; }
.flight .lede{ font-size:19px; color: var(--color-mist); max-width:52ch; }
.flight-ctas{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }

/* Voortgang van de vlucht op de horizonlijn */
.flight-progress{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4;
  background: var(--color-line);
}
.flight-progress::after{
  content:""; position:absolute; top:50%; left: calc(var(--flight) * 100%);
  width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background: var(--color-dusk); box-shadow:0 0 18px 3px var(--color-dusk);
  transform: translateY(-50%);
}
.flight:not(.is-flight) .flight-progress{ display:none; }

/* -------------------------------------------------
   6. Secties
------------------------------------------------- */
.section{ padding:96px 0; }
.section--meadow{ background: var(--color-meadow); color: var(--color-linen); }
.section--linen{ background: var(--color-linen); color: var(--color-ink); }
.section--night{ background: var(--color-night); color: var(--color-linen); }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size: clamp(28px, 3.6vw, 40px); }

.story-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start; }
.story-copy p:first-of-type{
  font-family: var(--font-display); font-size:21px; font-style:italic; color: var(--color-wood);
}

/* Fotoplekken en galerij */
.photo-stack{ display:grid; gap:16px; }
.photo-slot{
  aspect-ratio:4/5;
  border:1px dashed var(--color-line-dark);
  background: repeating-linear-gradient(135deg, rgba(27,33,25,.05) 0 10px, rgba(27,33,25,.02) 10px 20px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: rgba(27,33,25,.55);
  font-family: var(--font-mono); font-size:12px; padding:16px;
}
.photo-slot.wide{ aspect-ratio:16/9; }
.section--meadow .photo-slot,
.section--night .photo-slot{
  border-color: var(--color-line);
  color: rgba(241,238,221,.55);
  background: repeating-linear-gradient(135deg, rgba(241,238,221,.05) 0 10px, rgba(241,238,221,.02) 10px 20px);
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap:14px;
}
.gallery-item{ overflow:hidden; border-radius: var(--radius); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform 600ms var(--transition); }
.gallery-item:hover img{ transform: scale(1.04); }
.gallery-item .photo-slot{ height:100%; aspect-ratio:auto; }
.gallery-item--tall{ grid-row: span 2; }
.gallery-item--wide{ grid-column: span 2; }

/* Feiten */
.facts-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:28px; }
.fact{ border-top:1px solid var(--color-line); padding-top:18px; }
.fact .num{ font-family: var(--font-mono); font-size:28px; color: var(--color-dusk); display:block; margin-bottom:6px; }
.fact .label{ font-size:14px; color: var(--color-mist); }

/* Omgeving */
.omgeving-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.route-item{ display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--color-line-dark); }
.route-item .time{ font-family: var(--font-mono); font-size:14px; color: var(--color-wood); min-width:72px; }
.route-item p{ margin:0; }

/* Extra's */
.addons-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:28px; }
.addon-card{
  background: rgba(241,238,221,.05);
  border:1px solid var(--color-line);
  border-radius: var(--radius);
  padding:32px;
  transition: border-color var(--transition), background var(--transition);
}
.addon-card:hover{ border-color: var(--color-dusk); background: rgba(225,161,92,.06); }
.addon-card h3{ font-size:22px; color: var(--color-linen); }
.addon-card .price{ font-family: var(--font-mono); font-size:14px; color: var(--color-dusk); display:block; margin-bottom:14px; }

/* -------------------------------------------------
   7. Boekingsaanvraag
------------------------------------------------- */
.booking-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap:56px; align-items:start; }
.booking-side p{ max-width:40ch; }
.booking-panel{
  background:#fff;
  border:1px solid var(--color-line-dark);
  border-radius: var(--radius);
  padding:40px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-family: var(--font-mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color: rgba(27,33,25,.6); margin-bottom:7px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%; padding:12px 14px;
  border:1px solid var(--color-line-dark);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size:16px; color: var(--color-ink);
  background:#fff;
}
.field textarea{ min-height:110px; resize:vertical; }

.checkbox-group{ display:grid; gap:10px; }
.checkbox{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border:1px solid var(--color-line-dark); border-radius: var(--radius);
  cursor:pointer; transition: border-color var(--transition), background var(--transition);
}
.checkbox:hover{ border-color: var(--color-dusk); background: var(--color-dusk-soft); }
.checkbox input{ margin-top:4px; accent-color: var(--color-wood); }
.checkbox .name{ font-weight:700; display:block; }
.checkbox .desc{ font-size:14px; color: rgba(27,33,25,.65); }

.form-note{ font-size:14px; color: rgba(27,33,25,.6); margin-top:16px; }
.form-message{
  padding:16px 18px; border-radius: var(--radius); margin-bottom:24px;
  border-left:3px solid var(--color-dusk); background: var(--color-dusk-soft);
}
.form-message.is-error{ border-left-color:#a13d2c; background: rgba(161,61,44,.08); }
.hp-field{ position:absolute; left:-9999px; }

/* Beschikbaarheid / kalenderplek */
.booking-embed{
  min-height:220px; margin-top:8px;
  border:1px dashed var(--color-line-dark);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--font-mono); font-size:13px; color: rgba(27,33,25,.5); padding:24px;
}

/* -------------------------------------------------
   8. Footer
------------------------------------------------- */
.site-footer{ padding:72px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; }
.footer-grid h4{ color: var(--color-linen); font-size:14px; text-transform:uppercase; letter-spacing:.08em; font-family: var(--font-body); }
.footer-grid a{ color: var(--color-mist); display:block; padding:4px 0; transition: color var(--transition); }
.footer-grid a:hover{ color: var(--color-dusk); }
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--color-line);
  display:flex; justify-content:space-between; font-size:13px; color: var(--color-mist);
  flex-wrap:wrap; gap:8px;
}

/* -------------------------------------------------
   9. Responsief
------------------------------------------------- */
@media (max-width: 900px){
  .story-grid, .omgeving-grid, .booking-grid{ grid-template-columns:1fr; gap:40px; }
  .facts-grid{ grid-template-columns: repeat(2,1fr); }
  .addons-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:160px; }
  .section{ padding:64px 0; }
  .container{ padding:0 22px; }
  .booking-panel{ padding:26px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
}

/* -------------------------------------------------
   10. Toegankelijkheid: geen beweging
   De vlucht wordt dan een stilstaand beeld met titel.
------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .flight.is-flight{ height:auto; }
  .flight.is-flight .flight-viewport{ position:relative; }
  .flight.is-flight .flight-content{ opacity:1; transform:none; }
  .flight-hint{ display:none; }
}