/* FotoProTools drop-in theme - component/section styles */

/* Hero
 * Live (fotoprotools.nl) shows ONE continuous gradient banner --
 * uploads/2021/02/header-scaled.png, the same file live loads as
 * <img alt="FotoProTools Header Background"> -- running from the very top of
 * the page (behind the nav bar) down to just below the hero copy. An earlier
 * revision of this theme reduced it to the narrow 161px strip behind the nav
 * only, which is why the homepage lost the coloured bands next to the hero.
 * Restored here.
 *
 * Geometry: the artwork's coloured bands sit in the left and right thirds and
 * the middle is white by design, so the centred hero text keeps a clean white
 * backdrop -- no overlay/mask needed. `cover` + `top center` reproduces live's
 * framing (the bands are cut off at the bottom edge there too; that hard edge
 * is in the source artwork).
 *
 * The layer reaches up past the hero's own box by --fpt-header-h so it also
 * covers the header row -- see the "Homepage banner" block in global.css,
 * which makes the header transparent at the top of the page for exactly this.
 */
.fpt-hero {
  text-align: center;
  position: relative;
  z-index: 0;
}
body.home .fpt-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--fpt-header-h, 96px));
  /* Niet centreren met left:50% + translateX(-50%) + width:100vw. `100vw` telt
   * de breedte van de verticale scrollbalk mee en `clientWidth` niet, dus op een
   * browser met een klassieke scrollbalk (Windows, standaard ~15px) wordt deze
   * laag ~15px breder dan de pagina en steekt hij links en rechts uit -- goed
   * voor een horizontale scrollbalk over de hele site. `.fpt-hero` is alignfull
   * en dus al zo breed als de pagina, dus left/right op 0 geeft exact hetzelfde
   * beeld zonder die overschrijding. */
  left: 0;
  right: 0;
  height: calc(100% + var(--fpt-header-h, 96px));
  background-image: url('/app/uploads/2021/02/header-scaled.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  pointer-events: none;
}
/* Phones: the banner box is much taller than it is wide, so `cover` scales the
 * artwork to fill the HEIGHT -- which zooms so far in that only the plain white
 * middle of the graphic is left on screen and the coloured bands disappear
 * entirely. Fit it to the width instead: the bands then show at natural
 * proportions as a band across the top of the page (~57% of the viewport width
 * tall), with the hero copy below it on white. */
@media (max-width: 782px) {
  body.home .fpt-hero::before {
    background-size: 100% auto;
  }
}
.fpt-hero .fpt-lede {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: var(--wp--preset--color--text);
}
.fpt-hero .fpt-steps {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Feature split rows */
.fpt-feature-row {
  margin-top: 56px;
  margin-bottom: 56px;
}
.fpt-feature-icon img {
  max-width: 220px;
  height: auto;
}

/* Testimonials
 * Matches live's Flatsome "icon-box references" layout: a circular avatar
 * on the left (111px), quote text as an H3, and the name/company as a P
 * with the company name as a real hyperlink -- not a bordered card.
 */
.fpt-testimonials {
  text-align: center;
}
.fpt-testimonial-card {
  display: flex;
  align-items: flex-start;
  text-align: left;
  background: var(--wp--preset--color--surface);
  border-radius: 16px;
  padding: 24px;
}
.fpt-testimonial-avatar {
  flex: 0 0 auto;
  width: 111px;
}
.fpt-testimonial-avatar img {
  display: block;
  width: 111px;
  height: 114px;
  object-fit: cover;
  border-radius: 90px;
}
.fpt-testimonial-text {
  padding-left: 16px;
}
.fpt-testimonial-text h3 {
  font-size: 20px;
  font-weight: 500;
  color: #3A3860;
  line-height: 32px;
  margin: 0 0 10px 0;
}
.fpt-testimonial-text p {
  font-size: 16px;
  font-weight: 400;
  color: #5A5876;
  line-height: 1.6;
  margin: 0;
}
.fpt-testimonial-text p a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.fpt-testimonial-text p a:hover {
  text-decoration: underline;
}

/* Video (animatie embed between testimonials and final CTA) */
.fpt-video-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}
.fpt-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Click-to-play facade for the video embed above: shows the YouTube
 * thumbnail + a play button, and only loads the real iframe (and YouTube's
 * scripts) once someone actually clicks it. */
