/**
 * ============================================================================
 * SENSOLYTICS JOOMLA (ASTROID) - HEADER CUSTOM CSS
 * ============================================================================
 * Purpose: Header, navigation, breadcrumbs, and language switcher styling.
 * Notes:
 * - Many declarations use !important to override Astroid template defaults.
 * - Variables below are the only tokens referenced in this file.
 *
 * STRUCTURE:
 * 1) Root variables
 * 2) Global helpers
 * 3) Header and navigation
 *    3.1 Hero background
 *    3.2 Logo placement
 *    3.3 Sticky header link effects
 *    3.4 Hero tip/line/label layout
 *    3.5 Hero reveal animations
 *    3.6 Main menu + megamenu
 *    3.7 Mobile hamburger
 * 4) Breadcrumbs
 * 5) Language switcher
 */

/* ============================================================================
  1) ROOT VARIABLES
  Centralized tokens used in this file only.
  ============================================================================ */

:root {

  /* Brand  */
  --color-text: #333; /*normal parraph text*/
  --color-brand-blue: rgb(45, 132, 205);
  --color-brand-blue-light: rgba(45, 132, 205, .03) /*light blue for bkg cards*/
  --color-brand-gray: #626262;
  --color-brand-green: #74B43C;

  /* Megamenu */
  --sx-menu-bg: #ffffff;
  --sx-menu-active-bg: rgba(150, 200, 90, 0.15);
  --sx-menu-hover-bg: rgba(98, 98, 98, 0.1);
  --sx-radius: 5px;

  /* Hero line/label layout */
  --sx-x: 80px;
  --sx-y-line: 80px;
  --sx-y-label: 95px;
  --sx-line-h: 150px;
  --sx-line-w-max: 1300px;
  --sx-label-gap: 18px;
  --sx-label-w-max: 620px;
  --sx-safe: 240px;
}

/* ============================================================================
  2) GLOBAL HELPERS
  ============================================================================ */

html { 
  scroll-behavior: smooth; 
}

#FAQ-support {
  scroll-margin-top: 120px;
}

/* JanoLaw paragraph styling (legacy content block) */
div.janolaw-paragraph {
  font-size: 24px;
  font-weight: 300;
  text-transform: none;
  line-height: 1.6em;
  font-family: Verdana, Geneva, sans-serif, Arial, Helvetica, sans-serif;
}

/* Cap layout width on very large screens */
@media (min-width: 1400px) {
  #astroid-wrapper,
  .astroid-wrapper,
  #astroid-page,
  .astroid-page {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
  }

  /* Optional: prevent horizontal overflow from rare elements */
  body { 
    overflow-x: hidden; 
  }
}

/* ============================================================================
  3) HEADER AND NAVIGATION
  ============================================================================ */

/* ---- 3.1: HERO BACKGROUND ---- */

.border-bottom {
  height: 400px !important;
  position: relative;
  overflow: visible !important;
  z-index: 1;
  border-bottom-color: transparent !important;
}

.border-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/header/hero.png") left center / cover no-repeat;
  z-index: 1;
  top: 0px;
}

/* ---- 3.2: LOGO PLACEMENT ---- */

.sens-logo {
  position: absolute !important;
  top: 325px !important;
  left: 10px !important;
  display: block !important;
  width: auto !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sens-logo img,
.ast-logo img {
  height: 50px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 991px) {
  .sens-logo {
    top: 335px !important;
    left: 15px !important;
  }
  .sens-logo img {
    height: 35px !important;
  }
}


/* ---- 3.3: STICKY HEADER LINK EFFECTS ---- */
/* Sticky header bottom separator */
#astroid-sticky-header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;                 /* thin, instrument-grade */
  background-color: var(--color-brand-gray);
  z-index: 1020;
}

/* Menu item base */
#astroid-sticky-header .nav-link{
  position: relative;
  font-weight: 400;
}

/* Underline (animated) */
#astroid-sticky-header .nav-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;          /* adjust so it sits above the green bar */
  width: 0;
  height: 2px;
  background-color: var(--color-brand-green);
  transition: width .25s ease, left .25s ease;
}

/* Hover state */
#astroid-sticky-header .nav-link:hover{
  font-weight: 600;
}

