/* Thomsy gitaarles – drie hoofdkleuren: crème, roodbruin, amber */

/* Lettertypes staan op de eigen server: geen verbinding met Google (AVG) */
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --creme: #F6F0E7;
  --zand: #EDE3D6;
  --roodbruin: #5B1F16;
  --roodbruin-donker: #3F140E;
  --amber: #D9A25E;
  --inkt: #2A1E1A;
  --tekst-zacht: #5A4A43;
  --lijn: #DCCFBF;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --breed: 1120px;
  --overgang: 0.25s ease;
  --zacht: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--creme); color: var(--inkt); font-family: var(--sans); font-size: 18px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--roodbruin); transition: color var(--overgang); }
a:hover { color: var(--roodbruin-donker); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(32px, 4vw, 44px); color: var(--roodbruin); }
h3 { font-size: 22px; font-weight: 600; }
p { margin: 0 0 1em; }

/* Logo: de naam zoals in de EPK, met onderstreping */
.logo {
  font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: 0.04em;
  color: var(--roodbruin); text-decoration: none;
}
.logo:hover { color: var(--roodbruin); }
.logo-licht { color: var(--creme); }

/* Knoppen: één stijl, overal gelijk */
.knop {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  background: var(--roodbruin); color: var(--creme); font-weight: 600; font-size: 17px;
  text-decoration: none; white-space: nowrap; transition: background var(--overgang), transform var(--overgang);
}
.knop:hover { background: var(--roodbruin-donker); color: var(--creme); transform: translateY(-2px); }
.knop-klein { padding: 10px 20px; font-size: 16px; }
.knop-licht { background: var(--creme); color: var(--roodbruin); }
.knop-licht:hover { background: var(--zand); color: var(--roodbruin); }

/* Vaste menubalk */
.kop { position: fixed; inset: 0 0 auto 0; z-index: 10; background: rgba(246, 240, 231, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.kop.gescrold { border-color: rgba(91, 31, 22, 0.1); box-shadow: 0 6px 24px rgba(42, 30, 26, 0.08); }
.kop-binnen { max-width: calc(var(--breed) + 48px); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; }
.kop nav, .kop .logo + .knop { margin-left: auto; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.menu a { color: var(--inkt); text-decoration: none; font-weight: 600; font-size: 16px; }
.menu a:hover { color: var(--roodbruin); }

/* Hero: de foto loopt over in roodbruin */
.hero { position: relative; min-height: 94vh; display: flex; align-items: flex-end; background: var(--roodbruin-donker); overflow: hidden; }
/* De foto staat rechts, zodat de tekst links het gezicht niet bedekt */
.hero-foto { position: absolute; top: 0; right: 0; width: 78%; height: 100%; object-fit: cover; object-position: 0% 30%; transform: scale(1.04); will-change: transform; }
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to right, rgba(63, 20, 14, 1) 22%, rgba(63, 20, 14, 0) 46%),
  linear-gradient(to bottom, rgba(63, 20, 14, 0) 30%, rgba(63, 20, 14, 0.92) 100%); }
.hero-tekst { position: relative; z-index: 1; width: 100%; max-width: calc(var(--breed) + 48px); margin: 0 auto; padding: 0 24px 72px; color: var(--creme); }
.hero h1 { font-size: clamp(44px, 7vw, 84px); margin-bottom: 16px; }
.hero-regel { font-size: 20px; max-width: 520px; margin-bottom: 28px; }
.hero .knop { background: var(--creme); color: var(--roodbruin); }
.hero .knop:hover { background: var(--zand); }

/* Blokken */
.blok { padding: 104px 24px; }
.blok-zand { background: var(--zand); }
.blok-donker { background: var(--roodbruin); color: var(--creme); }
.blok-donker h2 { color: var(--creme); }
.smal { max-width: var(--breed); margin: 0 auto 40px; }
.intro { font-size: 20px; color: var(--tekst-zacht); max-width: 620px; margin-top: 12px; }
.blok-donker .intro { color: var(--zand); }

/* Missie en visie */
.visie { margin-bottom: 0; }
.visie .intro { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--inkt); max-width: 760px; margin: 20px 0 20px; }
.visie h2 { margin-bottom: 0; }
.visie p:not(.intro) { max-width: 680px; color: var(--tekst-zacht); }