.fpt-video-facade {
  cursor: pointer;
  background-color: var(--wp--preset--color--text);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpt-video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
}
.fpt-video-facade:hover::after {
  background: rgba(0, 0, 0, 0.05);
}
.fpt-video-play {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.fpt-video-play:hover {
  transform: scale(1.06);
  background: #fff;
}
.fpt-video-play::before {
  content: "";
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #16152F;
  margin-left: 4px;
}

/* Final CTA */
.fpt-final-cta {
  text-align: center;
}

/* Generic content pages (marketing pages not yet given a bespoke pattern).
 * Width is controlled per-block by wp:post-title/wp:post-content's own
 * "align" setting (align:"wide" = theme.json's 1200px wideSize, set in
 * page.html / single.html) -- matching the width the old UX Builder rows
 * were actually designed for. This class used to hard-cap everything at
 * 780px regardless of that setting, which squeezed every legacy page's
 * content into a narrow column and threw off centering/spacing versus the
 * live site.
 */
.fpt-page {
}

/* Anchor-scroll offset for the sticky header (.fpt-header, ~96px tall,
 * position: sticky, z-index: 999 -- see functions.php/global.css). Without
 * this, clicking any in-page anchor link (e.g. a BetterDocs "Table Of
 * Contents" entry in the kennisbank, or any #section link elsewhere)
 * scrolls its target flush to the very top of the viewport, right behind
 * the sticky header -- the heading/text ends up hidden underneath it and
 * unreadable. Applied sitewide since the sticky header is on every page,
 * not just the kennisbank.
 */
:target,
h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 120px;
}

/* ==========================================================================
   Mobiel: de uitgelichte secties op de voorpagina
   ==========================================================================

   De feature-rijen zijn tweekoloms: een icoon naast een tekstblok. Onder 782px
   stapelt WordPress die kolommen vanzelf, maar de maatvoering bleef die van
   een breed scherm staan: 56px marge boven en onder elke rij, een icoon dat
   220px breed mag zijn en links uitgelijnd staat, en een sierlijn van 510px.
   Gestapeld levert dat een icoon op dat eenzaam in het midden van veel wit
   hangt -- precies wat er op een telefoon te zien was.
*/

@media (max-width: 781px) {
  .fpt-feature-row {
    margin-top: 32px;
    margin-bottom: 32px;
    row-gap: 8px;
  }

  /* Icoon boven de tekst, kleiner en gecentreerd */
  .fpt-feature-icon {
    margin: 0 auto 8px auto;
    text-align: center;
  }

  .fpt-feature-icon img {
    max-width: 140px;
  }

  /* De sierlijn is 510px breed opgegeven; laat hem meeschalen */
  .fpt-feature-divider {
    width: 100% !important;
    margin: 8px 0 12px 0 !important;
  }

  /* Testimonials: avatar boven de tekst in plaats van ernaast */
  .fpt-testimonial-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .fpt-testimonial-text {
    padding-left: 0;
    padding-top: 12px;
  }

  .fpt-final-cta h2 {
    font-size: 2.2rem !important;
  }
}

