/* ==========================================================================
   Bloghub custom overrides (loaded after main.css)
   ========================================================================== */

/* ---- 1. Center the header menu (balanced: logo | menu | actions) ------ */
@media (min-width: 1200px) {
    .header .main-header {
        display: flex;
        align-items: center;
    }
    .header .main-header .header-left {
        flex: 1 1 0;
    }
    .header .main-header .header-nav {
        flex: 0 1 auto;
        display: flex;
        justify-content: center;
    }
    .header .main-header .header-nav .nav-main-menu {
        width: auto;
    }
    /* desktop uses the full menu — the burger belongs to mobile only */
    .header .main-header .header-nav .burger-icon {
        display: none;
    }
    /* template hides the action buttons at 1200-1440px; balanced layout
       leaves room, so keep them visible across all desktop widths */
    .header .main-header .header-right {
        flex: 1 1 0;
        display: flex !important;
        justify-content: flex-end;
        padding-right: 0 !important;
    }
}

/* ---- 3. Hero trending line: clean, aligned pills ---------------------- */
.banner-hero .block-banner .list-tags-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.banner-hero .block-banner .list-tags-banner strong {
    margin-right: 4px;
}
.banner-hero .block-banner .list-tags-banner .btn-tags-sm {
    margin: 0;
}

/* Hero search form: stack full-width below the two-column breakpoint so the
   input + select + button never overflow on tablets/phones */
@media (max-width: 991.98px) {
    .banner-hero .block-banner .form-find form {
        display: block;
    }
    .banner-hero .block-banner .form-find .form-input,
    .banner-hero .block-banner .form-find .select2 {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px;
    }
    .banner-hero .block-banner .form-find .btn-find {
        width: 100%;
        min-width: 100%;
    }
    .banner-hero .block-banner .list-tags-banner {
        justify-content: flex-start;
    }
}

/* ---- 4. Footer "Stay in the loop" — full width ------------------------ */
.footer-subscribe {
    width: 100%;
    max-width: 420px;
}
/* newsletter column: full width on phones (template uses col-xs-6 = half) */
@media (max-width: 767.98px) {
    footer .footer-newsletter-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 20px;
    }
    footer .footer-newsletter-col .footer-subscribe {
        max-width: 100%;
    }
}
.footer-subscribe .footer-subscribe-input {
    width: 100%;
    display: block;
    padding: 13px 18px;
    border: 1px solid #e6e9f2;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: #05264e;
    outline: none;
    transition: border-color .2s;
}
.footer-subscribe .footer-subscribe-input::placeholder {
    color: #9aa4b8;
}
.footer-subscribe .footer-subscribe-input:focus {
    border-color: #9777fa;
}
.footer-subscribe .footer-subscribe-btn {
    width: 100%;
    margin-top: 12px;
}

/* ---- 5. Mobile responsiveness & spacing polish ----------------------- */
@media (max-width: 991.98px) {
    /* sidebars drop below content — give them breathing room */
    .sticky-sidebar {
        margin-top: 40px;
    }
    .post-loop-grid .col-lg-4.pl-40 {
        padding-left: 15px !important;
    }
    .archive-header {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    /* keep hero decorative image from crowding text */
    .banner-hero .banner-imgs {
        margin-top: 30px;
    }
}

@media (max-width: 767.98px) {
    h1.heading-banner {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }
    .section-box {
        margin-top: 30px !important;
    }
    .archive-header h3 {
        width: 100% !important;
        font-size: 26px;
    }
    /* stat rows / flex clusters wrap cleanly */
    .d-flex.flex-wrap {
        gap: 24px !important;
    }
    /* comment replies indent less on small screens */
    .comment-item.ml-50 {
        margin-left: 24px !important;
    }
    /* full-width primary actions read better on phones */
    .archive-header .sub-categories {
        line-height: 2.2;
    }
    /* tables/wide media never force horizontal scroll */
    .single-content img,
    .single-body figure img {
        max-width: 100%;
        height: auto;
    }
}

/* Guard: no element should force a horizontal scrollbar */
.single-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ======================================================================
   Mobile refinements (round 2)
   ====================================================================== */
@media (max-width: 991.98px) {
    /* (1) Hero cream background should touch the header on mobile.
       main has padding-top:108px but the absolute header is 86px tall,
       leaving a gap — pull the first hero section up to close it. */
    main.main > .section-box:first-child {
        margin-top: -22px !important;
    }

    /* (2) Centre the "Popular Tags" block in the sidebar */
    .sidebar-shadow .block-tags {
        text-align: center;
    }

    /* (3) Section headers (Browse by topic / Latest articles / Editor's picks):
       centre them and give the action button real breathing room */
    main .section-box h2.section-title,
    main .section-box .text-md-lh28 {
        text-align: center;
    }
    main .section-box .row.align-items-end,
    main .section-box .row.align-items-end [class*="col-lg-"] {
        text-align: center !important;   /* beat Bootstrap's .text-start */
    }
    main .section-box .row.align-items-end [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 18px;
    }
    main .section-box .container > h2.section-title {
        margin-top: 8px;
    }
}

/* (4) Mobile off-canvas menu: kill the empty scroll space, pin the
   subscribe + copyright block to the bottom, keep it responsive. */
.mobile-header-wrapper-style .mobile-header-wrapper-inner {
    display: flex;
    flex-direction: column;
}
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top {
    flex: 0 0 auto;
}
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.mobile-header-wrapper-style .mobile-header-wrapper-inner .perfect-scroll {
    height: auto;          /* was 100vh — source of the empty scroll space */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.mobile-menu-bottom {
    margin-top: auto;      /* push subscribe + copyright to the bottom */
    padding-top: 24px;
}
.mobile-subscribe h6 {
    color: #05264e;
    font-weight: 700;
}
.mobile-subscribe .footer-subscribe {
    max-width: 100%;
}
.mobile-subscribe .footer-subscribe-input {
    background: #f5f6fa;
}

/* ======================================================================
   Core Web Vitals: reserve image space to eliminate layout shift (CLS)
   ====================================================================== */
.card-blog-1 .post-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.card-grid-3 figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
}
.single-body > figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.footer-admin-sep {
    margin: 0 6px;
    opacity: 0.4;
}

.footer-admin-link {
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    font-size: 0.85em;
    letter-spacing: 0.02em;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.footer-admin-link:hover,
.footer-admin-link:focus {
    opacity: 1;
    color: #9777fa;
    text-decoration: none;
}