/* =========================
   RESET & BAZĂ
   ========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f7f9fc;
}

/* =========================
   NAVBAR GENERAL
   ========================= */
.nav-bar {
  position: relative;
  background-color: #0056d2; /* albastru principal */
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* LOGO */
.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-container span {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 0.5rem;
}

.site-logo {
  height: 55px;
  width: auto;
}

/* LINKURI */
.nav-links {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  gap: 1rem;
}

.nav-item {
  text-decoration: none;
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem;
  border-radius: 12px;
  transition: background-color 0.25s ease, color 0.25s ease;
  outline: none;
}

.nav-item:hover,
.nav-item:focus-visible {
  background-color: rgba(255,255,255,0.12);
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
  object-fit: contain;
}

.yellow-icon {
  /* galben consistent pe orice icon */
  filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(1116%) hue-rotate(9deg) brightness(107%) contrast(104%);
}

/* =========================
   DROPDOWN – DESKTOP (hover)
   ========================= */
.dropdown {
  position: relative;
  display: flex; /* păstrează alinierea cu celelalte item-uri */
}

/* Pod invizibil ca să nu “pice” hover-ul între trigger și meniu */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;               /* elimină “golul” de hover */
}

/* Meniul închis implicit */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px;
  background: #0056d2;        /* fundal albastru */
  color: #fff;                /* text alb */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(5,41,120,0.25);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;

  /* Truc: delay DOAR la închidere
     - când .dropdown NU e hover/focus-within, aplicăm un mic delay */
  transition:
    opacity .25s ease .12s,
    transform .25s ease .12s,
    visibility 0s linear .12s;
}

/* Deschis când: hover SAU focus în interior (accesibil cu tastatura) */
.dropdown:is(:hover, :focus-within) .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);

  /* la deschidere nu întârziem */
  transition:
    opacity .2s ease 0s,
    transform .2s ease 0s,
    visibility 0s linear 0s;
}

/* Zonă hover stabilă în interiorul meniului */
.dropdown-menu:hover,
.dropdown-menu:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Elemente din dropdown */
.dropdown-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: #ffd600; /* galben accent */
  color: #0b1731;      /* text închis pentru contrast */
}

.dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 6px 4px;
  border-radius: 1px;
}

/* =========================
   MOBIL – bară jos, popup pe JS
   ========================= */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    padding-bottom: 70px; /* loc pentru navbar jos */
  }

  .nav-bar {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.5rem;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  }

  .logo-container { display: none; }

  .nav-links {
    flex: 1;
    display: flex;
    justify-content: space-around;
    gap: 0.25rem;
  }

  .nav-item {
    font-size: 0.75rem;
    padding: 0 !important; 
  }

  .nav-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 0;
  }

  /* pe mobil nu folosim dropdown-ul (popup-ul se ocupă),
     ascundem complet meniul desktop */
  .dropdown .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

    .nav-item .label{
    display: block;
    font-size: .75rem;                      /* ~12px */
    line-height: 1 !important;              /* << cheia: identic pe toate paginile */
    margin-top: 2px;                        /* spațiu mic sub icon, fără să umfle item-ul */
    letter-spacing: 0;                      /* evită diferențe de tracking */
  }
  
}

/* =========================
   DESKTOP – aliniere
   ========================= */
@media (min-width: 769px) {
  .nav-bar {
    top: 0;
    bottom: auto;
    flex-direction: row;
    position: relative;
  }

  .logo-container {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .nav-links {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }

  .nav-item {
    flex-direction: row;
    gap: 0.5rem;
    font-size: 0.9rem;
  }

  .nav-icon {
    width: 20px;
    height: 20px;
    margin: 0;
  }
}

/* =========================
   ACCESSIBILITY / MOTION
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .dropdown-menu,
  .dropdown-item {
    transition: none !important;
  }
}



/* =========================
   MODAL MOBIL 'CERCETARE' – ascuns implicit, vizibil doar pe mobil
   ========================= */
#researchModal {
  position: fixed;
  inset: 0;
  display: none;            /* ASCUNS implicit pe toate dimensiunile */
  z-index: 9999;
}
#researchModal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
#researchModal .modal-content {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: min(520px, 92vw);
  outline: none;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 1rem;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
}

