/* ════════════════════════════════════════════
   BN Header – bnhd-style.css v1.1.0
   Bariatric Nepal
════════════════════════════════════════════ */

/* ── VARIABLES ───────────────────────────── */
.bnhd-wrap {
    width: 100%;
    --bn-primary:   #0d2b5e;
    --bn-primary-d: #091f45;
    --bn-accent:    #2ecc71;
    --bn-accent-d:  #27ae60;
    --bn-white:     #ffffff;
    --bn-text:      #1a1a2e;
    --bn-muted:     #5a6a7a;
    --bn-border:    #e2e8f0;
    --bn-bg:        #ffffff;
    --bn-bg-alt:    #f4f7fb;
    --bn-shadow:    0 2px 20px rgba(13,43,94,.10);
    --bn-radius:    10px;
    --bn-font:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --bn-header-h:  70px;
    font-family: var(--bn-font);
    box-sizing: border-box;
    overflow: visible;

    /* ── ZERO ALL SPACING – shortcode & hook both ── */
    display: block !important;
    margin:  0 !important;
    padding: 0 !important;

    /* Break out of any theme container that has padding/max-width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left:  -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
}
.bnhd-wrap *, .bnhd-wrap *::before, .bnhd-wrap *::after { box-sizing: inherit; }

/* Strip any p/span wrapper WordPress injects around the shortcode */
p:has(> .bnhd-wrap),
p:empty {
    display: block !important;
    margin:  0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size:   0 !important;
    border:      0 !important;
}

/* Common theme content wrappers that may add padding */
.entry-content > .bnhd-wrap,
.post-content  > .bnhd-wrap,
.page-content  > .bnhd-wrap,
.wp-block-group > .bnhd-wrap,
article        > .bnhd-wrap {
    margin:  0 !important;
    padding: 0 !important;
}

.bnhd-icon { display: inline-flex; align-items: center; justify-content: center; }
.bnhd-icon svg { width: 100%; height: 100%; display: block; }

/* ── INNER ────────────────────────────────── */
.bnhd-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── TOP BAR ──────────────────────────────── */
.bnhd-topbar {
    background: var(--bn-primary);
    color: rgba(255,255,255,.85);
    font-size: 13px;
    padding: 7px 0;
}
.bnhd-topbar .bnhd-inner {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.bnhd-topbar-text { flex: 1; }
.bnhd-topbar-cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--bn-accent); font-weight: 600; font-size: 13px;
    text-decoration: none; white-space: nowrap;
    transition: color .15s;
}
.bnhd-topbar-cta:hover { color: #fff; }
.bnhd-topbar-cta .bnhd-icon { width: 14px; height: 14px; }

/* ── MAIN HEADER ──────────────────────────── */
.bnhd-header {
    background: var(--bn-bg);
    height: var(--bn-header-h);
    box-shadow: var(--bn-shadow);
    border-bottom: 1px solid var(--bn-border);
    position: sticky; top: 0;
    z-index: 9990;
    width: 100%;
    overflow: visible;
    margin:  0 !important;
    padding: 0 !important;
}
.bnhd-sticky .bnhd-header {
    animation: bnhd-slide-down .3s ease both;
}
.bnhd-header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 24px;
    overflow: visible;
}
@keyframes bnhd-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ── LOGO ─────────────────────────────────── */
.bnhd-logo {
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
    text-decoration: none; flex-shrink: 0;
    line-height: 1;
}
.bnhd-logo img { display: block; height: auto; max-height: 52px; width: auto; }
.bnhd-logo-text {
    font-size: 20px; font-weight: 800;
    color: var(--bn-primary); letter-spacing: -.3px;
}
.bnhd-logo-tagline {
    font-size: 10px; color: var(--bn-muted);
    font-weight: 500; letter-spacing: .3px;
    margin-top: 2px; text-transform: uppercase;
}

/* ── DESKTOP NAV ──────────────────────────── */
.bnhd-nav { flex: 1; display: flex; justify-content: center; overflow: visible; }

.bnhd-menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center;
    gap: 2px;
}

.bnhd-menu-item { position: relative; overflow: visible; }

.bnhd-menu-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px;
    font-size: 14px; font-weight: 600;
    color: var(--bn-text);
    text-decoration: none; border-radius: 8px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.bnhd-menu-link:hover,
.bnhd-active > .bnhd-menu-link {
    background: var(--bn-bg-alt);
    color: var(--bn-primary);
}
.bnhd-active > .bnhd-menu-link { color: var(--bn-accent-d); }

