/* Maestro Kapper & Beautysalon, Utrecht — conceptpagina.
   Het zwart-wit is van henzelf; die discipline laat ik staan. De twee tinten erbij komen
   uit de kleurenwaaier op hun balie, want balayage en ombre zijn hun werk. Het handelsmerk
   van deze pagina is de tijdbalk: elke behandeling is zo lang als hij duurt. Dat konden ze
   nergens laten zien, terwijl het gewoon in hun eigen boekingssysteem staat. */

:root {
  --zwart:   #0A0A0A;   /* hun eigen salonzwart */
  --wit:     #FFFFFF;
  --spiegel: #E5E5E5;   /* het grijs dat op hun site al gebruikt wordt */
  --balayage:#C79A5B;   /* de warme tint uit de kleurenwaaier */
  --as:      #5B4636;   /* de donkere tint uit dezelfde waaier */
  --grijs60: #0A0A0A99;
  --lijn:    #0A0A0A1f;
  --max: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wit); color: var(--zwart);
  font: 400 clamp(1rem, 0.97rem + 0.16vw, 1.06rem)/1.62 Manrope, system-ui, sans-serif;
}
h1, h2, h3 { font-family: Syne, system-ui, sans-serif; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.6rem, 1.5rem + 5vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
p { margin: 0 0 1rem; max-width: 60ch; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.binnen { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--balayage); color: var(--zwart); padding: .6rem 1rem; }
:focus-visible { outline: 3px solid var(--balayage); outline-offset: 3px; }

/* balk */
.balk { background: var(--zwart); color: var(--wit); position: sticky; top: 0; z-index: 20; }
.balk .binnen { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; padding: .8rem 0; }
.merk { font-family: Syne, sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.merk span { display: block; font-family: Manrope, sans-serif; font-weight: 400; font-size: .66rem; letter-spacing: .12em; opacity: .7; margin-top: .2rem; text-transform: none; }
.menu { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin-left: auto; font-size: .95rem; }
.menu a { text-decoration: none; opacity: .85; padding: .2rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { opacity: 1; border-bottom-color: var(--balayage); }
.knop {
  display: inline-block; background: var(--balayage); color: var(--zwart); text-decoration: none;
  font-family: Syne, sans-serif; font-weight: 700; letter-spacing: .02em; font-size: 1rem;
  padding: .65rem 1.3rem; border: 2px solid var(--balayage); border-radius: 999px;
}
.knop:hover { background: transparent; color: var(--balayage); }
.knop.donker { background: var(--zwart); border-color: var(--zwart); color: var(--wit); }
.knop.donker:hover { background: transparent; color: var(--zwart); }
.knop.licht { background: transparent; border-color: currentColor; color: inherit; }
.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* hero */
.hero { background: var(--zwart); color: var(--wit); padding: clamp(3rem, 2rem + 5vw, 6rem) 0; }
.hero .binnen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
.hero p { color: #FFFFFFcc; font-size: clamp(1.02rem, 1rem + 0.3vw, 1.2rem); }
.strook { font-family: Syne, sans-serif; font-weight: 700; letter-spacing: .18em; font-size: .82rem; text-transform: uppercase; color: var(--balayage); margin: 0 0 1rem; }
.hero img { border-radius: 4px; aspect-ratio: 3/4; object-fit: cover; }
.cijfers { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid #FFFFFF2e; }
.cijfer strong { display: block; font-family: Syne, sans-serif; font-weight: 800; font-size: 1.9rem; color: var(--balayage); line-height: 1; }
.cijfer span { font-size: .84rem; color: #FFFFFFaa; }

/* tijdbalken: het handelsmerk */
.tijden { padding: clamp(2.6rem, 2rem + 3vw, 4.4rem) 0; }
.kop-rij { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1.5rem; margin-bottom: .6rem; }
.kop-rij p { margin: 0; color: var(--grijs60); font-size: .92rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1.8rem; }
/* Alleen de radioknoppen verbergen. Deze regel pakte ook het zoekveld, dat daardoor
   absoluut gepositioneerd raakte en de pagina op een telefoon breder maakte dan het scherm. */
.filters input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filters label { cursor: pointer; }
.filters span {
  display: inline-block; font-family: Syne, sans-serif; font-weight: 700; font-size: .9rem;
  padding: .35rem .9rem; border: 2px solid var(--zwart); border-radius: 999px;
}
.filters input:checked + span { background: var(--zwart); color: var(--wit); }
.filters input:focus-visible + span { outline: 3px solid var(--balayage); outline-offset: 2px; }
.zoekrij input { font: inherit; padding: .45rem .9rem; border: 2px solid var(--zwart); border-radius: 999px; min-width: 12rem; }

.lijst { display: flex; flex-direction: column; gap: .1rem; }
.dienst { display: grid; grid-template-columns: minmax(0, 15rem) 1fr auto; gap: .8rem 1.2rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--lijn); }
.dienst .naam { font-weight: 600; font-size: .97rem; }
.dienst .naam small { display: block; font-weight: 400; font-size: .8rem; color: var(--grijs60); }
.balkje { height: 12px; border-radius: 999px; background: var(--balayage); position: relative; min-width: 6px; }
.balkje.lang { background: var(--as); }
.duur { font-size: .8rem; color: var(--grijs60); white-space: nowrap; }
.dienst .prijs { font-family: Syne, sans-serif; font-weight: 800; font-size: 1.1rem; white-space: nowrap; }
.balkkolom { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.legenda { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.4rem; font-size: .84rem; color: var(--grijs60); }
.legenda i { display: inline-block; width: 26px; height: 10px; border-radius: 999px; background: var(--balayage); margin-right: .4rem; vertical-align: middle; }
.legenda i.lang { background: var(--as); }

/* vlakken */
.vlak { padding: clamp(2.6rem, 2rem + 3vw, 4.4rem) 0; border-top: 1px solid var(--lijn); }
.vlak.zwart { background: var(--zwart); color: var(--wit); border-top: 0; }
.vlak.zwart p { color: #FFFFFFcc; }
.vlak.zwart h2 { color: var(--wit); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem; margin-top: 1.8rem; }
.kaart { border: 1px solid var(--lijn); border-radius: 4px; padding: 1.3rem; }
.vlak.zwart .kaart { border-color: #FFFFFF26; }
.kaart h3 { margin-bottom: .5rem; }
.kaart p { margin: 0; font-size: .94rem; }

.week { list-style: none; margin: 0; padding: 0; }
.week li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--lijn); }
.vlak.zwart .week li { border-color: #FFFFFF26; }
.week .dag { font-family: Syne, sans-serif; font-weight: 700; }
.week li.uit { color: var(--grijs60); }
.zondag { color: var(--balayage); font-weight: 700; }

.fotorij { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.fotorij img { aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; }

.voet { background: var(--zwart); color: var(--wit); padding: 2.6rem 0 2rem; font-size: .9rem; }
.voet a { color: var(--balayage); }
.voetgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.8rem; margin-bottom: 1.6rem; }
.voet .klein { color: #FFFFFF99; font-size: .82rem; max-width: 80ch; }
.kopje { font-family: Syne, sans-serif; font-weight: 700; letter-spacing: .1em; font-size: .76rem; text-transform: uppercase; color: var(--balayage); margin: 0 0 .5rem; }

@media (max-width: 860px) {
  .hero .binnen { grid-template-columns: 1fr; }
  .dienst { grid-template-columns: 1fr auto; }
  .balkkolom { grid-column: 1 / -1; }
  .menu { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } }

/* Het zoekveld had een vaste minimumbreedte en duwde de pagina op een telefoon
   honderd pixels breder dan het scherm. Op smalle schermen krijgt het een eigen regel. */
.zoekrij { display: inline-block; max-width: 100%; }
.zoekrij input { max-width: 100%; }
@media (max-width: 560px) {
  .zoekrij { display: block; width: 100%; }
  .zoekrij input { width: 100%; min-width: 0; }
  .dienst { grid-template-columns: 1fr auto; row-gap: .35rem; }
  .balkkolom { grid-column: 1 / -1; }
}