/* ===================================================================
 * paricon nav CSS — loaded on EVERY page (header/nav appears everywhere)
 * Migrated from Kit #9 custom CSS field — Batch 2
 * Mega menu category cards + modal dialog border fix
 * =================================================================== */

/* A17 Modal popup - remove border (applies to all BDT modals site-wide) */
.bdt-modal-dialog {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* === MEGA MENU CATEGORIES: Filter Tabs === */

/* Gaps */
[data-id="4fcaf46"],
[data-id="090a189"],
[data-id="suites_row"] {
  gap: 12px !important;
}
[data-id="6c4da88"] {
  gap: 10px !important;
}

/* Allow hover overflow */
[data-id="4fcaf46"],
[data-id="090a189"],
[data-id="suites_row"],
[data-id="6c4da88"],
[data-id="a2d1c0f"] {
  overflow: visible !important;
}

/* Square cards: capped at 200px */
[data-id="4fcaf46"] .elementor-widget-uicore-icon-box,
[data-id="090a189"] .elementor-widget-uicore-icon-box,
[data-id="suites_row"] .elementor-widget-uicore-icon-box {
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 calc((100% - 24px) / 3) !important;
  max-width: min(calc((100% - 24px) / 3), 200px) !important;
  width: calc((100% - 24px) / 3) !important;
  max-height: 200px !important;
  flex-grow: 0 !important;
  position: relative;
  cursor: pointer;
  border-radius: 16px !important;
  overflow: hidden;
  border: none !important;
  transition: transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275),
              box-shadow 0.35s ease !important;
}

/* === MEGA-MENU TILES: center the hover-text in every tab + navigation path (2026-06-19) ===
   Root cause: UiCore's icon-box animate() (icon-box.js) writes an inline min-height on
   .ui-e-ico-box from jQuery outerHeight() reads. outerHeight() returns 0 under a
   display:none ancestor, and the inactive tab panels carry .prc-hidden (display:none).
   So whenever animate() runs while a panel is the inactive (hidden) tab, that panel's
   tiles collapse to min-height:96px (just the 48+48 content-padding) instead of ~190px.
   The .ui-e-flex-wrp (icon + title) is positioned absolute/align-items:end inside that
   short box, so the title lands ~55-64px above the tile centre — the "hover-text
   mispositioned" bug. animate() RE-RUNS every time the mega dropdown re-opens, re-measuring
   whichever panel is hidden at that moment — so the break lands on Suites OR Frameworks
   depending on the path (e.g. leave on Suites → re-open → switch to Frameworks breaks the
   Frameworks tiles). Fix: pin the resting height on EVERY description-show tile in all three
   card-grid rows (Frameworks rows 4fcaf46 + 090a189, and Suites suites_row), so the computed
   height is always 190px no matter when/where animate() ran. The "Square cards" rule above
   caps the tiles to a 200px square, so 190px centres them all uniformly. Scope: mega-menu
   card grids only — prc-hidden stays intact, Consulting tiles (no description-show) and every
   other page are untouched. Verified headless across the re-entry path: 96px/−64 → 190px/+10
   on both Suites and Frameworks tiles, DE + EN. Does NOT remove prc-hidden.
   Selector is STRUCTURAL (.uicore-megamenu + description-show), not data-id-based, so it
   survives an Elementor header-template rebuild that would regenerate the row ids
   (4fcaf46 / 090a189 / suites_row) and covers the EN sibling template (post 2858) too —
   header templates are DE post 89 / EN post 2858. Audited: the only description-show
   icon-boxes inside .uicore-megamenu are these 7 Lösungen tiles; the CTA (45c9def) and the
   Warum/Unternehmen dropdowns are not description-show, so nothing else is matched. 190px =
   the "Square cards" 200px cap minus container chrome; recalculate if the tile copy/size grows. */
.uicore-megamenu .elementor-widget-uicore-icon-box.ui-e-animation-description-show .ui-e-ico-box {
  min-height: 190px !important;
}

/* Kill ALL borders (normal + hover) */
[data-id="4fcaf46"] .elementor-widget-uicore-icon-box,
[data-id="090a189"] .elementor-widget-uicore-icon-box,
[data-id="suites_row"] .elementor-widget-uicore-icon-box,
[data-id="4fcaf46"] .elementor-widget-uicore-icon-box:hover,
[data-id="090a189"] .elementor-widget-uicore-icon-box:hover,
[data-id="suites_row"] .elementor-widget-uicore-icon-box:hover {
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
}

