/* ==========================================================================
   VARIABLES & THEMES
   ========================================================================== */
:root, .dark-mode {
  --bg-color: #121212;         /* Dark background */
  --text-color: #e0e0e0;       /* Light grey text */
  --nav-bg: #1e1e1e;          /* Slightly lighter dark for the nav bar */
  --accent-color: #20865f;     /* Hover accent colour */
  --font-size-body: 18px;      /* Increases overall text size */
  --border-color: #2a2a2a;     /* Separator line colour */
}

/* When body has the light-mode class, swap the colors */
.light-mode {
  --bg-color: #ffffff;         /* White background */
  --text-color: #222222;       /* Dark grey text */
  --nav-bg: #f5f5f5;          /* Light grey navigation rectangle */
  --border-color: #585858;     /* Lighter separator line colour */
}

/* ==========================================================================
   GLOBAL BASE ELEMENTS
   ========================================================================== */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0; /* Removes the 20px edge margin so nav can stretch full-width */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-body);
    line-height: 1.6; /* Adds room between lines of text */
    transition: background-color 0.15s ease, color 0.15s ease; /* Smooth transition for theme changes */
}

/* Heading 1 formatting */
h1 {
    color: var(--text-color);
    font-size: clamp(28px, 5vw, 36px); /* Dynamic font size between 28px and 36px */
    /* Adds margin to the sides since body margin is 0 (due to nav), also uses 5% side margins instead of being fixed */
    margin: 40px 24px 20px;
}

/* Paragraph formatting */
p {
    margin: 20px 24px; /* Adds margin for same reason as headings */
}

/* ==========================================================================
   STRUCTURAL LAYOUT WRAPPERS (The Page Backbone)
   ========================================================================== */
/* Main centre container to keep content from spreading too wide on large screens */
.container {
    max-width: 1200px;
    margin: 0 auto; /* Centers the container */
    padding: 40px 24px; /* Matches global horizontal layout */
}

/* Prevents double-spacing inside the main container, so all pages sit at same height due to index.html having .profile-intro */
.container h1 {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.container h2, 
.container p {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   REUSABLE COMPONENTS (Shared Navigation & Links)
   ========================================================================== */
/* Horizontal rectangular navigation bar */
nav {
  display: flex;
  align-items: center; /* Vertically centers the button and nav links */
  background-color: var(--nav-bg);
  padding: 20px 0;
  border-bottom: 2px solid var(--border-color); /* Separator line below the nav block */
}

.nav-content {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box; /* Ensures padding doesn't affect total width */
}

/* Style the button container for the icons */
.theme-toggle {
    background: none; /* background and border removes default button background */
    border: none;
    color: var(--text-color);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;

}

/* Dark mode hover -> sun icon turns yellow */
.theme-toggle:hover {
    color: #ffb703; /* A sun colour for hover effect on the button */
}

.light-mode .theme-toggle:hover {
    color: var(--text-color); /* A moon colour for hover effect on the button */
}

/* The wrapper holding the text links */
.nav-links {
  display: flex;
  gap: 30px;
  margin-left: auto; /* Pushes the links to the far right */
}

/* Style the navigation links */
.nav-links a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Highlight the link when hovered */
.nav-links a:hover {
  color: var(--accent-color);
}

/* Highlight the active link */
.nav-links a.active {
  color: var(--accent-color); /* Keeps the active link highlighted even when not hovered */
  border-bottom: 2px solid var(--accent-color); /* Adds an underline to active page */
}

/* Contact links with icons */
.contact-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Slightly larger gap next to icons */
  transition: color 0.2s ease;
}

.contact-link:hover {
  color: var(--accent-color);
}

/* ==========================================================================
   PAGE-SPECIFIC STYLES (Home Page / Projects)
   ========================================================================== */
.profile-intro {
    display: flex;
    align-items: center; /* Vertically centers the text and image */
    gap: 20px; /* Adds space between the text and image */
    margin: 0 0 40px
}

/* Intro header and paragraph formatting */
.profile-intro h1 {
    margin: 0 0 10px 0; /* Overrides global h1 margin to keep the intro tight */
}

.profile-intro p {
    margin: 0 0 40px 0; /* Overrides global paragraph margin */
}

/* Clear out older conflicting inline margins */
.profile-text h1 {
    margin: 0 0 4px 0; 
}

.profile-text p {
    margin: 0; 
}

.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    margin-left: 20px; /* Adds space between the image and text */
    border: 5px solid var(--border-color);
}

/* Projects section formatting */

/* Projects section header */
.projects-section h2 {
    font-size: 28px;
    margin: 0 0 40px 0;
    color: var(--text-color);
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* The wide row container */
.project-row {
  display: flex;
  /* MAGIC STEP: This visually flips the layout on desktop so image is Left, text is Right */
  flex-direction: row-reverse; 
  align-items: center; 
  gap: 5%;             
  width: 100%;
}

.project-row:nth-child(even) {
  flex-direction: row; /* Flips the layout for even-numbered projects */
}

/* Right Side: Text content */
.project-text {
  flex: 1;             
  display: flex;
  flex-direction: column;
}

.project-text h3 {
  margin: 0 0 16px 0;
  font-size: 32px;     
  color: #ffffff;
}

.light-mode .project-text h3 {
  color: #111111;
}

.project-text p {
  margin: 0 0 30px 0;  
  font-size: 18px;
  color: var(--text-color);
  opacity: 0.7;
}

.project-actions {
  display: flex;
  gap: 20px;
}

.learn-more-btn {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px; 
  border-bottom: 2px solid var(--accent-color); 
  padding-bottom: 6px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.learn-more-btn:hover {
  color: var(--accent-color);
}

/* Left Side: Image wrapper */
.project-image-wrapper {
  flex: 1;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

/* Project detail pages */
.project-back-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.back-btn {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px; 
  border-bottom: 2px solid var(--accent-color); 
  padding-bottom: 6px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.back-btn:hover {
  color: var(--accent-color);
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

@media (max-width: 800px) {
  /* Give the mobile nav bar room */
  nav {
    padding: 10px 0;
    gap: 10px;
  }

  .nav-content {
    padding: 0 15px;
  }

  h1 {
    margin: 30px 5% 15px; /* Adjusts the margins for smaller screens */
  }

  p {
    margin: 15px 5%; /* Adjusts the margins for smaller screens */
  }

  /* Make links slightly tighter together to fit small widths */
  .nav-links {
    gap: 15px;
  }

  /* Reduce the spacing slightly on icons for mobile screen limits */
  .contact-link {
    font-size: 18px;
    gap: 8px;
  }

  .project-row, .project-row:nth-child(even) {
    flex-direction: column; /* Stacks components vertically on smaller screens */
    align-items: stretch;
    gap: 30px;
  }
  
  /* FORCE STACKING ORDER: Forces screenshot to top, text underneath */
  .project-image-wrapper {
    order: 1; /* Places image block first in the stack */
    width: 100%;
    justify-content: flex-start;
  }

  .project-text {
    order: 2; /* Places text block second in the stack */
    width: 100%;
    text-align: left;
  }
  
  .project-text h3 {
    font-size: 26px;
  }
}