/* FotoProTools drop-in theme - base styles */

/* Live's Flatsome/Foundation base sets box-sizing:border-box globally, and
 * every legacy pixel width/height/padding value we imported into
 * legacy-custom.css (e.g. .webshopbutton's width:215px + height:64px +
 * padding) was authored assuming that. Without this reset the browser
 * default (content-box) ADDS padding on top of the declared width/height,
 * inflating those elements well beyond their intended size. */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
}

a {
  transition: color 0.15s ease;
}

/* WordPress core auto-generates fluid clamp() font-size defaults for plain
 * <p>, buttons, and navigation menus (from the theme.json global-styles
 * stylesheet, e.g. "clamp(14px, ...vw, 17px)"). Since those rules use
 * :where() they carry zero specificity, but they still beat normal
 * inheritance from a parent's explicit font-size (e.g. our .fpt-uxb-text
 * wrapper setting 1.25rem), which was silently shrinking body copy across
 * the site to ~17px instead of its intended size. Restore inheritance so
 * font sizing is controlled by our own theme/shortcode CSS, matching live.
 */
:root :where(p),
:root :where(.wp-element-button, .wp-block-button__link),
:root :where(.wp-block-navigation) {
  font-size: inherit;
}

.fpt-section {
  padding-left: 24px;
  padding-right: 24px;
}

/* Header */
/* The sticky positioning has to live on the OUTER <header> tag that
 * WordPress renders for the header template part (not on the inner
 * .fpt-header group). A stickily-positioned element can't move beyond the
 * bounds of its own containing block -- and since the inner group's direct
 * parent is exactly as tall as the group itself, it had zero room to
 * actually "stick" while scrolling. The outer <header> tag's parent spans
 * the full page, so it sticks correctly there. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 999;
}
/* The decorative gradient graphic below is 161px tall, but the header's
 * actual content (logo + nav row) only takes up ~96px. With
 * `overflow: visible`, that extra ~65px of graphic wasn't clipped -- it
 * bled out below the header's real box and, because the sticky <header>
 * paints above the rest of the page (z-index: 999), visually painted over
 * the first line of whatever content started right underneath it (e.g. the
 * kennisbank sidebar/table of contents, where content sits close to the
 * top). `overflow: hidden` keeps the graphic confined to the header's own
 * box, matching what it looks like on live. The header has no dropdown/
 * overlay content that needs to escape these bounds (the nav's mobile menu
 * is a full overlay, not a child needing overflow), so this is safe.
 */
.fpt-header {
  position: relative;
  overflow: hidden;
  /* Was an inline `background-color` + `has-background` on the block itself
   * in parts/header.html. Moved here so the homepage can switch it off (see
   * "Homepage banner" below) without needing !important to beat an inline
   * style. */
  background-color: var(--wp--preset--color--bg);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.fpt-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 161px;
  background-image: url('/app/uploads/2021/04/header.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  pointer-events: none;
  z-index: 0;
}
.fpt-header > .wp-block-group {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Homepage banner
 *
 * Live (fotoprotools.nl) paints ONE large gradient graphic
 * (uploads/2021/02/header-scaled.png, 2560x1487) as a single continuous
 * banner that sits behind BOTH the header/nav bar and the whole hero block --
 * the coloured bands run from the very top of the page down past the
 * "foto maken -> uploaden -> delen" line. The narrow 161px strip above
 * (uploads/2021/04/header.png) is a different, much flatter crop of the same
 * artwork; it stays in place for every non-home page, but on the homepage it
 * would collide with the big banner, so it is switched off there.
 *
 * The banner itself is drawn by .fpt-hero::before (see components.css). It is
 * absolutely positioned and reaches UP past the top of the hero by
 * --fpt-header-h so it also covers the header row. For that to be visible the
 * header must be transparent while the page is scrolled to the top; once the
 * user scrolls past the banner the sticky header would otherwise sit over
 * plain page content with no background at all, so functions.php adds
 * .fpt-scrolled to <body> and the header gets a solid background back.
 * ------------------------------------------------------------------------ */
:root {
  /* Fallback; functions.php overwrites this with the header's real measured
   * height on load/resize, so the banner offset stays correct if the nav
   * wraps to two lines on narrow screens. */
  --fpt-header-h: 96px;
}
body.home .fpt-header {
  background-color: transparent;
}
body.home .fpt-header::before {
  content: none;
}
/* Sticky header past the banner: readable background again. */
body.home.fpt-scrolled .fpt-header {
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(26, 27, 66, 0.08);
}
/* Nav menu + CTA button styling. Explicit CSS instead of block-level
 * blockGap/typography attributes, since this theme doesn't enable
 * settings.spacing.blockGap in theme.json and those attributes were being
 * silently dropped (menu fell back to WordPress core's default nav
 * styling: 16px Lato instead of live's 18px bold Space Grotesk navy). */
.fpt-header-nav-wrap {
  column-gap: 48px;
}
.fpt-header-nav .wp-block-navigation__container {
  gap: 26px;
}
.fpt-header-nav a {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: 18px;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}
/* WordPress core ships a same-class-doubled selector
 * (.wp-block-navigation-item__content.wp-block-navigation-item__content)
 * to force color:inherit on nav links -- match its specificity pattern to
 * actually win. */
.fpt-header-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary);
}
/* Live's header CTA button sits well clear of the browser edge (it's the
 * old Flatsome topbar widget, which carries its own generous margins).
 * Our flex layout has no equivalent built-in inset, so add one directly. */