/* Over mij */
.duo { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.duo-foto { border-radius: 12px; aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 45% 30%; }
.duo-tekst h2 { margin-bottom: 20px; }
/* Foto rechts, tekst links (Over mij), zodat de secties afwisselen */
.duo-omgekeerd > .duo-foto { order: 2; }

/* Fotoreeks: de foto's schuiven van rechts naar links door */
.fotoreeks { position: relative; overflow: hidden; }
.reeks { display: flex; height: 100%; transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1); } /* rustig op gang, rustig tot stilstand */
.reeks img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.reeks.zonder-overgang { transition: none; }
.motto { font-family: var(--serif); font-size: 22px; color: var(--roodbruin); margin-top: 24px; }
.motto-kop { font-weight: 600; }
.motto em { display: inline-block; margin-top: 0.6em; }

/* Proefles: tekst links, agenda rechts */
/* Cal.com heeft binnen het vak minstens ~780px nodig voor de maandweergave naast de tijden; daarom een smalle tekstkolom */
.proefles-duo { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; }
.proefles-tekst .intro { margin-top: 20px; font-size: 18px; }
.proefles-tekst h2 { font-size: clamp(32px, 3.4vw, 40px); }
/* Te smal voor naast elkaar: tekst boven de agenda, zoals voorheen */
@media (max-width: 1180px) {
  .proefles-duo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .proefles-tekst .intro { max-width: 620px; font-size: 20px; }
  .planner.geladen { max-width: 900px; }
}

/* Proefles */
.planner { min-height: 280px; border: 1.5px dashed rgba(246, 240, 231, 0.45); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--zand); }
.planner p { margin: 0; }
/* Compact: het vak sluit met een crème rand om de agenda heen. Binnen het vak minstens 780px, anders schakelt Cal.com naar de telefoonweergave. */
.planner.geladen { display: block; border: 0; padding: 20px 12px 8px; background: var(--creme); min-height: 0; overflow: hidden; }
.contact { margin-top: 24px; color: var(--zand); }
.blok-donker a { color: var(--creme); }
.blok-donker a:hover { color: var(--amber); }

/* KERST: cadeaubon. Alles met data-kerst staat uit tot KERST in main.js aan staat. */
[data-kerst][hidden] { display: none !important; }
.menu a.menu-kerst { color: var(--roodbruin); }
.kerst-label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(246, 240, 231, 0.12); border: 1px solid rgba(217, 162, 94, 0.6); color: var(--creme); font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background var(--overgang);
}
.kerst-label span { background: var(--amber); color: var(--roodbruin-donker); border-radius: 999px; padding: 3px 12px; font-size: 14px; letter-spacing: 0.02em; }
.kerst-label:hover { background: rgba(246, 240, 231, 0.2); color: var(--creme); }

.cadeau { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.kicker { font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--roodbruin); margin-bottom: 12px; }
.cadeau .intro { margin-bottom: 36px; }
/* Prijs als logo: groot – klein – groot, als een blokje */
.prijslogo { display: inline-grid; line-height: 0.95; margin: 4px 0 16px; font-size: clamp(44px, 6vw, 68px); }
.pl-groot { letter-spacing: -0.01em; }
/* Tweede regel even breed als "2 gitaarlessen": "voor maar" links onder de 2, "€50!" eindigt onder de laatste n */
.pl-rij { display: flex; justify-content: space-between; align-items: center; }
.pl-klein { font-family: var(--sans); font-size: 0.3em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1.25; color: var(--tekst-zacht); }
.pl-prijs { font-size: 1.95em; letter-spacing: -0.02em; }
.kicker-naam { text-transform: none; letter-spacing: 0.04em; font-size: 17px; }
.cadeau .intro strong { color: var(--roodbruin); }

