/* ===========================================================
   File: header-lang.css
   Project: Bering.si
   Purpose: Polylang language switcher in header (REC1 + REC2)
   Author: Aco Vidovič
   =========================================================== */

/* ===============================
   BASE: TARGET ONLY HEADER SWITCHER
   =============================== */

/* Reset lists for this menu only */
.pll-dropdown.lang-menu,
.pll-dropdown.lang-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Parent LI (wraps REC1 + REC2) */
.pll-dropdown.lang-menu > li.pll-parent-menu-item {
  position: relative;
  display: inline-block;
}

/* =====================================
   TOP VISIBLE LANGUAGE - WRAPPER WITH NICKNAME REC1 (FROM RECTANGLE 1)
   ===================================== */

/* The visible box around the current language (REC1) */
.pll-dropdown.lang-menu .pll-rec1 {
  width: 140px; /* match REC2 width */
  margin-left: -5px; /* match REC2 left offset */
  box-sizing: border-box;
  background: #fff;
  box-shadow: none; /* no border at rest */
}

/* REC1 link (normal + hover + focus) – no visual change */
.pll-dropdown.lang-menu .pll-rec1 > a.pll-menu-item,
.pll-dropdown.lang-menu .pll-rec1 > a.pll-menu-item:hover,
.pll-dropdown.lang-menu .pll-rec1 > a.pll-menu-item:focus {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important; /* flag ↔ label */

  width: 100% !important;
  padding: 8px 0 8px 10px !important; /* keep your tuned padding */
  box-sizing: border-box !important;

  color: #54595f !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  text-decoration: none !important;

  border: none !important;
  background: transparent !important;
  transform: none !important;
}

/* Grey background when hovering the top language (REC1) */
.pll-dropdown.lang-menu .pll-rec1:hover {
  background: var(--e-global-color-light-grey, #F5F5F5);
}

/* No transitions on REC1 to avoid tiny "jump" feels */
.pll-dropdown.lang-menu .pll-rec1,
.pll-dropdown.lang-menu .pll-rec1 > a.pll-menu-item {
  transition: none !important;
}

/* Keep flag + text on same row */
.pll-dropdown.lang-menu img {
  display: inline-block;
  vertical-align: middle;
}

/* When parent LI is hovered (mouse on REC1 or REC2),
   draw the border on the REC1 wrapper, without changing its size */
.pll-dropdown.lang-menu > li.pll-parent-menu-item:hover > .pll-rec1 {
  box-shadow: 0 0 0 1px #d0d0d0; /* REC1 border on hover */
  width: 140px !important;
  margin-left: -5px !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* =====================================
   DROPDOWN BOX CONTAINER - NICKNAME REC2 (FROM RECTANGLE 2)
   ===================================== */

.pll-dropdown.lang-menu > li.pll-parent-menu-item > ul.sub-menu {
  position: absolute;
  top: 100%;
  left: -5px; /* tuned horizontal alignment with REC1 */
  margin: 0 0 0 0; /* tiny vertical gap under REC1 */
  padding: 0;

  list-style: none;
  background: #fff;
  border: none;
  box-shadow: none;

  width: 140px; /* tuned to visually match REC1 width */
  box-sizing: border-box;

  z-index: 9999;
  display: none; /* hidden by default */
}

/* Show REC2 and draw same border when hovering parent */
.pll-dropdown.lang-menu > li.pll-parent-menu-item:hover > ul.sub-menu {
  display: block;
  box-shadow: 0 0 0 1px #d0d0d0; /* REC2 border on hover */
}

/* =====================================
   REC2 – ITEMS & GREY HOVER
   ===================================== */

.pll-dropdown.lang-menu > li.pll-parent-menu-item > ul.sub-menu > li {
  margin: 0;
}

/* Links inside REC2 – base (normal + focus) */
.pll-dropdown.lang-menu > li.pll-parent-menu-item > ul.sub-menu > li > a.pll-sub-menu-item,
.pll-dropdown.lang-menu > li.pll-parent-menu-item > ul.sub-menu > li > a.pll-sub-menu-item:focus {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important; /* same as REC1 flag ↔ label */

  width: 100% !important;
  padding: 8px 0 8px 10px !important; /* same as REC1: 8 top/bot, 10px left, 0 right */
  box-sizing: border-box !important;

  color: #54595f !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  text-decoration: none !important;

  background: transparent !important; /* clean base state */
  transform: none !important;
}

/* Links inside REC2 – grey hover, full width of rectangle */
.pll-dropdown.lang-menu > li.pll-parent-menu-item > ul.sub-menu > li > a.pll-sub-menu-item:hover {
  background: var(--e-global-color-light-grey, #F5F5F5) !important;
  color: #54595f !important;
  transform: none !important;
}

/* GLOBAL FREEZE: prevent any hover-based layout shifts in the lang menu */
.pll-dropdown.lang-menu a,
.pll-dropdown.lang-menu a:hover,
.pll-dropdown.lang-menu a:focus,
.pll-dropdown.lang-menu a:active {
  padding: 8px 0 8px 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #54595f !important;

  border: none !important;
  background: transparent !important;
  transform: none !important;
}

/* Disable all transitions inside the lang menu (no animated “wiggle”) */
.pll-dropdown.lang-menu,
.pll-dropdown.lang-menu * {
  transition: none !important;
}

/* ===============================
   Z-INDEX / STACKING
   =============================== */

/* Allow dropdown to overlap rows */
#header-row-1 {
  overflow: visible;
  isolation: isolate;
  position: relative;
  z-index: 100;
}

#header-row-2 {
  position: relative;
  z-index: 10;
}

/* Language switcher widget above neighbors */
#header-row-1 .elementor-element-ce502cb {
  position: relative;
  z-index: 130;
}

