/*
   HEADER
   Bara („Adaugă eveniment" + categorii + zile) stă într-un UX Block, deci
   markup-ul și <style>-ul ei sunt în baza de date. Acela se tipărește în body,
   după fișierul ăsta, așa că regulile de aici sunt prefixate cu #header: la
   specificitate egală ar câștiga blocul, oricât de corectă ar fi regula.

   Modelul e nav-ul de la AllEvents: categoriile și zilele nu mai stau ascunse
   după două butoane, ci la vedere într-un rând cu iconițe, iar restul intră sub
   „Toate" și sub butonul de calendar. Rândul îl construiește
   assets/js/header-nav.js.

   Accentul e roșul din pinul de oraș (#f2694f, definit în iconuri.css), ca tot
   header-ul să aibă o singură culoare de accent.
*/

/* Header alb, cu o linie fină dedesubt. Înălțimea o punem pe auto: rândul de
   categorii nu încape în cei 90px ficși ai temei și ieșea peste conținut. */
#header .header-main{
  background-color:#fff !important;
  border-bottom:1px solid #e6eaee !important;
  height:auto !important;
  min-height:70px;
}
#header .header-main .header-inner{ min-height:70px; }
/* Fundalul header-ului îl pictează un strat separat al temei (#e9edef), nu
   .header-main — degeaba doar albim containerul. */
#header .header-main .header-bg-color{ background-color:#fff !important; }

/* Coloana din header n-are min-width:0, deci un rând lung de link-uri o lățea
   peste ecran în loc să se rupă. Îl punem noi, pe tot lanțul. */
#header .header-inner > .flex-col{ min-width:0; }
#header .header-nav-main{ min-width:0; }
#header .header-nav-main > li.header-block{ min-width:0; flex:1 1 auto; }
#header .header-nav-main > li.header-block > div{ min-width:0; }

/* Bara: fără banda gri, pe fundalul alb al header-ului. */
#header .onbar--desktop{
  position:relative;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 16px;
  background:transparent !important;
  padding:6px 0 !important;
  margin:0 !important;
  min-width:0;
}
/* Ordinea: întâi categoriile, sub ele zilele, iar „Adaugă eveniment" la coada
   rândului de zile. `display:contents` scoate .on-nav din calcul, ca toate
   link-urile să curgă direct în bara-flex — altfel nav-ul ar fi un singur
   element și butonul n-ar putea împărți rândul cu zilele. */
#header .onbar--desktop .on-nav{ display:contents; }
#header .onbar--desktop .on-quickbar{
  order:2;
  flex:0 0 auto;
  justify-content:flex-start;
  gap:8px;
}

/* Butoanele vechi ies: categoriile și zilele stau acum la vedere în rând. */
#header .onbar--desktop .on-cat-toggle,
#header .onbar--desktop .on-day-toggle,
#header .onbar--desktop .on-city-toggle,
#header .onbar--desktop .on-cat-wrap,
#header .onbar--desktop .on-day-wrap,
#header .onbar--desktop .on-city-wrap{ display:none !important; }

/* „Adaugă eveniment": conturat și mic, nu bloc plin — e o acțiune secundară
   față de răsfoit, iar plinul verde trăgea tot ochiul pe el. */
#header .onbar--desktop .on-quickbar a.button.primary,
#header .onbar--desktop .on-quickbar a.on-btn{
  background-color:transparent !important;
  border:1px solid #f2694f !important;
  color:#f2694f !important;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.2;
  padding:7px 14px;
  margin:0;
  min-height:0;
  box-shadow:none;
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#header .onbar--desktop .on-quickbar a.on-btn:hover{
  background-color:#f2694f !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(242,105,79,.3);
}
#header .onbar--desktop .on-quickbar a.on-btn i{
  margin-right:6px;
  font-size:12px;
}

