/* ==============================================
   LIGHT & CLEAN DARK THEME CSS
   Softer, thinner, more subtle
   ============================================== */

/* Base Colors */
:root {
    --bg-dark: #0f1117;
    --bg-mid: #1a1d29;
    --bg-light: #2a2f3f;
    --bg-card: #3a4052;
    --text: #f0f0f0;
    --text-dim: #b0b5c8;
    --blue: #4a9eff;
    --cyan: #4affef;
    --border: rgba(255, 255, 255, 0.08);
}

/* ========== BACKGROUNDS ========== */
body { 
    background: var(--bg-dark) !important; 
    color: var(--text) !important;
    font-weight: 300; /* Lighter font weight */
}

.site-container, .grid-container { background: var(--bg-mid) !important; }
.site-header, .main-navigation, .site-footer, .site-content, .inside-article, .widget { background: var(--bg-light) !important; }
.article-card, .post { background: var(--bg-card) !important; }

/* Sidebar & Widget Backgrounds */
.sidebar, .widget-area, .widget, .sidebar .widget, 
#secondary, #secondary .widget, .widget-title {
    background: var(--bg-light) !important;
    color: var(--text) !important;
}

.sidebar .widget ul li, .sidebar .widget ul li a {
    background: transparent !important;
    color: var(--text-dim) !important;
}

.sidebar .widget ul li a:hover {
    color: var(--cyan) !important;
}

/* Recent Posts Widget */
.widget_recent_entries, .widget_recent_posts {
    background: var(--bg-light) !important;
}

.widget_recent_entries ul li, .widget_recent_posts ul li {
    background: var(--bg-card) !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    border-radius: 6px !important;
}

.widget_recent_entries a, .widget_recent_posts a {
    color: var(--blue) !important;
}

