/*
Theme Name: MyTheme Pro — Premium MultiNiche
Theme URI: https://example.com/mytheme-pro
Author: Sourabh Yadav 
Description: Premium multi-niche blog theme — Food, Travel, Tech. Lightweight, responsive and demo-ready.
Version: 1.0.3 
License: GNU General Public License v2 or later
Text Domain: mytheme-pro
*/

:root{
    --primary:#e74c3c;
    --accent:#3498db;
    --bg:#f4f7f9;
    --text:#2c3e50;
    --muted:#7f8c8d;
    --radius:10px;
    --container:1240px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    margin:0;
    line-height:1.6;
    font-size:16px;
    -webkit-font-smoothing:antialiased
}
h1, h2, h3, h4 {margin-top: 0; font-weight: 700; line-height: 1.2;}

a{color:var(--accent);text-decoration:none; transition: color 0.2s}
a:hover {color: var(--text);}
.wrap{max-width:var(--container);margin:24px auto;padding:0 24px}

header.site-header{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(8px);
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    border-bottom:none;
}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.logo{font-weight:900;font-size:24px;letter-spacing:-0.03em}
.header-center{flex:1;display:flex;justify-content:center}
.primary-nav{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center}
.primary-nav a{padding:6px 10px;border-radius:6px;color:var(--text);font-weight:600;transition:all .18s ease}
.primary-nav a:hover,
.primary-nav .current-menu-item a{ 
    transform:none;
    box-shadow:none;
    background:rgba(0,0,0,0.05);
    color: var(--text);
}

.primary-nav li.current-menu-item,
.primary-nav li.current-menu-ancestor,
.primary-nav li.current-page-ancestor,
.primary-nav li.current-menu-parent {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.primary-nav li.current-menu-item a,
.primary-nav li.current-menu-ancestor a,
.primary-nav li.current-page-ancestor a,
.primary-nav li.current-menu-parent a {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background: rgba(0,0,0,0.05) !important;
    padding-top: 6px !important; 
    position: relative;
    color: var(--text) !important; 
}

.primary-nav li.current-menu-item a::before,
.primary-nav li.current-menu-item a::after,
.primary-nav li.current-menu-item::before,
.primary-nav li.current-menu-item::after,
.primary-nav li.current-menu-ancestor a::before,
.primary-nav li.current-menu-ancestor a::after,
.primary-nav li.current-menu-ancestor::before,
.primary-nav li.current-menu-ancestor::after {
    content: none !important; 
    display: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

.header-right{display:flex;gap:12px;align-items:center}
.icon-btn{background:transparent;border:0;font-size:19px;cursor:pointer;padding:8px;border-radius:8px;color:var(--text);}
.mobile-toggle{display:none}

.header-right .icon-btn:first-child {
    display: none !important;
}

.hero{border-radius:var(--radius);overflow:hidden;position:relative;margin:18px 0; min-height: 400px; background-size: cover; background-position: center;}
.hero-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    z-index: 1; 
}
.hero .hero-content {
    z-index: 2; 
    position:absolute;left:40px;bottom:40px;color:#fff;
    text-shadow:0 3px 10px rgba(0,0,0,0.7);
}
.hero .hero-title{font-size:44px;margin:0 0 10px; font-weight: 800;}
.hero .hero-sub{margin:0 0 15px; font-size: 18px;}
.hero .hero-media{display:none;}

.grid-two{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}

.site-main, 
.sidebar .widget {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
    background: #ffffff;
    border-radius: var(--radius);
    padding: 25px;
}

.section-title {
    font-size: 32px; 
    margin: 40px 0 20px; 
    border-left: 5px solid var(--accent);
    padding-left: 15px;
    font-weight: 800;
}
body.food-primary .section-title {
    border-left-color: var(--primary);
}

.card{
    background:#ffffff;
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); 
}
.card .card-body{padding:18px 18px 14px;}
.card h3{margin:8px 0 10px;font-size:20px; font-weight: 700;}
.card h3 a {color: var(--text);}
.card h3 a:hover {color: var(--accent);}
.card p.muted{font-size: 15px; color: var(--muted);}

.featured-16-9 {
    padding-top: 0; 
    height: 220px;
    position: relative;
    overflow: hidden;
}
.featured-16-9 img {
    object-fit: cover !important; 
    width: 100%;
    height: 100% !important; 
    position: static; 
    transition: transform 0.4s ease;
}
.card:hover .featured-16-9 img {
    transform: scale(1.05);
}

