/*
Theme Name:   ColorMag Child
Theme URI:    https://themegrill.com/themes/colormag/
Description:  Child theme for ColorMag to style Malayalam News Portal
Author:       Antigravity
Template:     colormag
Version:      1.0.1
*/

/* -------------------------------------------------------------
 * 1. Base Typography & Fonts (Manorama Online style)
 * PanchariUni  = body / normal text  (matches manoramaonline.com)
 * EGGIndulekhaUni = bold headlines   (matches manoramaonline.com)
 * Poppins      = English UI labels
 * ------------------------------------------------------------- */
body,
input,
textarea,
select {
    font-family: 'Noto Sans Malayalam', 'PanchariUni', sans-serif;
    font-size: 16px;        
    line-height: 1.7;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Bold headlines — EGGIndulekhaUni (Manorama's heading font) */
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a,
.cm-widget-title,
.tg-module-title,
.breaking-news-ticker,
.widget-title {
    font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
    line-height: 1.4;
}

/* Section widget title spans stay sharp */
.cm-widget-title span,
.tg-module-title span {
    font-family: 'EGGIndulekhaUni', 'PanchariUni', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0;
}

/* Navigation links — Poppins for English labels */
.main-navigation a,
#cm-primary-menu li a {
    font-family: 'Poppins', 'Noto Sans Malayalam', sans-serif !important;
    font-weight: 600;
}

/* Post Titles Styling */
.entry-title a,
.cm-post-title a {
    color: #1a1a1a;
    transition: color 0.2s ease-in-out;
}

.entry-title a:hover,
.cm-post-title a:hover {
    color: #d32f2f !important; /* Premium news red */
}

/* -------------------------------------------------------------
 * 2. Theme Colors & Layout Styling
 * ------------------------------------------------------------- */
/* -------------------------------------------------------------
 * MediaOne Redesign - Header & Navigation
 * ------------------------------------------------------------- */
.mediaone-top-bar {
    background-color: #fbfbfb;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 0;
    font-size: 13px;
    color: #666666;
    font-family: 'Inter', sans-serif;
}

#cm-masthead {
    background-color: #ffffff !important;
}

.cm-main-row {
    justify-content: center !important;
    padding: 30px 0 !important;
}

.cm-site-title a {
    font-size: 52px !important;
    font-weight: 800 !important;
    color: #0f3057 !important; /* MediaOne dark blue */
    text-transform: lowercase;
    letter-spacing: -2px;
}

.cm-site-title a span {
    color: #1565c0; /* Blue accent for 'online' */
}

.cm-site-description {
    text-align: center;
    font-size: 14px;
    color: #888888;
    margin-top: -5px;
    letter-spacing: 1px;
}

/* Primary Navigation Redesign */
.cm-header-bottom-row {
    background-color: #ffffff !important;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    position: sticky !important;
    top: 0;
    z-index: 999;
}

/* Adjust sticky header position when WordPress admin bar is present */
.admin-bar .cm-header-bottom-row {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .cm-header-bottom-row {
        top: 46px !important;
    }
}

.cm-bottom-row {
    justify-content: center !important;
}

#cm-primary-menu {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap !important;
}

#cm-primary-menu li a {
    color: #333333 !important;
    font-size: 14px;
    font-weight: 600;
    padding: 18px 13px !important;
    text-transform: capitalize;
    background-color: transparent !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#cm-primary-menu li:hover > a,
#cm-primary-menu li.current-menu-item > a,
#cm-primary-menu li.current_page_item > a {
    background-color: transparent !important;
    color: #1565c0 !important;
    border-bottom: 2px solid #1565c0 !important;
}

/* Home Icon */
#cm-primary-menu li a i.fa-home {
    font-size: 18px;
    vertical-align: middle;
}

#cm-primary-menu li:hover > a i.fa-home,
#cm-primary-menu li.current-menu-item > a i.fa-home,
#cm-primary-menu li.current_page_item > a i.fa-home {
    color: #1565c0 !important;
}

/* =============================================================
 * MOBILE HEADER REDESIGN (Stacked Professional Layout)
 * ============================================================= */
