/* ==========================================================================
   1. GLOBAL RESETS & BASE STYLES
   These styles apply to the whole page to ensure consistency across browsers.
   ========================================================================== */

/* Selects every element in the HTML */
* {
    margin: 0;              /* Remove default margin from all elements */
    padding: 0;             /* Remove default padding */
    box-sizing: border-box; /* Makes sure padding & border are included in width/height calculations */
}

/* Controls behavior for the whole HTML document */
html {
    scroll-behavior: smooth; /* Creates a smooth scrolling effect when clicking navigation links */
}

/* Basic text styling for the whole website body */
body {
    font-family: Arial, sans-serif; /* Sets the default font */
    position: relative;             /* Allows us to position children elements absolutely if needed */
    color: #333;                    /* Sets a dark gray text color (softer than pure black) */
}

/* ==========================================================================
   2. HEADER / NAVBAR STYLES
   Controls the top navigation bar that stays fixed at the top of the screen.
   ========================================================================== */

header {
    width: 100%;             /* Spans the full width of the screen */
    height: 80px;            /* Fixed height for the navbar */
    background-color: white; /* White background */
    
    /* These lines make the header stick to the top */
    position: fixed;
    top: 0;
    left: 0;
    
    z-index: 1000;                      /* Ensures the header stays on top of all other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adds a subtle shadow under the navbar */
}

/* Wrapper inside header to align content and limit width */
.header-content {
    max-width: 1500px;           /* Prevents content from stretching too wide on huge screens */
    height: 100%;                /* Takes up the full 80px height of the header */
    margin: 0 auto;              /* Centers the container horizontally */
    padding: 0 50px;             /* Adds space on the left and right sides */
    
    /* Flexbox layout to align Logo (left) and Nav (right) */
    display: flex;
    justify-content: space-between; 
    align-items: center;         /* Vertically centers the items */
}

/* --- LOGO AREA --- */
.header-logo {
    display: flex;       /* Puts image and text side-by-side */
    align-items: center; /* Vertically centers them */
    cursor: pointer;     /* Changes mouse cursor to a hand pointer */
}

/* Circular container for the logo image */
.header-logo-image {
    width: 50px;           /* Fixed width */
    height: 50px;          /* Fixed height */
    border-radius: 50%;    /* Turns the square box into a perfect circle */
    margin-right: 15px;    /* Adds space between the image and the text */
    overflow: hidden;      /* Hides any part of the image that sticks out */
}

.header-logo-image img {
    width: 100%;           /* Image fills the container width */
    height: 100%;          /* Image fills the container height */
    object-fit: cover;     /* Ensures image covers the circle without stretching/distortion */
}

/* Logo text styling */
.header-logo-text {
    font-size: 16px;           /* Sets font size for logo name */
    font-weight: bold;         /* Makes the logo name bold */
    text-transform: uppercase; /* Forces text to be ALL CAPS */
    letter-spacing: 1px;       /* Adds slight spacing between letters */
}

/* --- NAVIGATION MENU (Desktop) --- */
.header-navigation ul {
    display: flex;    /* Lays out the links in a horizontal row */
    gap: 40px;        /* Adds space between each menu item */
    list-style: none; /* Removes the default bullet points */
}

/* Styling for the links (Home, About, etc.) */
.header-navigation a {
    text-decoration: none;      /* Removes the underline */
    font-size: 16px;            /* Sets navigation link font size */
    font-weight: bold;          /* Makes navigation links bold */
    color: #333;                /* Dark gray color for links */
    transition: color 0.3s ease; /* smooths the color change when hovering */
}

/* Change color when mouse hovers over link */
.header-navigation a:hover {
    color: #7843e9; /* Turns purple on hover */
}

/* --- MOBILE MENU (Hamburger Icon) --- */
.mobile-menu-icon {
    display: none;        /* Hidden by default on desktop computers */
    cursor: pointer;      /* Shows pointer cursor on interaction */
    flex-direction: column; /* Stacks the 3 bars vertically */
    gap: 5px;             /* Space between the bars */
}

