/**
 * Theme Name:     ColorMag Child
 * Author:         ThemeGrill
 * Template:       colormag
 * Text Domain:	   colormag-child
 * Description:    ColorMag is always the best choice when it comes to magazine, news, and blog WordPress themes. You can create elegant and modern websites for news portals, online magazines, and publishing sites. With ColorMag’s 8 and counting free starter demos for health, food, entertainment, sports, and fashion industries, building a magazine style website is super easy. Best of all, the ColorMag WordPress theme offers multiple ad spaces in its layout. So, you can monetize your website by displaying ads in these slots without any fuss. And if you plan to sell products and services online, you can rely on the theme’s compatibility with WooCommerce. Some of its key features are: >> SEO Optimized >> Translation & RTL Ready >> Cross-browser Compatible >> Custom Widgets >> Responsive Design >> Sticky Menu. So, download the free ColorMag theme and create professional magazine websites quickly. You can get free support for ColorMag at https://themegrill.com/contact/ and check our demos at https://themegrilldemos.com/colormag/
 */

 /* =======================================================
   CUSTOM 4-COLUMN GRID (ARCHIVE & SEARCH PAGES)
   ======================================================= */

a#scroll-up i{
    border-radius: 1000px;
}   
a:focus{
    outline-style: none;
}
.cm-entry-title a:hover{
    text-decoration: none;
}
.mzb-grid-module .mzb-post-title,
.mzb-grid-module .mzb-post-title a {
    font-size: inherit;
}
.mzb-grid-module .mzb-post .mzb-read-more a{
    color: inherit;
}

/* 1. Create the 4-column grid for both pages */
body.archive .cm-posts.col-4,
body.search .article-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: start;
}

/* 2. Ensure individual articles fit perfectly & Remove Card Style */
body.archive .cm-posts > article, body.archive .cm-posts > article .cm-post-content,
body.search .article-container > article, body.search .article-container > article .cm-post-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
}

/* 3. Fix image spacing */
body.archive .cm-posts > article .cm-featured-image,
body.search .article-container > article .cm-featured-image {
    margin-bottom: 15px !important;
}

/* 4. Make all images perfectly uniform */
body.archive .cm-posts > article .cm-featured-image img,
body.search .article-container > article .cm-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9; 
}

/* Apply Kantumruy Pro to all text when the Khmer body class is present */
body.translatepress-km,
body.translatepress-km h1,
body.translatepress-km h2,
body.translatepress-km h3,
body.translatepress-km h4,
body.translatepress-km h5,
body.translatepress-km h6,
body.translatepress-km p,
body.translatepress-km a,
body.translatepress-km span,
body.translatepress-km li, 
body.translatepress-km button,
body.translatepress-km input,
body.translatepress-km select,
body.translatepress-km textarea{
    font-family: 'Kantumruy Pro', sans-serif !important;
}

div.broclick-mobile-extra-menu .trp-flag-image{
    vertical-align: middle;
}
/* Hide the extra menu on desktop screens */
@media screen and (min-width: 769px) {
    div.broclick-mobile-extra-menu {
        display: none !important;
    }
}

/* Optional: Add some spacing or background to your new container on mobile */
@media screen and (max-width: 768px) {
    div.broclick-mobile-extra-menu {
        /* Example: Adding a border to separate it from the main menu */
        border-top: 1px solid #ddd;
        padding-top: 10px;
        margin-top: 10px;
    }
}

/* =======================================================
   RESPONSIVE LAYOUT (Tablets and Mobiles)
   ======================================================= */

/* Small Laptops & Tablets (Show 3 columns) */
@media screen and (max-width: 1024px) {
    body.archive .cm-posts.col-4,
    body.search .article-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Phones & Small Tablets (Show 2 columns) */
@media screen and (max-width: 768px) {
    body.archive .cm-posts.col-4,
    body.search .article-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Phones (Show 1 column) */
@media screen and (max-width: 480px) {
    body.archive .cm-posts.col-4,
    body.search .article-container {
        grid-template-columns: 1fr;
    }
}

/* Fixed search bar width for mobile phone */
@media (max-width: 768px) {
    .cm-search-icon-in-input-right .search-wrap, .cm-search-box .search-wrap {
        width: 250px !important;
    }
}