/**
 * FILE: assets/css/header.css
 * VERSION: 1.2.1 | 2026-01-16 04:25 Europe/Berlin
 * CHANGELOG:
 *  - FIX: pe mobil header NU mai arată “blurat și mic și urât” (scot blur/backdrop-filter din pill-uri)
 *  - FIX: hamburger rămâne 100% clickabil (z-index + position + tap highlight)
 *  - păstrează: offcanvas + overlay + styling selector limbă
 *  - NU atinge desktop (doar @media max-width:1024px)
 */

/* ====== LANG SELECT (păstrat) ====== */
.lang-select {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.lang-select::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: rgba(229,231,235,0.95);
  pointer-events: none;
}

.lang-select select {
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #e5e7eb !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  background: rgba(15,23,42,0.65) !important;
  border: 1px solid rgba(148,163,184,0.55) !important;
  border-radius: 999px !important;

  padding: 0.28rem 2.0rem 0.28rem 0.85rem !important;
  line-height: 1.1 !important;

  outline: none !important;
  cursor: pointer !important;
}

.lang-select select:focus {
  border-color: rgba(56,189,248,0.85) !important;
  box-shadow: 0 0 0 2px rgba(56,189,248,0.22) !important;
}

.lang-select select option {
  color: #111827 !important;
}

/* ====== HAMBURGER ======
   Desktop: ascuns. Mobil: afișat în @media.
*/
.nav-toggle {
  display: none;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(15,23,42,0.45);
  box-shadow: 0 18px 45px rgba(15,23,42,0.35);
  cursor: pointer;
  position: relative;

  /* click/tap friendly */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.nav-toggle:active { transform: translateY(1px); }

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: rgba(229,231,235,0.95);
  border-radius: 999px;
  transform: translateX(-50%);
}

.nav-toggle-bars { top: 50%; transform: translateX(-50%) translateY(-50%); }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

/* ====== OVERLAY ====== */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.45);

  /* IMPORTANT: fără blur, ca să nu “murdărească” vizual pagina */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  z-index: 1099; /* sub meniu, peste pagină */
}

.nav-overlay.nav-open { display: block; }

/* ====== MOBILE BEHAVIOR ====== */
@media (max-width: 1024px) {

  /* 1) Header devine transparent REAL: fără blur, fără gradient, fără shadow */
  .site-header {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 2) Brand (logo + titlu) rămâne vizibil, dar FĂRĂ blur “glass” */
  .site-brand {
    padding: 8px 10px;
    border-radius: 18px;
    background: rgba(2,6,23,0.22);          /* discret, nu “sticlă” */
    border: 1px solid rgba(148,163,184,0.20);

    /* scoatem blur-ul care făcea urât */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3) Subtitle off pe mobil */
  .site-subtitle { display: none !important; }

  .site-title {
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
  }

  /* 4) Hamburger: vizibil și mereu clickabil (z-index peste tot) */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 1205; /* peste overlay + meniu */
    background: rgba(2,6,23,0.28);
    border-color: rgba(148,163,184,0.25);
    box-shadow: none; /* păstrăm clean */
  }

  /* 5) NAV devine offcanvas */
  .main-nav {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    right: 0;
    width: min(360px, 84vw);
    height: calc(100svh - var(--header-h) - env(safe-area-inset-top));
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    padding: 16px 14px 18px;

    background: rgba(2,6,23,0.92);
    border-left: 1px solid rgba(148,163,184,0.35);
    box-shadow: -22px 0 60px rgba(0,0,0,0.45);

    transform: translateX(110%);
    transition: transform 0.18s ease-out;
    z-index: 1200; /* peste overlay */
  }

  .main-nav.nav-open { transform: translateX(0); }

  .main-nav a {
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.25);
  }

  .main-nav a.active {
    background: rgba(30,64,175,0.40);
    border-color: rgba(96,165,250,0.45);
  }

  .main-nav a::after { display: none !important; }

  .lang-select { margin-top: 6px; align-self: flex-start; }

  /* 6) Când meniul e deschis, blocăm scroll-ul de fundal (navbar.js pune body.nav-open) */
  body.nav-open { overflow: hidden; }
}