/* The visual bars of the hamburger icon */
.bar {
    width: 25px;              /* Sets width of icon bar */
    height: 3px;              /* Sets thickness of icon bar */
    background-color: #333;   /* Dark gray color for the bars */
    display: block;           /* Ensures bar behaves as a block element */
}

/* Hidden checkbox used for CSS-only toggle logic */
#menu-toggle {
    display: none; /* The checkbox is invisible, but we listen for its 'checked' state */
}

/* ==========================================================================
   3. MAIN BACKGROUND & SECTIONS
   Styles for the background image and general section layouts.
   ========================================================================== */

.main-content {
    width: 100%;                  /* Occupies full width of its parent */
    background-image: url('../images/whiteBackground.png'); /* Background image path */
    background-size: cover;       /* Ensures image covers entire background */
    background-position: center;  /* Centers the image */
    background-attachment: fixed; /* Parallax effect: Image stays still while you scroll */
}

/* General style for every section (Home, About, Skills, etc.) */
.section {
    padding: 80px 20px;         /* Adds breathing room top/bottom and sides */
    text-align: center;         /* Centers text by default */
    scroll-margin-top: 100px;   /* Ensures the fixed header doesn't cover the section title when clicking links */
}

/* Container to keep section content from getting too wide */
.section-container {
    max-width: 1172px;          /* Restricts max width of the container content */
    margin: 0 auto;             /* Centers the container horizontally */
}

/* --- SECTION TITLES --- */
.section-title {
    font-size: 36px;            /* Large font for section headings */
    color: black;               /* Pure black color for titles */
    margin-bottom: 10px;        /* Space below the title text */
    text-transform: uppercase;  /* Forces titles to be uppercase */
    letter-spacing: 2px;        /* Increases spacing between heading letters */
    position: relative;         /* Needed for the underline (::after) positioning */
    display: inline-block;      /* Ensures the width matches the text length */
}

/* The decorative cyan line underneath titles */
.section-title::after {
    content: '';                /* Required for pseudo-elements */
    display: block;             /* Makes the line visible */
    width: 70px;                /* Length of the line */
    height: 4px;                /* Thickness of the line */
    background-color: #3ce7de;  /* Cyan color */
    margin: 8px auto 0;         /* Centers the line below the text */
    border-radius: 2px;         /* Rounds the edges of the line */
}

.section-subtitle {
    font-size: 18px;            /* Standard subtitle font size */
    color: #666;                /* Gray color */
    margin-bottom: 50px;        /* large space below subtitle before content starts */
}

/* ==========================================================================
   4. HOME SECTION
   Specific styles for the hero/introduction area.
   ========================================================================== */

.home-section {
    margin-top: 80px;               /* Pushes it down so it's not hidden behind the header */
    min-height: calc(100vh - 80px); /* Forces section to fill the screen (View Height - Header Height) */
    
    /* Flexbox to center everything perfectly in the middle of the screen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-container {
    display: flex;          /* Enables Flexbox for home content alignment */
    flex-direction: column; /* Stacks items vertically */
    align-items: center;    /* Centers children horizontally */
}

/* Container for Avatar + Name */
.home-introduction {
    display: flex;          /* Aligns avatar and title in a row */
    align-items: center;    /* Vertically aligns image and text */
    gap: 30px;              /* Space between avatar and text */
    margin-bottom: 20px;    /* Space below the intro row */
}

/* Profile Picture Styling */
.home-avatar {
    width: 225px;                          /* Set specific width for avatar */
    height: 225px;                         /* Set specific height for avatar */
    border: 5px solid white;               /* White ring around image */
    border-radius: 50%;                    /* Makes it a circle */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Drop shadow for depth */
    overflow: hidden;                      /* Keeps image inside the circular border */
}

.home-avatar img {
    width: 100%;            /* Fills container width */
    height: 100%;           /* Fills container height */
    object-fit: cover;      /* Maintains aspect ratio while filling circle */
}

