/*
Theme Name: Apkmoodz
Theme URI: https://www.fiverr.com/rankwriter2020
Author: RankWriter2020
Author URI: https://www.fiverr.com/rankwriter2020
Description: High-performance, mobile-first WordPress theme designed by RankWriter2020.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apkmoodz
tags: blog, news, fast, seo, adsense
*/

:root {
    --primary-color: #0d47a1;
    /* Deep Finance Blue */
    --primary-dark: #002171;
    --secondary-color: #00c853;
    /* Growth Green */
    --text-color: #2c3e50;
    --bg-color: #f8f9fa;
    --header-bg: #ffffff;
    --header-text: #2c3e50;
    --footer-bg: #1a237e;
    /* Darker Blue */
    --footer-text: #ecf0f1;
    --accent-color: #ffAB00;
    /* Amber for CTA */
    --gap: 24px;
    --container-width: 1280px;
    --nav-height: 70px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e0e0e0;
        --bg-color: #121212;
        --header-bg: #1e1e1e;
        --header-text: #ffffff;
        --primary-color: #42a5f5;
        --secondary-color: #69f0ae;
    }
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Layout Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}

/* -----------------------
   HEADER & LOGO REDESIGN
   ----------------------- */
.site-header {
    background: var(--header-bg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 9999;
    /* Highest priority */
    height: var(--nav-height);
    display: flex;
    align-items: center;
    border-bottom: 3px solid var(--secondary-color);
    overflow: visible;
    /* Allow menu overlay */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* CSS-Only Finance Logo */
.site-logo a {
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The "Icon" (Graph styling) */
.site-logo a::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background:
        linear-gradient(to top, var(--secondary-color) 40%, transparent 40%) 0 100% / 6px 100%,
        linear-gradient(to top, var(--secondary-color) 70%, transparent 70%) 9px 100% / 6px 100%,
        linear-gradient(to top, var(--secondary-color) 100%, transparent 100%) 18px 100% / 6px 100%;
    background-repeat: no-repeat;
}

.site-logo a span {
    color: var(--text-color);
    /* "Apk" part */
}

/* Navigation */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-navigation a {
    color: var(--header-text);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Submenu Indicator (Chevron) */
.menu-item-has-children>a::after {
    content: '';
    /* CSS Chevron */
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-left: 4px;
    margin-bottom: 2px;
    transition: transform 0.3s ease;
}

/* Rotate on Parent Hover (Desktop) */
.menu-item-has-children:hover>a::after {
    transform: rotate(-135deg);
    margin-bottom: -2px;
}

/* Underline Hover Effect */
.main-navigation>ul>li>a::before {
    /* Changed to before to avoid conflict with icon */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: width 0.3s;
}

.main-navigation>ul>li:hover>a::before {
    width: 100%;
}

/* Special Button Style for specific items if needed, e.g. "Join" (optional) */

/* Dropdown Menus */
.main-navigation ul li {
    position: relative;
}

.main-navigation ul ul {
    display: none;
    /* Flex on hover */
    position: absolute;
    top: 100%;
    /* Below parent */
    left: 0;
    background: var(--header-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    border-radius: 8px;
    flex-direction: column;
    padding: 10px 0;
    margin-top: 10px;
    /* Gap for hover safety */
    z-index: 999;
}

/* Little bridge to prevent closing when moving mouse down */
.main-navigation ul li::after {
    /* Make sure this pseudo doesn't conflict */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    z-index: 100;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li:focus-within>ul {
    display: flex;
    animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-navigation ul ul li {
    min-width: 200px;
    border-bottom: 1px solid #f0f0f0;
}

.main-navigation ul ul li:last-child {
    border-bottom: none;
}

.main-navigation ul ul li a {
    padding: 10px 20px;
    /* Reduced vertical padding */
    color: #333;
    font-size: 0.95rem;
    /* Clean consistency */
    display: block;
    transition: all 0.2s ease;
}

.main-navigation ul ul li a:hover {
    background: #fdfdfd;
    padding-left: 25px;
    /* Subtle slide */
    color: var(--primary-color);
}

.main-navigation ul ul a::after {
    display: none;
}

/* No underline in dropdown */

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--header-text);
}

/* Default: Hide Dropdown Toggle Button (Show only on Mobile) */
.dropdown-toggle {
    display: none;
}

@media (max-width: 900px) {

    /* Smaller Logo for Mobile */
    .site-logo a {
        font-size: 1.4rem;
        gap: 5px;
    }

    .site-logo a::before {
        width: 18px;
        height: 18px;
    }

    .menu-toggle {
        display: block;
        padding: 5px 10px;
        margin-left: auto;
        /* Position Adjustment: Push down */
        margin-top: 8px;
        z-index: 1001;
        font-size: 2.2rem;
        /* Larger Click Target */
        line-height: 1;
        outline: none;
        align-self: center;
        /* Ensure alignment */
    }

    /* Bigger touch target */
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        /* Solid White */
        padding: 0;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        /* Stronger Shadow */
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        border-top: 1px solid #eee;
        z-index: 99999;
        /* Max Z-Index */
        visibility: hidden;
        /* Transition helper */
        opacity: 0;
    }

    /* Active State Class */
    .main-navigation.toggled {
        display: block !important;
        visibility: visible;
        opacity: 1;
        animation: none;
        /* Disable animation to rule out bugs */
        transition: opacity 0.3s ease;
        /* Simple fade */
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* CRITICAL FIX: Vertical Layout */
    .main-navigation ul {
        display: flex;
        flex-direction: column !important;
        /* Force Vertical */
        gap: 0;
        width: 100%;
    }

    /* Mobile Menu Items - Clean & Compact */
    .main-navigation li {
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #f5f5f5;
        position: relative;
        /* Anchor for toggle button */
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    /* Fix Link Width */
    .main-navigation a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        /* Fix padding issues */
        padding: 12px 55px 12px 15px;
        /* Enough space for button */
        color: #333;
        font-weight: 500;
        font-size: 0.95rem;
        text-decoration: none;
        word-wrap: break-word;
        /* Handle long text */
        line-height: 1.4;
    }

    /* CRITICAL: Hide Default Desktop Arrows */
    .main-navigation .menu-item-has-children>a::after,
    .main-navigation li>a::after {
        content: none !important;
        display: none !important;
        border: none !important;
    }

    /* Mobile Submenu Container */
    .main-navigation ul ul {
        display: none;
        background: #f9f9f9;
        margin: 0;
        padding: 0;
        width: 100%;
        border-top: 1px solid #eee;
    }

    /* Show when toggled */
    .main-navigation ul ul.toggled-show {
        display: block;
    }

    /* Mobile Submenu Items (Level 2) */
    .main-navigation ul ul li a {
        padding: 12px 20px 12px 25px;
        /* Indent */
        font-size: 0.9rem;
        color: #555;
        border-bottom: 1px solid #eaeaea;
    }

    /* Mobile Submenu Items (Level 3 - Deep) */
    .main-navigation ul ul ul li a {
        padding-left: 40px;
        /* More Indent */
        background: #f0f0f0;
    }

    /* Toggle Button Style - Perfect Alignment */
    .dropdown-toggle {
        display: flex;
        /* Show on Mobile */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        /* Stretch full height of row */
        width: 50px;
        /* Large touch zone */
        background: rgba(0, 0, 0, 0.02);
        /* Slight tint to separate */
        border: none;
        border-left: 1px solid #f0f0f0;
        color: #888;
        cursor: pointer;
        outline: none;
        align-items: center;
        justify-content: center;
        z-index: 20;
    }

    .dropdown-toggle:hover,
    .dropdown-toggle.active {
        background: rgba(0, 0, 0, 0.05);
        /* Darker on interact */
        color: var(--primary-color);
    }

    .dropdown-toggle .dashicons {
        transition: transform 0.3s ease;
    }

    /* Remove hover underline */
    .main-navigation>ul>li>a::before,
    .main-navigation>ul>li:hover>a::before {
        display: none;
    }

    /* Submenu Indicator Rotation on Mobile (Always down or rotated if open?) 
       For simple CSS hover, let's keep it consistent */
    .menu-item-has-children>a::after {
        border-color: var(--primary-color);
        transform: rotate(45deg);
        /* Reset rotation */
    }

    /* Mobile Dropdowns - Always Block for usability or Hover? 
       "Hover" on mobile is tricky. Best practice: Indented Static List.
    */
    .main-navigation ul ul {
        position: static;
        box-shadow: none;
        padding: 0;
        background: rgba(0, 0, 0, 0.03);
        /* Slight grey bg for submenu */
        display: block;
        /* Always show submenus on mobile for easy access */
        margin: 0;
        min-width: unset;
        border-left: 4px solid var(--secondary-color);
        /* Visual marker */
    }

    .main-navigation ul ul a {
        padding-left: 2.5rem;
        /* Indent */
        font-size: 1rem;
        color: var(--text-color);
        font-weight: normal;
    }

    .main-navigation ul ul a:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    /* Remove hover animation on mobile */
    .main-navigation ul li:hover>ul {
        animation: none;
    }
}

/* Main Content */
.site-main {
    padding: 2rem 0;
    min-height: 60vh;
}

/* Grid Layout */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}

/* --- POST CARD STYLES (Professional) --- */
.post-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Soft, premium shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-5px);
}

.post-thumbnail {
    height: 200px;
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-content {
    padding: 1rem;
}

.post-title h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.post-title a {
    color: var(--text-color);
}

.post-excerpt {
    font-size: 0.95rem;
    color: #666;
}

/* --- SINGLE POST MODERN STYLES --- */

/* Card Container */
.single-article-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    /* Added internal spacing */
    margin-bottom: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for better separation */
}

@media (max-width: 768px) {
    .single-article-card {
        padding: 20px;
        /* Reduced from 40px */
        border-radius: 0;
        /* Align with edge on small screens? Optional. */
        margin-bottom: 20px;
    }

    .entry-title {
        font-size: 1.8rem;
        /* Smaller Title */
    }

    .author-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .author-avatar img {
        margin-bottom: 10px;
    }
}

/* Ensure images don't overflow */
.single-article-card img,
.modern-content img,
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Hero Header */
.modern-hero {
    margin-bottom: 30px;
}

.hero-meta-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.cat-pill {
    background: var(--primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}

.read-time {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
}

.read-time::before {
    content: '•';
    margin-right: 10px;
    color: #ddd;
}

.entry-title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #222;
    margin-bottom: 20px;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.entry-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.single-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Modern Content Typography */
.modern-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    /* Clean Sans */
}

.modern-content p {
    margin-bottom: 1.5em;
}

.modern-content h2 {
    font-size: 1.8rem;
    margin-top: 2em;
    margin-bottom: 0.8em;
    color: #111;
    position: relative;
    padding-left: 15px;
    border-left: 4px solid var(--primary-color);
}

.modern-content h3 {
    font-size: 1.5rem;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #333;
}

.modern-content ul,
.modern-content ol {
    margin-bottom: 1.5em;
    padding-left: 20px;
}

.modern-content li {
    margin-bottom: 0.5em;
}

.modern-content blockquote {
    background: #f9f9f9;
    border-left: 5px solid var(--primary-color);
    margin: 2em 0;
    padding: 1.5em;
    font-style: italic;
    color: #555;
    border-radius: 0 8px 8px 0;
}

/* Author Box */
.author-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    margin-top: 60px;
    margin-bottom: 40px;
    border: 1px solid #eee;
}

