/*
Theme Name: Blog X
Description: Blog X – is a fast, lightweight Blog/ Magazine/ Personal Blog WordPress theme with full RTL (Right-to-Left) language support. Blog X is perfect for not only blogs, but also magazines, newspapers, corporate sites, portfolios, eCommerce stores, and more. You'll have access to multiple color styles, multiple widget areas, and multiple page layouts, allowing you to create a responsive, mobile-friendly website that truly represents your unique style and brand. Choose from a range of customization options including Gutenberg block editor support, SEO-friendly structure, and social media integration to make your website truly stand out. Enjoy an intuitive and user-friendly interface with fast loading speed and clean code that makes it easy to manage and update your content. With Blog X, the possibilities are endless, and your website will look, perform, and rank better than ever before.
Author:       Noor alam
Author URI:   https://profiles.wordpress.org/nalam-1/
Theme URI:    https://wpthemespace.com/product/blogx/
Template:     x-blog
Version: 1.1.6
Tested up to: 7.1
Requires at least: 6.0
Requires PHP: 7.4
License:        GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: 		  blog, news, education, custom-logo, one-column, two-columns, grid-layout, right-sidebar, custom-background, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, threaded-comments, translation-ready, block-styles, rtl-language-support
Text Domain: blog-x

*/

/* Blog X v1.1.4 Refinements */
html { scroll-behavior: smooth; }
a { transition: color 0.25s ease, background-color 0.25s ease; }
.site-content p { line-height: 1.72; }
.btn, .button, input[type="button"], input[type="reset"], input[type="submit"] { border-radius: 4px; transition: all 0.25s ease; }

/* ==========================================================================
   Header Logo & Navigation Spacing Rule (wp-theme-updater Rule #7 & #10)
   Prevents logo/menu collision & prevents menu items from breaking words vertically.
   ========================================================================== */
.site-branding,
.header-img,
.site-title,
.custom-logo-link {
  min-width: 0;
  max-width: 100%;
}

.site-branding .custom-logo {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Rule #9: Blog list spacing & inline badges */
.post-list .post-thumb,
.entry-list .post-thumb {
  margin-right: 20px;
}

.main-btn,
.read-more,
.more-link,
.post-categories a,
.cat-links a,
.entry-footer a {
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  display: inline-block !important;
}

/* ==========================================================================
   Universal Container Fluid Centering & Viewport Overflow Protection
   Ensures safe left & right padding on mobile/tablet/desktop, perfect centering,
   and prevents content from touching or getting cut off at screen edges.
   ========================================================================== */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

#page {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.baby-container,
.container {
  width: 100% !important;
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  .baby-container,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   Desktop Navigation Flex-Flow, Centering & Container Padding (Rule #10)
   Prevents menu items from breaking words vertically, centers navigation,
   and ensures safe container padding on left & right.
   ========================================================================== */
.menu-bar,
.xmenu-bar {
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.menu-bar .baby-container,
.menu-bar .container,
.menu-bar .menu-inner,
.xmenu-bar .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.menu-bar nav#site-navigation,
.menu-bar .main-navigation,
.xmenu-bar nav#site-navigation,
.xmenu-bar .main-navigation {
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
}

@media (min-width: 992px) {
  .menu-bar #baby-menu,
  .menu-bar .baby-menu,
  .xmenu-bar #primary-menu,
  .main-navigation ul,
  #baby-menu,
  .baby-menu,
  #primary-menu,
  .navbar-nav {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center !important;
  }

  .baby-menu > li,
  #baby-menu > li,
  #primary-menu > li,
  .main-navigation ul > li,
  .menu-bar nav > ul > li {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .baby-menu > li > a,
  #baby-menu > li > a,
  #primary-menu > li > a,
  .main-navigation ul > li > a,
  .menu-bar nav > ul > li > a,
  .nav-link {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    display: block !important;
  }

  /* Submenus maintain vertical column flow */
  .baby-menu ul,
  #baby-menu ul,
  #primary-menu ul,
  .main-navigation ul ul,
  .dropdown-menu {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    text-align: left !important;
  }

  .baby-menu ul > li > a,
  #baby-menu ul > li > a,
  #primary-menu ul > li > a,
  .main-navigation ul ul > li > a {
    white-space: nowrap !important;
  }

  /* Hide mobile elements on desktop */
  #wsm-menu,
  .mobile-menu-bar,
  #mobile-menu-panel,
  #mobile-menu-overlay {
    display: none !important;
  }
}

/* ==========================================================================
   Responsive Grid & Content Row Layout (Rule #11)
   Wraps two-column content cleanly on mobile/tablet and makes cards 100% width.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .content-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 30px !important;
  }

  .content-area,
  .site-content .widget-area,
  #primary,
  #secondary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .site-main article.xgrid-item,
  .site-main article {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   Sidebar Widget List Item Spacing Optimization (Clean & Compact)
   Eliminates excessive margin-top/bottom and gap on sidebar list items.
   ========================================================================== */
#secondary .widget ul,
#secondary .widget ol,
.widget-area .widget ul,
.widget-area .widget ol,
aside.widget-area ul,
aside.widget-area ol,
.widget_block ul,
.widget_block ol {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#secondary .widget ul li,
#secondary .widget ol li,
.widget-area .widget ul li,
.widget-area .widget ol li,
aside.widget-area ul li,
aside.widget-area ol li,
.widget_block ul li,
.widget_block ol li,
:root :where(.widget-area .is-layout-flow) > li,
:root :where(#secondary .is-layout-flow) > li,
:root :where(.widget .is-layout-flow) > li,
.widget-area .wp-block-latest-posts > li,
.widget-area .wp-block-archives > li,
.widget-area .wp-block-categories > li,
.widget-area .wp-block-latest-comments > li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 4px !important;
  margin-block-end: 4px !important;
  padding: 6px 0 !important;
  line-height: 1.45 !important;
  border-bottom: 1px solid #ededed !important;
}

#secondary .widget ul li:last-child,
#secondary .widget ol li:last-child,
.widget-area .widget ul li:last-child,
.widget-area .widget ol li:last-child,
aside.widget-area ul li:last-child,
aside.widget-area ol li:last-child,
.widget_block ul li:last-child,
.widget_block ol li:last-child,
:root :where(.widget-area .is-layout-flow) > li:last-child,
:root :where(#secondary .is-layout-flow) > li:last-child,
:root :where(.widget .is-layout-flow) > li:last-child {
  border-bottom: none !important;
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#secondary .widget ul li a,
#secondary .widget ol li a,
.widget-area .widget ul li a,
.widget-area .widget ol li a,
aside.widget-area ul li a,
aside.widget-area ol li a {
  display: inline !important;
  line-height: 1.45 !important;
  word-break: normal !important;
}

/* Universal mobile suppression of legacy navbar toggle & slicknav & old bars (Rule #8) */
@media screen and (max-width: 991px) {
  .slicknav_menu,
  .slicknav_btn,
  .slicknav_nav,
  .menu-toggle:not(#mmenu-btn),
  button.menu-toggle:not(#mmenu-btn),
  .mmenu-hide,
  .xmenu-bar,
  .menu-bar,
  #masthead .menu-bar,
  nav#site-navigation,
  .main-navigation:not(#mobile-navigation),
  #masthead .site-branding:not(.mobile-topbar-logo) {
    display: none !important;
  }
  #wsm-menu.mobile-menu-bar {
    display: block !important;
  }
}