/* header.css — Header tip Pornhub (dark, accent orange, responsive) */
:root{
  --bg:#0b0b0d;           /* fundal header */
  --bg-2:#111217;         /* subnav */
  --text:#e7e9ee;
  --muted:#a8b0bc;
  --border: rgba(255,255,255,.08);
  --accent:#f5a200;       /* portocaliul "hub" */
  --accent-700:#cc8700;
  --glass: rgba(10,10,12,.65);
  --radius:12px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ===== Reset local & utils ===== */
.site-header, .site-header * { box-sizing: border-box; }
.site-header a { text-decoration: none; color: inherit; }
.site-header button { border:0; background:none; color:inherit; cursor:pointer; }
.only-mobile { display:none; }

@media (max-width: 980px){
  .only-mobile{ display:inline-flex; }
}

/* ===== Container principal ===== */
.site-header{
  position: sticky; top:0; z-index: 1000;
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.header-row{
  max-width: 1280px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: .75rem;
  align-items: center;
}

@media (max-width: 1100px){
  .header-row{ grid-template-columns: auto 1fr auto; }
}

/* ===== Brand ===== */
.ph-brand{
  display: inline-flex; align-items: center; gap:.45rem;
  font-weight: 900; letter-spacing: .2px;
  line-height: 1; transform: translateZ(0);
}
.ph-brand-word{ font-size: 1.25rem; }
.ph-white{ color:#fff; }
.ph-brand-tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .2rem .45rem .22rem;
  font-size: 1.05rem;
  color:#111; background: var(--accent);
  border-radius: 6px;
  font-weight: 900;
}

/* ===== Search (desktop) ===== */
.ph-search{
  display: flex; align-items:center; gap:.4rem;
  background: #0f1115;
  border:1px solid var(--border);
  border-radius: 999px;
  padding: .25rem .35rem .25rem .8rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.ph-input{
  flex:1; min-width: 150px;
  background: transparent; border:0; outline:0;
  color: var(--text);
  font-size: .98rem;
}
.ph-input::placeholder{ color: var(--muted); }
.ph-search .icon-btn{
  width: 36px; height: 36px; border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: #151823;
  border:1px solid var(--border);
}

/* ===== Buttons (dreapta) ===== */
.right{ display:flex; align-items:center; gap:.5rem; justify-content:flex-end; }
.left{ display:flex; align-items:center; gap:.6rem; }
.center{ display:flex; align-items:center; }

.icon-btn{
  width: 40px; height: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px;
  transition: transform .12s ease, background-color .12s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background:#141722; }

.btn{
  --pad-x: .9rem;
  --h: 40px;
  display:inline-flex; align-items:center; gap:.4rem;
  height: var(--h); padding: 0 var(--pad-x);
  border-radius: 10px; font-weight: 800; font-size:.95rem;
  line-height: 1; border:1px solid var(--border);
  background:#141722; color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }

.btn-ghost{
  background: transparent;
}
.btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,.18);
}
.btn-outline:hover{
  background:#191d2a; border-color: rgba(255,255,255,.28);
}
.btn-accent{
  background: var(--accent); color:#111; border-color: transparent;
}
.btn-accent:hover{
  background: var(--accent-700); color:#111;
}
.btn .material-symbols-outlined{ font-size: 20px; }

/* ===== Subnav (categorii) ===== */
.ph-subnav{
  background: var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.cat-list{
  max-width: 1280px; margin:0 auto;
  padding: .45rem 1rem;
  display:flex; gap:.4rem; align-items:center;
  overflow:auto; scrollbar-width: thin;
}
.cat-list li{ list-style:none; }
.cat-list a{
  display:inline-block; padding:.42rem .7rem;
  border-radius: 999px; font-weight:700; font-size:.9rem;
  color: rgba(231,233,238,.9);
  border:1px solid transparent;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.cat-list a:hover{ background:#181b26; border-color: var(--border); color:#fff; }

/* ===== Mobile: layout ===== */
@media (max-width: 980px){
  .center{ display:none; } /* ascundem search-ul clasic; îl togglăm cu .search-open */
  .right .btn{ display:none; } /* pe mobil arătăm doar iconițe */
  .right{ gap:.25rem; }
}

/* Căutare extinsă pe mobil (toggle via .search-open) */
@media (max-width: 980px){
  .site-header.search-open .center{ display:block; grid-column: 1 / -1; }
  .site-header.search-open .header-row{
    grid-template-columns: 1fr; grid-auto-rows: auto;
  }
  .site-header.search-open .left,
  .site-header.search-open .right{
    justify-content: space-between;
  }
  .site-header.search-open .ph-search{
    margin: .35rem 0 .2rem;
  }
}

/* ===== Drawer + Overlay (mobil) ===== */
.ph-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition: opacity .18s ease;
}
.ph-overlay.is-open{ opacity:1; pointer-events:auto; }

.ph-drawer{
  position: fixed; inset:0 auto 0 0; width: 86%;
  max-width: 340px; background: #0c0e14; color: var(--text);
  border-right:1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(-100%); transition: transform .22s ease;
  display:flex; flex-direction: column;
}
.ph-drawer.is-open{ transform: translateX(0); }

.drawer-header{
  display:flex; align-items:center; justify-content: space-between;
  padding: .9rem .9rem; border-bottom:1px solid var(--border);
}
.drawer-search{ margin:.8rem; }
.drawer-nav{ display:flex; flex-direction: column; padding: .2rem .4rem; gap:.25rem; }
.nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .8rem; border-radius: 10px;
  border:1px solid transparent;
  color: var(--text);
}
.nav-link:hover{ background:#141722; border-color: var(--border); }
.drawer-cats{ padding:.6rem .8rem 1rem; }
.drawer-title{ font-weight:900; margin:.4rem 0 .6rem; color:#fff; }
.drawer-cats ul{ display:grid; gap:.2rem .4rem; grid-template-columns: 1fr 1fr; }
.drawer-cats a{
  display:block; padding:.5rem .6rem; border-radius:10px;
  color: rgba(231,233,238,.9);
}
.drawer-cats a:hover{ background:#141722; color:#fff; }

/* ===== Focus states accesibile ===== */
.ph-input:focus,
.btn:focus,
.icon-btn:focus,
.nav-link:focus,
.cat-list a:focus,
.drawer-cats a:focus{
  outline: 2px solid rgba(245,162,0,.55);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ===== Mic polish ===== */
.site-header .material-symbols-outlined{
  font-variation-settings: 'wght' 500, 'opsz' 24;
}

/* Keep auth buttons on one line */
.right { flex-wrap: nowrap; }
.auth-group { display:inline-flex; gap:.5rem; white-space: nowrap; }

/* "More" dropdown */
.cat-more { position: relative; }
.cat-more-btn{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.42rem .7rem; border-radius:999px; font-weight:700; font-size:.9rem;
  color: rgba(231,233,238,.9); border:1px solid transparent; background: transparent;
}
.cat-more-btn:hover{ background:#181b26; border-color: var(--border); color:#fff; }

.cat-more-menu{
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px; max-height: 60vh; overflow:auto;
  background:#0f1115; border:1px solid var(--border);
  border-radius: 10px; padding: .4rem; box-shadow: var(--shadow); z-index: 30;
}
.cat-more-menu li{ list-style: none; }
.cat-more-menu a{
  display:block; padding:.5rem .6rem; border-radius:8px; color: rgba(231,233,238,.9);
}
.cat-more-menu a:hover{ background:#181b26; color:#fff; }

/* Avoid dropdown overflowing viewport on small widths */
@media (max-width: 720px){
  .cat-more-menu{ left: auto; right: 0; }
}