en zijn nu

/* ------------------------------------------------------------------
   Skinns — SEO/semantiek aanvullingen.
   Laadt NA skinns.webflow.css. Bevat geen Webflow-output, dus deze
   file overleeft een her-export van Webflow (de HTML niet).
   ------------------------------------------------------------------ */

/* --- 1. Koppenstructuur ------------------------------------------
   Diverse koppen waren <h1> en zijn nu <h2>. Webflow's basisregels
   geven h2 een kleiner formaat dan h1, dus we zetten h2 gelijk aan
   h1. Klasse-overrides in de media queries van skinns.webflow.css
   winnen nog steeds (klasse > element), dus responsive gedrag blijft
   exact hetzelfde als voorheen.                                     */
h2 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}

/* Behandel-/productnamen waren <div> en zijn nu <h3>. De klasse regelt
   al font-size/line-height/weight; alleen de kopmarges moeten terug
   naar 0 om de flex-uitlijning identiek te houden. */
.t-head-dropdown {
  margin-top: 0;
  margin-bottom: 0;
}

/* Idem voor de behandelnamen in "Populairste behandelingen" op de homepage. */
.t-head-popular2 {
  margin-bottom: 0;
}

/* --- 2. H1 op de homepage ----------------------------------------
   "Welkom, bij Skinns." is decoratief en nu <div>. Dit is de echte H1. */
.hero-h1 {
  color: #333;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 24px 0 0;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

/* --- 3. H1 + intro op de subpagina's ------------------------------ */
.page-h1 {
  text-align: center;
  max-width: 750px;
  margin: 40px auto 10px;
  padding: 0 20px;
  font-family: Open Sans, sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 50px;
  /* Lange samenstellingen ("Huidverzorgingsproducten") passen op een
     smal scherm niet op één regel en duwden de pagina breder dan de
     viewport. width: 100% is hier essentieel: de H1 is een flex-item in
     een gecentreerde kolom en zou anders op zijn max-content breedte
     gaan staan — overflow-wrap verlaagt de intrinsieke minimumbreedte
     namelijk niet. Met een echte breedte breekt de tekst wel af,
     op lettergrepen (lang="nl" staat op <html>).                      */
  width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-intro {
  color: #333;
  text-align: center;
  max-width: 750px;
  margin: 0 auto 10px;
  padding: 0 20px;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 26px;
}

/* --- 4. Openingstijden in de footer -------------------------------
   De footer heeft nu drie kolommen: Menu | Contact | Openingstijden.
   Onder 768px stapelt skinns.webflow.css alles al naar 1 kolom, dus
   deze override staat bewust in een min-width query en laat het
   mobiele gedrag ongemoeid.                                         */
@media screen and (min-width: 768px) {
  .g-footer {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* line-height 30px zodat de regelafstand exact gelijk is aan Menu en
   Contact daar: die links hebben line-height 20px + margin-bottom 10px.
   Met 26px oogde deze kolom dichter op elkaar en dus kleiner. */
.footer-hours {
  color: #333;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 30px;
}

/* --- 6. Boekingswidget (afspraak) ---------------------------------
   .html-embed-2 had padding 35px 45px 0: onderaan niets, waardoor de
   iframe strak tegen de afgeronde hoek van het grijze blok aanliep. */
.html-embed-2 {
  padding-bottom: 35px;
}

/* --- 5. 404 -------------------------------------------------------- */
.notfound {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  padding: 40px 20px;
  display: flex;
}

.notfound-links {
  margin-top: 10px;
}

.notfound-links a {
  color: #333;
  margin: 0 10px;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
}

/* --- Responsive --------------------------------------------------- */
/* Op desktop krijgt de pagina-H1 dezelfde breedte als de grijze blokken
   (.s-plist-1 / .s-plist-2), die op max-width: 80% van .wrapper staan.
   Zo past de kop op één regel en lijnt hij op met de rest van de pagina.
   De intro blijft bewust smaller: een regel van 1140px leest slecht. */
@media screen and (min-width: 992px) {
  .wrapper > .page-h1 {
    max-width: 80%;
  }
}

@media screen and (max-width: 991px) {
  .page-h1 {
    font-size: 38px;
    line-height: 44px;
  }
}

@media screen and (max-width: 767px) {
  .hero-h1 {
    letter-spacing: .1em;
    font-size: 15px;
  }
}

@media screen and (max-width: 479px) {
  /* Onder 479px zet skinns.webflow.css .d-footer op align-items: flex-start,
     waardoor elke kolom links uitlijnt. De openingstijden zijn één blok met
     regels van verschillende lengte, dus daar is de geërfde text-align:
     center wél zichtbaar. Links uitlijnen zodat het bij Menu en Contact past. */
  .footer-hours {
    text-align: left;
  }

  /* Het zwevende afspraak-knopje was op telefoons alleen een icoontje.
     Het label erbij maakt duidelijk waar de knop toe dient. */
  .t-appointment {
    display: block;
  }

  .hero-h1 {
    margin-top: 18px;
    font-size: 13px;
  }

  .page-h1 {
    margin-top: 28px;
    font-size: 30px;
    line-height: 36px;
  }

  .page-intro {
    font-size: 15px;
  }
}