.fpt-header-nav-wrap .fpt-btn-cta {
  margin-right: 100px;
}
.fpt-site-title a {
  font-family: var(--wp--preset--font-family--playfair);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fpt-logo-link {
  display: inline-flex;
  align-items: center;
}
.fpt-logo-img {
  display: block;
  /* Het horizontale logo is 7,7 : 1 -- breder dan het oude woordmerk,
     want het beeldmerk staat er nu voor. 290px komt uit op 38px hoog. */
  width: 290px;
  height: auto;
  max-width: 100%;
}
@media (max-width: 480px) {
  .fpt-logo-img {
    width: 200px;
  }
}

/* De twee extra menu-items ("Neem contact op" en "Probeer gratis") horen
 * alleen in het uitklapmenu op mobiel. Op desktop staat de knop al rechts in
 * de header en heeft de footer al een contactlink. */
@media (min-width: 1024px) {
  .fpt-header-nav .fpt-nav-contact,
  .fpt-header-nav .fpt-nav-cta {
    display: none;
  }
}

/* Buttons */
.fpt-btn-cta a,
.wp-block-button__link.has-fpt-cta-gradient-background,
.wp-block-button__link.has-fpt-btn-soft-gradient-background {
  border-radius: 99px;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700;
  color: var(--wp--preset--color--text) !important;
}
.fpt-btn-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--text) !important;
}
.fpt-btn-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary);
  color: #fff !important;
}

/* Footer */
.fpt-footer {
  color: var(--wp--preset--color--text);
}
.fpt-footer a {
  color: var(--wp--preset--color--action);
  opacity: 1;
  text-decoration: none;
}
.fpt-footer a:hover {
  color: var(--wp--preset--color--action-hover);
}
/* WordPress levert navigatielinks met een verdubbelde selector
 * (.wp-block-navigation-item__content.wp-block-navigation-item__content) die
 * color:inherit forceert. Die won van .fpt-footer a hierboven, waardoor de
 * footerlinks de tekstkleur van .fpt-footer erfden in plaats van signaalblauw
 * te worden -- zwart dus, zolang de footer op zuiver zwart stond. Zelfde
 * specificiteit ertegenover, net als bij .fpt-header-nav hierboven. */
.fpt-footer-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--action);
}
.fpt-footer-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--action-hover);
}
.fpt-footer-nav a {
  font-weight: 400 !important;
  font-size: 15px !important;
}
.fpt-footer-copyright {
  color: var(--wp--preset--color--primary);
  font-size: 0.9rem;
}

/* ==========================================================================
   Mobiel
   ==========================================================================

   Het thema had hier vrijwel niets staan: een logobreedte en een hero-kop.
   Alle overige regels gaan uit van een breed scherm, en een paar daarvan
   breken op een telefoon ronduit:

     .fpt-header-nav-wrap .fpt-btn-cta { margin-right: 100px }
        -- 100px vaste marge, bedoeld om de knop bij de browserrand vandaan te
           houden op een breed scherm. Op 430px duwt die de knop het scherm uit.

     .fpt-header-nav-wrap { column-gap: 48px }
        -- naast een hamburgerknop en een logo is dat te veel.

   Daarnaast krijgt de uitklapbare navigatie van WordPress hier voor het eerst
   eigen opmaak; zonder dat viel het menu terug op de kale kernstijl.
*/