@media screen and (max-width: 991px) {
    /* Main container stacked */
    .cm-header-builder .cm-mobile-row {
        display: flex !important;
        flex-direction: column !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    }

    /* Top section: Logo */
    .cm-header-builder .cm-mobile-row .cm-header-main-row {
        background: #ffffff !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important; /* Override flex */
    }

    /* Hide empty columns and force center column to take full width */
    .cm-header-builder .cm-mobile-row .cm-header-main-row .cm-header-left-col,
    .cm-header-builder .cm-mobile-row .cm-header-main-row .cm-header-right-col {
        display: none !important;
    }

    .cm-header-builder .cm-mobile-row .cm-header-main-row .cm-header-center-col {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    .cm-header-builder .cm-mobile-row .cm-header-main-row .cm-site-branding {
        margin: 0 auto !important;
        display: inline-block !important;
    }
    
    .cm-header-builder .cm-mobile-row .cm-header-main-row img.custom-logo {
        max-height: 50px !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Bottom section: Hamburger Menu Bar */
    .cm-header-builder .cm-mobile-row .cm-header-bottom-row {
        background: #fafafa !important;
        width: 100% !important;
        padding: 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        position: static !important;
    }

    .cm-header-builder .cm-mobile-row .cm-bottom-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Keep left aligned */
        height: 50px !important;
    }

    .cm-header-builder .cm-mobile-row .cm-header-left-col {
        padding-left: 15px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* Hamburger Button Styling */
    .cm-header-builder .cm-mobile-row .cm-menu-toggle {
        background: transparent !important;
        border: none !important;
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important; /* Space if we add 'MENU' text later */
        color: #333333 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        width: auto !important;
        height: auto !important;
    }

    .cm-header-builder .cm-mobile-row .cm-menu-toggle:active {
        background-color: #eeeeee !important;
    }

    .cm-header-builder .cm-mobile-row .cm-menu-toggle svg {
        fill: #333333 !important;
        width: 26px !important;
        height: 26px !important;
    }
    
    /* =============================================================
     * PROFESSIONAL MOBILE DROPDOWN MENU
     * ============================================================= */
    /* Force the entire dropdown container and wrapper to be white */
    body .cm-header-builder #cm-mobile-nav,
    body .cm-header-builder #cm-mobile-nav .cm-mobile-header-row,
    body .cm-header-builder #cm-mobile-nav #cm-mobile-menu {
        background-color: #ffffff !important;
        background-image: none !important;
        background: #ffffff !important;
    }

    /* The main dropdown box */
    body .cm-header-builder #cm-mobile-nav {
        border-top: 2px solid #1565c0 !important; /* Premium blue accent - thin */
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
        border-bottom: none !important;
    }

    /* Menu container */
    body .cm-header-builder #cm-mobile-menu {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }

    /* Individual menu items */
    body .cm-header-builder #cm-mobile-menu > li {
        border-bottom: 1px solid #eeeeee !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

    body .cm-header-builder #cm-mobile-menu > li:last-child {
        border-bottom: none !important;
    }

    /* Menu Links */
    body .cm-header-builder #cm-mobile-menu > li > a {
        display: block !important;
        padding: 16px 20px !important;
        font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        text-align: left !important; /* Force left alignment */
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: transparent !important; /* Remove any white box on grey background */
    }

    /* Active / Hover state */
    body .cm-header-builder #cm-mobile-menu > li > a:hover,
    body .cm-header-builder #cm-mobile-menu > li.current-menu-item > a,
    body .cm-header-builder #cm-mobile-menu > li.current_page_item > a {
        color: #1565c0 !important;
        background-color: #f8fbff !important; /* Extremely soft blue background */
        padding-left: 26px !important; /* Professional indent on hover */
    }

    /* Home Icon specifically */
    body .cm-header-builder #cm-mobile-menu > li > a i.fa-home {
        font-size: 18px !important;
        color: inherit !important;
        margin-right: 8px !important;
    }

    body .cm-header-builder #cm-mobile-menu > li.current-menu-item > a i.fa-home {
        color: #1565c0 !important;
    }

    /* Submenus */
    body .cm-header-builder #cm-mobile-menu .sub-menu,
    body .cm-header-builder #cm-mobile-menu .children {
        background-color: #fdfdfd !important;
        border-left: 3px solid #e0e0e0 !important;
        margin-left: 20px !important;
        border-top: 1px solid #eeeeee !important;
    }

    body .cm-header-builder #cm-mobile-menu .sub-menu li a,
    body .cm-header-builder #cm-mobile-menu .children li a {
        padding: 12px 15px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-align: left !important;
        color: #555555 !important;
    }
}

/* -------------------------------------------------------------
 * 3. Widget & News Blocks Customization
 * ------------------------------------------------------------- */
/* Section Headers — Professional News Style */
.cm-widget-title,
.tg-module-title {
    border-bottom: 2px solid #e8e8e8 !important;
    border-top: none !important;
    position: relative;
    margin-bottom: 15px;
    background: transparent !important;
    padding: 0 0 10px 0 !important;
    line-height: 1 !important;
}

.cm-widget-title span,
.tg-module-title span {
    font-family: 'Poppins', 'Noto Sans Malayalam', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
    letter-spacing: 1px;
    padding: 0 0 12px 12px !important;
    border-radius: 0 !important;
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    border-left: 4px solid #d32f2f !important;
    color: #1a1a1a !important;
    position: relative;
    bottom: -1px;
}

/* =============================================================
 * SLIDER EQUAL-SIZE LAYOUT
 * Both the Latest News slider (.cm-slider-area) and the Kerala
 * News slider (.cm-beside-slider-widget) must appear identical.
 * Strategy: equal flex widths + same image aspect-ratio = same size.
 * We do NOT override bxSlider's internal height calculations.
 * ============================================================= */

/* --- Container styling --- */
.cm-slider-area,
.cm-beside-slider-widget {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Remove widget bottom margin inside slider areas */
.cm-slider-area .cm-featured-category-slider-widget,
.cm-beside-slider-widget .cm-featured-category-slider-widget {
    margin-bottom: 0 !important;
}

/* bxSlider wrapper cleanup */
.cm-slider-area .bx-wrapper,
.cm-beside-slider-widget .bx-wrapper {
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Force ALL slider images to the SAME aspect ratio.
 * This is the key trick: since both containers have equal width,
 * and images have the same aspect-ratio, the sliders end up
 * at exactly the same height. */
.cm-slider-area .cm-featured-category-slider img,
.cm-beside-slider-widget .cm-featured-category-slider img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin-bottom: 0 !important;
    transition: transform 0.5s ease !important;
}

.cm-slider-area .cm-featured-category-slider .cm-single-slide:hover img,
.cm-beside-slider-widget .cm-featured-category-slider .cm-single-slide:hover img {
    transform: scale(1.04) !important;
}

/* Slide container */
.cm-slider-area .cm-featured-category-slider .cm-single-slide,
.cm-beside-slider-widget .cm-featured-category-slider .cm-single-slide {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* Overlay gradient & text */
.cm-featured-category-slider .cm-slide-content {
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%) !important;
    padding: 28px 24px 20px !important;
}

.cm-featured-category-slider-widget .cm-entry-title a {
    font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.45 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7) !important;
}

.cm-featured-category-slider-widget .cm-entry-title a:hover {
    color: #f1c40f !important;
}

/* Slider nav controls z-index */
.cm-slider-area .cm-category-slide-prev,
.cm-slider-area .cm-category-slide-next,
.cm-beside-slider-widget .cm-category-slide-prev,
.cm-beside-slider-widget .cm-category-slide-next {
    z-index: 10 !important;
}

/* =============================================================
 * DESKTOP EQUAL-WIDTH SPLIT — 50 / 50
 * Overrides parent theme's 55% / 44% asymmetric split.
 * ============================================================= */