/* Hover: gentle lift */
[data-id="4fcaf46"] .elementor-widget-uicore-icon-box:hover,
[data-id="090a189"] .elementor-widget-uicore-icon-box:hover,
[data-id="suites_row"] .elementor-widget-uicore-icon-box:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4) !important;
  z-index: 10;
}

/* Title on image-backed cards: transparent by default (JSON title_color #02010100),
   turns PINK (#FF0071) on hover (JSON title_color_hover).
   Do NOT force opacity:0 — that blocks the hover color change. */

/* DESCRIPTION on image cards: let UiCore animation handle hover-reveal.
   Do NOT use display:none — that blocks the hover animation entirely.
   The description_animation class hides it by default and shows on hover. */

/* === IRS CARD: hover-text reveal restored to match its siblings (2026-06-16) ===
   The 2026-06-15 change turned this into a static logo card: the title is
   transparent in ALL states (data title_color_hover=#02010100 + the all-states
   rule that used to live here) and there is no hover-darken, so unlike the
   Data Protection Suite / framework cards it showed NO text on hover. This
   restores the sibling behaviour purely in CSS (no _elementor_data edit on the
   menu template): the bright logo still carries the label at rest, but on hover a
   navy scrim fades in over the logo and the title "BIRD & IReF Reporting" reveals
   in brand pink — exactly like "DSGVO für SAP-Systeme" on the DPS card. */
