/*
Theme Name: Abhinav Negi Blog
Theme URI: https://abhinavnegi.com
Author: Abhinav Negi
Description: Custom theme for Abhinav Negi
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Custom Utilities from index.html */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

/* Light Mode Overrides (used for Single Posts/Pages) */
.light-mode {
    background-color: #f9f9f9 !important;
    color: #1a1a1a !important;
}

.light-mode .text-white {
    color: #000000 !important;
}

.light-mode .text-gray-200 {
    color: #1a1a1a !important;
}

.light-mode .text-gray-400 {
    color: #4a4a4a !important;
}

.light-mode .text-gray-500 {
    color: #666666 !important;
}

/* Hero Text Color Reversal */
.light-mode h1.text-white {
    color: #000000 !important;
    /* Fixed from #666 in index but matched article styles */
}

/* Note: original index.html had specific color #666666 for h1.text-white in light mode, 
   but article-privacy-laws.html has inherits/black. I will stick to index.html for consistency 
   if used elsewhere, but for single post it might be different. 
   Let's use the explicit rule from index.html but maybe override for single post title if needed. */

.light-mode h1.text-white {
    color: #666666 !important;
}

.light-mode p.text-white.max-w-2xl {
    color: #1a1a1a !important;
}

.light-mode .border-gray-800 {
    border-color: #e5e5e5 !important;
}

.light-mode nav {
    mix-blend-mode: normal !important;
    background: rgba(249, 249, 249, 0.8) !important;
    backdrop-filter: blur(10px);
}

.light-mode nav span,
.light-mode nav a {
    color: #000000 !important;
}

.light-mode footer {
    background-color: #ffffff !important;
    border-top-color: #e5e5e5 !important;
}

.light-mode footer .text-white {
    color: #000 !important;
}

/* Logo Color Reversal */
.light-mode footer img[alt="abhi designed"] {
    filter: invert(1);
}

/* Blog Grid Light Mode */
.light-mode .blog-post-1 {
    background-color: #ffffff !important;
}

.light-mode .blog-post-2 {
    background-color: #f0f0f0 !important;
}

.light-mode .blog-post-3 {
    background-color: #e5e5e5 !important;
}

.light-mode .blog-post-1:hover,
.light-mode .blog-post-3:hover {
    background-color: #fafafa !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .blog-post-1 h3,
.light-mode .blog-post-1 p,
.light-mode .blog-post-1 span,
.light-mode .blog-post-3 h3,
.light-mode .blog-post-3 p,
.light-mode .blog-post-3 span {
    color: #000000 !important;
}

.light-mode .blog-post-2 h3,
.light-mode .blog-post-2 p,
.light-mode .blog-post-2 span {
    color: #333333 !important;
}

.light-mode .blog-post-2:hover {
    background-color: #ffffff !important;
}

.light-mode .blog-post-2:hover h3,
.light-mode .blog-post-2:hover p {
    color: #000 !important;
}

.light-mode #theme-toggle i {
    color: #000 !important;
}

.light-mode #theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Article Content Styles */
.article-content h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: inherit;
}

.article-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: inherit;
}

.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.article-content blockquote {
    border-left: 4px solid #d4af37;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #4a4a4a !important;
}

/* iOS Safe Area Support */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(1.5rem, env(safe-area-inset-top));
    }
}

@media (max-width: 768px) {

    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}