/* Homepage discovery and workflow: use the existing WordPress brand tokens. */
.fpt-home-guide, .fpt-home-workflow {
  padding: clamp(48px, 6vw, 88px) 24px;
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--lato);
}
.fpt-home-inner { max-width: 1200px; margin: 0 auto; }
.fpt-home-guide { background: var(--wp--preset--color--surface); }
.fpt-home-eyebrow { margin: 0 0 16px; font: 700 0.8125rem/1.4 var(--wp--preset--font-family--space-grotesk); letter-spacing: .08em; text-transform: uppercase; }
.fpt-home-inner h2 { max-width: 760px; margin: 0 0 20px; color: var(--wp--preset--color--primary); font: 700 clamp(1.75rem, 3vw, 2.5rem)/1.2 var(--wp--preset--font-family--space-grotesk); }
.fpt-home-inner h3 { margin: 0 0 16px; font: 700 clamp(1.25rem, 2vw, 1.5rem)/1.3 var(--wp--preset--font-family--space-grotesk); }
.fpt-home-intro { max-width: 680px; font-size: 1.125rem; line-height: 1.65; margin: 0 0 36px; }
.fpt-home-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fpt-home-choice { display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 40px; border: 1px solid var(--wp--preset--color--border); border-radius: 16px; background: var(--wp--preset--color--bg); color: var(--wp--preset--color--primary); text-decoration: none; }
.fpt-home-choice::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--wp--preset--gradient--fpt-cta); }
.fpt-home-choice:nth-child(2)::before { background: var(--wp--preset--gradient--fpt-btn-mint-blue); }
.fpt-home-choice p { margin: 0 0 28px; line-height: 1.65; color: var(--wp--preset--color--text); }
.fpt-home-link { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; font: 700 1rem/1.5 var(--wp--preset--font-family--space-grotesk); }
.fpt-home-choice:hover .fpt-home-link { text-decoration: underline; text-underline-offset: 4px; }
.fpt-home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.fpt-home-actions--hero { justify-content: center; margin: 32px auto 24px; }
.fpt-home-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px; border-radius: 8px; background: var(--wp--preset--gradient--fpt-cta); color: var(--wp--preset--color--text); text-decoration: none; font: 700 1rem/1.4 var(--wp--preset--font-family--space-grotesk); }
.fpt-home-button:hover { color: var(--wp--preset--color--text); text-decoration: underline; text-underline-offset: 4px; }
.fpt-home-textlink { display: inline-block; padding: 12px 0; color: var(--wp--preset--color--primary); font: 700 1rem/1.5 var(--wp--preset--font-family--space-grotesk); text-underline-offset: 5px; }
.fpt-home-choice:focus-visible, .fpt-home-button:focus-visible, .fpt-home-textlink:focus-visible { outline: 3px solid var(--wp--preset--color--action); outline-offset: 5px; }
.fpt-home-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding: 0; list-style: none; font: 400 0.875rem/1.5 var(--wp--preset--font-family--lato); }
.fpt-home-benefits li::before { content: '✓'; margin-right: 8px; color: var(--wp--preset--color--primary); }
.fpt-home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; margin: 40px 0 16px; }
.fpt-home-steps li { border-top: 1px solid var(--wp--preset--color--border); padding-top: 24px; }
.fpt-home-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 24px; border-radius: 50%; background: var(--wp--preset--gradient--fpt-btn-purple-cream); color: var(--wp--preset--color--text); font: 700 1rem var(--wp--preset--font-family--space-grotesk); }
.fpt-home-steps p, .fpt-home-next p { line-height: 1.65; margin: 0; }
.fpt-home-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; padding: 32px; margin-top: 48px; border-radius: 16px; background: var(--wp--preset--color--surface); }
.fpt-home-next h3 { margin-bottom: 8px; }
#fpt-workflow-title { scroll-margin-top: calc(var(--fpt-header-h, 96px) + 24px); }
@media (max-width: 700px) {
  .fpt-home-choices, .fpt-home-steps { grid-template-columns: 1fr; }
  .fpt-home-choice, .fpt-home-next { padding: 28px 24px; }
  .fpt-home-actions--hero { flex-direction: column; gap: 8px; }
  .fpt-home-benefits { flex-direction: column; gap: 8px; }
}

