/* ==========================================================================
   Cloud India Hub — header
   File: public/frontend/css/cih-header.css
   Load AFTER cih-theme.css.

   WHY THE HEADER LOOKS GREY ON MOBILE
   -----------------------------------
   menu-css/web-menu-response.css:227 sets, inside a media query:

       .main-header { background-color: #222222; }

   and .header-upper sits on top of it at rgba(255,255,255,0.75). Seventy-five
   percent white over #222 composites to about #c8c8c8 — a flat mid grey. It is
   not a stray colour anyone picked; it is two rules that were never meant to
   meet. Both are corrected below rather than patched over with a third colour.

   Selectors are doubled where needed for the same reason as the other files:
   the original <style> blocks render into the <body>, after this <link> in
   <head>, so equal-specificity rules of theirs win on document order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Surface
   -------------------------------------------------------------------------- */

.main-header.main-header {
    background-color: #fff;
    background-image: none;
    box-shadow: none;
    border-bottom: 1px solid var(--cih-line, #e2dcf4);
}

.main-header.main-header .header-upper {
    /* Was rgba(255,255,255,0.75) over #222. Opaque, so nothing composites.
       !important because web-menu.css:837 sets `background-color: inherit
       !important` in this area — specificity alone does not win against it. */
    background-color: #fff !important;
    background-image: none;
    position: sticky;
    top: 0;
    z-index: 999;
}

.main-header.main-header .inner-container,
.main-header.main-header .header-upper .container {
    background: transparent;
}

/* A hairline of the TLD spectrum along the bottom edge. One 3px detail
   carries the brand without adding another coloured block. */
.main-header.main-header::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--cih-tld-in, #c81e6b) 0%,
        var(--cih-tld-coin, #7c3aed) 25%,
        var(--cih-tld-com, #4338ca) 50%,
        var(--cih-tld-xyz, #0e7490) 75%,
        var(--cih-tld-shop, #c2410c) 100%
    );
}

/* --------------------------------------------------------------------------
   2. Logo
   -------------------------------------------------------------------------- */

.main-header.main-header .logo-box,
.main-header.main-header .logo {
    display: flex;
    align-items: center;
}

.main-header.main-header .logo img {
    max-height: 46px;
    width: auto;
    height: auto;
}

/* --------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */

.main-header.main-header .main-menu .navigation > li > a {
    font-family: var(--cih-font, inherit);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--cih-ink, #150e2e);
    padding: 0.65rem 0.9rem;
    border-radius: 0.5rem;
    text-transform: none;
    transition: color 0.16s ease, background 0.16s ease;
}

.main-header.main-header .main-menu .navigation > li > a:hover {
    color: var(--cih-brand, #6d28d9);
    background: var(--cih-brand-wash, #ede9fe);
}

/* Current page: a short violet rule under the label, not a filled block. */
.main-header.main-header .main-menu .navigation > li.current > a,
.main-header.main-header .main-menu .navigation > li.current-menu-item > a {
    color: var(--cih-brand, #6d28d9);
    background: transparent;
    position: relative;
}

.main-header.main-header .main-menu .navigation > li.current > a::after {
    content: '';
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--cih-brand, #6d28d9);
}

/* Dropdown panels */
.main-header.main-header .main-menu .navigation > li > ul,
.main-header.main-header .main-menu .navigation > li > .megamenu {
    border: 1px solid var(--cih-line, #e2dcf4);
    border-radius: 0.85rem;
    box-shadow: 0 18px 44px rgba(21, 14, 46, 0.12);
    padding: 0.5rem;
    background: #fff;
}

.main-header.main-header .main-menu .navigation > li > ul > li > a {
    font-family: var(--cih-font, inherit);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cih-muted, #5f5680);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 0;
}

.main-header.main-header .main-menu .navigation > li > ul > li > a:hover {
    color: var(--cih-brand-deep, #4c1d95);
    background: var(--cih-brand-wash, #ede9fe);
}

/* --------------------------------------------------------------------------
   4. Language select — a pill, not a raw OS control
   -------------------------------------------------------------------------- */

.main-header.main-header .header-select select,
.main-header.main-header select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--cih-font, inherit);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cih-ink, #150e2e);
    background-color: #fff;
    border: 1px solid var(--cih-line, #e2dcf4);
    border-radius: 999px;
    min-height: 44px;
    padding: 0 2.1rem 0 1rem;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    /* Chevron drawn in CSS — no extra image request. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--cih-muted, #5f5680) 50%),
        linear-gradient(135deg, var(--cih-muted, #5f5680) 50%, transparent 50%);
    background-position: right 1.1rem center, right 0.75rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.main-header.main-header select:hover {
    border-color: var(--cih-brand, #6d28d9);
}

.main-header.main-header select:focus-visible {
    outline: 3px solid var(--cih-ring, rgba(109, 40, 217, 0.3));
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Log in / account
   -------------------------------------------------------------------------- */

.main-header.main-header .user-profile,
.main-header.main-header .user-profile-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--cih-font, inherit);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: #fff;
    background: linear-gradient(135deg, var(--cih-brand-lift, #8b5cf6) 0%, var(--cih-brand, #6d28d9) 55%, var(--cih-brand-deep, #4c1d95) 100%);
    border: 0;
    border-radius: 999px;
    min-height: 44px;
    padding: 0 1.35rem;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.24);
    transition: filter 0.15s ease, transform 0.12s ease;
}

/* The label sits in a child element with its own colour, so white has to be
   pushed down rather than just set on the pill. */
.main-header.main-header .user-profile *,
.main-header.main-header .user-profile-inner * {
    color: #fff;
}

.main-header.main-header .user-profile:hover { filter: brightness(1.08); }
.main-header.main-header .user-profile:active { transform: translateY(1px); }

.main-header.main-header .user-profile svg,
.main-header.main-header .user-profile img,
.main-header.main-header .user-profile i {
    color: #fff;
    fill: currentColor;
    max-height: 20px;
    width: auto;
}

/* --------------------------------------------------------------------------
   6. Spacing
   -------------------------------------------------------------------------- */

.main-header.main-header .nav-outer {
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
}

.main-header.main-header .header-select,
.main-header.main-header .user-profile-container {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   6b. Desktop row — one line, not three
   --------------------------------------------------------------------------
   header1.blade.php puts `margin-right: 200px` inline on .main-menu. Inside an
   817px .nav-outer that leaves 44px for the language select, cart, login and
   account, so the row wrapped and the header grew to 214px tall. */

@media (min-width: 1025px) {
    /* .container is display:block here too, and .logo-box is floated, so the
       logo sat on its own line above the nav. Same one-row treatment as
       mobile. */
    .main-header.main-header .header-upper .container,
    .main-header.main-header .inner-container {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .main-header.main-header .logo-box {
        flex: 0 0 auto;
        float: none;
        margin: 0;
    }

    /* display:flex is set here, not just flex-wrap — in the current
       header1.blade.php .nav-outer computes to `block` at desktop, so its
       children stacked and flex-wrap had nothing to act on. */
    .main-header.main-header .nav-outer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .main-header.main-header .nav-outer .main-menu {
        margin-right: 1.25rem !important;
        min-width: 0;
    }

    /* A floor, or it collapses to a bare chevron once it is allowed to shrink. */
    .main-header.main-header .header-select select { min-width: 118px; }
}

/* --------------------------------------------------------------------------
   7. Mobile — this is where the grey came from
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Overrides web-menu-response.css:227, which sets #222222 here.
       Every wrapper in the header subtree is covered, because the grey is a
       composite: rgba(255,255,255,0.75) sitting on a dark parent. Whitening
       only one of the two layers leaves the grey behind. */
    .main-header.main-header *:not(select):not(button):not(a):not(svg):not(path):not(img) {
        background-color: transparent;
    }

    .main-header.main-header,
    .main-header.main-header > *,
    .main-header.main-header .header-upper,
    .main-header.main-header .header-upper > *,
    .main-header.main-header .sticky-header {
        background-color: #fff !important;
        background-image: none !important;
    }

    .main-header.main-header,
    .main-header.main-header .header-upper,
    .main-header.main-header .inner-container,
    .main-header.main-header .container,
    .main-header.main-header .nav-outer {
        background-color: #fff !important;
        background-image: none !important;
    }

    .main-header.main-header .main-menu .navigation > li > a {
        color: var(--cih-ink, #150e2e);
    }

    .main-header.main-header .logo img { max-height: 34px; }

    /* One row: logo left, actions right. The stock mobile header dropped the
       logo entirely and stacked the language select, Log in and hamburger
       across two cramped rows. */
    .main-header.main-header .header-upper .container,
    .main-header.main-header .inner-container {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        min-height: 62px;
        padding-inline: 0.9rem !important;
    }

    /* web-menu-response.css:217 gives .logo-box width:100% and centres it,
       and .nav-outer width:100% too — so the logo and the controls each take a
       full row and stack. That is why the mobile header was two rows tall with
       the logo pushed out of view. */
    .main-header.main-header .header-upper .logo-box,
    .main-header.main-header .logo-box {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        text-align: left !important;
        float: none !important;
    }

    .main-header.main-header .logo { margin: 0 !important; }

    .main-header.main-header .logo img,
    .main-header.main-header #logo-img {
        /* The markup sets width:110px inline. */
        width: auto !important;
        max-height: 34px;
    }

    .main-header.main-header .logo-box .logo,
    .main-header.main-header .logo-box a { display: block; }

    .main-header.main-header .nav-outer {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap !important;
        gap: 0.4rem;
        min-width: 0;
        width: auto !important;
        padding: 0 !important;
    }

    /* The desktop menu lives in the drawer at this width. */
    .main-header.main-header .nav-outer .main-menu { display: none !important; }

    /* Reference order: language, cart, account, menu. The cart is inserted
       before .mobile-nav-toggler in the markup, which is first in .nav-outer,
       so source order alone put it against the logo. */
    .main-header.main-header .header-select        { order: 1; }
    .main-header.main-header .cih-cart             { order: 2; }
    .main-header.main-header .user-profile-container { order: 3; }
    .main-header.main-header .mobile-nav-toggler   { order: 4; }

    /* Must be allowed to shrink. As `flex: 0 0 auto` these overflowed
       .nav-outer at 320px and the select spilled left across the logo. */
    .main-header.main-header .header-select,
    .main-header.main-header .user-profile-container {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 !important;
        width: auto !important;
    }

    /* A floor, not zero. With min-width:0 alone the select shrank to a bare
       chevron at 320px, which is worse than a truncated label. */
    .main-header.main-header .header-select select { min-width: 64px; }

    .main-header.main-header select {
        min-height: 40px;
        font-size: 0.8125rem;
        padding: 0 1.9rem 0 0.85rem;
    }

    .main-header.main-header .user-profile {
        min-height: 40px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
}

/* Cart, matching the reference. */
.main-header.main-header .cih-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 0.6rem;
    color: var(--cih-ink, #150e2e);
    text-decoration: none;
}

.main-header.main-header .cih-cart:hover {
    color: var(--cih-brand, #6d28d9);
    background: var(--cih-brand-wash, #ede9fe);
}

@media (max-width: 460px) {
    .main-header.main-header .cih-cart { width: 38px; height: 38px; }
}

/* Hamburger. Scoped to the breakpoint where it is actually shown — styling it
   unconditionally drew a bordered 44px box next to the logo on desktop. */
@media (max-width: 1024px) {
    .main-header.main-header .mobile-nav-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 0.6rem;
        border: 1px solid var(--cih-line, #e2dcf4);
        background: #fff;
        color: var(--cih-ink, #150e2e);
    }

    .main-header.main-header .mobile-nav-toggler:hover {
        border-color: var(--cih-brand, #6d28d9);
        color: var(--cih-brand, #6d28d9);
    }
}

/* Off-canvas drawer */
.mobile-menu .menu-backdrop { background: rgba(21, 14, 46, 0.55); }

.mobile-menu .menu-box {
    background: #fff;
    border-left: 1px solid var(--cih-line, #e2dcf4);
}

.mobile-menu .navigation li > a {
    font-family: var(--cih-font, inherit);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cih-ink, #150e2e);
    border-bottom: 1px solid var(--cih-line, #e2dcf4);
    padding: 0.9rem 1.25rem;
}

.mobile-menu .navigation li > a:hover {
    color: var(--cih-brand, #6d28d9);
    background: var(--cih-brand-wash, #ede9fe);
}

/* Narrow phones: the language selector becomes a compact code so the row
   still fits. It is not hidden — the control and its options are unchanged. */
@media (max-width: 460px) {
    .main-header.main-header .logo img { max-height: 30px; }

    /* Wide enough for "US English" at this size — 78px truncated it to
       "US E", which reads as broken rather than compact. */
    .main-header.main-header select {
        min-height: 38px;
        max-width: 108px;
        font-size: 0.75rem;
        padding: 0 1.4rem 0 0.6rem;
        background-position: right 0.7rem center, right 0.45rem center;
    }

    .main-header.main-header .user-profile {
        min-height: 38px;
        padding: 0 0.75rem;
        font-size: 0.8125rem;
    }

    .main-header.main-header .mobile-nav-toggler { width: 38px; height: 38px; }
}

/* Only on the narrowest phones does the row actually need the label gone. */
@media (max-width: 380px) {
    .main-header.main-header .user-profile span { display: none; }
    .main-header.main-header .user-profile { padding: 0 0.7rem; }

    /* Truncates to "US En". Truncation is cosmetic; the overlap it replaces
       was not. The control and all its options are unchanged. */
    .main-header.main-header select {
        min-width: 64px;
        max-width: 76px;
        font-size: 0.7rem;
        padding: 0 1.25rem 0 0.5rem;
        background-position: right 0.6rem center, right 0.4rem center;
    }

    .main-header.main-header .logo img { max-height: 26px; }

    .main-header.main-header .header-upper .container,
    .main-header.main-header .inner-container { gap: 0.35rem; padding-inline: 0.7rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .main-header.main-header .user-profile,
    .main-header.main-header .main-menu .navigation > li > a { transition: none; }
    .main-header.main-header .user-profile:active { transform: none; }
}