/* De bon: een kaartje met een afscheurstrook */
.bon {
  --gat: 14px; --strook: 112px;
  display: grid; grid-template-columns: 1fr var(--strook); border-radius: 14px; overflow: hidden; color: var(--creme);
  background: radial-gradient(120% 140% at 0% 0%, #6E2A1E 0%, var(--roodbruin) 45%, var(--roodbruin-donker) 100%);
  box-shadow: 0 24px 48px -20px rgba(63, 20, 14, 0.55); transform: rotate(-1.5deg); transition: transform 0.5s var(--zacht);
  /* halve rondjes in de rand, waar de strook afscheurt */
  -webkit-mask: radial-gradient(circle var(--gat) at calc(100% - var(--strook)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--gat) at calc(100% - var(--strook)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--gat) at calc(100% - var(--strook)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--gat) at calc(100% - var(--strook)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.bon:hover { transform: rotate(0deg) translateY(-4px); }
.bon p { margin: 0; }
.bon-hoofd { padding: 32px 32px 28px; }
.bon-soort { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
.bon-titel { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4vw, 46px); line-height: 1.05; margin-top: 10px !important; }
.bon-sub { color: var(--zand); font-size: 17px; }
.bon-voor { font-family: var(--serif); font-style: italic; font-size: 24px; margin-top: 24px !important; padding-bottom: 6px; border-bottom: 1px solid rgba(217, 162, 94, 0.5); overflow-wrap: anywhere; }
.bon-voor span { font-style: normal; font-weight: 600; }
.bon-boodschap { font-size: 16px; color: var(--zand); margin-top: 10px !important; min-height: 1.6em; overflow-wrap: anywhere; }
.bon-geldig { font-size: 13px; color: rgba(237, 227, 214, 0.75); margin-top: 18px !important; letter-spacing: 0.02em; }
.bon-strook {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 8px;
  border-left: 2px dashed rgba(237, 227, 214, 0.35); background: rgba(0, 0, 0, 0.12);
}
.bon-merk { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-weight: 700; letter-spacing: 0.2em; font-size: 20px; }
.bon-prijs { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--amber); }
.bon-code { font-size: 11px; letter-spacing: 0.08em; color: rgba(237, 227, 214, 0.75); }

/* Bestelformulier */
.bestel { background: var(--creme); border-radius: 14px; padding: 32px; display: grid; gap: 16px; box-shadow: 0 1px 0 var(--lijn); }
.bestel h3 { color: var(--roodbruin); margin-bottom: 4px; }
.bestel label { display: grid; gap: 6px; font-weight: 600; font-size: 16px; }
.bestel .optie { font-weight: 400; color: var(--tekst-zacht); }
.verplicht { color: #B3261E; font-weight: 700; }
.bestel .verplicht-uitleg { margin: -4px 0 0; font-size: 14px; color: var(--tekst-zacht); }
.bestel input, .bestel textarea, .bestel select {
  font: inherit; font-weight: 400; font-size: 17px; color: var(--inkt); background: #fff; border: 1.5px solid var(--lijn); border-radius: 10px; padding: 11px 14px; width: 100%;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.bestel textarea { resize: vertical; }
.bestel input:focus, .bestel textarea:focus, .bestel select:focus { outline: none; border-color: var(--roodbruin); box-shadow: 0 0 0 3px rgba(91, 31, 22, 0.12); }
.bestel .rij { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; }
.bestel .akkoord { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.bestel .akkoord input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--roodbruin); flex: none; }
.bestel .valstrik { position: absolute; left: -9999px; }
.bestel .totaal { margin: 4px 0 0; font-size: 18px; }
.bestel .totaal span { color: var(--tekst-zacht); font-size: 15px; }
.bestel .knop { border: 0; cursor: pointer; font-family: inherit; justify-self: start; }
.bestel .knop:disabled { opacity: 0.6; cursor: wait; transform: none; }
.bestel .uitleg { font-size: 15px; color: var(--tekst-zacht); margin: 0; }
.bestel .melding { margin: 0; font-weight: 600; color: var(--roodbruin); }
.bestel .melding:empty { display: none; }
.bestel.verstuurd > :not(.bedankt) { display: none; }
.bedankt h3 { margin-bottom: 12px; }
.bedankt p { margin: 0 0 12px; }

/* Voet */
.voet { background: var(--roodbruin-donker); color: var(--zand); padding: 56px 24px 32px; }
.voet-binnen { max-width: var(--breed); margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.voet p { margin: 0; font-size: 16px; }

/* Logo, adres en knop zijn op de computer precies even hoog (56px) */
.voet-binnen .logo { font-size: 83.2px; text-box: trim-both cap alphabetic; }
/* Drie adresregels, van bovenkant hoofdletter tot onderkant laatste regel even hoog als het logo (56px) */
.voet-binnen .adres { font-style: normal; font-size: 15px; line-height: 23px; text-box: trim-both cap alphabetic; }
.voet-binnen .knop { line-height: 28px; }
.voet a { color: var(--creme); }
.voet a:hover { color: var(--amber); }
.voet .knop { margin-left: auto; color: var(--roodbruin); }
.voet .knop:hover { color: var(--roodbruin); }
/* Copyright links, de drie links samen rechts, onder de rechterrand van de knop */
.voet-onder { max-width: var(--breed); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(237, 227, 214, 0.18); display: flex; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; font-size: 15px; }
.voet-links { display: flex; gap: 28px; flex-wrap: wrap; }

/* Juridische pagina's */
.juridisch { max-width: 760px; margin: 0 auto; padding: 140px 24px 96px; }
.juridisch h1 { font-size: clamp(36px, 5vw, 52px); color: var(--roodbruin); margin-bottom: 12px; }
.juridisch h2 { font-size: 24px; margin: 40px 0 12px; }
.juridisch h3 { font-size: 19px; margin: 24px 0 8px; }
.juridisch table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 17px; }
.juridisch th, .juridisch td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--lijn); }
.juridisch thead th { font-size: 14px; color: var(--tekst-zacht); vertical-align: bottom; }
.juridisch thead span { font-weight: 400; }
.juridisch tbody th { font-weight: 600; }
.juridisch ul { padding-left: 20px; margin: 0 0 1em; }
.juridisch li { margin-bottom: 6px; }
.terug { display: inline-block; margin-top: 40px; font-weight: 600; }

/* Animaties – alleen met JavaScript aan, en niet bij 'minder beweging' */
@keyframes omhoog { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes inzoomen { from { opacity: 0.4; transform: scale(1.12); } to { opacity: 1; transform: scale(1.04); } }
.js .hero-foto { animation: inzoomen 1.8s var(--zacht) backwards; }
.js .hero-tekst > * { animation: omhoog 0.9s var(--zacht) both; }
.js .hero-tekst > :nth-child(2) { animation-delay: 0.15s; }
.js .hero-tekst > :nth-child(3) { animation-delay: 0.3s; }
.js .hero-tekst > :nth-child(4) { animation-delay: 0.45s; }
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--zacht), transform 0.8s var(--zacht); transition-delay: calc(var(--i, 0) * 0.12s); }
.js .reveal.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-foto, .js .hero-tekst > * { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Telefoon */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .menu { display: none; }
  .kop-binnen { justify-content: space-between; padding: 10px 16px; }
  .logo { font-size: 30px; }
  .knop-klein { padding: 9px 16px; font-size: 15px; }
  .hero { min-height: 88vh; }
  .hero-foto { width: 100%; object-position: 50% 30%; }
  .hero::after { background: linear-gradient(to bottom, rgba(63, 20, 14, 0) 30%, rgba(63, 20, 14, 0.92) 100%); }
  .hero-tekst { padding: 0 16px 48px; }
  .hero-regel { font-size: 18px; }
  .blok { padding: 72px 16px; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo { gap: 32px; }
  .duo-foto { aspect-ratio: 4 / 3; }
  .duo-omgekeerd > .duo-foto { order: 0; }
  .voet { padding: 48px 16px 28px; }
  .voet .knop { margin-left: 0; }
  .voet-binnen .logo { font-size: 48px; }
  .voet-binnen .adres { line-height: 22px; text-box: none; }
  .juridisch { padding: 112px 16px 72px; }
  .planner.geladen { padding: 16px 8px 4px; }
  .voet-onder { justify-content: flex-start; }
  .voet-links { gap: 12px 20px; }
  .cadeau { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bon { --strook: 84px; transform: none; }
  .bon-hoofd { padding: 24px 20px 20px; }
  .bon-prijs { font-size: 24px; }
  .bestel { padding: 24px 20px; }
  .kerst-label { font-size: 15px; }
}