/* Root variables for consistent theming */
:root {
    --background: #0a0a0a;                      /* Main background color - almost black */
    --text-primary: #ffffff;                    /* Primary text color - white */
    --text-secondary: rgba(255, 255, 255, 0.7); /* Secondary text with reduced opacity */
    --text-tertiary: rgba(255, 255, 255, 0.4);  /* Tertiary text with even lower opacity */
    --border-color: rgba(255, 255, 255, 0.1);   /* Subtle borders */
    --card-bg: #141414;                         /* Slightly lighter background for cards */
    --transition: all 0.3s ease;                  /* Standard transition for animations */

    /* Define light theme variables */
    --light-background: #f8f9fa;                 /* Light background */
    --light-text-primary: #212529;               /* Dark primary text */
    --light-text-secondary: #495057;             /* Medium dark secondary text */
    --light-text-tertiary: #6c757d;              /* Lighter tertiary text */
    --light-border-color: rgba(0, 0, 0, 0.1);    /* Subtle dark borders */
    --light-card-bg: #ffffff;                    /* White card background */
}

/* Add smooth scrolling to the HTML element */
html {
    scroll-behavior: smooth;
    /* Adding increased font smoothing for better text rendering during scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reset default browser styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: none !important;  Removed blanket outline removal */
}

/* Base body styling */
body {
    background-color: var(--background);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    line-height: 1.6;
    padding: 0 2rem;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Transition background and color */
}

/* Remove pseudo-elements for background transition */
body::before,
body::after {
    display: none;
}

/* Light theme class to be applied to body */
body.light-theme {
    background-color: var(--light-background);
    color: var(--light-text-primary);
}

/* Special transition class for smoother theme changes */
body.theme-transitioning {
    transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header layout with logo and social links */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    position: relative;
}

/* Logo styling */
.logo {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    text-transform: uppercase;
    transition: color 0.3s ease; /* Transition only color */
    opacity: 0;
    transform: translateY(-20px);
    animation: slideDown 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

/* Light theme adjustments for logo */
body.light-theme .logo {
    color: var(--light-text-primary);
}

/* Social links container */
.social-links {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(-20px);
    animation: slideDown 0.8s ease-out forwards;
    animation-delay: 0.4s; /* Appears after toggle */
}

/* Social link icons */
.social-links a {
    color: var(--text-primary);
    font-size: 1.2rem;
    transition: color 0.3s ease, opacity 0.3s ease; /* Transition color and opacity */
    opacity: 0.8;
}

/* Light theme adjustments for social links */
body.light-theme .social-links a {
    color: var(--light-text-primary);
}

/* Hover effect for social links */
.social-links a:hover {
    opacity: 1;
}

/* Main content area */
main {
    flex-grow: 1;
}

/* Hero section styling */
.hero {
    min-height: 60vh; /* Use min-height instead of height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 0;
    position: relative; /* Ensure proper positioning */
}

/* Remove animated backgrounds completely */
/* .animated-background { display: none; } */ /* Removed as element is gone */

/* Remove floating shape styles */
/* .floating-shape { display: none; } */ /* Removed as element is gone */

/* Hero content */
.hero-content {
    max-width: 800px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    position: relative;
    perspective: 800px; /* Add perspective for 3D effect */
}

/* Add specific margin control for the h2 inside hero */
.hero-content h2 {
    margin-bottom: 0.75rem; /* Reduce bottom margin */
}

/* Animation for fading in hero content */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main heading styling */
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    line-height: 1.1;
    text-align: left;
}

/* SEO specific styles for hidden text that's still accessible */
.seo-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Emoji in heading */
.emoji {
    display: inline-block; /* Needed for 3D transforms to work properly */
    font-size: 2.5rem;
    animation: emojiSpin 1s ease-out forwards; /* Default animation for work section */
    transform-style: preserve-3d;
    position: relative;
}

/* Special styling for Play section emoji */
#play .emoji {
    animation: emojiWave 2.5s ease-in-out forwards; /* Different animation for play section */
    transform-origin: 70% 70%; /* Position the origin near the bottom of the emoji for better wave */
}

