@charset "UTF-8";/*
 Patho-logisch · T4 BS5 Blank Header Refresh · v1
 -------------------------------------------------
 Design layer only. No HTML changes, no JS event handlers, no menu reparenting.
 Works only on a page containing #pl-home-2026 (the Joomla 2026 test homepage).
 Keep your existing T4 custom code and V9 untouched.
*/

/* Palette and header surfaces. T4 layouts use different header blocks depending on
   configuration; selectors deliberately account for the common T4 BS5 variations. */
body:has(#pl-home-2026) :is(#t4-header-wrap, #t4-header, .t4-header, header.header-block, .header-block, .t4-mainnav, #t4-mainnav, .header-bottom) {
  --mainnav-text-color: #f7f5fc;
  --pl-header-ink: #f7f5fc;
  --pl-header-accent: #d79bea;
  --pl-header-navy: #35384d;
  background-color: #35384d !important;
  color: #f7f5fc;
}

/* Visual depth without sticky/fixed positioning: does not interfere with
   overlays, lazy-loaded megamenu columns, or T4's own sticky option. */
body:has(#pl-home-2026) :is(#t4-header-wrap, header.header-block, .t4-header) {
  box-shadow: 0 3px 18px rgba(35, 32, 61, .12);
  position: relative;
  z-index: 100; /* far below ICD/ImageBase overlays */
}

/* Wider, centered header container, preserving T4's own responsive breakpoints. */
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block, .t4-mainnav, .header-bottom)
:is(.container, .container-fluid, .container-xl, .container-xxl, .t4-header-inner) {
  max-width: 1680px;
  padding-left: clamp(16px, 2.5vw, 40px);
  padding-right: clamp(16px, 2.5vw, 40px);
  margin-left: auto;
  margin-right: auto;
}

/* More presence for T4's existing text/image logo. No replacement assets. */
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
:is(.navbar-brand, .logo-text, .site-name) {
  font-size: clamp(20px, 1.7vw, 27px) !important;
  font-weight: 790 !important;
  letter-spacing: -.035em !important;
  line-height: 1.18;
}
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
:is(.navbar-brand, .logo-text, .site-name) a,
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block) a.navbar-brand {
  color: #fff !important;
  text-decoration: none !important;
}
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
:is(.navbar-brand.logo-image img, .logo-image img) {
  max-height: 52px;
  width: auto;
  object-fit: contain;
}
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block) .site-slogan {
  font-size: 11px !important;
  color: #d5d5e4 !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
}

/* Header spacing; no forced single-row layout so large existing menu stays intact. */
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
:is(.header-wrap, .t4-header-inner) {
  min-height: 68px;
  gap: clamp(8px, 1.2vw, 20px);
}
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block, .t4-mainnav)
.t4-navbar {
  min-width: 0;
}

