/* ============================================================
   Lalsot site shell — design tokens + navbar + footer.
   Loaded globally via _Layout.cshtml.
   Palette: Rajasthani maroon, saffron, gold, cream.
   ============================================================ */

:root {
    /* Rajasthani palette */
    --bm-maroon:        #8B1A1A;
    --bm-maroon-dark:   #5C0F0F;
    --bm-saffron:       #E8861A;
    --bm-saffron-soft:  #F5A742;
    --bm-gold:          #C9A227;
    --bm-cream:         #FFF8EC;
    --bm-cream-2:       #FBEFD7;

    /* Neutral system */
    --bm-bg:            #FBF6EC;
    --bm-surface:       #ffffff;
    --bm-ink:           #2C1810;
    --bm-ink-soft:      #4B3A2F;
    --bm-mute:          #7A6A5E;
    --bm-faint:         #B4A698;
    --bm-line:          #E8DBC4;
    --bm-line-2:        #F2E6CE;

    /* Accent aliases (legacy compatibility) */
    --bm-accent:        var(--bm-maroon);
    --bm-accent-2:      var(--bm-maroon-dark);
    --bm-accent-tint:   #FBEFD7;

    --bm-radius:        12px;
    --bm-radius-sm:     8px;
    --bm-nav-h:         72px;

    --bm-shadow-sm:     0 4px 12px rgba(92, 15, 15, .06);
    --bm-shadow:        0 14px 32px rgba(92, 15, 15, .10);
    --bm-shadow-lg:     0 24px 48px rgba(92, 15, 15, .16);
}

/* ---------- Body base (only applies to .bm-site) ---------- */
body.bm-site {
    background: var(--bm-bg);
    color: var(--bm-ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ============================================================
   Navbar
   ============================================================ */
.bm-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 248, 236, .85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.bm-nav::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--bm-maroon) 0%,
        var(--bm-saffron) 35%,
        var(--bm-gold) 65%,
        var(--bm-maroon) 100%);
    background-size: 200% 100%;
    animation: bm-stripe 12s linear infinite;
}
@keyframes bm-stripe {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.bm-nav.is-scrolled {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--bm-line);
    box-shadow: 0 4px 24px rgba(92, 15, 15, .06);
}

.bm-nav__inner {
    max-width: 1280px;
    margin: 0 auto;
    height: var(--bm-nav-h);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bm-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--bm-ink);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -.02em;
    transition: opacity .15s ease;
}
.bm-nav__brand:hover { opacity: .85; }
.bm-nav__brand img {
    height: 42px;
    width: auto;
    display: block;
}
.bm-nav__brand::after {
    content: "Lalsot";
    background: linear-gradient(135deg, var(--bm-maroon), var(--bm-saffron));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -.01em;
}
.bm-nav__brand img + ::after { display: none; }
.bm-nav__brand:has(img)::after { display: none; }

.bm-nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bm-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--bm-ink-soft);
    text-decoration: none;
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .2s ease, background .2s ease;
}
.bm-nav__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%) scaleX(0);
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--bm-saffron), var(--bm-maroon));
    border-radius: 2px;
    transition: transform .25s ease;
}
.bm-nav__link:hover {
    color: var(--bm-maroon);
    background: rgba(232, 134, 26, .08);
}
.bm-nav__link:hover::after,
.bm-nav__link.is-active::after { transform: translateX(-50%) scaleX(1); }
.bm-nav__link.is-active {
    color: var(--bm-maroon);
    font-weight: 700;
}

.bm-nav__cta {
    margin-left: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, var(--bm-maroon), var(--bm-maroon-dark));
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 8px 20px rgba(139, 26, 26, .25);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.bm-nav__cta:hover {
    background: linear-gradient(135deg, var(--bm-saffron), var(--bm-maroon));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(139, 26, 26, .32);
}

/* Mobile menu button */
.bm-nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--bm-line);
    border-radius: 10px;
    padding: 9px 11px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s, background .15s;
}
.bm-nav__toggle:hover {
    border-color: var(--bm-maroon);
    background: rgba(232, 134, 26, .06);
}
.bm-nav__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--bm-maroon);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.bm-nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.bm-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bm-nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ============================================================
   Footer
   ============================================================ */
