/* =========================================================
   Best In Warangal - Brand Styles
   - Replaces the original template's color helper file
   - Logo treatment, wordmark, footer credit
   ========================================================= */

/* Generic helper kept for backward compat with markup */
.bg-white-color { background-color: var(--white-color); }

/* ---------- Brand colors --------------------------------- */
:root {
    --biw-primary: #1f9d55;        /* primary green */
    --biw-primary-dark: #16753d;
    --biw-accent: #f4b400;         /* gold accent */
}

/* ---------- Brand wordmark + logo ------------------------ */
.biw-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    line-height: 1;
}

.biw-brand:hover { text-decoration: none; }

/* Plain logo container — NO ring, NO red border, just the logo */
.biw-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.biw-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.biw-logo.biw-logo-sm { width: 44px; height: 44px; }
.biw-logo.biw-logo-lg { width: 84px; height: 84px; }

/* ---------- Wordmark ------------------------------------- */
.biw-wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    font-family: var(--secondary-font, 'Jost'), sans-serif;
}

.biw-wordmark .biw-word-top {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--biw-primary);
}

.biw-wordmark .biw-word-main {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--heading-color, #212529);
}

.biw-wordmark .biw-word-main span {
    color: var(--biw-primary);
}

/* Inverse mode: light backgrounds inside dark areas (footer) */
.biw-brand--inverse .biw-wordmark .biw-word-main { color: #fff; }
.biw-brand--inverse .biw-wordmark .biw-word-top { color: var(--biw-accent); }

/* ---------- Dark mode ------------------------------------ */
[data-theme="dark"] .biw-wordmark .biw-word-main {
    color: #ffffff;
}
[data-theme="dark"] .biw-wordmark .biw-word-main span {
    color: var(--biw-primary);
}
[data-theme="dark"] .biw-wordmark .biw-word-top {
    color: var(--biw-primary);
}

/* ---------- Footer credit -------------------------------- */
.biw-credit {
    margin: 0;
    font-size: 13px;
    color: var(--grey-color-2, #c7c7c7);
}
.biw-credit a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    transition: color .2s ease, border-color .2s ease;
}
.biw-credit a:hover {
    color: var(--biw-accent);
    border-color: var(--biw-accent);
}

/* ---------- Strip the template's ring decoration ---------
   The original template applied a circular red border + bg
   on every .site-logo a img and .footer-logo a img. We render
   our brand via <BrandLogo> instead, so neutralise those rules. */
.site-logo a img,
.site-logo .biw-brand img,
.footer-logo a img,
.footer-logo .biw-brand img {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Allow the BrandLogo wordmark room in header/footer */
.site-logo,
.footer-bottom .footer-logo {
    max-width: none;
    width: auto;
}
@media (max-width: 992px) {
    .footer-bottom .footer-logo { max-width: none; }
}

/* ---------- Mobile header centring -----------------------
   On small screens, stack: burger | logo (centered) | actions
   Make the mid-header logo perfectly centered, and the bottom
   nav row predictable. */
@media (max-width: 991px) {
    .mid-header .mid-header-wrap {
        flex-wrap: wrap;
        row-gap: 12px;
        justify-content: center;
    }
    .mid-header .mid-header-wrap .mid-header-left,
    .mid-header .mid-header-wrap .mid-header-right {
        display: none; /* social/subscribe collapse on mobile to keep it clean */
    }
    .mid-header .site-logo {
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .biw-brand {
        justify-content: center;
    }
    .biw-logo { width: 64px; height: 64px; }
    .biw-logo.biw-logo-lg { width: 72px; height: 72px; }

    .biw-wordmark .biw-word-main { font-size: 22px; }
    .biw-wordmark .biw-word-top { font-size: 11px; letter-spacing: 2px; }

    /* Sticky nav row: burger left, theme + search right, no random extra burger */
    .bottom-header .navigation-wrapper .navigation-inner {
        align-items: center;
    }
}

@media (max-width: 575px) {
    .biw-logo { width: 56px; height: 56px; }
    .biw-wordmark .biw-word-main { font-size: 20px; }
    .biw-wordmark .biw-word-top { font-size: 10px; letter-spacing: 2px; }
}

/* ---------- Containment for swiper navigation arrows ------
   The template's HeroPost1 places .swiper-arrow absolutely
   relative to the carousel. Keep the post-carousel-wrap a
   positioning context so arrows never bleed across the page. */
.post-carousel-wrap { position: relative; }
.post-carousel { position: relative; overflow: hidden; }

/* ---------- Hide the in-content sidebar "ad" poster -------
   The template originally put a "Posty - Buy Now" poster
   inside content sidebars. We hide it project-wide. */
.poster {
    display: none !important;
}

/* ---------- Hide the secondary "Cta2" magazine ad ---------
   It used a stock template logo and "Buy Now" copy. */
.cta-section.cta-2 {
    display: none !important;
}

/* ---------- Active nav state with brand green underline ---
   The template uses a 2px before-pseudo on .main-menu li a
   to show the active underline. We rely on our Menu.js
   adding .active to the matching <li>. Make the underline
   visibly green (already inherits --primary-color, but the
   default rule has scaleX(0); we ensure the active item
   shows it crisply). */
.main-menu li.active > a {
    color: var(--biw-primary) !important;
}
.main-menu li.active > a:before {
    transform: scaleX(1) !important;
    background-color: var(--biw-primary) !important;
}

/* Mobile menu active item */
.mobile-navigation-menu .main-menu li.active > a {
    color: var(--biw-primary) !important;
}


/* ---------- Mobile header refinements --------------------
   On small screens the original template renders BOTH a
   sidebar trigger (left) and a mobile-menu burger (right)
   with a theme toggle and search icon between them. That
   reads as a row of mystery buttons. Hide the redundant
   sidebar trigger on mobile and let the right-side mobile
   menu icon be the single, obvious nav. */
@media (max-width: 991px) {
    .bottom-header .sidebar-icon { display: none; }
    .bottom-header .navigation-wrapper .navigation-inner {
        justify-content: space-between;
        gap: 12px;
    }
    /* Logo is already in mid-header on mobile, no need twice */
    .bottom-header .site-logo { display: none; }
    .header-right { margin-left: auto; }
}

/* The active underline on the desktop menu sits inside an
   ::before pseudo. Default colour was the (old) primary blue;
   force the brand green. */
.main-menu li > a:before { background-color: var(--biw-primary); }


/* ---------- Hide stray navigation arrows on the home hero
   The HeroPost1 carousel positions its prev/next arrows
   absolutely to the right of the slide, but visually they
   float into the next column. Since the slider only carries
   two duplicated slides anyway, we remove them. Users can
   still swipe / drag. */
.post-carousel .swiper-arrow {
    display: none !important;
}


/* ===========================================================================
   Best In Warangal — Sponsored Ads Hoisting Matrix (Protocol 3)
   <SponsorSlot> renders these. When no promotion is active the component
   returns null, so there is no element and zero vertical space is consumed
   (graceful 0px collapse — editorial sections connect seamlessly).
   ===========================================================================*/
.biw-sponsor {
    display: block;
    margin: 28px auto;
    max-width: 1170px;
    padding: 0 15px;
}
.biw-sponsor-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9aa0a6;
    margin-bottom: 6px;
}
.biw-sponsor-tier {
    font-weight: 700;
    color: var(--biw-accent, #f4b400);
}
.biw-sponsor-link {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.biw-sponsor-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.biw-sponsor-adv {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
}
.biw-sponsor-pixel {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* Tier accent rails */
.biw-sponsor--diamond  .biw-sponsor-link { border-color: rgba(34, 211, 238, 0.55); }
.biw-sponsor--platinum .biw-sponsor-link { border-color: rgba(203, 213, 225, 0.6); }
.biw-sponsor--gold     .biw-sponsor-link { border-color: rgba(244, 180, 0, 0.6); }
.biw-sponsor--silver   .biw-sponsor-link { border-color: rgba(148, 163, 184, 0.5); }
.biw-sponsor--bronze   .biw-sponsor-link { border-color: rgba(205, 127, 50, 0.5); }

html[data-theme="dark"] .biw-sponsor-link { border-color: rgba(255, 255, 255, 0.08); }


/* Article body (markdown-rendered post content) ----------------------- */
.biw-article-body { font-family: var(--reading-font, Georgia, 'Times New Roman', serif); font-size: 18px; line-height: 1.85; color: var(--text-color, #2a2a2a); letter-spacing: -0.003em; }
.biw-article-body h2 { font-family: var(--secondary-font), sans-serif; font-size: 25px; margin: 34px 0 14px; font-weight: 700; letter-spacing: -0.01em; }
.biw-article-body h3 { font-family: var(--secondary-font), sans-serif; font-size: 20px; margin: 26px 0 12px; font-weight: 700; }
.biw-article-body p { margin: 0 0 20px; }
.biw-article-body ul,
.biw-article-body ol { margin: 0 0 20px; padding-left: 22px; }
.biw-article-body li { margin-bottom: 8px; }
.biw-article-body a { color: var(--biw-primary, #1f9d55); text-decoration: underline; }
.biw-article-body blockquote {
    margin: 24px 0; padding: 14px 20px;
    border-left: 4px solid var(--biw-primary, #1f9d55);
    background: rgba(31, 157, 85, 0.06); border-radius: 0 8px 8px 0; font-style: italic;
}
.biw-article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; }
.biw-sponsor--rail { margin: 0 0 30px; padding: 0; max-width: 100%; }
html[data-theme="dark"] .biw-article-body { color: rgba(255, 255, 255, 0.82); }


/* ===========================================================================
   Categories navigation dropdown (desktop + mobile)
   ===========================================================================*/
.biw-nav-dropdown { position: relative; }
.biw-nav-dropdown > a > i { font-size: 12px; margin-left: 3px; transition: transform .2s ease; }
.biw-nav-dropdown:hover > a > i { transform: rotate(180deg); }

.biw-nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 248px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
    padding: 10px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 999;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.biw-nav-dropdown:hover > .biw-nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.biw-nav-submenu li { display: block; margin: 0; }
.biw-nav-submenu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #2a2a2a;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.biw-nav-submenu li a i { color: var(--biw-primary, #1f9d55); font-size: 16px; width: 18px; text-align: center; }
.biw-nav-submenu li a:hover,
.biw-nav-submenu li.active a {
    background: rgba(31, 157, 85, 0.10);
    color: var(--biw-primary, #1f9d55);
}
html[data-theme="dark"] .biw-nav-submenu { background: #15181d; border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .biw-nav-submenu li a { color: rgba(255, 255, 255, 0.85); }

/* Mobile categories accordion */
.biw-mobile-dropdown-toggle {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.biw-mobile-submenu { list-style: none; padding: 6px 0 6px 14px; margin: 6px 0 0; border-left: 2px solid rgba(31, 157, 85, 0.25); }
.biw-mobile-submenu li a { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; }
.biw-mobile-submenu li a i { color: var(--biw-primary, #1f9d55); width: 18px; text-align: center; }

/* Category listing page header */
.biw-category-head { margin-bottom: 34px; }
.biw-category-head h1 { font-size: 30px; font-weight: 800; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.biw-category-head h1 i { color: var(--biw-primary, #1f9d55); }
.biw-category-head p { color: #666; font-size: 15.5px; max-width: 720px; }
html[data-theme="dark"] .biw-category-head p { color: rgba(255, 255, 255, 0.65); }
.categorie-list .list-title i { margin-right: 8px; color: var(--biw-primary, #1f9d55); }
.mt-40 { margin-top: 40px; }


/* ===========================================================================
   BEST IN WARANGAL — v2 editorial polish + new components + mobile fixes
   Design direction: Swiss-modern editorial (clean grid, readable serif body,
   confident hierarchy), layered over the existing template without breaking it.
   ===========================================================================*/

/* --- Post detail: precise timestamp + byline polish ---------------------- */
.biw-post-timestamp {
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.biw-post-timestamp i { color: var(--biw-primary, #1f9d55); }
.biw-post-timestamp .biw-post-updated { color: #9aa0a6; }
html[data-theme="dark"] .biw-post-timestamp { color: rgba(255,255,255,0.6); }

/* --- Legal pages (privacy / disclaimer) ---------------------------------- */
.biw-legal { max-width: 820px; margin: 0 auto; }
.biw-legal h1 { font-size: 34px; font-weight: 800; margin-bottom: 6px; }
.biw-legal-meta { color: #9aa0a6; font-size: 13px; margin-bottom: 26px; }
.biw-legal h2 { font-size: 21px; margin: 30px 0 12px; font-weight: 700; }
.biw-legal ul { padding-left: 20px; }
.biw-legal li { margin-bottom: 9px; }

/* --- Author / newsroom page ---------------------------------------------- */
.biw-author-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 34px;
}
.biw-author-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, #eaeaea);
    border-radius: 12px;
    transition: box-shadow .2s ease, transform .2s ease;
    background: #fff;
}
.biw-author-chip:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
.biw-author-chip img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.biw-author-chip strong { display: block; font-size: 14px; color: var(--heading-color, #1a1a1a); }
.biw-author-chip small { color: #8a8f98; font-size: 12px; }
html[data-theme="dark"] .biw-author-chip { background: #15181d; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .biw-author-chip strong { color: #fff; }

.biw-dev-credit {
    border: 1px solid var(--border-color, #eaeaea);
    border-radius: 14px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(31,157,85,0.05), transparent);
}
.biw-dev-credit h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.biw-dev-credit p { font-size: 13.5px; color: #5f6570; line-height: 1.7; margin-bottom: 14px; }
html[data-theme="dark"] .biw-dev-credit { border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .biw-dev-credit p { color: rgba(255,255,255,0.7); }

/* --- Footer categories list ---------------------------------------------- */
.biw-footer-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.biw-footer-cats li a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; opacity: .85; }
.biw-footer-cats li a:hover { opacity: 1; color: var(--biw-accent, #f4b400); }
.biw-footer-cats li a i { font-size: 15px; }

/* --- Search: popup suggestions ------------------------------------------- */
.biw-search-popup-form { position: relative; width: 100%; }
.biw-search-suggest {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 10px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
    padding: 8px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 50;
}
.biw-search-suggest-item,
.biw-search-suggest-all {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: 0;
    background: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease;
}
.biw-search-suggest-item:hover,
.biw-search-suggest-all:hover { background: rgba(31,157,85,0.08); }
.biw-search-suggest-item img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.biw-search-suggest-item strong { display: block; font-size: 14px; color: #1a1a1a; line-height: 1.3; }
.biw-search-suggest-item small { color: var(--biw-primary, #1f9d55); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.biw-search-suggest-all { justify-content: center; font-weight: 600; color: var(--biw-primary, #1f9d55); font-size: 13.5px; }
.biw-search-suggest-empty { padding: 16px; text-align: center; color: #8a8f98; font-size: 13.5px; }

/* --- Search results page ------------------------------------------------- */
.biw-search-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.biw-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--biw-primary, #1f9d55);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    background: #fff;
}
.biw-search-form i { color: var(--biw-primary, #1f9d55); font-size: 20px; }
.biw-search-form input { flex: 1; border: 0; outline: 0; font-size: 16px; background: transparent; padding: 10px 4px; }
.biw-search-form button {
    border: 0; background: var(--biw-primary, #1f9d55); color: #fff;
    border-radius: 999px; padding: 11px 24px; font-weight: 600; cursor: pointer;
}
.biw-search-meta { margin-top: 14px; color: #6b7280; font-size: 14px; }
.biw-search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.biw-search-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border-color, #eaeaea);
    border-radius: 14px; overflow: hidden; background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.biw-search-card:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.10); transform: translateY(-3px); }
.biw-search-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.biw-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.biw-search-body { padding: 16px 18px 18px; }
.biw-search-body h3 { font-size: 17px; line-height: 1.35; margin: 10px 0 8px; }
.biw-search-body p { font-size: 13.5px; color: #5f6570; line-height: 1.6; margin-bottom: 12px; }
.biw-search-foot { display: flex; justify-content: space-between; font-size: 12px; color: #9aa0a6; }
html[data-theme="dark"] .biw-search-form,
html[data-theme="dark"] .biw-search-card,
html[data-theme="dark"] .biw-search-suggest { background: #15181d; }
html[data-theme="dark"] .biw-search-suggest-item strong { color: #fff; }
html[data-theme="dark"] .biw-search-card { border-color: rgba(255,255,255,0.08); }

/* ===========================================================================
   MOBILE LAYOUT FIXES (image 5) — tighten the responsive grid 375px–768px
   ===========================================================================*/
@media (max-width: 991px) {
    /* The sidebar columns stack under content with breathing room */
    .col-lg-8 + .col-lg-4,
    .col-lg-4 { margin-top: 10px; }
    .biw-author-team { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    /* Container side padding so nothing kisses the screen edge */
    .container { padding-left: 18px; padding-right: 18px; }

    /* Section vertical rhythm: the desktop padding is too tall on phones */
    .padding { padding-top: 42px; padding-bottom: 42px; }

    /* Post detail header */
    .post-layout-1 .single-card .title,
    .post-card.single-card .title { font-size: 24px; line-height: 1.3; }
    .biw-article-body { font-size: 15.5px; }
    .biw-article-body h2 { font-size: 21px; }
    .biw-article-body h3 { font-size: 18px; }

    /* Blog/listing cards: stack image over text instead of cramped side-by-side */
    .post-card.blog-default-card { display: block; }
    .post-card.blog-default-card .post-thumb { width: 100%; margin: 0 0 14px; }
    .post-card.blog-default-card .post-thumb img { width: 100%; height: auto; border-radius: 12px; }
    .post-card.news-post { display: block; }
    .post-card.news-post .post-thumb { width: 100%; margin: 0 0 14px; }
    .post-card.news-post .post-thumb img { width: 100%; height: auto; border-radius: 12px; }

    /* Post meta list wraps cleanly */
    .post-list { flex-wrap: wrap; gap: 6px 14px; }
    .post-list li { white-space: nowrap; }

    /* Author header stacks and centres */
    .author-details-box { display: block; text-align: center; }
    .author-details-box .author-img { margin: 0 auto 18px; }
    .author-details-box .author-img img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
    .author-social { justify-content: center; }
    .biw-author-team { grid-template-columns: 1fr; }

    /* Search results single column */
    .biw-search-results { grid-template-columns: 1fr; }
    .biw-search-form { flex-wrap: nowrap; padding-left: 14px; }
    .biw-search-form input { font-size: 15px; min-width: 0; }
    .biw-search-form button { padding: 10px 16px; }

    /* Footer: categories single column, content recentred */
    .biw-footer-cats { grid-template-columns: 1fr; }
    .footer-bottom-wrap { flex-direction: column; gap: 16px; text-align: center; }
    .footer-menu-list { flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
    .copyright-wrap { flex-direction: column; gap: 8px; text-align: center; }

    /* Sponsor banners do not overflow on small screens */
    .biw-sponsor { padding-left: 14px; padding-right: 14px; }

    /* Category page header scales down */
    .biw-category-head h1 { font-size: 23px; }
    .biw-legal h1 { font-size: 26px; }

    /* Popup search suggestions fit the viewport */
    .biw-search-suggest { max-height: 50vh; }
    #popup-search-box .box-inner-wrap { width: 92%; }
}

@media (max-width: 480px) {
    .padding { padding-top: 34px; padding-bottom: 34px; }
    .post-layout-1 .single-card .title { font-size: 21px; }
    .post-pagination { flex-wrap: wrap; gap: 12px; }
    /* Trending/list cards: keep the small thumb + text row but cap thumb size */
    .list-post-card .post-img { flex: 0 0 92px; max-width: 92px; }
    .list-post-card .post-img img { width: 92px; height: 70px; object-fit: cover; border-radius: 8px; }
    .list-post-card .post-content .title { font-size: 14px; line-height: 1.4; }
    /* Section titles not oversized */
    .section-title { font-size: 20px; }
}

/* Make every image fluid by default so nothing forces horizontal scroll */
img { max-width: 100%; }
html, body { overflow-x: hidden; }


/* ===========================================================================
   BEST IN WARANGAL — v3 fixes: footer green, image overlays, mobile header,
   full-size search, live clock. (Appended; overrides earlier rules.)
   ===========================================================================*/

/* --- 1. Footer credit link: brand GREEN, not gold/orange ----------------- */
.biw-credit a { color: var(--biw-primary); border-bottom-color: rgba(31,157,85,0.5); }
.biw-credit a:hover { color: #fff; border-color: var(--biw-primary); }
/* Inverse wordmark eyebrow in footer was gold — make it green too */
.biw-brand--inverse .biw-wordmark .biw-word-top { color: var(--biw-primary); }
/* Footer category links hover: green not gold */
.biw-footer-cats li a:hover { color: var(--biw-primary); }
.biw-footer-cats li a:hover i { color: var(--biw-primary); }

/* --- 1b. Footer layout: make the 3 columns sit cleanly ------------------- */
.footer-section .footer-top .row { row-gap: 32px; }
.footer-section .footer-item { margin-bottom: 0; }
.biw-footer-cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.biw-footer-cats li { margin: 0; }
.biw-footer-cats li a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; opacity: .9; }
.biw-footer-cats li a i { font-size: 15px; color: var(--biw-primary); width: 18px; text-align: center; }
.footer-post-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.footer-post-list li img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 64px; }
.footer-post-list .post-title { font-size: 14px; line-height: 1.4; margin: 0; }
.footer-post-list .post-title span { display: block; font-size: 11.5px; opacity: .6; margin-top: 4px; font-weight: 400; }

/* --- 2. Text-over-image carousel cards: add a readable scrim ------------- */
/* The template overlays white text on .post-carousel cards with no gradient,
   so copy floats unreadably on top of the photo. Add a bottom-up dark scrim
   and keep the text above it. Applies to HeroPost2 "Most Read" + HeroPost3. */
.post-carousel-card .post-carousel-thumb { position: relative; border-radius: 7px; overflow: hidden; }
.post-carousel-card .post-carousel-thumb::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(8,12,18,0.88) 0%, rgba(8,12,18,0.55) 38%, rgba(8,12,18,0) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: 0 0 7px 7px;
}
.post-carousel-card .post-carousel-content { z-index: 2; right: 45px; }
.post-carousel-card .post-carousel-content .title a { color: #fff; }
/* On small screens the absolute overlay + huge type is unreadable: pin it
   tighter and shrink the headline so it fits the photo. */
@media (max-width: 767px) {
    .post-carousel-card .post-carousel-content { left: 20px; right: 20px; bottom: 22px; }
    .post-carousel-card.card-2 .post-carousel-content { left: 50%; }
    .post-carousel-card .post-carousel-content .title { font-size: 20px; margin: 10px 0; max-width: 100%; }
    .post-carousel-card .post-carousel-thumb img { min-height: 240px; }
}

/* --- 3. Header theme toggle placement ------------------------------------ */
/* Desktop: keep the theme toggle grouped on the right next to search.
   The toggle is now a direct child of .navigation-inner, so order it last. */
@media (min-width: 992px) {
    .bottom-header .navigation-inner { position: relative; }
    .bottom-header .navigation-inner .biw-theme-wrap { order: 4; margin-left: 18px; }
    .bottom-header .navigation-inner .header-right { order: 5; }
}
/* Mobile: theme toggle far LEFT, logo center-left, search + menu far RIGHT. */
@media (max-width: 991px) {
    .bottom-header .navigation-inner {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .bottom-header .navigation-inner .biw-theme-wrap   { order: 0; margin: 0; }
    .bottom-header .navigation-inner .sidebar-icon     { order: 1; }
    .bottom-header .navigation-inner .site-logo        { order: 2; margin-right: auto; }
    .bottom-header .navigation-inner .navigation-menu  { order: 4; }
    .bottom-header .navigation-inner .header-right {
        order: 5;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-left: 0;
    }
    .header-right .search-icon { order: 1; }
    .header-right .mobile-menu-icon { order: 2; }
}

/* --- 4. Full-size search popup ------------------------------------------- */
#popup-search-box .box-inner-wrap { padding: 0; }
.biw-search-shell {
    position: relative;
    padding: 70px 0 64px;
    max-width: 880px;
    margin: 0 auto;
}
.biw-search-eyebrow {
    display: block;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--biw-primary);
    font-weight: 700;
    margin-bottom: 18px;
}
.biw-search-popup-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border: 2px solid var(--biw-primary);
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(31,157,85,0.14);
}
.biw-search-popup-icon { font-size: 24px; color: var(--biw-primary); flex: 0 0 auto; }
/* Override the template's fixed 600px width — full width now */
#popup-search-box .box-inner-wrap input,
.biw-search-popup-form #popup-search {
    flex: 1 1 auto;
    width: 100% !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent;
    font-size: 20px;
    padding: 16px 16px;
    color: #1a1a1a;
    font-family: var(--body-font), sans-serif;
}
.biw-search-popup-form #popup-search:focus { outline: none; border: 0 !important; }
.biw-search-popup-go {
    position: static;
    flex: 0 0 auto;
    border: 0;
    background: var(--biw-primary);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    border-radius: 999px;
    padding: 14px 34px;
    cursor: pointer;
    transition: background .2s ease;
}
.biw-search-popup-go:hover { background: var(--biw-primary-dark); }
.biw-search-dismiss {
    position: absolute;
    top: 18px; right: 18px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid #e4e4e7;
    background: #fff;
    font-size: 20px;
    color: #444;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s ease;
}
.biw-search-dismiss:hover { background: var(--biw-primary); color: #fff; border-color: var(--biw-primary); }
.biw-search-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}
.biw-search-popular span { color: #9aa0a6; font-size: 13px; }
.biw-search-popular button {
    border: 1px solid #e4e4e7;
    background: #fafafa;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: all .2s ease;
}
.biw-search-popular button:hover { background: var(--biw-primary); color: #fff; border-color: var(--biw-primary); }
/* suggestions dropdown inside the full-size popup */
.biw-search-suggest {
    position: relative;
    margin-top: 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.10);
    padding: 8px;
    max-height: 52vh;
    overflow-y: auto;
}
.biw-search-suggest-item, .biw-search-suggest-all {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px; border: 0; background: none; border-radius: 12px;
    cursor: pointer; text-align: left; transition: background .15s ease;
}
.biw-search-suggest-item:hover, .biw-search-suggest-all:hover { background: rgba(31,157,85,0.08); }
.biw-search-suggest-item img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.biw-search-suggest-item strong { display: block; font-size: 15px; color: #1a1a1a; line-height: 1.35; }
.biw-search-suggest-item small { color: var(--biw-primary); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.biw-search-suggest-all { justify-content: center; font-weight: 600; color: var(--biw-primary); }
.biw-search-suggest-empty { padding: 18px; text-align: center; color: #8a8f98; font-size: 14px; }

html[data-theme="dark"] .biw-search-popup-form,
html[data-theme="dark"] .biw-search-suggest,
html[data-theme="dark"] .biw-search-dismiss { background: #15181d; }
html[data-theme="dark"] .biw-search-popup-form #popup-search { color: #fff; }
html[data-theme="dark"] .biw-search-suggest-item strong { color: #fff; }
html[data-theme="dark"] #popup-search-box .box-inner-wrap { background: #0f1115; }

@media (max-width: 767px) {
    .biw-search-shell { padding: 80px 0 40px; }
    .biw-search-popup-form { padding-left: 16px; }
    .biw-search-popup-form #popup-search { font-size: 16px; padding: 13px 10px; }
    .biw-search-popup-go { padding: 12px 18px; font-size: 14px; }
    .biw-search-popup-icon { font-size: 20px; }
}

/* --- 5. Live clock in the top bar ---------------------------------------- */
.biw-liveclock {
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.biw-liveclock i { margin-right: 6px; }
@media (max-width: 575px) {
    .biw-liveclock { font-size: 11px; }
}


/* ===========================================================================
   BEST IN WARANGAL — v4: readable category cards (Food / Lifestyle / etc.)
   The template overlays WHITE text directly on the photo with no backing, so
   it floats unreadably. We add a dark bottom-up gradient scrim (white text
   needs a dark backing, not a light one), a safety text-shadow, an excerpt
   clamp, and a tasteful zoom-on-hover instead of the broken circle effect.
   Applies to .categorie-item used by Categories.js + CategoryBlocks.js.
   ===========================================================================*/
.categorie-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    background: #0b0e13;
}
.categorie-thumb {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    display: block;
}
.categorie-thumb a { display: block; line-height: 0; }
.categorie-thumb img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    transition: transform .5s ease;
}
/* The readability scrim: opaque-dark at the bottom, fading to clear at the top. */
.categorie-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(
        to top,
        rgba(7, 11, 17, 0.92) 0%,
        rgba(7, 11, 17, 0.78) 22%,
        rgba(7, 11, 17, 0.40) 50%,
        rgba(7, 11, 17, 0.06) 78%,
        rgba(7, 11, 17, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}
/* Kill the broken "image turns into a circle on hover"; use a subtle zoom. */
.categorie-item:hover .categorie-thumb img {
    border-radius: 14px;
    transform: scale(1.05);
}

/* Content sits above the scrim, anchored to the bottom, left-aligned and tidy. */
.categorie-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    text-align: left;
    line-height: 1.3;
    padding: 22px 22px 24px;
    z-index: 2;
}
.categorie-content span,
.categorie-content .card-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #fff;
}
/* When the category pill (card-btn) is used, give it a solid brand chip look. */
.categorie-content .card-btn {
    background: var(--biw-primary, #1f9d55);
    padding: 5px 12px;
    border-radius: 999px;
    line-height: 1;
}
.categorie-content .categorie-title { margin: 0 0 10px; }
.categorie-content .categorie-title a {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.categorie-content .categorie-title a:hover { color: var(--biw-accent, #f4b400); }
/* The excerpt (CategoryBlocks) — keep it short, soft white, clamped to 2 lines. */
.categorie-content p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 14px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.categorie-content .categorie-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    backdrop-filter: blur(2px);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.categorie-content .categorie-btn:hover {
    background: var(--biw-primary, #1f9d55);
    border-color: var(--biw-primary, #1f9d55);
    color: #fff;
    box-shadow: none;
}

/* Spacing between stacked category rows in CategoryBlocks */
.category-blocks-area .category-block { margin-bottom: 18px; }
.category-blocks-area .categorie-item { margin-bottom: 26px; }

@media (max-width: 767px) {
    .categorie-thumb img { height: 260px; }
    .categorie-content { padding: 18px; }
    .categorie-content .categorie-title a { font-size: 18px; }
}


/* ===========================================================================
   BEST IN WARANGAL — v5: footer category text white, sliding theme toggle
   ===========================================================================*/

/* --- Footer "Explore Categories" text: was dark/black, make it white ----- */
.footer-section .biw-footer-cats li a {
    color: rgba(255, 255, 255, 0.82) !important;
}
.footer-section .biw-footer-cats li a i {
    color: var(--biw-accent, #f4b400) !important; /* gold icon pops on dark footer */
}
.footer-section .biw-footer-cats li a:hover {
    color: #ffffff !important;
}
.footer-section .biw-footer-cats li a:hover i {
    color: #ffffff !important;
}

/* --- Clean sliding ON/OFF theme toggle (overrides the template's) --------
   A proper pill switch: a track that turns green in dark mode, with a knob
   that slides left↔right and shows a sun (light) / moon (dark) glyph. */
.header-right .toggle-switch,
.navigation-inner .toggle-switch {
    position: relative;
    width: 58px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}
.header-right .toggle-switch label,
.navigation-inner .toggle-switch label {
    position: relative;
    display: block;
    width: 58px;
    height: 30px;
    margin: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
}
.header-right .toggle-switch input,
.navigation-inner .toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}
/* The track */
.header-right .toggle-switch .slider,
.navigation-inner .toggle-switch .slider {
    position: absolute;
    inset: 0;
    width: 58px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background: #cbd5e1; /* light mode = soft grey track */
    transition: background .3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* The sliding knob */
.header-right .toggle-switch .slider::before,
.navigation-inner .toggle-switch .slider::before {
    content: "\f185"; /* Line Awesome sun */
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 13px;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .3s ease;
}
/* Checked / dark state: green track, knob slides right, moon glyph */
.header-right .toggle-switch input:checked ~ .slider,
.header-right .toggle-switch input.active ~ .slider,
.navigation-inner .toggle-switch input:checked ~ .slider,
.navigation-inner .toggle-switch input.active ~ .slider {
    background: var(--biw-primary, #1f9d55);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.header-right .toggle-switch input:checked ~ .slider::before,
.header-right .toggle-switch input.active ~ .slider::before,
.navigation-inner .toggle-switch input:checked ~ .slider::before,
.navigation-inner .toggle-switch input.active ~ .slider::before {
    content: "\f186"; /* Line Awesome moon */
    transform: translateX(28px);
    color: #1f3a2c;
}



/* ===========================================================================
   BEST IN WARANGAL — v4: transparent (background-less) logo support
   The brand mark is now a transparent WebP. Make the header logo larger so it
   reads clearly, and give the footer logo a white disc so the transparent
   mark stays visible on the dark footer. (Appended last — overrides earlier.)
   ===========================================================================*/

/* --- Header: bigger, clearer mark (desktop uses size="lg") --------------- */
.site-logo .biw-logo,
.site-logo .biw-logo.biw-logo-lg {
    width: 100px;
    height: 100px;
}

/* --- Footer: white circular backing behind the transparent logo ---------- */
.footer-logo .biw-logo,
.footer-bottom .footer-logo .biw-logo {
    width: 96px;
    height: 96px;
    background: #ffffff;
    border-radius: 50%;
    padding: 14px;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
/* Beat the template's "strip the ring" reset so the logo fills the disc. */
.footer-logo .biw-brand .biw-logo img,
.footer-bottom .footer-logo .biw-brand .biw-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Keep the header mark sensible on smaller screens -------------------- */
@media (max-width: 991px) {
    .site-logo .biw-logo,
    .site-logo .biw-logo.biw-logo-lg { width: 82px; height: 82px; }
}
@media (max-width: 575px) {
    .site-logo .biw-logo,
    .site-logo .biw-logo.biw-logo-lg { width: 66px; height: 66px; }
}



/* ===========================================================================
   BRANDED ROUTE LOADER (.biw-loader)
   A clean white full-screen loader: logo on a white disc inside a soft pulsing
   brand-green ring, the wordmark, and a sweeping progress shimmer.
   ===========================================================================*/
.biw-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background:
        radial-gradient(900px 500px at 50% 38%, #ffffff 0%, #f6f8f5 60%, #eef2ee 100%);
    animation: biwLoaderFadeIn 0.25s ease both;
}

.biw-loader-mark {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
}

/* Soft rotating/pulsing ring around the logo */
.biw-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(31, 157, 85, 0.15);
    border-top-color: #1f9d55;
    border-right-color: #2bbd6a;
    animation: biwLoaderSpin 1s linear infinite;
}

/* White disc that holds the (transparent) logo */
.biw-loader-disc {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(31, 157, 85, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
    display: grid;
    place-items: center;
    animation: biwLoaderPulse 1.6s ease-in-out infinite;
}
.biw-loader-disc img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.biw-loader-wordmark {
    font-family: var(--secondary-font, 'Jost', sans-serif);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.5px;
    color: #1d2a22;
}
.biw-loader-wordmark span { color: #1f9d55; }

/* Sweeping indeterminate progress bar */
.biw-loader-bar {
    width: 190px;
    height: 4px;
    border-radius: 999px;
    background: rgba(31, 157, 85, 0.14);
    overflow: hidden;
}
.biw-loader-bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1f9d55, #f4b400);
    animation: biwLoaderSweep 1.15s ease-in-out infinite;
}

@keyframes biwLoaderSpin {
    to { transform: rotate(360deg); }
}
@keyframes biwLoaderPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(31, 157, 85, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06); }
    50%      { transform: scale(1.05); box-shadow: 0 14px 38px rgba(31, 157, 85, 0.28), 0 2px 10px rgba(0, 0, 0, 0.08); }
}
@keyframes biwLoaderSweep {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(360%); }
}
@keyframes biwLoaderFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .biw-loader-ring { animation: none; border-top-color: #1f9d55; }
    .biw-loader-disc { animation: none; }
    .biw-loader-bar span { animation: none; width: 60%; }
}



/* ===========================================================================
   MOBILE UI OVERHAUL (v5) — Best In Warangal
   Fixes the invisible white hamburger, aligns the categories accordion, and
   gives the whole mobile experience a polished, modern look. Appended last so
   these rules win over main.css.
   ===========================================================================*/
@media (max-width: 991px) {

    /* --- Hamburger: bold black bars (was white = invisible on light header) --- */
    .line-menu,
    .saas-home .line-menu,
    .header-3 .line-menu {
        background-color: #14181f !important;
        height: 2.5px !important;
        border-radius: 3px;
    }
    /* Bigger, clearly-tappable trigger with a subtle pill background */
    .mobile-menu-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #f1f3ef;
        border: 1px solid var(--biw-admin-border, #e3ddd0);
        margin-left: 14px !important;
    }
    .mobile-menu-icon .burger-menu { width: 22px; height: 16px; }
    .mobile-menu-icon:active { background: #e6eae2; }

    /* Search icon: matching round tappable target */
    .header-right .search-icon {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #f1f3ef;
        border: 1px solid var(--biw-admin-border, #e3ddd0);
        font-size: 18px;
        color: #14181f;
    }
    .header-right { display: flex; align-items: center; gap: 10px; }

    /* --- Bottom nav row: clean white bar with a soft divider --- */
    .bottom-header {
        background: #ffffff;
        border-top: 1px solid #eef0ec;
        box-shadow: 0 2px 10px rgba(20, 24, 31, 0.04);
    }
    .bottom-header .navigation-inner { min-height: 60px; padding: 0 4px; }

    /* Theme toggle aligned left, breathing room */
    .biw-theme-wrap { display: flex; align-items: center; }
}

/* --- Mobile drawer: modern slide-in panel ------------------------------- */
@media (max-width: 991px) {
    .mobile-navigation-menu {
        width: 320px;
        padding: 24px 0 40px;
        background: #ffffff;
        border-right: none;
        box-shadow: 18px 0 50px rgba(20, 24, 31, 0.18);
    }

    /* Branded header strip inside the drawer */
    .mobile-navigation-menu::before {
        content: "Best In Warangal";
        display: block;
        font-family: var(--secondary-font, 'Jost', sans-serif);
        font-weight: 800;
        font-size: 17px;
        letter-spacing: 0.3px;
        color: #14181f;
        padding: 0 24px 16px;
        margin: 0 0 8px;
        border-bottom: 1px solid #eef0ec;
    }
    .mobile-navigation-menu .biw-word-green,
    .mobile-navigation-menu::first-line { color: inherit; }

    #mobile-menu-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        font-size: 26px;
        background: #f1f3ef;
        color: #14181f;
    }

    /* Top-level items: roomy, with a soft active state */
    .mobile-navigation-menu ul li > a,
    .mobile-navigation-menu .biw-mobile-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 13px 24px;
        font-family: var(--secondary-font, 'Jost', sans-serif);
        font-size: 16px;
        font-weight: 600;
        color: #1d242e;
        border-radius: 0;
    }
    .mobile-navigation-menu > .main-menu > li { border-bottom: 1px solid #f4f5f2; }
    .mobile-navigation-menu > .main-menu > li.active > a,
    .mobile-navigation-menu > .main-menu > li.active > .biw-mobile-dropdown-toggle {
        color: var(--biw-primary, #1f9d55) !important;
        background: rgba(31, 157, 85, 0.06);
        box-shadow: inset 3px 0 0 var(--biw-primary, #1f9d55);
    }

    /* Categories accordion toggle: full width, chevron pinned right */
    .biw-mobile-dropdown-toggle {
        width: 100%;
        background: none;
        border: 0;
        cursor: pointer;
        gap: 8px;
    }
    .biw-mobile-dropdown-toggle i { margin-left: auto; font-size: 15px; color: #97a0a8; }

    /* Submenu: 2-column grid of category chips, properly aligned (fixes the
       misaligned categories list). */
    .biw-mobile-submenu {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 8px 16px 14px;
        margin: 0;
        border-left: none;
        background: #fafbf9;
    }
    .biw-mobile-submenu li { margin: 0; }
    .biw-mobile-submenu li a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        font-size: 13.5px;
        font-weight: 600;
        color: #2a323c;
        background: #ffffff;
        border: 1px solid #eceee9;
        border-radius: 10px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .biw-mobile-submenu li a i { color: var(--biw-primary, #1f9d55); width: 16px; text-align: center; flex: 0 0 auto; }
    .biw-mobile-submenu li.active a {
        border-color: var(--biw-primary, #1f9d55);
        background: rgba(31, 157, 85, 0.08);
        color: var(--biw-primary, #1f9d55);
    }
}

/* ===========================================================================
   ARTICLE IMAGES — never distort. Preserve native aspect ratio; the page
   scales them down responsively without squashing the width/perspective.
   ===========================================================================*/
.biw-article-body img {
    max-width: 100%;
    height: auto;          /* let height follow width so ratio is preserved */
    width: auto;           /* do not stretch narrow images to full column */
    display: block;
    margin: 22px auto;
    border-radius: 12px;
    object-fit: contain;   /* never crop/squash */
}

/* The cover/banner thumb: scale by width, keep aspect ratio (no fixed height
   squashing the 1200x805 attributes on small screens). */
.layout-thumb img,
.single-post-thumb img {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 14px;
}

@media (max-width: 575px) {
    .biw-article-body { font-size: 16.5px; line-height: 1.8; }
    .biw-article-body h2 { font-size: 22px; }
    .biw-article-body h3 { font-size: 18px; }
}

/* ===========================================================================
   MOBILE POLISH — typography, spacing and cards on small screens so the
   mobile site feels as crafted as the desktop one.
   ===========================================================================*/
@media (max-width: 767px) {
    /* Tighter, consistent section rhythm */
    .padding, .pt-120, .pb-120 { padding-top: 42px; padding-bottom: 42px; }
    .section-heading .title, .section-title .title { font-size: 22px; line-height: 1.25; }

    /* Cards: rounded, soft shadow, no edge-to-edge harshness */
    .post-card, .list-post-card, .news-post, .categorie-item, .blog-default-card {
        border-radius: 14px;
        overflow: hidden;
    }
    .post-card .post-thumb img,
    .list-post-card .post-img img,
    .blog-default-card .post-thumb img {
        border-radius: 12px;
    }

    /* Readable post titles */
    .post-card .post-title, .list-post-card .post-title { font-size: 16px; line-height: 1.35; }

    /* The top "Top News" ticker reads cleaner on mobile */
    .news-area .hero-text { gap: 10px; }
    .news-area .hero-text > span:not(.news) {
        font-size: 14px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Buttons full-width feel on mobile forms */
    .default-btn { width: auto; }
}



/* ===========================================================================
   ADS CONTACT FORM (.biw-ads-form-card) — "Publish your ads with us"
   ===========================================================================*/
.biw-ads-form-card {
    background: #ffffff;
    border: 1px solid #ebe7dd;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 34px rgba(20, 24, 31, 0.07);
    max-width: 720px;
    margin: 0 auto;
}
.biw-ads-form-head { margin-bottom: 18px; }
.biw-ads-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #157347;
    background: rgba(31, 157, 85, 0.1);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 12px;
}
.biw-ads-form-head h3 {
    font-family: var(--secondary-font, 'Jost', sans-serif);
    font-size: 24px;
    font-weight: 800;
    color: #161d26;
    margin: 0 0 8px;
    line-height: 1.25;
}
.biw-ads-form-head p { color: #5b6470; font-size: 14.5px; margin: 0; }
.biw-ads-form-head a { color: #157347; font-weight: 600; }

.biw-ads-form { margin-top: 6px; }
.biw-ads-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.biw-ads-field { margin-bottom: 14px; display: flex; flex-direction: column; }
.biw-ads-field label { font-size: 13px; font-weight: 700; color: #2a323c; margin-bottom: 6px; }
.biw-ads-field .req { color: #e03131; }
.biw-ads-field .opt { color: #9aa0a6; font-weight: 500; }
.biw-ads-field input,
.biw-ads-field textarea {
    width: 100%;
    border: 1.5px solid #e4e6e1;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    color: #161d26;
    background: #fbfcfa;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
}
.biw-ads-field input:focus,
.biw-ads-field textarea:focus {
    outline: none;
    border-color: var(--biw-primary, #1f9d55);
    box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.14);
    background: #fff;
}
.biw-ads-field input[aria-invalid="true"],
.biw-ads-field textarea[aria-invalid="true"] { border-color: #e03131; }
.biw-ads-err { color: #e03131; font-size: 12px; margin-top: 5px; }

.biw-ads-submit {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1f9d55, #2bbd6a);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    box-shadow: 0 8px 20px rgba(31, 157, 85, 0.28);
}
.biw-ads-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(31, 157, 85, 0.34); }
.biw-ads-submit:disabled { opacity: .7; cursor: default; transform: none; }
.biw-ads-mailto { text-align: center; font-size: 13px; color: #6b7280; margin: 12px 0 0; }
.biw-ads-mailto a { color: #157347; font-weight: 600; }

/* Thank-you popup */
.biw-ads-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.biw-ads-modal-scrim { position: absolute; inset: 0; background: rgba(20, 24, 31, 0.5); border: 0; cursor: pointer; }
.biw-ads-modal-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 18px;
    padding: 34px 30px;
    text-align: center;
    max-width: 380px;
    width: calc(100% - 40px);
    box-shadow: 0 24px 70px rgba(20, 24, 31, 0.3);
    animation: biwAdsPop .22s ease both;
}
@keyframes biwAdsPop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.biw-ads-modal-check {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(31, 157, 85, 0.12);
    color: #1f9d55;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; margin: 0 auto 16px;
}
.biw-ads-modal-card h4 { font-size: 22px; font-weight: 800; color: #161d26; margin: 0 0 8px; }
.biw-ads-modal-card p { color: #5b6470; font-size: 14.5px; margin: 0 0 18px; }

@media (max-width: 575px) {
    .biw-ads-form-card { padding: 20px; border-radius: 14px; }
    .biw-ads-row { grid-template-columns: 1fr; gap: 0; }
    .biw-ads-form-head h3 { font-size: 20px; }
}



/* ===========================================================================
   HOMEPAGE "ADVERTISE WITH US" CTA (.biw-advertise-cta)
   ===========================================================================*/
.biw-advertise-cta { margin: 40px 0; }
.biw-advertise-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, #14321f 0%, #1f9d55 100%);
    border-radius: 20px;
    padding: 34px 38px;
    color: #fff;
    box-shadow: 0 14px 40px rgba(31, 157, 85, 0.25);
}
.biw-advertise-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #d9f3e3;
    margin-bottom: 8px;
}
.biw-advertise-text h2 {
    font-family: var(--secondary-font, 'Jost', sans-serif);
    font-size: 27px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
    line-height: 1.2;
}
.biw-advertise-text p { margin: 0; color: #e6f4ec; font-size: 15px; }
.biw-advertise-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.biw-advertise-btn {
    display: inline-block;
    background: #fff;
    color: #14321f;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 30px;
    border-radius: 12px;
    transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.biw-advertise-btn:hover { transform: translateY(-1px); color: #14321f; }
.biw-advertise-mail { color: #d9f3e3; font-size: 13.5px; font-weight: 600; }
.biw-advertise-mail:hover { color: #fff; }

@media (max-width: 767px) {
    .biw-advertise-inner { padding: 26px 22px; text-align: center; justify-content: center; flex-direction: column; }
    .biw-advertise-actions { align-items: center; }
    .biw-advertise-text h2 { font-size: 22px; }
}



/* ===========================================================================
   CONTACT PAGE — left info panel (.biw-contact-panel)
   Self-contained layout so it never inherits the template's misaligned
   address-list rules.
   ===========================================================================*/
.biw-contact-panel {
    background: #ffffff;
    border: 1px solid #ebe7dd;
    border-radius: 18px;
    padding: 28px;
    height: 100%;
    box-shadow: 0 10px 34px rgba(20, 24, 31, 0.06);
}
.biw-contact-group { margin-bottom: 22px; }
.biw-contact-group:last-of-type { margin-bottom: 16px; }
.biw-contact-title {
    font-family: var(--secondary-font, 'Jost', sans-serif);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #157347;
    margin: 0 0 14px;
}
.biw-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.biw-contact-item:last-child { margin-bottom: 0; }
.biw-contact-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(31, 157, 85, 0.1);
    color: #1f9d55;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.biw-contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    font-weight: 600;
    color: #1d242e;
    line-height: 1.4;
    padding-top: 2px;
    word-break: break-word;
}
.biw-contact-text small,
.biw-contact-text a {
    font-size: 13.5px;
    font-weight: 500;
}
.biw-contact-text small { color: #6b7280; }
.biw-contact-text a { color: #157347; }
.biw-contact-text a:hover { text-decoration: underline; }
.biw-contact-note {
    color: #5b6470;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid #f0ece2;
}

@media (max-width: 991px) {
    .biw-contact-panel { margin-bottom: 22px; }
}



/* ===========================================================================
   MOBILE HEADER + SEARCH POPUP — corrective pass (v7)
   Fixes text overflowing to the right of the search popup on both desktop
   and mobile. Root cause: the template sets white-space:nowrap on the popup
   and gives the input a fixed 600px width, so text bleeds outside the box.
   Appended last so these rules win over all earlier CSS.
   ===========================================================================*/

/* ── Core overflow containment ─────────────────────────────────────────────
   Clip any content that escapes the popup wrapper so page elements behind
   the search box can never bleed through. */
#popup-search-box {
    overflow: hidden !important;
    white-space: normal !important;
}
#popup-search-box * {
    white-space: normal !important;
}
#popup-search-box .box-inner-wrap {
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}
#popup-search-box .container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ── Kill the template's fixed 600px input width ───────────────────────────
   That hardcoded width is what pushes text out to the right on any viewport
   narrower than 600 px (every mobile device). */
#popup-search-box .box-inner-wrap input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* ── Flex form: input must shrink, not overflow ─────────────────────────── */
.biw-search-popup-form {
    min-width: 0;
    overflow: hidden;
}
.biw-search-popup-form #popup-search {
    flex: 1 1 0% !important;
    width: 0 !important;          /* flex item: use flex-basis, not content */
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Popular chips: wrap instead of overflowing ─────────────────────────── */
.biw-search-popular {
    flex-wrap: wrap !important;
    overflow: hidden !important;
}
/* Use the ID to beat #popup-search-box * { white-space: normal !important } */
#popup-search-box .biw-search-popular button {
    white-space: nowrap !important;   /* keep each chip on one line, but wrap row */
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Kill the template's `position:absolute` on ALL buttons inside the popup ─
   main.css: #popup-search-box .box-inner-wrap button { position:absolute;
   right:0; top:50%; transform:translateY(-50%); width:80px; height:100% }
   Specificity (1,0,2,0) beats our brand class rules. Beat it with ID + class. */
#popup-search-box .biw-search-popup-go {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}
#popup-search-box .biw-search-popular button {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    color: #444 !important;
    background: #fafafa !important;
    font-size: 13px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#popup-search-box .biw-search-suggest-item,
#popup-search-box .biw-search-suggest-all {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
}

@media (max-width: 767px) {

    .biw-search-shell { padding: 64px 4px 36px; max-width: 100%; }
    .biw-search-eyebrow { font-size: 11px; margin-bottom: 14px; }

    /* Stack the input and the Search button so they never overlap */
    .biw-search-popup-form {
        flex-wrap: wrap;
        border-radius: 18px;
        padding: 10px 12px;
        gap: 8px;
    }
    .biw-search-popup-icon { order: 1; }
    .biw-search-popup-form #popup-search {
        order: 2;
        flex: 1 1 140px;
        width: auto !important;
        min-width: 0;
        font-size: 16px;
        padding: 10px 6px;
    }
    .biw-search-popup-go {
        order: 3;
        flex: 0 0 auto;
        padding: 11px 20px;
        font-size: 14px;
    }

    /* Popular chips + suggestions: keep within the viewport, no overflow */
    .biw-search-popular { gap: 8px; margin-top: 16px; }
    .biw-search-popular span { width: 100%; text-align: center; margin-bottom: 2px; }
    .biw-search-popular button { font-size: 12px; padding: 6px 12px; }
    .biw-search-suggest { max-height: 56vh; }
    .biw-search-suggest-item img { width: 44px; height: 44px; }
    .biw-search-suggest-item strong { font-size: 14px; }

    .biw-search-dismiss { top: 14px; right: 14px; width: 40px; height: 40px; }
}

/* (1) MOBILE HEADER ICONS: one consistent, aligned set of round buttons.
   Both the search icon and the hamburger share identical sizing so they line
   up perfectly on the right of the bottom nav row. */
@media (max-width: 991px) {
    .bottom-header .navigation-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 62px;
    }
    /* theme toggle stays left, the icon cluster right */
    .biw-theme-wrap { order: 0; margin-right: auto; display: flex; align-items: center; }

    .header-right {
        order: 5;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }
    /* Reset the earlier order overrides so search sits left of the burger */
    .header-right .search-icon { order: 0; }
    .header-right .mobile-menu-icon { order: 0; margin-left: 0 !important; }

    /* Identical round buttons for BOTH icons */
    .header-right .search-icon,
    .header-right .mobile-menu-icon {
        width: 42px;
        height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: #f3f4f1;
        border: 1px solid #e4e6e1;
        margin: 0 !important;
        padding: 0;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .header-right .search-icon:active,
    .header-right .mobile-menu-icon:active { background: #e7eae3; }

    .header-right .search-icon i { font-size: 19px; color: #14181f; line-height: 1; }

    /* Center the burger bars inside its button */
    .header-right .mobile-menu-icon .burger-menu {
        position: relative;
        width: 20px;
        height: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0;
    }
    .header-right .mobile-menu-icon .line-menu {
        position: static;
        display: block;
        width: 100%;
        height: 2.5px;
        margin: 0;
        background-color: #14181f !important;
        border-radius: 3px;
    }
    .header-right .mobile-menu-icon .line-menu.line-half { width: 70%; }
    .header-right .mobile-menu-icon .line-menu.last-line { align-self: flex-end; }
}

/* ===========================================================================
   SEARCH POPUP — kill the template's 3em font-size on ≤600px screens
   main.css sets: #popup-search-box .box-inner-wrap input,button { font-size:3em }
   That is what makes the Search button text enormous on every phone.
   Beat it with ID specificity.
   ===========================================================================*/
@media screen and (max-width: 600px) {
    #popup-search-box .biw-search-popup-go {
        font-size: 13px !important;
        padding: 10px 16px !important;
        height: auto !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    #popup-search-box .box-inner-wrap input,
    #popup-search-box .biw-search-popup-form #popup-search {
        font-size: 15px !important;
        padding: 10px 8px !important;
    }
    /* Keep the form as a single row: icon | input | button */
    .biw-search-popup-form {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 6px 8px !important;
        border-radius: 999px !important;
    }
    .biw-search-popup-icon {
        font-size: 18px !important;
        flex: 0 0 auto !important;
    }
    .biw-search-popup-form #popup-search {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        order: 0 !important;
    }
    #popup-search-box .biw-search-popup-go {
        order: 0 !important;
    }
}