.author-avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.author-info h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.author-info p {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
}

/* Comments Section - Modern */
.comments-area {
    margin-top: 50px;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-body {
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.comment-author .avatar {
    border-radius: 50%;
    float: left;
    margin-right: 15px;
    width: 50px;
}

.fn {
    font-weight: 700;
    font-size: 1rem;
    color: #222;
}

.comment-metadata {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 15px;
}

.comment-content p {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.reply a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

/* Comment Form Fixes */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #fdfdfd;
    box-sizing: border-box;
    /* Critical for preventing overflow */
    max-width: 100%;
}

.form-submit .submit {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.3s;
}

.form-submit .submit:hover {
    opacity: 0.9;
}

/* Responsive Single */
@media (max-width: 768px) {
    .single-article-card {
        padding: 20px;
        /* Reduce padding on mobile */
    }

    .entry-title {
        font-size: 1.8rem;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .single-featured-image img {
        border-radius: 8px;
        /* good */
    }
}

.entry-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.entry-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

.entry-content {
    font-size: 1.125rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

/* Footer */
.site-footer {
    background: linear-gradient(135deg, var(--footer-bg) 0%, #001064 100%);
    color: var(--footer-text);
    padding: 4rem 0 1rem;
    margin-top: 4rem;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Footer Brand */
.footer-logo {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.footer-logo span {
    color: var(--secondary-color);
}

.footer-desc {
    opacity: 0.8;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    max-width: 300px;
}

/* Footer Subscribe (Replaces Social Icons) */
.footer-subscribe h4 {
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.footer-subscribe input:focus {
    outline: 2px solid var(--secondary-color);
}

.footer-subscribe button:hover {
    background: #fff;
    color: var(--primary-color);
}

/* Footer Widgets & Links */
.footer-widget h3 {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-widget h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--secondary-color);
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget li {
    margin-bottom: 0.8rem;
}

.footer-widget a {
    color: #b0bec5;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-widget a:hover {
    color: var(--secondary-color);
    transform: translateX(5px);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 3rem 0 1rem;
        text-align: left;
    }

    .footer-widget h3::after {
        left: 0;
    }

    /* Keep aligned left */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* --- MODERN LAYOUT & SIDEBAR --- */

/* 4. Layout & Grid System */
.home-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    /* Main Content + Sidebar */
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .home-layout-grid {
        grid-template-columns: 1fr 300px;
        gap: 30px;
    }
}

@media (max-width: 900px) {
    .home-layout-grid {
        display: flex;
        flex-direction: column;
    }

    .sidebar-area {
        margin-top: 40px;
    }
}

/* Page Headers (Blog/Category) */
.page-header {
    text-align: center;
    margin: 3rem 0;
    padding: 0 15px;
}

.page-title {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.archive-description {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }

    .page-header {
        margin: 2rem 0;
    }
}

/* --- HERO MAGAZINE LAYOUT (FIXED) --- */
.home-hero {
    margin-bottom: 40px;
}

.hero-magazine-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    height: 450px;
    /* Fixed height for perfect key alignment */
}

.hero-main {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 100% !important;
    /* Force fit */
}

.hero-slider-wrapper {
    height: 100% !important;
    /* Override inline 400px */
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.hero-card {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.hero-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    width: 100%;
    padding: 2rem;
    color: #fff;
    z-index: 2;
}

.hero-content.small {
    padding: 1rem;
    /* Less padding for side cards */
}

.hero-content h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    font-weight: 700;
}

.hero-content a {
    color: #fff;
    text-decoration: none;
}

.cat-tag {
    background: var(--secondary-color);
    color: #fff;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 10px;
    display: inline-block;
}

/* 3. Category Sections (Modern Headers) */
.category-block {
    margin-bottom: 4rem;
    margin-top: 60px;
    /* Added spacing per request */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    position: relative;
}

.section-header h3 {
    margin: 0;
    font-size: 1.6rem;
    color: var(--primary-color);
}

.section-header h3 .highlight {
    color: var(--secondary-color);
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--secondary-color);
}

.view-all {
    font-weight: 600;
    font-size: 0.9rem;
}

/* More Posts Button */
.more-posts-container {
    text-align: center;
    margin: 30px 0;
    width: 100%;
    grid-column: 1 / -1;
    /* Span full width if grid */
}

.btn-more-posts {
    display: inline-block;
    padding: 12px 30px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(13, 71, 161, 0.2);
    transition: all 0.3s ease;
}

.btn-more-posts:hover {
    background: var(--secondary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 200, 83, 0.3);
}

/* 4. Horizontal Cards (News Ticker Style) */
.posts-list-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.horizontal-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.horizontal-card:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.horizontal-card .post-thumbnail {
    flex: 0 0 120px;
    height: 90px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.horizontal-card .post-content {
    padding: 0;
    flex: 1;
}

/* Blog Card Specifics */
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card .post-thumbnail {
    height: 220px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.blog-card .post-thumbnail img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.cat-tag-small {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--secondary-color);
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.blog-card h2 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.blog-card .post-excerpt {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 15px;
    flex-grow: 1;
    /* Pushes footer down */
}

.meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: auto;
}

.meta-footer .date {
    font-size: 0.85rem;
    color: #999;
}

.read-more-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.read-more-link:hover {
    text-decoration: underline;
}

/* Full Width Ad in Grid */
.full-width-ad {
    background: #fdfdfd;
    border: 1px dashed #eee;
    padding: 20px;
    border-radius: 8px;
}

/* 5. Sidebar Styles & Widgets */
.sidebar-area {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 100px;
}

.widget {
    margin-bottom: 2.5rem;
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-color);
    margin-bottom: 1.2rem;
    padding-left: 10px;
    border-left: 4px solid var(--secondary-color);
}

.widget ul {
    list-style: none;
}

.widget li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.95rem;
}

.widget li:last-child {
    border: none;
}

.widget a {
    color: #555;
    display: flex;
    justify-content: space-between;
}

/* --- MOBILE SEARCH BAR --- */
.header-search-mobile {
    display: none;
    /* Hide on Desktop */
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-search-mobile .search-form {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
    background: #f9f9f9;
}

.header-search-mobile .search-field {
    border: none;
    background: transparent;
    padding: 10px 15px;
    width: 100%;
    outline: none;
    font-size: 1rem;
}

.header-search-mobile .search-submit {
    border: none;
    background: var(--secondary-color);
    color: #fff;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Display Logic */
@media (max-width: 900px) {
    .header-search-mobile {
        display: block;
        /* Show in mobile menu */
    }
}

/* --- AD SLOTS (Responsive & Modern) --- */
.apkmoodz-ad-slot {
    margin: 30px auto;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    /* Prevent horizontal scroll on mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    /* Prevent layout shift to 0 */
    clear: both;
}

.ad-label {
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}

.ad-content {
    display: inline-block;
    max-width: 100%;
}

.widget a:hover {
    color: var(--primary-color);
}

/* Search Widget (Modern UI) */
.search-form {
    width: 100%;
}

.search-input-group {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    /* Pill Shape */
    overflow: hidden;
    padding: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.search-input-group:focus-within {
    border-color: var(--secondary-color);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.1);
    /* Green Glow */
}

.search-field {
    border: none;
    background: transparent;
    padding: 12px 20px;
    width: 100%;
    outline: none;
    font-size: 1rem;
    color: var(--text-color);
    flex: 1;
    /* Take available space */
}

.search-field::placeholder {
    color: #999;
}

.search-submit {
    background: var(--secondary-color);
    color: #fff;
    border: none;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Circle Button inside Pill */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 2px;
}

.search-submit:hover {
    background: var(--primary-color);
    transform: rotate(15deg) scale(1.05);
}

.search-submit span {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

/* --- PAGINATION --- */
.pagination {
    margin: 40px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination .nav-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #eee;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.pagination a:hover,
.pagination span.current {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 6. Responsive Fixes */
@media (max-width: 1024px) {
    .home-layout-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sidebar-area {
        margin-top: 2rem;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    .sidebar-area .widget {
        background: #fff;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    /* Hide Sidebar Search on Mobile (Redundant) */
    .sidebar-area .widget_search {
        display: none;
    }
}

@media (max-width: 768px) {

    /* Stack Hero Grid */
    .hero-magazine-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hero-main .main-card {
        height: 280px;
        /* Smaller main card on mobile */
    }

    .hero-side .side-card {
        height: 180px;
    }

    /* Headings */
    .section-header h3 {
        font-size: 1.3rem;
        /* Smaller heading */
    }

    .hero-content h2 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    /* Layout Adjustments */
    .container {
        padding: 0 15px;
        /* Smaller gaps */
    }

    .category-block {
        margin-bottom: 2.5rem;
    }

    /* Horizontal Cards Mobile */
    .horizontal-card {
        flex-direction: row;
        /* Keep row if possible, or stacked? User said responsive issue. 
                             Row is usually better for "news ticker" feel even on mobile if image is small.
                             But let's make sure it fits. */
    }

    .horizontal-card .post-thumbnail {
        width: 90px;
        height: 70px;
        flex: 0 0 90px;
        margin-right: 15px;
    }

    .horizontal-card h4 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {

    /* Very Small Screens */
    .hero-main .main-card {
        height: 250px;
    }

    .hero-side .side-card {
        height: 160px;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .view-all {
        font-size: 0.8rem;
    }
}

/* --- REDESIGNED SECTIONS (Container Width) --- */

/* 1. Editor's Choice - Bento Grid (Container Width) */
.highlight-section {
    width: 100%;
    /* Strict Container Width */
    max-width: var(--container-width);
    margin: 40px auto;
    padding: 0 var(--gap);
    background: transparent !important;
    /* No full-width bg */
    box-shadow: none;
}

.highlight-section h3 {
    color: var(--text-color) !important;
    /* Dark Text */
    text-align: left;
    margin-bottom: 25px;
    font-size: 1.8rem;
    border-left: 5px solid var(--secondary-color);
    padding-left: 15px;
}

/* Bento Grid Layout */
.bento-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    /* Large Left, Small Right */
    gap: 20px;
    height: auto;
    /* Allow growth */
    min-height: 450px;
    /* Minimum height for desktop */
}

@media (max-width: 768px) {
    .bento-grid {
        display: block;
        /* Stack on mobile/tablet */
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }
}

/* Large Card (First Item) */
.bento-large {
    grid-row: span 2;
    height: 100%;
}

.bento-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.bento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.bento-card:hover img {
    transform: scale(1.05);
}

.bento-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 20px;
    color: #fff;
}

.bento-content h4 {
    color: #fff;
    font-size: 1.4rem;
    margin: 0;
}

.bento-content .meta {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 5px;
}


/* Side Stack (Items 2 & 3) */
.bento-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.bento-small {
    flex: 1;
    display: flex;
    /* Horizontal on desktop side? No, keep standard card */
}

.bento-small .bento-content h4 {
    font-size: 1rem;
}


/* 2. Must Read Section (Restored List) */
.list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Column List */
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 900px) {
    .list-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        /* Tighter gap on mobile */
    }

    .list-card {
        height: auto;
        /* Allow flexible height */
        min-height: 100px;
    }

    /* Optimize image/text ratio for mobile */
    .list-card .post-thumbnail {
        width: 100px;
        /* Slightly smaller image */
        height: 100px;
        /* Square aspect ratio */
        margin: 10px;
    }

    .list-card .post-content {
        padding: 10px;
    }

    .list-card h4 {
        font-size: 0.95rem;
        /* Readable but compact */
        line-height: 1.4;
    }
}

.list-card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    height: 120px;
    overflow: hidden;
}

.list-card .post-thumbnail {
    width: 120px;
    flex-shrink: 0;
}

.list-card .post-content {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.list-card h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}


/* 3. NEW SECTION: Trending Numbered List */
.trending-numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
    counter-reset: trending-counter;
}

@media (max-width: 1024px) {
    .trending-numbers-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

@media (max-width: 600px) {
    .trending-numbers-grid {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
        gap: 15px;
    }

    /* Make it look like a list on mobile for better space usage */
    .trending-card {
        display: flex;
        align-items: center;
        padding-left: 40px;
        /* Space for number */
        margin-bottom: 10px;
    }

    .trending-card .post-thumbnail {
        width: 100px;
        height: 80px;
        margin-right: 15px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .trending-card::before {
        font-size: 3rem;
        /* Smaller number on mobile */
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }
}

.trending-card {
    position: relative;
    padding-left: 50px;
}

.trending-card::before {
    counter-increment: trending-counter;
    content: counter(trending-counter);
    position: absolute;
    left: 0;
    top: -15px;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    z-index: 0;
    line-height: 1;
}

.trending-card .post-thumbnail {
    border-radius: 12px;
    height: 180px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.trending-card h4 {
    font-size: 1rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

/* --- SIDEBAR STICKY FIX --- */
/* Makes the sidebar fill blank space by following the scroll */
.sidebar-area {
    position: -webkit-sticky;
    position: sticky !important;
    top: 10px;
    /* Higher up per user request */
    margin-top: 0 !important;
    /* Remove top gap */
    height: fit-content;
    z-index: 9;
    /* Lower z-index slightly to avoid header conflict */
}

/* Ensure widgets have spacing */
.sidebar-area .widget {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* --- VISUAL STORIES (Horizontal Scroll Refined) --- */
.stories-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    scrollbar-width: none;
    /* Firefox */
}

.stories-scroll-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.story-card {
    flex: 0 0 140px;
    /* Rigid width */
    width: 140px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.story-card:hover {
    transform: translateY(-5px);
}

.story-image {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

.story-overlay h4 {
    font-size: 0.85rem !important;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

@media (max-width: 600px) {
    .story-card {
        flex: 0 0 110px;
        width: 110px;
    }

    /* Smaller cards on mobile */
    .story-image {
        height: 180px;
    }
}

/* --- BENTO MOBILE FIX --- */
@media (max-width: 600px) {
    .bento-grid {
        display: block;
        /* Fallback from grid to block for simple stacking */
    }

    .bento-card {
        margin-bottom: 15px;
    }

    .bento-large {
        height: 250px;
    }

    .bento-stack {
        gap: 15px;
        height: auto;
    }
}

/* --- AD VISUALIZER (Localhost Debug) --- */
.apkmoodz-ad-slot:empty,
.apkmoodz-ad-slot:not(:has(iframe)) {
    min-height: 250px;
    background: #f4f6f8;
    border: 2px dashed #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    /* Prevent overflow */
}

/* Specific Sizes for Debug Mode */
.ad-leaderboard:empty,
.ad-leaderboard:not(:has(iframe)) {
    min-height: 90px;
}

/* Base Ad Slot Responsiveness */
.apkmoodz-ad-slot {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}

@media (max-width: 768px) {

    /* Mobile Leaderboard - Force Override */
    .ad-leaderboard:empty,
    .ad-leaderboard:not(:has(iframe)) {
        min-height: 50px !important;
    }

    /* Standard Ads on Mobile */
    .apkmoodz-ad-slot:empty,
    .apkmoodz-ad-slot:not(:has(iframe)) {
        min-height: 250px;
        /* Keep visible rectangle */
        margin: 15px 0;
        width: 100%;
    }
}

/* --- MOBILE SPECIFIC FIXES --- */
@media (max-width: 600px) {

    /* Single Post Title Fix */
    .single-article-card .entry-title {
        font-size: 1.6rem !important;
        /* Reduced from default */
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    .single-article-card .entry-header {
        margin-bottom: 1.5rem;
    }
}



/* --- Content Typography Mobile Fix --- */
@media (max-width: 600px) {
    .entry-content h2 {
        font-size: 1.4rem !important;
        margin-top: 1.5rem !important;
        line-height: 1.3;
    }

    .entry-content h3 {
        font-size: 1.2rem !important;
        margin-top: 1.2rem !important;
    }

    .entry-content p {
        font-size: 1rem !important;
        line-height: 1.6;
    }
}



/* --- CRITICAL AD FIX REVERT --- */
.apkmoodz-ad-slot {
    display: block !important;
    overflow: visible !important;
    text-align: center;
}


/* --- AD SLOT DEBUGGING --- */
.apkmoodz-ad-slot {
    min-height: 280px;
    background: #fafafa;
    border: 1px dashed #e0e0e0;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.apkmoodz-ad-slot .ad-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Hide if empty (optional, but for now we want to see it) */
.apkmoodz-ad-slot:empty {
    /* display: none; */
}