[data-id="suites_row"] [data-id="irs_menu"] { position: relative; }
/* navy scrim that fades in on hover to cover the bright logo, so the pink title reads */
[data-id="suites_row"] [data-id="irs_menu"]::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background: linear-gradient(135deg, #192D41 0%, #1A2032 100%);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
[data-id="suites_row"] [data-id="irs_menu"]:hover::after { opacity: 1; }
/* lift the icon-box content above the scrim so the revealed title sits on top */
[data-id="suites_row"] [data-id="irs_menu"] .ui-e-flex-wrp,
[data-id="suites_row"] [data-id="irs_menu"] .ui-e-box-content { position: relative; z-index: 3; }
/* title: transparent at rest (logo shows), brand pink on hover (reveal), smooth fade */
[data-id="suites_row"] [data-id="irs_menu"] .ui-e-title {
  color: rgba(2,1,1,0) !important;
  transition: color 0.35s ease !important;
}
[data-id="suites_row"] [data-id="irs_menu"]:hover .ui-e-title { color: #FF0071 !important; }

/* === CONSULTING TAB: 8 icon-box offerings with hover === */

/* The consulting panels: co_row1 > 155b368 (left col) + co_row2 (right col) */
[data-id="155b368"] .elementor-widget-uicore-icon-box,
[data-id="co_row2"] .elementor-widget-uicore-icon-box {
  cursor: pointer;
  border-radius: 10px;
  padding: 14px 16px !important;
  transition: background 0.25s ease, transform 0.2s ease;
}

[data-id="155b368"] .elementor-widget-uicore-icon-box:hover,
[data-id="co_row2"] .elementor-widget-uicore-icon-box:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}

/* Title: brighten on hover */
[data-id="155b368"] .elementor-widget-uicore-icon-box .ui-e-title,
[data-id="co_row2"] .elementor-widget-uicore-icon-box .ui-e-title {
  transition: color 0.25s ease;
}
[data-id="155b368"] .elementor-widget-uicore-icon-box:hover .ui-e-title,
[data-id="co_row2"] .elementor-widget-uicore-icon-box:hover .ui-e-title {
  color: var(--e-global-color-uicore_secondary, #E6007E) !important;
}

/* Description: subtle brighten on hover */
[data-id="155b368"] .elementor-widget-uicore-icon-box .ui-e-description,
[data-id="co_row2"] .elementor-widget-uicore-icon-box .ui-e-description {
  transition: color 0.25s ease;
}
[data-id="155b368"] .elementor-widget-uicore-icon-box:hover .ui-e-description,
[data-id="co_row2"] .elementor-widget-uicore-icon-box:hover .ui-e-description {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Equalize the two CONSULTING columns (added 2026-06-16). The right column
   (co_row2) shipped with gap:8px / padding:0 0 8px while the left (155b368)
   has gap:20px / padding:10px, so the right column packed its 4 rows tighter
   and they drifted up out of alignment with the left. Both columns are already
   the same width (375px); forcing identical gap + padding makes them equal
   height and lines the 4 rows up across the pair. */
[data-id="155b368"],
[data-id="co_row2"] {
  gap: 20px !important;
  padding: 10px !important;
  align-content: flex-start !important;
}

/* === MEGA MENU CTA CARD: "Lösungen entdecken" prominence (added 2026-05-26) ===
   The CTA card on the right side of every mega-menu panel (consulting/frameworks/suites)
   is the primary call-to-action — should be visually obvious as the first thing to click.
   Targets the centered uicore-icon-box with element ID 45c9def. */

#elementor-element-45c9def,
.elementor-element-45c9def {
  cursor: pointer;
  border-radius: 28px !important;
  overflow: hidden;
  /* No bleed — the parent is `.elementor-element-6b683fa e-con-full e-flex`,
     a flex container that constrains the CTA's width to parent content area.
     Negative margin shifts the box left without growing its width, so the
     card ends up off-center (10px LEFT of parent center). Verified via
     chrome-devtools measurement on 2026-05-26 — removing the bleed restores
     true centering. Subtitle wrapping is handled by reducing internal padding. */
  margin: 0 !important;
  width: auto !important;
  transition: transform 0.34s cubic-bezier(0.2, 0.85, 0.35, 1.5),
              box-shadow 0.34s ease,
              filter 0.34s ease;
  will-change: transform;
}

/* Single layer of padding on the outer widget container — and force the inner
   UiCore icon-box structure to flex-center its children. The widget renders
   .ui-e-ico-box > .ui-e-flex-wrp (NOT .ui-e-icon-box) as a flex container that
   defaults to flex-start, which causes content to sit left-of-card-center even
   when the widget is set to "align center". The rules below force flex-column
   center on the flex wrapper and force the title block to center its text. */
#elementor-element-45c9def > .elementor-widget-container,
.elementor-element-45c9def > .elementor-widget-container {
  /* Reduced horizontal padding 32px -> 24px after removing the bleed (above),
     giving the subtitle 16px more horizontal room to wrap better. */
  padding: 40px 24px !important;
}
#elementor-element-45c9def .ui-e-ico-box,
.elementor-element-45c9def .ui-e-ico-box {
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#elementor-element-45c9def .ui-e-flex-wrp,
.elementor-element-45c9def .ui-e-flex-wrp {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 18px !important;
}
#elementor-element-45c9def .ui-e-icon-wrp,
.elementor-element-45c9def .ui-e-icon-wrp {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  justify-content: center !important;
}
#elementor-element-45c9def .ui-e-title-wrp,
.elementor-element-45c9def .ui-e-title-wrp {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#elementor-element-45c9def .ui-e-title,
.elementor-element-45c9def .ui-e-title,
#elementor-element-45c9def .ui-e-subtitle,
.elementor-element-45c9def .ui-e-subtitle {
  text-align: center !important;
}

#elementor-element-45c9def:hover,
.elementor-element-45c9def:hover {
  transform: scale(1.06) translateY(-7px);
  box-shadow: 0 32px 72px rgba(2, 203, 255, 0.50),
              0 14px 34px rgba(255, 0, 113, 0.42),
              0 4px 12px rgba(0, 0, 0, 0.20);
  filter: saturate(1.18) brightness(1.05);
}

/* Button: from white-on-gradient to solid cyan filled, bigger, bolder, clear CTA */
#elementor-element-45c9def .ui-e-readmore,
.elementor-element-45c9def .ui-e-readmore {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: #02CBFF !important;
  color: #192D41 !important;
  padding: 14px 30px 14px 32px !important;
  border-radius: 999px !important;
  font-family: "Barlow Semi Condensed", Barlow, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(2, 203, 255, 0.42);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
  margin-top: 8px !important;
}
#elementor-element-45c9def .ui-e-readmore:hover,
.elementor-element-45c9def .ui-e-readmore:hover {
  background: #FFFFFF !important;
  color: #192D41 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(2, 203, 255, 0.55),
              0 2px 6px rgba(0, 0, 0, 0.18);
}
#elementor-element-45c9def .ui-e-readmore i,
.elementor-element-45c9def .ui-e-readmore i {
  font-size: 14px;
  transition: transform 0.2s ease;
}
#elementor-element-45c9def .ui-e-readmore:hover i,
.elementor-element-45c9def .ui-e-readmore:hover i {
  transform: translateX(3px);
}

/* Title: slightly larger + tighter for stronger headline weight */
#elementor-element-45c9def .ui-e-title,
.elementor-element-45c9def .ui-e-title {
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 10px !important;
}

/* Subtle pulse hint on the badge so the eye snaps to the card */
#elementor-element-45c9def .ui-e-badge,
.elementor-element-45c9def .ui-e-badge {
  animation: prc-cta-pulse 2.6s ease-in-out infinite;
}
@keyframes prc-cta-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.92; }
}

/* === CTA CARD — vivid + legible (2026-06-16 v2) ===
   v1 went dark-navy for legibility but lost the standout pull this card needs as
   the funnel to /portfolio/. v2 keeps the vibrant cyan→pink gradient (the original
   Elementor surface — no background override) and fixes legibility ON TOP of it:
   a soft navy scrim that deepens the gradient just enough behind the centred text,
   white headline + subtitle with a soft shadow, a white check on a white ring, and
   a solid WHITE pill button (navy text) as the crisp high-contrast click anchor.
   Stands out AND reads. This block is last so it wins over the 2026-05-26 rules. */
/* Keep the original vivid cyan→pink gradient untouched (that's the standout pull).
   Legibility is handled purely with white text + a dark halo shadow + a solid white
   button/icon — no scrim, so the card stays as vibrant as the original. */
/* Headline: white, bold, dark halo so it holds on the bright cyan top */
#elementor-element-45c9def .ui-e-title,
.elementor-element-45c9def .ui-e-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 16px rgba(26, 32, 50, 0.65), 0 0 2px rgba(26, 32, 50, 0.55) !important;
}
/* Subtitle: full white + halo (was washed out) */
#elementor-element-45c9def .ui-e-subtitle,
.elementor-element-45c9def .ui-e-subtitle,
#elementor-element-45c9def .ui-e-description,
.elementor-element-45c9def .ui-e-description {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(26, 32, 50, 0.6), 0 0 2px rgba(26, 32, 50, 0.5) !important;
}
/* Icon → white ring + white check (recolour the baked-in pink SVG <img> to white) */
#elementor-element-45c9def .ui-e-icon-wrp,
.elementor-element-45c9def .ui-e-icon-wrp {
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  box-sizing: border-box;
}
#elementor-element-45c9def .ui-e-icon-wrp img,
.elementor-element-45c9def .ui-e-icon-wrp img {
  filter: brightness(0) invert(1) !important;
}
/* Button → solid white pill, navy text: the crisp high-contrast click anchor that
   pops on the colourful gradient. Hover inverts to navy/white. */
#elementor-element-45c9def .ui-e-readmore,
.elementor-element-45c9def .ui-e-readmore {
  background: #FFFFFF !important;
  color: #192D41 !important;
  box-shadow: 0 8px 22px rgba(26, 32, 50, 0.32) !important;
}
#elementor-element-45c9def .ui-e-readmore:hover,
.elementor-element-45c9def .ui-e-readmore:hover {
  background: #192D41 !important;
  color: #FFFFFF !important;
}

/* === END MEGA MENU CTA === */

/* === END MEGA MENU === */

/* Hide Polylang nav-menu language switcher (redundant with DE/EN widget in header logo area) */
.lang-item { display: none !important; }

/* === Mobile touch-target accessibility (WCAG 2.5.5) added 2026-05-27 === */
@media (max-width: 1024px) {
  /* Hamburger toggle: native 20px, grow tap area to 44 via padding */
  .uicore-toggle.uicore-ham {
    box-sizing: content-box;
    padding: 12px !important;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }
  /* DE/EN language switcher: native 14-15px chars, enlarge tap area */
  .prc-lang-switcher .prc-lang,
  .prc-lang-switcher--desktop .prc-lang,
  .prc-lang-switcher--mobile .prc-lang {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 4px 8px;
  }
  /* Header "Kontakt" pill: native 34px height, meet 44px.
     The header CTA is a UiCore button (.uicore-btn), not .elementor-button. */
  header .elementor-button,
  header a.uicore-btn,
  #wrapper-navbar .elementor-button,
  #wrapper-navbar a.uicore-btn,
  .uicore-navbar .elementor-button,
  .uicore-navbar a.uicore-btn {
    min-height: 44px !important;
    padding-block: 11px !important;
    display: inline-flex !important;
    align-items: center;
    line-height: 1.2;
  }
}


/* ── Header navbar width on large screens (paricon 2026-06-30) ───────────────
   The uicore content container is capped at the global 1176px boxed width, so on
   large monitors it stays frozen and pushes the logo + CTA far inboard ("Contact
   CTA too far left on large screens"). Widen the navbar container above 1700px so
   the logo/CTA sit nearer the edges. Laptops (<=1680) are unchanged. Tunable: the
   1800px cap / 1700px breakpoint below. */
@media (min-width: 1700px) {
  .uicore-navbar .uicore-container { max-width: min(92%, 1800px) !important; }
}