/*
   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;
  height:auto !important;
  min-height:70px;
}
/* Linia fină stă sub tot header-ul, nu sub primul rând: bara de categorii s-a
   mutat în rândul de jos, iar o linie între ele ar fi tăiat header-ul în două. */
#header .header-wrapper{ border-bottom:1px solid #e6eaee; }
#header .header-bottom{ background-color:#fff !important; }
#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,
#header .header-bottom .flex-row > .flex-col{ min-width:0; }
#header .header-nav-main,
#header .header-bottom-nav{ min-width:0; }
#header .header-nav-main > li.header-block,
#header .header-bottom-nav > li.header-block{ min-width:0; flex:1 1 auto; }
#header .header-nav-main > li.header-block > div,
#header .header-bottom-nav > 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;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 15px;
  background:transparent !important;
  padding:2px 0 !important;
  margin:0 !important;
  min-width:0;
}
#header .onbar--desktop .on-nav{ display:contents; }
/* „Adaugă eveniment" s-a mutat sus, lângă butonul de oraș (blocul HTML din
   header builder, marcat .on-add-btn). Aici îl scoatem, ca să nu apară de două
   ori — markup-ul lui rămâne în UX Block și se poate șterge de acolo. */
#header .onbar--desktop .on-quickbar{ display:none !important; }

/* 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); }

/* Linia care desparte categoriile de zile, pe același rând. */
#header .on-nav__sep{
  flex:0 0 auto;
  width:1px;
  height:18px;
  margin:0 2px;
  background:#e2e6ea;
}

/* Săgeata care arată că butonul deschide o listă. */
#header .on-nav__item:focus,
#header .on-nav__more-btn:focus{ outline:none; }
#header .on-nav__item:focus-visible,
#header .on-nav__more-btn:focus-visible{
  outline:2px solid #f2694f;
  outline-offset:3px;
  border-radius:4px;
}

#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; }

/* ── „Adaugă eveniment", mutat sus lângă oraș ──────────────────────────── */
/* Markup-ul stă într-un bloc HTML din Header Builder (vezi README-ul barei în
   functions.php); aici doar îl îmbrăcăm, în aceeași pastilă ca butonul de oraș. */
#header .on-add-btn{
  display:inline-flex;
  align-items:center;
  /* Link-urile din nav-ul temei au flex-wrap:wrap, deci pe mobil plusul sărea
     deasupra textului. */
  flex-wrap:nowrap;
  gap:7px;
  padding:6px 12px;
  border:0;
  border-radius:999px;
  background:transparent;
  font-family:inherit;
  /* Aceleași valori ca la butonul de oraș, ca perechea să arate identic.
     Culoarea e a logo-ului (#535353, luat cu pipeta din el), nu roșul de accent:
     pe alb, roșul are un contrast de 3:1 și se citea greu la 14px. Gri-ul are
     7,4:1, iar textul e acum mai mare și mai puțin gros — se vede mai bine
     tocmai fiindcă nu mai țipă. */
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  color:#535353;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
/* Tema colorează cu !important orice <i> dintr-un link din header
   (.header-main .nav > li > a > i), de-aia plusul ieșea gri. */
#header .on-add-btn i{ font-size:17px; color:#535353 !important; }
#header .on-add-btn:hover{
  background:#f2f2f2;
  color:#2f2f2f;
}
#header .on-add-btn:hover i{ color:#2f2f2f !important; }
/* Pe mobil eticheta lungă intra peste logo, deci acolo merge un al doilea bloc
   HTML, doar cu „Adaugă". */
#header .on-add-btn--mobil{
  gap:6px;
  padding:5px 8px;
  font-size:15px;
}
#header .on-add-btn--mobil i{ font-size:16px; }
/* Pe ecranele mici de tot („Adaugă" ajunge lângă logo) mai strângem puțin. */
@media (max-width:374px){
  #header .on-add-btn--mobil{ gap:5px; padding:5px 5px; font-size:14px; }
  #header .dropbtn_orase{ padding:6px 6px !important; }
  #header .dropbtn_orase .oras-sub-icon{ font-size:14px; }
}