.bm-footer {
    margin-top: 0;
    position: relative;
    background:
        radial-gradient(60% 80% at 0% 0%, rgba(232, 134, 26, .10), transparent 60%),
        radial-gradient(60% 80% at 100% 100%, rgba(201, 162, 39, .10), transparent 60%),
        linear-gradient(180deg, var(--bm-cream) 0%, var(--bm-cream-2) 100%);
    color: var(--bm-ink-soft);
    overflow: hidden;
}
.bm-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--bm-maroon),
        var(--bm-saffron),
        var(--bm-gold),
        var(--bm-saffron),
        var(--bm-maroon));
}
.bm-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 28px, rgba(92, 15, 15, .025) 28px 29px);
    pointer-events: none;
}

.bm-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 72px 28px 48px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 56px;
}

.bm-footer__brand {
    /* Centre everything inside the brand column — the logo image, the tag pill
       and the descriptive paragraph all sit under one another, all centred. */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bm-footer__brand img {
    max-width: 100%;
    max-height: 110px;
    height: auto;
    width: auto;
    margin: 0 auto 20px;
    display: block;
}
.bm-footer__brand p {
    margin: 0 auto 20px;
    font-size: .96rem;
    line-height: 1.7;
    color: var(--bm-ink-soft);
    max-width: 380px;
}
.bm-footer__brand .bm-footer__tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(232, 134, 26, .14);
    border: 1px solid rgba(232, 134, 26, .45);
    color: var(--bm-maroon);
}

.bm-footer__col h4 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--bm-maroon);
    margin: 0 0 18px;
    position: relative;
    padding-bottom: 10px;
}
.bm-footer__col h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 2px;
    background: linear-gradient(90deg, var(--bm-saffron), var(--bm-gold));
    border-radius: 2px;
}
.bm-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bm-footer__col a {
    color: var(--bm-ink-soft);
    text-decoration: none;
    font-size: .94rem;
    position: relative;
    padding-left: 0;
    transition: color .2s ease, padding-left .2s ease;
}
.bm-footer__col a::before {
    content: "›";
    position: absolute;
    left: -14px;
    opacity: 0;
    color: var(--bm-saffron);
    transition: opacity .2s ease, left .2s ease;
}
.bm-footer__col a:hover {
    color: var(--bm-maroon);
    padding-left: 14px;
}
.bm-footer__col a:hover::before {
    opacity: 1;
    left: 0;
}

.bm-footer__bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(92, 15, 15, .12);
    padding: 20px 28px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .86rem;
    color: var(--bm-mute);
}
.bm-footer__bottom a {
    color: var(--bm-ink-soft);
    text-decoration: none;
    transition: color .15s;
}
.bm-footer__bottom a:hover { color: var(--bm-maroon); }
.bm-footer__legal {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
/* Navbar collapses to burger at 1024px because the inline menu now has
   Home + Blogs + 5 category links + CTA — between 900px and 1100px the
   desktop row would otherwise crowd and wrap. Footer keeps the 900px
   breakpoint below. */
@media (max-width: 1024px) {
    .bm-nav__toggle { display: inline-flex; }
    .bm-nav__menu {
        position: fixed;
        inset: var(--bm-nav-h) 0 auto 0;
        background: rgba(255, 248, 236, .98);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--bm-line);
        flex-direction: column;
        align-items: stretch;
        padding: 20px 24px 24px;
        gap: 4px;
        max-height: calc(100vh - var(--bm-nav-h));
        overflow-y: auto;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: transform .25s ease, opacity .2s ease, visibility .2s;
        box-shadow: 0 18px 40px rgba(92, 15, 15, .12);
    }
    .bm-nav__menu.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .bm-nav__link {
        padding: 14px 16px;
        font-size: 1.02rem;
        border-radius: 10px;
        justify-content: flex-start;
    }
    .bm-nav__link::after { display: none; }
    .bm-nav__link.is-active { background: rgba(232, 134, 26, .12); }

    .bm-nav__cta {
        margin: 10px 0 0;
        text-align: center;
        padding: 14px 18px;
        justify-content: center;
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .bm-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 56px 24px 36px;
    }
    .bm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .bm-nav__inner { padding: 0 18px; }
    .bm-footer__inner { grid-template-columns: 1fr; gap: 32px; }
    .bm-footer__bottom {
        justify-content: center;
        text-align: center;
        padding: 18px 18px;
    }
}