/* Big "Hi, I'm..." Text */
.home-title {
    font-size: 54px;        /* Large hero text size */
    font-weight: 800;       /* Extra bold */
    text-align: left;       /* Aligns text to the left within its box */
}

/* Description text under the title */
.home-description {
    font-size: 20px;        /* Readable font size for intro text */
    margin-bottom: 40px;    /* Space before the projects button */
    max-width: 600px;       /* Keeps text from spanning too wide */
    color: #555;            /* Medium gray text */
    font-weight: 500;       /* Medium font weight */
}

/* Button Styling (Used for "My Projects" and "Visit" buttons) */
.home-buttons a, .button-link {
    display: inline-block;          /* Allows us to add padding/margins to the link */
    background-color: #1181dd;      /* Default Blue background */
    color: white;                   /* White text on button */
    padding: 15px 40px;             /* Makes the button big and clickable */
    border-radius: 5px;             /* Rounded corners */
    text-decoration: none;          /* Removes default underline */
    font-weight: bold;              /* Makes button text bold */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Adds elevation effect */
    transition: transform 0.2s;     /* Smooth movement on hover */
}

.home-buttons a:hover, .button-link:hover {
    transform: translateY(-3px);    /* Moves button slightly up when hovered */
}

/* ==========================================================================
   5. CONTENT SECTIONS (About, Skills, Projects, Contact)
   ========================================================================== */

/* --- ABOUT --- */
.about-section {
    background-color: transparent; /* Allows main background to show */
}

.about-text {
    font-size: 20px;    /* Sets body text size for about section */
    max-width: 800px;   /* Restricts paragraph width for readability */
    margin: 0 auto;     /* Centers block text */
    line-height: 1.6;   /* Increases space between lines for readability */
    color: #444;        /* Dark gray text */
}

/* --- SKILLS --- */
.skills-grid {
    display: grid;                          /* Uses CSS Grid layout */
    grid-template-columns: 1.5fr 1fr 1fr;   /* Creates 3 columns (first one is wider) */
    gap: 20px;                              /* Space between grid items */
    max-width: 800px;                       /* Limits the width of the grid */
    margin: 50px auto 0;                    /* Centers the grid and adds space above */
}

/* General design for all skill cards */
.skill-card {
    background-color: #fff;                 /* White background for cards */
    padding: 30px;                          /* Internal padding for card content */
    border-radius: 8px;                     /* Rounded corners for cards */
    font-weight: bold;                      /* Bold font for skill names */
    font-size: 18px;                        /* Standard card text size */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* Light shadow for card depth */
    
    /* Center text inside card */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: transform 0.3s ease;        /* Smooth transition for interaction effects */
}

