/*
 * LIGHT-MODE.CSS - Complete Light Theme
 * Techo Theme
 */

/* ========================================
   LIGHT MODE CORE VARIABLES
   ======================================== */
body.light-mode {
    --bg-body: #f5f7fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-elevated: #ffffff;
    --text-main: #1a1a2e;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* ========================================
   HEADER - LIGHT MODE
   ======================================== */
body.light-mode .site-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

body.light-mode .site-header.scrolled {
    box-shadow: var(--shadow-md);
}

body.light-mode .site-title a {
    color: var(--text-main);
}

body.light-mode .main-navigation a {
    color: var(--text-muted);
}

body.light-mode .main-navigation a:hover,
body.light-mode .main-navigation .current-menu-item>a {
    color: var(--primary);
}

body.light-mode .main-navigation ul {
    background: var(--bg-card);
    border-color: var(--border-color);
}

body.light-mode .search-toggle,
body.light-mode .theme-toggle {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.03);
}

body.light-mode .search-toggle:hover,
body.light-mode .theme-toggle:hover {
    color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

/* ========================================
   HERO SECTION - LIGHT MODE
   ======================================== */
body.light-mode .hero-main-card,
body.light-mode .side-card {
    box-shadow: var(--shadow-lg);
}

body.light-mode .hero-main-card .hero-content,
body.light-mode .side-card .side-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

body.light-mode .hot-topics-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

body.light-mode .hot-label {
    background: var(--primary);
}

body.light-mode .topic-item {
    color: var(--text-muted);
}

body.light-mode .topic-item:hover {
    color: var(--primary);
}

/* ========================================
   CARDS - LIGHT MODE
   ======================================== */
body.light-mode .wire-card,
body.light-mode .review-card,
body.light-mode .enterprise-card,
body.light-mode .related-card,
body.light-mode .widget-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

body.light-mode .wire-card:hover,
body.light-mode .review-card:hover,
body.light-mode .enterprise-card:hover,
body.light-mode .related-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(59, 130, 246, 0.3);
}

body.light-mode .wire-content h3 a,
body.light-mode .review-title a,
body.light-mode .enterprise-title a,
body.light-mode .related-content h4 a {
    color: var(--text-main);
}

body.light-mode .wire-content h3 a:hover,
body.light-mode .review-title a:hover,
body.light-mode .enterprise-title a:hover {
    color: var(--primary);
}

body.light-mode .wire-meta,
body.light-mode .meta-sm,
body.light-mode .post-stats {
    color: var(--text-muted);
}

/* ========================================
   SIDEBAR - LIGHT MODE
   ======================================== */
body.light-mode .sidebar-col {
    background: transparent;
}

body.light-mode .widget {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

body.light-mode .widget-title {
    color: var(--text-main);
    border-bottom-color: var(--border-color);
}

body.light-mode .popular-item {
    border-bottom-color: var(--border-color);
}

body.light-mode .popular-item h4 a {
    color: var(--text-main);
}

/* ========================================
   FOOTER - LIGHT MODE
   ======================================== */
body.light-mode .site-footer {
    background: linear-gradient(180deg, #e8eef5, #dde5ee);
    color: var(--text-secondary);
}

body.light-mode .footer-glow-border {
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
}

body.light-mode .footer-logo h3,
body.light-mode .footer-section-title {
    color: var(--text-main);
}

body.light-mode .footer-about-text,
body.light-mode .footer-menu a {
    color: var(--text-muted);
}

body.light-mode .footer-menu a:hover {
    color: var(--primary);
}

body.light-mode .footer-social-icons a {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

body.light-mode .footer-social-icons a:hover {
    background: var(--primary);
    color: white;
}

body.light-mode .secondary-newsletter {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--border-color);
}

body.light-mode .footer-form input {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

body.light-mode .site-info {
    border-top-color: var(--border-color);
    color: var(--text-muted);
}

/* ========================================
   SINGLE POST - LIGHT MODE
   ======================================== */
body.light-mode .entry-title {
    color: var(--text-main);
}

body.light-mode .entry-content {
    color: var(--text-secondary);
}

body.light-mode .entry-content h2,
body.light-mode .entry-content h3,
body.light-mode .entry-content h4 {
    color: var(--text-main);
}

body.light-mode .entry-content a {
    color: var(--primary);
}

body.light-mode .entry-content blockquote {
    background: rgba(59, 130, 246, 0.05);
    border-left-color: var(--primary);
}

body.light-mode .entry-content pre,
body.light-mode .entry-content code {
    background: #f1f5f9;
    color: var(--text-main);
}

body.light-mode .author-bio-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

body.light-mode .author-bio-box h4 {
    color: var(--text-main);
}

body.light-mode .social-share {
    border-color: var(--border-color);
}

body.light-mode .share-btn {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

body.light-mode .breadcrumbs a {
    color: var(--text-muted);
}

/* ========================================
   COMMENTS - LIGHT MODE
   ======================================== */
body.light-mode .comment {
    border-color: var(--border-color);
}

body.light-mode .comment-author {
    color: var(--text-main);
}

body.light-mode .comment-content {
    color: var(--text-secondary);
}

body.light-mode .comment-form input,
body.light-mode .comment-form textarea {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

/* ========================================
   ARCHIVE/SEARCH - LIGHT MODE
   ======================================== */
body.light-mode .archive-header,
body.light-mode .search-header {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--border-color);
}

body.light-mode .page-title {
    color: var(--text-main);
}

/* ========================================
   BUTTONS - LIGHT MODE
   ======================================== */
body.light-mode .btn-outline {
    border-color: var(--border-color);
    color: var(--text-main);
}

body.light-mode .btn-outline:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ========================================
   BADGES - LIGHT MODE
   ======================================== */
body.light-mode .badge {
    box-shadow: var(--shadow-sm);
}

/* ========================================
   FORMS - LIGHT MODE
   ======================================== */
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="search"],
body.light-mode textarea,
body.light-mode select {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

body.light-mode input:focus,
body.light-mode textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.light-mode ::placeholder {
    color: var(--text-muted);
}

/* ========================================
   SEARCH OVERLAY - LIGHT MODE
   ======================================== */
body.light-mode .search-overlay {
    background: rgba(255, 255, 255, 0.98);
}

body.light-mode .search-overlay .search-field {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

body.light-mode .search-close {
    color: var(--text-main);
}

/* ========================================
   BACK TO TOP - LIGHT MODE
   ======================================== */
body.light-mode .back-to-top {
    box-shadow: var(--shadow-lg);
}

/* ========================================
   NOTIFICATIONS - LIGHT MODE
   ======================================== */
body.light-mode .techo-notification {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   AD SLOTS - LIGHT MODE
   ======================================== */
body.light-mode .techo-ad {
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed var(--border-color);
}

/* ========================================
   SECTION HEADERS - LIGHT MODE
   ======================================== */
body.light-mode .section-header h2 {
    color: var(--text-main);
}

body.light-mode .nav-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-muted);
}

body.light-mode .nav-btn:hover:not(:disabled) {
    background: var(--primary);
    color: white;
}

/* ========================================
   POST NAVIGATION - LIGHT MODE
   ======================================== */
body.light-mode .post-navigation a {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

body.light-mode .post-navigation a:hover {
    border-color: var(--primary);
}

body.light-mode .nav-subtitle {
    color: var(--text-muted);
}

/* ========================================
   404 PAGE - LIGHT MODE
   ======================================== */
body.light-mode .error-404 h1 {
    color: var(--text-main);
}

body.light-mode .error-404 p {
    color: var(--text-muted);
}