/* ---------START Header---------  */

/* Start Desktop */
  header.scrolled {
    position: fixed;
    top:0;
    z-index: 1000;
    width: 100%;
  }

  /* logo */
  header .region-nav-branding .site-logo img{
      height: 40px;
      transition: height 0.4s ease 0s;
  }

  header.scrolledEx .region-nav-branding .site-logo img{
    height: 30px;
  }

  header .header-color {
    background: #141414;
  }

  header .contain-top-menu {
    padding: 7px 0;
    transition: padding 0.4s ease 0s;
  }

  header.scrolledEx .contain-top-menu {
    padding: 4px 0;
  }

  header .cart-block--summary__count {
     display: none;
  }

  /*** first header ***/
  .region-header .footer-one-wrapper{
     padding: 0;
  }

  .region-header .first-menu-container{
      width: auto;
  }

  .region-header a {
     transition: color 0.4s ease 0s, opacity 0.4s ease 0s;
  }

   header .header-first-wrapper {
     font-family: "Saira", sans-serif;
     font-size: 16px;
     font-weight: 500;
     line-height: 16px;
     text-align: center;
     align-items: center;
   }

    header .region-header .first-menu-container {
      transition: padding 0.4s ease 0s;
    }

    header.scrolledEx .region-header .first-menu-container {
      padding-right: 0!important;
      padding-left: 0!important;
    }


    /* cart */
    header .cart--cart-block {
      margin-left: 12px;
      transition: margin 0.4s ease 0s;
    }

    header.scrolledEx .cart--cart-block {
      margin-left: 6px;
    }

    /* top menu */
     header .nav-link {
       font-size: 15px;
       line-height: 15px;
       letter-spacing: 0.5px;
       transition: font-size 0.4s ease 0s,line-height 0.4s ease 0s ;
     }

      header.scrolledEx .nav-link {
        font-size: 14px;
        line-height: 14px;
      }

   .first-menu-container .nav-item{
      margin: 0 !important;
   }


   /**** link ****/

   header .region-header a:hover{
     color: #999;
   }


  header .region-header a:hover img{
    opacity: .8;
  }


   .region-header .header-first-wrapper a {
      padding: 0;
   }
   .region-header .header-first-wrapper a:focus{
      color: #999;
   }
   .region-header .header-first-wrapper a.is-active{
      text-decoration: none;
   }

   /* Icon link */
   .region-header .first-menu-container .nav-item>a:focus{
      color: #999;
   }

   /*** second header ***/
   header .header-wrapper {
      border-top: 1px solid #fff;
   }

   header .menu-main-wrapper .nav-item:first-child{ /* hide "home" menu" */
      display: none;
   }

   header .menu-main-wrapper .nav-item:nth-child(5),
   header .menu-main-wrapper .nav-item:nth-child(6),
   header .menu-main-wrapper .nav-item:nth-child(7) {
      display: none;
   }
   header .menu-main-wrapper {
     font-family: "Saira", sans-serif;
      font-size: 20px;
      font-weight: 500;
      line-height: 20px;
      text-align: center;
      color: #fff;
      display: flex;
      align-items: flex-start;
   }
   header .menu-main-wrapper li {
      padding: 0;
   }

   /* link */
   .menu--main .menu-main-wrapper li a{
      padding: 0 !important;
      font-size: 20px;
      line-height: 20px;
     letter-spacing: 1px;
     padding: 20px 15px!important;
     transition: all 0.4s ease 0s;
     display: block;
   }

   header.scrolledEx .menu--main .menu-main-wrapper li a {
     padding: 15px 10px!important;
     font-size: 18px;
     line-height: 18px;
   }


  .menu--main .menu-main-wrapper li:hover a{
      background-color: #323232;
   }

   header .navbar-dark, header .navbar[data-bs-theme=dark] {
      --bs-navbar-color: #fff;
      padding: 0;
   }

  header .nav-link:hover, header .nav-link:focus  {
    color: #fff;
  }

   /* login overlay */
   header .nav-item.dropdown:hover .dropdown-menu {
      display: block;
      text-align: center;
      position: absolute;
      left: -60px;
      padding: 0;
   }

    header .nav-item.dropdown .dropdown-menu {
      border-radius: 0;
    }

  header .nav-item.dropdown .dropdown-menu a:hover {
    color: #000;
    background-color: #ddd;
  }


   header .dropdown-toggle::after {
      display: none;
   }

   .top-menu {
     display: flex;
   }

/* END Desktop */

/***********************
laptop
***********************/
@media (max-width: 1400px) {
  /*h1 {*/
  /*  color: purple;*/
  /*}*/

  header .region-nav-branding .site-logo img {
    height: 40px;
  }

  .menu--main .menu-main-wrapper li a {
    font-size: 20px;
    line-height: 20px;
    padding: 25px 20px !important;
  }

  header .nav-link {
    font-size: 15px;
    line-height: 15px;
  }

}

/*****************
Tablettte
 */
@media (max-width: 1200px) {
  /*h1 {*/
  /*  color: red;*/
  /*}*/

  header .region-nav-branding .site-logo img {
    height: 40px;
  }

  .menu--main .menu-main-wrapper li a {
    font-size: 20px;
    line-height: 20px;
    padding: 25px 20px !important;
  }

  header .nav-link {
    font-size: 15px;
    line-height: 15px;
  }
}

