/* ========== CSS STYLES FOR PORTFOLIO WEBSITE ========== */

/* ===== GLOBAL STYLES ===== */
/* :root defines CSS variables that can be used throughout the document */
:root {
    /* ===== STATIC (same in both themes) ===== */
    --primary-color: #6D28D9;
    --primary-hover: #5B21B6;
    --primary-dark: #4C1D95;
    --accent-color: #F59E0B;       /* Warm amber, used as a pop against violet */
    --mint: #10B981;               /* Reserved for "available" indicator */

    /* Type system */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Animation timing */
    --transition-slow: 0.5s;
    --transition-medium: 0.3s;
    --transition-fast: 0.15s;

    /* ===== LIGHT THEME (default) ===== */
    --bg: #FAFAF7;
    --background-color: #FAFAF7;   /* alias kept for backwards compatibility */
    --surface: #FFFFFF;
    --card-bg: #FFFFFF;
    --surface-strong: #0F0B1F;     /* Header / footer / form-section bg. Stays dark in dark mode (slightly elevated). */
    --text-on-strong: #FFFFFF;     /* Text color on top of --surface-strong */

    --ink: #0F0B1F;                /* Strong text color + invertible CTA bg. Flips in dark mode. */
    --text-on-ink: #FFFFFF;        /* Inverse of --ink — used for text on top of --ink. Flips in dark mode. */

    --text-color: #1F1A2E;
    --text-muted: #6B6480;
    --text-subtle: #948CA8;

    --primary-light: #EDE9FE;
    --accent-soft: #FEF3C7;

    --border-light: #EAE6F2;
    --border-strong: #D4CCE6;

    --grid-dot: rgba(109, 40, 217, 0.06);
    --card-shadow: 0 1px 2px rgba(15, 11, 31, 0.04), 0 12px 32px -8px rgba(109, 40, 217, 0.10);

    color-scheme: light;
}

/* ===== DARK THEME ===== */
:root[data-theme="dark"] {
    --bg: #0B0815;
    --background-color: #0B0815;
    --surface: #15101F;
    --card-bg: #15101F;
    --surface-strong: #16121F;     /* Slightly elevated dark, not pitch-black, gives header/footer a "raised" feel */
    --text-on-strong: #F5F1FF;

    --ink: #F5F1FF;                /* Flips: now light, so headings stay high-contrast and CTAs invert */
    --text-on-ink: #0F0B1F;

    --text-color: #E8E3F2;
    --text-muted: #948CA8;
    --text-subtle: #6B6480;

    --primary-light: #251A3F;
    --accent-soft: rgba(245, 158, 11, 0.14);

    --border-light: #251D38;
    --border-strong: #36284E;

    --grid-dot: rgba(245, 158, 11, 0.05);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.65;
    color: var(--text-color);
    background-color: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Subtle dot grid, humanises the background without feeling busy */
    background-image: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0);
    background-size: 28px 28px;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Smooth transition for theme swaps on a few key surfaces (kept narrow so animation-heavy pages do not feel sluggish) */
header,
.site-footer,
.skill-card,
.project,
.education-card,
.recommendation-card,
.add-recommendation,
.cta-button,
.back-to-top,
.tech-tag,
.theme-toggle,
.theme-toggle button {
    transition-property: background-color, color, border-color, box-shadow, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    color: var(--ink);
}

::selection {
    background: var(--accent-color);
    color: var(--ink);
}

/* ===== HEADER ===== */
header {
    background: var(--surface-strong);
    color: var(--text-on-strong);
    padding: 22px 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px -16px rgba(15, 11, 31, 0.4);
    backdrop-filter: blur(20px);
}

/* Amber accent stripe under the header */
header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 120px;
    height: 3px;
    background: var(--accent-color);
}

.header-left h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-on-strong);
    animation: fadeInDown 0.6s ease-out;
}

/* Contact info inside the header — hidden by default, the hero section shows the full version */
header .contact-info {
    display: none;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

/* Individual contact items */
.contact-info p {
    margin: 2px 0;        /* Small vertical spacing */
    transition: transform var(--transition-fast); /* Animation for hover effect */
}

/* Hover effect for contact items */
.contact-info p:hover {
    transform: translateX(3px); /* Slide slightly right on hover */
}

/* Icons in the contact info */
.contact-info i {
    margin-right: 10px;   /* Space between icon and text */
    color: rgba(255, 255, 255, 0.9); /* Slightly translucent white */
}

/* ===== NAVIGATION STYLES ===== */
/* Navigation menu in the header */
nav ul {
    display: flex;        /* Horizontal layout for nav items */
    list-style-type: none; /* Remove bullet points */
    animation: fadeIn 0.6s ease-out 0.3s both; /* Animation with delay */
}

/* Individual navigation items */
nav ul li {
    margin-left: 30px;    /* Space between nav items */
}

/* Navigation links */
nav ul li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    position: relative;
    transition: all var(--transition-medium) ease;
    padding-bottom: 4px;
    text-transform: lowercase;
}
nav ul li a::before {
    content: '/ ';
    color: var(--accent-color);
    opacity: 0.7;
}

/* Navigation active state (current section) */
nav ul li a.active {
    color: white;         /* White text */
    font-weight: 500;     /* Medium bold */
}

