/* Design Sync fixes — Productive #17371073 (2026-07-09).
   Loaded AFTER main.css (see functions.php). Overrides only; main.css is not recompiled.
   The SCSS→CSS build is not wired on this environment, so served fixes live here.
   Each rule is tagged with its Productive subtask. */

/* ---- #242 Algemeen: whitespace between page header and first content is too big
   ("op bijna alle pagina's ... een heel stuk kleiner").
   general-header's own bottom padding was 110px (desktop) / 80px (<=lg); the next
   block already uses small top padding, so the header padding dominated the gap. */
.block.general-header.row-padding-bottom-lg,
.block.general-header.row-padding-bottom-md,
.block.general-header.row-padding-bottom-xl {
  padding-bottom: 48px !important;
}
@media (max-width: 991.98px) {
  .block.general-header.row-padding-bottom-lg,
  .block.general-header.row-padding-bottom-md,
  .block.general-header.row-padding-bottom-xl {
    padding-bottom: 32px !important;
  }
}

/* ---- #242 Algemeen: newsroom row (article-overview-small) button should be
   left-aligned on mobile instead of centered. */
@media (max-width: 767.98px) {
  .article-overview-small__actions,
  .article-overview-small__actions-col {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* ---- #242 Algemeen: whitespace between form fields is too big (all breakpoints).
   Gravity Forms lays fields out on a CSS grid with a 40px row-gap; tighten it. */
.gform_wrapper .gform_fields {
  row-gap: 22px !important;
}
@media (max-width: 767.98px) {
  .gform_wrapper .gform_fields {
    row-gap: 18px !important;
  }
}

/* ---- #245 Footer: mobile/iPad — office address not aligned with the city name.
   The pin icon (32px) + 8px gap indents the city by 40px; the address sat at the
   card's left edge. Indent the address body to line up under the city. */
@media (max-width: 991.98px) {
  .location-card__body {
    padding-left: 40px;
  }
}

/* ---- #245 Footer: office address text was too dim (#d4d4d8) and hard to read.
   Lighten it a step for legibility on the dark footer. */
.location-card__body,
.location-card__body a {
  color: #e4e4e7 !important;
}

/* ---- #290 Careers (Overview): mobile — filters should be full-width (they were
   inline and narrow). Stack them and let each fill the row. */
@media (max-width: 767.98px) {
  .careers-overview__filters {
    flex-direction: column;
    align-items: stretch;
  }
  .careers-overview__filter,
  .careers-overview__filter select {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ---- #252 Newsroom (Single): the "Link copied" toast was red (#cf2a2f) so it read
   like an error. Use the CTA/success colour instead. */
.copy-toast {
  background-color: #1a7a4a !important;
}

/* ---- #296 Events (Overview) ---- */
/* more spacing between the meta items (location / date / time) */
.events-overview__meta { gap: 14px !important; }
/* tighter line-height on the event title */
.events-overview__title { line-height: 1.12 !important; }
/* photo should be wider (was near-square, flex:0 0 240px) */
@media (min-width: 992px) {
  .events-overview__media { flex: 0 0 340px !important; width: 340px !important; aspect-ratio: 16 / 9 !important; height: auto !important; }
}
.events-overview__thumb { width: 100% !important; height: 100% !important; }
/* bigger date badge */
.events-overview__date-day { font-size: 60px !important; line-height: 1 !important; }
.events-overview__date-month { font-size: 18px !important; }

@media (max-width: 991.98px) {
  /* mobile/iPad: put the date badge on the photo, top-left */
  .events-overview__media { width: 100% !important; }
  .events-overview__row { position: relative; }
  .events-overview__date {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    flex-direction: column; align-items: center; gap: 0;
    background: #cf2a2f; color: #fff;
    padding: 8px 12px; min-width: 0;
  }
  .events-overview__date-day { font-size: 30px !important; color: #fff; }
  .events-overview__date-month { font-size: 13px !important; color: #fff; text-transform: uppercase; }
}

/* ---- #297 Events (Single): icons a bit larger (route card + practical meta).
   Directional per "icoon mag groter" — exact size to confirm vs Figma. */
.single-event__route-icon { font-size: 1.75rem !important; }
.single-event__meta-icon { font-size: 1.15rem !important; }

/* ---- #252 Newsroom (Single) ---- */
/* desktop: add breathing room between the article content and the right column */
@media (min-width: 992px) {
  .single-post-layout__aside { padding-left: 40px; }
}
/* in-content Gutenberg button was pill-shaped with near-invisible dark text on a dark
   accent bg ("button styling klopt hier niet"). Square it and make it brand-readable. */
.single-post-content .wp-block-button__link {
  border-radius: 0 !important;
}
.single-post-content .wp-block-button .wp-block-button__link,
.single-post-content .wp-block-button__link.has-thb-accent-background,
.single-post-content .wp-block-button__link.has-thb-accent-background:visited {
  background-color: #cf2a2f !important;
  color: #ffffff !important;
  border-color: #cf2a2f !important;
}

/* ---- #291 Careers (Single) ---- */
/* desktop: more space between the vacancy text and the right column */
@media (min-width: 992px) {
  .single-career__sidebar { padding-left: 40px; }
}
/* mobile/iPad: "In short" card should sit ABOVE the vacancy text, while the
   "why work at Effect" (job listing) card stays below. display:contents lets the
   nested cards reorder as flex items of the row. */
@media (max-width: 991.98px) {
  .single-career__layout { display: flex; flex-direction: column; }
  .single-career__main,
  .single-career__sidebar { display: contents; }
  .single-career__card--summary { order: 1; margin-bottom: 24px; }
  .single-career__main > * { order: 2; }
  .single-career__card--listing { order: 3; margin-top: 24px; }
}

/* ---- #283 Products (Single) ---- */
/* elements that should be square, not rounded */
.single-product__hero-eyebrow,
.single-product__hero-spec {
  border-radius: 0 !important;
}
/* arrow links should not get an underline on hover (general point) */
.single-product a:has(i[class*="arrow"]):hover,
.single-product a:has(.fa-arrow-right):hover,
.single-product a.arrow:hover {
  text-decoration: none !important;
}
/* mobile: let long spec-table content scroll instead of breaking the layout */
@media (max-width: 767.98px) {
  .single-product__spec-table,
  .single-product table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* ---- #254 Privacy / #255 Terms: a bit more space between content and footer. */
.page-id-3 #primary,
.page-id-127 #primary,
.page-id-3 .entry-content,
.page-id-127 .entry-content {
  padding-bottom: 72px;
}

/* ---- #281 Products (Overview) — filter + grid, per Figma 14205:6583 ---- */
/* title was 32px/500 ("te klein en te dik") — larger + lighter to match design */
.products-overview__filter-title {
  font-size: 40px !important;
  font-weight: 400 !important;
  margin-bottom: 20px !important;
}
/* iPad: 2 products per row instead of 3 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .products-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* #281 filter interior, per Figma 14205:6583 */
/* checkbox rows were ~48px apart — tighten to match the compact design list */
.products-overview__filter-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.products-overview__filter-options li { margin: 0; }
.products-overview__filter-heading { margin-bottom: 12px; }
/* search: more gap from the "Filter" title, larger text + icon */
.products-overview__search { margin-top: 22px; }
.products-overview__search input { font-size: 18px !important; }
.products-overview__search i { font-size: 18px !important; }
/* a touch more breathing room inside the filter sidebar */
.products-overview__filters { padding: 8px 4px; }
/* #281 product card: short summary line-height a bit larger */
.products-overview__card-summary { line-height: 1.65 !important; }

/* ---- #288 Contact overview (get-in-touch) ---- */
/* mobile: put the row link/cta UNDER the paragraph, aligned with the body text
   (icon stays left; body + cta stack in the second column). */
@media (max-width: 767.98px) {
  .contact-hub__card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .contact-hub__icon { grid-column: 1; grid-row: 1; }
  .contact-hub__body { grid-column: 2; }
  .contact-hub__action {
    grid-column: 2;
    margin-top: 10px;
    justify-content: flex-start;
  }
}

/* ---- #244 Home (goal 2026-07-10) ---- */
/* iPad: hero had almost no bottom padding (xl collapses to sm below lg) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .block.home-header { padding-bottom: 80px !important; }
}
/* careers: less gap between intro text and "Latest positions" */
.block.careers .careers__latest { margin-top: 8px !important; }
/* mobile: USP marquee bar less padding top/bottom */
@media (max-width: 767.98px) {
  .block.usp-slider { padding-top: 10px !important; padding-bottom: 10px !important; }
  .usp-slider__viewport { padding: 4px 0; }
}

/* ---- #281 Products overview: SEO text under the grid (goal 2026-07-10) ---- */
.products-overview__seo {
  margin-top: 64px;
  max-width: 860px;
}
.products-overview__seo h2,
.products-overview__seo h3,
.products-overview__seo h4 {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: #111;
  margin: 0 0 8px;
}
.products-overview__seo h2 + p,
.products-overview__seo h3 + p,
.products-overview__seo h4 + p { margin-top: 0; }
.block.products-overview .products-overview__seo p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 24px;
}
.products-overview__seo p:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
  .products-overview__seo { margin-top: 40px; }
}

/* ---- #243 Footer (design sync re-audit 2026-07-10) ---- */
/* Desktop: location cards stuck out 12px past the content edge (row kept its
   -12px gutters while the cols lost their padding). */
.site-footer .footer-locations {
  margin-left: 0;
  margin-right: 0;
}
/* Mobile/iPad: extra 12px padding pushed cards 12px inside the content edge. */
@media (max-width: 991.98px) {
  .site-footer .footer-locations {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Column headings were $gray-500 (#71717a) on #111 — hard to read; lighten. */
.site-footer .footer-col__title {
  color: #a1a1aa;
}

/* ---- #248 FAQ single: less whitespace title -> first item on iPad/mobile ---- */
@media (max-width: 991.98px) {
  .faq-category-archive__title.row-padding-bottom-lg { padding-bottom: 16px !important; }
}

/* ---- #250/#286 more whitespace between article content and right column on desktop ---- */
@media (min-width: 1200px) {
  .single-post-layout__main,
  .single-event__main { padding-right: 64px; }
}
@media (min-width: 992px) {
  .single-career__main { padding-right: 64px; }
}

/* ---- #292 Events single: bigger practical-info icons; left-aligned CTA below xl ---- */
.single-event__meta-icon i { font-size: 16px; }
@media (max-width: 1199.98px) {
  .single-event-layout__aside .btn { justify-content: flex-start; text-align: left; }
}

/* ---- #282 (algemeen): no hover underline under arrow/FA icons inside links ---- */
a i[class*="fa-"] { display: inline-block; text-decoration: none !important; }

/* ---- #282 square corners on product single hero/model viewer ---- */
.product-showcase__modelviewer,
.product-showcase__modelviewer canvas,
.single-product__hero { border-radius: 0 !important; }

/* ---- #241 less whitespace between form fields (all forms, all viewports) ---- */
.gform_wrapper .gform_fields { row-gap: 12px !important; }

/* ---- #243 footer bottom bar links were #71717a on dark — lighten for readability ---- */
.site-footer .footer-bottom a,
.site-footer .footer-credit,
.site-footer .footer-credit a { color: #d4d4d8 !important; }
.site-footer .footer-bottom a:hover { color: #ffffff !important; }

/* ---- #246 bio popup: no leftover gap when a member has no function title ---- */
.teammember-overview__modal-meta:empty { display: none; }

/* ---- PPT S9: a scale-row with a single card spreads the full page width ---- */
.scale-row__grid:has(> .scale-row__card:only-child) { grid-template-columns: 1fr; }
.scale-row__grid > .scale-row__card:only-child .scale-row__card-media,
.scale-row__grid > .scale-row__card:only-child figure { max-height: 420px; overflow: hidden; }
.scale-row__grid > .scale-row__card:only-child .scale-row__card-media img,
.scale-row__grid > .scale-row__card:only-child img { width: 100%; height: 420px; object-fit: cover; }

/* ---- PPT S12: contact person card was flat black ("death ad") — same fresh dark
   gradient as the hero/404 sections (teal top-right, red bottom-left glow) ---- */
.contact__person-card {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(7, 197, 173, 0.20), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(207, 42, 47, 0.28), transparent 55%),
    #111111 !important;
}

/* Scale-row graphic area lighter so the SVG animation reads better (2026-07-14).
   Keep in sync with the *-bg gradients in template-parts/blocks/scale-row/vignettes.php. */
.block.scale-row .scale-row__card-media {
  background: linear-gradient(180deg, #26364e 0%, #131d2c 100%);
}

/* PPT v1.1 S1: larger network graphic on the home target-audience section.
   Image column col-lg-5 + offset-lg-1 -> full 50% wide, less inner padding. */
@media (min-width: 992px) {
  .target-audience .row > .col-lg-5.offset-lg-1 {
    width: 50%;
    margin-left: 0;
  }
  .target-audience .target-audience__card--image {
    padding: 12px;
  }
}

/* PPT v1.1 S4: values slider grouped 2x2 so the section is more compact. */
@media (min-width: 768px) {
  .block.values-slider .values-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    gap: 32px 40px;
  }
  .block.values-slider .values-slider__card {
    width: clamp(300px, 30vw, 400px);
  }
}

/* PPT v1.1 S6: sales-meeting button on event pages, same shape as the website CTA. */
.single-event__sales-cta {
  width: 100%;
  max-width: 100%;
  margin: 24px 0 0;
  border-radius: 0 !important;
  justify-content: center;
}
.single-event__sales-cta + .single-event__website-cta {
  margin-top: 12px;
}

/* PPT v1.2 S1: network graphic section on /solutions/ under the DCI/Scale-across block. */
.solutions-network-graphic {
  margin: 0 auto;
  padding: 56px 0 24px;
  max-width: 1000px;
}
.solutions-network-graphic img {
  width: 100%;
  height: auto;
}

/* PPT v1.2 S2: reach-grid with only 2 items spans 2 columns instead of leaving
   2 empty cells in the bordered box (ai-dci "Interconnecting datacenter" section). */
@media (min-width: 768px) {
  .block.reach-grid .reach-grid__grid:has(> .reach-grid__item:last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .block.reach-grid .reach-grid__grid:has(> .reach-grid__item:last-child:nth-child(2)) .reach-grid__item {
    padding: 36px 32px;
  }
}

/* Solutions network section header (title + intro above the graphic). */
.solutions-network {
  padding: 72px 0 24px;
}
.solutions-network .solutions-network__title {
  margin: 0 0 16px;
}
.solutions-network .solutions-network__intro {
  max-width: 58ch;
  color: #18181b;
  margin: 0;
}
.solutions-network .solutions-network-graphic {
  margin: 0 auto;
  padding: 24px 0 0;
}

/* Sticky-over-footer fix: the post sidebar had CSS position:sticky (top 120px)
   UNDER the GSAP ScrollTrigger pin — the sticky displacement stacked on top of
   the pin transform and pushed the sidebar past its row into the footer.
   The pin owns the sticky behavior; kill the CSS sticky. */
@media (min-width: 992px) {
  .site-content--single .single-post-layout__aside {
    position: relative;
    top: auto;
  }
}

/* Brochure/contact popup: submit button unreachable when GF validation errors grow
   the form. The right pane is a grid child (min-height:auto) so the row grew past
   the dialog's max-height and got clipped by overflow:hidden — its own
   overflow-y:auto never activated. Constrain the row + let the pane shrink. */
.form-popup .form-popup__dialog {
  grid-template-rows: minmax(0, 1fr);
}
.form-popup .form-popup__right {
  min-height: 0;
}

/* #17371075: mobile/iPad submenu items larger + more breathing room.
   The simple submenus (e.g. Company) render their leaf items as DIRECT
   children of .offcanvas-menu-list inside the slide-in submenu panel — the
   earlier rule used non-existent .offcanvas-mega-group__* classes so it never
   applied. Target the real leaf links; scoping to the list's direct-child
   leaves keeps the nested mega-column links (Products/Solutions) untouched. */
@media (max-width: 1199.98px) {
  .offcanvas .offcanvas-menu__parent-link {
    font-size: 1.25rem !important;
  }
  .offcanvas .offcanvas-menu-list > .offcanvas-li--leaf > .offcanvas-menu__leaf-link {
    font-size: 1.25rem !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .offcanvas .offcanvas-menu-list > .offcanvas-li--leaf + .offcanvas-li--leaf {
    margin-top: 6px !important;
  }
  /* Submenu section header (e.g. "Company") is an <a href="#"> that was left at
     plain 16px body size, cramped onto the first item. Treat it as an intentional
     uppercase eyebrow label: clearly a heading, non-tappable, with real space to
     the item list below. */
  .offcanvas .offcanvas-menu-list > .is-parent-link {
    margin: 0 0 18px !important;
  }
  .offcanvas .offcanvas-menu-list > .is-parent-link > a {
    display: inline-block;
    padding: 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
    pointer-events: none;
    cursor: default;
  }
}

/* #17371079 About: smaller meta icon squares + 2 team members side-by-side on iPad. */
.block.teammember-overview .teammember-overview__meta-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
}
.block.teammember-overview .teammember-overview__meta-icon i {
  font-size: 0.875rem;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .block.teammember-overview .teammember-overview__grid > .teammember-overview__col {
    width: 50%;
  }
}

/* #17371083: media contact icons in red squares + copy-link toast (CTA color). */
.single-post-contact .single-post-contact__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background-color: #cf2a2f;
  color: #ffffff;
}
.single-post-contact .single-post-contact__meta-icon i {
  color: #ffffff;
  font-size: 0.8125rem;
}
#copy-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(8px);
  z-index: 4000;
  padding: 12px 24px;
  background-color: #1a7a4a;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}
#copy-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* #17371083 / #18096297: the copy-link toast (functions.php `.copy-toast`) had
   its whole animation killed under prefers-reduced-motion (main.css sets
   `transform:none;transition:none` there), so reviewers with Reduce Motion on
   saw it pop in with no animation at all. Keep a gentle opacity fade in that
   case — accessible (no positional/vestibular movement) but still animated. */
@media (prefers-reduced-motion: reduce) {
  .copy-toast,
  .copy-toast.show {
    transition: opacity 0.3s ease !important;
  }
}

/* #18096297 Events single: route icon at Figma size (64px square, large map icon)
   + practical-info card border as dark as the share card. */
.single-event__card--route .single-event__route-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
}
.single-event__card--route .single-event__route-icon i {
  font-size: 1.75rem;
}
.single-event__card--practical {
  border-color: #27272a;
}

/* #18096296 Events overview mobile/iPad: date inline at one font-size, smaller badge. */
@media (max-width: 1199.98px) {
  .events-overview .events-overview__date {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    padding: 8px 12px;
    width: auto;
    height: auto;
  }
  .events-overview .events-overview__date-day,
  .events-overview .events-overview__date-month {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
}

/* #18096285 Products overview mobile/iPad: filter button above the product grid,
   styled as a normal compact red button instead of a full-width bar at the bottom.
   The button now lives INSIDE .container (moved in render.php), so it inherits the
   container's responsive left inset and aligns with the heading/grid at every
   breakpoint (it previously sat outside the container → flush-left on iPad). */
@media (max-width: 991.98px) {
  .block.products-overview .products-overview__mobile-filter-btn i {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    height: auto;
  }
  .block.products-overview .container > .products-overview__mobile-filter-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 0 0 24px;
    padding: 12px 24px;
    background-color: #cf2a2f;
    color: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: 600;
  }
}

/* #18096291 Careers single mobile/iPad: the stacked layout dissolves both columns
   with display:contents, so their children lost col width + gutters (In short card
   shrank to content width at the screen edge, text ran edge-to-edge, the divider
   above the bottom Apply now stayed short). Give the dissolved children proper
   width + gutters again. */
@media (max-width: 991.98px) {
  .single-career__main > *,
  .single-career__sidebar > * {
    width: calc(100% - 24px);
    margin-inline: 12px;
  }
}

/* #18096291: the general-header "Download PDF" placeholder button renders with an
   empty href (client still owes the file) and reserved 64px below titles — hide
   empty-href buttons, and the wrapper when nothing usable remains. */
.general-header__buttons a[href=""] {
  display: none;
}
.general-header__buttons:not(:has(a:not([href=""]), button)) {
  display: none;
}

/* #18096285: filter checkbox rows sat 38px apart — the classless <li> wrappers
   carry a global 15px margin-bottom. Tighten the rows. */
.block.products-overview .products-overview__filter-options > * {
  margin-bottom: 4px;
}

/* #17371086 404: copy inside the error-code card (card left, text block removed). */
.error-404-page__card-text {
  margin: 0;
  color: #d4d4d8;
  font-size: 1rem;
  line-height: 26px;
}

/* PPT v1.3 S2: "make this graph as large as possible" -> widen the image column
   (was 50%, graphic locked at 484px) and let the SVG fill it. */
@media (min-width: 992px) {
  .block.target-audience .row > .col-lg-6 { width: 41%; }
  .block.target-audience .row > .col-lg-5.offset-lg-1 { width: 59%; margin-left: 0; }
  .block.target-audience .target-audience__card--image { padding: 0; }
  .block.target-audience .target-audience__card-media { padding: 0; width: 100%; }
  .block.target-audience .target-audience__card-media img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* PPT v1.3 S1+S3: pop-ups on the network graphic category labels.
   Hotspots are invisible buttons over the SVG labels; the card follows the
   dark example from the client deck (title, text, LEARN MORE ->). */
.network-graphic {
  position: relative;
  display: block;
  width: 100%;
}
.network-graphic img {
  display: block;
  width: 100%;
  height: auto;
}
.network-graphic__hotspot {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.network-graphic__popup {
  position: absolute;
  z-index: 3;
  background: #111111;
  border: 1px solid #27272a;
  padding: 20px 22px;
  text-align: left;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.network-graphic__popup-title {
  font-family: var(--bs-headings-font-family, inherit);
  font-size: 20px;
  font-weight: 600;
  color: #ffffff !important;
  margin: 0 0 8px;
}
.network-graphic__popup-text {
  font-size: 14px;
  line-height: 1.55;
  color: #d4d4d8 !important;
  margin: 0 0 14px;
}
.network-graphic__popup-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cf2a2f !important;
  text-decoration: none;
}
.network-graphic__popup-link:hover {
  color: #ba262a !important;
}
.network-graphic__popup-link i {
  font-size: 12px !important;
  vertical-align: baseline;
}

/* PPT v1.3 follow-up: keep the home target-audience graph INSIDE its fixed-height
   card box on desktop (it clipped top/bottom on wide screens). The wrapper
   shrink-wraps the image so the hotspot percentages stay aligned. The wide
   /solutions/ graphic is untouched (width:100% there). */
@media (min-width: 992px) {
  .block.target-audience .target-audience__card-media .network-graphic {
    width: auto;
    height: 100%;
  }
  .block.target-audience .target-audience__card-media .network-graphic img {
    width: auto;
    height: 100%;
    max-width: none;
  }
}

/* Smooth fade-in for the pop-up (class-based so the transition can run). */
.network-graphic__popup {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.network-graphic__popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .network-graphic__popup {
    transition: none;
    transform: none;
  }
}

/* Compact pop-up variant for the smaller home graph. */
.network-graphic__popup--compact {
  padding: 14px 16px;
}
.network-graphic__popup--compact .network-graphic__popup-title {
  font-size: 16px;
  margin-bottom: 5px;
}
.network-graphic__popup--compact .network-graphic__popup-text {
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.network-graphic__popup--compact .network-graphic__popup-link {
  font-size: 11.5px;
}

/* v1.3 follow-up ("remove the slider"): values section is now a static, contained
   2x2 grid. Kills the full-bleed slider shell (100vw outer, scroll viewport,
   container-aligning track padding) that caused the huge middle gap, and hides
   the arrow nav. Column flow keeps the existing card pairing. */
.block.values-slider .values-slider__nav-col {
  display: none;
}
.block.values-slider .values-slider__slider-outer {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.block.values-slider .values-slider__slider {
  overflow: visible;
}
.block.values-slider .values-slider__viewport {
  overflow: visible;
  cursor: default;
  touch-action: auto;
}
.block.values-slider .values-slider__track {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 32px;
  min-width: 0;
  padding: 0;
}
.block.values-slider .values-slider__card {
  width: auto;
}
@media (min-width: 768px) {
  .block.values-slider .values-slider__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    column-gap: clamp(48px, 7vw, 104px);
    row-gap: 48px;
  }
}

/* Values 2x2 follow-up: the slider-outer lives OUTSIDE .container (full-width
   block child), so clone the container constraints onto it. Measured maxes:
   720 / 960 / 1140 / 1410 (custom xxl). */
.block.values-slider .values-slider__slider-outer {
  margin-inline: auto;
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
@media (min-width: 576px) {
  .block.values-slider .values-slider__slider-outer { max-width: 540px; }
}
@media (min-width: 768px) {
  .block.values-slider .values-slider__slider-outer { max-width: 720px; }
}
@media (min-width: 992px) {
  .block.values-slider .values-slider__slider-outer { max-width: 960px; }
}
@media (min-width: 1200px) {
  .block.values-slider .values-slider__slider-outer { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .block.values-slider .values-slider__slider-outer { max-width: 1410px; }
}
.block.values-slider .values-slider__fade {
  display: none;
}

/* /solutions/ network graphic: align left with the heading (WP constrained
   layout centers block children with margin-inline:auto !important). */
.solutions-network .solutions-network-graphic {
  margin-inline: 0 !important;
}

/* 2026-07-21: image-less single post/event general-header goes full width
   (render.php adds .general-header--full). The base .general-header__main is
   capped at max-width:720px for the two-column layout; lift that cap so a long
   title uses the whole container instead of being cramped. */
.general-header.general-header--full .general-header__main {
  max-width: none;
}

/* ============================================================
   Section-gap collapse (padding review 2026-07-22, Guido: "padding
   on some sections very big", e.g. /investors/ THE THESIS).
   main.css row-padding utilities (lg 80 / xl 110 / xxl 140, all
   !important) stack between adjacent sections into 160-220px gaps.
   These rules cap ONLY the facing edges of adjacent .block
   sections, ONLY for the heavy utilities (lg/xl/xxl), ONLY on
   >=1200px, and only ever reduce (56/40 < 80/110/140), so the
   max-width:991.98px tier (40px) in main.css is never touched.

   Tier 1 - any adjacency (incl. different backgrounds):
            facing edges -> 56px (each band keeps >=56px internal,
            220 gap -> 112).
   Tier 2 - same background both sides (reads as one blank strip):
            facing edges -> 40px (total gap 80px). Wins over tier 1
            by specificity.
   Heroes (.general-header, .home-header) keep their own bottom
   padding but the section below them still tightens its top.
   Bottom-edge rules use :has(); without support they no-op and
   spacing degrades to today's larger values.
   ============================================================ */

@media (min-width: 1200px) {

  /* Tier 1: top edge of any section that follows a section */
  .block + .block:is(.row-padding-top-lg, .row-padding-top-xl, .row-padding-top-xxl) {
    padding-top: 56px !important;
  }

  /* Tier 1: bottom edge of any non-hero section followed by a section */
  .block:not(.general-header):not(.home-header):is(.row-padding-bottom-lg, .row-padding-bottom-xl, .row-padding-bottom-xxl):has(+ .block) {
    padding-bottom: 56px !important;
  }

  /* Tier 2: same background on both sides -> collapse harder */
  .block.bg-white      + .block.bg-white:is(.row-padding-top-lg, .row-padding-top-xl, .row-padding-top-xxl),
  .block.bg-grey       + .block.bg-grey:is(.row-padding-top-lg, .row-padding-top-xl, .row-padding-top-xxl),
  .block.bg-grey-light + .block.bg-grey-light:is(.row-padding-top-lg, .row-padding-top-xl, .row-padding-top-xxl),
  .block.bg-dark       + .block.bg-dark:is(.row-padding-top-lg, .row-padding-top-xl, .row-padding-top-xxl),
  .block.bg-black      + .block.bg-black:is(.row-padding-top-lg, .row-padding-top-xl, .row-padding-top-xxl),
  .block.bg-primary    + .block.bg-primary:is(.row-padding-top-lg, .row-padding-top-xl, .row-padding-top-xxl) {
    padding-top: 40px !important;
  }

  .block.bg-white:not(.general-header):not(.home-header):is(.row-padding-bottom-lg, .row-padding-bottom-xl, .row-padding-bottom-xxl):has(+ .block.bg-white),
  .block.bg-grey:not(.general-header):not(.home-header):is(.row-padding-bottom-lg, .row-padding-bottom-xl, .row-padding-bottom-xxl):has(+ .block.bg-grey),
  .block.bg-grey-light:not(.general-header):not(.home-header):is(.row-padding-bottom-lg, .row-padding-bottom-xl, .row-padding-bottom-xxl):has(+ .block.bg-grey-light),
  .block.bg-dark:not(.general-header):not(.home-header):is(.row-padding-bottom-lg, .row-padding-bottom-xl, .row-padding-bottom-xxl):has(+ .block.bg-dark),
  .block.bg-black:not(.general-header):not(.home-header):is(.row-padding-bottom-lg, .row-padding-bottom-xl, .row-padding-bottom-xxl):has(+ .block.bg-black),
  .block.bg-primary:not(.general-header):not(.home-header):is(.row-padding-bottom-lg, .row-padding-bottom-xl, .row-padding-bottom-xxl):has(+ .block.bg-primary) {
    padding-bottom: 40px !important;
  }
}
/* ponytail: bg-grey vs bg-grey-light adjacency treated as cross-bg
   (56px edges). If the client reads them as one band, add those two
   pair combos to the tier-2 lists. md-tier (60px) deliberately not
   capped; revisit only if pages still feel airy. */

/* ===============================================================
   Event banners in de home-hero (CIOE / ECOC) — 2026-08-19
   Taak 19538092. Guido: "very visible on the right side on the
   front page within the big picture", klikbaar naar de eventpagina.

   UITLIJNING — de banner lijnt uit op het TEKSTBLOK, niet op de hero:
   .row is precies dat blok (kop, inleiding, knoppen), dus die krijgt
   position:relative en de rail hangt eraan met bottom:0. Resultaat,
   gemeten op 1200 t/m 1920: de onderrand van de banner valt exact samen
   met de onderrand van de knoppenrij (verschil 0px op elke breedte), de
   linkerrand staat 72px rechts van de tekst, en de rechterrand eindigt
   op dezelfde lijn waar de tekst links begint.

   Waarom niet op .home-header__container ankeren: die is display:flex
   met align-items:center en heeft eigen padding, dus flex-end kwam 70px
   ONDER de knoppen uit (gemeten op 1600). Waarom niet op .col-12: die
   heeft fade-in-left, dan zou de banner van links binnenschuiven terwijl
   hij rechts staat.

   position:relative staat er expliciet en niet impliciet: GSAP zet een
   transform op elementen in de hero, en een transform maakt een element
   óók het containing block. Daarop leunen is fragiel — valt de animatie
   weg, dan ankert de banner ineens op de hero.
   =============================================================== */

.home-header__banners {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-header__banner {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-header__banner:hover,
.home-header__banner:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

.home-header__banner-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .home-header__banner { transition: none; }
  .home-header__banner:hover,
  .home-header__banner:focus-visible { transform: none; }
}

/* Vanaf 1200px: rechts van de tekst, onderrand gelijk met de knoppen.
   Absoluut, dus de banner telt niet mee voor de hoogte van de hero en
   die hoeft niet te groeien.

   De maten zijn afgeleid, niet gegokt. De rail is een direct kind van
   .row, dus Bootstrap geeft hem 12px gutter-padding; die gaat eraf zodat
   de opgegeven breedte ook de zichtbare breedte is. De row is 664px breed
   en staat links tegen de container aan, dus de ruimte tot de rechter
   binnenrand van de container is: containerbreedte - 664 - 60 (de left-
   offset) - 12 (containerpadding) = containerbreedte - 736. De min()
   zorgt dat een venster dat smaller is dan de maximale container niet
   overloopt. Wordt de heldere hero-tekst ooit breder, dan schuift de
   linkerkant vanzelf mee (left is 100%), maar moet die 736 opnieuw
   gemeten worden. */
@media (min-width: 1200px) {
  .home-header__container .row { position: relative; }

  .home-header__banners {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: calc(100% + 60px);
    padding-inline: 0;
    /* Bootstrap geeft directe kinderen van .row een max-width:100%, en dat is
       hier de rowbreedte van 664px: zonder deze regel wordt elke bredere
       banner stil teruggeknipt naar 664 en haalt hij de containerrand net
       niet (gemeten: 9px tekort op 1440 en breder). */
    max-width: none;
    width: min(404px, calc(100vw - 736px));
  }
}

@media (min-width: 1400px) {
  .home-header__banners {
    width: min(674px, calc(100vw - 736px));
  }
}

/* Tot 1200px: gewoon in de flow onder de knoppen. De rail is hier een
   flexkind van .row (die wrapt), vandaar de volle basis. De hero is
   hoogtegebonden (aspect-ratio + max-height:80vh) met overflow:hidden;
   zonder die vrijgave wordt de banner afgeknipt — gemeten op 1280x800
   stak hij 55px onder de hero uit. Alleen als er ook echt een banner is. */
@media (max-width: 1199.98px) {
  .home-header__banners {
    flex: 0 0 100%;
    max-width: 560px;
    margin-top: 32px;
  }

  .home-header:has(.home-header__banners) {
    max-height: none;
    aspect-ratio: auto;
  }
}

/* ponytail: één rail, geen carrousel en geen per-banner instellingen.
   Het veld staat op max 3 rijen; bij meer events is stapelen sowieso
   het verkeerde antwoord en hoort er een eventstrip onder de hero. */

/* Reduced motion: de banner staat er meteen, zonder inschuiven.
   initFadeInAnimations() in app.js kent geen prefers-reduced-motion-guard en
   zet zijn beginstand (opacity 0, y 50) als INLINE stijl op het element;
   gemeten met reducedMotion:reduce stond de banner na 300ms nog op opacity 0
   en pas na ~1s op 1. Een gewone CSS-regel verliest van inline, !important
   niet — vandaar dat het hier wel staat en verder nergens.
   Dit dekt alleen deze banner. De rest van de site heeft hetzelfde gat, maar
   dat is een wijziging in app.js die elk blok raakt. */
@media (prefers-reduced-motion: reduce) {
  .home-header__banners {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   Banner leesbaar houden tegen de hero-foto — 2026-08-19
   Guido: "ik zie eerst de donkere foto van de serverruimte, de banner
   staat daar overheen, de kleuren zijn nu te gelijk."

   Gemeten: de hero wisselt DRIE foto's (dwell 12s). Achter de banner is
   slide 1 (serverruimte, de eerste die je ziet) L=53 terwijl de banner
   zelf L=52 is — praktisch identiek. Slides 2 en 3 zitten op L=130, daar
   leest de banner juist prima omdat hij dan het donkere object is.
   Randcontrast gemeten over alle slides: 1,10 tot 2,87 : 1, waar een
   waarneembare rand 3:1 nodig heeft.

   Daarom een RAND en geen luminantie-ingreep: de omgeving donkerder maken
   repareert slide 1 en sloopt slide 2 en 3, want daar draait de polariteit
   om. Een lichte rand draagt de donkere slide, een echte slagschaduw draagt
   de lichte slides.

   De oude schaduw deed hier niets: 0 10px 34px was alleen naar BENEDEN
   verschoven, dus de bovenrand (een van de slechtste) kreeg niets, en zwart
   over een zwarte foto verschuift niets.

   Twee klassen in de selector met opzet: in de gebundelde main.css staat
   .home-header__banner met één klasse, dus deze moet zwaarder wegen
   ongeacht de volgorde waarin LiteSpeed de bestanden samenvoegt.
   --------------------------------------------------------------- */

.home-header__banners .home-header__banner {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.46),   /* rand: leest op de donkere slide */
    0 0 18px 6px rgba(0, 0, 0, 0.55),      /* halo rondom: zet de rand af */
    0 22px 48px -10px rgba(0, 0, 0, 0.7);  /* slagschaduw: leest op de lichte slides */
}

.home-header__banners .home-header__banner:hover,
.home-header__banners .home-header__banner:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 20px 6px rgba(0, 0, 0, 0.6),
    0 30px 60px -12px rgba(0, 0, 0, 0.75);
}

/* De in-flow variant is ~560px breed en dus ~173px hoog; een schaduw met
   48px blur en 22px offset is daar een derde van de bannerhoogte. */
@media (max-width: 1199.98px) {
  .home-header__banners .home-header__banner {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.44),
      0 0 14px 4px rgba(0, 0, 0, 0.5),
      0 14px 28px -8px rgba(0, 0, 0, 0.65);
  }
}

/* ---- Nav legibility on light hero photos (Guido 2026-08-20): the stock overlay
   only darkens the left and bottom edges, so white navbar text sat on the bright
   cleanroom photo at ~0.12 alpha. Adds a top fade behind the navbar; keeps the
   existing two gradients verbatim underneath. ---- */
.home-header .home-header__overlay {
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.45) 0%, rgba(17, 17, 17, 0) 20%),
    linear-gradient(90deg, rgba(17, 17, 17, 0.78) 0%, rgba(17, 17, 17, 0.52) 38%, rgba(17, 17, 17, 0.22) 62%, rgba(17, 17, 17, 0) 88%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.12) 0%, rgba(17, 17, 17, 0.5) 100%);
}