/* ==========================================================================
   Header / Navigation — Alkemico Pakistan
   Layout: logo (left) — nav (left, next to logo) — social icons + CTA button (right)
   ========================================================================== */

.site-header,
.site-header * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.site-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
    background: var(--color-primary-light, #E3F2FD);
    border-bottom-color: rgba(21, 101, 192, 0.15);
    box-shadow: 0 2px 10px rgba(11, 31, 58, 0.08);
}

.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Left group: logo + nav sit together */
.site-header__left {
    display: flex;
    align-items: center;
    gap: 40px;
    min-width: 0;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.site-header__logo-img {
    height: 36px;
    width: auto;
    display: block;
}

.site-header__logo-text {
    font-size: 26px;
    font-weight: 700;
    color: #1e90ff;
    letter-spacing: -0.5px;
}

.site-header__nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
}

.site-header__nav-link {
    color: #6c757d;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.site-header__nav-link:hover,
.site-header__nav-link:focus {
    color: #212529;
}

.site-header__nav-link.is-active {
    color: #212529;
    font-weight: 600;
}

/* Browse-only "Products" label — not a link, just the dropdown's name;
   no pointer cursor and no hover-darken, so it doesn't look clickable. */
.site-header__nav-link--static {
    cursor: default;
}
.site-header__nav-link--static:hover,
.site-header__nav-link--static:focus {
    color: #6c757d;
}
.site-header__nav-link--static.is-active {
    color: #212529;
}

/* Right group: social icons + CTA button */
.site-header__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.site-header__social {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.site-header__social-link {
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-header__social-link:hover,
.site-header__social-link:focus {
    color: #ffffff;
}

/* Per-network brand colors — always on, not just hover — matched to the
   call button's box treatment (border, radius, size) */
.site-header__social-link--facebook {
    color: #1877F2;
    border-color: #1877F2;
    background: #E7F0FE;
}

.site-header__social-link--facebook:hover,
.site-header__social-link--facebook:focus {
    background: #1877F2;
    color: #ffffff;
}

.site-header__social-link--instagram {
    color: #E1306C;
    border-color: #E1306C;
    background: #FCE8EF;
}

.site-header__social-link--instagram:hover,
.site-header__social-link--instagram:focus {
    background: #E1306C;
    color: #ffffff;
}

.site-header__social-link svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* Call icon button — brand blue, always on */
.site-header__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-primary, #1565C0);
    border-radius: 6px;
    background: var(--color-primary-light, #E3F2FD);
    color: var(--color-primary, #1565C0);
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-header__call:hover,
.site-header__call:focus {
    background: var(--color-primary, #1565C0);
    border-color: var(--color-primary, #1565C0);
    color: #ffffff;
}

.site-header__call svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* CTA button — WhatsApp order link, icon-only, filled in WhatsApp green.
   Extra left/right padding (vs. the plain 38x38 icon boxes) so it stands
   out as the primary action rather than blending in with the rest. */
.site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border: 1.5px solid #25D366;
    border-radius: 6px;
    background: #25D366;
    color: #ffffff;
    flex-shrink: 0;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.site-header__cta:hover,
.site-header__cta:focus {
    background: #1DA851;
    border-color: #1DA851;
    color: #ffffff;
}

.site-header__cta svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Mobile toggle button (hidden on desktop) */
.site-header__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 0;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-header__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #212529;
    position: relative;
    transition: background 0.2s ease;
}

.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #212529;
    transition: transform 0.2s ease, top 0.2s ease;
}

.site-header__toggle-bar::before { top: -7px; }
.site-header__toggle-bar::after  { top: 7px; }

.site-header.is-open .site-header__toggle-bar {
    background: transparent;
}

.site-header.is-open .site-header__toggle-bar::before {
    top: 0;
    transform: rotate(45deg);
}

.site-header.is-open .site-header__toggle-bar::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width: 900px) {
    .site-header__left {
        gap: 24px;
    }

    .site-header__nav-list {
        gap: 16px;
    }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 768px) {
    .site-header__inner {
        height: 64px;
        position: relative;
    }

    .site-header__logo-img {
        height: 28px;
    }

    .site-header__logo-text {
        font-size: 22px;
    }

    /* Only logo stays inline on the left; nav becomes a dropdown */
    .site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid #e9ecef;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .site-header.is-open .site-header__nav {
        /* Was a fixed 400px, which clipped the whole mobile menu once the
           Products dropdown was opened and the full 8-product list plus
           "Shop All Products" pushed past that height. Generously large
           instead of viewport-based — no internal scrollbar, the menu
           just fully expands and the page scrolls if needed. */
        max-height: 2000px;
    }

    .site-header__nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px 24px 16px;
    }

    .site-header__nav-list li {
        width: 100%;
    }

    .site-header__nav-link {
        display: block;
        padding: 12px 0;
        width: 100%;
        border-bottom: 1px solid #f1f3f5;
        font-size: 16px;
    }

    .site-header__toggle {
        display: flex;
    }

    .site-header__right {
        gap: 14px;
    }

    .site-header__cta {
        height: 34px;
        padding: 0 14px;
    }

    .site-header__call {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 480px) {
    .site-header__social {
        display: none;
    }

    .site-header__inner {
        padding: 0 16px;
    }
}

@media (max-width: 380px) {
    /* Header gets too tight for call icon + WhatsApp CTA + hamburger together */
    .site-header__call {
        display: none;
    }
}

/* ==========================================================================
   Products nav dropdown — opens on hover (and keyboard focus) on desktop;
   falls back to click/tap on mobile, where hover doesn't exist and the
   dropdown becomes an inline expanding list instead (see the mobile
   media query below). New block: no existing nav component handles a
   submenu.
   ========================================================================== */
.site-header__nav-item--dropdown {
    position: relative;
}

/* A small gap between the link and the panel is still part of the
   hoverable area, so moving the mouse from the link down into the
   dropdown doesn't close it. */
.site-header__nav-item--dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.site-header__nav-link-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.site-header__nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #6c757d;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.site-header__nav-dropdown-toggle:hover,
.site-header__nav-dropdown-toggle:focus {
    color: #212529;
    background: #f1f3f5;
}

.site-header__nav-dropdown-toggle svg {
    width: 15px;
    height: 15px;
    display: block;
    transition: transform 0.2s ease;
}

.site-header__nav-item--dropdown.is-open .site-header__nav-dropdown-toggle svg,
.site-header__nav-item--dropdown:hover .site-header__nav-dropdown-toggle svg,
.site-header__nav-item--dropdown:focus-within .site-header__nav-dropdown-toggle svg {
    transform: rotate(180deg);
}

.site-header__nav-dropdown {
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 280px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1001;
}

.site-header__nav-item--dropdown.is-open .site-header__nav-dropdown,
.site-header__nav-item--dropdown:hover .site-header__nav-dropdown,
.site-header__nav-item--dropdown:focus-within .site-header__nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-header__nav-dropdown-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #212529;
    font-size: 14.5px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.site-header__nav-dropdown-link:hover,
.site-header__nav-dropdown-link:focus {
    background: #f1f3f5;
}

.site-header__nav-dropdown-name {
    flex-shrink: 0;
}

.site-header__nav-dropdown-type {
    color: #6c757d;
    font-weight: 500;
    font-size: 13px;
    text-align: right;
}

.site-header__nav-dropdown-link--all {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f5;
    justify-content: center;
    color: var(--color-primary, #1565C0);
}

/* ==========================================================================
   Responsive — the dropdown becomes an inline expanding list inside the
   mobile nav, not a floating panel
   ========================================================================== */
@media (max-width: 768px) {
    .site-header__nav-item--dropdown {
        display: flex;
        flex-direction: column;
    }

    .site-header__nav-link-group {
        width: 100%;
        justify-content: space-between;
        border-bottom: 1px solid #f1f3f5;
    }

    .site-header__nav-link-group .site-header__nav-link {
        border-bottom: none;
    }

    .site-header__nav-dropdown-toggle {
        width: 40px;
        height: 40px;
    }

    .site-header__nav-dropdown {
        position: static;
        min-width: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 4px 0 4px 16px;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .site-header__nav-item--dropdown.is-open .site-header__nav-dropdown {
        /* Was a fixed 480px, which clipped the bottom of the product
           list once the catalog grew past 6 items. A viewport-based cap
           with overflow-y:auto was tried next, but that introduced an
           unwanted inner scrollbar on short viewports. Simplest correct
           fix: a generously large flat cap with no scroll — the list
           just fully expands (the page itself scrolls if needed, same
           as the outer nav panel above). */
        max-height: 2000px;
    }

    .site-header__nav-dropdown-link {
        padding: 10px 8px;
    }
}