/* header + navbar --------------------------------- */
.header {
  position:fixed;                /* Fixed at the top */
  top:0; left:0; width:100%;     /* Full width, top left */
  z-index:2000;                  /* Stays above other content */
  background:rgba(255,255,255,.95);       /* Almost solid white, slight transparency */
  box-shadow:0 2px 5px rgba(0,0,0,.05);   /* Soft shadow below */
  transition:background .3s, box-shadow .3s; /* Smooth on scroll */
}
.header.scrolled {
  background:#fff;                         /* Solid white when scrolled */
  box-shadow:0 4px 10px rgba(0,0,0,.1);    /* Stronger shadow */
}

.navbar {
  display:flex;                            /* Flex layout for nav items */
  justify-content:space-between;           /* Space between logo and menu */
  align-items:center;                      /* Vertically center */
  height:70px;                             /* Navbar height */
}
.logo {
  font-size:1.8rem;                        /* Large logo text */
  font-weight:700;                         /* Bold */
  color:var(--primary-color);              /* Brand color */
  display:flex; align-items:center;        /* Logo image + text aligned */
}
.logo img {
  height:40px; margin-right:10px;          /* Logo image size and spacing */
}
.logo .logo-en {
  font-size:.9rem; font-weight:400;        /* Smaller, lighter text */
  color:var(--text-color); margin-left:8px; opacity:.8; /* Faded, spaced EN text */
}

.nav-menu {
  display:flex; gap:20px;                  /* Horizontal spacing between nav items */
}

/* Tighter spacing for languages with longer navigation text */
@media (max-width: 1200px) {
  .nav-menu {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .nav-menu {
    gap: 12px;
  }
  .nav-link {
    font-size: 0.95rem;
  }
}
.nav-link {
  font-size:1rem; font-weight:500;         /* Nav text style */
  color:var(--dark-color);                 /* Dark nav text */
  padding-bottom:5px; position:relative;   /* Room for underline effect */
}
.nav-link::after {
  content:''; position:absolute;           /* Underline effect (hidden by default) */
  bottom:0; left:0; width:0; height:2px;
  background:var(--accent-color); transition:width .3s;
}
.nav-link:hover::after, .nav-link.active::after {width:100%;} /* Underline grows on hover/active */
.nav-link:hover, .nav-link.active {color:var(--primary-color);} /* Highlight text on hover/active */

/* hamburger --------------------------------------- */
.hamburger {
  display:none; cursor:pointer;
  z-index: 2000 !important;
} /* Hidden by default, pointer on hover */
.bar {
  display:block; width:25px; height:3px;  /* Hamburger bar size */
  margin:5px auto;                        /* Vertical spacing */
  background:var(--dark-color);           /* Bar color */
  transition:all .3s;                     /* Smooth transforms */
}
/* hamburger animate */
.hamburger.active .bar:nth-child(2) {opacity:0;} /* Middle bar fades out */
.hamburger.active .bar:nth-child(1) {transform:translateY(8px) rotate(45deg);} /* Top bar rotates */
.hamburger.active .bar:nth-child(3) {transform:translateY(-8px) rotate(-45deg);} /* Bottom bar rotates */

/* lang-switch & dropdown --------------------------- */
.nav-menu .lang-switch {
  display:flex; gap:100px; flex:1;        /* Languages spaced out, fill space */
  align-items:center; margin-left:auto;   /* Centered vertically, right align */
}
#lang-select {
  background:none; border:none; font:inherit;     /* No browser styling */
  color:var(--dark-color); cursor:pointer;
  padding:.3em .5em; position:relative; top:-4px; /* Slight vertical adjustment */
}
.nav-item.dropdown {position:relative;}           /* For absolute submenu */
.submenu {
  position:absolute; top:100%; left:0;            /* Dropdown appears below */
  min-width:200px;
  background:var(--white-color);                  /* White dropdown */
  box-shadow:0 4px 10px rgba(0,0,0,.1);           /* Subtle shadow */
  list-style:none; margin:0; padding:.5rem 0;
  display:none; z-index:1000;                     /* Hidden by default, on top */
}
.submenu li a {
  display:block; padding:.6rem 1rem; color:var(--dark-color); /* Block links, spacing */
}
.submenu li a:hover {background:var(--light-color);}          /* Highlight on hover */
.nav-item.dropdown:hover .submenu {display:block;}            /* Show submenu on hover */

/* Hide the mobile language switcher on desktop */
.mobile-lang-switcher {
  display: none;
}

/* By default, the secondary menu used for mobile drill-down is hidden */
.secondary-menu {
  display: none;
}

/* Hide mobile overlay menus by default */
.mobile-secondary-menu, .mobile-lang-menu {display:none;}

@media (max-width: 768px) {
  .hamburger {
    display: block !important;
  }
}

@media (max-width: 991px) {
  .submenu {
    position: static;
    box-shadow: none;
    padding-left: 1rem;
    display: none;
    height: auto !important;
    opacity: 1 !important;
    background: var(--white-color);
    border: none;
    width: 100% !important;
  }
  .nav-item.dropdown.open .submenu {
    display: block;
  }
}

/* Language switching dropdown fix to prevent flash */
.lang-switch .nav-link[data-i18n="lang_label"] {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lang-switch .nav-link[data-i18n="lang_label"].translated {
  opacity: 1;
}

/* Fallback: show after a short delay if translation hasn't loaded */
.lang-switch .nav-link[data-i18n="lang_label"] {
  animation: fadeInLang 0.3s ease 0.5s forwards;
}

@keyframes fadeInLang {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === Custom container inside standalone pages (news, sustainability) === */
.nav-container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap; /* allow wrap on smaller widths to avoid overflow */
}

.nav-logo a{
  font-size:1.8rem;
  font-weight:700;
  color:var(--primary-color);
  display:inline-block;
  white-space:nowrap;
}

/* Ensure nav-menu does not push logo off-screen on narrow widths */
.nav-menu{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  align-items:center;
}

.nav-container .nav-menu{
  margin-left:auto;
}

/* ---- LANGUAGE LABEL FLASH FIX ---- */
.lang-switch .nav-link[data-i18n="lang_label"] {
  opacity: 1 !important;
  animation: none !important;
}