/* Styling for the Flatsome/UX Builder shortcode compatibility layer (inc/ux-builder-compat.php) */

.fpt-uxb-section {
  width: 100%;
  box-sizing: border-box;
}
.fpt-uxb-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.fpt-uxb-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  margin-bottom: 16px;
  /* Column spacing is done via padding-on-column + negative-margin-on-row
   * (the "gutter" technique) instead of column-gap -- see the .fpt-uxb-col
   * comment below for why. */
  margin-left: -16px;
  margin-right: -16px;
}
.fpt-uxb-row--h-center {
  justify-content: center;
}
.fpt-uxb-row--h-right {
  justify-content: flex-end;
}
/* A "full width row" already spans the whole section (see
 * .fpt-uxb-row--full below) -- it must NOT also get the -16px gutter
 * margin, or it overflows the page by 16px on each side and creates a
 * horizontal scrollbar. */
.fpt-uxb-row--full {
  margin-left: 0;
  margin-right: 0;
}
/* Flatsome's "Full Width Row" option (row_full_width) breaks the row out
 * of the section's normal 1200px content cap so it can span (nearly) the
 * whole browser width -- used on live e.g. for the pricing table on
 * /kosten/. A translateX/100vw "full bleed" trick doesn't work here
 * because the row is nested several levels deep and percentage-based
 * offsets resolve against the (still 1200px-capped) containing block, not
 * the viewport -- it just pushed the row off-center. Instead, when a
 * section-inner's direct child is a full-width row, drop the cap on the
 * section-inner itself so the row can use the section's actual width
 * (already 100% of the page via .fpt-uxb-section). */
.fpt-uxb-section-inner:has(> .fpt-uxb-row--full) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.fpt-uxb-row--full {
  width: 100%;
  max-width: none;
}

.fpt-uxb-col {
  box-sizing: border-box;
  min-width: 0;
  /* Columns get an inline flex-basis/max-width percentage straight from
   * PHP (e.g. "58.3333%" + "41.6667%" for a 2-column row) sized as if the
   * columns alone fill the row. But .fpt-uxb-row also needs a visual gap
   * between columns, and percentages that already sum to 100% overflow
   * the row by however much extra gap space is added -- the last column
   * then wraps onto its own line (e.g. a 2-column contact-form-plus-info
   * row rendering as two stacked full-width blocks instead of side by
   * side). A CSS `gap` on the row doesn't get subtracted from percentage
   * flex-basis automatically, so instead of `gap` we build the gutter out
   * of column padding + a matching negative margin on the row (set
   * above): the row is pulled 16px wider than its container on each
   * side, and each column's own 16px padding eats that space right back
   * -- so percentages that sum to exactly 100% now fit perfectly
   * regardless of how many columns or what split they use. */
  padding-left: 16px;
  padding-right: 16px;
}
.fpt-uxb-col-inner > *:first-child {
  margin-top: 0;
}
.fpt-uxb-col--text-center .fpt-uxb-col-inner {
  text-align: center;
}
.fpt-uxb-col--text-left .fpt-uxb-col-inner {
  text-align: left;
}
.fpt-uxb-col--text-right .fpt-uxb-col-inner {
  text-align: right;
}

.fpt-uxb-gap {
  display: block;
  width: 100%;
}

.fpt-uxb-text {
  color: var(--wp--preset--color--text);
}
.fpt-uxb-text p:first-child {
  margin-top: 0;
}
.fpt-uxb-text table {
  width: 100%;
}

.fpt-uxb-title {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--playfair);
  line-height: 1.25;
  font-weight: 500;
}
/* Visual size/spacing per heading level, independent of the actual HTML tag
 * used to render it (h1..h6 or div) -- values match default browser heading
 * sizes/margins so the SEO de-duplication in fpt_uxb_title() (ux-builder-
 * compat.php) never changes how a title looks, only its semantic tag. */
.fpt-uxb-title--lvl-1 { font-size: 2em; margin: 0.67em 0; }
.fpt-uxb-title--lvl-2 { font-size: 1.5em; margin: 0.83em 0; }
.fpt-uxb-title--lvl-3 { font-size: 1.17em; margin: 1em 0; }
.fpt-uxb-title--lvl-4 { font-size: 1em; margin: 1.33em 0; }
.fpt-uxb-title--lvl-5 { font-size: 0.83em; margin: 1.67em 0; }
.fpt-uxb-title--lvl-6 { font-size: 0.67em; margin: 2.33em 0; }

/* Screen-reader-only: gebruikt voor de vangnet-H1 op pagina's die zelf
 * helemaal geen kop hebben (zie functions.php). Wel in de HTML voor
 * Google/screenreaders, niet zichtbaar in de layout. */
.fpt-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fpt-uxb-divider {
  /* Live's [divider] shortcode ("is-divider") never renders as a plain
   * full-width gray rule -- it's always a short (a few hundred px)
   * gradient bar, usually centered above a heading, echoing the gradient
   * of a nearby button. We don't have a per-instance gradient/alignment
   * from the original shortcode attributes, so fall back to the site's
   * primary CTA gradient at a size close to live's typical usage. */
  display: block;
  border: none;
  height: 4px;
  width: 260px;
  max-width: 60%;
  margin: 32px auto;
  border-radius: 2px;
  background-image: var(--wp--preset--gradient--fpt-cta);
}
.fpt-uxb-col--text-left .fpt-uxb-divider {
  margin-left: 0;
}