@media (max-width: 1023px) {

  /* -- Header ------------------------------------------------------------ */

  .fpt-header {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .fpt-header-nav-wrap {
    column-gap: 12px;
  }

  .fpt-header-nav-wrap .fpt-btn-cta {
    margin-right: 0;
  }

  .fpt-header-nav-wrap .fpt-btn-cta .wp-block-button__link {
    font-size: 15px;
    padding: 10px 18px;
  }

  /* -- Uitklapmenu ------------------------------------------------------- */

  /* Schermvullend paneel met rijen over de volle breedte: elk item een eigen
   * regel met scheidingslijn en een chevron rechts, zoals je op telefoons
   * gewend bent. De twee extra items uit parts/header.html (telefoon en
   * "Probeer gratis") staan alleen hier; op desktop zijn ze verborgen. */

  .fpt-header-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 0;
    background-color: #ffffff;
  }

  .fpt-header-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
    padding: 0;
  }

  .fpt-header-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    padding: 76px 0 32px;
    align-items: stretch;
    width: 100%;
  }

  .fpt-header-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
    gap: 0;
    align-items: stretch;
    width: 100%;
  }

  .fpt-header-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
    width: 100%;
  }

  .fpt-header-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid var(--wp--preset--color--border);
  }

  /* Chevron rechts, getekend met randen -- geen extra bestand nodig */
  .fpt-header-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--wp--preset--color--primary);
    border-right: 2px solid var(--wp--preset--color--primary);
    transform: rotate(45deg);
    opacity: 0.55;
    flex: 0 0 auto;
    margin-left: 16px;
  }

  /* Sluitknop rechtsboven, ruim genoeg om te raken */
  .fpt-header-nav .wp-block-navigation__responsive-container-close {
    top: 18px;
    right: 16px;
    width: 44px;
    height: 44px;
    color: var(--wp--preset--color--primary);
  }

  .fpt-header-nav .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--primary);
  }

  /* Contactregel: rustiger dan de menu-items, zonder chevron */
  .fpt-header-nav .fpt-nav-contact .wp-block-navigation-item__content {
    margin-top: 24px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.85;
    border-top: 1px solid var(--wp--preset--color--border);
  }

  .fpt-header-nav .fpt-nav-contact .wp-block-navigation-item__content::after {
    display: none;
  }

  /* De actieknop: pil in de huisstijl.
   *
   * De inspringing staat op het lijst-item, niet op de link. Zet je marge op
   * de link zelf, dan komt die bovenop de `width: 100%` uit de algemene regel
   * hierboven en wordt de knop breder dan zijn ruimte -- hij liep links het
   * paneel uit. */
  .fpt-header-nav .fpt-nav-cta {
    padding: 24px 20px 0;
  }

  .fpt-header-nav .fpt-nav-cta .wp-block-navigation-item__content {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0;
    min-height: 52px;
    padding: 0 24px;
    border-bottom: 0;
    border-radius: 99px;
    background-image: var(--wp--preset--gradient--fpt-cta);
    color: var(--wp--preset--color--text);
    font-size: 17px;
  }

  .fpt-header-nav .fpt-nav-cta .wp-block-navigation-item__content::after {
    display: none;
  }

}

@media (max-width: 781px) {

  /* -- Tekst ------------------------------------------------------------- */

  .fpt-hero h1 {
    font-size: 2rem !important;
  }

  .fpt-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Flatsome-auteurs zetten harde regelafbrekingen in koppen, afgestemd op
   * een brede kolom. Op een telefoon vallen die midden in een woordgroep. */
  .fpt-features h2 br,
  .fpt-hero h1 br,
  .fpt-final-cta h2 br {
    display: none;
  }
}


/* 01-10-2026: tablet en kleine laptop (600-1023px).
 * WordPress klapt het navigatieblok pas onder 600px in tot een hamburger. Daarboven
 * stond het volle menu inline, liep het over meerdere regels en stond "Probeer het
 * uit" er twee keer (menu-item + knop). Header werd tot 300px hoog. Hier dwingen we
 * het uitklapmenu af tot 1024px; de opmaak van het paneel staat in het blok hierboven. */