/* Underline indicator (now ::after so it doesn't clash with the "/ " ::before prefix) */
nav ul li a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-color);
    transition: width var(--transition-medium) ease;
}
nav ul li a.active {
    color: white;
}
nav ul li a.active::after {
    width: 100%;
}
nav ul li a:hover {
    color: white;
    transition: color var(--transition-medium);
}
nav ul li a:hover::after {
    width: 100%;
}

/* Main Content Styles */
/* 
 * Main content container styles
 * This wraps all the sections of the website
 */
main {
    padding: 30px 5%;               /* Space inside the main container: 30px top/bottom, 5% left/right */
}

/* 
 * Base styles for all sections
 * These apply to About Me, Skills, Projects, and Recommendations sections
 * Each section starts invisible and animates in when scrolled into view
 */
section {
    margin-bottom: 60px;             /* Space between sections */
    opacity: 0;                      /* Start invisible for animation */
    transform: translateY(20px);     /* Start slightly below final position */
    animation: fadeInUp 0.8s ease-out forwards; /* Animation that will show the section */
    animation-play-state: paused;    /* Animation starts paused */
}

/* 
 * When a section becomes visible in the viewport
 * The 'visible' class is added by JavaScript when scrolling
 */
section.visible {
    animation-play-state: running;   /* Start the animation when section is visible */
}

/* Section heading — magazine/zine style with a small mono prefix above */
section h2 {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

/* The data-index attribute on each <section> becomes the visible chapter mark */
section[id]::before {
    content: attr(data-index);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent-color);
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

/* ===== ANIMATION KEYFRAMES ===== */
/* 
 * CSS animations define how elements transition from one state to another
 * @keyframes defines the animation steps from start (0%) to end (100%)
 * These animations are used throughout the website for various elements
 */

/* 
 * Fade In animation - makes elements appear by changing opacity
 * Used for navigation menu and other elements
 */
@keyframes fadeIn {
    from {
        opacity: 0;                 /* Start completely transparent */
    }
    to {
        opacity: 1;                 /* End completely visible */
    }
}

/* 
 * Fade In Down animation - elements fade in while moving down
 * Used for the name in the header
 */
@keyframes fadeInDown {
    from {
        opacity: 0;                 /* Start completely transparent */
        transform: translateY(-20px); /* Start 20px above final position */
    }
    to {
        opacity: 1;                 /* End completely visible */
        transform: translateY(0);   /* End at final position */
    }
}

/* 
 * Fade In Up animation - elements fade in while moving up
 * Used for sections when they come into view while scrolling
 */
@keyframes fadeInUp {
    from {
        opacity: 0;                 /* Start completely transparent */
        transform: translateY(20px); /* Start 20px below final position */
    }
    to {
        opacity: 1;                 /* End completely visible */
        transform: translateY(0);   /* End at final position */
    }
}

/* 
 * Scale In animation - elements fade in while growing in size
 * This creates a subtle "pop" effect
 */
@keyframes scaleIn {
    from {
        opacity: 0;                 /* Start completely transparent */
        transform: scale(0.9);      /* Start at 90% of final size */
    }
    to {
        opacity: 1;                 /* End completely visible */
        transform: scale(1);        /* End at full size (100%) */
     }
}

/* ===== ABOUT ME SECTION STYLES ===== */
/* 
 * The About Me section includes profile image and personal description
 * This is the first main section users see after the header
 */

.about-section {
    margin-top: 40px;
}

.profile-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: center;
    gap: 60px;
}

/* Asymmetric profile image — offset amber square peeks out behind the photo */
.profile-image {
    position: relative;
    flex: 0 0 300px;
    opacity: 0;
    animation: fadeInRight 0.8s ease-out 0.2s forwards;
}
.profile-image::before {
    content: '';
    position: absolute;
    inset: 14px -14px -14px 14px;
    background: var(--accent-color);
    border-radius: 4px;
    z-index: 0;
    transition: transform var(--transition-medium);
}
.profile-image::after {
    content: '';
    position: absolute;
    inset: -10px 10px 10px -10px;
    border: 2px solid var(--ink);
    border-radius: 4px;
    z-index: 0;
    transition: transform var(--transition-medium);
}
.profile-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 20px 60px -20px rgba(15, 11, 31, 0.4);
    transition: transform var(--transition-medium);
    display: block;
}
.profile-image:hover img {
    transform: translate(-4px, -4px);
}
.profile-image:hover::before {
    transform: translate(6px, 6px);
}

/* 
 * Profile text content container
 * Contains the greeting and bio text
 */
.profile-content {
    transform: translateX(20px);     /* Start 20px to the right for animation */
    opacity: 0;                      /* Start invisible */
    animation: fadeInLeft 0.8s ease-out 0.4s forwards; /* Animation with delay */
}

/* Hero greeting */
.profile-content h2 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1;
    letter-spacing: -0.035em;
}
/* Highlight "Junaed" with the amber underline-marker effect */
.profile-content h2 .name-mark {
    background: linear-gradient(180deg, transparent 60%, var(--accent-color) 60%, var(--accent-color) 90%, transparent 90%);
    padding: 0 6px;
}
/* The about section heading has its own ::before, so we don't show the auto section number on it */
section#about::before {
    display: none;
}

.wave-emoji {
    display: inline-block;
    font-size: 0.8em;
    animation: wave 2s infinite;
    transform-origin: 70% 70%;
}

