/* Base Styles */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Rozha One', serif;
}

/* Material Symbols Configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Screen Reader Only - Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus States */
a:focus-visible, 
button:focus-visible {
    outline: 2px solid #C84B31;
    outline-offset: 2px;
}

.dark a:focus-visible, 
.dark button:focus-visible {
    outline-color: #00F0FF;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.2);
}

/* Portrait Styles - Light Mode */
.portrait-mask {
    border-radius: 200px 200px 0 0; /* Organic arch top */
    box-shadow: 0 8px 30px rgba(200, 75, 49, 0.08);
    transition: all 0.3s ease;
}

.portrait-mask:hover {
    box-shadow: 0 16px 40px rgba(200, 75, 49, 0.2);
    transform: translateY(-4px);
}

/* Portrait Styles - Dark Mode */
.portrait-frame {
    border-radius: 4px; /* Sharp geometric */
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3); /* Cyan glow */
    transition: all 0.3s ease;
    border: 1px solid #00F0FF;
}

.portrait-frame:hover {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
    transform: translateY(-4px);
}

/* Social Button Interactions */
.social-btn {
    transition: all 0.2s ease;
}

.social-btn:hover {
    transform: scale(1.1);
}

/* Dark mode specific hover glow for social buttons */
.dark .social-btn:hover {
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
}