@media (min-width: 600px) and (max-width: 1023px) {
  .fpt-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .fpt-header-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* Kleine laptop (1024-1439px): het volle menu past op een regel als de vaste
 * 100px rechtermarge van de knop en de ruime tussenruimtes iets krimpen. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .fpt-header-nav-wrap { column-gap: 24px; }
  .fpt-header-nav-wrap .fpt-btn-cta { margin-right: 0; }
  .fpt-header-nav .wp-block-navigation__container { gap: 18px; }
  .fpt-header-nav a { font-size: 16px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .fpt-logo-img { width: 220px; }
}

@media (max-width: 480px) {
  .fpt-header-nav-wrap .fpt-btn-cta .wp-block-button__link {
    font-size: 14px;
    padding: 9px 14px;
  }
}

/* ==========================================================================
   Mobiel: footer
   ==========================================================================

   De footer is vier kolommen: menu, adres, en twee kolommen webshoplinks die
   samen onder de kop "Webshops voor" horen. Onder 782px stapelt WordPress ze
   alle vier, waardoor die twee lijsten uit elkaar vallen en er een gat valt
   tussen "Sportfotografie" en "Productfotografie" dat nergens op slaat.

   Hieronder blijven kolom 3 en 4 naast elkaar staan, zodat de twaalf links
   als een blok van twee kolommen onder hun kop blijven hangen. WordPress zet
   op smalle schermen `flex-basis: 100% !important` op elke kolom; die regel is
   twee klassen diep, dus hieronder staat er een selector van drie tegenover.
*/

@media (max-width: 781px) {
  /* De horizontale marge zit op .fpt-section, en die klasse heeft de footer
   * niet -- daardoor liep de tekst tegen de schermrand aan. */
  .fpt-footer {
    padding-top: 36px !important;
    padding-bottom: 24px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .fpt-footer .wp-block-columns {
    gap: 28px 16px;
    row-gap: 28px;
  }

  .fpt-footer .wp-block-columns > .wp-block-column:nth-child(n + 3) {
    flex-basis: calc(50% - 8px) !important;
    flex-grow: 0;
  }

  /* De kop "Webshops voor" staat alleen boven de eerste van de twee
   * linkkolommen. Naast elkaar begint de rechterkolom daardoor hoger. Deze
   * marge is de hoogte van die kop (regel + 10px ondermarge) en zet beide
   * lijsten weer op dezelfde regel. Verandert die kop, dan verandert dit mee. */
  .fpt-footer .wp-block-columns > .wp-block-column:nth-child(4) {
    margin-top: 34px;
  }

  /* Ruimere aanraakvlakken, strakker op elkaar */
  .fpt-footer-nav .wp-block-navigation-item {
    line-height: 1.2;
  }

  .fpt-footer-nav a {
    display: block;
    padding: 6px 0;
  }

  .fpt-footer .wp-block-navigation {
    gap: 0 !important;
  }

  /* Adresblok wat compacter */
  .fpt-footer p {
    line-height: 1.5;
  }

  .fpt-footer-copyright {
    margin-top: 24px !important;
    padding-top: 16px;
    border-top: 1px solid var(--wp--preset--color--border);
    font-size: 0.85rem;
  }
}

@media (max-width: 400px) {
  /* Op de smalste toestellen worden twee kolommen links te krap */
  .fpt-footer .wp-block-columns > .wp-block-column:nth-child(n + 3) {
    flex-basis: 100% !important;
  }
}
/* Brand link palette: warm plum on light surfaces, visibly underlined in prose. */
:root { --wp--preset--color--action:#75425f; --wp--preset--color--action-hover:#4f2947; }
:root :where(a){color:var(--wp--preset--color--action);text-underline-offset:.2em}
:root :where(a:hover){color:var(--wp--preset--color--action-hover)}
:where(main p,main li) a:not([class]){text-decoration:underline;text-decoration-thickness:1px}
:where(a):focus-visible{outline:3px solid currentColor;outline-offset:4px}
/* Footer: brand statement, useful routes and direct help. */
.fpt-footer.fpt-footer-v2{background:#24224d;color:#e7e4ef;padding:0 28px;position:relative;margin-top:0}
.fpt-footer-v2::before{content:"";display:block;height:5px;position:absolute;inset:0 0 auto;background:linear-gradient(90deg,#dd5e89,#f7bb97,#f9eec1,#b5f0db,#6b8ef0,#b687ae)}
.fpt-footer-inner{max-width:1200px;margin:auto}
.fpt-footer-v2 .fpt-footer-intro{display:flex;align-items:center;justify-content:space-between;gap:48px;padding:64px 0 48px;border-bottom:1px solid #ffffff26}
.fpt-footer-v2 .fpt-footer-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#f7bb97;margin:0 0 16px}
.fpt-footer-v2 h2{font-family:var(--wp--preset--font-family--playfair);font-size:clamp(30px,3.5vw,44px);line-height:1.2;color:white;margin:0 0 18px}
.fpt-footer-intro p:last-child{max-width:550px;margin:0;line-height:1.7}
.fpt-footer-v2 a{color:#e7e4ef;text-decoration:none}
.fpt-footer-v2 a:hover{color:#f7bb97;text-decoration:underline;text-underline-offset:4px}
.fpt-footer-v2 a:focus-visible,.fpt-footer-v2 summary:focus-visible{outline:3px solid #f7bb97;outline-offset:5px}
.fpt-footer-v2 .fpt-footer-demo{display:inline-flex;gap:20px;align-items:center;flex-shrink:0;padding:17px 24px;border-radius:99px;background:linear-gradient(100deg,#dd5e89,#f7bb97);color:#24224d;font-weight:700}
.fpt-footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.15fr;gap:38px;padding:48px 0}
.fpt-footer-v2 h3{font-family:var(--wp--preset--font-family--space-grotesk);color:white;font-size:17px;line-height:1.4;margin:0 0 20px}
.fpt-footer-v2 p,.fpt-footer-v2 address,.fpt-footer-v2 li{font-size:15px;line-height:1.75}
.fpt-footer-brand img{max-width:100%;height:auto;display:block;margin-bottom:22px}
.fpt-footer-brand p{margin:0 0 18px}.fpt-footer-brand address{font-style:normal;margin-top:16px;color:#c7c3d7}
.fpt-footer-v2 .fpt-footer-email{text-decoration:underline;overflow-wrap:anywhere}
.fpt-footer-v2 ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fpt-footer-help>a{display:block;margin-bottom:18px}.fpt-footer-help>a strong{display:block;font-size:15px;color:#fff}.fpt-footer-help>a span:not([aria-hidden]){display:block;font-size:14px;line-height:1.6;color:#c7c3d7;margin-top:5px}
.fpt-footer-specialisms{border-top:1px solid #ffffff26;padding:20px 0;font-size:14px}.fpt-footer-specialisms summary{cursor:pointer;color:#e7e4ef;width:fit-content}.fpt-footer-specialisms nav{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:20px}
.fpt-footer-bottom{display:flex;flex-wrap:wrap;gap:16px 28px;border-top:1px solid #ffffff26;padding:24px 0 30px;font-size:13px;color:#c7c3d7}.fpt-footer-bottom>span:first-child{margin-right:auto}
/* Taalkeuze (alleen zichtbaar met Polylang) */
.fpt-footer-languages ul{display:flex;gap:12px;list-style:none;margin:0;padding:0}.fpt-footer-languages a{color:inherit}.fpt-footer-languages .current-lang a{font-weight:700;text-decoration:none}
@media(max-width:1000px){.fpt-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.fpt-footer-v2 .fpt-footer-intro{align-items:flex-start;flex-direction:column;gap:28px}}
@media(max-width:550px){.fpt-footer.fpt-footer-v2{padding:0 24px}.fpt-footer-v2 .fpt-footer-intro{padding:48px 0 32px}.fpt-footer-grid{grid-template-columns:1fr;padding:32px 0;gap:32px}.fpt-footer-brand img{width:230px}.fpt-footer-v2 .fpt-footer-demo{flex-shrink:1;font-size:14px;padding:15px 20px}.fpt-footer-bottom{flex-direction:column;gap:12px}.fpt-footer-v2 li a{display:inline-block;padding:3px 0}}