/*
Theme Name:   Browology
Theme URI:    https://www.browology.nl
Description:  Blokthema voor Browology, PMU wenkbrauwen in regio Utrecht. Warm en natuurlijk, snel, zonder paginabouwer. Lettertypes lokaal geladen (geen verbinding met Google). Klaar voor WooCommerce en WPML/Polylang.
Author:       Browology
Version:      1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  browology
*/

/* ---------- Kop ---------- */
.bw-kop { border-bottom: 1px solid var(--wp--preset--color--lijn); background: var(--wp--preset--color--linnen); }
.bw-kop .bw-logo img { width: 56px; height: 56px; display: block; }
.bw-kop .wp-block-navigation a { text-decoration: none; }
.bw-kop .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 600px) {
  .bw-kop .bw-logo img { width: 44px; height: 44px; }
  .bw-kop .bw-kop-knop { display: none; } /* op mobiel staat de WhatsApp-knop al onderin */
}

/* ---------- Taalwissel (vlaggetje) ---------- */
.bw-taal { display: inline-flex; gap: .5rem; align-items: center; }
.bw-taal a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; text-decoration: none; color: inherit; font-size: .9rem; }
.bw-taal svg { width: 26px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px var(--wp--preset--color--lijn); }

/* ---------- Secties ---------- */
.bw-sectie { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.bw-vlak { background-color: var(--wp--preset--color--huid); }
.bw-donker { background-color: var(--wp--preset--color--pruim); color: var(--wp--preset--color--linnen); }
.bw-donker h1, .bw-donker h2, .bw-donker h3, .bw-donker a:not(.wp-element-button) { color: var(--wp--preset--color--linnen); }
.bw-donker .wp-element-button { background: var(--wp--preset--color--linnen); color: var(--wp--preset--color--pruim); }
.bw-donker .wp-element-button:hover { background: var(--wp--preset--color--huid); color: var(--wp--preset--color--pruim); }

/* De wenkbrauwlijn: het ene opvallende element van de huisstijl */
.bw-boog::after {
  content: ""; display: block; width: min(240px, 60%); aspect-ratio: 6 / 1;
  margin-top: .35em; background: url("assets/images/wenkbrauw.svg") no-repeat left center / contain;
}
.has-text-align-center.bw-boog::after { margin-left: auto; margin-right: auto; background-position: center; }

.bw-intro { font-size: var(--wp--preset--font-size--groot); max-width: 46ch; }
.bw-klein { font-size: var(--wp--preset--font-size--klein); color: #5E4E43; }
.bw-donker .bw-klein { color: var(--wp--preset--color--lijn); }

/* Foto's */
.bw-foto img { border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }
.bw-foto-breed img { border-radius: 18px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }

/* Tweede knopstijl */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--pruim); border: 1px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--pruim); color: var(--wp--preset--color--wit); }
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* Stappen (werkwijze is echt een volgorde) */
.bw-stappen { list-style: none; counter-reset: stap; padding-left: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bw-stappen li { counter-increment: stap; border-top: 1px solid var(--wp--preset--color--taupe); padding-top: 1rem; }
.bw-stappen li::before { content: counter(stap); display: block; font-family: var(--wp--preset--font-family--kop); font-size: 2rem; line-height: 1; margin-bottom: .5rem; color: var(--wp--preset--color--taupe); }

/* Tarieven */
.bw-prijsregel { border-bottom: 1px solid var(--wp--preset--color--lijn); padding: 1rem 0; gap: 1rem; }
.bw-prijsregel p { margin: 0; }
.bw-prijs { font-family: var(--wp--preset--font-family--kop); font-size: 1.5rem; white-space: nowrap; }

/* FAQ */
.wp-block-details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: list-item; }
.wp-block-details[open] summary { margin-bottom: .5rem; }

/* Reviews */
.bw-review { border-left: 2px solid var(--wp--preset--color--taupe); padding-left: 1.25rem; }

/* ---------- WhatsApp (vaste knop, geen pop-up) ---------- */
.bw-whatsapp {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.1rem;
  border-radius: 999px; background: var(--wp--preset--color--mos); color: #fff; text-decoration: none;
  font-weight: 600; box-shadow: 0 4px 14px rgba(30, 20, 22, .18);
}
.bw-whatsapp:hover, .bw-whatsapp:focus-visible { background: var(--wp--preset--color--pruim); color: #fff; }
.bw-whatsapp svg { width: 20px; height: 20px; flex: none; }

/* ---------- Calendly (laadt pas na klik: privacy en snelheid) ---------- */
.bw-agenda { border: 1px solid var(--wp--preset--color--lijn); border-radius: 18px; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--wit); }
.bw-agenda iframe { width: 100%; min-height: 700px; border: 0; border-radius: 12px; }

/* ---------- Toegankelijkheid ---------- */
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--mos); outline-offset: 3px; }
.screen-reader-text:focus { clip: auto; height: auto; width: auto; position: fixed; top: 1rem; left: 1rem; z-index: 100; background: #fff; padding: .75rem 1rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--kop); font-size: 1.25rem; font-weight: 400; }
.woocommerce ul.products li.product img { border-radius: 14px; }
.woocommerce .price { color: var(--wp--preset--color--pruim); font-weight: 600; }
.woocommerce a.button, .woocommerce button.button { background: var(--wp--preset--color--pruim); color: #fff; border-radius: 999px; }

/* Korte codes in de kop zonder extra witruimte */
.bw-kop p { margin: 0; }
.bw-kop .wp-block-buttons { margin: 0; }

/* Omlijnde knop op donkere achtergrond */
.bw-donker .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--linnen); background: transparent; border-color: var(--wp--preset--color--linnen); }
.bw-donker .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--linnen); color: var(--wp--preset--color--pruim); }
.bw-donker .wp-block-separator { color: rgba(251, 249, 247, .25); }
.bw-wettelijk a { color: inherit; }

/* Lange woorden netjes afbreken in plaats van midden in het woord */
h1, h2, h3 { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }

/* Leesbare regellengte binnen brede secties */
.bw-sectie p:not(.bw-prijs), .bw-sectie .wp-block-list:not(.bw-stappen), .bw-sectie .wp-block-details { max-width: 68ch; }
.bw-sectie .has-text-align-center { margin-left: auto; margin-right: auto; }
.bw-sectie .wp-block-columns p { max-width: none; }
.bw-prijsregel { max-width: 860px; }

/* Geen witte randen tussen secties, kop, inhoud en voet */
.wp-site-blocks > * + *, .wp-site-blocks > main + footer, .wp-site-blocks > header + main { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
.bw-voet-logo img { border-radius: 50%; box-shadow: 0 0 0 1px rgba(251, 249, 247, .3); }

/* Twee vlakken onder elkaar: dunne lijn als scheiding */
.bw-vlak + .bw-vlak { border-top: 1px solid var(--wp--preset--color--lijn); }