/* Light Mode Background Pattern - Subtle Diamond */
body {
    background-color: #FDFBF7;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l15 15-15 15-15-15zM0 30l15 15-15 15L-15 45zM60 30l15 15-15 15-15-15zM30 60l15 15-15 15-15-15z' fill='%23C84B31' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Dark Mode Background Pattern - Subtle Diamond */
.dark body {
    background-color: #08080C;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l15 15-15 15-15-15zM0 30l15 15-15 15L-15 45zM60 30l15 15-15 15-15-15zM30 60l15 15-15 15-15-15z' fill='%23FF6B35' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Jali Pattern for Dark Mode Mobile Drawer (FIXED: only in dark mode) */
.dark .jali-pattern {
    background-color: #08080C;
    background-image: 
        linear-gradient(30deg, #121225 12%, transparent 12.5%, transparent 87%, #121225 87.5%, #121225),
        linear-gradient(150deg, #121225 12%, transparent 12.5%, transparent 87%, #121225 87.5%, #121225),
        linear-gradient(30deg, #121225 12%, transparent 12.5%, transparent 87%, #121225 87.5%, #121225),
        linear-gradient(150deg, #121225 12%, transparent 12.5%, transparent 87%, #121225 87.5%, #121225),
        linear-gradient(60deg, #1a1a35 25%, transparent 25.5%, transparent 75%, #1a1a35 75%, #1a1a35),
        linear-gradient(60deg, #1a1a35 25%, transparent 25.5%, transparent 75%, #1a1a35 75%, #1a1a35);
    background-size: 40px 70px;
    background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}

/* Neon Glow Effects (Dark Mode) */
.neon-glow {
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}

.neon-glow-lg {
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.6);
}

.cyan-glow {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.cyan-glow-lg {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
}

/* Blog Post Specific Styles */

/* Light Mode: Arch Mask for Hero Image */
.arch-mask {
    border-radius: 200px 200px 0 0;
}

/* Dark Mode: Neon Border Effects */
.dark .neon-border {
    border: 1px solid #FF6B35;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.2);
}

.dark .neon-border-cyan {
    border: 1px solid #00F0FF;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* Drop Cap Styling - Enhanced for both modes */
.prose p:first-of-type::first-letter {
    font-size: 4rem;
    font-family: 'Rozha One', serif;
    float: left;
    margin-right: 0.75rem;
    line-height: 0.8;
    color: #C25E44;
}

.dark .prose p:first-of-type::first-letter {
    color: #FF6B35;
}

/* Blog Home Dark Mode - Neon Heritage Styles */

/* Jali Pattern Background */
.dark .jali-pattern {
    background-image: radial-gradient(#FF6B35 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.1;
}

/* Cyber Grid Background */
.dark .cyber-grid {
    background-size: 50px 50px;
    background-image: linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
}

/* Neon Glow for Featured Card */
.dark .neon-glow-cyan {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

/* Neon Border Accent */
.dark .neon-border-saffron {
    border-left: 4px solid #FF6B35;
}

/* Fixed Navbar with Enhanced Backdrop Blur */
.dark nav {
    backdrop-filter: blur(12px);
}

.neon-glow-saffron {
    text-shadow: 
        0 0 10px rgba(255, 107, 53, 0.6), 
        0 0 20px rgba(255, 107, 53, 0.4);
}

.neon-glow-cyan {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

/* Mobile Drawer Animations */
.mobile-drawer {
    transition: opacity 0.3s ease;
}

/* Smooth Theme Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* Override transitions for elements that shouldn't animate */
html,
.material-symbols-outlined {
    transition: none;
}

/* Safe Area Padding for Mobile (iOS notch support) */
@supports (padding: env(safe-area-inset-top)) {
    .mobile-drawer > div {
        padding-top: max(2rem, env(safe-area-inset-top));
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #9C9283; /* muted-light */
    border-radius: 20px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #5B5F77; /* muted-dark */
}

/* Timeline Specific Styles */

/* Timeline Item Fade In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation to timeline items */
[data-timeline-item] {
    animation: fadeInUp 0.6s ease backwards;
}

/* Stagger animation for timeline items */
[data-timeline-item]:nth-child(1) {
    animation-delay: 0.1s;
}

[data-timeline-item]:nth-child(2) {
    animation-delay: 0.2s;
}

[data-timeline-item]:nth-child(3) {
    animation-delay: 0.3s;
}

[data-timeline-item]:nth-child(4) {
    animation-delay: 0.4s;
}

/* Timeline Node Hover Enhancement */
.group:hover .timeline-node {
    filter: drop-shadow(0 0 8px rgba(200, 75, 49, 0.8));
}

.dark .group:hover .timeline-node {
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.8));
}

/* Experience Card Focus State */
[data-timeline-item] > div > div:focus-within {
    outline: 2px solid #C84B31;
    outline-offset: 4px;
}

.dark [data-timeline-item] > div > div:focus-within {
    outline-color: #FF6B35;
}

/* Learning Item Hover Enhancement - Light Mode */
#learning-container > div:hover {
    transform: translateX(2px);
}

/* Add subtle transition to learning items */
#learning-container > div {
    transition: transform 0.2s ease;
}

/* Responsive Typography - Enhance readability */
@media (max-width: 768px) {
    /* Ensure timeline cards don't get too narrow */
    [data-timeline-item] > div > div {
        max-width: 100% !important;
    }
}

/* Blog Page Specific Styles */

/* Light Mode: Arch-top images for blog cards */
.rounded-t-full {
    border-radius: 200px 200px 0 0;
}

/* Dark Mode: Grayscale to Color Image Effect */
.dark .blog-image-dark {
    filter: grayscale(100%);
    transition: filter 0.7s ease, transform 0.7s ease;
}

.dark .blog-image-dark:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Dark Mode: Jali Pattern Overlay for Blog */
.jali-pattern {
    background-image: radial-gradient(#FF6B35 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.1;
}

/* Dark Mode: Cyber Grid Overlay for Blog */
.cyber-grid {
    background-size: 50px 50px;
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
}

/* Dark Mode: Neon Glow Effects for Blog Cards */
.shadow-cyan-glow {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    transition: box-shadow 0.3s ease;
}

.shadow-cyan-glow:hover {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
}

/* Dark Mode: Neon Border Accent for List Items */
.border-l-primary-dark {
    border-left-color: #FF6B35;
}

/* Blog Card Hover Effects - Light Mode */
.bg-surface-light\/50:hover {
    background-color: rgba(244, 239, 230, 0.7);
}

/* Blog Card Hover Effects - Dark Mode */
.dark .bg-surface-dark:hover {
    background-color: rgba(18, 19, 28, 0.9);
}

/* Text Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Featured Card Gradient Overlay */
.bg-gradient-to-t {
    background: linear-gradient(to top, var(--tw-gradient-stops));
}

/* Smooth Color Transitions for Blog Links */
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Blog Button Hover Animation - Dark Mode */
.dark button .bg-accent-cyan {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blog Load More Button - Light Mode */
.hover\:-translate-y-0\.5:hover {
    transform: translateY(-0.125rem);
}

/* Responsive Blog Grid Adjustments */
@media (max-width: 768px) {
    /* Ensure blog cards stack nicely on mobile */
    #blog-grid > article {
        grid-column: span 1 !important;
    }
    
    /* Adjust featured card layout on mobile */
    .md\:flex-row {
        flex-direction: column;
    }
    
    /* Adjust blog header typography on mobile */
    #blog-header h1 {
        font-size: 3.5rem;
        line-height: 1;
    }
}

/* Print Styles */
@media print {
    /* Hide interactive elements */
    button,
    .mobile-drawer,
    [data-mobile-menu-toggle],
    [data-theme-toggle] {
        display: none !important;
    }
    
    /* Ensure good contrast for printing */
    body {
        background: white !important;
        color: black !important;
    }
    
    /* Show all timeline items without animations */
    [data-timeline-item] {
        animation: none;
        opacity: 1;
    }
}

/* ==============================================================
   CREATIONS PAGE SPECIFIC STYLES
   Organic→Sharp Transformation: Light (arch, soft) → Dark (sharp, neon)
   ============================================================== */

/* Image Border Radius - Organic Arch (Light) vs Sharp Geometric (Dark) */
.light .theme-image-radius {
    border-radius: 200px 200px 0 0; /* Arch top in light mode */
}

.dark .theme-image-radius {
    border-radius: 4px; /* Sharp corners in dark mode */
}

/* Card Borders - Subtle (Light) vs Neon (Dark) */
.light .theme-border {
    border: 1px solid transparent;
}

.dark .theme-border {
    border: 1px solid rgba(91, 95, 119, 0.2);
}

/* Card Shadows - Soft Diffused (Light) vs Neon Glow (Dark) */
.light .theme-shadow {
    box-shadow: 0 8px 30px rgba(200, 75, 49, 0.08);
}

.dark .theme-shadow {
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4); /* Neon orange glow */
}

/* Card Hover Shadows - Enhanced versions */
.light .theme-shadow-hover:hover {
    box-shadow: 0 12px 40px rgba(200, 75, 49, 0.15);
}

.dark .theme-shadow-hover:hover {
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.6);
    border-color: #00F0FF; /* Cyan border on hover */
}

/* Project Card Tag Pill Shape - Rounded (Light) vs Sharp (Dark) */
.project-tag {
    transition: all 0.2s ease;
}

/* Filter Button Active/Inactive States */
.filter-active {
    border-bottom-color: var(--primary-color);
    color: var(--text-color);
}

.filter-inactive {
    border-bottom-color: transparent;
    color: var(--muted-color);
}

/* Project Card Lift Animation */
.project-card {
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-8px);
}

/* Special Image Filters for Individual Projects */
.image-filter-grayscale {
    filter: grayscale(100%);
}

.dark .image-filter-grayscale {
    filter: grayscale(0%) hue-rotate(180deg);
}

.dark .image-filter-invert {
    filter: invert(1);
    opacity: 0.7;
    
    /* Format blog grid for printing */
    #blog-grid {
        display: block !important;
    }
    
    #blog-grid > article {
        page-break-inside: avoid;
        margin-bottom: 2rem;
    }
}