/* FotoProTools drop-in theme -- styles voor de omgebouwde pagina-templates.
 *
 * Deze klassen vervangen de Flatsome UX-Builder-opmaak. Waar de oude pagina's
 * drie handmatige kopieen van dezelfde sectie hadden (desktop / tablet / mobile,
 * elk met een `visibility`-vlag), staat hier EEN opmaak die met CSS meeschaalt.
 *
 * De kleurverlopen zijn 1-op-1 overgenomen uit legacy-custom.css (.banner1,
 * .banner2, .banner3, .webshopbanner, .gradient-button-2) zodat het beeld
 * gelijk blijft, maar dan zonder de Flatsome-afhankelijkheid.
 */

/* ==========================================================================
   Pagina-hero (kop + inleiding bovenaan een contentpagina)
   ========================================================================== */

.fpt-page-hero {
  text-align: center;
}

.fpt-page-hero h1,
.fpt-page-hero h2 {
  color: var(--wp--preset--color--primary);
  margin-bottom: 24px;
}

.fpt-page-hero .fpt-lede {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--wp--preset--color--text);
}

.fpt-section-intro {
  text-align: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.fpt-section-intro a {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  text-decoration: none;
}

.fpt-section-intro a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Vergelijkingstabel
   ========================================================================== */

.wp-block-table.fpt-compare-table {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Alle eigenschappen expliciet, zodat deze tabel NIET afhankelijk is van de
 * kale `table {}` / `th {}` / `td {}` regels in legacy-custom.css (afkomstig
 * uit de "Additional CSS" van het oude Flatsome-child-thema). Die regels
 * gelden site-breed en zetten o.a. `color: white` op elke th -- daardoor werd
 * de koptekst onleesbaar. De gradient hieronder is dezelfde als daar, zodat
 * het beeld gelijk blijft als legacy-custom.css straks verdwijnt.
 */
.fpt-compare-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  /* De huisstijl geeft Space Grotesk aan koppen, knoppen, labels en tabellen;
   * Lato draagt alleen de lopende tekst. Zonder deze regel zou de tabel de
   * bodyfont uit theme.json overnemen. */
  font-family: var(--wp--preset--font-family--space-grotesk);
  color: var(--wp--preset--color--primary);
  border: 3px solid transparent;
  border-radius: 12px;
  border-image-source: linear-gradient(94deg, #B687AE, #F9EEC1 100%);
  border-image-slice: 1;
  overflow: hidden;
}

.fpt-compare-table th,
.fpt-compare-table td {
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 14px 18px;
  background-image: none;
}

.fpt-compare-table tbody tr:last-child th,
.fpt-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.fpt-compare-table thead th {
  background-image: linear-gradient(94deg, #B687AE, #F9EEC1 100%);
  /* Navy in plaats van wit: het verloop eindigt op #F9EEC1 (zand) en witte
   * tekst haalt daar 1,16:1 -- praktisch onzichtbaar. Navy haalt 5,0:1 op de
   * lila kant en 12,8:1 op de zandkant, dus over de hele breedte AA. De
   * text-shadow was bedoeld om wit leesbaar te houden en heeft nu geen
   * functie meer. Het verloop zelf blijft ongewijzigd. */
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  text-align: center;
  border-bottom: 0;
}

/* Lege hoek linksboven: geen gradient, geen rand */
.fpt-compare-table thead th:first-child {
  background-image: none;
  background-color: transparent;
}

/* Eerste kolom = kenmerknaam, overige kolommen = vinkjes */
.fpt-compare-table tbody td:first-child,
.fpt-compare-table tbody th:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--wp--preset--color--text);
}

.fpt-compare-table tbody td:not(:first-child) {
  text-align: center;
  font-size: 1.15rem;
  color: var(--wp--preset--color--primary);
}

/* Op smalle schermen scrollt de tabel horizontaal in plaats van te breken.
 * Dit vervangt de aparte "tablet table" en "mobile table" secties. */
@media (max-width: 600px) {
  .fpt-compare-table {
    overflow-x: auto;
  }
  .fpt-compare-table table {
    min-width: 460px;
  }
  .fpt-compare-table th,
  .fpt-compare-table td {
    padding: 10px 12px;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   Prijskaarten
   ========================================================================== */

.fpt-pricing-grid.wp-block-columns {
  gap: 24px;
  align-items: stretch;
}

.fpt-price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  padding: 40px 32px;
  color: #16152F;
  text-align: center;
}

.fpt-price-card h3 {
  font-size: 2.4rem;
  line-height: 1.1;
  margin: 0 0 24px 0;
  color: #16152F;
}

.fpt-price-card ul {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
  flex: 1 1 auto;
  font-size: 1.05rem;
  line-height: 2;
}

.fpt-price-card ul li {
  margin: 0;
}

.fpt-price-card .fpt-price {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.fpt-price-card .fpt-price-note {
  font-size: 0.9rem;
  margin: 8px 0 0 0;
  opacity: 0.85;
}

/* Kleurverlopen, overgenomen uit legacy-custom.css (.banner1/2/3) */
.fpt-price-card--1 {
  background-image: linear-gradient(153deg, #DD5E89, #F7BB97 100%);
}

.fpt-price-card--2 {
  background-image: linear-gradient(153deg, #6B8EF0, #B5F0DB 100%);
}

.fpt-price-card--3 {
  background-image: linear-gradient(153deg, #B687AE, #F9EEC1 100%);
}

@media (max-width: 781px) {
  .fpt-price-card {
    padding: 32px 24px;
  }
  .fpt-price-card h3 {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Voordelenlijst (de "✅"-blokken op de webshop-landingspagina's)
   ========================================================================== */

.fpt-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fpt-benefits > li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 24px;
  line-height: 1.6;
}

.fpt-benefits > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #B687AE 0%, #F9EEC1 51%, #B687AE 100%);
}

.fpt-benefits > li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.45em;
  width: 6px;
  height: 11px;
  border: solid #16152F;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fpt-benefits strong {
  display: block;
  color: var(--wp--preset--color--primary);
  margin-bottom: 4px;
}

/* Sierlijn boven de paginakop (was [divider] in Flatsome) */
.fpt-rule {
  border: 0;
  height: 4px;
  width: min(752px, 100%);
  margin: 0 auto 32px auto;
  background-image: linear-gradient(to right, #B687AE 11%, #F9EEC1 100%);
}

/* ==========================================================================
   Contactbanner ("Meer weten? Bel direct")
   ========================================================================== */

/* Twee klassen in de selector, niet een.
 *
 * WordPress geeft elke constrained group deze regel mee:
 *
 *   .wp-block-group.is-layout-constrained > :where(...) {
 *     max-width: var(--wp--style--global--content-size);
 *     margin-left: auto !important; margin-right: auto !important;
 *   }
 *
 * Dat is twee klassen diep, dus een selector met alleen .fpt-contact-banner
 * verliest en de banner wordt 780px in plaats van 420px. */
.wp-block-group.fpt-contact-banner {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  background-image: linear-gradient(to bottom right, #6B8EF0 0%, #B5F0DB 100%);
}

.fpt-contact-banner h2 {
  font-size: 2.25rem;
  margin: 0 0 12px 0;
  color: #16152F;
}

.fpt-contact-banner p {
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0;
  color: #16152F;
}

.fpt-contact-banner a[href^="tel:"] {
  color: #16152F;
  text-decoration: none;
  font-weight: 700;
}

.fpt-contact-banner a[href^="tel:"]:hover {
  text-decoration: underline;
}

.fpt-contact-banner .wp-block-buttons {
  margin-top: 24px;
}

.fpt-btn-mint .wp-block-button__link,
.wp-block-button.fpt-btn-mint > .wp-block-button__link {
  min-width: 215px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border-radius: 99px;
  white-space: nowrap;
  color: #16152F;
  background-image: linear-gradient(to right, #6B8EF0 0%, #B5F0DB 51%, #6B8EF0 100%);
  background-size: 200% auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fpt-btn-mint .wp-block-button__link:hover,
.wp-block-button.fpt-btn-mint > .wp-block-button__link:hover {
  background-position: right center;
}

/* Paarse variant, was .gradient-button-2 */
.fpt-btn-purple .wp-block-button__link,
.wp-block-button.fpt-btn-purple > .wp-block-button__link {
  min-width: 200px;
  padding: 15px 32px;
  border-radius: 90px;
  white-space: nowrap;
  color: #16152F;
  background-image: linear-gradient(to right, #B687AE 0%, #F9EEC1 51%, #B687AE 100%);
  background-size: 200% auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fpt-btn-purple .wp-block-button__link:hover,
.wp-block-button.fpt-btn-purple > .wp-block-button__link:hover {
  background-position: right center;
}

/* ==========================================================================
   Icoontegels (was [featured_box img=".." link=".."])
   ========================================================================== */

.fpt-tile {
  text-align: center;
  height: 100%;
}

.fpt-tile .wp-block-image {
  /* Alle iconen krijgen even veel ruimte en staan onderlangs uitgelijnd, zodat
   * de koppen van alle tegels in een rij op dezelfde regel beginnen -- ook als
   * het ene icoon 90x90 is en het andere 52x70. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 90px;
  margin: 0 auto 16px auto;
}

/* Zonder deze regel rekt de browser een klein icoon (52x70) op tot de volle
 * 90px breedte uit `.fpt-tile img` en wordt het daarmee 121px hoog -- hoger
 * dan de andere drie. Breedte en hoogte los begrenzen houdt elk icoon op zijn
 * eigen maat binnen hetzelfde vak. */
.fpt-tile .wp-block-image img {
  width: auto;
  height: auto;
  max-width: 90px;
  max-height: 90px;
}

/* Een kop in een tegel is een label, geen sectiekop.
 *
 * De vier tegels op /demo-aanvraag/ staan in kolommen van 25%; bij 1440px is
 * dat 276px breed. De koppen zijn `h2` en kregen daarmee de sectiegrootte uit
 * theme.json: 44px. "Nabewerking" past dan niet in de kolom en brak middenin
 * het woord af ("Nabewerkin / g in batches"). Bovendien liepen de koppen van
 * twee tot vier regels uiteen; omdat de kolommen verticaal gecentreerd staan
 * zakte elk icoon daardoor naar een andere hoogte. */
.fpt-tile h2 {
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  line-height: 1.25;
  margin: 0;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

/* De tegel vult de kolom van boven af. Zonder dit zweeft elke tegel op zijn
 * eigen hoogte in het midden van de rij. */
.wp-block-column.is-vertically-aligned-center:has(> .fpt-tile) {
  align-self: stretch;
}

.fpt-tile img {
  height: auto;
  transition: transform 0.2s ease;
}

.fpt-tile a:hover img {
  transform: translateY(-3px);
}

.fpt-tile p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--wp--preset--color--text);
  margin: 0;
}

/* Kolomrijen: op smalle schermen stapelen ze vanzelf (WordPress doet dat onder
 * 782px). Dit vervangt de aparte tablet- en mobielsecties uit Flatsome. */
.fpt-page .wp-block-columns {
  gap: 32px;
  margin-top: 24px;
  margin-bottom: 24px;
}

@media (max-width: 781px) {
  .fpt-page .wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* De sierlijn boven een kop in een kolom mag niet de hele breedte pakken */
.wp-block-column > .fpt-rule {
  margin-left: 0;
  width: 100%;
}

/* ==========================================================================
   Maatvoering gelijkgetrokken met productie
   ==========================================================================

   Op productie draait de content nog door inc/ux-builder-compat.php. Die laag
   bepaalt hoe groot alles is, en wijkt op twee punten af van wat de blokken
   uit zichzelf doen:

     - Tekst: [ux_text font_size="1.25"] zet de bodytekst op 1,25rem. Zonder
       die wikkel viel alles terug op 1rem -- merkbaar kleiner dan live.
     - Afbeeldingen: fpt_uxb_image() LEEST het width-attribuut niet eens. Alle
       [ux_image] worden gecapt op 260px en alle [featured_box]-iconen op 90px.
       De width-waarden in de shortcodes (tot 130% aan toe) sloegen op
       kolombreedtes die niet meer bestaan en zijn dus niet overgenomen.
*/

.fpt-page {
  font-size: 1.25rem;
}

.fpt-page .wp-block-list,
.fpt-page .wp-block-table {
  font-size: 1.05rem;
}

@media (max-width: 781px) {
  .fpt-page {
    font-size: 1.1rem;
  }
}

/* Losse afbeelding in de tekst: zelfde cap als .fpt-uxb-image op productie */
.fpt-page-image img {
  max-width: 260px;
  width: 100%;
  height: auto;
}

/* Grote illustratie (was .overons in het oude thema) */
.fpt-page-figure img {
  max-width: 750px;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Icoontegel: zelfde cap als .fpt-uxb-featured-box__img op productie */
.fpt-tile img {
  max-width: 90px;
}

@media (max-width: 781px) {
  .fpt-tile img {
    max-width: 80px;
  }
}

/* ==========================================================================
   Artikelen: blog en kennisbank
   ========================================================================== */

.fpt-article-meta,
.fpt-crumbs {
  gap: 12px;
  font-size: 0.95rem;
  color: var(--wp--preset--color--text);
  opacity: 0.75;
  margin-bottom: 8px;
}

.fpt-crumbs a,
.fpt-crumbs .wp-block-post-terms a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.fpt-crumbs a:hover {
  text-decoration: underline;
}

/* Leesbare regellengte voor lopende tekst; brede blokken (afbeeldingen,
 * tabellen) mogen daar buiten treden via alignwide/alignfull. */
.fpt-article > p,
.fpt-article > ul,
.fpt-article > ol,
.fpt-doc > p,
.fpt-doc > ul,
.fpt-doc > ol {
  max-width: 46em;
}

.fpt-article-image img {
  width: 100%;
  height: auto;
}

.fpt-article-nav {
  gap: 16px;
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 24px;
}

.fpt-article-nav a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  font-weight: 700;
}

.fpt-article-nav a:hover {
  text-decoration: underline;
}

.fpt-doc-footer {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 32px;
}

.fpt-doc-footer h2 {
  margin-top: 0;
  font-size: 1.4rem;
}

.fpt-doc-footer p {
  margin-bottom: 0;
}

/* -- Kaartroosters (blogarchief en kennisbankoverzicht) ------------------- */

.fpt-card,
.fpt-doc-card {
  height: 100%;
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fpt-card:hover,
.fpt-doc-card:hover {
  box-shadow: 0 6px 20px rgba(36, 34, 77, 0.09);
  transform: translateY(-2px);
}

.fpt-card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.fpt-card-date {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 12px 0 4px 0;
}

.fpt-card-title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 8px 0;
}

.fpt-card-title a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.fpt-card-title a:hover {
  text-decoration: underline;
}

.fpt-card .wp-block-post-excerpt,
.fpt-doc-card .wp-block-post-excerpt {
  font-size: 1rem;
  line-height: 1.55;
}

.fpt-card-grid,
.fpt-doc-grid {
  gap: 24px;
}

.fpt-pagination {
  margin-top: 40px;
  gap: 8px;
}

.fpt-pagination a,
.fpt-pagination .current {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

@media (max-width: 781px) {
  .fpt-card-grid,
  .fpt-doc-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   Fotografenplugin (picturepresent-photographers)

   De plugin brengt zijn eigen opmaak mee en zet zijn kleuren als
   CSS-variabelen op .pp-photographers (zie de instellingen onder
   Instellingen -> PP Photographers). Hier staat alleen de aansluiting op de
   ritmiek van deze site -- niet de opmaak zelf, die hoort in de plugin.
   --------------------------------------------------------------------------- */

.fpt-pp-page .pp-photographers {
  margin-block: 0;
}

.fpt-pp-page .pp-photographers > *:first-child {
  margin-top: 0;
}

.fpt-pp-page .pp-photographers > *:last-child {
  margin-bottom: 0;
}

/* De kaart heeft een vaste hoogte nodig; zonder dit valt hij op mobiel
   samen tot een streepje. */
.fpt-pp-page .pp-map,
.fpt-pp-page #pp-map {
  min-height: 420px;
}

@media (max-width: 640px) {
  .fpt-pp-page .pp-map,
  .fpt-pp-page #pp-map {
    min-height: 320px;
  }
}

/* -- Kennisbank: twee kolommen met de BetterDocs-sidebar ------------------
 *
 * archive-docs.html en single-docs.html zetten links het `betterdocs/sidebar`
 * blok (alle categorieen met hun artikelen) en rechts de inhoud. De sidebar
 * brengt zijn eigen opmaak mee vanuit de plugin; hieronder staat alleen de
 * aansluiting op de ritmiek van deze site.
 * --------------------------------------------------------------------- */

.fpt-docs-layout {
  gap: 40px;
}

.fpt-docs-aside,
.fpt-docs-main {
  min-width: 0;
}

.fpt-docs-aside .betterdocs-sidebar {
  width: 100%;
}

.fpt-docs-aside .betterdocs-sidebar-content {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 8px 4px;
}

@media (min-width: 782px) {
  .fpt-docs-aside > aside {
    position: sticky;
    top: calc(var(--fpt-header-h, 80px) + 24px);
    max-height: calc(100vh - var(--fpt-header-h, 80px) - 48px);
    overflow-y: auto;
  }
}

/* Op mobiel eerst het artikel zelf, daarna pas de categorielijst. */
@media (max-width: 781px) {
  .fpt-docs-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .fpt-docs-main {
    order: 1;
  }

  .fpt-docs-aside {
    order: 2;
  }
}

/* -- Kennisbank: zoekveld (betterdocs/searchbox, layout-1) ----------------
 *
 * `.fpt-kb-zoek-overzicht` staat bovenaan /kennisbank/, `.fpt-kb-zoek-artikel`
 * in de linkerkolom van een artikel. De plugin levert het formulier en de
 * suggestielijst; hieronder alleen de aansluiting op de opmaak van deze site.
 * --------------------------------------------------------------------- */

.fpt-kb-zoek-overzicht,
.fpt-kb-zoek-artikel {
  position: relative;
  z-index: 5;
}

/* De plugin geeft de wrapper een grijze balk met 50px lucht; die halen we weg. */
.fpt-kb-zoek-overzicht.betterdocs-search-form-wrapper,
.fpt-kb-zoek-artikel.betterdocs-search-form-wrapper {
  padding: 0;
  background: none;
}

.fpt-kb-zoek-overzicht .betterdocs-searchform,
.fpt-kb-zoek-artikel .betterdocs-searchform {
  width: 100%;
  padding: 6px 12px;
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: none;
}

.fpt-kb-zoek-overzicht .betterdocs-searchform:focus-within,
.fpt-kb-zoek-artikel .betterdocs-searchform:focus-within {
  border-color: var(--wp--preset--color--primary);
}

.fpt-kb-zoek-overzicht .betterdocs-search-field,
.fpt-kb-zoek-artikel .betterdocs-search-field {
  color: var(--wp--preset--color--text);
  background: none;
}

/* De suggestielijst hangt standaard op een eigen breedte; hem even breed als
 * het invoerveld maken voorkomt dat hij half over de kaarten valt. */
.fpt-kb-zoek-overzicht .betterdocs-search-result-wrap,
.fpt-kb-zoek-artikel .betterdocs-search-result-wrap,
.fpt-kb-zoek-overzicht .docs-search-result,
.fpt-kb-zoek-artikel .docs-search-result {
  width: 100%;
  left: 0;
  right: auto;
}

.fpt-kb-zoek-overzicht .docs-search-result,
.fpt-kb-zoek-artikel .docs-search-result {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(36, 34, 77, 0.12);
}

/* De plugin zet de resultaten op een regel; in de smalle zijbalk vallen de
 * titels dan buiten beeld. Laten afbreken in plaats van horizontaal scrollen. */
.fpt-kb-zoek-overzicht .docs-search-result a,
.fpt-kb-zoek-artikel .docs-search-result a,
.fpt-kb-zoek-overzicht .betterdocs-search-title,
.fpt-kb-zoek-artikel .betterdocs-search-title {
  white-space: normal;
}

.fpt-kb-zoek-overzicht .docs-search-result,
.fpt-kb-zoek-artikel .docs-search-result {
  overflow-x: hidden;
}

/* Overzichtspagina: breed veld tussen de intro en de artikelkaarten. */
.fpt-kb-zoek-overzicht {
  margin: 8px 0 24px;
}

/* Artikelpagina: compact veld boven de categorielijst. */
.fpt-kb-zoek-artikel {
  margin-bottom: 16px;
}

.fpt-kb-zoek-artikel .betterdocs-search-field {
  font-size: 15px;
}

/* Op mobiel staat de categorielijst onder het artikel; het zoekveld hoort
 * daar juist bovenaan. `display: contents` maakt de twee losse items van de
 * kolom-flexbox, zodat ze apart geordend kunnen worden. */
@media (max-width: 781px) {
  .fpt-doc .fpt-docs-aside {
    display: contents;
  }

  .fpt-doc .fpt-kb-zoek-artikel {
    order: 0;
    margin-bottom: 0;
  }

  .fpt-doc .fpt-docs-aside > aside {
    order: 2;
  }
}

/* -- Kennisbank: koppenschaal binnen een artikel (fpt-doc-koppenschaal) ---
 *
 * De site-brede h2 loopt op tot 2.75rem, terwijl theme.json de post-titel
 * afkapt op 2.5rem. Op een kennisbank-artikel werden de tussenkoppen daardoor
 * groter dan de titel erboven. Hieronder een eigen schaal voor deze pagina's:
 * titel > tussenkop > sub-tussenkop > lopende tekst.
 * --------------------------------------------------------------------- */

.fpt-doc .wp-block-post-title {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem);
  line-height: 1.2;
}

.fpt-doc #betterdocs-single-content h2,
.fpt-doc .betterdocs-entry-content h2 {
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.fpt-doc #betterdocs-single-content h3,
.fpt-doc .betterdocs-entry-content h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  line-height: 1.35;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

.fpt-doc #betterdocs-single-content h4,
.fpt-doc .betterdocs-entry-content h4 {
  font-size: 1.05rem;
  line-height: 1.4;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

/* De artikeltekst zit nu in #betterdocs-single-content (het
 * `betterdocs/single-doc-content` blok, dat de kop-id's voor de
 * inhoudsopgave aanbrengt) in plaats van direct in <main>. */
.fpt-doc #betterdocs-single-content > p,
.fpt-doc #betterdocs-single-content > ul,
.fpt-doc #betterdocs-single-content > ol {
  max-width: 46em;
}

.fpt-doc .betterdocs-entry-content {
  margin-top: 24px;
}

/* De inhoudsopgave staat hier boven het artikel, niet in een rechterkolom;
 * de plugin zet daar 54px padding-top voor die we niet willen. */
.fpt-docs-main .betterdocs-toc-block .betterdocs-toc {
  padding: 20px 24px !important;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
}

.fpt-docs-main .betterdocs-breadcrumb {
  margin-bottom: 8px;
}

/* ==========================================================================
   Formulieren (Gravity Forms)
   ==========================================================================

   Gravity Forms geeft zijn velden en knoppen geen eigen kleur mee, dus vielen
   ze terug op wat de browser standaard doet: een rand in #767676 en een
   verzendknop met zwarte tekst op #F0F0F0. Geen van die drie staat in het
   palet, en knoptekst hoort inkt te zijn.
*/

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
  border-color: #8A88A3;
  color: var(--wp--preset--color--text);
}

.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
  outline: 2px solid var(--wp--preset--color--action);
  outline-offset: 1px;
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button {
  color: var(--wp--preset--color--text);
  background-color: var(--wp--preset--color--surface);
}

/* Tools & modules: editorial pages in the existing FotoProTools palette. */
.fpt-library { color:var(--wp--preset--color--text); font:400 1.0625rem/1.7 var(--wp--preset--font-family--lato); }
.fpt-library-inner { width:min(1200px, calc(100% - 48px)); margin-inline:auto; }
.fpt-library h1 { max-width:900px; margin:0 0 24px; color:var(--wp--preset--color--primary); font:500 clamp(2.25rem,4.5vw,4rem)/1.12 var(--wp--preset--font-family--playfair); }
.fpt-library h2, .fpt-library h3 { color:var(--wp--preset--color--primary); font-family:var(--wp--preset--font-family--space-grotesk); font-weight:700; line-height:1.3; }
.fpt-library h2 { font-size:clamp(1.5rem,2.5vw,2rem); margin:0 0 20px; }
.fpt-library h3 { font-size:1.25rem; margin:0 0 12px; }
.fpt-library p { margin:0 0 20px; }
.fpt-library .fpt-library-lede { max-width:720px; font-size:1.25rem; line-height:1.65; margin-bottom:32px; }
.fpt-library-banner { padding:80px 0 48px; background:var(--wp--preset--color--surface); border-bottom:1px solid var(--wp--preset--color--border); position:relative; }
.fpt-library-banner::before { content:''; position:absolute; inset:0 0 auto; height:6px; background:var(--wp--preset--gradient--fpt-btn-mint-blue); }
.fpt-library-journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:56px; font:700 1rem/1.4 var(--wp--preset--font-family--space-grotesk); }
.fpt-library-journey span { border-top:2px solid var(--wp--preset--color--border); padding-top:16px; }
.fpt-library-jumps { display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 56px; }
.fpt-library-jumps a { padding:10px 18px; border:1px solid var(--wp--preset--color--border); border-radius:999px; text-decoration:none; color:var(--wp--preset--color--primary); background:var(--wp--preset--color--bg); font:700 .9375rem/1.5 var(--wp--preset--font-family--space-grotesk); }
.fpt-library-jumps a:hover { background:var(--wp--preset--color--surface); text-decoration:underline; }
.fpt-library-intro { max-width:760px; margin-bottom:48px; }
.fpt-library-category { margin:0 0 72px; }
.fpt-library [id] { scroll-margin-top:calc(var(--fpt-header-h,96px) + 24px); }
.fpt-library-sectionhead { display:flex; gap:20px; align-items:center; margin-bottom:24px; }
.fpt-library-sectionhead h2 { margin:0; }
.fpt-library-sectionhead>span { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%; background:var(--wp--preset--gradient--fpt-btn-purple-cream); font-weight:700; }
.fpt-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.fpt-module-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--wp--preset--color--border); border-radius:16px; color:var(--wp--preset--color--text); background:var(--wp--preset--color--bg); text-decoration:none; }
.fpt-module-card:hover { background:var(--wp--preset--color--surface); }
.fpt-module-card:hover .fpt-module-more { text-decoration:underline; text-underline-offset:4px; }
.fpt-module-mark { display:inline-block; margin-bottom:24px; color:var(--wp--preset--color--muted); font:700 .875rem var(--wp--preset--font-family--space-grotesk); }
.fpt-module-card p { font-size:1rem; }
.fpt-module-more { margin-top:auto; display:flex; justify-content:space-between; gap:12px; color:var(--wp--preset--color--primary); font:700 1rem/1.5 var(--wp--preset--font-family--space-grotesk); }
.fpt-library a:focus-visible, .fpt-library summary:focus-visible { outline:3px solid var(--wp--preset--color--action); outline-offset:5px; }
.fpt-library-crumb { padding:24px 0; font-size:.875rem; color:var(--wp--preset--color--muted); }
.fpt-library-crumb a { color:var(--wp--preset--color--primary); text-underline-offset:4px; }
.fpt-module-hero { display:grid; grid-template-columns:1.35fr 1fr; align-items:center; gap:64px; padding:32px 0 56px; }
.fpt-module-hero h1 { font-size:clamp(2.25rem,4vw,3.5rem); }
.fpt-module-audience { margin-top:24px!important; font-size:.875rem; color:var(--wp--preset--color--muted); }
.fpt-module-visual { margin:0; padding:40px; border-radius:24px; background:var(--wp--preset--color--surface); text-align:center; }
.fpt-module-visual img { display:block; width:100%; height:280px; object-fit:contain; margin:auto; }
.fpt-module-visual figcaption, .fpt-module-diagram>p { font-size:.8125rem; color:var(--wp--preset--color--muted); margin:24px 0 0; }
.fpt-module-diagram { text-align:left; }
.fpt-module-diagram>div { display:flex; gap:16px; align-items:center; padding:20px 0; border-bottom:1px solid var(--wp--preset--color--border); }
.fpt-module-diagram b { color:var(--wp--preset--color--primary); }
.fpt-module-process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:24px 0; margin:0 0 64px; list-style:none; border-block:1px solid var(--wp--preset--color--border); }
.fpt-module-process li { display:flex; gap:16px; align-items:center; font:700 1rem/1.5 var(--wp--preset--font-family--space-grotesk); }
.fpt-module-process b { background:var(--wp--preset--gradient--fpt-btn-mint-blue); padding:10px; border-radius:8px; }
.fpt-module-body { display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:start; }
.fpt-module-body section { margin-bottom:40px; }
.fpt-module-example { padding:32px; border-radius:16px; background:var(--wp--preset--color--surface); border-top:5px solid var(--wp--preset--color--accent-lilac); }
.fpt-module-example h2 { font-size:1.25rem; }
.fpt-module-example hr { border:0; border-top:1px solid var(--wp--preset--color--border); margin:28px 0; }
.fpt-module-example p:last-child { margin-bottom:0; }
.fpt-module-question { max-width:780px; margin:32px 0 64px; }
.fpt-module-question details { border-block:1px solid var(--wp--preset--color--border); padding:20px 0; }
.fpt-module-question summary { cursor:pointer; font-weight:700; color:var(--wp--preset--color--primary); min-height:32px; }
.fpt-module-question details p { margin:16px 0 0; }
.fpt-module-related { margin:64px 0; }
.fpt-library-cta { display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; padding:40px; margin:64px 0; border-radius:20px; background:var(--wp--preset--color--surface); border-top:6px solid var(--wp--preset--color--accent-peach); }
.fpt-library-cta .fpt-home-textlink { display:block; }
.fpt-parent-route { padding:32px 0 64px; }
.fpt-parent-content { max-width:850px; padding-block:64px; }
.fpt-parent-content>section { margin-bottom:56px; }
.fpt-parent-steps { padding-left:28px; }
.fpt-parent-steps li { padding:0 0 16px 12px; }
.fpt-library-showcase { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:40px 0 64px; }
.fpt-library-showcase a { padding:24px; background:var(--wp--preset--color--surface); border-radius:16px; text-align:center; text-decoration:none; color:var(--wp--preset--color--primary); font-weight:700; }
.fpt-library-showcase img { display:block; width:100%; height:180px; object-fit:contain; margin:0 auto 20px; }
@media(max-width:960px) {
 .fpt-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fpt-module-hero, .fpt-module-body { gap:32px; }
 .fpt-module-visual { padding:24px; }
}
@media(max-width:700px) {
 .fpt-library-inner { width:calc(100% - 40px); }
 .fpt-library-banner { padding:48px 0 24px; }
 .fpt-library-grid, .fpt-module-hero, .fpt-module-body, .fpt-module-process, .fpt-library-cta { grid-template-columns:1fr; }
 .fpt-library-journey { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:36px; }
 .fpt-module-hero { padding-top:16px; }
 .fpt-module-visual img { height:200px; }
 .fpt-library-cta { padding:28px 24px; }
 .fpt-module-process { gap:16px; margin-bottom:40px; }
 .fpt-library-jumps { gap:8px; }
 .fpt-library-jumps a { padding:10px 14px; }
 .fpt-library-showcase { grid-template-columns:1fr; }
 .fpt-library-showcase a { display:flex; align-items:center; gap:24px; text-align:left; }
 .fpt-library-showcase img { width:100px; height:100px; margin:0; }
}
.fpt-background-demo,.fpt-card-demo,.fpt-download-demo { margin:0; padding:32px; border-radius:24px; background:var(--wp--preset--color--surface); }
.fpt-background-demo fieldset { padding:0; margin:0; border:0; min-width:0; }
.fpt-background-demo legend { font:700 1.125rem/1.4 var(--wp--preset--font-family--space-grotesk); margin-bottom:20px; }
.fpt-background-demo input { position:absolute; width:1px; height:1px; opacity:0; }
.fpt-background-demo label { display:inline-block; padding:8px 12px; margin:0 4px 8px 0; border:1px solid var(--wp--preset--color--border); border-radius:999px; background:var(--wp--preset--color--bg); cursor:pointer; font-weight:700; }
.fpt-background-demo input:checked+label { background:var(--wp--preset--color--primary); color:var(--wp--preset--color--white); }
.fpt-background-demo input:focus-visible+label { outline:3px solid var(--wp--preset--color--action); outline-offset:3px; }
.fpt-demo-portrait { margin-top:16px; border-radius:16px; height:250px; display:flex; justify-content:center; overflow:hidden; background:var(--wp--preset--gradient--fpt-btn-purple-cream); color:var(--wp--preset--color--primary); }
.fpt-demo-portrait svg { width:220px; height:250px; }
#fpt-bg-warm:checked~.fpt-demo-portrait { background:var(--wp--preset--gradient--fpt-cta); }
#fpt-bg-fris:checked~.fpt-demo-portrait { background:var(--wp--preset--gradient--fpt-btn-mint-blue); }
.fpt-library .fpt-demo-caption,.fpt-card-demo figcaption,.fpt-download-demo figcaption { margin:20px 0 0; color:var(--wp--preset--color--muted); font-size:.8125rem; line-height:1.5; }
.fpt-demo-paper { padding:28px; border-radius:12px; background:var(--wp--preset--color--bg); border-top:8px solid var(--wp--preset--color--accent-peach); box-shadow:0 8px 24px rgba(22,21,47,.08); }
.fpt-demo-paper h2 { font-size:1.75rem; }
.fpt-demo-paper>p { font-size:1rem; }
.fpt-demo-access { display:flex; gap:16px; align-items:center; border-block:1px solid var(--wp--preset--color--border); padding:20px 0; margin:20px 0; }
.fpt-demo-access>span { display:grid; place-items:center; width:60px; height:60px; flex:none; border:2px dashed var(--wp--preset--color--muted); font-weight:700; }
.fpt-demo-access p { font-size:.875rem; margin:0; }
.fpt-download-demo { background:var(--wp--preset--color--primary); color:var(--wp--preset--color--white); }
.fpt-download-demo h2 { color:var(--wp--preset--color--white); font-size:2rem; }
.fpt-download-demo ol { padding:0; list-style:none; }
.fpt-download-demo li { display:flex; gap:16px; margin:24px 0; align-items:center; }
.fpt-download-demo li span { padding:8px; color:var(--wp--preset--color--text); background:var(--wp--preset--gradient--fpt-btn-mint-blue); border-radius:8px; }
.fpt-download-demo figcaption { color:var(--wp--preset--color--white); }
.fpt-context-modules,.fpt-module-cost-context { margin-block:64px; }
@media(max-width:700px){.fpt-background-demo,.fpt-card-demo,.fpt-download-demo{padding:24px}.fpt-demo-paper{padding:20px}.fpt-context-modules .fpt-library-inner{width:100%}}
.fpt-audience{color:#24224d}.fpt-audience-inner{max-width:1200px;margin:auto;padding:0 24px}.fpt-audience-split{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}.fpt-audience-hero{padding:64px 0 72px;background:linear-gradient(120deg,#f7f6fb,#fff4ef 75%,#edf7f4);border-bottom:1px solid #e4e3ec}.fpt-audience-crumb{font-size:14px;margin-bottom:32px}.fpt-audience h1{font-family:var(--wp--preset--font-family--playfair);font-size:clamp(34px,4vw,54px);line-height:1.15;margin:16px 0 24px}.fpt-audience h2{font-size:clamp(28px,3vw,38px);line-height:1.2;margin:12px 0 22px}.fpt-audience p{line-height:1.75}.fpt-audience-lede{font-size:19px;max-width:760px}.fpt-audience a{text-underline-offset:4px}.fpt-audience-jump{display:inline-block;margin-top:24px;font-size:14px}.fpt-audience-flow{background:#24224d;color:#fff;border-radius:28px;padding:32px;box-shadow:0 18px 55px #24224d16}.fpt-audience-flow ol{list-style:none;margin:24px 0;padding:0;display:grid;gap:24px}.fpt-audience-flow li{display:flex;align-items:flex-start;gap:18px}.fpt-audience-flow li>span{border-radius:50%;background:#ffffff16;color:#f7bb97;font-weight:700;display:grid;place-items:center;width:42px;height:42px;flex-shrink:0}.fpt-audience-flow strong{font-size:19px}.fpt-audience-flow li p{color:#ddd9eb;font-size:15px;margin:4px 0 0}.fpt-audience-flow-note{font-size:12px;border-top:1px solid #ffffff25;padding-top:18px;color:#ddd9eb}.fpt-audience-section{padding-top:72px;padding-bottom:64px}.fpt-audience-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}.fpt-audience-cards article{position:relative;border:1px solid #e4e3ec;border-radius:20px;padding:26px;display:flex;flex-direction:column;box-shadow:0 5px 24px #24224d05}.fpt-audience-card-number{background:#f3eaf0;color:#75425f;border-radius:10px;padding:8px 12px;width:fit-content;font-weight:700;font-size:13px}.fpt-audience-cards h3{font-size:21px;margin:20px 0 8px}.fpt-audience-cards h3 a{color:#24224d;text-decoration:none}.fpt-audience-cards h3 a:after{content:"";position:absolute;inset:0}.fpt-audience-cards article:hover{border-color:#b687ae;background:#fdfbfc}.fpt-audience-cards p{margin:0 0 20px;font-size:16px}.fpt-audience-card-link{margin-top:auto;color:#75425f;font-size:14px;font-weight:700}.fpt-audience-note{font-size:14px;color:#5a5876;margin-top:24px}.fpt-audience-experience{background:#f7f6fb;padding:64px 0}.fpt-audience-experience aside{background:#fff;border-radius:20px;padding:32px;border-top:4px solid #dd5e89}.fpt-audience-experience h3{font-size:23px;margin-top:0}.fpt-audience-practical{display:grid;grid-template-columns:1fr 1fr;gap:40px}.fpt-audience-practical h3{font-size:22px}.fpt-audience-faq{padding-bottom:64px}.fpt-audience-faq details{border-bottom:1px solid #e4e3ec;padding:20px 0}.fpt-audience-faq summary{cursor:pointer;font-size:18px;font-weight:700}.fpt-audience-faq details p{max-width:800px}.fpt-audience-close{background:linear-gradient(110deg,#f8eaf0,#fff3e8);padding:56px 0}.fpt-audience-cross{padding-top:24px;border-top:1px solid #ddd5df;margin-top:32px;font-size:15px}.fpt-audience [id]{scroll-margin-top:180px}.fpt-audience a:focus-visible,.fpt-audience summary:focus-visible{outline:3px solid #75425f;outline-offset:5px}@media(max-width:900px){.fpt-audience-split{grid-template-columns:1fr;gap:32px}.fpt-audience-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.fpt-audience-flow{max-width:650px}}@media(max-width:550px){.fpt-audience-hero{padding:32px 0 40px}.fpt-audience-cards,.fpt-audience-practical{grid-template-columns:1fr;gap:18px}.fpt-audience-section{padding-top:44px;padding-bottom:40px}.fpt-audience-flow{padding:24px}.fpt-audience-lede{font-size:17px}.fpt-audience-experience{padding:40px 0}.fpt-audience-close{padding:40px 0}.fpt-audience-faq{padding-bottom:40px}}