/* HN Top Bar & Search — bar styles (extracted from ao.css). Search overlay ki CSS JS me inject hoti hai (topbar-search.js). */ :root{ /* Bar content height (fixed) — items/line-height isse bandhe hain, taaki --hnao-h (jo JS bar ki full height se set karta hai) ke saath loop na bane. */ --hnao-bar-content:40px; /* Full bar offset height (JS/pad() ise real height se update karta hai; status bar padding ke saath bada ho sakta hai). Stage/dropdowns ise use karte hain. */ --hnao-h:40px; } /* ========================= Top bar (tabs + search) ========================= */ .hnao-bar{ /* fixed: bar hamesha screen ke bilkul top par pinned rahegi (scroll se bhi nahi hilti) — jaisa pehle tha. Bar wp_body_open se ke bilkul shuru me render hoti hai (theme wrapper ke bahar), isliye theme ki spacing rules ise touch nahi karti. Fixed hone se ye document-flow se bahar hai — iske turant baad ek chhota spacer div (isi height ka) content ko bar ke neeche push karta hai (dekho hn_topbar_render_bar()). */ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; margin:0 !important; max-width:none !important; z-index:100000 !important; background:#000; display:flex; justify-content:space-between; align-items:center; height:var(--hnao-bar-content); min-height:var(--hnao-bar-content); padding:0 2px 0 8px; box-sizing:border-box; } /* Bar fixed hone ki wajah se document-flow me jagah nahi roki — ye spacer usi height ka hai, taaki koi bhi content (post ho ya page) hamesha bar ke turant neeche se shuru ho, chahe theme koi bhi ho. */ .hnao-bar-spacer{ height:var(--hnao-bar-content); min-height:var(--hnao-bar-content); margin:0 !important; padding:0 !important; flex:none; } .hnao-left{ flex:1 1 auto; min-width:0; height:var(--hnao-bar-content); display:flex; align-items:center; } .hnao-scroll{ display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; scrollbar-width:none; height:100%; align-items:center; } .hnao-scroll::-webkit-scrollbar{display:none} .hnao-cat, .hnao-cat:visited, .hnao-cat:hover, .hnao-cat:active, .hnao-cat:focus{ color:#fff!important; text-decoration:none!important; font-weight:800; padding-top:0; padding-bottom:0; line-height:var(--hnao-bar-content); } #hnao-bar a{text-decoration:none!important} .hnao-right{ flex:0 0 auto; height:var(--hnao-bar-content); display:flex; align-items:center; justify-content:center; /* apne chhote area me center */ padding-right:0; /* extra right margin hata diya */ } /* Search icon button (top right) */ .hnao-menu-btn{ display:flex; align-items:center; justify-content:center; width:36px; /* thoda bada */ height:36px; /* thoda bada */ padding:0; margin:0; border:0; border-radius:999px; background:rgba(255,255,255,0.06); /* halka stylish round background */ color:#fff; cursor:pointer; box-shadow:0 0 0 1px rgba(255,255,255,0.12); transition:background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .hnao-menu-btn:hover, .hnao-menu-btn:focus-visible{ background:rgba(255,255,255,0.14); transform:scale(1.02); box-shadow:0 0 0 1px rgba(255,255,255,0.32); } .hnao-menu-btn svg{ display:block; width:22px; /* icon thoda bada */ height:22px; } /* Content stage ko bar ki FIXED height par pin karo (na ki JS-measured --hnao-h par). Do jagah (merged ao.js + ads-suite ao-ads.js) alag-alag pad() bar ki height measure karke --hnao-h set karte hain — timing/race ki wajah se kabhi kam measure ho jaata hai, jisse featured image thodi bar ke neeche chali jaati hai. Ye pin us race ko bypass karta hai — image hamesha bar ke bilkul neeche se shuru hogi. Standalone CSS late (priority 99) load hoti hai, isliye !important jeetega. */ #hnao-stage.hnao-stage{ top:var(--hnao-bar-content) !important; } /* Top bar item icons — emoji ya GIF/image, label ke saath inline */ .hnao-cat-icon{ display:inline-block; vertical-align:middle; margin-right:5px; } img.hnao-cat-icon{ width:18px!important; height:18px!important; object-fit:contain; border-radius:3px; } .hnao-cat-icon-emoji{ font-size:15px; line-height:1; }