#astroid-sticky-header .nav-link:hover::after{
  width: 100%;
  left: 0;
}

/* Active menu item */
#astroid-sticky-header 
.nav-item-level-1.nav-item-active > .nav-link{
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- 3.4: HERO TIP / LINE / LABEL LAYOUT ---- */

/* Tip image position (Astroid module) */
.sx-hero-tip{
  position: absolute;
  z-index: 99;
  left: 60px;
  top:   -120px;
  width: 40px;
  height: 100%;
}

.sx-hero-tip img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Module wrapper must not affect layout flow */
.border-bottom .astroid-module-position.sx-hero-label{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  overflow: visible !important;
  background: transparent !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 90 !important; /* below your actual label element */
  pointer-events: none;
}

/* Line layer */

/* Line drawn with CSS only */
.sx-hero-line{
  position: absolute;
  left: var(--sx-x);    /* anchor = tip reference */
  top: var(--sx-y-line);
  width: min(var(--sx-line-w-max), calc(100vw - var(--sx-safe))); /* available horizontal run */
  height: 250px; /* overall line “canvas” */
  z-index: 200;
  pointer-events: none;
  --sx-stroke: 2px;
  --sx-color: rgba(255,255,255,.90);
}

/* Tilted segment (static) */
.sx-hero-line::before{
  content:"";
  position: absolute;
  left: 80px;
  top: 230px;
  width: 175px;
  height: var(--sx-stroke);
  background: var(--sx-color);
  transform-origin: left center;
  transform: rotate(-60deg);
}

/* Horizontal segment (responsive) */
.sx-hero-line::after{
  content:"";
  position: absolute;
  /* start where the diagonal ends */
  left: 165px;
  top: 80px;
  height: var(--sx-stroke);
  right: 600px; /*shorts the h-line from the right*/
  background: var(--sx-color);
}

/* Label box (PNG image) */
.sx-hero-label{
  position: absolute;
  /* Anchor to line end: left + line width - label width + gap */
  left: calc(
    var(--sx-x)
    + min(var(--sx-line-w-max), calc(100vw - var(--sx-safe)))
    - min(var(--sx-label-w-max), calc(100vw - 420px))
    + var(--sx-label-gap)
  );
  top: var(--sx-y-label);
  width: min(var(--sx-label-w-max), calc(100vw - 420px));
  height: var(--sx-line-h);
  z-index: 150 !important;
  pointer-events: none;
}

.sx-hero-label img{
  width: 100% !important;
  height: var(--sx-line-h) !important;
  display: block !important;
  /* keep proportions of the label (no squashing) */
  object-fit: contain;
  object-position: right center;
}

@media (max-width: 1046px){
  .sx-hero-line, .sx-hero-label{ display: none !important; }
}

/* ---- 3.5: HERO REVEAL ANIMATIONS ---- */

/* Home only (EN/DE): prepare reveal */

/* Home only: prepare reveal on inner elements */
body.itemid-198 .astroid-module-position.sx-hero-line-home > .mod-custom > .sx-hero-line,
body.itemid-205 .astroid-module-position.sx-hero-line-home > .mod-custom > .sx-hero-line,
body.itemid-198 .astroid-module-position.sx-hero-label > .mod-custom > .sx-hero-label,
body.itemid-205 .astroid-module-position.sx-hero-label > .mod-custom > .sx-hero-label{
  opacity: 0;

  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 65%);
  mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 65%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Line first, then label */
body.itemid-198 .astroid-module-position.sx-hero-line-home > .mod-custom > .sx-hero-line,
body.itemid-205 .astroid-module-position.sx-hero-line-home > .mod-custom > .sx-hero-line,
body.itemid-198 .astroid-module-position.sx-hero-line-home > .mod-custom > .sx-hero-line,
body.itemid-205 .astroid-module-position.sx-hero-line-home > .mod-custom > .sx-hero-line {
  animation: sxRevealLR 3.0s ease-out 2.1s forwards, sxFadeIn .5s linear 2.1s forwards;
}
/* animation name | duration | timing function | delay | forwards */

/* Label later */
body.itemid-198 .astroid-module-position.sx-hero-label > .mod-custom > .sx-hero-label,
body.itemid-205 .astroid-module-position.sx-hero-label > .mod-custom > .sx-hero-label{
  animation: sxRevealLR 2.1s ease-out 2.5s forwards, sxFadeIn .1s linear 2.5s forwards;
}


@keyframes sxRevealLR{
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
@keyframes sxFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Not home: disable animate.css tip animation */
body:not(.itemid-198):not(.itemid-205) .astroid-module-position.sx-hero-tip.animate__animated{
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Not home: ensure tip is visible */
body:not(.itemid-198):not(.itemid-205) .astroid-module-position.sx-hero-tip{
  visibility: visible !important;  /* ensure it doesn't stay hidden */
}


/* ---- 3.6: MAIN MENU ---- */

/* Position menu group */
#astroid-header .astroid-header-menu,
#astroid-header #astroid-menu,
#astroid-header .astroid-nav, /* Added to catch the new HTML structure */
#astroid-header .nav {
  position: relative !important;
  z-index: 2 !important;
  top: 215px !important; /* Increased from 210px to push it down level with the logo */
  left: -50px !important;
}

/* Menu link color for contrast */
#astroid-header .nav-link {
  color: var(--color-text) !important;
}

#astroid-header .nav {
  display: flex !important;
  gap: 10px !important; /* ← THIS controls spacing */
}