@media screen and (min-width: 62em) {
    .cm-front-page-top-section {
        display: flex !important;
        flex-direction: row !important;
        gap: 24px !important;
        margin-bottom: 50px !important;
    }
    /* Equal 50/50 width */
    .cm-slider-area,
    .cm-beside-slider-widget {
        flex: 1 1 0% !important;
        width: 0 !important;
        min-width: 0 !important;
    }
}

/* Mobile: stack vertically */
@media screen and (max-width: 61.9375em) {
    .cm-front-page-top-section {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .cm-slider-area,
    .cm-beside-slider-widget {
        width: 100% !important;
    }
}

/* Note: .cm-beside-slider-widget now contains a slider widget
 * (Kerala News), not the old 4-panel highlighted post grid. */

/* Category News Lists (Featured Posts Widget) - 2 Column Grid Style */
/* Category News Lists (Override Style 1 and Style 2 to 2-Column Grid) */
.cm-featured-posts--style-1,
.cm-featured-posts--style-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.cm-featured-posts--style-1 .cm-widget-title,
.cm-featured-posts--style-1 > p,
.cm-featured-posts--style-2 .cm-widget-title,
.cm-featured-posts--style-2 > p {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Strip internal layout wrappers so all posts become direct flex items */
.cm-featured-posts--style-1 .cm-first-post,
.cm-featured-posts--style-1 .cm-posts,
.cm-featured-posts--style-2 .cm-first-post,
.cm-featured-posts--style-2 .cm-posts,
.widget_featured_posts .tg-module-wrapper > div,
.widget_featured_posts .tg-module-wrapper > ul {
    display: contents !important;
}

.cm-featured-posts--style-1 .cm-post,
.cm-featured-posts--style-2 .cm-post,
.widget_featured_posts .tg-module-wrapper .cm-post,
.widget_featured_posts .tg-module-wrapper .post,
.widget_featured_posts .tg-module-wrapper .tg-post {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0f4f8 !important;
    padding: 0 0 15px 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    align-items: flex-start !important;
    width: calc(50% - 10px) !important;
    float: none !important;
}

.cm-featured-posts--style-1 .cm-post > a,
.cm-featured-posts--style-2 .cm-post > a,
.cm-featured-posts--style-1 .cm-post figure,
.cm-featured-posts--style-1 .cm-post .cm-post-image,
.cm-featured-posts--style-2 .cm-post figure,
.cm-featured-posts--style-2 .cm-post .cm-post-image,
.widget_featured_posts .cm-post > a,
.widget_featured_posts .post > a,
.widget_featured_posts .tg-post > a {
    flex: 0 0 35% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    display: block !important;
}

.cm-featured-posts--style-1 .cm-post > a img,
.cm-featured-posts--style-2 .cm-post > a img,
.cm-featured-posts--style-1 .cm-post img,
.cm-featured-posts--style-2 .cm-post img,
.widget_featured_posts .cm-post img,
.widget_featured_posts .post img,
.widget_featured_posts .tg-post img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 16/10 !important;
    transition: transform 0.3s ease !important;
}

.cm-featured-posts--style-1 .cm-post:hover img,
.cm-featured-posts--style-2 .cm-post:hover img,
.widget_featured_posts .cm-post:hover img,
.widget_featured_posts .post:hover img,
.widget_featured_posts .tg-post:hover img {
    transform: scale(1.05) !important;
}

.cm-featured-posts--style-1 .cm-post .cm-post-content,
.cm-featured-posts--style-2 .cm-post .cm-post-content,
.widget_featured_posts .cm-post .cm-post-content,
.widget_featured_posts .cm-post .article-content,
.widget_featured_posts .post .cm-post-content,
.widget_featured_posts .post .article-content,
.widget_featured_posts .tg-post .cm-post-content,
.widget_featured_posts .tg-post .article-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 !important;
}

.cm-featured-posts--style-1 .entry-title,
.cm-featured-posts--style-2 .entry-title,
.widget_featured_posts .entry-title,
.cm-featured-posts--style-1 .cm-entry-title,
.cm-featured-posts--style-2 .cm-entry-title,
.widget_featured_posts .cm-entry-title {
    font-size: 17px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
}

.cm-featured-posts--style-1 .entry-meta,
.cm-featured-posts--style-1 .cm-entry-meta,
.cm-featured-posts--style-2 .entry-meta,
.cm-featured-posts--style-2 .cm-entry-meta,
.widget_featured_posts .entry-meta,
.widget_featured_posts .cm-entry-meta {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 5px !important;
    font-family: 'Poppins', sans-serif !important;
    margin-top: 0 !important;
}

/* Hide excerpt and misaligned category badges to match the clean list style */
.cm-featured-posts--style-1 .cm-entry-summary,
.cm-featured-posts--style-2 .cm-entry-summary,
.widget_featured_posts .cm-entry-summary,
.cm-featured-posts--style-1 .cm-post-categories,
.cm-featured-posts--style-2 .cm-post-categories,
.widget_featured_posts .cm-post-categories {
    display: none !important;
}

/* Force half-width widget areas to be full-width (one category per row) */
.cm-column-half {
    flex-direction: column !important;
}