/* Animation for emoji spinning like a coin - without size changes */
@keyframes emojiSpin {
    0% {
        transform: rotateY(0deg);
    }
    10% {
        transform: rotateY(36deg);
    }
    20% {
        transform: rotateY(72deg);
    }
    30% {
        transform: rotateY(108deg);
    }
    40% {
        transform: rotateY(144deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    60% {
        transform: rotateY(216deg);
    }
    70% {
        transform: rotateY(252deg);
    }
    80% {
        transform: rotateY(288deg);
    }
    90% {
        transform: rotateY(324deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* Animation for hand wave in Play section */
@keyframes emojiWave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Subtitle and intro text - now smaller than h1 */
.subtitle, .intro {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: left;
    transition: color 0.3s ease; /* Add transition */
    color: var(--text-secondary); /* Apply secondary color to both */
}

/* Light theme adjustment for intro text */
body.light-theme .intro {
    color: var(--light-text-secondary); /* Use secondary light text color */
}

/* Light theme adjustment for subtitle text */
body.light-theme .subtitle {
    color: var(--light-text-secondary); /* Match intro color in light theme */
}

/* Ensure the play-intro specifically has the same styling */
body.light-theme .play-intro {
    color: var(--light-text-secondary); /* Match the intro color */
}

/* Play section specific styling - updated to match work section */
.play-intro, .play-subtitle {
    color: var(--text-secondary);
    font-weight: 600; /* Make it slightly bolder */
    font-size: 1.8rem; /* Match the size of subtitle */
    transition: color 0.3s ease; /* Add transition */
}

/* Light theme adjustment for play subtitle */
body.light-theme .play-subtitle {
    color: var(--light-text-secondary); /* Match light theme secondary color */
}

/* Location styling */
.location {
    font-size: 1rem;
    margin-bottom: 1.25rem; /* Slightly reduce bottom margin */
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease; /* Add transition */
}

.location i {
    font-size: 1rem;
    color: var(--text-secondary); /* Fix typo: remove space before -- */
    transition: color 0.3s ease; /* Add transition */
}

/* Light theme adjustments for location */
body.light-theme .location,
body.light-theme .location i {
    color: var(--light-text-secondary);
}

/* Fixed toggle container */
.toggle-container {
    display: flex;
    justify-content: center;
    margin: 0;
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(-20px); /* Adjust initial transform for animation */
    z-index: 100;
    opacity: 0; /* Start hidden */
    animation: toggleSlideDown 0.8s ease-out forwards; /* Use specific animation */
    animation-delay: 0.3s; /* Appears between logo and social icons */
}

/* Toggle button styling - solid background to prevent text showing through */
.toggle {
    background-color: var(--card-bg); /* Use card background variable */
    border-radius: 24px;
    padding: 0.4rem;
    display: flex;
    position: relative;
    width: 200px; /* Size of the toggle */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* Stronger shadow for better visibility */
    border: 1px solid var(--border-color);
    z-index: 150; /* Ensure it's above other content */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition */
}

/* Light theme toggle */
body.light-theme .toggle {
    background-color: var(--light-card-bg);
    border: 1px solid var(--light-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Individual toggle buttons - increase contrast for better readability */
.toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary); /* Use secondary text color */
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    z-index: 2;
    width: 50%;
    transition: color 0.3s ease; /* Transition only color */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow for readability */
}

/* Light theme adjustments for toggle button */
body.light-theme .toggle-btn {
    color: var(--light-text-secondary);
    text-shadow: none;
}

/* Active toggle button state */
.toggle-btn.active {
    color: var(--background); /* Change to background color (black) for contrast */
}

/* Light theme adjustments for active toggle button */
body.light-theme .toggle-btn.active {
    color: var(--light-background); /* Change to light background color (white/light grey) for contrast */
}

/* Sliding indicator for active toggle */
.toggle-indicator {
    position: absolute;
    height: 80%;
    width: 48%;
    background-color: var(--text-primary); /* Indicator is white in dark mode */
    border-radius: 20px;
    top: 10%;
    left: 2%;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Light theme adjustments for toggle indicator */
body.light-theme .toggle-indicator {
    background-color: var(--light-text-primary); /* Indicator is dark in light mode */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Position indicator when second button is active */
.toggle-btn:nth-child(2).active ~ .toggle-indicator {
    left: 50%;
}

/* Content section styling (Work/Play tabs) */
.content-section {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Active content section */
.content-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Container for all sections */
.sections-container {
    display: flex;
    flex-direction: column;
}

/* Individual content block (Education, Experience, etc.) */
.content-block {
    margin: 0 0 4rem; /* Consistent spacing between major sections */
    scroll-margin-top: 100px;
    background-color: var(--card-bg); /* Slightly lighter than main background */
    border-radius: 24px; /* Smooth curved edges */
    padding: 2.5rem; /* Increased padding for better spacing */
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition */
}

/* Removed hover effect for content blocks */

/* Alternating colors for content blocks - Using solid colors for better contrast */
.content-block:nth-child(odd) {
    background-color: #1a1a1a; /* Slightly different solid shade */
}

.content-block:nth-child(even) {
    background-color: #1f1f1f; /* Alternate solid shade */
}

/* Section header styling - fully integrated with content block */
.section-header {
    padding: 0 0 1.5rem; /* Remove top padding, add bottom padding for separator */
    background-color: transparent; /* Ensure transparency to show parent background */
    margin-bottom: 1.5rem; /* Space after the header */
    border-bottom: 1px solid var(--border-color); /* Subtle separator */
    /* will-change: opacity, transform; */ /* Removed premature optimization */
    transition: border-color 0.3s ease; /* Add transition */
}

/* Section heading - slightly reduced for better proportion */
h2 {
    font-size: 3rem; /* Reduced for better proportions */
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1.5px;
    line-height: 1.1;
    transition: color 0.3s ease; /* Add transition */
}

/* Items container - proper spacing after section header */
.items-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Consistent spacing between all items */
    padding-top: 0; /* No extra padding needed since we have margin on header */
}

/* Light theme adjustments */
body.light-theme .content-block {
    background-color: var(--light-card-bg);
    border: 1px solid var(--light-border-color);
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
}

body.light-theme .content-block:nth-child(odd) {
    background-color: #f8f9fa; /* Slightly off-white */
}

body.light-theme .content-block:nth-child(even) {
    background-color: #f1f3f5; /* Slightly darker off-white */
}

body.light-theme .section-header {
    border-bottom: 1px solid var(--light-border-color);
}

body.light-theme h2 {
    color: var(--light-text-primary);
}

/* Individual item layout */
.item {
    display: flex;
    min-height: 50vh; /* Reduced from 60vh */
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin since we're using gap for spacing */
}

/* Remove margin from last item */
.item:last-child {
    margin-bottom: 0;
}

/* Image container within an item */
.item-image {
    width: 45%;
    flex-shrink: 0;
    /* Added initial state for observer animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Placeholder for images */
.image-placeholder {
    width: 100%;
    padding-bottom: 75%; /* 4:3 ratio */
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px; /* Increased from 4px for smoother edges */
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease; /* Add transition */
}

/* Add loading animation using pseudo-element */
.image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    z-index: 1; /* Ensure it's above the background color but below the image */
    transition: opacity 0.5s ease; /* Fade out animation */
}

/* Light theme placeholder images */
body.light-theme .image-placeholder {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .image-placeholder::before {
     background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
}


/* Standard styling for work section images */
.placeholder-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    border-radius: 12px; /* Added to match container's border-radius */
    z-index: 2; /* Ensure image is above loading animation */
    transition: opacity 0.5s ease; /* Fade in image */
}

/* Completely revamped styling for play section images */
#play .image-placeholder {
    background-color: rgba(255, 255, 255, 0.08); /* Slightly lighter background */
    padding-bottom: 56.25%; /* 16:9 ratio which is better for technical diagrams/screenshots */
    display: flex;
    align-items: center;
    justify-content: center;
}

#play .placeholder-image {
    object-fit: contain; /* Maintain aspect ratio */
    max-width: 90%;      /* Only use 90% of the container width */
    max-height: 90%;     /* Only use 90% of the container height */
    padding: 0;          /* Remove padding */
    top: 50%;            /* Center vertically */
    left: 50%;           /* Center horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    background-color: transparent;
}

/* Adjust the play section item heights to prevent excessive whitespace */
#play .item {
    min-height: 40vh; /* Lower minimum height for play section */
}

/* Light theme adjustments for play section images */
body.light-theme #play .image-placeholder {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Content container within an item */
.item-content {
    width: 55%;
    padding: 0 2rem;
    /* Added initial state for observer animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Left image layout */
.image-left {
    flex-direction: row;
}

/* Right image layout */
.image-right {
    flex-direction: row-reverse;
}

/* Item heading */
h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    transition: color 0.3s ease; /* Add transition */
}

/* Light theme item heading */
body.light-theme h3 {
    color: var(--light-text-primary);
}

/* Date display */
.date {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
    transition: color 0.3s ease; /* Add transition */
}

/* Light theme adjustments for date & tech info */
body.light-theme .date,
body.light-theme .tech,
body.light-theme li {
    color: var(--light-text-secondary);
}

/* Link styling */
.link a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; /* Update transition */
    letter-spacing: 0.2px;
    position: relative;
    border-bottom: 1px solid var(--text-primary);
}

/* Light theme adjustments for links */
body.light-theme .link a {
    color: var(--light-text-primary);
    border-bottom: 1px solid var(--light-text-primary);
}

/* Link hover effect */
.link a:hover {
    opacity: 0.8;
}

/* Technology tag styling */
.tech {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    font-style: italic;
    transition: color 0.3s ease; /* Add transition */
}

/* List styling */
ul {
    padding-left: 1.5rem;
    margin-top: 1.25rem;
}

/* List item styling */
li {
    margin-bottom: 0.75rem;
    color: var (--text-secondary);
    font-weight: 500;
    transition: color 0.3s ease; /* Add transition */
}

/* Container for skill tags - Removed as section is gone */
/* .skills-container { ... } */

/* Individual skill tag - Removed as section is gone */
/* .skill-tag { ... } */

/* Footer styling */
footer {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
    margin-top: 4rem;
    transition: color 0.3s ease, border-color 0.3s ease; /* Add transition */
}

/* Light theme footer */
body.light-theme footer {
    color: var(--light-text-tertiary);
    border-top: 1px solid var(--light-border-color);
}

/* Remove Play section background gradient */
#play {
    background: none;
    /* transition: none; */ /* Removed */
}

/* Also apply animated background to Play section hero */
#play .hero {
    position: relative; /* Ensure proper positioning for background */
}

/* Responsive layout for tablets */
@media (max-width: 1024px) {
    /* Stack items vertically on smaller screens */
    .item {
        flex-direction: column;
        gap: 2rem;
    }

    /* Full width images and content on smaller screens */
    .item-image,
    .item-content {
        width: 100%;
        padding: 0;
    }

    /* Ensure all layouts stack vertically */
    .image-left,
    .image-right {
        flex-direction: column;
    }

    /* Reduce heading size */
    h2 {
        font-size: 2.5rem; /* Further reduced on tablets */
    }
    
    /* Reduce gap between items */
    .items-container {
        gap: 2rem; /* Keep consistent for tablet */
    }

    /* Section header spacing for tablets */
    .section-header {
        padding: 0 0 1.25rem;
        margin-bottom: 1.25rem;
    }

    .content-block {
        padding: 2rem;
    }

    /* Adjust item height */
    .item {
        min-height: auto; /* Allow content to dictate height */
    }
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
    /* Smaller body padding */
    body {
        padding: 0 1.5rem;
    }

    /* Improved header spacing for mobile */
    header {
        padding: 1.5rem 0;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }
    
    /* Make logo slightly smaller on mobile */
    .logo {
        font-size: 1.1rem;
    }

    /* Add more spacing for social links on mobile */
    .social-links {
        gap: 2rem;
    }
    
    /* Completely revamped toggle positioning for mobile */
    .toggle-container {
        position: fixed; /* Change from static to fixed to keep visible when scrolling */
        display: block;
        top: 1rem; /* Position at top of screen with small margin */
        left: 50%;
        transform: translateX(-50%); /* Center horizontally */
        margin: 0; /* Remove margin as it's not needed for fixed position */
        animation: none;
        opacity: 1;
        width: 160px;
        z-index: 150; /* Ensure it stays above other content */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
    }
    
    /* Remove the animation that was causing positioning issues */
    .toggle-container {
        animation: none !important;
    }
    
    /* Add more space at the top of the hero section to prevent overlap with fixed toggle */
    .hero {
        padding-top: 3.5rem; /* Increased top padding to account for fixed toggle */
    }
    
    /* Improved hero section for mobile */
    .hero {
        height: auto;
        min-height: 45vh;
        padding: 2rem 0;
        margin-top: 0; /* Remove top margin as we have spacing from toggle now */
    }
    
    /* Better text spacing in hero content */
    .hero-content h2 {
        margin-bottom: 0.5rem; /* Adjust mobile margin slightly */
        line-height: 1.2;
    }
    
    /* Adjust emoji size for mobile */
    .emoji {
        font-size: 1.8rem;
    }
    
    /* Reduced text size for better mobile display */
    .subtitle, .intro, .play-intro {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 0.8rem;
    }
    
    /* Add space after location info */
    .location {
        margin-bottom: 1rem; /* Adjust mobile margin */
    }

    /* Smaller text sizes - keeping proper proportion */
    h1, .emoji {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 2.2rem; /* Smallest size on mobile */
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Smaller section header padding */
    .section-header {
        padding: 0 0 1rem;
        margin-bottom: 1rem;
    }
    
    /* Adjust item height */
    .item {
        min-height: auto;
        margin-bottom: 2rem; /* Reduced for mobile */
    }
    
    /* Smaller gap between items */
    .items-container {
        gap: 1.5rem;
    }
    
    /* Smaller toggle button padding */
    .toggle-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    .content-block {
        padding: 1.5rem;
        border-radius: 16px; /* Slightly smaller radius on mobile */
        margin-bottom: 2.5rem; /* Add more space between content blocks */
    }
    
    .section-header {
        padding: 0 0 1.5rem;
    }
    
    /* Improve readability of list items on mobile */
    li {
        margin-bottom: 1rem;
        line-height: 1.4;
    }
}

/* Extra small mobile devices - additional adjustments */
@media (max-width: 380px) {
    /* Even smaller body padding for tiny screens */
    body {
        padding: 0 1rem;
    }
    
    /* Adjust header for very small screens */
    header {
        justify-content: center;
        text-align: center;
        margin-bottom: 0;
    }
    
    /* Center the logo on very small screens */
    .logo {
        margin: 0 auto 0.5rem; /* Add bottom margin to logo */
    }
    
    /* More compact social links */
    .social-links {
        gap: 1.5rem;
        margin: 0 auto;
    }
    
    /* Smaller toggle container with adjusted spacing */
    .toggle-container {
        width: 140px; /* Keep the smaller width */
        top: 0.8rem; /* Position slightly higher on very small screens */
    }
}

/* Remove broad transition: none rule */
/* 
.logo, .social-links a, .intro, .location, .location i,
.section-header, h2, .date, .tech, li, .link a, .skill-tag {
    transition: none;
} 
*/

/* Animation for all top elements sliding down */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* For the toggle container, we need a special version of the animation to preserve the horizontal centering */
@keyframes toggleSlideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Modify the toggle container to use its special animation */
/* .toggle-container { animation-name: toggleSlideDown; } */ /* Already applied */

/* Remove the old fadeInDown animation as it's no longer needed */
/* @keyframes fadeInDown { ... } */

/* Certifications section special styling */
.certifications-section {
    min-height: auto;
    display: block;
}

.certifications-section .item-content {
    width: 100%;
    padding: 0;
}

.certifications-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.certification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 12px; /* Increased from 8px for smoother edges */
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Added border-color */
}

.certification-text {
    flex: 1;
    padding-right: 1rem;
}

.certification-text h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    transition: color 0.3s ease; /* Add transition */
}

.certification-text p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color 0.3s ease; /* Add transition */
}

