/* ============================================================================
   site-header.css — Ganesh Shirsat Academy top bar + site header.

   Restyles the existing global ContactStrip / Header components to the approved
   academy theme (navy + gold, Playfair display lockup). Loaded LAST so these
   rules win over app.css, without changing any header markup semantics,
   routes, cart/wishlist/search/auth behaviour or the mobile drawer.

   Every selector is anchored to `.contact-strip` or `.header`, which are only
   rendered by MainLayout (public storefront). The admin panel uses AdminLayout
   and is unaffected.
   ============================================================================ */

:root {
    --gsh-navy:       #1C2B4A;
    --gsh-navy-deep:  #0F1A2E;
    --gsh-gold:       #C8A44E;
    --gsh-gold-light: #E8D5A0;
    --gsh-gold-pale:  #F5EDD8;
    --gsh-cream:      #FAF8F3;
    --gsh-border:     #E5E2DB;
    --gsh-muted:      #5A5A6E;
    --gsh-display: 'Playfair Display', Georgia, serif;
}

/* ─── Top bar ─────────────────────────────────────────────────────────────── */
.hjc-app .contact-strip {
    background: var(--gsh-navy-deep);
    color: rgba(255, 255, 255, .7);
    font-size: .8rem;
    letter-spacing: .02em;
    padding: .5rem 0;
    border: 0;
}
.hjc-app .contact-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    /* Only phone + email remain, so keep them flush left — no leftover right-side gap. */
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
}
.hjc-app .contact-strip__phones {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.hjc-app .contact-strip__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s;
}
.hjc-app .contact-strip__item svg { width: 14px; height: 14px; color: var(--gsh-gold); flex-shrink: 0; }
.hjc-app .contact-strip__item:hover { color: #fff; }
.hjc-app .contact-strip__sep { color: rgba(255, 255, 255, .25); }

/* ─── Header shell ────────────────────────────────────────────────────────── */
.hjc-app .header {
    background: #fff;
    border-bottom: 1px solid var(--gsh-border);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
}
.hjc-app .header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* ─── Brand lockup ────────────────────────────────────────────────────────── */
.hjc-app .header__logo {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-shrink: 0;
    text-decoration: none;
    border: 0;
    padding: 0;
}
.hjc-app .header__logo img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
}
.hjc-app .header__lockup { display: flex; flex-direction: column; line-height: 1.15; }
.hjc-app .header__brand {
    font-family: var(--gsh-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gsh-navy);
    letter-spacing: .03em;
    white-space: nowrap;
}
.hjc-app .header__brand-sub {
    font-size: .65rem;
    color: var(--gsh-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    white-space: nowrap;
}

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.hjc-app .header__nav { display: flex; align-items: center; gap: .15rem; }
.hjc-app .header__nav .header__link,
.hjc-app .header__nav a.header__link {
    padding: .5rem .9rem;
    font-size: .85rem;
    font-weight: 500;
    color: #1A1A2E;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    transition: all .2s;
}
.hjc-app .header__nav .header__link:hover,
.hjc-app .header__nav .header__link.active,
.hjc-app .header__nav .header__link.active-nav-link {
    background: var(--gsh-gold-pale);
    color: var(--gsh-navy);
}
.hjc-app .header__link::after { display: none !important; }   /* kill the old underline indicator */
.hjc-app .hnav-caret { color: var(--gsh-muted); font-size: .7em; }

/* ─── Actions ─────────────────────────────────────────────────────────────── */
.hjc-app .header__actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

.hjc-app .header__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gsh-cream);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gsh-muted);
    position: relative;
    transition: all .2s;
}
.hjc-app .header__icon svg { width: 18px; height: 18px; }
.hjc-app .header__icon:hover { background: var(--gsh-gold-pale); color: var(--gsh-navy); }
.hjc-app .header__cart-badge {
    background: var(--gsh-navy);
    color: #fff;
    border: 0;
}

/* Compact gold cart button: icon + dynamic count only (no "My Cart" text). */
.hjc-app .header__mycart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--gsh-gold);
    color: var(--gsh-navy-deep);
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s;
}
.hjc-app .header__mycart:hover { background: #b8943e; }
.hjc-app .header__mycart svg { width: 18px; height: 18px; }
/* Count sits as a badge on the icon so the button stays square. */
.hjc-app .header__mycart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--gsh-navy);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--gsh-gold);
}

