/* 1. GLOBAL SETTINGS */
body {
    background-color: #f0eff4; 
    background-image: radial-gradient(#d7bde2 15%, transparent 16%), radial-gradient(#d7bde2 15%, transparent 16%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    font-family: 'Quicksand', sans-serif;
    color: #2e2633; 
    
    margin: 0;
    padding: 0;
    
    /* CHANGE: Use min-height instead of height. 
       This allows the page to grow taller than the screen! */
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

/* 2. LAYOUT */
.container {
    background-color: #ffffff;
    width: 1000px; 
    max-width: 100%; 
    
    /* CHANGE: Remove fixed height and overflow. 
       Now the box grows with the text. */
    height: auto; 
    min-height: 100vh; /* Ensures it goes at least to the bottom */
    
    border-left: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    box-shadow: 0px 0px 30px rgba(46, 38, 51, 0.2);
    
    display: flex;
    /* Removed overflow: hidden so the page can scroll naturally */
}

/* SIDEBAR UPDATE */
.sidebar {
    background-color: #fcfbfd; 
    width: 300px; 
    padding: 30px;
    text-align: center;
    border-right: 2px dashed #d7bde2; 
    flex-shrink: 0;
    
    /* MAGIC TRICK: Sticky Sidebar! 
       This makes the sidebar "stick" to the top of the screen 
       while you scroll down the main content. */
    position: sticky; 
    top: 0;
    height: 100vh; /* Sidebar stays full height of screen */
    overflow-y: auto; /* Adds scrollbar inside sidebar ONLY if sidebar is too tall */
}

/* CONTENT UPDATE */
.content {
    padding: 50px;
    flex-grow: 1;
    
    /* CHANGE: Remove scrolling from here. 
       The main page scrollbar will handle this now. */
    height: auto; 
    overflow: visible;
}

/* 3. IMAGES & DECORATION */
.profile-pic {
    width: 180px;
    height: 180px;
    object-fit: cover; /* This makes sure the GIF doesn't stretch weirdly */
    border-radius: 50%;
    border: 5px solid #ffffff;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    
    /* Optional: Adds a subtle purple glow to the image */
    background-color: #f0eff4; 
}

.stat-box {
    background: #ffffff;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 10px;
    
    /* Border matches the soft lavender fluff */
    border: 1px solid #d7bde2; 
    font-size: 0.9em;
    color: #574b5e; /* Slightly lighter text for stats */
}

h1 {
    /* HEADLINES match the BRIGHT PURPLE EYES */
    color: #9b59b6; 
    margin-top: 0;
    font-size: 2.5em;
    letter-spacing: 2px;
}

.tag {
    display: inline-block;
    /* Tag background matches the eyes */
    background: #9b59b6; 
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    margin-bottom: 20px;
    font-weight: bold;
}

.bio-text {
    line-height: 1.6;
    margin-bottom: 20px;
}

.divider {
    border: 0; 
    border-top: 2px dashed #d7bde2; 
    margin: 20px 0;
}

/* 4. GALLERY & LINKS */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.gallery img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s;
    border: 1px solid #eee;
}

.gallery img:hover {
    transform: scale(1.05);
    border-color: #9b59b6;
}

a {
    /* Links match the eyes */
    color: #9b59b6; 
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
    color: #8e44ad; /* Gets slightly darker when you hover */
}

/* REFERENCE SHEET STYLES */

.ref-sheet {
    width: 100%;        /* Forces image to fit the container width */
    height: auto;       /* Keeps the aspect ratio perfect */
    border-radius: 10px;
    border: 2px solid #d7bde2; /* Soft purple border */
    margin-bottom: 10px;
    transition: transform 0.2s;
}

.ref-sheet:hover {
    opacity: 0.9;       /* Slight fade when hovering so they know it's clickable */
    cursor: zoom-in;    /* Changes cursor to a magnifying glass */
}

/* COLOR PALETTE ROW */
.color-palette {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background: #fcfbfd;
    border-radius: 8px;
    border: 1px dashed #d7bde2;
    justify-content: center;
}

.swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* PORTFOLIO GRID STYLES */
.portfolio-grid {
    display: grid;
    /* This automatically fits as many columns as possible */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px;
    margin-top: 20px;
}

.portfolio-item {
    background: #fcfbfd;
    border: 1px solid #d7bde2;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.2s;
}

.portfolio-item:hover {
    transform: translateY(-5px); /* Floats up slightly on hover */
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.2);
}

.portfolio-item img {
    width: 100%;
    height: 150px; /* Forces all thumbnails to be the same height */
    object-fit: cover; /* Crops the image so it doesn't squish */
    border-radius: 5px;
    margin-bottom: 10px;
}

.portfolio-item p {
    font-size: 0.9em;
    color: #574b5e;
    margin: 0;
}

/* INTERESTS SECTION STYLES */

.interests-container {
    display: flex; /* Puts the boxes side-by-side */
    gap: 20px;     /* Space between the two boxes */
    margin-bottom: 20px;
}