/* Chevron */
.bnhd-chevron {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 2px; margin-top: 1px;
    transition: transform .2s;
}
.bnhd-has-dropdown:hover > .bnhd-menu-link .bnhd-chevron,
.bnhd-has-dropdown:focus-within > .bnhd-menu-link .bnhd-chevron {
    transform: rotate(-180deg);
}

/* Dropdown – portal (appended to body) */
.bnhd-dropdown {
    position: absolute; top: 0; left: 0;
    min-width: 210px;
    background: var(--bn-bg);
    border: 1.5px solid var(--bn-border);
    border-radius: var(--bn-radius);
    box-shadow: 0 8px 32px rgba(13,43,94,.16);
    list-style: none; margin: 0; padding: 6px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 99999;
}
.bnhd-dropdown-portal { position: absolute; }
.bnhd-dropdown-portal.bnhd-dd-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.bnhd-dropdown .bnhd-menu-link {
    padding: 9px 12px; width: 100%;
    font-size: 13px; border-radius: 6px;
    color: var(--bn-text);
}
.bnhd-dropdown .bnhd-menu-link:hover { background: var(--bn-bg-alt); color: var(--bn-primary); }
.bnhd-dropdown .bnhd-has-dropdown > .bnhd-dropdown {
    top: 0; left: 100%; margin-left: 6px;
}

/* ── DESKTOP ACTIONS ──────────────────────── */
.bnhd-actions {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}

.bnhd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 8px;
    font-size: 14px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    transition: background .18s, color .18s, box-shadow .18s, transform .1s;
    cursor: pointer; border: 2px solid transparent;
    font-family: var(--bn-font);
}
.bnhd-btn .bnhd-icon { width: 16px; height: 16px; }
.bnhd-btn:active { transform: scale(.97); }

.bnhd-btn-primary {
    background: var(--bn-accent); color: #fff;
    border-color: var(--bn-accent);
    box-shadow: 0 2px 10px rgba(46,204,113,.25);
}
.bnhd-btn-primary:hover { background: var(--bn-accent-d); border-color: var(--bn-accent-d); }

