/* Dialog Group website concept v32
   UI refinements requested after the v31 green-accent variant.
   This layer preserves the existing design system and changes only partner
   presentation, menu states, sector-menu borders and homepage separation. */

body.v32-site {
  --v32-menu-active-bg: var(--ice, #EBF2FB);
  --v32-menu-active-border: var(--border, rgba(0, 39, 102, 0.14));
  --v32-menu-hover-bg: var(--pearl, #F5F7FA);
}

/* --------------------------------------------------------------------------
   1. Partner ecosystem
   Six remaining technology partners share the same dark-section card style.
   The official black Eye-Able wordmark is rendered white to match the other
   monochrome partner marks without changing the source asset.
   -------------------------------------------------------------------------- */
body.v32-site .partner-logo-grid-v27 img[alt="Eye-Able"] {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 42px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

body.v32-site .partner-logo-grid-v27 li.partner-logo-eye-able-v32 {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   2. Clearer background separation on the homepage
   The collaboration block keeps the existing ice-blue surface. The result
   cases now sit on white, producing a clear but calm transition.
   -------------------------------------------------------------------------- */
body.v32-site.home-page .editorial-photo-section--collaboration {
  background: var(--ice, #EBF2FB);
}

body.v32-site.home-page .cases-section {
  background: var(--white, #FFFFFF);
  box-shadow: inset 0 1px 0 rgba(0, 39, 102, 0.08);
}

/* --------------------------------------------------------------------------
   3. One active-state pattern for all content menus
   This matches the existing Over ons card treatment: ice background, subtle
   border, no decorative inset bar and no movement on the current item.
   -------------------------------------------------------------------------- */
body.v32-site :is(
  #menu-oplossingen .menu-link-list a,
  #menu-sectoren .sector-menu-card,
  #menu-inspiratie .insights-menu-list a,
  #menu-inspiratie .insights-featured-card,
  #menu-over-ons .about-menu-card
) {
  border: 1px solid transparent;
}

body.v32-site :is(
  #menu-oplossingen .menu-link-list a,
  #menu-sectoren .sector-menu-card,
  #menu-inspiratie .insights-menu-list a,
  #menu-inspiratie .insights-featured-card,
  #menu-over-ons .about-menu-card
)[aria-current] {
  color: var(--ink, #2B3A52);
  border-color: var(--v32-menu-active-border);
  background: var(--v32-menu-active-bg);
  box-shadow: none;
  text-decoration: none;
  transform: none;
}

body.v32-site :is(
  #menu-oplossingen .menu-link-list a,
  #menu-sectoren .sector-menu-card,
  #menu-inspiratie .insights-menu-list a,
  #menu-inspiratie .insights-featured-card,
  #menu-over-ons .about-menu-card
)[aria-current] strong {
  color: var(--royal-dark, #004A97);
}

/* Remove the older solution-menu inset stripe so every active menu card uses
   exactly the same visual grammar. */
body.v32-site.solution-detail-page #menu-oplossingen .menu-link-list a[aria-current] {
  box-shadow: none;
}

body.v32-site .nav-item.is-active-section > .nav-trigger {
  color: var(--royal-dark, #004A97);
  background: var(--ice, #EBF2FB);
  text-decoration: underline;
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.28em;
}

/* --------------------------------------------------------------------------
   4. Sector menu without visible card lines
   Normal and hover states now follow the open menu-link treatment used by the
   other dropdowns. The active item still gets the shared active-state border.
   -------------------------------------------------------------------------- */
body.v32-site #menu-sectoren .sector-menu-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.v32-site #menu-sectoren .sector-menu-card:hover,
body.v32-site #menu-sectoren .sector-menu-card:focus-visible {
  border-color: transparent;
  background: var(--v32-menu-hover-bg);
  box-shadow: none;
  transform: translateX(2px);
}

body.v32-site #menu-sectoren .sector-menu-card[aria-current] {
  border-color: var(--v32-menu-active-border);
  background: var(--v32-menu-active-bg);
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Over ons menu hierarchy and footer breathing room
   The supporting sentence now sits directly below the heading. The final link
   has more space below it, while keeping the existing panel structure.
   -------------------------------------------------------------------------- */
body.v32-site .about-menu-intro {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

body.v32-site .about-menu-intro .menu-heading {
  margin-bottom: 0;
}

body.v32-site .about-menu-intro > p:last-child {
  max-width: 62ch;
}

body.v32-site .nav-dropdown-panel--about .menu-panel-footer {
  padding-top: 16px;
  padding-bottom: 24px;
}

/* Arrow icons and glyphs were removed from links and buttons in the HTML.
   These spacing resets prevent empty visual space in dropdown triggers and
   CTA rows after removing the chevrons and directional glyphs. */
body.v32-site .nav-trigger {
  gap: 0;
}

body.v32-site :is(.button, .text-link, .menu-panel-footer a, .menu-advice-card a) > span[aria-hidden="true"]:empty {
  display: none;
}

@media (max-width: 980px) {
  body.v32-site .about-menu-intro {
    gap: 8px;
  }
}