/* ===========================================================
   247ICT-template — sjabloon "Salon"
   Warm en persoonlijk, voor salons, praktijken en kleine winkels: schreefkoppen
   (Playfair Display) met een rustige broodletter (DM Sans), kleine kapitale
   bovenkopjes, rechte hoeken en dunne lijnen. Met een achtergrondfoto
   (Opmaak & huisstijl » Achtergrondfoto) staat de site als een middenbaan op
   die foto. Gemaakt bij de migratie van quimone.nl.
   Laadt bovenop styles.css; de instellingen uit Opmaak & huisstijl gaan voor.
   =========================================================== */
:root {
  --accent: #5e0a2c;
  --accent-donker: #45071f;
  --accent-licht: #f3ddb0;
  --donker: #2f2025;
  --paper: #fff8ea;
  --ink: #2f2025;
  --muted: #4a3a3f;
  --line: rgba(94, 10, 44, .22);
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-kop: "Playfair Display", Georgia, "Times New Roman", serif;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --shadow-sm: none;
  --maxw: 1180px;
  --kop-gewicht: 500;
  --kop-hoofdletters: none;
  --h1: calc(clamp(2.4rem, 4.6vw, 4.2rem) * var(--kop-schaal, 1));
  --h2: calc(clamp(1.8rem, 3vw, 2.7rem) * var(--kop-schaal, 1));
  --h3: calc(clamp(1.25rem, 1.8vw, 1.6rem) * var(--kop-schaal, 1));
  --salon-baan: min(1320px, calc(100% - clamp(32px, 5vw, 96px)));
  --salon-papier: color-mix(in srgb, var(--paper) 90%, transparent);
  --salon-vlak: color-mix(in srgb, var(--mint) 55%, transparent);
}
body { line-height: var(--body-regelhoogte, 1.62); }
h1, h2, h3, h4 { letter-spacing: -.035em; line-height: 1.1; }
.btn, .tekstrij-kaart, .card, .tekstrij-afbeelding img, .pagina-inhoud img, .map-embed, .contact-info .ico,
input, select, textarea { border-radius: 0 !important; }

/* Kleine kapitale bovenkopjes */
.eyebrow { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink); }
.eyebrow::before { content: none; }

/* ---------- Middenbaan op de achtergrondfoto ---------- */
body.heeft-achtergrond .site-mededeling,
body.heeft-achtergrond .site-top,
body.heeft-achtergrond main,
body.heeft-achtergrond .site-footer { width: var(--salon-baan); margin-inline: auto; }
body.heeft-achtergrond main { background: var(--salon-papier); border-inline: 1px solid var(--line); }
body.heeft-achtergrond .site-top { position: relative; }
body.heeft-achtergrond .bg-paper { background: transparent; }
body.heeft-achtergrond .bg-mint { background: var(--salon-vlak); }
body:not(.heeft-achtergrond) { background: var(--paper); }
@media (max-width: 760px) {
  body.heeft-achtergrond { background-attachment: scroll !important; }
  body.heeft-achtergrond .site-mededeling, body.heeft-achtergrond .site-top,
  body.heeft-achtergrond main, body.heeft-achtergrond .site-footer { width: 100%; }
  body.heeft-achtergrond main { border-inline: 0; }
}
main > section, main .tekstrij > section, main .tekstrijen-zone > .tekstrij > section { border-bottom: 1px solid var(--line); }