.cm-column-half .cm-one-half {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Responsive fallback */
@media (max-width: 768px) {
    .cm-featured-posts--style-1 .cm-post,
    .cm-featured-posts--style-2 .cm-post,
    .widget_featured_posts .tg-module-wrapper .cm-post,
    .widget_featured_posts .tg-module-wrapper .post,
    .widget_featured_posts .tg-module-wrapper .tg-post {
        width: 100% !important;
    }
    
    /* Reduce Slider Title Font Size for Mobile */
    .cm-featured-category-slider-widget .cm-entry-title a {
        font-size: 19px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    
    /* Adjust Slider Content Padding */
    .cm-featured-category-slider .cm-slide-content {
        padding: 20px 15px 15px !important;
    }

    /* Featured Posts Titles on Mobile */
    .cm-featured-posts--style-1 .entry-title,
    .cm-featured-posts--style-2 .entry-title,
    .widget_featured_posts .entry-title,
    .cm-featured-posts--style-1 .cm-entry-title,
    .cm-featured-posts--style-2 .cm-entry-title,
    .widget_featured_posts .cm-entry-title {
        font-size: 16px !important;
        word-break: break-word !important;
    }

    /* Fix Mobile Header "Mismatches" */
    .cm-header-builder .cm-mobile-row {
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    .cm-header-builder .cm-mobile-row .cm-header-bottom-row {
        background: #ffffff !important; /* Cleaner white */
        border-top: 1px solid #f0f0f0 !important;
    }

    /* Hamburger Toggle Polish */
    .cm-header-builder .cm-mobile-row .cm-menu-toggle {
        padding: 5px 10px !important;
        font-size: 13px !important;
    }
    
    /* Post Item Spacing inside grid on mobile */
    .cm-featured-posts--style-1 .cm-post, 
    .cm-featured-posts--style-2 .cm-post, 
    .widget_featured_posts .tg-module-wrapper .cm-post {
        padding-bottom: 12px !important;
        margin-bottom: 5px !important;
        gap: 12px !important;
        border-bottom: 1px solid #f5f5f5 !important;
    }

    /* Top Bar adjustments */
    .mediaone-top-bar {
        padding: 8px 0 !important;
        font-size: 12px !important;
    }
    
    .mediaone-top-bar .cm-container {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Regular Posts */
.cm-posts .cm-post {
    background: #ffffff;
    border: 1px solid #f0f4f8;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.cm-posts .cm-post:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-3px);
    border-color: #e2e8f0;
}

.cm-post-content .entry-title {
    font-size: 17px;
    margin-top: 12px;
    line-height: 1.5;
}

/* Category Badges Styling & Unique Colors */
.badge,
.entry-meta .cat-links a,
.cm-post-content .cat-links a {
    font-family: 'Poppins', 'Noto Sans Malayalam', sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff !important;
    padding: 4px 12px;
    border-radius: 20px; /* Pill shape */
    display: inline-block;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Dynamic Category Colors based on WordPress classes */
/* 
.category-kerala a, .cat-links .category-kerala, a[href*="/category/kerala/"] { background-color: #2e7d32 !important; } 
.category-india a, .cat-links .category-india, a[href*="/category/india/"] { background-color: #1565c0 !important; } 
.category-world a, .cat-links .category-world, a[href*="/category/world/"] { background-color: #6a1b9a !important; } 
.category-sports a, .cat-links .category-sports, a[href*="/category/sports/"] { background-color: #c62828 !important; } 
.category-entertainment a, .cat-links .category-entertainment, a[href*="/category/entertainment/"] { background-color: #d81b60 !important; } 
.category-technology a, .cat-links .category-technology, a[href*="/category/technology/"] { background-color: #00838f !important; } 
.category-lifestyle a, .cat-links .category-lifestyle, a[href*="/category/lifestyle/"] { background-color: #ef6c00 !important; } 
.category-business a, .cat-links .category-business, a[href*="/category/business/"] { background-color: #37474f !important; } 
.category-politics a, .cat-links .category-politics, a[href*="/category/politics/"] { background-color: #e65100 !important; } 
.category-health a, .cat-links .category-health, a[href*="/category/health/"] { background-color: #00701a !important; } 
*/

/* Micro-Animations & Images */
.cm-post-image img,
.widget_featured_posts img {
    transition: transform 0.5s ease;
}

.cm-post-image:hover img,
.widget_featured_posts .post:hover img {
    transform: scale(1.05);
}

/* -------------------------------------------------------------
 * 4. News Reading (Single Post) Page Customization
 * ------------------------------------------------------------- */
.single #cm-primary {
    background-color: #ffffff;
    padding: 40px;              /* more generous symmetric padding — desktop */
    border-radius: 12px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    box-sizing: border-box;
    overflow: hidden;           /* ensures negative margin image doesn't bleed out of card rounded corners */
}

/* Featured image: perfect full-bleed on desktop */
.single .cm-featured-image {
    margin: -40px -40px 32px -40px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.single .cm-featured-image img {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-height: 520px;
    object-fit: cover;
}

.single .entry-title {
    font-family: 'EGGIndulekhaUni', 'PanchariUni', sans-serif !important;
    font-size: 34px !important;
    line-height: 1.38 !important;
    color: #111111;
    margin-bottom: 20px;
    font-weight: 700 !important;
}

.single .entry-meta-single {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0;
    margin-bottom: 25px;
    font-size: 13px;
    color: #7f8c8d;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.single .entry-meta-single span i {
    margin-right: 5px;
    color: #d32f2f;
}

.single .cm-post-content p,
.single .cm-post-content li,
.single .cm-entry-summary p,
.single .cm-entry-summary li,
.single .entry-content p,
.single .entry-content li {
    font-family: 'PanchariUni', sans-serif;
    font-size: 21px;        /* Increased for better readability */
    line-height: 2.0;       /* Generous leading for Malayalam glyphs */
    color: #1a1a1a;
    margin-bottom: 28px;
    text-align: left;       /* Left alignment avoids large gaps from justify styling */
    word-break: break-word; /* Prevents long Malayalam words overflowing */
    word-spacing: normal;   /* Reset word spacing to avoid inherited issues */
}

/* Premium Article Header & Action bar */
.premium-article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

/* -------------------------------------------------------------
 * 5. Top Bar Social Icons Customization
 * ------------------------------------------------------------- */
.top-bar-social a.top-bar-social-link {
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.top-bar-social a.top-bar-social-link:hover {
    transform: translateY(-2px);
}

.top-bar-social a.social-link-facebook:hover { color: #1877F2; }
.top-bar-social a.social-link-instagram:hover { color: #E1306C; }
.top-bar-social a.social-link-x:hover { color: #000000; }
.top-bar-social a.social-link-threads:hover { color: #000000; }
.top-bar-social a.social-link-youtube:hover { color: #FF0000; }

/* -------------------------------------------------------------
 * 6. Logo Customization
 * ------------------------------------------------------------- */
#cm-site-branding img.custom-logo,
#cm-site-branding img.child-custom-logo {
    transition: transform 0.3s ease, filter 0.3s ease;
}

#cm-site-branding a.custom-logo-link:hover img.custom-logo,
#cm-site-branding a.custom-logo-link:hover img.child-custom-logo {
    transform: scale(1.03);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}

.premium-author-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-author-avatar img {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 2px solid #eaeaea;
}

.premium-author-info {
    display: flex;
    flex-direction: column;
}

.premium-author-name {
    font-family: 'Poppins', 'PanchariUni', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #111111;
}

.premium-post-date {
    font-size: 12px;
    color: #888888;
    margin-top: 2px;
}

.premium-post-date i {
    color: #d32f2f;
    margin-right: 3px;
}

.premium-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Google News Follow button styling */
.google-news-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: #ffffff;
    border: 1.5px solid #dadce0;
    border-radius: 20px;
    padding: 7px 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #3c4043 !important;
    text-decoration: none !important;
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 1px 3px rgba(60,64,67,0.12);
    white-space: nowrap;
}

.google-news-follow-btn:hover {
    background-color: #f0f6ff;
    box-shadow: 0 2px 6px rgba(60,64,67,0.2);
    border-color: #4285F4;
    color: #4285F4 !important;
}

/* Share Label */
.share-label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #888888;
    font-weight: 600;
}

.premium-share-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-share-links .share-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.premium-share-links .share-icon:hover {
    transform: scale(1.12);
    opacity: 0.92;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.premium-share-links .share-icon.fb      { background-color: #1877f2; }
.premium-share-links .share-icon.twitter  { background-color: #000000; }
.premium-share-links .share-icon.whatsapp { background-color: #25d366; }
.premium-share-links .share-icon.linkedin { background-color: #0077b5; }
.premium-share-links .share-icon.telegram { background-color: #229ed9; }

/* Article horizontal divider */
.article-divider {
    border: none;
    border-top: 1px solid #eeeeee;
    margin: 35px 0 25px 0;
}

/* Bottom Social Share Bar */
.article-bottom-share {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8f9fa;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.bottom-share-label {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #444444;
    margin-right: 4px;
}

.bottom-share-label i {
    color: #d32f2f;
    margin-right: 5px;
}

.bottom-share-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bottom-share-icons .share-icon.lg {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 8px; /* Square-ish for bottom bar */
}

/* Inline Read More Button */
.article-readmore-wrapper {
    text-align: center;
    margin: 20px 0 35px 0;
}

.btn-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #d32f2f;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 32px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(211,47,47,0.35);
}

.btn-readmore:hover {
    background-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(211,47,47,0.4);
}

/* Read the Next Article Card */
.read-next-article-nav {
    display: flex;
    justify-content: center;
    margin: 30px 0 20px 0;
}

.read-next-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 24px 32px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}

.read-next-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.read-next-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #d32f2f;
    background: #fff0f0;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #fcc;
}

.read-next-title {
    font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
    font-size: 17px;
    font-weight: 700;
    color: #111111 !important;
    text-decoration: none !important;
    line-height: 1.5;
    display: block;
}

.read-next-title:hover {
    color: #d32f2f !important;
}

.btn-read-next {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: #111111;
    border: none;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 22px;
    border-radius: 5px;
    text-decoration: none !important;
    transition: background-color 0.2s, transform 0.2s;
    margin-top: 5px;
}

.btn-read-next:hover {
    background-color: #d32f2f;
    transform: translateX(3px);
    color: #ffffff !important;
}

/* Sassy Social Share Overrides - Hide native standard share bar since we built a premium custom bar */
.heateor_sss_sharing_container {
    display: none !important;
}

/* Author Box */
.author-box {
    display: none !important;
}

/* -------------------------------------------------------------
 * 5. Footer & Sidebar Enhancements
 * ------------------------------------------------------------- */
#colophon {
    background-color: #121212;
    color: #bbbbbb;
    border-top: 4px solid #d32f2f;
}

#colophon a {
    color: #ffffff;
}

#colophon a:hover {
    color: #d32f2f;
}

.footer-socket-wrapper {
    background-color: #0a0a0a;
    border-top: 1px solid #222222;
    padding: 20px 0;
}

/* -------------------------------------------------------------
 * 7. Sidebar — Recent Posts Widget with Thumbnails
 * ------------------------------------------------------------- */
/* Widget title styling — professional news style */
.cm-widget-title {
    border-bottom: 2px solid #e8e8e8 !important;
    margin-bottom: 15px !important;
    background: transparent !important;
    padding: 0 0 10px 0 !important;
    line-height: 1 !important;
}

.cm-widget-title span {
    font-family: 'Poppins', 'Noto Sans Malayalam', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 0 12px 12px !important;
    border-radius: 0 !important;
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    border-left: 4px solid #d32f2f !important;
    color: #1a1a1a !important;
    position: relative;
    bottom: -1px;
}

/* List reset */
.cm-recent-posts-thumbs {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each post row: thumbnail left, text right */
.cm-recent-post-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.15s ease !important;
}

.cm-recent-post-item:last-child {
    border-bottom: none !important;
}

.cm-recent-post-item:hover {
    background: #f9fafb !important;
}

/* Thumbnail link wrapper */
.cm-recent-post-thumb-link {
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    display: block !important;
}

.cm-recent-post-thumb-link img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 6px !important;
    transition: transform 0.2s ease !important;
}

.cm-recent-post-item:hover .cm-recent-post-thumb-link img {
    transform: scale(1.05) !important;
}

/* Text info block */
.cm-recent-post-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Post title */
.cm-recent-post-title {
    font-family: 'Noto Sans Malayalam', 'PanchariUni', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.cm-recent-post-title:hover {
    color: #257BC1 !important;
}

/* Post date */
.cm-recent-post-date {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    color: #9ca3af !important;
    letter-spacing: 0.2px !important;
}

/* No-thumbnail fallback — just indent the text a bit */
.cm-recent-post-item.no-thumb .cm-recent-post-info {
    padding-left: 0 !important;
}

/* Hide the old default UL styles if any leak through */
.widget_recent_entries ul:not(.cm-recent-posts-thumbs) {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .single .entry-title {
        font-size: 24px !important;
    }
    
    .single #cm-primary {
        padding: 15px;
    }
    
    .main-navigation ul li a {
        padding: 10px 15px !important;
    }

    .premium-article-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .premium-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .google-news-follow-btn {
        font-size: 11px;
        padding: 6px 12px;
    }

    .article-bottom-share {
        flex-direction: column;
        align-items: flex-start;
    }

    .read-next-card {
        padding: 18px 20px;
    }
}

/* -------------------------------------------------------------
 * 6. Archive & Category Page Enhancements (One News Per Row Grid)
 * ------------------------------------------------------------- */
/* Force 1-column layout (one news in one row) on archive and category pages */
.archive .cm-posts {
    grid-template-columns: 1fr !important;
}

/* Style posts as flex rows: image on left, text on right */
.archive .cm-posts .post {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    background: #ffffff !important;
    border: 1px solid #f0f4f8 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    align-items: stretch !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.archive .cm-posts .post:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
    border-color: #e2e8f0 !important;
}

/* Image wrapper — stretches full card height, no blank gap */
.archive .cm-posts .post .cm-featured-image {
    flex: 0 0 32% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    min-height: 160px !important;
}

/* The anchor inside the image wrapping — must fill the wrapper */
.archive .cm-posts .post .cm-featured-image a {
    display: flex !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
}

.archive .cm-posts .post .cm-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    flex: 1 !important;
    transition: transform 0.3s ease !important;
}

.archive .cm-posts .post:hover .cm-featured-image img {
    transform: scale(1.05) !important;
}

/* Post content wrapper */
.archive .cm-posts .post .cm-post-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    position: relative !important;
    min-width: 0 !important;
}

/* Category Badge */
.archive .cm-posts .post .cm-post-categories a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #d32f2f !important;
    background: #fff0f0 !important;
    border: 1px solid #ffcccc !important;
    padding: 4px 18px !important;
    border-radius: 30px !important;
    transition: all 0.2s ease !important;
    line-height: 1.8 !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
}

.archive .cm-posts .post .cm-post-categories a:hover {
    color: #ffffff !important;
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
    text-decoration: none !important;
}


/* Category Header Meta Wrapper — badge on left */
.archive .cm-posts .post .cm-entry-header-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    /* leave room on the right so badge never collides with abs-positioned date */
    padding-right: 210px !important;
}

/* Post Metadata — absolute top-right inside .cm-post-content (which has position:relative) */
.archive .cm-posts .post .cm-below-entry-meta {
    font-size: 12px !important;
    color: #71717a !important;
    font-family: 'Poppins', sans-serif !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    /* Anchored to .cm-post-content which has position:relative */
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
}

.archive .cm-posts .post .cm-below-entry-meta a {
    color: #71717a !important;
    text-decoration: none !important;
}

.archive .cm-posts .post .cm-below-entry-meta svg {
    fill: #71717a !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

/* Title */
.archive .cm-posts .post .cm-entry-title {
    font-size: 18px !important;
    line-height: 1.55 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
    font-weight: 700 !important;
}

.archive .cm-posts .post .cm-entry-title a {
    color: #1a1a1a !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    transition: color 0.2s ease !important;
}

.archive .cm-posts .post .cm-entry-title a:hover {
    color: #d32f2f !important;
}

/* Excerpt */
.archive .cm-posts .post .cm-entry-summary p {
    font-family: 'Noto Sans Malayalam', 'PanchariUni', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #4b5563 !important;
    margin-bottom: 16px !important;
}

/* Read More Button */
.archive .cm-posts .post .cm-entry-button {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #257BC1 !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background-color 0.2s, transform 0.2s !important;
    width: fit-content !important;
    margin-top: auto !important;
}

.archive .cm-posts .post .cm-entry-button:hover {
    background-color: #1d6096 !important;
    transform: translateY(-1px) !important;
}

/* Mobile responsive layout for category pages */
@media (max-width: 768px) {
    .archive .cm-posts .post {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 16px !important;
    }
    .archive .cm-posts .post .cm-featured-image {
        width: 100% !important;
        flex: none !important;
    }
    .archive .cm-posts .post .cm-entry-title {
        font-size: 18px !important;
    }
}

/* -------------------------------------------------------------
 * 8. Custom Single Post Navigation Redesign
 * ------------------------------------------------------------- */
.custom-post-navigation {
    margin: 40px 0;
    padding-top: 25px;
    border-top: 1px solid #eeeeee;
}

.nav-links-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

.nav-link-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 16px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    min-width: 0; /* Prevents overflow inside flex container */
}

.nav-link-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: #d32f2f;
    transform: translateY(-2px);
}

.nav-link-card.empty {
    background: transparent;
    border: 1px dashed #e0e0e0;
    box-shadow: none;
    pointer-events: none;
}

.nav-card-label {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d32f2f;
    background: #fff0f0;
    padding: 2px 10px;
    border-radius: 20px;
    width: fit-content;
    margin-bottom: 5px;
}

.nav-next-card .nav-card-label {
    color: #1565c0;
    background: #f0f6ff;
}

.nav-card-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-card-thumbnail {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f7f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nav-card-placeholder {
    font-size: 24px;
    color: #cbd5e1;
}

.nav-card-title {
    margin: 0;
    font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.nav-link-card:hover .nav-card-title {
    color: #d32f2f !important;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .nav-links-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-link-card.empty {
        display: none;
    }
}

/* Category Page Header (.cm-page-header) Redesign to Pill Style */
.cm-page-header .cm-page-title {
    border-bottom: none !important;
    margin-bottom: 25px !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.cm-page-header .cm-page-title span,
.cm-page-header span {
    font-family: 'Poppins', 'Noto Sans Malayalam', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    
    /* Blue Theme Pill Style (matches LATEST NEWS pill) */
    color: #1565c0 !important;
    background: #f0f6ff !important;
    border: 1px solid #c2dbff !important;
}

/* -------------------------------------------------------------
 * 11. Redesign Category Badges (.cm-post-categories a) to Premium Pill
 * ------------------------------------------------------------- */
.cm-post-categories a,
.cm-entry-header-meta .cm-post-categories a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #d32f2f !important;
    background: #fff0f0 !important;
    border: 1px solid #ffcccc !important;
    padding: 4px 18px !important;
    border-radius: 30px !important;
    transition: all 0.2s ease !important;
    line-height: 1.8 !important;
    display: inline-block !important;
}

.cm-post-categories a:hover,
.cm-entry-header-meta .cm-post-categories a:hover {
    color: #ffffff !important;
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
    text-decoration: none !important;
}

/* -------------------------------------------------------------
 * 9. Archive/Category — Read More Hyperlink
 * ------------------------------------------------------------- */
.cm-read-more-link {
    display: inline-block;
    margin-top: 4px;
    font-family: 'Poppins', 'Noto Sans Malayalam', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #d32f2f;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.cm-read-more-link:hover {
    color: #b71c1c;
    text-decoration: underline;
}

/* -------------------------------------------------------------
 * 10. Sticky Navbar — Freeze on Scroll (JS-powered)
 * ------------------------------------------------------------- */
.cm-desktop-row .cm-header-bottom-row.navbar-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* =============================================================
 * 7. LATEST NEWS PAGE — Match Archive/Kerala Card Style
 * The home.php blog post page uses .cm-layout-2-style-1
 * ============================================================= */

/* Single column grid */
.cm-posts.cm-layout-2-style-2,
.cm-posts.cm-layout-2-style-1 {
    grid-template-columns: 1fr !important;
    display: block !important;
}

/* Horizontal card: image left (32%), text right — same as Kerala page */
.cm-posts.cm-layout-2-style-1 .post,
.cm-posts.cm-layout-2-style-1 article {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 24px !important;
    background: #ffffff !important;
    border: 1px solid #f0f4f8 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    grid-column: 1 / -1 !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    position: relative !important;
}

.cm-posts.cm-layout-2-style-1 .post:hover,
.cm-posts.cm-layout-2-style-1 article:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
    border-color: #e2e8f0 !important;
}

/* Image: 32% of card width, fills height */
.cm-posts.cm-layout-2-style-1 .cm-featured-image {
    flex: 0 0 32% !important;
    width: 32% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    min-height: 160px !important;
}

.cm-posts.cm-layout-2-style-1 .cm-featured-image a {
    display: flex !important;
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
}

.cm-posts.cm-layout-2-style-1 .cm-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    flex: 1 !important;
    border-radius: 8px !important;
    transition: transform 0.3s ease !important;
}

.cm-posts.cm-layout-2-style-1 .post:hover .cm-featured-image img,
.cm-posts.cm-layout-2-style-1 article:hover .cm-featured-image img {
    transform: scale(1.04) !important;
}

/* Content area: fills available space */
.cm-posts.cm-layout-2-style-1 .cm-post-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    position: relative !important;
    min-width: 0 !important;
}

/* Category badge */
.cm-posts.cm-layout-2-style-1 .cm-post-categories a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #d32f2f !important;
    background: #fff0f0 !important;
    border: 1px solid #ffcccc !important;
    padding: 4px 14px !important;
    border-radius: 30px !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.cm-posts.cm-layout-2-style-1 .cm-post-categories a:hover {
    color: #ffffff !important;
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}

/* Header meta row: badge left, date/author right */
.cm-posts.cm-layout-2-style-1 .cm-entry-header-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Date/author: absolute top-right for desktop */
.cm-posts.cm-layout-2-style-1 .cm-below-entry-meta {
    font-size: 12px !important;
    color: #71717a !important;
    font-family: 'Poppins', sans-serif !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    position: absolute !important;
    top: 5px !important;
    right: 0 !important;
}

@media screen and (max-width: 767px) {
    .cm-posts.cm-layout-2-style-1 .cm-entry-header-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .cm-posts.cm-layout-2-style-1 .cm-below-entry-meta {
        position: static !important;
        margin-top: 4px !important;
        font-size: 11px !important;
    }
}

.cm-posts.cm-layout-2-style-1 .cm-below-entry-meta a {
    color: #71717a !important;
    text-decoration: none !important;
}

.cm-posts.cm-layout-2-style-1 .cm-below-entry-meta svg {
    fill: #71717a !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}

/* Title */
.cm-posts.cm-layout-2-style-1 .cm-entry-title {
    font-size: 20px !important;
    line-height: 1.55 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-family: 'Noto Sans Malayalam', 'EGGIndulekhaUni', sans-serif !important;
    font-weight: 700 !important;
}

.cm-posts.cm-layout-2-style-1 .cm-entry-title a {
    color: #1a1a1a !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
    transition: color 0.2s ease !important;
}

.cm-posts.cm-layout-2-style-1 .cm-entry-title a:hover {
    color: #d32f2f !important;
}

/* Excerpt */
.cm-posts.cm-layout-2-style-1 .cm-entry-summary p,
.cm-posts.cm-layout-2-style-1 .cm-entry-summary {
    font-family: 'Noto Sans Malayalam', 'PanchariUni', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #4b5563 !important;
    margin-bottom: 14px !important;
}

/* Read More link */
.cm-posts.cm-layout-2-style-1 .cm-entry-button,
.cm-posts.cm-layout-2-style-1 .cm-read-more-link {
    display: inline-flex !important;
    align-items: center !important;
    color: #d32f2f !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    letter-spacing: 0.2px !important;
    margin-top: auto !important;
    transition: color 0.2s ease !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.cm-posts.cm-layout-2-style-1 .cm-entry-button:hover,
.cm-posts.cm-layout-2-style-1 .cm-read-more-link:hover {
    color: #b71c1c !important;
    text-decoration: underline !important;
}


/* =============================================================
 * COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL
 * Breakpoint: max-width 767px (standard mobile devices)
 * ============================================================= */
@media screen and (max-width: 767px) {

    /* ---- 1. PREVENT HORIZONTAL OVERFLOW ---- */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* ---- 2. HEADER: reduce vertical whitespace ---- */
    .cm-header-builder .cm-mobile-row .cm-header-main-row {
        padding: 8px 0 !important;
    }

    .cm-header-builder .cm-mobile-row img.custom-logo {
        max-height: 42px !important;
    }

    /* Top bar: single compact row */
    .mediaone-top-bar {
        padding: 5px 12px !important;
        font-size: 11px !important;
    }

    .mediaone-top-bar .cm-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        text-align: left !important;
    }

    .top-bar-social {
        gap: 10px !important;
        font-size: 12px !important;
    }

    /* Remove double border below hamburger */
    .cm-header-builder .cm-mobile-row .cm-header-bottom-row {
        border-top: 1px solid #eeeeee !important;
        border-bottom: none !important;
        background: #ffffff !important;
    }

    /* Reduce header logo row excessive vertical padding */
    .cm-main-row {
        padding: 10px 0 !important;
    }

    /* Remove blue focus highlight on hamburger button */
    .cm-menu-toggle:focus,
    .cm-menu-toggle:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    /* ---- 3. SLIDER: shrink font, prevent overflow ---- */
    .cm-slider-area,
    .cm-beside-slider-widget {
        border-radius: 8px !important;
        overflow: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .cm-featured-category-slider-widget .cm-entry-title a,
    .cm-featured-category-slider-widget .cm-entry-title {
        font-size: 17px !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .cm-featured-category-slider .cm-slide-content {
        padding: 16px 14px 12px !important;
    }

    /* bxSlider: prevent extra slide peeking out */
    .bx-wrapper,
    .bx-viewport {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ---- 4. HOME PAGE WIDGET GRID ---- */
    .cm-front-page-top-section {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .cm-featured-posts--style-1 .cm-post,
    .cm-featured-posts--style-2 .cm-post,
    .widget_featured_posts .tg-module-wrapper .cm-post,
    .widget_featured_posts .tg-module-wrapper .post,
    .widget_featured_posts .tg-module-wrapper .tg-post {
        width: 100% !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
    }

    .cm-featured-posts--style-1 .cm-post > a,
    .cm-featured-posts--style-2 .cm-post > a,
    .cm-featured-posts--style-1 .cm-post figure,
    .cm-featured-posts--style-2 .cm-post figure,
    .widget_featured_posts .cm-post > a,
    .widget_featured_posts .post > a {
        flex: 0 0 85px !important;
        max-width: 85px !important;
    }

    .cm-featured-posts--style-1 .entry-title,
    .cm-featured-posts--style-2 .entry-title,
    .widget_featured_posts .entry-title,
    .cm-featured-posts--style-1 .cm-entry-title,
    .cm-featured-posts--style-2 .cm-entry-title,
    .widget_featured_posts .cm-entry-title {
        font-size: 15px !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
    }

    .cm-featured-posts--style-1 .entry-meta,
    .cm-featured-posts--style-2 .entry-meta,
    .widget_featured_posts .entry-meta,
    .cm-featured-posts--style-1 .cm-entry-meta,
    .cm-featured-posts--style-2 .cm-entry-meta,
    .widget_featured_posts .cm-entry-meta {
        font-size: 10px !important;
    }

    /* ---- 5. SINGLE POST PAGE ---- */
    .single #cm-primary {
        padding: 0 0 20px 0 !important; /* text padding handled by inner elements */
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .single .cm-featured-image {
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }

    .single .cm-post-content {
        padding: 0 20px !important; /* perfectly symmetric padding on mobile article text */
    }

    .single .entry-title {
        font-size: 22px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        margin-bottom: 12px !important;
    }

    .single .cm-post-content p,
    .single .cm-post-content li,
    .single .entry-content p,
    .single .entry-content li {
        font-size: 18px !important;
        line-height: 1.85 !important;
        margin-bottom: 20px !important;
    }

    .premium-article-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .premium-header-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .article-bottom-share {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 14px !important;
    }

    .read-next-card {
        padding: 16px 14px !important;
    }

    .nav-links-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .nav-link-card.empty {
        display: none !important;
    }

    /* ---- 6. ARCHIVE & CATEGORY PAGES ---- */
    .archive .cm-posts .post {
        flex-direction: column !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    .archive .cm-posts .post .cm-featured-image {
        width: 100% !important;
        flex: none !important;
        min-height: 160px !important;
    }

    .archive .cm-posts .post .cm-featured-image img {
        width: 100% !important;
        height: 160px !important;
    }

    /* Fix absolute-positioned date => make it flow normally */
    .archive .cm-posts .post .cm-entry-header-meta {
        padding-right: 0 !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .archive .cm-posts .post .cm-below-entry-meta {
        position: static !important;
        white-space: normal !important;
        margin-top: 4px !important;
    }

    .archive .cm-posts .post .cm-entry-title,
    .archive .cm-posts .post .cm-entry-title a {
        font-size: 17px !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }

    .archive .cm-posts .post .cm-entry-summary p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* ---- 7. LATEST NEWS (home.php layout) ---- */
    .cm-posts.cm-layout-2-style-1 .post,
    .cm-posts.cm-layout-2-style-1 article {
        flex-direction: column !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    .cm-posts.cm-layout-2-style-1 .cm-featured-image {
        flex: none !important;
        width: 100% !important;
    }

    .cm-posts.cm-layout-2-style-1 .cm-featured-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 8px !important;
    }

    /* ---- 8. SCROLL-TO-TOP BUTTON: prevent overlap ---- */
    #scroll-up,
    .go-to-top,
    .scrollToTop,
    .cmScrollUp,
    [class*="scroll-up"],
    [class*="scrollup"] {
        bottom: 65px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        z-index: 998 !important;
    }

    /* ---- 9. CONTAINER / ROW PADDING ---- */
    .cm-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ---- 10. WIDGET TITLES ---- */
    .cm-widget-title,
    .tg-module-title {
        margin-bottom: 10px !important;
    }
}