.certification-logo {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certification-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px; /* Added rounded corners for certification logos */
}

/* Light theme adjustments for certification items */
body.light-theme .certification-item {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--light-border-color);
}

body.light-theme .certification-text h4 {
    color: var(--light-text-primary);
}

body.light-theme .certification-text p {
    color: var(--light-text-secondary);
}

/* Responsive adjustments for certifications */
@media (max-width: 768px) {
    .certification-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .certification-text {
        padding-right: 0;
    }
    
    .certification-logo {
        order: -1; /* Logo appears above text on mobile */
    }
}

/* Certification link styling */
.certification-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease;
    border-radius: 12px; /* Match item border radius for focus */
}

.certification-link:hover .certification-item {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

body.light-theme .certification-link:hover .certification-item {
    background-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Existing certification item styles - merged above */

/* Focus styles for better accessibility - Refined */
/* Remove default outlines only if using the keyboard-only focus style */
body.using-mouse a:focus,
body.using-mouse button:focus,
body.using-mouse input:focus,
body.using-mouse select:focus,
body.using-mouse textarea:focus,
body.using-mouse [tabindex]:not([tabindex="-1"]):focus,
body.using-mouse .certification-link:focus {
    outline: none;
}

/* Custom focus styles for keyboard navigation only */
body:not(.using-mouse) a:focus, 
body:not(.using-mouse) button:focus, 
body:not(.using-mouse) input:focus,
body:not(.using-mouse) select:focus,
body:not(.using-mouse) textarea:focus,
body:not(.using-mouse) [tabindex]:not([tabindex="-1"]):focus,
body:not(.using-mouse) .certification-link:focus {
    outline: 2px solid #4D90FE; /* Standard blue focus ring */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(77, 144, 254, 0.3); /* Optional softer glow */
}

/* Ensure toggle buttons don't get the custom ring if not desired */
body:not(.using-mouse) .toggle-btn:focus {
   /* Keep default browser focus or apply specific style if needed */
   /* Example: outline: 1px dotted; */
   outline: none; /* Or remove outline if indicator is sufficient */
   box-shadow: none; /* Remove glow if applied above */
}


/* Image loading state */
/* .image-placeholder { ... } */ /* Defined earlier */

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Stop loading animation when image is loaded */
.image-placeholder.loaded::before {
    opacity: 0; /* Fade out the loading animation */
    animation: none; /* Stop animation */
}

/* Fade in image when loaded */
.placeholder-image.loaded {
    opacity: 1;
}

/* ====== Focus style fixes ====== */
/* Removed blanket outline removal */
/* a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]), .certification-link { outline: none !important; } */

/* Custom focus styles moved up */

/* SEO specific styles - visually hidden but accessible */
.seo-heading { /* Updated to match .seo-content */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SEO content styling - hidden visually but accessible to search engines */
.seo-content {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enhanced footer styles */
.footer-info {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease; /* Add transition */
}

.footer-info a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; /* Update transition */
}

.footer-info a:hover {
    opacity: 0.8;
}

/* Light theme adjustments for footer info */
body.light-theme .footer-info {
    color: var(--light-text-secondary);
}

body.light-theme .footer-info a {
    color: var(--light-text-secondary);
    border-bottom: 1px solid var(--light-border-color);
}

/* Styles for 404 Page */
.error-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 2rem;
    color: var(--text-primary); /* Ensure text color matches theme */
}

body.light-theme .error-container {
    color: var(--light-text-primary);
}

.error-code {
    font-size: 8rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    background: linear-gradient(90deg, #4D90FE, #4C56B9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -4px;
}

.error-message {
    font-size: 2rem;
    font-weight: 700;
    margin: 1rem 0 2rem;
}

.error-description {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    color: var(--text-secondary); /* Use secondary color */
}

body.light-theme .error-description {
    color: var(--light-text-secondary);
}

.home-button {
    background-color: var(--card-bg); /* Use card bg */
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.home-button:hover {
    background-color: #1f1f1f; /* Slightly darker card bg */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

body.light-theme .home-button {
    background-color: var(--light-card-bg);
    color: var(--light-text-primary);
    border: 1px solid var(--light-border-color);
}

body.light-theme .home-button:hover {
    background-color: #f1f3f5; /* Slightly darker light card bg */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .error-code {
        font-size: 6rem;
    }
    .error-message {
        font-size: 1.5rem;
    }
    .error-description {
        font-size: 1rem;
    }
}