/* ---------- Mededeling en header ---------- */
.site-mededeling { background: var(--accent); }
.site-mededeling a:hover { color: var(--accent-2, #f9c561); }
.site-header { background: color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter: none; border-bottom: 1px solid var(--line); }
.site-header .nav { height: 80px; }
.brand img { height: var(--logo-hoogte, 52px); }
@media (min-width: 1101px) {
  .nav-links { gap: clamp(1rem, 2vw, 2.2rem); }
  .nav-links a, .nav-submenu > summary { font-size: .84rem; font-weight: 700; color: var(--ink); padding-block: 1.75rem 1.6rem; }
  .nav-links a::after { height: 2px; bottom: 0; background: var(--accent); }
  .nav-links a.is-active { color: var(--ink); }
}

/* ---------- Knoppen: rechthoekig, kapitaal ---------- */
.btn { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 700; padding: .95rem 1.25rem; gap: 2.2rem; justify-content: space-between; box-shadow: none; }
.btn--primary { background: var(--accent); color: var(--op-accent, #fff); border: 1px solid var(--accent); }
.btn--primary:hover { background: var(--paper); color: var(--accent); transform: none; }
.btn--ghost, .hero__cta .btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); backdrop-filter: none; }
.btn--ghost:hover, .hero__cta .btn--ghost:hover { background: var(--accent); color: #fff; transform: none; }
.btn--outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn--outline:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: none; }

/* ---------- Homekop: tekst op zand links, foto rechts ---------- */
.hero:not(.hero--banner):not(.hero--tekst) { min-height: clamp(440px, 36vw, 520px); background: color-mix(in srgb, var(--mint) 70%, var(--paper)); border-bottom: 1px solid var(--line); align-items: stretch; }
.hero:not(.hero--banner):not(.hero--tekst) .hero__media { left: 58%; border-left: 1px solid var(--line); }
.hero:not(.hero--banner):not(.hero--tekst)::after { display: none; }
.hero:not(.hero--banner):not(.hero--tekst) .container { margin-inline: 0; max-width: 58%; display: flex; align-items: center; padding-inline: clamp(24px, 6vw, 96px) clamp(20px, 4vw, 56px); }
.hero:not(.hero--banner):not(.hero--tekst) .hero__inner { width: 100%; max-width: 640px; }
.hero h1, .hero .hero__dia-kop { color: var(--hero-kop-kleur, var(--ink)); text-transform: var(--kop-hoofdletters, none); max-width: 22ch; font-size: calc(clamp(2.2rem, 3.3vw, 3.4rem) * var(--kop-schaal, 1)); line-height: 1.08; text-shadow: none; hyphens: auto; }
.hero p { color: var(--ink); font-size: 1.02rem; text-shadow: none; }
.hero__cta { gap: .8rem; margin-top: 1.5rem; }
@media (max-width: 900px) {
  .hero:not(.hero--banner):not(.hero--tekst) { flex-direction: column; min-height: 0; }
  .hero:not(.hero--banner):not(.hero--tekst) .hero__media { position: relative; left: 0; height: 260px; border-left: 0; border-bottom: 1px solid var(--line); order: -1; }
  .hero:not(.hero--banner):not(.hero--tekst) .container { max-width: none; padding: 34px var(--gutter) 38px; }
  .hero h1, .hero .hero__dia-kop { font-size: calc(clamp(2rem, 8vw, 2.8rem) * var(--kop-schaal, 1)); max-width: none; color: var(--hero-kop-kleur, var(--ink)); }
  .hero p { max-width: none; font-size: .98rem; }
}

/* ---------- Secties, koppen en tekst ---------- */
.section-head h2 { font-size: var(--h2); }
.section-head p, .tekstrij-tekst, .home-intro__tekst { color: var(--muted); }
.home-intro__tekst { margin-top: 1rem; font-size: 1.04rem; }
.home-intro__tekst p + p { margin-top: .7rem; }
.home-intro__tekst ul { list-style: disc; padding-left: 1.3em; margin-block: .8rem; }
.home-intro__tekst li + li { margin-top: .3rem; }
.tekstrij-kader { background: var(--paper); border: 1px solid var(--line); padding: 1.6rem; }
.bg-mint .tekstrij-kader { background: color-mix(in srgb, var(--paper) 85%, transparent); }
.tekstrij-tekst a, .pagina-inhoud a, .legal-text a { color: var(--link-kleur, var(--accent)); text-underline-offset: 3px; }

/* Kaarten: de foto in een zandkleurig kader, op ware grootte (ook kleine foto's blijven scherp) */
.tekstrij-kaart { background: transparent; border: 1px solid var(--line); box-shadow: none; }
.bg-paper .tekstrij-kaart { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.tekstrij-kaart__foto { aspect-ratio: auto; display: flex; align-items: center; justify-content: flex-start; min-height: 182px; padding: 15px; background: var(--salon-vlak); border-bottom: 1px solid var(--line); }
.tekstrij-kaart__foto img { width: auto; max-width: 100%; height: auto; max-height: 150px; object-fit: contain; }
.tekstrij-kaart:hover .tekstrij-kaart__foto img { transform: none; }
.tekstrij-kaart:hover { background: color-mix(in srgb, var(--accent-2, #c7832d) 14%, transparent); }
.tekstrij-kaart__tekst h2, .tekstrij-kaart__tekst h3 { font-size: 1.55rem; line-height: 1.2; }
.tekstrij-kaart__tekst p { font-size: 1rem; }
.tekstrij-kaart__link { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }

/* Tekst met foto: foto in een zandkleurig kader met een dunne lijn */
.tekstrij-afbeelding { padding: 14px; background: var(--salon-vlak); border: 1px solid var(--line); justify-self: center; }
.tekstrij-afbeelding img, .tekstrij-afbeelding--los img { box-shadow: none; }
.tekstrij-met-afbeelding { align-items: start; }

/* Fotogalerij */
.galerij-item, .galerij-item img, .galerij-item__knop { border-radius: 0 !important; }
.galerij-item figcaption, .galerij-item__bijschrift { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

/* ---------- Paginakop van de overige pagina's ---------- */
.page-hero { background: color-mix(in srgb, var(--mint) 70%, var(--paper)); color: var(--ink); border-bottom: 1px solid var(--line); }
.page-hero .container { padding-block: clamp(36px, 5vw, 64px) clamp(30px, 4vw, 48px); }
.page-hero h1 { color: var(--ink); font-size: calc(clamp(2.3rem, 4.6vw, 4.4rem) * var(--kop-schaal, 1)); max-width: 22ch; line-height: 1.06; }
.page-hero p { color: var(--muted); font-size: 1.08rem; font-family: var(--font-kop); font-style: italic; margin-top: .7rem; }
.page-hero .breadcrumbs, .page-hero .breadcrumbs a { color: var(--muted); }

/* ---------- Inhoud van pagina's ---------- */
.pagina-inhoud h2 { font-size: var(--h2); margin-top: 2.2rem; }
.pagina-inhoud ul > li::before { background: var(--accent-2, #c7832d); }
.pagina-inhoud blockquote { position: relative; margin-top: 1.4rem; padding: 1.4rem 1.6rem 1.3rem; border-left: 3px solid var(--accent-2, #c7832d); background: var(--salon-vlak); }
.pagina-inhoud blockquote p:first-child { margin-top: 0; font-family: var(--font-kop); font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.3; color: var(--ink); }
.pagina-inhoud blockquote p:last-child:not(:first-child) { margin-top: .9rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tekstrij-tekst blockquote { margin: 1.2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--accent-2, #c7832d); background: var(--salon-vlak); }
.tekstrij-tekst blockquote p:first-child { font-family: var(--font-kop); font-size: 1.35rem; line-height: 1.3; color: var(--ink); }
/* Een pagina met alleen citaten (zoals "Wijsheid") wordt een rustig raster van kaarten. */
.pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: none; }
.pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) blockquote { margin: 0; border: 0; padding: clamp(24px, 3.5vw, 52px); background: var(--paper); min-height: 200px; }
.pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) blockquote::before { content: "\201C"; display: block; height: 42px; color: var(--accent-2, #c7832d); font: 500 4.6rem/.8 var(--font-kop); }
.pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) blockquote:first-child,
.pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) blockquote:last-child { grid-column: 1 / -1; background: var(--accent); }
.pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) blockquote:first-child p,
.pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) blockquote:last-child p { color: #fff; }
@media (max-width: 760px) {
  .pagina-inhoud:has(> blockquote + blockquote):not(:has(> p, > h2, > ul)) { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact-info .ico { background: var(--salon-vlak); color: var(--accent); }
.contact-info b { color: var(--ink); }
.field input, .field select, .field textarea, input[type="text"], input[type="email"], input[type="tel"], textarea { background: color-mix(in srgb, #fff 55%, transparent); border-color: var(--line); }
.field label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer { background: var(--accent); }
.site-footer .footer-kop { font-family: var(--font-kop); text-transform: none; letter-spacing: -.01em; font-size: calc(1.35rem * var(--kop-schaal, 1)); font-weight: 500; }
.footer-brand img { height: 52px; }
.footer-naam { font-family: var(--font-kop); font-size: 1.6rem; color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, .22); }

/* Introductie van de homepage: kop links, tekst rechts (zoals een redactionele inleiding) */
@media (min-width: 761px) {
  #tekstrij-home-intro-bestaand .section-head { display: grid; grid-template-columns: minmax(200px, 32%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 5vw; max-width: none; }
  #tekstrij-home-intro-bestaand .section-head > .eyebrow { grid-column: 1; grid-row: 1; }
  #tekstrij-home-intro-bestaand .section-head > h2 { grid-column: 1; grid-row: 2; font-size: calc(clamp(2.2rem, 3.6vw, 3.6rem) * var(--kop-schaal, 1)); }
  #tekstrij-home-intro-bestaand .home-intro__tekst { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: 68ch; }
  #tekstrij-home-intro-bestaand .tekstrij-knop { grid-column: 2; }
}

/* Beheerlink in de paginakop (alleen zichtbaar als je bent ingelogd): op het lichte zandvlak donker */
.page-hero .hero__beheerlink, .page-hero .hero__beheerlink a { color: var(--accent); font-family: var(--font-body); font-style: normal; font-size: .9rem; }
.page-hero .hero__beheerlink a:hover { color: var(--ink); }
.page-hero a, .page-hero__phone-link { color: var(--accent); }
.page-hero__phone-link:hover { color: var(--ink); }
/* Lange woorden in de paginakop netjes afbreken (Schoonheids-behandeling) in plaats van midden in een lettergreep */
.page-hero h1, .hero h1 { overflow-wrap: break-word; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 600px) { .page-hero h1 { font-size: calc(clamp(1.7rem, 7.4vw, 2.6rem) * var(--kop-schaal, 1)); } }