/*
Theme Name:   GeneratePress Child
Theme URI:    https://generatepress.com
Description:  Performance & SEO-optimized child theme for TechGameIntel
Author:       Your Site Team
Template:     generatepress
Version:      1.1.0
*/

/* ==========================================================================
   1. Core Layout & Breadcrumbs Foundation
   ========================================================================== */

#primary.content-area {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
}

.site-breadcrumbs {
    padding-top: 15px;
    padding-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.site-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.site-breadcrumbs a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   2. CLS-Proof Ad Containers (Pre-reserved dimensions)
   ========================================================================== */

.ad-slot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    text-align: center;
    contain: layout;
    background-color: #fafafa;
    border: 1px dashed #e0e0e0;
}

.ad-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 4px;
}

/* Standard Leaderboard Slot (Header / Footer) */
.ad-slot-leaderboard {
    min-height: 100px;
    width: 100%;
    max-width: 728px;
}

/* Standard In-Content / Mobile Slot */
.ad-slot-content {
    min-height: 260px;
    width: 100%;
    max-width: 336px;
}

/* Sidebar Rectangle Slot */
.ad-slot-sidebar {
    min-height: 260px;
    width: 100%;
    max-width: 300px;
}

@media (min-width: 768px) {
    .ad-slot-leaderboard {
        min-height: 100px;
        max-width: 728px;
    }
}

/* ==========================================================================
   3. Sticky Header & Centered Logo/Navigation Layout
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
    border-bottom: 1px solid #eef0f2;
}

.main-navigation {
    position: relative;
    background-color: #ffffff;
    border-bottom: 1px solid #eef0f2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header .inside-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.site-branding-container,
.site-logo,
.header-widget {
    text-align: center;
    margin: 0 auto;
}

.site-branding .main-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.site-branding .main-title a {
    color: #111111;
    text-decoration: none;
}

.main-navigation .inside-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 45px;
}

.main-navigation ul.menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none !important;
}

.main-navigation .main-nav ul li a {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 45px;
    transition: color 0.15s ease-in-out;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: #e02424;
}

.main-navigation .menu-bar-items {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

.main-navigation .menu-bar-item a {
    color: #222222;
    font-size: 16px;
    padding: 8px;
}

.main-navigation .menu-bar-item a:hover {
    color: #e02424;
}

@media (max-width: 768px) {
    .site-header .inside-header {
        align-items: center;
    }
    .main-navigation .menu-bar-items {
        position: static;
        transform: none;
        margin-left: auto;
        padding-right: 15px;
    }
    .main-navigation .inside-navigation {
        justify-content: space-between;
        padding-left: 15px;
    }
}

/* ==========================================================================
   4. UI Components, Grids & Sidebar Styles
   ========================================================================== */

.tgi-home-layout {
    display: flex;
    gap: 30px;
    margin-top: 25px;
    width: 100%;
}

.tgi-main-column {
    flex: 1;
    min-width: 0;
}

.tgi-sidebar {
    width: 320px;
    flex-shrink: 0;
}

.tgi-section {
    margin-bottom: 40px;
}

.tgi-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #111;
    margin-bottom: 20px;
    padding-bottom: 8px;
}

.tgi-section-title {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    color: #111;
    letter-spacing: 0.5px;
}

.tgi-view-all {
    font-size: 13px;
    font-weight: 700;
    color: #e02424;
    text-decoration: none;
}

/* Hero Featured Card */
.tgi-featured-hero-card {
    position: relative;
    margin-bottom: 25px;
    border-radius: 4px;
    overflow: hidden;
}

.tgi-hero-thumb img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.tgi-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    padding: 30px 20px 20px 20px;
    color: #fff;
}

.tgi-hero-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    margin: 8px 0;
}

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

.tgi-hero-title a:hover {
    color: #ff4d4d;
}

.tgi-hero-overlay .tgi-post-meta {
    color: #ccc;
}

/* 2-Column Grids */
.tgi-news-grid,
.tgi-explore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.tgi-news-grid .tgi-post-card,
.tgi-explore-grid .tgi-post-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #eef0f2;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 0;
    padding-bottom: 15px;
    transition: transform 0.15s ease;
}

.tgi-news-grid .tgi-post-card:hover,
.tgi-explore-grid .tgi-post-card:hover {
    border-color: #d1d5db;
}