.fpt-uxb-btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 99px;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700;
  text-decoration: none;
  margin: 4px 8px 4px 0;
}
.fpt-uxb-btn--fill {
  /* Not !important: legacy per-button classes from legacy-custom.css
   * (e.g. .demobutton, .webshopbutton, .toolbutton) set their own text
   * color for their specific gradient and must be able to win. This class
   * only supplies a sane default for buttons with no legacy class. */
  background: var(--wp--preset--gradient--fpt-cta);
  color: #ffffff;
}
.fpt-uxb-btn--outline {
  background: transparent;
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--text) !important;
}
.fpt-uxb-btn--outline:hover {
  background: var(--wp--preset--color--primary);
  color: #fff !important;
}
/* The Website Coach "rankingsrapport" CTA on /website-laten-maken/ links
 * out to a partner site and live gives it a distinct solid rust/orange
 * treatment (not the site's usual pink/yellow CTA gradient) with
 * uppercase text and an asymmetric arrow-icon padding. Target by the
 * partner href since this is a one-off brand exception, not a general
 * button style. */
.fpt-uxb-btn[href*="website-coach.nl"] {
  background: #c05530;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  border-radius: 14px;
  padding: 10px 20px 10px 40px;
}
.fpt-uxb-btn[href*="website-coach.nl"]:hover {
  background: #a84527;
  color: #ffffff;
}

.fpt-uxb-featured-box {
  text-align: center;
}
.fpt-uxb-featured-box__img {
  max-width: 90px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}
.fpt-uxb-featured-box h5 {
  margin-bottom: 4px;
  color: var(--wp--preset--color--primary);
}
.fpt-uxb-featured-box-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
/* "references" variant (used on /referenties/ and similar testimonial
 * grids): live renders this as a left-aligned row -- circular avatar on
 * the left, quote heading + name/company link on the right -- not the
 * generic featured-box's centered/stacked layout. Same treatment as the
 * homepage's .fpt-testimonial-card. */
.fpt-uxb-featured-box.references {
  display: flex;
  align-items: flex-start;
  text-align: left;
  background: var(--wp--preset--color--surface);
  border-radius: 16px;
  padding: 24px;
}
.fpt-uxb-featured-box.references .fpt-uxb-featured-box__img {
  flex: 0 0 auto;
  width: 111px;
  height: 114px;
  max-width: 111px;
  border-radius: 90px;
  object-fit: cover;
  margin: 0 16px 0 0;
}
.fpt-uxb-featured-box.references h3 {
  font-size: 20px;
  font-weight: 500;
  color: #3A3860;
  line-height: 1.4;
  margin: 0 0 10px 0;
}
.fpt-uxb-featured-box.references p {
  font-size: 16px;
  font-weight: 400;
  color: #5A5876;
  line-height: 1.6;
  margin: 0;
}
.fpt-uxb-featured-box.references a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.fpt-uxb-featured-box.references a:hover {
  text-decoration: underline;
}

.fpt-uxb-image {
  /* Live consistently renders these UX-Builder [image] icons at ~250-260px
   * regardless of their native/uploaded resolution (e.g. icon2-1024x1024.png
   * is displayed at 257x250 on live's /tools/ page). Without a cap here the
   * icon fills its entire 50%-width column at full native size, dwarfing
   * the paired text and making feature rows look badly broken/oversized. */
  max-width: 260px;
  width: 100%;
  height: auto;
}

.fpt-uxb-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-sizing: border-box;
}
.fpt-uxb-banner__content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
}

@media (max-width: 782px) {
  .fpt-uxb-col {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* [blog_posts] -- /blog/ listing grid. */
.fpt-uxb-blog-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
  margin: 32px 0;
}
.fpt-uxb-blog-posts--cols-1 {
  grid-template-columns: 1fr;
}
.fpt-uxb-blog-posts--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.fpt-uxb-blog-posts--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 849px) {
  .fpt-uxb-blog-posts {
    grid-template-columns: 1fr !important;
  }
}
.fpt-uxb-blog-post__divider {
  height: 4px;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 2px;
  background-image: var(--wp--preset--gradient--fpt-cta);
}
.fpt-uxb-blog-post__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 20px;
  background: var(--wp--preset--color--surface);
}
.fpt-uxb-blog-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fpt-uxb-blog-post__title {
  margin: 0 0 8px;
}
.fpt-uxb-blog-post__title a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--playfair);
}
.fpt-uxb-blog-post__title--xxlarge a {
  font-size: 28px;
}
.fpt-uxb-blog-post__title--xlarge a {
  font-size: 24px;
}
.fpt-uxb-blog-post__title--large a {
  font-size: 20px;
}
.fpt-uxb-blog-post__title--medium a {
  font-size: 17px;
}
.fpt-uxb-blog-post__date {
  color: var(--wp--preset--color--text);
  opacity: 0.6;
  font-size: 14px;
  margin: 0 0 8px;
}
.fpt-uxb-blog-post__excerpt {
  color: var(--wp--preset--color--text);
  margin: 0 0 12px;
}
.fpt-uxb-blog-post__readmore {
  display: inline-block;
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fpt-uxb-blog-post__readmore:hover {
  text-decoration: underline;
}

/* Legacy per-image sizing classes (e.g. .overons, from legacy-custom.css)
 * set an explicit !important width/height for specific photos ported from
 * the old Flatsome build (e.g. the 750x439 bruidsfotografie hero photo).
 * Our generic .fpt-uxb-image max-width:260px cap (added for UX-Builder
 * icon images) was overriding those on the *width* property -- max-width
 * always wins over width even when width has !important, since they are
 * different properties in the box model algorithm -- shrinking the photo
 * to 260px wide while its !important height stayed at 439px, distorting
 * it into a narrow, too-tall rectangle. Give the legacy class a higher
 * max-width so its own !important width/height pair can apply as intended. */
.fpt-uxb-image.overons {
  max-width: 750px;
}