/* Only TOP LEVEL items. Existing global `.nav-item{height:45px!important}` is
   intentionally overridden here, not on the rest of the website. */
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav.level0 > .nav-item,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item {
  height: auto !important;
  min-height: 46px;
  display: flex;
  align-items: center;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav.level0,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu) > .navbar-nav {
  gap: clamp(0px, .25vw, 5px);
  align-items: center;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item > :is(a, .nav-link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f7f5fc !important;
  font-size: clamp(12px, .91vw, 14px);
  font-weight: 580;
  letter-spacing: .005em;
  line-height: 1.2;
  white-space: nowrap;
  border: 0 !important;
  border-radius: 8px;
  min-height: 40px;
  padding: 11px clamp(8px, .7vw, 13px) !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item > :is(a, .nav-link):hover,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item > :is(a, .nav-link):focus-visible {
  background: rgba(255,255,255,.11) !important;
  color: #fff !important;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item.active > :is(a, .nav-link),
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item.current > :is(a, .nav-link),
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item > :is(a, .nav-link).active {
  background: rgba(204,148,221,.16) !important;
  color: #fff !important;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item.active > :is(a, .nav-link)::after,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
.navbar-nav > .nav-item.current > :is(a, .nav-link)::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: #d79bea;
  border-radius: 2px;
}

/* T4's real mega/dropdown menus: keep them white and readable. Do not
   override position/display/width, so the existing lazy-menu keeps working. */
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav, .header-bottom)
:is(.dropdown-menu, .mega-dropdown-menu) {
  background: #fff !important;
  color: #262b43 !important;
  border: 1px solid #e7e7f0 !important;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(31,35,64,.16);
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav, .header-bottom)
:is(.dropdown-menu, .mega-dropdown-menu) :is(.nav-item, .dropdown-item) > a,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav, .header-bottom)
:is(.dropdown-menu, .mega-dropdown-menu) a.dropdown-item {
  color: #263047 !important;
  border-radius: 5px;
  text-decoration: none !important;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav, .header-bottom)
:is(.dropdown-menu, .mega-dropdown-menu) :is(.nav-item, .dropdown-item) > a:hover,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav, .header-bottom)
:is(.dropdown-menu, .mega-dropdown-menu) a.dropdown-item:hover {
  background: #35384d !important;
  color: #fff !important;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav, .header-bottom)
.dropdown-menu .nav-header { color: #71527d !important; }

/* T4's existing mobile controls (never change visibility/display rules). */
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
:is(.navbar-toggler, .offcanvas-toggle, .t4-offcanvas-toggle, .btn-offcanvas) {
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  border-radius: 9px;
}
body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
:is(.navbar-toggler, .offcanvas-toggle, .t4-offcanvas-toggle, .btn-offcanvas):focus-visible,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu) a:focus-visible {
  outline: 3px solid #d79bea;
  outline-offset: 2px;
}

@media (max-width: 1199.98px) {
  body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu)
  .navbar-nav > .nav-item > :is(a, .nav-link) {
    font-size: 12px;
    padding-inline: 7px !important;
  }
}
@media (max-width: 991.98px) {
  body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
  :is(.header-wrap, .t4-header-inner) { min-height: 64px; }
  body:has(#pl-home-2026) :is(#t4-header-wrap, .t4-header, .header-block)
  :is(.navbar-brand, .logo-text, .site-name) { font-size: 21px !important; }
  /* Do not force display:none on megamenu or display:block on hamburger.
     T4 Navigation Settings are responsible for that decision. */
}
@media (prefers-reduced-motion: reduce) {
  body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu) a { transition: none !important; }
}

/* ================================================================
   v2 · T4 top logo bar fix · October 2026
   Screenshots: the upper brand strip remained light while its text
   was styled white. Covers additional T4 logo-bearing section markup.
   Intentionally scoped ONLY to the #pl-home-2026 test page.
   ================================================================ */

/* Include T4 Topbar configurations not covered by v1. The :has() selector
   also covers differently-named header sections containing the logo. */
body:has(#pl-home-2026) :is(
  #t4-topbar,
  #t4-topbar-wrap,
  .t4-topbar,
  .t4-topbar-wrap,
  .t4-section:has(.navbar-brand),
  .t4-section:has(.logo-text),
  .t4-section:has(.site-name)
) {
  background: #35384d !important;
  color: #fff !important;
  --mainnav-text-color: #fff;
}

/* A child row/container can supply its own pale background. Normalize only
   in a logo-bearing T4 section; menu drop-downs remain WHITE as before. */
body:has(#pl-home-2026) :is(
  #t4-topbar,
  .t4-topbar,
  .t4-section:has(.navbar-brand),
  .t4-section:has(.logo-text),
  .t4-section:has(.site-name)
) > :is(.container, .container-fluid, .t4-container, .t4-section-inner),
body:has(#pl-home-2026) :is(
  #t4-topbar,
  .t4-topbar,
  .t4-section:has(.navbar-brand),
  .t4-section:has(.logo-text),
  .t4-section:has(.site-name)
) > :is(.container, .container-fluid, .t4-section-inner) > :is(.row, .t4-row) {
  background-color: transparent !important;
}