/* Auth chips / profile keep working, just re-tinted */
.hjc-app .header__chip {
    background: var(--gsh-navy);
    color: #fff;
    border-radius: 8px;
}
.hjc-app .header__chip:hover { background: var(--gsh-gold); color: var(--gsh-navy-deep); }
.hjc-app .header__login {
    background: var(--gsh-gold);
    color: var(--gsh-navy-deep);
    border: 0;
    border-radius: 8px;
    font-weight: 600;
}
.hjc-app .header__login:hover { background: #b8943e; color: var(--gsh-navy-deep); }
.hjc-app .header__divider { background: var(--gsh-border); }
.hjc-app .header__avatar { background: var(--gsh-navy); }
.hjc-app .header__user-name { color: var(--gsh-navy); }

.hjc-app .header__hamburger span { background: var(--gsh-navy); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hjc-app .header__brand { font-size: 1rem; }
    .hjc-app .header__nav .header__link { padding: .5rem .6rem; }
}
@media (max-width: 900px) {
    .hjc-app .header__nav { display: none; }
    .hjc-app .header__mycart-label { display: none; }
    .hjc-app .header__mycart { padding: .6rem .8rem; }
}
@media (max-width: 620px) {
    .hjc-app .contact-strip__inner { justify-content: center; }
    .hjc-app .header__logo img { width: 44px; height: 44px; }
    .hjc-app .header__brand { font-size: .95rem; }
    .hjc-app .header__brand-sub { font-size: .58rem; letter-spacing: .1em; }
}
@media (max-width: 420px) { /* lockup already hidden at 620 */
    .hjc-app .header__lockup { display: none; }
}

/* ─── Neutralise the legacy floating-pill header from home-premium.css ─────── */
.hjc-app .header {
    padding: 0;
    background: #fff;
    border-bottom: 1px solid var(--gsh-border);
    box-shadow: none;
    backdrop-filter: none;
}
.hjc-app .header::after { display: none; }
.hjc-app .header__inner,
.hjc-app .header.is-scrolled .header__inner {
    position: relative;
    height: auto;
    min-height: 76px;
    border-radius: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: .75rem 1.5rem;
    gap: 1.5rem;
}
.hjc-app .header__inner::before,
.hjc-app .header__inner::after { display: none !important; content: none !important; }
.hjc-app .header.is-scrolled { padding: 0; background: #fff; }

/* Login pill: gold, not the legacy orange gradient */
.hjc-app .header__login {
    background: var(--gsh-gold);
    background-image: none;
    color: var(--gsh-navy-deep);
    box-shadow: none;
    border-radius: 8px;
    font-weight: 600;
}
.hjc-app .header__login:hover { background: #b8943e; background-image: none; color: var(--gsh-navy-deep); }
.hjc-app .header__logo { border: 0; background: transparent; }
.hjc-app .header__logo img { width: 52px; height: 52px; border-radius: 50%; }

/* ─── Guarantee the header never overflows narrow viewports ────────────────── */
.hjc-app .header__inner { flex-wrap: nowrap; }
.hjc-app .header__logo { min-width: 0; }
.hjc-app .header__lockup { min-width: 0; }
.hjc-app .header__brand,
.hjc-app .header__brand-sub { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 620px) {
    .hjc-app .header__inner { gap: .6rem; padding: .6rem 1rem; min-height: 66px; }
    .hjc-app .header__lockup { display: none; }   /* seal + actions only on phones */
    .hjc-app .header__actions { gap: .5rem; }
    .hjc-app .header__icon { width: 36px; height: 36px; }
}

@media (max-width: 620px) {
    /* Login + divider live in the mobile drawer; hide here so the hamburger always fits. */
    .hjc-app .header__login,
    .hjc-app .header__divider { display: none; }
    .hjc-app .header__hamburger { display: inline-flex; flex-shrink: 0; }
}

/* ═══ Desktop fit: the header must never exceed the viewport ═══════════════════
   Three-part rule:
     1. every flex child may shrink (min-width:0) except the fixed-size actions,
     2. the nav is the flexible middle column and may shrink first,
     3. long user names truncate with an ellipsis instead of pushing the row wide.
   No transforms, no negative offsets, no hidden desktop items. */
.hjc-app .header__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    box-sizing: border-box;
    overflow: visible;          /* keep the profile dropdown escapable */
}
.hjc-app .header__logo   { flex: 0 1 auto; min-width: 0; }
.hjc-app .header__nav    { flex: 1 1 auto; min-width: 0; justify-content: center; flex-wrap: nowrap; }
.hjc-app .header__actions{ flex: 0 0 auto; min-width: 0; }

/* Nav links shrink gracefully before anything clips. */
.hjc-app .header__nav .header__link { flex-shrink: 1; min-width: 0; }

/* Search must not claim free space when collapsed. */
.hjc-app .header__search { flex: 0 0 auto; }

/* Compact, non-shrinking action controls. */
.hjc-app .header__icon,
.hjc-app .header__chip,
.hjc-app .header__login,
.hjc-app .header__mycart,
.hjc-app .header__hamburger { flex-shrink: 0; }
.hjc-app .header__chip { padding: .5rem .75rem; white-space: nowrap; }

/* ── Logged-in user trigger: compact + safe truncation ── */
.hjc-app .header__profile { position: relative; min-width: 0; flex-shrink: 1; }
.hjc-app .header__user {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 190px;
    min-width: 0;
    padding: .3rem .55rem;
    overflow: hidden;
}
.hjc-app .header__avatar { flex-shrink: 0; }
.hjc-app .header__user-caret { flex-shrink: 0; }
.hjc-app .header__user-name {
    min-width: 0;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;   /* "Adv. Ganesh B. Shi…" */
    white-space: nowrap;
}

/* ── Profile dropdown: anchored right, always inside the viewport ── */
.hjc-app .header__menu {
    right: 0;
    left: auto;
    min-width: 240px;
    /* Never wider than the space between the trigger's right edge and the screen. */
    max-width: min(280px, calc(100vw - 2rem));
    box-sizing: border-box;
    overflow: hidden;
}
.hjc-app .header__menu-name,
.hjc-app .header__menu-role {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tighter gaps on mid-size desktops so all items stay on one row. */
@media (max-width: 1366px) {
    .hjc-app .header__inner  { gap: 1rem; padding-inline: 1rem; }
    .hjc-app .header__actions{ gap: .55rem; }
    .hjc-app .header__nav .header__link { padding: .5rem .65rem; }
    .hjc-app .header__brand  { font-size: 1.02rem; }
}
@media (max-width: 1280px) {
    .hjc-app .header__inner { gap: .75rem; }
    .hjc-app .header__nav .header__link { padding: .5rem .5rem; font-size: .82rem; }
    .hjc-app .header__user { max-width: 150px; }
    .hjc-app .header__user-name { max-width: 78px; }
    .hjc-app .header__brand-sub { display: none; }   /* keep the brand name, drop the sub-line */
}
@media (max-width: 1100px) {
    .hjc-app .header__user-name { display: none; }   /* avatar + caret only; menu still works */
    .hjc-app .header__user { max-width: none; }
}