/* ── Butonul de oraș, din dreapta ──────────────────────────────────────── */
/* Era un teanc: pin mare deasupra, numele orașului dedesubt. Devine un buton
   text, în aceeași cheie cu „Adaugă eveniment": fără chenar, pin și nume în
   roșul pinului, cu fundal roz pal la hover. */
#header .dropbtn_orase{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 !important;
  padding:6px 10px !important;
  border:0 !important;
  border-radius:999px;
  background:transparent !important;
  white-space:nowrap;
  transition:background-color .15s ease;
}
#header .dropbtn_orase:hover{ background:#f2f2f2 !important; }
#header .dropbtn_orase .oras-icon-wrap{
  flex-direction:row;
  align-items:center;
  gap:7px;
}
#header .dropbtn_orase .fa-map-marker-alt{
  font-size:17px !important;
  color:#535353 !important;
  transition:color .15s ease;
}
#header .dropbtn_orase .oras-sub-icon{
  display:inline;
  margin:0;
  font-size:16px;
  font-weight:500;
  color:#535353;
  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 #535353;
  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:#2f2f2f !important; }
#header .dropbtn_orase:hover::after{ border-top-color:#2f2f2f; }

/* 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ă. */
/* Sub 1280px cele unsprezece link-uri nu mai încap la 14,5px: strângem întâi
   spațiile și textul, iar la nevoie lăsăm iconițele — un rând rupt ar urca
   header-ul cu încă 35px. */
@media (max-width:1279px){
  #header .onbar--desktop{ gap:0 11px; }
  #header .on-nav__item,
  #header .on-nav__more-btn{ font-size:13.5px; gap:5px; }
  #header .on-nav__ico{ font-size:12.5px; }
  #header .on-nav__links{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:1099px){
  #header .onbar--desktop{ gap:0 9px; }
  #header .on-nav__item,
  #header .on-nav__more-btn{ font-size:13px; }
  #header .on-nav__ico{ display:none; }
}

/* ── Iconițele, centrate pe mijlocul textului ─────────────────────────────
   MĂSURAT, nu ghicit. Font Awesome pune `line-height:1` pe `.fa`, deci cutia
   iconiței e chiar caseta em și `align-items:center` o așază corect. Excepția e
   `.fa-lg`, care în FA6 vine cu `line-height:.05em`: pinul de lângă numele
   orașului avea o cutie de 0,8px în loc de 16px, iar glifa se desena raportat la
   linia de bază a acelei cutii turtite — de-aici ieșea din centru.

   Verificat în Chrome pe markup-ul real: cutia pinului era `height: 0.8px`,
   `line-height: 0.8px`, față de 14–16px la toate celelalte iconițe.

   Le fixăm cutia tuturor, ca să nu mai depindem de ce clasă FA se adaugă mâine,
   și le centrăm și pe orizontală, pentru lățimea variabilă a glifelor (14–18px
   la aceeași dimensiune de font). */
#header .on-nav__ico,
#header .on-add-btn i,
#header .dropbtn_orase i,
#header .dropbtn_orase .fa-map-marker-alt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
  vertical-align:middle;
  /* Ultimul pas, tot măsurat: flexbox aliniază CUTIILE, dar ochiul citește
     textul centrat pe banda majusculelor, care la Rubik stă cu ~0,015em mai sus
     decât mijlocul cutiei de linie. Iconița ieșea deci cu atât mai jos.
     La 100px, cu Font Awesome: centrul cernelii iconiței era la +1px (fa-music)
     și +2px (fa-calendar-day) față de centrul cernelii textului; cu corecția de
     mai jos ajung la -1px, respectiv 0. Restul e sub un pixel la 14–16px. */
  position:relative;
  top:-0.015em;
}
/* Rândurile care poartă iconițele centrează pe cutie, nu pe linia de bază. */
#header .on-nav__item,
#header .on-nav__more-btn,
#header .on-add-btn,
#header .dropbtn_orase,
#header .dropbtn_orase .oras-icon-wrap{
  align-items:center;
}