/* 
 * Text justify style - creates even spacing in paragraphs
 * Makes text aligned to both left and right margins
 */
.text-justify {
    text-align: justify;           /* Justify text alignment */
    text-justify: inter-word;      /* Use space between words for justification */
    /* hyphens: auto;                 /* Enable automatic hyphenation for better justification */
}

/* 
 * Wave animation keyframes
 * Creates a realistic hand waving motion for the emoji
 * The hand rotates back and forth in decreasing angles to simulate natural wave
 */
@keyframes wave {
    0% { transform: rotate(0deg); }     /* Starting position - hand straight */
    10% { transform: rotate(14deg); }   /* Rotate right (maximum right tilt) */
    20% { transform: rotate(-8deg); }   /* Swing back left (smaller angle) */
    30% { transform: rotate(14deg); }   /* Swing right again (full angle) */
    40% { transform: rotate(-4deg); }   /* Swing left again (even smaller) */
    50% { transform: rotate(10deg); }   /* Last swing right (reduced angle) */
    60% { transform: rotate(0deg); }    /* Return to center position */
    100% { transform: rotate(0deg); }   /* Stay centered (pause before repeating) */
}

@keyframes fadeInLeft {
    from {
        opacity: 0;                     /* Start completely invisible */
        transform: translateX(20px);    /* Start 20px to the right of final position */
    }
    to {
        opacity: 1;                     /* End completely visible */
        transform: translateX(0);       /* End at the intended position */
    }
}

/* 
 * FadeInRight animation keyframes
 * Elements slide in from the left side while fading in
 * Creates a smooth entrance effect for the profile image
 * Complements the fadeInLeft animation for a balanced appearance
 */
@keyframes fadeInRight {
    from {
        opacity: 0;                     /* Start completely invisible */
        transform: translateX(-20px);   /* Start 20px to the left of final position */
    }
    to {
        opacity: 1;                     /* End completely visible */
        transform: translateX(0);       /* End at the intended position */
    }
}

/* ===== SKILLS SECTION STYLES ===== */
/* 
 * The Skills section displays programming skills with icons and experience levels
 * Each skill is displayed in its own card with icon, name, and experience
 */

/* Skills grid */
.skills-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Individual skill card — flat, left-aligned, mono experience text */
.skill-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 20px 18px;
    text-align: left;
    border: 1px solid var(--border-light);
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* 
 * Hover effect overlay for skill cards
 * Creates a subtle gradient background that appears on hover
 */
.skill-card:before {
    content: '';                        /* Required for pseudo-elements */
    position: absolute;                 /* Position relative to the card */
    top: 0;                             /* Align to top of card */
    left: 0;                            /* Align to left of card */
    width: 100%;                        /* Full width of card */
    height: 0;                          /* Start with no height (invisible) */
    background: linear-gradient(to bottom, rgba(106, 61, 232, 0.05), transparent); /* Subtle gradient */
    transition: height var(--transition-medium); /* Animate height change */
    z-index: -1;                        /* Position behind the content */
}

/* 
 * Show the gradient overlay on hover
 * The overlay animates from 0 to full height
 */
.skill-card:hover:before {
    height: 100%;                      /* Expand to full height of card */
}

.skill-card:hover {
    transform: translateY(-4px);
    border-color: var(--ink);
    box-shadow: 0 10px 24px -8px rgba(15, 11, 31, 0.2);
}

.skill-icon {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 14px;
}

/* 
 * Skill icon image
 * Sets maximum size and enables hover animation
 */
.skill-icon img {
    max-height: 38px;
    max-width: 38px;
    transition: transform var(--transition-medium);
}

/* 
 * Hover animation for skill icons
 * Makes icons slightly larger and rotated
 */
.skill-card:hover .skill-icon img {
    transform: scale(1.1) rotate(5deg); /* Grow and rotate slightly */
}

/* Skill name */
.skill-card h3 {
    margin-bottom: 4px;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink);
    transition: color var(--transition-medium);
    letter-spacing: -0.01em;
}
.skill-card p {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

/* ===== PROJECTS SECTION STYLES ===== */
/* 
 * The Projects section displays portfolio projects with descriptions
 * Each project is displayed in a card with title and details
 */

/* Individual project — distinctive numbered card with a hover line */
.project {
    counter-increment: project-counter;
    background: var(--card-bg);
    border-radius: 8px;
    padding: 32px 36px;
    margin-bottom: 22px;
    border: 1px solid var(--border-light);
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}
.projects-section {
    counter-reset: project-counter;
}
/* The big mono number behind each project */
.project::before {
    content: '0' counter(project-counter);
    position: absolute;
    top: 24px;
    right: 30px;
    font-family: var(--font-mono);
    font-size: 4.5rem;
    font-weight: 600;
    color: var(--primary-light);
    line-height: 1;
    transition: color var(--transition-medium);
    z-index: 0;
    user-select: none;
}
.project:hover {
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -20px rgba(15, 11, 31, 0.2);
}
.project:hover::before {
    color: var(--accent-color);
}
.project > * {
    position: relative;
    z-index: 1;
}
.project h3 {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0;
}

/* ===== RECOMMENDATIONS SECTION STYLES ===== */
/* 
 * The Recommendations section displays testimonials and a form to submit new ones
 * It includes recommendation cards in a grid layout and a form for visitors to leave feedback
 */

.recommendations-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.recommendation-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 28px 26px;
    border: 1px solid var(--border-light);
    box-shadow: none;
    position: relative;
    transition: all var(--transition-medium);
    opacity: 0;
    animation: staggerFadeIn 0.5s ease-out forwards;
}