.interest-box {
    flex: 1;       /* Makes them equal width */
    background: #ffffff;
    border: 1px solid #d7bde2; /* Soft purple border */
    border-radius: 10px;
    padding: 20px;
}

.interest-box h4 {
    margin-top: 0;
    border-bottom: 2px dashed #d7bde2;
    padding-bottom: 10px;
    color: #9b59b6; /* Purple Text */
}

/* Custom Bullet Points */
.interest-box ul {
    list-style-type: none; /* Removes default black dots */
    padding: 0;
}

.interest-box li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

/* Adds a little heart before every list item in "Likes" */
.likes li::before {
    content: "💜"; 
    position: absolute;
    left: 0;
    font-size: 0.8em;
}

/* Adds a little X before every list item in "Dislikes" */
.dislikes li::before {
    content: "💀"; 
    position: absolute;
    left: 0;
    font-size: 0.8em;
}

/* FAVORITES BAR STYLE */
.favorites-box {
    background: #f0eff4; /* Darker grey background */
    padding: 15px;
    border-radius: 10px;
    border-left: 5px solid #9b59b6; /* Purple stripe on the left */
    line-height: 1.8; /* Spacing between lines */
    margin-bottom: 20px;
}

/* CUTE IMAGE DIVIDER */
.img-divider {
    display: block;        /* Makes it its own line */
    margin: 30px auto;     /* Centers it with space top/bottom */
    max-width: 100%;       /* Prevents it from being wider than the screen */
    height: auto;
    opacity: 0.8;          /* Optional: Makes it slightly soft/blend in */
}

.wiggle-line {
    border: none;
    height: 10px;
    background: radial-gradient(circle, #d7bde2 5px, transparent 6px);
    background-size: 15px 15px; /* Creates a dot pattern */
    width: 100%;
    margin: 30px 0;
    opacity: 0.6;
}

/* TOP NAVIGATION TABS */
.topnav {
    display: flex;          /* Lines them up horizontally */
    gap: 10px;              /* Space between tabs */
    margin-bottom: 40px;    /* Space between nav and your bio */
    border-bottom: 2px dashed #d7bde2; /* A cute line underneath the tabs */
    padding-bottom: 20px;
    flex-wrap: wrap;        /* Allows tabs to stack if screen is small */
}

.topnav a {
    text-decoration: none;
    background-color: #f0eff4; /* Light grey background */
    color: #2e2633;            /* Dark text */
    padding: 10px 20px;        /* Makes them chunky buttons */
    border-radius: 20px;       /* Pill shape */
    font-weight: bold;
    font-size: 0.9em;
    border: 1px solid #d7bde2;
    transition: all 0.2s ease;
}

/* Hover Effect: Turn purple! */
.topnav a:hover {
    background-color: #9b59b6;
    color: white;
    transform: translateY(-3px); /* Floats up slightly */
    box-shadow: 0 5px 10px rgba(155, 89, 182, 0.3);
}

/* "Active" Tab style - Shows which page you are currently on */
.topnav a.active {
    background-color: #2e2633; /* Dark Charcoal */
    color: white;
    border-color: #2e2633;
}

/* MOBILE FIX: Stack them if screen is too small */
@media (max-width: 600px) {
    .interests-container {
        flex-direction: column;
    }
}

/* 5. MOBILE RESPONSIVE */
/* =========================================
   MOBILE RESPONSIVENESS FIX
   (Paste this at the very bottom of style.css)
   ========================================= */

@media (max-width: 800px) {
    
    /* 1. FIX THE MAIN CONTAINER */
    .container {
        flex-direction: column; /* Stack top-to-bottom instead of side-by-side */
        width: 100%;            /* Fill the phone screen width */
        height: auto;           /* Let the page grow tall naturally */
        border: none;           /* Remove side borders on mobile */
    }

    /* 2. UN-STICK THE SIDEBAR */
    .sidebar {
        width: auto;            /* Let it fill the width */
        height: auto;           /* Stop it from being full screen height */
        position: relative;     /* Turn off "Sticky" mode */
        top: auto;
        
        /* Change border from Right side to Bottom */
        border-right: none;
        border-bottom: 2px dashed #d7bde2;
        
        padding: 20px;
    }

    /* 3. FIX THE CONTENT AREA */
    .content {
        width: auto;
        padding: 20px;          /* Less padding on small screens */
    }

    /* 4. ADJUST NAVIGATION BUTTONS */
    .topnav {
        justify-content: center; /* Center the buttons */
        gap: 5px;                /* Smaller gaps */
    }
    
    .topnav a {
        font-size: 0.8em;        /* Make text slightly smaller to fit */
        padding: 8px 15px;       /* Smaller buttons */
        flex-grow: 1;            /* Make buttons stretch to fill row */
        text-align: center;
    }

    /* 5. FIX THE INTERESTS BOXES */
    .interests-container {
        flex-direction: column;  /* Stack Likes/Dislikes vertically */
    }
}