/* Base link */
#astroid-header .nav-link {
  position: relative;
  font-weight: 400;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

/* Bottom line underline */
#astroid-header .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background-color: var(--color-brand-green);
  transition: width 0.25s ease, left 0.25s ease;
}

/* Hover */
#astroid-header .nav-link:hover {
  font-weight: 600;
}

#astroid-header .nav-link:hover::after {
  width: 100%;
  left: 0;
}

/* ---- 3.6.1: MEGAMENU (DROPDOWN NAVIGATION) ---- */

/* Megamenu position control - OVERRIDE JAVASCRIPT INLINE STYLE */
.astroid-nav > li.nav-item-dropdown > .megamenu-container {
  top: 100% !important;        /* Forces the box to start exactly at the bottom of the word "Products" */
  margin-top: -5px !important; /* Adds a nice 15px gap so it doesn't touch the text */
}

/* Show megamenu on hover */
.astroid-nav>li.nav-item-dropdown:hover>.megamenu-container,
ul.astroid-nav li.nav-item-dropdown:hover div.megamenu-container {
  display: block !important;
}

/* Megamenu container (card) */
.astroid-nav .megamenu-container {
  padding: 12px !important;
  border-radius: var(--sx-radius);
  border: none !important;
  background: var(--sx-menu-bg) !important;
  width: auto !important;
  max-width: 860px !important;
}

/* Contact menu: size and position */
.astroid-nav > li.nav-item-id-203 > .megamenu-container {
  width: 260px !important;
  max-width: 260px !important;
  left: auto !important;
  right: 0 !important;
  top: calc(100% + 0px) !important;
}

/* CONTACT menu: keep the column itself tight */
.astroid-nav > li.nav-item-id-203 > .megamenu-container > ul.nav-submenu {
  width: 250px !important;      /* match your inline intent */
  min-width: 250px !important;  /* kill template min-width */
}

/* CONTACT menu: shrink any flyout submenu */
.astroid-nav > li.nav-item-id-203 .nav-item-level-2.nav-item-dropdown > ul.nav-submenu,
.astroid-nav > li.nav-item-id-203 ul.nav-submenu ul.nav-submenu {
  width: 250px !important;
  min-width: 265px !important;
}

/* Contact menu: right-align under parent item */
.astroid-nav > li.nav-item-id-203 {
  position: relative !important;
}

/* Force the megamenu card background */
.astroid-nav>li.nav-item-dropdown>.megamenu-container,
.astroid-nav .megamenu-container {
  background: var(--sx-menu-bg) !important;
}