/* stare deschisă */
#researchModal.open { 
  display: block;           /* doar când JS adaugă .open */
}
#researchModal.open .modal-content {
  transform: translateX(-50%) translateY(0);
  transition: transform .2s ease-out;
}

/* pe ecrane >= 769px (desktop micșorat și mărit) forțăm ascunderea */
@media (min-width: 769px) {
  #researchModal { display: none !important; }
}

/* ======== MOBILE RESEARCH MODAL – stil "bottom sheet" elegant ======== */
@media (max-width: 768px) {

  /* Activează modul sheet doar pe mobil */
  #researchModal {
    display: none; /* rămâne ascuns până primește .open din JS */
  }

  #researchModal.open {
    display: block;
  }

  /* Fundal cu blur, discret */
  #researchModal .modal-overlay {
    background: rgba(9, 18, 40, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity .2s ease;
    opacity: 1;
  }

  /* Containerul sheet-ului */
  #researchModal .modal-content {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(100%);
    width: min(520px, 100vw);
    max-height: calc(92vh - env(safe-area-inset-top));
    background: #6eb9ff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 12px 16px max(16px, 12px + env(safe-area-inset-bottom));
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    /* scrolling interior plăcut */
    overscroll-behavior: contain;
  }

  /* Animație de intrare */
  #researchModal.open .modal-content {
    transform: translateX(-50%) translateY(0);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
  }

  /* "drag handle" vizual pentru feedback tactil */
  #researchModal .modal-content::before {
    content: "";
    display: block;
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: #E5E7EB;
    margin: 6px auto 10px;
  }

  /* Antet cu titlu + buton închidere */
  #researchModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 2px 8px;
    border-bottom: 1px solid #F1F5F9;
  }

  #researchModal .modal-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: #0f172a;
  }

  #researchModal .modal-close {
    appearance: none;
    border: none;
    background: #F1F5F9;
    color: #0f172a;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease;
  }
  #researchModal .modal-close:active { transform: scale(.96); }
  #researchModal .modal-close:hover,
  #researchModal .modal-close:focus-visible {
    background: #E2E8F0;
    outline: none;
  }

  /* Lista de linkuri: carduri mari, touch-friendly */
  #researchModal .modal-links {
    display: grid;
    gap: 10px;
    padding: 12px 2px 4px;
    margin-top: 4px;
  }

  #researchModal .modal-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 14px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.04);
    color: #0b1731;
    font-weight: 750;
    letter-spacing: .2px;
    font-size: 0.98rem;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    min-height: 52px; /* țintă tactilă generoasă */
  }

  #researchModal .modal-link::after {
    content: "›";
    font-size: 1.2rem;
    line-height: 1;
    opacity: .6;
  }

  #researchModal .modal-link:hover,
  #researchModal .modal-link:focus-visible {
    border-color: #c7d2fe;
    background: #F8FAFF;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.10);
    outline: none;
  }
  #researchModal .modal-link:active { transform: translateY(1px); }

  /* Mic badge de accent (opțional, dacă vrei să marchezi ceva ca nou)
     .modal-link .badge { ... } – nu folosești acum, dar e gata dacă ai nevoie */
  
  /* Safe-area bottom pentru telefoane cu gesturi */
  @supports (padding: max(0px)) {
    #researchModal .modal-content {
      padding-bottom: max(16px, 12px + env(safe-area-inset-bottom));
    }
  }
}

/* Respectă preferințele de reducere a animațiilor */
@media (prefers-reduced-motion: reduce) {
  #researchModal .modal-content,
  #researchModal .modal-overlay,
  #researchModal .modal-link,
  #researchModal .modal-close {
    transition: none !important;
  }
}