/* Compact homepage offering: six linked cards, with decorative brand icons. */
.fpt-home-offering { padding:clamp(48px,6vw,88px) 24px; background:var(--wp--preset--color--bg); color:var(--wp--preset--color--text); font:400 1.0625rem/1.65 var(--wp--preset--font-family--lato); }
.fpt-offering-heading { max-width:760px; margin:0 auto 36px; text-align:center; }
.fpt-offering-heading .fpt-home-eyebrow { display:inline-block; padding:8px 16px; border-radius:999px; background:var(--wp--preset--gradient--fpt-btn-purple-cream); color:var(--wp--preset--color--text); }
.fpt-offering-heading h2 { margin:0 auto 16px; }
.fpt-offering-heading>p:last-child { margin:0; font-size:1.125rem; }
.fpt-offering-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.fpt-offering-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px; border:1px solid var(--wp--preset--color--border); border-radius:16px; background:var(--wp--preset--color--bg); color:var(--wp--preset--color--text); text-decoration:none; box-shadow:0 6px 24px rgba(22,21,47,.04); }
.fpt-offering-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:20px; border-radius:14px; background:var(--wp--preset--gradient--fpt-btn-purple-cream); color:var(--wp--preset--color--primary); }
.fpt-offering-card:nth-child(3n+2) .fpt-offering-icon { background:var(--wp--preset--gradient--fpt-btn-mint-blue); }
.fpt-offering-card:nth-child(3n) .fpt-offering-icon { background:var(--wp--preset--gradient--fpt-cta); }
.fpt-offering-icon svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fpt-offering-card h3 { font-size:1.25rem; margin:0 0 12px; color:var(--wp--preset--color--primary); }
.fpt-offering-card p { margin:0 0 24px; }
.fpt-offering-more { margin-top:auto; padding-bottom:3px; border-bottom:2px solid var(--wp--preset--color--accent-lilac); color:var(--wp--preset--color--primary); font:700 .9375rem/1.5 var(--wp--preset--font-family--space-grotesk); }
.fpt-offering-card:hover { background:var(--wp--preset--color--surface); }
.fpt-offering-card:hover .fpt-offering-more { border-bottom-color:var(--wp--preset--color--primary); }
.fpt-offering-card:focus-visible { outline:3px solid var(--wp--preset--color--action); outline-offset:4px; }
.fpt-offering-footer { margin-top:28px; text-align:center; }
.fpt-offering-footer p { margin:8px 0 0; font-size:.875rem; color:var(--wp--preset--color--muted); }
@media(max-width:960px){.fpt-offering-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fpt-offering-grid{grid-template-columns:1fr}.fpt-offering-card{padding:24px}}