/* ── Rândul de navigare ────────────────────────────────────────────────── */
#header .on-nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 16px;
  min-width:0;
}
#header .on-nav:empty{ display:none; }
#header .on-nav__item,
#header .on-nav__more-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 0;
  border:0;
  background:none;
  box-shadow:none;
  font-family:inherit;
  font-size:14.5px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  color:#3c4043;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:color .15s ease;
}
#header .on-nav__ico{
  font-size:14px;
  color:#9aa1a9;
  transition:color .15s ease;
}
#header .on-nav__item::after,
#header .on-nav__more-btn::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:1px;
  height:2px;
  background:#f2694f;
  border-radius:2px;
  transform:scaleX(0);
  transition:transform .18s ease;
}
#header .on-nav__item:hover,
#header .on-nav__more-btn:hover,
#header .on-nav__more.is-open .on-nav__more-btn{ color:#f2694f; }
#header .on-nav__item:hover .on-nav__ico,
#header .on-nav__more-btn:hover .on-nav__ico,
#header .on-nav__more.is-open .on-nav__ico{ color:#f2694f; }
#header .on-nav__item:hover::after,
#header .on-nav__more-btn:hover::after,
#header .on-nav__more.is-open .on-nav__more-btn::after{ transform:scaleX(1); }

/* Rupe rândul înaintea zilelor: categoriile sus, zilele jos. (Un element gol
   cu flex-basis:100% e felul obișnuit de a forța o linie nouă într-un flex.) */
#header .on-nav__sep{
  flex:0 0 100%;
  width:100%;
  height:0;
}

/* Săgeata care arată că butonul deschide o listă. */
#header .on-nav__caret{
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.7;
  transition:transform .18s ease;
}
#header .on-nav__more.is-open .on-nav__caret{ transform:rotate(180deg); }

/* Panoul cu restul: cade sub linia header-ului, pe toată lățimea barei. */
#header .on-nav__more{ position:static; }
#header .on-nav__panel{
  display:none;
  position:absolute;
  top:calc(100% + 10px); left:0;
  width:100%;
  z-index:200;
  background:#fff;
  border:1px solid #e6eaee;
  border-radius:10px;
  box-shadow:0 14px 30px rgba(20,30,40,.13);
  padding:14px 16px;
}
#header .on-nav__more.is-open .on-nav__panel{ display:block; }
#header .on-nav__group + .on-nav__group{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eef1f4;
}
#header .on-nav__title{
  display:block;
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a9099;
}
#header .on-nav__links{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:2px 10px;
}
#header .on-nav__link{
  display:block;
  padding:6px 8px;
  border-radius:6px;
  font-size:14px;
  line-height:1.3;
  color:#3c4043;
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease;
}
#header .on-nav__link:hover{ color:#f2694f; background:#fdf1ee; }

/* ── Butonul de oraș, din dreapta ──────────────────────────────────────── */
/* Era un teanc: pin mare deasupra, numele orașului dedesubt. Devine aceeași
   pastilă ca „Adaugă eveniment" — conturată în roșul pinului, plină la hover —
   ca cele două capete ale barei să arate la fel. */
#header .dropbtn_orase{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:6px 13px !important;
  border:1px solid #f2694f !important;
  border-radius:999px;
  background:transparent !important;
  transition:background-color .15s ease, box-shadow .15s ease;
}
#header .dropbtn_orase:hover{
  background:#f2694f !important;
  box-shadow:0 3px 10px rgba(242,105,79,.3);
}
#header .dropbtn_orase .oras-icon-wrap{
  flex-direction:row;
  align-items:center;
  gap:6px;
}
#header .dropbtn_orase .fa-map-marker-alt{
  font-size:13px !important;
  color:#f2694f !important;
  transition:color .15s ease;
}
#header .dropbtn_orase .oras-sub-icon{
  display:inline;
  margin:0;
  font-size:12.5px;
  font-weight:600;
  color:#f2694f;
  letter-spacing:0;
  transition:color .15s ease;
}
#header .dropbtn_orase::after{
  content:'';
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid #f2694f;
  flex:0 0 auto;
  transition:border-top-color .15s ease;
}
#header .dropbtn_orase:hover .fa-map-marker-alt,
#header .dropbtn_orase:hover .oras-sub-icon{ color:#fff !important; }
#header .dropbtn_orase:hover::after{ border-top-color:#fff; }

/* Sub 1200px rândul nu mai încape întreg: strângem spațiile și textul, ca să
   se rupă cât mai târziu. Când tot se rupe, header-ul crește — n-avem
   depășire pe orizontală. */
@media (max-width:1199px){
  #header .onbar--desktop{ gap:4px 10px; }
  #header .on-nav{ gap:2px 11px; }
  #header .on-nav__item,
  #header .on-nav__more-btn{ font-size:13.5px; gap:6px; }
  #header .on-nav__ico{ font-size:13px; }
  #header .on-nav__links{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}