/* Specific styling for Python Card (The large split-color card) */
.skill-python {
    grid-column: 1 / 2; /* Occupies the first column */
    grid-row: 1 / 3;    /* Spans across 2 rows vertically */
    font-size: 24px;    /* Larger text for main skill */
    color: white;       /* White text to contrast with background */
    /* Creates the diagonal split background (Blue and Yellow) */
    background: linear-gradient(151deg, #3776AB 50%, #FFD43B 50%);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Adds readability to text over gradient */
}

/* Other specific skill colors */
.skill-js {
    background-color: #F7DF1E; /* Yellow brand color for JS */
    color: #000;               /* Black text for contrast */
}

.skill-react {
    background-color: #61DAFB; /* Cyan brand color for React */
    color: #333131;            /* Dark text for contrast */
}

.skill-go {
    background-color: #00ADD8; /* Light blue brand color for Go */
    color: #fff;               /* White text for contrast */
}

.skill-rust {
    background-color: #B7410E; /* Orange-red brand color for Rust */
    color: #000;               /* Black text for contrast */
}

/* --- PROJECTS --- */
.project-card {
    display: flex;                  /* Side-by-side layout */
    align-items: center;            /* Vertically centers image and text info */
    justify-content: center;        /* Horizontally centers card contents */
    gap: 50px;                      /* Space between image and text */
    margin-bottom: 80px;            /* Space between different projects */
    text-align: left;               /* Aligns text to the left */
}

.project-image {
    flex: 1;                        /* Takes up 50% width */
    max-width: 500px;               /* Limits size of the project image */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Strong shadow for project showcase */
    border-radius: 10px;            /* Matches card corner style */
    overflow: hidden;               /* Crops image if it's too big */
}

.project-image img {
    width: 100%;        /* Fills container width */
    display: block;     /* Removes tiny whitespace under images */
}

.project-information {
    flex: 1;                        /* Takes up 50% width */
    max-width: 500px;               /* Limits width of description area */
}

.project-title {
    font-size: 28px;        /* Large font for project name */
    font-weight: 800;       /* Extra bold font weight */
    margin-bottom: 15px;    /* Space before description */
}

.project-description {
    font-size: 16px;        /* Standard description text size */
    color: #666;            /* Gray text for description */
    line-height: 1.6;       /* Increased spacing for readability */
    margin-bottom: 30px;    /* Space before the visit button */
}

/* Purple color specifically for project buttons */
.button-link {
    background-color: #7843e9; /* Overrides default blue with purple */
}

/* --- CONTACT FORM --- */
.contact-box {
    background-color: white;                /* White background for the form area */
    padding: 40px;                          /* Large internal padding */
    border-radius: 10px;                    /* Rounded corners */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Deep shadow to pop off background */
    max-width: 700px;                       /* Limits form width */
    margin: 0 auto;                         /* Centers the form box */
    text-align: left; /* Form labels align left */
}

.input-group {
    margin-bottom: 20px; /* Space between different input fields */
}

.input-group label {
    display: block; /* Forces label to be on its own line above input */
    font-weight: bold;      /* Makes labels bold */
    margin-bottom: 8px;     /* Space between label and input */
    color: #555;            /* Gray color for labels */
}

.input-group input, .input-group textarea {
    width: 100%;            /* Input fills the container */
    padding: 15px;          /* Large padding for easier typing */
    background-color: #f0f0f0; /* Light gray input background */
    border: 2px solid transparent; /* Transparent border until focused */
    border-radius: 5px;     /* Subtle rounded corners for inputs */
    font-family: inherit;   /* Uses body font family */
    font-size: 16px;        /* Sets font size for user input */
    outline: none;          /* Removes default browser outline */
}

.input-group textarea {
    height: 150px;          /* Makes the message box taller */
    resize: none;           /* Prevents user from dragging to resize */
}

/* Change style when user clicks inside the input */
.input-group input:focus, .input-group textarea:focus {
    background-color: #fff; /* Changes to white background when typing */
    border-color: #7843e9;  /* Highlights border with purple */
}

.submit-button-container {
    text-align: right;      /* Aligns submit button to the right */
}

.button-submit {
    background-color: #7843e9;      /* Purple background for submit */
    color: white;                   /* White text on submit button */
    padding: 15px 40px;             /* Large clickable area */
    border: none;                   /* Removes default button border */
    border-radius: 5px;             /* Rounded corners */
    font-weight: bold;              /* Makes text bold */
    font-size: 16px;                /* Standard button text size */
    cursor: pointer;                /* Hand icon on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth hover transition */
}

.button-submit:hover {
    background-color: #6030c0;   /* Darker purple on hover */
    transform: translateY(-2px); /* Slight lift */
}

/* ==========================================================================
   6. FOOTER SECTION
   ========================================================================== */

.footer {
    background-color: #000; /* Black background */
    color: #fff;            /* White text */
    padding: 60px 20px 20px; /* Large top padding, smaller bottom padding */
    text-align: center;      /* Centers footer content */
}

.footer-title {
    font-size: 18px;        /* Font size for footer headers */
    margin-bottom: 20px;    /* Space before social icons */
    letter-spacing: 2px;    /* Widely spaced footer titles */
}

.footer-icons {
    display: flex;          /* Aligns social icons in a row */
    justify-content: center; /* Centers social icons horizontally */
    gap: 30px;              /* Space between each social icon */
    margin-bottom: 40px;    /* Space before copyright text */
    align-items: center;    /* Vertically aligns icons */
}

.footer-icons a {
    text-decoration: none;      /* Removes link underline */
    transition: transform 0.3s; /* Smooth lift on hover */
}

.footer-icons a:hover {
    transform: translateY(-3px); /* Lifts icon up slightly on hover */
}

.social-image {
    width: 30px;       /* Sets icon width */
    height: 30px;      /* Sets icon height */
    filter: invert(1); /* Inverts colors (Black icons become White) */
}

.footer-copyright {
    border-top: 1px solid #333; /* Adds a thin divider line */
    padding-top: 20px;          /* Space between line and text */
    color: #bbb;                /* Light gray for copyright text */
}

.footer-copyright p {
    font-size: 12px; /* Small font size for copyright notice */
}

/* ==========================================================================
   7. RESPONSIVENESS (Mobile & Tablet)
   Media Queries change the layout based on screen size.
   ========================================================================== */

/* Tablet (Screens smaller than 1024px) */
@media (max-width: 1024px) {
    .header-content {
        padding: 0 30px; /* Reduces side padding on header */
    }
    .home-title {
        font-size: 42px; /* Makes the main title slightly smaller */
    }
}

/* Mobile (Screens smaller than 768px) */
@media (max-width: 768px) {
    
    /* Show the hamburger menu icon */
    .mobile-menu-icon {
        display: flex; /* Makes the hamburger icon visible on mobile */
    }

    /* Hide the normal navigation links */
    .header-navigation {
        display: none;          /* Hidden by default */
        position: absolute;     /* Takes it out of normal flow */
        top: 80px;              /* Puts it directly below header */
        left: 0;                /* Aligns menu to the left edge */
        width: 100%;            /* Spans full mobile width */
        background-color: white; /* Mobile menu background */
        box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* Small shadow for mobile menu */
        padding: 20px 0;        /* Space inside mobile menu */
    }

    /* MAGIC: When the invisible checkbox (#menu-toggle) is CHECKED, 
       find the neighbor (.header-navigation) and display it */
    #menu-toggle:checked ~ .header-navigation {
        display: block; /* Shows menu when hamburger is toggled */
    }

    /* Stack links vertically for mobile */
    .header-navigation ul {
        flex-direction: column; /* Vertical link layout */
        gap: 20px;              /* Space between vertical links */
        text-align: right;      /* Aligns mobile links to the right */
        padding-right: 50px;    /* Indent from the right edge */
        padding-left: 0;        /* Resets left padding */
    }

    /* Stack Home section (Avatar above Text) */
    .home-introduction {
        flex-direction: column; /* Vertical hero layout on mobile */
        text-align: center;     /* Centers hero content */
    }
    
    .home-title {
        text-align: center; /* Centers title on mobile */
        font-size: 36px;    /* Smaller font for mobile screens */
    }

    .home-description {
        text-align: center; /* Centers description on mobile */
        padding: 0 20px;    /* Side padding for readability */
    }

    /* Make skills a single column list */
    .skills-grid {
        grid-template-columns: 1fr; /* Switches to 1 column grid */
    }

    /* Python card behaves normally in single column */
    .skill-python {
        grid-column: auto; /* Resets column span */
        grid-row: auto;    /* Resets row span */
        background: linear-gradient(to bottom right, #3776AB 50%, #FFD43B 50%); /* Adjusts gradient for vertical layout */
    }

    /* Stack Project card (Image above Text) */
    .project-card {
        flex-direction: column; /* Vertical project card layout */
        text-align: center;     /* Centers project info */
    }

    .project-information {
        text-align: center; /* Centers text details for projects on mobile */
    }
}