/* Comment Box & Forms */
.comment-respond, .comment-form, #respond, 
.comments-area, .comment-reply-title {
    background: var(--bg-light) !important;
    color: var(--text) !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background: var(--bg-mid) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

.comment-form input[type="submit"],
.comment-form button[type="submit"] {
    background: var(--blue) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.comment-form input[type="submit"]:hover,
.comment-form button[type="submit"]:hover {
    background: var(--cyan) !important;
    transform: translateY(-2px) !important;
}

/* ========== HEADINGS (Lighter) ========== */
h1, h2, h3, h4, h5, h6, .entry-title, .widget-title {
    background: linear-gradient(90deg, var(--cyan), var(--blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 500; /* Thinner headings */
    letter-spacing: 0.5px; /* More spaced out */
}

.inside-article h3 {
    background: linear-gradient(90deg, #02BCED, #09B822) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 500;
}

/* ========== BORDERS (Softer) ========== */
.inside-article, .widget, .comments-area { 
    border-right: 1px solid rgba(0,0,0,0.05); /* Thinner border */
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    box-shadow: 0 0 5px rgba(232,234,237,0.2); /* Softer shadow */
}

.site-header { border-bottom: 1px solid var(--border) !important; } /* Thinner */
.site-footer { border-top: 1px solid var(--border) !important; }
.main-navigation li { border-right: 1px solid rgba(255,255,255,0.05) !important; } /* Very subtle */

/* ========== TYPOGRAPHY (Lighter) ========== */
body, p, .entry-content { 
    font-weight: 300; /* Light text */
    line-height: 1.8; /* More spacious */
}

.site-description, .entry-meta { 
    font-weight: 300;
    opacity: 0.7; /* Softer appearance */
}

/* ========== LINKS ========== */
a { 
    color: var(--blue) !important; 
    text-decoration: none;
    font-weight: 400; /* Medium weight for links */
}
a:hover { color: var(--cyan) !important; }
.main-navigation a { color: #a0a5b8 !important; font-weight: 400; }
.main-navigation a:hover { color: white !important; }

/* ========== FORMS ========== */
input, textarea, select { 
    background: var(--bg-mid) !important; 
    color: white !important; 
    border: 1px solid rgba(255,255,255,0.08) !important; /* Subtle border */
    font-weight: 300;
}

button, .button { 
    background: var(--blue) !important; 
    color: white !important; 
    border: none; 
    transition: 0.3s;
    font-weight: 400; /* Not too bold */
    box-shadow: none; /* Remove shadow */
}
button:hover, .button:hover { 
    background: var(--cyan) !important;
    box-shadow: 0 2px 8px rgba(74,158,255,0.2); /* Subtle hover shadow */
}

/* ========== BUTTONS (Lighter) ========== */
.more-link, .read-more-link, .dark-read-more-btn {
    display: inline-block; 
    padding: 10px 25px; /* Slightly smaller */
    background: var(--bg-light); 
    color: white !important;
    border-radius: 6px; 
    font-weight: 400; /* Lighter weight */
    border: 1px solid rgba(255,255,255,0.1); 
    transition: 0.3s;
    box-shadow: none; /* No shadow */
}
.more-link:hover, .read-more-link:hover { 
    background: #353b4f; 
    transform: translateY(-1px); /* Subtle lift */
}

.gb-text-77db8450 {
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    padding: 12px 18px; /* Slightly smaller */
    background: #262b3a; 
    color: white; 
    border-radius: 6px; 
    border: 1px solid rgba(255,255,255,0.1); /* Subtle */
    box-shadow: none; /* Remove shadow */
    font-size: 14px; 
    font-weight: 400;
    margin-top: 20px;
}
.gb-text-77db8450:hover { background: #2f3547; }

/* ========== NAVIGATION ========== */
.main-navigation ul ul { 
    background: var(--bg-card) !important; 
    border: 1px solid rgba(255,255,255,0.08) !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Soft shadow */
}

.menu-toggle { 
    background: transparent !important; 
    border: 1px solid var(--border) !important; /* Thinner */
    border-radius: 5px;
    font-weight: 400;
}

/* ========== POST NAVIGATION BUTTONS ========== */
/* Post Navigation Buttons - Left & Right Layout */
.post-navigation-buttons,
.nav-links {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 40px 0 !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    width: 100% !important;
}

/* Individual buttons */
.post-navigation-buttons a,
.nav-links a,
.nav-previous a,
.nav-next a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 28px !important;
    background: linear-gradient(135deg, #4a9eff 0%, #357abd 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    min-width: 140px !important;
}

.post-navigation-buttons a:hover,
.nav-links a:hover,
.nav-previous a:hover,
.nav-next a:hover {
    background: linear-gradient(135deg, #4affef 0%, #2ec9b8 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(74, 255, 239, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Previous button - align left */
.nav-previous,
.post-navigation-buttons .btn-prev,
.nav-links .nav-previous {
    margin-right: auto !important;
}

/* Next button - align right */
.nav-next,
.post-navigation-buttons .btn-next,
.nav-links .nav-next {
    margin-left: auto !important;
}

/* If only one button exists, keep it on correct side */
.nav-previous:only-child {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.nav-next:only-child {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* WordPress default navigation */
.navigation.post-navigation {
    display: flex !important;
    justify-content: space-between !important;
}

.navigation.post-navigation .nav-links {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Ensure buttons don't wrap */
.post-navigation-buttons,
.nav-links {
    flex-wrap: nowrap !important;
}

/* Dark theme styling */
.post-navigation,
.post-navigation-buttons {
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    background: transparent !important;
}

/* Add arrows to buttons (optional) */
.nav-previous a::before,
.btn-prev::before {
    content: "← ";
    margin-right: 8px;
    font-size: 18px;
    font-weight: bold;
}

.nav-next a::after,
.btn-next::after {
    content: " →";
    margin-left: 8px;
    font-size: 18px;
    font-weight: bold;
}

/* ========== FOOTER ========== */
.site-footer::before, .site-footer::after, .site-footer svg { display: none !important; }
.footer-widgets { background: var(--bg-mid) !important; }
.site-info { 
    text-align: center; 
    padding: 20px;
    font-weight: 300; /* Light text */
}
.site-info a { 
    padding: 0 15px; 
    border-right: 1px solid rgba(255,255,255,0.08); 
}
.site-info a:last-child { border-right: none; }

/* ========== MISC ========== */
blockquote { 
    background: rgba(0,0,0,0.05) !important; /* Lighter */
    border-left: 3px solid var(--blue) !important; /* Thinner */
    font-weight: 300;
    font-style: italic;
}

pre, code { 
    background: rgba(0,0,0,0.15) !important; 
    color: var(--cyan) !important;
    font-weight: 400;
}

table { background: var(--bg-light) !important; }
th { 
    background: var(--bg-card) !important; 
    color: white !important;
    font-weight: 500; /* Medium weight */
}
td { color: var(--text-dim) !important; font-weight: 300; }

/* ========== SCROLLBAR (Thinner) ========== */
::-webkit-scrollbar { width: 8px; background: var(--bg-mid); } /* Thinner scrollbar */
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ========== UTILITY ========== */
.gb-element-a7c5d0aa { display: none; }
.gb-element-76365dcf { background: var(--bg-light) !important; }
.widget-area, .sidebar { background: transparent !important; }
.widget ul, .widget li { background: transparent !important; }

.gsc-input-box {
    border: 1px solid #dfe1e5;
    background: #4c5365;
}

.blog-card-excerpt {
    display: none;
}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
    .site-content, .inside-article, .entry-content, .container { 
        padding: 0 !important; 
        margin: 0 !important; 
        max-width: 100% !important; 
    }
    
    .single .entry-title, .single .entry-content p, .single .entry-content h2, .single .entry-content h3 { 
        padding: 0 15px !important; 
    }
    
    .sidebar, .widget-area { display: none !important; }
    
    .main-navigation.toggled li { 
        border-bottom: 1px solid rgba(255,255,255,0.05) !important; 
        border-right: none !important; 
    }
    
    .site-info a { 
        display: block; 
        padding: 8px 0; 
        border-right: none; 
        border-bottom: 1px solid rgba(255,255,255,0.05); 
    }
    .site-info a:last-child { border-bottom: none; }
    
    /* Mobile Responsive - Stack post navigation vertically on small screens */
    .post-navigation,
    .post-navigation-buttons,
    .nav-links {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .post-navigation-buttons a,
    .nav-links a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .nav-previous,
    .nav-next,
    .post-navigation-buttons .btn-prev,
    .post-navigation-buttons .btn-next {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}