/* 
 * Staggered animation delays for recommendation cards
 * Makes cards appear one after another rather than all at once
 */
.recommendation-card:nth-child(1) { animation-delay: 0.1s; } /* First card */
.recommendation-card:nth-child(2) { animation-delay: 0.2s; } /* Second card */
.recommendation-card:nth-child(3) { animation-delay: 0.3s; } /* Third card */
.recommendation-card:nth-child(4) { animation-delay: 0.4s; } /* Fourth card */
.recommendation-card:nth-child(5) { animation-delay: 0.5s; } /* Fifth card */

.recommendation-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -16px rgba(15, 11, 31, 0.2);
}

.recommendation-card blockquote {
    font-style: normal;
    position: relative;
    padding: 18px 0 0 0;
    color: var(--text-color);
    line-height: 1.65;
    font-size: 0.95rem;
}

/* 
 * Hover effect for quote marks
 * Makes the quote marks more visible on hover
 */
.recommendation-card:hover blockquote:before,
.recommendation-card:hover blockquote:after {
    opacity: 0.6;
}

/* Mono opening quote mark on top-left */
.recommendation-card blockquote::before {
    content: '"';
    display: block;
    position: absolute;
    top: -16px;
    left: -2px;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    opacity: 1;
    transition: transform var(--transition-medium);
}
.recommendation-card blockquote::after {
    content: '';
}
.recommendation-card:hover blockquote::before {
    transform: translateY(-3px);
}

/* 
 * Hover animation for opening quote mark
 * Makes it move slightly upward
 */
.recommendation-card:hover blockquote:before {
    transform: translateY(-2px);
}

/* 
 * Hover animation for closing quote mark
 * Makes it move slightly downward
 */
.recommendation-card:hover blockquote:after {
    transform: translateY(2px);
}

.recommender-name {
    display: block;
    font-style: normal;
    font-weight: 600;
    text-align: left;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.85rem;
    transition: transform var(--transition-medium);
}

/* 
 * Hover effect for recommender names
 * Subtle shift to the left when hovering over the card
 */
.recommendation-card:hover .recommender-name {
    transform: translateX(-3px);
}

@keyframes staggerFadeIn {
    from {
        opacity: 0;          /* Start completely invisible */
        transform: translateY(20px); /* Start 20px below final position */
    }
    to {
        opacity: 1;          /* End fully visible */
        transform: translateY(0); /* End at final position */
    }
}

/* ===== ADD NEW RECOMMENDATIONS FORM STYLES ===== */
/* 
 * Styles for the form section where users can submit new recommendations
 * This includes inputs, text areas, and the submit button
 */
.add-recommendation {
    background: var(--surface-strong);
    color: var(--text-on-strong);
    border-radius: 8px;
    padding: 40px 36px;
    box-shadow: none;
    margin-top: 20px;
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.5s forwards;
    position: relative;
    overflow: hidden;
}

/* 
 * Decorative bar animation for recommendation form
 * Creates a colored line that expands across the top on hover
 */