/* Reset nested backgrounds inside megamenu */
.astroid-nav .megamenu-container,
.astroid-nav .megamenu-container ul.nav-submenu,
.astroid-nav .megamenu-container li,
.astroid-nav .megamenu-container .nav-title,
.astroid-nav .megamenu-container .nav-title-text {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

/* Menu link styling */
.astroid-nav .megamenu-container a.as-menu-item {
  display: block;
  padding: 10px 12px !important;
  line-height: 1.2;
  border-radius: var(--sx-radius);
  white-space: normal;
  text-decoration: none;
  color: var(--color-text) !important;
}

/* Menu link hover/focus */
.astroid-nav .megamenu-container a.as-menu-item:hover,
.astroid-nav .megamenu-container a.as-menu-item:focus-visible {
  background: var(--sx-menu-hover-bg) !important;
  color: var(--color-text) !important;
}

/* Level-2 (section headers) */
.astroid-nav .megamenu-container li.nav-item-level-2>a.as-menu-item {
  font-weight: 500 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--sx-radius);
  position: relative;
}

/* Level-2 active/current */
.astroid-nav .megamenu-container li.nav-item-level-2.nav-item-current>a.as-menu-item,
.astroid-nav .megamenu-container li.nav-item-level-2.nav-item-active>a.as-menu-item {
  background: var(--sx-menu-active-bg) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/* Level-2 separators */
.astroid-nav .megamenu-container li.nav-item-level-2 {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-brand-green) !important;
}

.astroid-nav .megamenu-container li.nav-item-level-2:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Level-2 accent underline */
.astroid-nav .megamenu-container li.nav-item-level-2>a.as-menu-item::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 1px;
  background: var(--sx-menu-active-bg);
  opacity: 0.35;
}

/* Level-3 (sub-items) always visible */
.astroid-nav .megamenu-container li.nav-item-level-2.nav-item-dropdown>ul.nav-submenu,
.astroid-nav .megamenu-container ul.nav-submenu ul.nav-submenu {
  position: static !important;
  display: block !important;
  opacity: 1 !important; /* Forces it to be completely visible immediately */
  visibility: visible !important; /* Overrides Astroid's hidden state */
  transform: none !important; /* Kills any delayed slide-in animations */
  height: auto !important; /* Prevents it from collapsing */
  margin: 6px 0 12px 0 !important;
  padding-left: 18px !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border: 0 !important;
}

/* Level-3 link styling */
.astroid-nav .megamenu-container li.nav-item-level-3>a.as-menu-item {
  font-weight: 400;
  font-size: 0.95em;
  padding: 6px 10px !important;
  color: var(--color-text) !important;
  border-radius: var(--sx-radius);
  position: relative;
  padding-left: 26px !important;
}

/* Level-3 left marker */
.astroid-nav .megamenu-container li.nav-item-level-3>a.as-menu-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 1px;
  transform: translateY(-50%);
  opacity: 0.6;
  background: rgba(255, 255, 255, 0.45) !important;
}

/* Level-3 hover */
.astroid-nav .megamenu-container li.nav-item-level-3>a.as-menu-item:hover {
  color: var(--color-text) !important;
  background: var(--sx-menu-hover-bg) !important;
}

/* Level-3 active */
.astroid-nav .megamenu-container li.nav-item-level-3.nav-item-current>a.as-menu-item {
  background: var(--sx-menu-active-bg) !important;
  color: var(--color-text) !important;
  font-weight: 600;
}



.astroid-nav .megamenu-container li.nav-item-level-3.nav-item-current>a.as-menu-item:hover {
  background: var(--sx-menu-active-bg) !important;
}


/* Hide dropdown carets */
.astroid-nav .megamenu-container li.nav-item-dropdown>a.as-menu-item::after,
.astroid-nav .megamenu-container li.nav-item-dropdown>a.as-menu-item .caret,
.astroid-nav .megamenu-container li.nav-item-dropdown>a.as-menu-item .nav-caret,
.astroid-nav .megamenu-container li.nav-item-dropdown>a.as-menu-item i {
  display: none !important;
  content: none !important;
}

/* Visited link color */
.astroid-nav .megamenu-container a.as-menu-item:visited {
  color: var(--color-text) !important;
}


/* ---- 3.7: HAMBURGER MENU CONTROL ---- */

/* Keep header layers sane */
#astroid-header,
.astroid-header-section,
.astroid-header-row {
  position: relative;
  z-index: 1000;
}