/* Ensure header does not clip the dropdown */
.elementor-location-header {
  overflow: visible;
  position: relative;
}

/* Tiny gap to the right of the switcher before social icons */
#header-row-1 .elementor-element-ce502cb .elementor-shortcode {
  display: inline-flex;
  margin-right: 6px;
}

/* ===============================
   MOBILE LAYOUT
   =============================== */

@media (max-width: 767px) {
  /* Keep utilities in one row */
  #header-row-1 .header-utilities {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  #header-utilities,
  #header-utilities > .e-con-inner {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Flags only on mobile (hide label) */
  #header-row-1 .header-utilities .pll-dropdown .pll-label {
    display: none;
  }

  #header-row-1 .header-utilities .pll-dropdown .pll-menu-item,
  #header-row-1 .header-utilities .pll-dropdown .pll-sub-menu-item {
    padding: 6px 10px;
    gap: 4px;
  }

  /* Social icons compact */
  #header-row-1 .header-utilities .elementor-widget-social-icons .elementor-icon {
    font-size: 16px;
    width: 28px;
    height: 28px;
    line-height: 28px;
  }

  #header-row-1 .header-utilities .elementor-widget-social-icons .elementor-grid {
    grid-column-gap: 6px !important;
  }

  /* Compact Contact button */
  #header-row-1 .header-utilities .elementor-widget-button .elementor-button {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
  }
}

/* =======================================
   ROUNDED CORNERS
   ======================================= */

/* REC1 (top part) – round top corners only */
.pll-rec1,
.pll-rec1 a.pll-menu-item {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;

}

/* REC2 (dropdown) – round bottom corners only */
.pll-parent-menu-item .sub-menu,
.pll-parent-menu-item .sub-menu a.pll-sub-menu-item {
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  overflow: hidden; /* ensures inner items follow the radius */
}

/* Make sure the dropdown background does not overflow into corners */
.pll-parent-menu-item .sub-menu {
  background-clip: padding-box !important;
}

/* =======================================================
   REC1 — Down arrow positioned close to the language label
   ======================================================= */

.pll-dropdown.lang-menu .pll-rec1 > a.pll-menu-item::after {
  content: "▼";
  font-size: 10px;
  color: #54595f;
  margin-left: 2px !important;    /* <-- place arrow close to text */
  margin-right: 0 !important;      /* no right-space needed anymore */
  display: inline-block;
  line-height: 1;
  transform: translateY(1px);     /* tiny vertical alignment tweak */
}

/* Keep arrow color stable on hover */
.pll-dropdown.lang-menu .pll-rec1:hover > a.pll-menu-item::after {
  color: #54595f !important;
}
/* End down arrow to active language */
/* ================================= */