.add-recommendation:before {
    content: '';                       /* Required for pseudo-elements */
    position: absolute;                /* Position relative to form container */
    top: 0;                            /* Align to top */
    left: 0;                           /* Align to left */
    width: 100%;                       /* Full width */
    height: 5px;                       /* Height of the bar */
    background: linear-gradient(to right, var(--primary-color), #9b6dff); /* Gradient color */
    transform: scaleX(0);              /* Start with zero width */
    transform-origin: left;            /* Animation starts from left */
    transition: transform var(--transition-medium); /* Smooth animation */
}

/* 
 * Show the decorative bar on hover
 * Expands from left to right
 */
.add-recommendation:hover:before {
    transform: scaleX(1);              /* Expand to full width */
}

/* 
 * Form title styling
 * "Add a Recommendation" heading above the form
 */
.add-recommendation h3 {
    margin-bottom: 22px;
    text-align: left;
    font-size: 1.6rem;
    color: white;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.add-recommendation h3::before {
    content: '// drop a line';
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-color);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 10px;
}

/* 
 * Form group container
 * Each group contains a label and an input or textarea
 */
.form-group {
    margin-bottom: 25px;               /* Space between form fields */
    position: relative;                /* For positioning effects */
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 15px;
    font-family: var(--font-body);
    transition: all var(--transition-medium);
    background: rgba(255, 255, 255, 0.04);
    color: white;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

/* 
 * Textarea-specific styling
 * For the larger text area used for recommendation message
 */
.form-group textarea {
    height: 150px;                     /* Taller than regular inputs */
    resize: vertical;                  /* Allow vertical resizing only */
}

.btn-submit {
    background: var(--accent-color);
    color: #0F0B1F;
    border: none;
    border-radius: 6px;
    padding: 14px 32px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
}
.btn-submit:hover {
    background: white;
    color: #0F0B1F;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(245, 158, 11, 0.4);
}

/* 
 * Active state for submit button
 * When the button is being clicked
 */
.btn-submit:active {
    transform: translateY(-1px);       /* Slightly less lift when pressed */
}

/* 
 * Ripple effect setup for submit button
 * Creates the starting point for the ripple animation
 */
.btn-submit:after {
    content: '';                       /* Required for pseudo-elements */
    position: absolute;                /* Position relative to button */
    top: 50%;                          /* Center vertically */
    left: 50%;                         /* Center horizontally */
    width: 5px;                        /* Initial tiny size */
    height: 5px;                       /* Initial tiny size */
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    opacity: 0;                        /* Start invisible */
    border-radius: 100%;               /* Perfect circle */
    transform: scale(1, 1) translate(-50%); /* Center the ripple */
    transform-origin: 50% 50%;         /* Scale from center */
}

/* 
 * Trigger the ripple animation on button focus
 * Visual feedback when button is clicked
 */
.btn-submit:focus:after {
    animation: ripple 1s ease-out;     /* Run the ripple animation */
}

/* 
 * Ripple animation keyframes
 * Defines how the circular ripple grows and fades
 */
@keyframes ripple {
    0% {
        transform: scale(0, 0);        /* Start tiny */
        opacity: 0.5;                  /* Start partially visible */
    }
    100% {
        transform: scale(40, 40);      /* Grow very large */
        opacity: 0;                    /* Fade out completely */
    }
}

/* ===== BACK TO TOP BUTTON STYLES ===== */
/* 
 * Back to top button (fixed position floating button)
 * Allows users to quickly scroll back to the top of the page
 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--surface-strong);
    color: var(--accent-color);
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 18px;
    opacity: 0;
    transition: all var(--transition-medium);
    z-index: 1000;
    box-shadow: 0 8px 24px -8px rgba(15, 11, 31, 0.35);
    transform: translateY(20px);
}

/* 
 * Visible state for back-to-top button
 * Added via JavaScript when user scrolls down the page
 */
.back-to-top.visible {
    opacity: 0.9;                      /* Mostly opaque */
    transform: translateY(0);          /* Move to final position */
}

/* 
 * Hover effect for back-to-top button
 * Visual feedback when user hovers over the button
 */
.back-to-top:hover {
    opacity: 1;
    background: var(--accent-color);
    color: #0F0B1F;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -8px rgba(245, 158, 11, 0.45);
}

/* ===== MODAL STYLES ===== */
/* 
 * Modal overlay container
 * Covers the entire screen with a semi-transparent background
 * Used for confirmation dialogs after form submission
 */
.modal {
    display: none;                     /* Hidden by default */
    position: fixed;                   /* Fixed position covers entire viewport */
    top: 0;                            /* Align to top */
    left: 0;                           /* Align to left */
    width: 100%;                       /* Full width of viewport */
    height: 100%;                      /* Full height of viewport */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: 1001;                     /* Above everything else */
    justify-content: center;           /* Center contents horizontally */
    align-items: center;               /* Center contents vertically */
    opacity: 0;                        /* Start invisible for animation */
    transition: opacity var(--transition-medium); /* Fade in smoothly */
}

/* 
 * Visible state for modal
 * Added via JavaScript when modal should be shown
 */
.modal.visible {
    opacity: 1;                        /* Fully visible */
}

/* 
 * Modal content box
 * The white box in the center of the modal with the message
 */
.modal-content {
    background-color: white;           /* White background */
    padding: 35px;                     /* Generous inner spacing */
    border-radius: 12px;               /* Rounded corners */
    max-width: 500px;                  /* Limit width on large screens */
    width: 90%;                        /* Use 90% of available width */
    text-align: center;                /* Center-aligned text */
    position: relative;                /* For positioning the close button */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Strong shadow for depth */
    transform: scale(0.8);             /* Start smaller for animation */
    opacity: 0;                        /* Start invisible */
    transition: all var(--transition-medium); /* Smooth animation */
}

/* 
 * Animation for modal content
 * Scales up and fades in when modal becomes visible
 */
.modal.visible .modal-content {
    transform: scale(1);               /* Full size */
    opacity: 1;                        /* Fully visible */
}

/* 
 * Modal title styling
 * The heading at the top of the modal
 */
.modal-content h3 {
    margin-bottom: 20px;               /* Space below heading */
    color: var(--primary-color);       /* Purple text */
    font-size: 1.8rem;                 /* Large text */
}

/* 
 * Modal close button (X in the corner)
 * Allows users to dismiss the modal
 */
.close-modal {
    position: absolute;                /* Position relative to modal content */
    top: 15px;                         /* 15px from top */
    right: 20px;                       /* 20px from right */
    font-size: 24px;                   /* Large X */
    cursor: pointer;                   /* Hand cursor on hover */
    color: #888;                       /* Medium gray */
    transition: color var(--transition-medium), transform var(--transition-medium); /* Smooth animations */
}

/* 
 * Hover effect for close button
 * Darkens and rotates on hover
 */
.close-modal:hover {
    color: #333;                       /* Darker gray */
    transform: rotate(90deg);          /* Rotate 90 degrees */
}

/* 
 * Modal buttons (Yes, No, OK)
 * Action buttons at the bottom of modals
 */
.modal-button {
    background-color: var(--primary-color); /* Purple background */
    color: white;                      /* White text */
    border: none;                      /* No border */
    border-radius: 8px;                /* Rounded corners */
    padding: 12px 25px;                /* Comfortable padding */
    font-size: 16px;                   /* Readable text size */
    cursor: pointer;                   /* Hand cursor on hover */
    margin-top: 20px;                  /* Space above buttons */
    transition: all var(--transition-medium); /* Smooth hover animation */
}

/* 
 * Hover effect for modal buttons
 * Buttons lift up and get a shadow
 */
.modal-button:hover {
    background-color: var(--primary-hover); /* Darker purple */
    box-shadow: 0 5px 15px rgba(106, 61, 232, 0.2); /* Subtle shadow */
    transform: translateY(-2px);       /* Lift up 2px */
}

.button-container {
    display: flex;                     /* Flexbox for horizontal layout */
    justify-content: center;           /* Center buttons horizontally */
    gap: 15px;                         /* Space between buttons */
    margin-top: 20px;                  /* Space above button container */
}

/* ===== RESPONSIVE DESIGN STYLES ===== */
/* 
 * Responsive Design rules
 * These rules adjust the layout for different screen sizes
 * This ensures the website looks good on desktops, tablets, and phones
 */

/* 
 * Medium screens (tablets, smaller laptops)
 * Applied when the viewport width is 992px or less
 */
@media (max-width: 992px) {
    /* Change skills grid to 2 columns instead of 3 */
    .skills-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Change recommendations grid to 2 columns instead of 3 */
    .recommendations-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Stack header elements vertically */
    header {
        flex-direction: column;        /* Change from row to column layout */
        text-align: center;            /* Center-align text */
        padding: 15px 5%;              /* Reduce padding */
    }
    
    /* Center the navigation and add space above */
    nav ul {
        margin-top: 15px;              /* Space above navigation */
        justify-content: center;        /* Center navigation links */
    }
    
    /* Adjust spacing between navigation items */
    nav ul li {
        margin: 0 10px;                /* Equal margin on both sides */
    }
    
    /* Stack profile elements vertically */
    .profile-container {
        flex-direction: column;        /* Change from row to column layout */
        text-align: center;            /* Center-align text */
    }
    
    /* Center and resize profile image */
    .profile-image {
        flex: 0 0 200px;               /* Smaller fixed size */
        margin: 0 auto;                /* Center horizontally */
    }
    
    /* Center the decorative line under headings */
    h2:after {
        left: 50%;                     /* Center horizontally */
        transform: translateX(-50%);   /* Perfect centering */
    }
    
    /* Center-align section headings */
    h2 {
        text-align: center;            /* Center-align text */
    }
    
    /* Change skills grid to single column */
    .skills-container {
        grid-template-columns: 1fr;    /* Single column layout */
    }
    
    /* Change recommendations grid to single column */
    .recommendations-container {
        grid-template-columns: 1fr;    /* Single column layout */
    }
    
    /* Adjust project hover effect for touch screens */
    .project:hover {
        transform: translateY(-5px);   /* Move up instead of right */
        transform: translateX(0);      /* Cancel the left-right movement */
    }
}

/* 
 * Small screens (phones in landscape, small tablets)
 * Applied when the viewport width is 768px or less
 */
@media (max-width: 768px) {
    /* Stack header elements vertically */
    header {
        flex-direction: column;        /* Change from row to column layout */
        text-align: center;            /* Center-align text */
        padding: 15px 5%;              /* Reduce padding */
    }
    
    /* Center the navigation and add space above */
    nav ul {
        margin-top: 15px;              /* Space above navigation */
        justify-content: center;        /* Center navigation links */
    }
    
    /* Adjust spacing between navigation items */
    nav ul li {
        margin: 0 10px;                /* Equal margin on both sides */
    }
    
    /* Stack profile elements vertically */
    .profile-container {
        flex-direction: column;        /* Change from row to column layout */
        text-align: center;            /* Center-align text */
    }
    
    /* Center and resize profile image */
    .profile-image {
        flex: 0 0 200px;               /* Smaller fixed size */
        margin: 0 auto;                /* Center horizontally */
    }
    
    /* Center the decorative line under headings */
    h2:after {
        left: 50%;                     /* Center horizontally */
        transform: translateX(-50%);   /* Perfect centering */
    }
    
    /* Center-align section headings */
    h2 {
        text-align: center;            /* Center-align text */
    }
    
    /* Change skills grid to single column */
    .skills-container {
        grid-template-columns: 1fr;    /* Single column layout */
    }
    
    /* Change recommendations grid to single column */
    .recommendations-container {
        grid-template-columns: 1fr;    /* Single column layout */
    }
    
    /* Adjust project hover effect for touch screens */
    .project:hover {
        transform: translateY(-5px);   /* Move up instead of right */
        transform: translateX(0);      /* Cancel the left-right movement */
    }
}

@media (max-width: 576px) {
    /* 
     * Stack navigation links vertically
     * On very small screens, the navigation menu displays as a vertical list
     */
    nav ul {
        flex-direction: column;        /* Change from row to column layout */
        align-items: center;           /* Center horizontally */
    }
    
    /* Add space between nav items when stacked */
    nav ul li {
        margin: 5px 0;                 /* Vertical spacing, no horizontal */
    }
    
    /* Reduce profile spacing */
    .profile-container {
        gap: 20px;                     /* Less space between elements */
    }
    
    /* Make back-to-top button smaller */
    .back-to-top {
        bottom: 20px;                  /* Position closer to bottom */
        right: 20px;                   /* Position closer to right */
        width: 45px;                   /* Smaller width */
        height: 45px;                  /* Smaller height */
    }
}

/* ===== ENHANCEMENTS: TITLE, SOCIAL LINKS, CTA, STATS, TAGS, EDUCATION, FOOTER ===== */

/* Header subtitle (job title under the name) */
.header-title {
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 0;
    letter-spacing: 0.5px;
    text-transform: lowercase;
    animation: fadeIn 0.6s ease-out 0.15s both;
}

/* Contact info link styling */
.contact-info p a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.contact-info p a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Social icon row inside contact info */
.contact-info .social-links {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}
.contact-info .social-links a {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    transition: all var(--transition-medium);
}
.contact-info .social-links a i {
    display: block;
    line-height: 1;
    width: 1em;
    height: 1em;
    text-align: center;
}
.contact-info .social-links a i::before {
    display: block;
    line-height: 1;
}
.contact-info .social-links a:hover {
    background: white;
    border-color: white;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Availability pill — mono-styled with a live mint dot */
.availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 22px;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(15, 11, 31, 0.04);
}
.availability-pill i {
    color: var(--mint);
    font-size: 0.55rem;
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Hero tagline — the punchy statement under the greeting */
.profile-tagline {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.4;
    max-width: 60ch;
    letter-spacing: -0.01em;
}

.profile-description {
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.98rem;
    max-width: 65ch;
}

/* Hero call-to-action buttons */
.profile-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all var(--transition-medium);
    border: 1.5px solid transparent;
    cursor: pointer;
    position: relative;
    letter-spacing: -0.01em;
}
.cta-button i {
    font-size: 0.9rem;
    transition: transform var(--transition-medium);
}
.cta-button:hover i {
    transform: translateX(3px);
}
.cta-primary {
    background: var(--ink);
    color: var(--text-on-ink);
    border-color: var(--ink);
}
.cta-primary:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #0F0B1F;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(245, 158, 11, 0.5);
}
.cta-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.cta-secondary:hover {
    background: var(--ink);
    color: var(--text-on-ink);
    transform: translateY(-2px);
}
.cta-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-strong);
    padding: 13px 18px;
}
.cta-ghost:hover {
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-2px);
}