/* Public photographer discovery: separate, recognisable audience entrance. */
.fpt-find-photographer { padding:clamp(48px,6vw,80px) 24px; background:var(--wp--preset--color--primary); color:var(--wp--preset--color--white); font:400 1.0625rem/1.65 var(--wp--preset--font-family--lato); }
.fpt-find-photographer .fpt-home-eyebrow { color:var(--wp--preset--color--accent-mint); }
.fpt-find-photographer h2 { color:var(--wp--preset--color--white); max-width:850px; font-size:clamp(2rem,3.7vw,3rem); }
.fpt-find-intro { max-width:720px; margin:0 0 32px; font-size:1.125rem; }
.fpt-find-form { display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:start; padding:28px; background:var(--wp--preset--color--white); border-radius:16px; color:var(--wp--preset--color--text); }
.fpt-find-form label { display:block; margin-bottom:8px; font:700 .9375rem/1.4 var(--wp--preset--font-family--space-grotesk); }
.fpt-find-form input,.fpt-find-form select { width:100%; min-width:0; height:52px; padding:12px; border:1px solid var(--wp--preset--color--muted); border-radius:8px; background:var(--wp--preset--color--white); color:var(--wp--preset--color--text); font:400 1rem/1.4 var(--wp--preset--font-family--lato); }
.fpt-find-hint { display:block; margin-top:6px; font-size:.8125rem; color:var(--wp--preset--color--muted); }
.fpt-find-form button { margin-top:29px; min-height:52px; border:0; gap:12px; cursor:pointer; }
.fpt-find-styles { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; font-size:.9375rem; }
.fpt-find-styles a { padding:8px 14px; border:1px solid var(--wp--preset--color--accent-lilac); border-radius:999px; text-decoration:none; }
.fpt-find-photographer a { color:var(--wp--preset--color--white); text-underline-offset:4px; }
.fpt-find-styles a:hover { background:var(--wp--preset--color--text); text-decoration:underline; }
.fpt-find-bottom { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; margin-top:36px; }
.fpt-find-bottom ol { display:flex; flex-wrap:wrap; gap:12px 32px; padding-left:20px; margin:0; font-size:.9375rem; }
.fpt-find-bottom li { padding-left:4px; margin-right:12px; }
.fpt-find-bottom>a { font-weight:700; padding-block:10px; }
.fpt-find-form :is(input,select,button):focus-visible { outline:3px solid var(--wp--preset--color--action); outline-offset:3px; }
.fpt-find-photographer a:focus-visible { outline:3px solid var(--wp--preset--color--accent-mint); outline-offset:4px; }
.fpt-directory-utility { position:relative; z-index:1; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:0 24px 12px; font:400 .875rem/1.5 var(--wp--preset--font-family--lato); color:var(--wp--preset--color--primary); }
.fpt-directory-utility a { color:inherit; font-weight:700; text-underline-offset:3px; }
.fpt-directory-utility a:focus-visible { outline:3px solid var(--wp--preset--color--action); outline-offset:3px; }
@media(max-width:960px){.fpt-find-form{grid-template-columns:1fr 1fr}.fpt-find-form button{grid-column:1/-1;margin-top:0;justify-self:start}}
@media(max-width:600px){.fpt-find-form{grid-template-columns:1fr;padding:24px;gap:20px}.fpt-find-form button{width:100%}.fpt-find-bottom ol{display:block}.fpt-find-bottom li{margin-bottom:8px}.fpt-directory-utility{justify-content:center}}
/* Live directory preview; rendered only when more than four profiles exist. */
.fpt-home-profiles{background:var(--wp--preset--color--primary,#25213f);color:#fff;padding:72px 24px}
.fpt-home-profiles__inner{max-width:1200px;margin:auto}
.fpt-home-profiles h2{color:#fff;font-size:clamp(30px,4vw,44px);margin:12px 0 16px}
.fpt-home-profiles__intro{max-width:650px;margin:0 0 32px;line-height:1.7;color:#e1deec}
.fpt-home-profiles__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fpt-home-profile{display:flex;flex-direction:column;background:#fff;color:#25213f;border-radius:18px;overflow:hidden;text-decoration:none;transition:transform .2s}
.fpt-home-profile:hover{transform:translateY(-4px);color:#25213f}
.fpt-home-profile__image{aspect-ratio:4/3;background:linear-gradient(125deg,#eee3ed,#dcebf4,#e7f3ee);display:grid;place-items:center;overflow:hidden}
.fpt-home-profile__image img{width:100%;height:100%;object-fit:cover}
.fpt-home-profile__image>span{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#ffffffb3;font:32px var(--wp--preset--font-family--playfair,serif)}
.fpt-home-profile__body{display:flex;flex:1;flex-direction:column;padding:22px;gap:12px}
.fpt-home-profile h3{font-size:21px;line-height:1.3;margin:0;overflow-wrap:anywhere;color:#25213f}
.fpt-home-profile p{font-size:15px;line-height:1.6;margin:0}
.fpt-home-profile__location{color:#686177}
.fpt-home-profile__description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fpt-home-profile__styles{font-weight:700}
.fpt-home-profile__link{margin-top:auto;padding-top:18px;border-top:1px solid #ebe7ef;font-weight:700;font-size:15px}
.fpt-home-profiles__all{display:table;margin:32px auto 0;background:var(--wp--preset--gradient--fpt-cta,linear-gradient(100deg,#dd5895,#f5bc93));color:#25213f;padding:15px 28px;border-radius:99px;text-decoration:none;font-weight:700}
.fpt-home-profiles a:focus-visible{outline:3px solid #edb5d0;outline-offset:5px}
@media(max-width:1000px){.fpt-home-profiles__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.fpt-home-profiles{padding:48px 24px}.fpt-home-profiles__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fpt-home-profile{transition:none}.fpt-home-profile:hover{transform:none}}
.fpt-home-profile{position:relative}.fpt-home-profile h3 a{color:inherit;text-decoration:none}.fpt-home-profile h3 a::after{content:"";position:absolute;inset:0}.fpt-home-profile__body>p:empty{display:none}
.fpt-partners{padding:48px 24px;background:#f7f6fb}.fpt-partners-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr;gap:48px}.fpt-partners-inner>div+div{border-left:1px solid #dedbe6;padding-left:48px}.fpt-partners h2{font-size:26px;line-height:1.3;margin:12px 0 20px;color:#24224d}.fpt-partners p{max-width:550px;line-height:1.65}.fpt-partners ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0}.fpt-partners li{background:white;padding:10px 16px;border:1px solid #e4e3ec;border-radius:10px;font-weight:700;color:#24224d}.fpt-partners .fpt-partners-name{font-weight:700;font-size:26px;color:#24224d;margin:0}.fpt-partners a{font-weight:700;text-underline-offset:4px}@media(max-width:700px){.fpt-partners-inner{grid-template-columns:1fr;gap:32px}.fpt-partners-inner>div+div{border-left:0;border-top:1px solid #dedbe6;padding-left:0;padding-top:32px}}