/* assets/css/menu.css */
/* Wersja: 7.0 SSoT (No Forced Colors on Mobile) */

/* =========================================
   1. VARIABLES & CONFIGURATION
   ========================================= */
:root {
  /* --- REGULACJA CZUŁOŚCI (SAFETY BUFFER) --- */
  /* Tyle "luzu" (px) musi zostać, żeby menu nie przeszło w Hamburgera. */
  --nav-safety-buffer: 80px;

  /* --- LOGIC VARIABLES --- */
  --nav-item-gap: 2rem;
  --header-padding: 2rem;
  --min-logo-width: 150px;
  
  /* --- COLORS & THEME --- */
  --header-bg-start: #0b233a; /* Twój startowy Granat */
  --ui-contrast-color: #222222; /* Zmienna sterowana przez JS */
  
  /* --- VISUALS --- */
  --header-height: 70px;
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --text-hover: #e26005;
  --drawer-bg: #ffffff;
  
  /* --- Z-INDEX LAYERS --- */
  --z-drawer: 2000;
  --z-header: 2001;
  --z-hamburger: 2002;
  --z-dropdown: 2005;
  --z-popup: 2010;
}

/* TABLET ADJUSTMENT */
@media (max-width: 1200px) {
  :root {
    --nav-item-gap: 1.5rem;
    --header-padding: 1.5rem;
    --min-logo-width: 130px;
    --nav-safety-buffer: 120px; 
  }
}

/* =========================================
   2. HEADER CONTAINER
   ========================================= */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: var(--z-header);

  /* BACKGROUND LOGIC:
     Bierze kolor z Chameleona (--dynamic-color) lub Startowy (--header-bg-start).
     NIGDY nie wymuszamy tu bieli przy otwartym menu. */
  background-color: var(--dynamic-color, var(--header-bg-start));
  
  /* TEXT LOGIC: */
  color: var(--ui-contrast-color);
  
  box-shadow: var(--header-shadow);
  transition: background-color 0.3s ease, color 0.3s ease;

  /* LAYOUT */
  display: grid;
  grid-template-columns: auto 1fr auto; 
  align-items: center;
  padding-inline: max(var(--header-padding), calc((100% - var(--section-max-width)) / 2));
}

/* =========================================
   3. LOGO
   ========================================= */
.site-logo {
  font-weight: 800;
  font-size: 1.5rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  min-width: var(--min-logo-width);
  height: 100%;
  color: inherit;
}

/* Wymiary dla SVG i IMG */
.site-logo img,
.site-logo svg {
  max-height: 40px;
  width: 85px;
  object-fit: contain;
  display: block;
}

/* Obsługa koloru dla SVG */
.site-logo svg, 
.site-logo svg path {
  fill: currentColor;
}

/* =========================================
   4. DESKTOP NAVIGATION
   ========================================= */
.desktop-nav {
  justify-self: center;
  display: none; 
}

.nav-list {
  display: flex;
  gap: var(--nav-item-gap);
  list-style: none;
  margin: 0; padding: 0;
  width: max-content;
  
  /* WYMAGANIA UKŁADU: */
  align-items: baseline; /* Wyrównanie do linii tekstu */
  flex-wrap: nowrap;     /* Zakaz łamania linii */
}

.nav-list a {
  text-decoration: none;
  color: var(--ui-contrast-color);
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}

.nav-list a:hover {
  color: var(--text-hover);
  opacity: 0.8;
}

/* =========================================
   5. ACTIONS & LANGUAGES
   ========================================= */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Dropdown Wrapper */
.lang-select-wrapper {
  display: none; 
  position: relative;
  z-index: var(--z-dropdown);
}

.lang-trigger {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--ui-contrast-color);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1); 
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ui-contrast-color);
  transition: all 0.2s;
}
.lang-trigger:hover { background: rgba(255, 255, 255, 0.2); }

/* Popup */
.lang-popup {
  position: absolute;
  top: 120%; right: 0;
  background: #ffffff;
  min-width: 140px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  z-index: var(--z-popup);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
}
.lang-select-wrapper.open .lang-popup {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.lang-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  text-decoration: none;
  color: #222 !important;
  font-size: 0.9rem;
  white-space: nowrap;
}
.lang-option:hover {
  background: #f5f5f5; color: var(--text-hover) !important;
}

/* Desktop Flags */
.lang-flags { display: none; gap: 0.5rem; }
.lang-btn {
  width: 28px; height: 28px; border-radius: 50%; display: block; overflow: hidden;
  border: 2px solid transparent; opacity: 0.8; transition: transform 0.2s;
}
.lang-btn.active, .lang-btn:hover {
  border-color: var(--text-hover); opacity: 1; transform: scale(1.1);
}
.lang-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* =========================================
   6. HAMBURGER BUTTON
   ========================================= */
.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer; padding: 0;
  position: relative;
  z-index: var(--z-hamburger);
}

.bar {
  width: 26px; height: 2px;
  /* Kolor zawsze dynamiczny (kontrastowy do tła nagłówka) */
  background-color: var(--ui-contrast-color);
  border-radius: 2px;
  margin: 0 auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animacja X (Kolor NIE jest wymuszany, bierze z --ui-contrast-color) */
.hamburger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; transform: translateX(10px); }
.hamburger[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* =========================================
   7. MOBILE DRAWER
   ========================================= */
.mobile-drawer {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: var(--z-drawer); /* Pod Headerem */
  display: flex; justify-content: flex-end;
  padding-top: var(--header-height);
}
.mobile-drawer.is-open { opacity: 1; pointer-events: auto; }

.drawer-content {
  width: 85%; max-width: 360px;
  background: var(--drawer-bg);
  height: 100%;
  padding: 2rem;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
}
.mobile-drawer.is-open .drawer-content { transform: translateX(0); }

.drawer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.drawer-nav-list li { border-bottom: 1px solid #f0f0f0; }
.drawer-nav-list a {
  font-size: 1.2rem; color: #222; text-decoration: none;
  font-weight: 600; display: block; padding: 1rem 0.5rem;
}


/* =========================================
   8. STATE LOGIC
   ========================================= */
/* Loading State */
.site-header[data-state="loading"] .desktop-nav,
.site-header[data-state="loading"] .hamburger,
.site-header[data-state="loading"] .lang-select-wrapper {
  opacity: 0; visibility: hidden;
}

/* Visibility Toggles Only (No Color Overrides!) */
.site-header[data-state="desktop"] .desktop-nav { display: block; }
.site-header[data-state="desktop"] .lang-flags { display: flex; }
.site-header[data-state="desktop"] .hamburger { display: none; }

.site-header[data-state="mobile"] .desktop-nav { display: none; }
.site-header[data-state="mobile"] .lang-select-wrapper { display: block; }
.site-header[data-state="mobile"] .hamburger { display: flex; }

/* SHADOW RULER */
.nav-shadow-ruler {
  position: absolute; top: -9999px; left: 0;
  visibility: hidden; pointer-events: none;
  width: max-content !important;
  display: flex !important; flex-direction: row !important;
  font-family: inherit; font-size: inherit; font-weight: inherit; gap: inherit;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .site-header { padding-inline: 1rem; }
  .drawer-content { width: 100%; max-width: none; }
}