/* Magazine-style stats — no card boxes, just typography + dividers */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 70px;
    padding-top: 36px;
    border-top: 1.5px solid var(--ink);
}
.stat-item {
    padding: 0 24px;
    border-left: 1px solid var(--border-light);
    transition: transform var(--transition-medium);
}
.stat-item:first-child {
    border-left: none;
    padding-left: 0;
}
.stat-item:hover {
    transform: translateY(-3px);
}
.stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw, 3.6rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.04em;
}
.stat-value::after {
    content: '.';
    color: var(--accent-color);
}
.stat-label {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Section intro paragraph (small subtitle below each section heading) */
.section-intro {
    color: var(--text-muted);
    margin-top: -4px;
    margin-bottom: 36px;
    font-size: 1rem;
    max-width: 60ch;
    line-height: 1.65;
}

/* Skill category badge — small mono tag in the corner */
.skill-category {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    padding: 0;
    background: transparent;
    color: var(--accent-color);
    border-radius: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Project card pieces */
.project-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
    max-width: calc(100% - 90px); /* Leaves room for the big number top-right */
}
.project-header h3 {
    margin-bottom: 0;
}
.project-type {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--accent-color);
    background: transparent;
    padding: 0;
    border-radius: 0;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    order: -1;
}
.project-tagline {
    color: var(--text-muted);
    font-style: normal;
    font-family: var(--font-display);
    margin-bottom: 16px;
    font-size: 1.05rem;
    font-weight: 500;
}
.project-description {
    margin-bottom: 20px;
    color: var(--text-color);
    line-height: 1.7;
    font-size: 0.95rem;
}
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
}
.tech-tag {
    display: inline-block;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all var(--transition-fast);
}
.tech-tag:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--accent-soft);
}
.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 4px;
    border-top: 1px solid var(--border-light);
    padding-top: 18px;
}
.project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-medium);
    position: relative;
}
.project-link::after {
    content: '→';
    transition: transform var(--transition-medium);
    color: var(--accent-color);
}
.project-link:hover {
    color: var(--accent-color);
    transform: none;
    box-shadow: none;
}
.project-link:hover::after {
    transform: translateX(4px);
}
.project-link i {
    font-size: 0.95rem;
}