.tgi-news-grid .tgi-post-thumb img,
.tgi-explore-grid .tgi-post-thumb img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 12px;
}

.tgi-news-grid .tgi-post-content,
.tgi-explore-grid .tgi-post-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tgi-news-grid .tgi-post-title,
.tgi-explore-grid .tgi-post-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin: 6px 0 10px 0;
}

.tgi-news-grid .tgi-post-title a,
.tgi-explore-grid .tgi-post-title a {
    color: #111;
    text-decoration: none;
}

.tgi-news-grid .tgi-post-title a:hover,
.tgi-explore-grid .tgi-post-title a:hover {
    color: #e02424;
}

.tgi-cat-tag a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #e02424;
    text-decoration: none;
}

.tgi-news-grid .tgi-post-meta,
.tgi-explore-grid .tgi-post-meta {
    margin-top: auto;
    font-size: 11.5px;
    color: #666;
}

/* How-To Section */
.tgi-howto-section {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #eef0f2;
    border-radius: 4px;
}

.tgi-howto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.tgi-howto-thumb img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

.tgi-howto-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.tgi-howto-title a {
    color: #222;
    text-decoration: none;
}

.tgi-howto-title a:hover {
    color: #e02424;
}

/* Sidebar Widgets & Trending */
.tgi-trending-widget, .tgi-social-box {
    background: #fff;
    border: 1px solid #eef0f2;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.tgi-widget-heading {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: #e02424;
    border-bottom: 2px solid #e02424;
    padding-bottom: 8px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

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

.tgi-trending-list li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f4f5f7;
}

.tgi-trending-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tgi-trending-list h5 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 5px 0;
}

.tgi-trending-list h5 a {
    color: #222;
    text-decoration: none;
}

.tgi-trending-list h5 a:hover {
    color: #e02424;
}

/* Social Follow Box */
.tgi-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tgi-social-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.15s ease;
}

.tgi-social-btn:hover {
    opacity: 0.9;
    color: #fff;
}

.tgi-fb { background-color: #1877f2; }
.tgi-twitter { background-color: #000000; }
.tgi-yt { background-color: #ff0000; }

/* Category Archive Header */
.tgi-archive-header {
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    padding: 20px 25px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.tgi-archive-title {
    font-size: 24px;
    font-weight: 800;
    text-transform: capitalize;
    margin: 0 0 8px 0;
    color: #111;
}

.tgi-archive-description {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

/* Load More Button */
.tgi-load-more-wrap {
    text-align: center;
    margin-top: 30px;
}

.tgi-load-more-btn {
    background-color: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 35px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tgi-load-more-btn:hover {
    background-color: #e02424;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .tgi-home-layout {
        flex-direction: column;
    }
    .tgi-sidebar {
        width: 100%;
    }
    .tgi-howto-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tgi-news-grid,
    .tgi-explore-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   Single Article / Post Template Styles
   ========================================================================== */

.tgi-single-article {
    background: #fff;
    padding: 30px;
    border: 1px solid #eef0f2;
    border-radius: 4px;
    margin-bottom: 40px;
}

.tgi-article-header {
    margin-bottom: 20px;
}

.tgi-article-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    color: #111;
    margin: 10px 0 15px 0;
}

.tgi-article-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2;
    padding: 10px 0;
    font-size: 13px;
    color: #555;
}

.tgi-author-name {
    font-weight: 700;
    color: #111;
}

.tgi-preferred-source-btn {
    color: #e02424;
    font-weight: 700;
    text-decoration: none;
}

.tgi-preferred-source-btn:hover {
    text-decoration: underline;
}

.tgi-single-thumb img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 25px;
}

.tgi-article-body {
    font-size: 17px;
    line-height: 1.7;
    color: #222;
}

.tgi-article-body p {
    margin-bottom: 20px;
}

/* Author Bio Box */
.tgi-author-bio-box {
    display: flex;
    gap: 20px;
    background: #f8f9fa;
    border: 1px solid #eef0f2;
    padding: 20px;
    border-radius: 4px;
    margin: 40px 0;
    align-items: center;
}

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

.tgi-author-title {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 5px 0;
    color: #111;
}

.tgi-author-desc {
    font-size: 13.5px;
    color: #555;
    margin: 0;
    line-height: 1.4;
}

/* Further Reading Section */
.tgi-further-reading {
    margin-top: 40px;
    border-top: 2px solid #111;
    padding-top: 25px;
}