/*
 * responsive.css — Zaira Drupal Theme
 * Mobile-first responsive overrides.
 * Load order: default.css → style.css → THIS FILE → custom.css → mobile-menu.css
 *
 * Breakpoints (Bootstrap 5 aligned):
 *   ≤ 1399px  XL
 *   ≤ 1199px  LG  ← TB Megamenu drawer activates here (default breakpoint 1200px)
 *   ≤  991px  MD
 *   ≤  767px  SM
 *   ≤  575px  XS
 *
 * NOTE: Main navigation is TB Megamenu. Mobile nav drawer styles live in
 * mobile-menu.css (loaded last). The legacy offcanvas / .mobile-menu system
 * has been removed — do not re-add .mobile-nav-toggler or .offCanvas-* rules.
 */

/* ============================================================
   XL  ≤ 1399px
   ============================================================ */
@media (max-width: 1399.98px) {
  .newsletter-wrap {
    padding: 60px 60px;
  }
  .weekly-post-thumb {
    width: 360px;
  }
  .top-news-post-thumb {
    width: 380px;
  }
  .politics-post-thumb {
    width: 280px;
  }
  .banner-post-content {
    left: 60px;
    right: 60px;
  }
}

/* ============================================================
   LG  ≤ 1199px
   ============================================================ */