/* Education — timeline style with mono dates on the left */
.education-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
}
.education-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1.5px;
    background: var(--border-strong);
}
.education-card {
    background: transparent;
    border-radius: 0;
    padding: 22px 0 22px 36px;
    box-shadow: none;
    border-left: none;
    position: relative;
    transition: transform var(--transition-medium);
    border-bottom: 1px solid var(--border-light);
}
.education-card:last-child {
    border-bottom: none;
}
.education-card::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 30px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--border-strong);
    transition: all var(--transition-medium);
}
.education-card--primary::before {
    background: var(--accent-color);
    border-color: var(--ink);
}
.education-card:hover {
    transform: translateX(4px);
}
.education-card:hover::before {
    border-color: var(--accent-color);
    background: var(--accent-color);
}
.education-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.education-card h3 {
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.education-gpa {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--accent-soft);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.education-school {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 4px;
    font-size: 0.95rem;
}
.education-dates {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.education-detail {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    font-size: 0.93rem;
    max-width: 70ch;
}

/* ===== Footer ===== */
.site-footer {
    background: var(--surface-strong);
    color: rgba(255, 255, 255, 0.7);
    padding: 60px 6% 30px;
    margin-top: 80px;
    border-top: 4px solid var(--accent-color);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}
.footer-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.footer-block a,
.footer-block span {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color var(--transition-fast);
}
.footer-block a:hover {
    color: var(--accent-color);
}
.footer-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
    letter-spacing: 0.2px;
    margin: 0;
}
.footer-meta::before {
    content: '// ';
    color: var(--accent-color);
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .profile-container {
        grid-template-columns: 260px 1fr;
        gap: 40px;
    }
    .skills-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 880px) {
    .profile-container {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .profile-image {
        max-width: 240px;
    }
    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 0;
    }
    .stat-item:nth-child(3) {
        border-left: none;
        padding-left: 0;
    }
    .skills-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .recommendations-container {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
@media (max-width: 768px) {
    header {
        padding: 18px 5%;
    }
    .header-left h1 {
        font-size: 1.3rem;
    }
    nav ul {
        margin-top: 12px;
        flex-wrap: wrap;
        gap: 8px 14px;
        justify-content: flex-start;
    }
    nav ul li {
        margin-left: 0;
    }
    main {
        padding: 30px 6%;
    }
    .project {
        padding: 28px 24px;
    }
    .project::before {
        font-size: 3rem;
        top: 18px;
        right: 22px;
    }
    .project-header {
        max-width: calc(100% - 60px);
    }
    .cta-button {
        padding: 11px 18px;
        font-size: 0.88rem;
    }
    .stat-value {
        font-size: 2.4rem;
    }
}
@media (max-width: 560px) {
    .skills-container {
        grid-template-columns: 1fr;
    }
    .profile-stats {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }
    .stat-item {
        padding: 0;
        border-left: none;
    }
    .stat-item + .stat-item {
        padding-top: 20px;
        border-top: 1px solid var(--border-light);
    }
    .education-card {
        padding-left: 28px;
    }
    .profile-content h2 {
        flex-wrap: wrap;
        gap: 8px;
    }
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    .add-recommendation {
        padding: 30px 24px;
    }
}

/* Honeypot field — bots fill it, humans never see it. Off-screen rather than display:none
   because some bots ignore display:none and only fill visible-by-flow fields. */
.botcheck {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ===== THEME TOGGLE (segmented light / system / dark) ===== */
.header-right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    flex-shrink: 0;
}
.theme-toggle button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0;
    transition: all var(--transition-fast);
}
.theme-toggle button:hover {
    color: rgba(255, 255, 255, 0.9);
}
.theme-toggle button[aria-checked="true"] {
    background: var(--accent-color);
    color: #0F0B1F;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35);
}
.theme-toggle button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Adjustment for the toggle on dark theme (slightly more subtle bg) */
:root[data-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===== DARK-MODE FINE-TUNING (visual edge cases the variable swap can't handle alone) ===== */

/* Big watermark project number — bump opacity so it's still legible against the dark card */
:root[data-theme="dark"] .project::before {
    color: rgba(245, 241, 255, 0.05);
}
:root[data-theme="dark"] .project:hover::before {
    color: rgba(245, 158, 11, 0.4);
}

/* Single-color brand icons (Apple silhouette, GitHub octocat, Django plain) disappear on dark.
   Invert them so they remain legible. */
:root[data-theme="dark"] .skill-icon img[src*="simple-icons"],
:root[data-theme="dark"] .skill-icon img[src*="github-original"],
:root[data-theme="dark"] .skill-icon img[src*="django-plain"] {
    filter: invert(0.92);
}

/* Tech-tag hover — use a slightly bolder amber tint in dark mode */
:root[data-theme="dark"] .tech-tag:hover {
    background: rgba(245, 158, 11, 0.12);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Stats divider line above the row */
:root[data-theme="dark"] .profile-stats {
    border-top-color: var(--border-strong);
}

/* Availability pill — let the dark surface show through with a softer border */
:root[data-theme="dark"] .availability-pill {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-color);
}

/* Modal overlay — the modal-content card needs the themed surface */
:root[data-theme="dark"] .modal-content {
    background: var(--surface);
    color: var(--text-color);
}
:root[data-theme="dark"] .modal-content h3 {
    color: var(--ink);
}
:root[data-theme="dark"] .close-modal {
    color: var(--text-muted);
}
:root[data-theme="dark"] .close-modal:hover {
    color: var(--text-color);
}

/* Footer text inherits a slightly cooler tone on dark to avoid the same-ish hue */
:root[data-theme="dark"] .site-footer {
    color: rgba(245, 241, 255, 0.7);
}

/* Recommendation form inputs already use rgba whites, but on the form's dark surface in dark mode
   we can lean into the amber focus a touch more */
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group textarea {
    background: rgba(255, 255, 255, 0.03);
}

/* Toggle responsive — collapse to icons-only at narrow widths is already the default,
   but make sure it wraps below the nav on small screens */
@media (max-width: 768px) {
    .header-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 12px;
        justify-content: space-between;
    }
    .theme-toggle {
        margin-left: auto;
    }
}
@media (max-width: 480px) {
    .header-right {
        justify-content: flex-start;
    }
}