/* Responsive */
@media (max-width: 991px) {

  /*h1 {*/
  /*  color: green;*/
  /*}*/

  header .menu-main-wrapper {
    text-align: left;
  }

  .menu--main .menu-main-wrapper li {
    display: block;
    width: 100%;
  }

  .menu--main .menu-main-wrapper li a {
    padding: 15px !important;
  }


  /* logo */
   .region-nav-branding .site-logo{
      background-image: url("../images/mobile_logo_skycad.svg");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
   }

   .region-nav-branding .site-logo img{
      display: none;
   }

   header .menu-main-wrapper{
      padding-top: 15px;
      padding-bottom: 15px;
   }

   header .menu-main-wrapper li{
      padding: 0;
   }
   header .menu-main-wrapper .nav-item:nth-child(5),
   header .menu-main-wrapper .nav-item:nth-child(6),
   header .menu-main-wrapper .nav-item:nth-child(7) {
         display: block; /* or inline-block, depending on your layout */
   }
   .menu--footer-one {
      display: none;
   }

   /* burger menu */
   .navbar-toggler{
      border: none;
      padding: 0;
      margin-right: -4px;
   }

   .navbar-toggler:focus{
      box-shadow: none;
   }

   .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
      background-image: url('../images/close_burrger_menu.svg');
      width: 34px;
      height: 34px;
   }

   .navbar-toggler.collapsed .navbar-toggler-icon{
      background-image: url('../images/burger_menu.svg');
      width: 34px;
      height: 34px;
   }
}

/* --- SkyCAD Language Switcher: Locked Position Dropdown --- */

/* 1. THE FIXED ANCHOR - This prevents the Cart/Icons from moving */
#block-skycad-languageswitcher {
  position: relative;
  display: inline-block;
  width: 140px; /* FIXED WIDTH: Increase this if French is longer */
  height: 38px; /* Matches the height of your menu row */
  margin-left: 10px;
  vertical-align: middle;
}

/* 2. THE LIST CONTAINER */
#block-skycad-languageswitcher ul {
  position: absolute; /* FLOATS: Prevents pushing other elements */
  top: 0;
  right: 0;
  width: 100%; /* Matches the 140px above */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5); /* Border for the "button" state */
  transition: all 0.2s ease;
  z-index: 9999;
}

/* 3. LINKS STYLING */
#block-skycad-languageswitcher ul li a {
  display: flex !important;
  align-items: center;
  padding: 6px 10px !important;
  color: white !important; /* Default white text for teal bg */
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

/* 4. HIDE NON-ACTIVE LANGUAGES WHEN NOT HOVERED */
/* We use :has() to look for the exact hreflang, which is 100% reliable even if Drupal removes the classes */
html[lang^="en"] #block-skycad-languageswitcher ul:not(:hover) li:not(:has(a[hreflang="en"])):not(.is-active),
html[lang^="es"] #block-skycad-languageswitcher ul:not(:hover) li:not(:has(a[hreflang="es"])):not(.is-active),
html[lang^="fr"] #block-skycad-languageswitcher ul:not(:hover) li:not(:has(a[hreflang="fr"])):not(.is-active) {
  display: none !important;
}

/* 5. OPEN DROPDOWN STATE (On Hover) */
#block-skycad-languageswitcher:hover ul {
  background-color: #ffffff !important; /* Switches to white background */
  border: 1px solid #ccc !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Change text to dark when dropdown is open */
#block-skycad-languageswitcher:hover ul li a {
  color: #333 !important;
  border-bottom: 1px solid #eee;
}

#block-skycad-languageswitcher:hover ul li:last-child a {
  border-bottom: none;
}

#block-skycad-languageswitcher:hover ul li a:hover {
  background-color: #f5f5f5;
}

/* 6. ARROW LOGIC */
/* Show arrow only on the active language (the button) */
#block-skycad-languageswitcher ul li.is-active a::after,
html[lang^="en"] #block-skycad-languageswitcher ul li:has(a[hreflang="en"]) a::after,
html[lang^="es"] #block-skycad-languageswitcher ul li:has(a[hreflang="es"]) a::after,
html[lang^="fr"] #block-skycad-languageswitcher ul li:has(a[hreflang="fr"]) a::after {
  content: ' ▼';
  font-size: 9px;
  margin-left: auto;
  opacity: 0.7;
}

/* Flip arrow when open */
#block-skycad-languageswitcher:hover ul li.is-active a::after,
html[lang^="en"] #block-skycad-languageswitcher:hover ul li:has(a[hreflang="en"]) a::after,
html[lang^="es"] #block-skycad-languageswitcher:hover ul li:has(a[hreflang="es"]) a::after,
html[lang^="fr"] #block-skycad-languageswitcher:hover ul li:has(a[hreflang="fr"]) a::after {
  content: ' ▲';
  color: #999;
}

/* 7. FLAGS */
#block-skycad-languageswitcher a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

#block-skycad-languageswitcher a[hreflang="en"]::before { background-image: url('https://flagcdn.com/w20/gb.png'); }
#block-skycad-languageswitcher a[hreflang="es"]::before { background-image: url('https://flagcdn.com/w20/es.png'); }
#block-skycad-languageswitcher a[hreflang="fr"]::before { background-image: url('https://flagcdn.com/w20/fr.png'); }