.bnhd-btn-outline {
    background: transparent; color: var(--bn-primary);
    border-color: var(--bn-primary);
}
.bnhd-btn-outline:hover { background: var(--bn-primary); color: #fff; }

.bnhd-btn-block { width: 100%; justify-content: center; }

/* ── HAMBURGER BUTTON ─────────────────────── */
.bnhd-mob-toggle {
    display: none;
    background: none; border: none;
    cursor: pointer; padding: 6px;
    color: var(--bn-primary);
    border-radius: 8px;
    transition: background .15s;
    margin-left: auto;
    flex-shrink: 0;
}
.bnhd-mob-toggle:hover { background: var(--bn-bg-alt); }
.bnhd-mob-toggle .bnhd-icon { width: 26px; height: 26px; display: flex; }
.bnhd-mob-toggle-close { display: none; }
.bnhd-mob-toggle[aria-expanded="true"] .bnhd-mob-toggle-open  { display: none; }
.bnhd-mob-toggle[aria-expanded="true"] .bnhd-mob-toggle-close { display: flex; }

/* ── OFFCANVAS OVERLAY ────────────────────── */
.bnhd-offcanvas {
    display: flex;
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none;
}
.bnhd-offcanvas[aria-hidden="false"] { pointer-events: auto; }

.bnhd-offcanvas-backdrop {
    position: absolute; inset: 0;
    background: rgba(13,43,94,.55);
    opacity: 0; transition: opacity .3s ease;
    backdrop-filter: blur(2px);
}
.bnhd-offcanvas[aria-hidden="false"] .bnhd-offcanvas-backdrop { opacity: 1; }

/* Panel */
.bnhd-offcanvas-panel {
    position: relative; z-index: 1;
    width: 300px; max-width: 88vw;
    height: 100%; background: var(--bn-bg);
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    box-shadow: 4px 0 32px rgba(13,43,94,.18);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.bnhd-offcanvas[aria-hidden="false"] .bnhd-offcanvas-panel { transform: translateX(0); }

/* 1. Logo + close */
.bnhd-offcanvas-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1.5px solid var(--bn-border);
    flex-shrink: 0;
    background: var(--bn-bg);
}
.bnhd-offcanvas-logo img { max-height: 44px; width: auto; }
.bnhd-offcanvas-close {
    background: none; border: none; cursor: pointer;
    color: var(--bn-muted); padding: 6px;
    border-radius: 8px; transition: background .15s, color .15s;
}
.bnhd-offcanvas-close:hover { background: var(--bn-bg-alt); color: var(--bn-primary); }
.bnhd-offcanvas-close .bnhd-icon { width: 22px; height: 22px; display: flex; }

/* 2. Mobile nav menu */
.bnhd-mob-nav { overflow-y: auto; padding: 10px 0; flex-shrink: 0; }
.bnhd-mob-menu { list-style: none; margin: 0; padding: 0; }
.bnhd-mob-item { border-bottom: 1px solid var(--bn-border); }
.bnhd-mob-item:last-child { border-bottom: none; }
.bnhd-mob-row { display: flex; align-items: center; }
.bnhd-mob-link {
    display: block; flex: 1;
    padding: 14px 20px;
    font-size: 15px; font-weight: 600;
    color: var(--bn-text); text-decoration: none;
    transition: background .15s, color .15s;
}
.bnhd-mob-link:hover,
.bnhd-mob-active > .bnhd-mob-link,
.bnhd-mob-active > .bnhd-mob-row .bnhd-mob-link {
    background: var(--bn-bg-alt); color: var(--bn-primary);
}
.bnhd-mob-expand {
    background: none; border: none; cursor: pointer;
    width: 44px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: var(--bn-muted); flex-shrink: 0;
    border-left: 1px solid var(--bn-border);
    transition: background .15s;
}
.bnhd-mob-expand:hover { background: var(--bn-bg-alt); color: var(--bn-primary); }
.bnhd-mob-expand span {
    display: inline-block; width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .25s;
}
.bnhd-mob-expand[aria-expanded="true"] span { transform: rotate(-180deg); }
.bnhd-mob-submenu {
    list-style: none; margin: 0; padding: 0;
    background: var(--bn-bg-alt);
    border-top: 1px solid var(--bn-border);
}
.bnhd-mob-submenu[hidden] { display: none; }
.bnhd-mob-subitem { border-bottom: 1px solid var(--bn-border); }
.bnhd-mob-subitem:last-child { border-bottom: none; }
.bnhd-mob-subitem .bnhd-mob-link {
    padding: 12px 20px 12px 36px;
    font-size: 14px; font-weight: 500;
    position: relative;
}
.bnhd-mob-subitem .bnhd-mob-link::before {
    content: '›';
    position: absolute; left: 22px;
    color: var(--bn-accent); font-size: 16px; font-weight: 700;
}

/* 3 & 4. WhatsApp + Call Me quick-action buttons */
.bnhd-mob-quick-actions {
    padding: 10px 20px 0;
    flex-shrink: 0;
}
.bnhd-mob-quick-actions + .bnhd-mob-quick-actions { padding-top: 8px; }
.bnhd-mob-quick-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; width: 100%;
    padding: 13px 18px; border-radius: 10px;
    font-size: 15px; font-weight: 700;
    text-decoration: none; transition: opacity .15s, transform .1s;
    font-family: var(--bn-font);
}
.bnhd-mob-quick-btn:active { transform: scale(.97); }
.bnhd-mob-quick-btn .bnhd-icon { width: 20px; height: 20px; flex-shrink: 0; }
.bnhd-mob-whatsapp-btn { background: #25d366; color: #fff; }
.bnhd-mob-whatsapp-btn:hover { opacity: .88; }
.bnhd-mob-call-btn {
    background: transparent; color: var(--bn-primary);
    border: 2px solid var(--bn-primary);
}
.bnhd-mob-call-btn:hover { background: var(--bn-primary); color: #fff; }

/* 5. Social 2×2 grid */
.bnhd-offcanvas-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 20px 28px;
    border-top: 1.5px solid var(--bn-border);
    margin-top: 14px;
    flex-shrink: 0;
}
.bnhd-social-grid-item {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 6px;
    padding: 14px 10px;
    border-radius: 12px;
    color: #fff; text-decoration: none;
    font-size: 12px; font-weight: 600;
    font-family: var(--bn-font);
    transition: opacity .15s, transform .15s;
}
.bnhd-social-grid-item:hover { opacity: .88; transform: translateY(-2px); }
.bnhd-social-grid-item .bnhd-icon { width: 26px; height: 26px; }
.bnhd-social-facebook  { background: #1877f2; }
.bnhd-social-instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.bnhd-social-youtube   { background: #ff0000; }
.bnhd-social-tiktok    { background: #010101; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width: 960px) {
    .bnhd-nav     { display: none; }
    .bnhd-actions { display: none; }
    .bnhd-mob-toggle { display: flex; }
}
@media (max-width: 480px) {
    .bnhd-topbar { display: none; }
    .bnhd-inner  { padding: 0 12px; }
}