/*
    The root site's header (Views/Shared/_SiteHeader.cshtml): the marketplace home page and the information
    pages (About, Contact, Pricing...), so it looks the same on every one of them. Uses the pages'
    --brand-* colours. The footer's logo uses the brand classes too.
*/
.marketplace-header {
    background: #ffffff;
    border-bottom: 1px solid var(--brand-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 76px;
}

.brand-logo-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-badge {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #f26419);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 22px; font-weight: 800;
    box-shadow: 0 4px 12px rgba(242, 100, 25, 0.25);
}
/* The My Thikanas logo image in place of the icon badge. */
.brand-badge.brand-badge-img { background: #fff; padding: 2px; object-fit: contain; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10); }
.brand-text-col { display: flex; flex-direction: column; }
.brand-title { font-size: 21px; font-weight: 800; color: var(--brand-navy); letter-spacing: -0.5px; line-height: 1.1; }
.brand-title span { color: var(--brand-orange); }
.brand-tagline { font-size: 10px; font-weight: 600; color: var(--brand-muted); letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.5; }

.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu a { font-size: 14px; font-weight: 600; color: var(--brand-muted); position: relative; padding: 8px 0; line-height: 1.5; }
.nav-menu a:hover, .nav-menu a.active { color: var(--brand-navy); }
.nav-menu a.active::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px; background: var(--brand-orange); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 16px; }

.marketplace-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    color: var(--brand-navy);
    width: 44px; height: 44px; min-width: 44px;
    padding: 0;
    align-items: center; justify-content: center;
    cursor: pointer; font-size: 26px;
    transition: background 0.15s ease;
}
.marketplace-mobile-toggle:hover { background: #f1f5f9; }

.marketplace-mobile-drawer {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 76px;
    z-index: 99;
}
.marketplace-mobile-drawer.open { display: flex; }
.marketplace-mobile-drawer a {
    padding: 12px 14px; min-height: 44px;
    border-radius: 8px;
    color: var(--brand-navy);
    font-weight: 600; font-size: 15px;
    display: flex; align-items: center; gap: 10px;
}
.marketplace-mobile-drawer a:hover, .marketplace-mobile-drawer a.active { background: var(--brand-bg); color: var(--brand-orange); }
.marketplace-mobile-drawer .btn-orange-cta { color: #ffffff; justify-content: center; margin-top: 8px; }

@media (max-width: 991px) {
    .nav-menu { display: none; }
    .header-actions { gap: 12px; }
    .header-actions .btn-orange-cta { display: none; }
    .marketplace-mobile-toggle { display: inline-flex; }
}

@media (max-width: 480px) {
    .header-inner { height: 64px; }
    .marketplace-mobile-drawer { top: 64px; }
    .brand-badge { width: 38px; height: 38px; min-width: 38px; font-size: 19px; }
    .brand-title { font-size: 18px; }
}