.card .card-meta {
    gap: 12px;
    margin-bottom: 6px;
    font-size: 12px;
}
.card .card-meta .cat {
    background: var(--accent); 
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
body.food-primary .card .card-meta .cat {
    background: var(--primary); 
}
.card .card-meta .date {
    color: var(--muted);
    font-size: 13px;
}

.latest-tech-grid,
.latest-guides-grid,
.featured-recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; 
    margin-top: 0;
    margin-bottom: 0;
}
.cards-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin-bottom: 30px;
}
.cards-three .card { margin-bottom: 0; }

.masonry-grid {
    display: block;
    column-count: 2;
    column-gap: 30px;
}
.masonry-grid .card {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.trending-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 30px;
    margin-bottom: 40px;
}
.trending-big img {
    height: 480px;
}
.trending-big-content h3 {font-size: 30px; margin: 0; font-weight: 800;}
.trending-big-content .cat {background: var(--accent); padding: 5px 12px; border-radius: 4px; display: inline-block; margin-bottom: 10px; font-weight: 700; text-shadow: none;}
body.food-primary .trending-big-content .cat {background: var(--primary);}

.trending-small-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff; 
    padding: 20px; 
    border-radius: var(--radius); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.trending-small {
    display: flex;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.trending-small:last-child {border-bottom: none; padding-bottom: 0;}
.trending-small img {
    width: 90px; 
    height: 90px; 
    object-fit: cover; 
    border-radius: 6px;
}

.sidebar .widget{
    padding: 20px; 
    border-radius: var(--radius); 
    margin-bottom: 25px; 
    border-top: 3px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
body.food-primary .sidebar .widget {border-top-color: var(--primary);}
.widget h4 {font-size: 20px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; font-weight: 700;}
.promo-banner {
    margin-bottom: 30px; 
    border-radius: var(--radius); 
    overflow: hidden;
}
.promo-banner img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
}
.widget .avatar{width:64px;height:64px;border-radius:999px;overflow:hidden;margin-bottom:8px}

.button, .hero-btn, .newsletter-btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.8px;
    color: white !important;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background: var(--accent);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
body.food-primary .button, 
body.food-primary .hero-btn, 
body.food-primary .newsletter-btn {
      background: var(--primary);
      box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.button:hover, .hero-btn:hover, .newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.newsletter-input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}
.widget .newsletter-btn {
    width: 100%;
}

.site-footer{
    margin-top:50px;
    background:#ffffff;
    padding:30px 0;
    border-top:1px solid rgba(0,0,0,0.06);
}
.site-footer .inner{
    justify-content:space-between;
    gap:20px;
    align-items:center
}
.site-footer p{margin:0;color:var(--muted); font-size: 14px;}

.post-content img, .wp-caption {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.alignright { float: right; margin: 0 0 1em 1em; }
.alignleft  { float: left; margin: 0 1em 1em 0; }
.aligncenter { display: block; margin: 1em auto; }
.wp-caption {
    padding: 6px;
    background: var(--bg);
    border-radius: var(--radius);
    margin: 1em 0;
    text-align: center;
    color: var(--muted);
}
.wp-caption-text {
    font-size: 14px;
    padding: 6px 0 0;
}
.alignwide { max-width: 100%; }
.alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    width: 100vw;
}

@media(max-width:1024px){
    .wrap { padding: 0 20px; }
    .grid-two{grid-template-columns:1fr}
    .header-center{display:none}
    .mobile-toggle{display:inline-flex}
    .primary-nav{
        position:fixed;
        left:0;
        right:0;
        top:64px;
        background:#fff;
        padding:12px 20px;
        flex-direction:column;
        display:none;
        box-shadow:0 8px 30px rgba(0,0,0,0.1);
    }
    .primary-nav.show{display:flex}
    .hero .hero-title{font-size:36px;}
    .hero .hero-sub{font-size: 16px;}
    .site-header .inner{padding:10px 0}
    
    .cards-three {
        grid-template-columns: repeat(2, 1fr);
    }
    .trending-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    .trending-big img {
        height: 400px;
    }
    .masonry-grid {
        column-count: 2;
    }
}
@media (max-width: 600px) {
    .hero .hero-content{left:20px; bottom:20px;}
    .cards-three {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .latest-tech-grid,
    .latest-guides-grid,
    .featured-recipes-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    .trending-big img {
        height: 300px;
    }
    .masonry-grid {
        column-count: 1;
    }
}