@media (max-width: 1199.98px) {
  /* --- Custom fixed-percentage column pairs → full width --- */
  .latest-post-inner-wrap > .row > .col-70,
  .latest-post-inner-wrap > .row > .col-30,
  .healthy-inner-wrap .row .col-70,
  .healthy-inner-wrap .row .col-30,
  .spotlight-post-inner-wrap .row .col-70,
  .spotlight-post-inner-wrap .row .col-30,
  .trending-post-inner .col-70,
  .trending-post-inner .col-30,
  .recent-post-inner-wrap .row .col-70,
  .recent-post-inner-wrap .row .col-30,
  .mining-post-inner .row .col-70,
  .mining-post-inner .row .col-30,
  .weekly-post-inner-wrap .row .col-70,
  .weekly-post-inner-wrap .row .col-30,
  .author-inner-wrap .row .col-70,
  .author-inner-wrap .row .col-30,
  .politics-post-wrap .row .col-69,
  .politics-post-wrap .row .col-31 {
    width: 100%;
    flex: 0 0 auto;
  }

  /* --- Image heights --- */
  .banner-post-thumb img {
    height: 480px;
  }
  .banner-post-two.big-post .banner-post-thumb-two img {
    height: 480px;
  }
  .banner-post-thumb-three img {
    height: 420px;
  }
  .overlay-post-thumb img {
    height: 420px;
  }
  .overlay-post-two .overlay-post-thumb img {
    height: 400px;
  }

  /* --- Newsletter --- */
  .newsletter-wrap,
  .newsletter-wrap.newsletter-wrap-two {
    padding: 50px 40px;
    flex-wrap: wrap;
  }
  .newsletter-content,
  .newsletter-wrap-two .newsletter-content {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .newsletter-form form {
    flex-wrap: wrap;
  }

  /* --- Sidebar --- */
  .sidebar-wrap {
    margin-left: 0;
  }
  .blog-inner-wrap .sidebar-wrap {
    margin-right: 0;
  }

  /* --- Thumb widths --- */
  .weekly-post-thumb {
    width: 300px;
  }
  .top-news-post-thumb {
    width: 300px;
  }
  .politics-post-thumb {
    width: 220px;
  }

  /* --- Header padding --- */
  .header-top-wrap {
    padding: 6px 15px;
  }
  .header-right-side {
    padding-right: 15px;
  }

  /* --- Row gutter --- */
  .row-gutter-40 .row {
    --bs-gutter-x: 30px;
  }

}

/* ============================================================
   MD  ≤ 991px  — primary mobile breakpoint
   ============================================================ */
@media (max-width: 991.98px) {
  /* ── MOBILE HEADER — TB Mega Menu native ──────────────────────────────
     The legacy offcanvas toggler (.mobile-nav-toggler) and the
     display:none rules for .navbar-wrap have been removed.
     TB Mega Menu's own tbm-button is the sole mobile hamburger.
     ─────────────────────────────────────────────────────────────────── */

  /* Keep header bar height consistent */
  .menu-area .menu-nav {
    min-height: 70px;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
  }

  .header-left-side {
    align-items: center;
    height: auto;
    min-height: 70px;
  }

  /* Keep nav wrapper visible so TB Mega Menu can render its button */
  .menu-area .navbar-wrap.main-menu,
  .navbar-wrap {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
  }

  .header-search-wrap form {
    display: none;
  }
  .header-right-side {
    padding-right: 0;
  }

  /* ── All remaining fixed-percentage column pairs ── */
  .latest-post-inner-wrap > .row > .col-70,
  .latest-post-inner-wrap > .row > .col-30,
  .latest-post-item-wrap > .row > .col-66,
  .latest-post-item-wrap > .row > .col-34,
  .banner-post-inner .row .col-70,
  .banner-post-inner .row .col-30,
  .healthy-inner-wrap .row .col-70,
  .healthy-inner-wrap .row .col-30,
  .spotlight-post-inner-wrap .row .col-70,
  .spotlight-post-inner-wrap .row .col-30,
  .spotlight-post-item-wrap .row .col-57,
  .spotlight-post-item-wrap .row .col-43,
  .trending-post-inner .col-70,
  .trending-post-inner .col-30,
  .recent-post-inner-wrap .row .col-70,
  .recent-post-inner-wrap .row .col-30,
  .recent-post-wrap .row .col-54,
  .recent-post-wrap .row .col-46,
  .mining-post-inner .row .col-70,
  .mining-post-inner .row .col-30,
  .weekly-post-inner-wrap .row .col-70,
  .weekly-post-inner-wrap .row .col-30,
  .author-inner-wrap .row .col-70,
  .author-inner-wrap .row .col-30,
  .politics-post-wrap .row .col-69,
  .politics-post-wrap .row .col-31,
  .news-banner-post-wrap .row .col-33,
  .news-banner-post-wrap .row .col-67 {
    width: 100%;
    flex: 0 0 auto;
  }

  /* ── Banner & overlay content ── */
  .banner-post-content {
    left: 25px;
    right: 25px;
    bottom: 25px;
  }
  .banner-post-content-two {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .banner-post-content-three {
    left: 25px;
    right: 25px;
    bottom: 30px;
  }
  .overlay-post-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .overlay-post-content-three {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .overlay-post-content-five {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .so-post-content {
    left: 20px;
    right: 20px;
  }

  .banner-post-content .post-title {
    font-size: 20px;
  }
  .banner-post-content-two .post-title {
    font-size: 18px;
  }
  .overlay-post-content .post-title {
    font-size: 20px;
  }
  .overlay-post-content-three .post-title {
    font-size: 20px;
  }
  .overlay-post-content-five .post-title {
    font-size: 20px;
  }

  /* ── Image heights ── */
  .banner-post-thumb img {
    height: 360px;
  }
  .banner-post-two.big-post .banner-post-thumb-two img {
    height: 380px;
  }
  .banner-post-thumb-three img {
    height: 340px;
  }
  .overlay-post-thumb img {
    height: 340px;
  }
  .overlay-post-two .overlay-post-thumb img {
    height: 340px;
  }
  .overlay-post-thumb-three img {
    height: 380px;
  }
  .overlay-post-thumb-five img {
    height: 300px;
  }
  .featured-post-thumb img {
    height: 260px;
  }
  .blog-details-thumb img {
    height: 300px;
  }
  .so-post-thumb img {
    height: 260px;
  }
  .sports-post-thumb img {
    height: 260px;
  }

  /* ── Politics post → stack ── */
  .politics-post {
    flex-direction: column;
    gap: 20px;
  }
  .politics-post-thumb {
    width: 100%;
  }
  .politics-post-thumb img {
    height: 240px;
    width: 100%;
  }

  /* ── Banner post seven — hide decorative divider on narrow screens ── */
  .banner-post-seven::before {
    display: none;
  }

  /* ── Weekly post → stack ── */
  .weekly-post-item,
  .weekly-post-item.weekly-post-two {
    flex-direction: column;
    gap: 20px;
  }
  .weekly-post-thumb {
    width: 100%;
  }
  .weekly-post-thumb img {
    height: 260px;
  }

  /* ── Top news → stack ── */
  .top-news-post {
    flex-direction: column;
    gap: 20px;
  }
  .top-news-post-thumb {
    width: 100%;
  }
  .top-news-post-thumb img {
    height: 240px;
  }

  /* ── Trending post → stack ── */
  .trending-post {
    flex-direction: column;
  }
  .trending-post-thumb {
    width: 100%;
  }

  /* ── Newsletter → column ── */
  .newsletter-wrap,
  .newsletter-wrap.newsletter-wrap-two {
    padding: 40px 30px;
    flex-direction: column;
  }
  .newsletter-content,
  .newsletter-wrap-two .newsletter-content,
  .newsletter-wrap-three .newsletter-content {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .newsletter-form form {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .newsletter-form .form-grp {
    width: 100%;
  }
  .newsletter-social {
    margin-left: 0;
    margin-top: 20px;
    flex-wrap: wrap;
  }
  .newsletter-wrap-three {
    flex-direction: column;
  }

  /* ── Sidebar — unstick ── */
  .sidebar-wrap,
  .sidebar-wrap.sidebar-wrap-two,
  .sidebar-wrap.sidebar-wrap-four {
    margin-left: 0;
    margin-right: 0;
    margin-top: 50px;
    position: static;
    top: auto;
  }
  .sidebar-wrap-three {
    padding-left: 0;
    position: static;
    top: auto;
    margin-top: 40px;
  }
  .sidebar-wrap-three::before {
    display: none;
  }

  /* ── Contact ── */
  .contact-form-wrapper {
    padding: 30px 25px;
  }
  .contact-form {
    padding: 30px 25px;
  }

  /* ── Footer ── */
  .footer-top .row [class*="col-"]:nth-child(3) .footer-widget {
    margin-left: 0;
  }

  /* ── Blog details ── */
  .blog-details-content .title {
    font-size: 2rem;
  }
  .blog-details-content blockquote {
    margin: 30px 15px 25px;
    padding: 25px 20px 20px;
  }
  .prev-next-post-wrap .post-item {
    flex-direction: column;
  }
  .post-item.next-post {
    flex-direction: column;
    text-align: left;
  }
  .prev-next-post-wrap .post-item .thumb {
    width: 100%;
  }
  .prev-next-post-wrap .post-item .thumb img {
    width: 100%;
    height: 180px;
  }

  /* ── Author ── */
  .author-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
  }
  .author-thumb {
    width: 120px;
  }

  /* ── Coin grid ── */
  .coin-item-wrap .row .col {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 10px;
    margin-bottom: 15px;
  }

  /* ── Row gutter ── */
  .row-gutter-40 .row {
    --bs-gutter-x: 20px;
  }
}

/* ============================================================
   SM  ≤ 767px
   ============================================================ */
@media (max-width: 767.98px) {
  /* ── Image heights ── */
  .banner-post-thumb img {
    height: 300px;
  }
  .banner-post-two.big-post .banner-post-thumb-two img {
    height: 300px;
  }
  .banner-post-thumb-three img {
    height: 270px;
  }
  .banner-post-thumb-four img {
    height: 280px;
  }
  .overlay-post-thumb img {
    height: 270px;
  }
  .overlay-post-two .overlay-post-thumb img {
    height: 270px;
  }
  .overlay-post-thumb-three img {
    height: 290px;
  }
  .overlay-post-thumb-five img {
    height: 250px;
  }
  .featured-post-thumb img {
    height: 220px;
  }
  .blog-details-thumb img {
    height: 240px;
  }
  .video-post-item.big-post .video-post-thumb img {
    height: 250px;
  }

  /* ── Banner content ── */
  .banner-post-content .post-title {
    font-size: 17px;
    margin-bottom: 10px;
  }

  /* ── Blog details ── */
  .blog-details-content .title {
    font-size: 1.6rem;
  }
  .blog-details-content blockquote {
    margin: 20px 0 20px;
  }
  .blog-avatar-wrap {
    flex-direction: column;
    padding: 25px 20px;
  }
  .blog-avatar-img {
    margin-right: 0;
    margin-bottom: 15px;
  }

  /* ── Comments ── */
  .comments-box {
    flex-direction: column;
  }
  .comments-avatar {
    width: 70px;
    margin-right: 0;
    margin-bottom: 15px;
  }

  /* ── Video small post → stack ── */
  .video-post-item.small-post {
    flex-direction: column;
  }
  .video-post-item.small-post .video-post-thumb {
    width: 100%;
  }

  /* ── Horizontal posts → stack ── */
  .ta-horizontal-post {
    flex-direction: column;
  }
  .horizontal-post-thumb {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .horizontal-post-thumb img {
    height: 180px;
    width: 100%;
  }
  .horizontal-post-two {
    flex-direction: column;
  }
  .horizontal-post-two .horizontal-post-thumb {
    width: 100%;
  }

  /* ── Footer ── */
  .footer-top {
    padding: 60px 0 40px;
  }
  .footer-bottom {
    padding: 25px 0;
  }
  .copyright-text p {
    text-align: center;
    margin-top: 10px;
  }
  .footer-bottom-menu .list-wrap {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ── Contact ── */
  .contact-map {
    height: 320px;
  }
  .contact-info-item {
    flex-direction: column;
    gap: 20px;
    padding: 25px 20px;
  }
  .contact-info-item .content::before {
    display: none;
  }

  /* ── Breadcrumb ── */
  .breadcrumb-area {
    padding: 25px 0;
  }

  /* ── OffCanvas ── */
  .offCanvas-wrap {
    width: 300px;
    padding: 50px 30px 50px;
  }

  /* ── Newsletter ── */
  .newsletter-area-three,
  .newsletter-area-four {
    padding: 50px 0;
  }

  /* ── Coin ── */
  .coin-item-wrap .row .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ── Pagination ── */
  .pagination {
    margin-top: 30px;
  }
}

/* ============================================================
   XS  ≤ 575px
   ============================================================ */
@media (max-width: 575.98px) {
  /* ── Typography scale ── */
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.4rem;
  }
  h3 {
    font-size: 1.2rem;
  }

  .blog-details-content .title {
    font-size: 1.35rem;
  }
  .banner-post-content .post-title,
  .banner-post-content-two .post-title,
  .banner-post-content-three .post-title,
  .overlay-post-content .post-title,
  .overlay-post-content-three .post-title,
  .overlay-post-content-five .post-title {
    font-size: 15px;
    margin-bottom: 6px;
  }

  /* ── Image heights ── */
  .banner-post-thumb img {
    height: 230px;
  }
  .banner-post-two.big-post .banner-post-thumb-two img {
    height: 230px;
  }
  .banner-post-two.small-post .banner-post-thumb-two img {
    height: 150px;
  }
  .banner-post-thumb-three img {
    height: 210px;
  }
  .overlay-post-thumb img {
    height: 210px;
  }
  .overlay-post-two .overlay-post-thumb img {
    height: 210px;
  }
  .overlay-post-thumb-three img {
    height: 210px;
  }
  .overlay-post-thumb-five img {
    height: 190px;
  }
  .featured-post-thumb img {
    height: 190px;
  }
  .blog-details-thumb img {
    height: 195px;
  }
  .so-post-thumb img {
    height: 210px;
  }
  .sports-post-thumb img {
    height: 210px;
  }

  /* ── Section title ── */
  .section-title .title {
    font-size: 20px;
  }
  .section-title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* ── Header top ── */
  .header-top-social .title {
    display: none;
  }
  .header-top-menu .list-wrap {
    gap: 10px;
  }

  /* ── Newsletter form ── */
  .newsletter-form .form-grp,
  .newsletter-wrap-four .newsletter-form .form-grp {
    width: 100%;
  }

  /* ── Popular post → stack ── */
  .popular-post {
    flex-direction: column;
  }
  .popular-post .thumb {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }

  /* ── Contact form — inline name/email → full width ── */
  .contact-form .form-item-name,
  .contact-form .form-item-mail {
    width: 100%;
    display: block;
    margin-right: 0;
  }

  /* ── Search form ── */
  .path-search #search-form .form-wrapper {
    flex-direction: column;
  }
  .path-search #search-form .form-wrapper .form-item-keys {
    width: 100%;
  }
  .path-search #search-form .form-wrapper input.form-submit {
    width: 100%;
  }

  /* ── Sidebar avatar ── */
  .sidebar-avatar {
    padding: 80px 15px 30px;
  }

  /* ── Author ── */
  .author-wrap {
    padding: 25px 15px;
  }

  /* ── Pagination ── */
  .pagination .page-link {
    padding: 0 10px;
    height: 36px;
    font-size: 13px;
  }

  /* ── Footer ── */
  .footer-top {
    padding: 50px 0 30px;
  }
  .footer-social .list-wrap {
    gap: 15px 25px;
  }

  /* ── Coin ── */
  .coin-item-wrap .row .col {
    margin-bottom: 15px;
  }
}