/* Global styling*/
main {
    /* adds space on each side to stop it from touching the edges of the screen */
    padding: 0px 50px;
}

/* =========================================
   Styling for Navigation
   ========================================= */
/* styling for the nav */
#main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #5f5f5f;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
}
/*Logo-area only effects the pfp in the top left*/
.logo-area {
    display: flex;
    /*Mainly to effect the text and have the text aligned properly */
    align-items: center;
    color: white;
}

/* Makes the logo circular and have a border to make it pop against the background */
.logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid white;
    overflow: hidden;
}

.navbar ul {
    /* Mandatory: Puts the nav links in a row */
    display: flex;
    /* Removes default list styling and spacing */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Styling the nav links to be white and have padding for better clickability */
.navbar a {
    /* Removes default bullet points */
    text-decoration: none;
    color: white;
    padding: 15px;
    display: block;
}

.navbar a:hover {
    background-color: #3a3a3a;
}


/* =========================================
   Styling for Footer
   ========================================= */

/* Footer styling */
footer {
    background-color: #5f5f5f;
    /* formating for the footer text*/
    color: white;
    text-align: center;
    padding: 10px 0;
    font-family: Arial, sans-serif;
}

/* Styling the links in the footer to be white as blue hard to read */
footer a {
    color: white; 
    text-decoration: none;
}

/* =========================================
   Styling for call to action buttons
   ========================================= */
.cta-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    font-family: Arial, sans-serif;
    align-self: flex-start; /* Aligns the button to the left of the container and prevents it from stretching  to parent length*/
    cursor: pointer;
    border: none; /* Removes default button border */
}


.cta-button:hover {
    background-color: #0056b3;
    
}

/* =========================================
   Styling for education
   ========================================= */
/* Padding for the section to seperate from above*/
#education {
    padding: 10px 0px; /* Mandatory */
}

/* =========================================
   Styling for work experience
   ========================================= */
/* Padding for the section to seperate from above*/
#work-experience {
    padding: 10px 0px; /* Mandatory */
}

/* =========================================
   Styling for Programming Skills
   ========================================= */

/* Padding for the section to seperate from above*/
#skills {
    padding: 10px 0px;
}


.skill-item {
    padding: 10px;           /* Adds padding around each skill item */
    display: flex;           /* Puts logo and text in a row */
    align-items: center;     /* Vertically centers text next to logo */
    margin: 15px 0;          /* Adds space between each skill row */
    width: 100%;             /* makes it spans the container width */
}

/* Makes the programing skills logos look consistent & appropriate size */
.skill-logo {
    width: 60px;             /* Keeps all logos the same size */
    height: 60px;            
    margin-right: 20px;      /*Space between the logo and text */
}

/* Skill Bars Styling */
/*The main dark grey back part for the empty bar */
.skill-bar {
    background-color: #e0e0e0;
    border-radius: 25px;
    width: 50%; /* Adjusted width screen scaling */
    max-width: 400px; /* Stops the skill bars from getting too wide on large screens */
    height: 20px;
    margin-top: 8px;
    margin-left: 20px;
}

/*The filled part of the skill bar */
.skill-bar span {
    display: block;
    padding: 0 10px;
    height: 100%;
    border-radius: 25px;
}

/* Different colors and widths for each skill bar to visually represent proficiency */
.skill-bar.html5 span {
    width: 60%;
    background-color: #f06529; /* HTML5 Orange */
}

.skill-bar.css3 span {
    width: 40%;
    background-color: #2965f1; /* CSS3 Blue */
}

.skill-bar.javascript span {
    width: 30%;
    background-color: #f0db4f; /* JavaScript Yellow */
}


/* =========================================
   Styling for Interests / Hobbies
   ========================================= */

/* Padding for the section to seperate from above*/
#interests {
    padding: 10px 0px;
}

.hobby-gallery {
    display: flex;       /* Puts the images in a row */
    flex-wrap: wrap;     /* Stacks them if screen is too small */
    justify-content: center; /* Centers the gallery */
    gap: 15px;
}

.hobby-img {
    width: fit-content;     /* Sets the width to fit the content ratio of the hight, preventing stretching */
    height: 200px;       /* Locked hight to keep consistency */
    object-fit: cover;   /* forces the image to cover the container while maintaining aspect ratio */
    border: 4px solid #555;
    border-radius: 8px;
}

blockquote {
    font-family: 'Georgia', serif; /* Use diffrent font to global */
    font-style: italic;
    border-left: 5px solid #007bff; /* Styling bar */
    padding-left: 15px; /* padding from the left side of the quote */
    margin: 20px 0; /* spacing from the top and bottom of the quote */
}

/* =========================================
   Styling for Portfolio Page
   ========================================= */

#projects {
    display: flex;          
    flex-wrap: wrap;        
    justify-content: center; /* Centers cards in the middle */
    gap: 30px;              /* Spacing between cards */
    padding: 20px 0;
    flex-direction: column; /* Stacks the cards vertically */
}

.project {
    border: 1px solid #ccc; /* Border property */
    border-radius: 8px;     /* Rounded corners */
    width: 80%;             /* Makes the card take up most of the width on smaller screens and keeps site responsive*/
    max-width: 600px;           /* prevents the text from getting too wide on large screens */
    padding: 15px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
    display: flex;
    flex-direction: column; /* Stacks image, title, text vertically */
}

.project-img {
    width: 100%;            /* Forces image to fit the current card width*/
    height: fit-content;          /* Fixed height for uniformity */
    object-fit: cover;      /* Crops image nicely without squishing */
    border-radius: 5px;
    margin-bottom: 10px;
}

.project h3 {
    margin-top: 0px;
    color: #333;
    font-size: 1.2em;
    margin-bottom: 0px;
}

.project h3 a {
    text-decoration: none; /* Removes the underline */
    color: #333;
}

.project h3 a:hover {
    color: #007bff; /* Changes color to show its a link */
}

.project p {
    margin: 15px 0; /* Adds spacing between paragraphs */
}

.ai-disclaimer {
    font-size: 0.8em;       /* Smaller text */
    color: #777;            /* Grey color */
    margin-top: auto;       /* Disclaimer at the bottom of the card */
    font-style: italic;
}

/* =========================================
   Styling for contact form
   ========================================= */

#contact-me{
    padding: 50px 20px;
}

.contact-container {
    /* Same code and sytle resued from potfolio */
    max-width: 600px;
    border: 1px solid #ccc; /* Border property */
    margin: 0 auto; /* Centers the box */
    background: #f9f9f9;
    padding: 40px; /* Adds space inside the box to stop content from touching edges */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* Centers title */
.contact-container h2 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
}

/* Centers description, chage colour and a size*/
.form-description {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

/*Have all labels aligned and in bold for readability */
form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

/* Styling input boxes */
form input, 
form select, 
form textarea {
    width: 100%;    /* Fits to the container */
    padding: 12px;  /* Makes the box thicker */
    margin-bottom: 20px;
    border: 1px solid #ddd; /* makes the box more defined */
    border-radius: 5px;
    font-size: 16px;
}

/* --- Focus State (Accessibility) --- */
form input:focus, 
form select:focus, 
form textarea:focus {
    border-color: #007bff; /* Blue border when clicking inside */
    outline: none;
    box-shadow: 0 0 5px rgba(0,123,255,0.2);
}

/* --- Button Specifics --- */
.form-btn {
    width: 100%; /* over ride the normal width to fit container */
    padding: 15px;
    font-size: 18px;
    margin-top: 10px;
}

#submit {
    cursor: pointer;
}