/* Burger wrapper position (desktop/tablet/mobile) */
#astroid-header .header-mobilemenu-trigger {
  position: absolute;
  top: 180px;
  right: 10px;
  z-index: 9999;
}

/* Ensure the button is clickable and clean */
#astroid-header .header-mobilemenu-trigger > button.button {
  width: 45px;
  height: 45px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Burger bars (icon) */
#astroid-header .header-mobilemenu-trigger .inner,
#astroid-header .header-mobilemenu-trigger .inner::before,
#astroid-header .header-mobilemenu-trigger .inner::after {
  background-color: var(--color-text) !important;
  opacity: 1 !important;
}

/* Extended mobile/tablet range: <= 1400px */
@media (max-width: 1400px) {
  /* Hide desktop menu */
  #astroid-header .astroid-header-menu,
  #astroid-header #astroid-menu,
  #astroid-header .nav {
    display: none !important;
  }

  /* Show mobile burger (force visibility) */
  #astroid-header div.d-lg-none,
  #astroid-header .header-mobilemenu-trigger {
    display: block !important;
  }
}

/* Tablet range: 1200-1400px (consistent positioning) */
@media (min-width: 1200px) and (max-width: 1400px) {
  #astroid-header .header-mobilemenu-trigger {
    top: 215px !important; /* Force same position for entire tablet range */
    right: 16px !important;
  }
}

/* Desktop: > 1400px */
@media (min-width: 1401px) {
  /* Hide mobile burger */
  #astroid-header .header-mobilemenu-trigger,
  #astroid-header div.d-lg-none {
    display: none !important;
  }
}

/* ============================================================================
  4) BREADCRUMBS
  ============================================================================ */

/* Module-only menu pages: hide default Joomla/Astroid component container */
body.sx-module-only-page .astroid-component,
body.sx-module-only-page .astroid-component > .container,
body.sx-module-only-page .astroid-component > .container-fluid {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Safety: collapse component area when template outputs no content */
.astroid-component:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}


.bread-crumbs {
  font-size: 0.9rem;
  color: var(--color-text);
  --bs-breadcrumb-divider: "⟩";
  z-index: 99 !important;
}

/* Replace "Home" text with icon */
.bread-crumbs nav > ol > li:nth-child(2) > a > span {
  display: none !important;
}

/* Home link with icon container */
.bread-crumbs nav > ol > li:nth-child(2) > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Home icon via ::before */
.bread-crumbs nav > ol > li:nth-child(2) > a::before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: url('/images/favicon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 6px;
}

/* Breadcrumb link styling */
.bread-crumbs a {
  color: var(--color-brand-blue);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease;
}

/* Breadcrumb underline effect */
.bread-crumbs a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: none;
  opacity: 0.35;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.bread-crumbs a:hover::after {
  transform: scaleX(1);
}

.bread-crumbs a:hover {
  text-decoration: none;
}

/* Last item (current page) */
.bread-crumbs li:last-child {
  color: var(--color-brand-gray);
  font-weight: 600;
}

.bread-crumbs li:last-child a {
  color: var(--color-brand-gray);
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

/* ============================================================================
  5) LANGUAGE SWITCHER
  ============================================================================ */

/* Global language switcher font + layout */
.mod-jt-languageswitcher {
  font-family: "Asap Regular", Arial, Helvetica, sans-serif;
  font-size: 15px;
  position: absolute !important;
  top: 9px !important;
  right: 50px !important;
  z-index: 1001 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Reset all nested elements */
.mod-jt-languageswitcher ul,
.mod-jt-languageswitcher li,
.mod-jt-languageswitcher div,
.mod-jt-languageswitcher a {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Active language button */
.mod-jt-languageswitcher button.active-lang {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.mod-jt-languageswitcher button.active-lang span {
  background: transparent !important;
}

/* Language dropdown spacing */
.mod-jt-languageswitcher ul[role="listbox"],
.mod-jt-languageswitcher .lang-block181 {
  margin-top: 10px !important;
}

/* Language text color */
.mod-jt-languageswitcher .langname-code {
  color: var(--color-text) !important;
}

@media (max-width: 1400px) {
  .mod-jt-languageswitcher {
    position: absolute !important;
    top: 9px !important;
    right: 50px !important;
    z-index: 5000 !important;
  }
}