/* Bring back the brand contrast and proper logo prominence. */
body:has(#pl-home-2026) :is(
  #t4-topbar,
  #t4-header,
  .t4-topbar,
  .t4-header,
  .t4-section:has(.navbar-brand),
  .t4-section:has(.logo-text),
  .t4-section:has(.site-name)
) :is(.navbar-brand, .logo-text, .site-name, a.logo, .logo a) {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: clamp(20px, 1.75vw, 27px) !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

body:has(#pl-home-2026) :is(
  #t4-topbar,
  .t4-topbar,
  .t4-section:has(.navbar-brand),
  .t4-section:has(.logo-text),
  .t4-section:has(.site-name)
) :is(.container, .container-fluid, .t4-container) {
  min-height: 52px;
}

/* Make the standalone mainnav feel visually connected to the top row.
   This does NOT rearrange the menu in the DOM. */
body:has(#pl-home-2026) :is(#t4-mainnav, .t4-mainnav, #t4-header, .t4-header, #t4-topbar, .t4-topbar) {
  border-color: rgba(255, 255, 255, .13) !important;
}

@media (min-width: 1200px) {
  body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu) .navbar-nav > .nav-item > :is(a, .nav-link) {
    font-size: 13px !important;
    padding-inline: clamp(7px, .68vw, 13px) !important;
  }
}



/* ================================================================
   v3 · T4 / BS5 multi-level Fachgebiete dropdown refinement
   Visual-only. No replacement menu HTML, no JS handler, no display toggle.
   Scope: Joomla 2026 test homepage only.
   ================================================================ */

/* Keep the flyout above the histology hero but below full-screen overlays. */
body:has(#pl-home-2026) :is(#t4-header, #t4-mainnav, .t4-header, .t4-mainnav) {
  position: relative;
  z-index: 100;
}

/* The menu in the screenshot is narrower than the labels it contains. */
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
.dropdown-menu:not(.mega-dropdown-menu) {
  min-width: 245px;
  padding: 8px !important;
  background: #fff !important;
  border: 1px solid #ebe4f0 !important;
  border-radius: 11px !important;
  box-shadow: 0 16px 36px rgba(27, 27, 54, .17) !important;
  overflow: visible !important; /* do not clip later lazy-loaded nested flyouts */
}

/* Only links INSIDE dropdowns: neutral high-contrast text and larger hit targets.
   The extra specificity intentionally defeats the user's broad .nav-item a rules. */
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
:is(.dropdown-menu, .mega-dropdown-menu) :is(.nav-item > a, a.dropdown-item, .nav-link) {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 39px;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent;
  color: #30374f !important;
  font-size: 13.5px !important;
  font-weight: 520 !important;
  line-height: 1.35 !important;
  white-space: normal;
  text-decoration: none !important;
  transition: background-color .14s ease, color .14s ease;
}

/* User's global rule fixes .nav-item to 45px, even in deeper menu levels. */
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
:is(.dropdown-menu, .mega-dropdown-menu) .nav-item {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 1px 0;
  background: transparent !important;
}

/* Friendly highlight, instead of the global navy-on-hover block.
   :focus-within also gives keyboard users the same visual cue. */
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
:is(.dropdown-menu, .mega-dropdown-menu) .nav-item:is(:hover, :focus-within),
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
:is(.dropdown-menu, .mega-dropdown-menu) :is(a.dropdown-item, .nav-link):is(:hover, :focus-visible) {
  background: #f4edf8 !important;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
:is(.dropdown-menu, .mega-dropdown-menu) .nav-item:is(:hover, :focus-within) > a,
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
:is(.dropdown-menu, .mega-dropdown-menu) a:is(:hover, :focus-visible) {
  background: #f4edf8 !important;
  color: #6e2e82 !important;
}
body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
:is(.dropdown-menu, .mega-dropdown-menu) :is(.active, .current) > a {
  background: #eee1f3 !important;
  color: #602871 !important;
  font-weight: 650 !important;
}

/* Standard BS5/T4 horizontal flyouts: bridge the tiny mouse-gap and mark depth.
   Do not set display, top, transform or position; T4 and lazy_menu own these. */
@media (min-width: 992px) {
  body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
  .dropend > .dropdown-menu {
    margin-left: -2px !important;
    border-left: 2px solid #d7a8e0 !important;
    min-width: 235px;
  }
}

body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
.dropdown-menu .dropdown-toggle::after {
  color: #9a73a7;
  opacity: .85;
}

/* The mobile/offcanvas menu should retain its native width and layout. */
@media (max-width: 991.98px) {
  body:has(#pl-home-2026) :is(.t4-offcanvas, #t4-offcanvas, .offcanvas)
  .dropdown-menu {
    min-width: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#pl-home-2026) :is(.t4-navbar, #t4-megamenu, .t4-mainnav)
  :is(.dropdown-menu, .mega-dropdown-menu) a { transition: none !important; }
}