/* ═══════════════════════════════════════════════════════════════════
 * header-layouts.css — 4 header navigation methods (IISDVT v5)
 *   data-hdr = inline | stacked | top_bottom | three_level
 *   Colors var(--accent) etc. se aate hain → har template apna color deta.
 *   (inline = default .topnav, main.css me already styled hai.)
 * ═══════════════════════════════════════════════════════════════════ */

/* Multi-row header normal flow me hai → fixed-nav ka top offset hatao */
body.hdr-flow{--nav-h:0px;}
body.hdr-flow .hero-section{padding-top:38px;}

.site-header{position:relative;z-index:50;width:100%;}

/* ── Utility bar (contact + social) ── */
.hdr-utility{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:7px 5%;font-size:.8rem;background:var(--accent);color:#fff;}
.hdr-utility .hdr-contact{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.hdr-utility .hdr-contact-item{color:#fff;opacity:.95;}
.hdr-social-wrap{display:flex;gap:6px;}
.hdr-social{display:inline-flex;width:24px;height:24px;border-radius:6px;
  background:rgba(255,255,255,.18);color:#fff;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;text-decoration:none;transition:.15s;}
.hdr-social:hover{background:rgba(255,255,255,.34);}

/* ── Branding row (logo + contact/login) ── */
.hdr-branding{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 5%;background:var(--card);border-bottom:1px solid var(--border);}
.hdr-branding .logo{font-size:1.5rem;}
.hdr-branding-right{display:flex;align-items:center;gap:16px;}
.hdr-branding .hdr-contact{display:flex;gap:20px;align-items:center;font-size:.85rem;color:var(--muted);}
.hdr-branding .hdr-contact-item{white-space:nowrap;}

/* ── Primary nav bar ── */
.hdr-navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 5%;background:var(--accent);min-height:48px;}
.hdr-navbar .nav-links{gap:4px;}
.hdr-navbar .nav-links a{color:#fff;opacity:.92;padding:8px 14px;border-radius:7px;font-weight:600;}
.hdr-navbar .nav-links a:hover{background:rgba(255,255,255,.16);color:#fff;opacity:1;}
.hdr-navbar .nav-links a.active{background:rgba(255,255,255,.22);color:#fff;opacity:1;}
.hdr-navbar-right{display:flex;align-items:center;gap:10px;}

/* ── STACKED: nav bar light (branding ke neeche) ── */
.header-stacked .hdr-navbar{background:var(--card);border-bottom:1px solid var(--border);min-height:46px;}
.header-stacked .hdr-navbar .nav-links a{color:var(--text2,#475569);}
.header-stacked .hdr-navbar .nav-links a:hover{background:var(--accent-l);color:var(--accent);}
.header-stacked .hdr-navbar .nav-links a.active{background:var(--accent-l);color:var(--accent);}

/* ── TOP+BOTTOM: branding (logo+contact) upar, nav+login neeche ── */
.header-top-bottom .hdr-navbar .nav-right .btn{padding:6px 14px;}

/* ── THREE_LEVEL: utility + branding + nav (3 rows) ── */
.header-three-level .hdr-branding{padding:16px 5%;}

/* ── Mobile: sab collapse → logo + hamburger ── */
@media(max-width:960px){
  .hdr-utility{display:none;}
  .hdr-navbar{display:none;}
  .site-header .nav-right{display:none;}
  .hdr-branding .hdr-contact{display:none;}
  .hdr-branding{padding:12px 5%;}
  .hdr-branding-right{gap:8px;}
}