:root {
  /* ========================================
     COLOR PALETTE - LIGHT THEME (Indigo & Slate)
     ======================================== */
  --primary-color: #6366f1; /* Indigo */
  --primary-hover: #4f46e5;
  --secondary-color: #64748b; /* Slate */
  --background-color: #f8fafc;
  --surface-color: #ffffff;
  --text-color: #0f172a;
  --text-color-light: #475569;
  --border-color: #e2e8f0;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-family-base: 'Outfit', sans-serif;
  --font-family-display: 'Inter', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-black: 700;

  /* ========================================
     SPACING & LAYOUT
     ======================================== */
  --spacing-unit: 1rem;
  --container-width: 1200px;
  --border-radius: 1rem; /* More rounded for a modern look */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme='dark'] {
  /* =======================================
     COLOR PALETTE - DARK THEME
     ======================================== */
  --primary-color: #818cf8; /* Lighter indigo for better contrast on dark */
  --primary-hover: #a5b4fc;
  --secondary-color: #94a3b8;
  --background-color: #0f172a;
  --surface-color: #1e293b;
  --text-color: #f8fafc;
  --text-color-light: #94a3b8;
  --border-color: #334155;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--background-color);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: calc(var(--spacing-unit) * 1.5);
  padding-right: calc(var(--spacing-unit) * 1.5);
}

section {
  padding: calc(var(--spacing-unit) * 6) 0;
  overflow: hidden;
}

/*
  ========================================
  HEADER & NAVIGATION
  ========================================
  These styles control the layout and appearance of the main site header
  and the primary navigation menu within it.
*/

header {
  background-color: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all var(--transition-normal);
}

/* 
  Target the .container inside the header to apply our layout rules.
  This is a good practice to ensure our header content aligns with the
  rest of the page content.
*/
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* We also apply our max-width and centering here. */
  max-width: var(--container-width);
  margin: 0 auto; /* Centers the container horizontally */
  padding: 0 var(--spacing-unit); /* Adds padding on the sides for smaller screens */
}

/*
  Now we style the navigation itself. We target the <ul> directly to
  turn it into a flex container as well.
*/
header nav ul {
  /* This turns the list itself into a flex container, arranging its children (the <li>) in a row. */
  display: flex;
  
  /* This creates a consistent space between each of the navigation links. */
  gap: calc(var(--spacing-unit) * 2);

  /* This removes the default bullet points from the unordered list. */
  list-style: none;
}

/*
  Finally, we style the navigation links themselves.
*/
header nav ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-display);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all var(--transition-fast);
  position: relative;
}

header nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: all var(--transition-fast);
  transform: translateX(-50%);
}

header nav ul li a:hover::after {
  width: 20px;
}

header nav ul li a:hover {
  color: var(--primary-color);
  background-color: rgba(99, 102, 241, 0.05);
}

/* ... after your 'header nav ul li a' styles ... */

/*
  ========================================
  MENU TOGGLE (HAMBURGER)
  ========================================
  Styles for the mobile navigation toggle button.
*/

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  transition: background-color var(--transition-fast);
}

.menu-toggle:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.menu-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-color);
  border-radius: 2px;
  position: absolute;
  left: 8px;
  transition: all var(--transition-normal);
}

.menu-toggle .bar:nth-child(1) { top: 14px; }
.menu-toggle .bar:nth-child(2) { top: 20px; }
.menu-toggle .bar:nth-child(3) { top: 26px; }

.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

header nav ul li a:hover {
  color: var(--primary-color);
}

/*
  ========================================
  HERO SECTION
  ========================================
  Styles for the main introductory "hero" block of the page.
*/

#hero {
  /* 
    To make the hero section feel significant, we give it a minimum height.
    '90vh' means 90% of the viewport's height. This ensures it fills most
    of the screen on any device, creating an immersive first impression.
  */
  min-height: 90vh;
  
  /* 
    We use Flexbox again, this time for vertical centering.
    - 'display: flex' turns #hero into a flex container.
    - 'align-items: center' vertically centers its child (the .container) in the middle.
    - 'justify-content: center' horizontally centers the child.
  */
  display: flex;
  align-items: center;
  justify-content: center;

  /* We add some padding for spacing on smaller screens where the height might be less. */
  padding: calc(var(--spacing-unit) * 2) 0;
}

#hero .container {
  /* 
    This centers the text *inside* our container. Flexbox centered the container
    itself, and text-align centers the content within it.
  */
  text-align: center;
}

#hero h1 {
  /* Make the main heading large and impactful. */
  font-size: 3.5rem; /* ~56px */
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-unit); /* Add space below the heading */
}

#hero .hero-subtitle {
  /* Style the subtitle to be prominent but secondary to the main heading. */
  font-size: 1.5rem; /* ~24px */
  margin-bottom: calc(var(--spacing-unit) * 2); /* Add more space below the subtitle */
  color: var(--text-color-light); /* Use our lighter text color variable */
}

#hero p:last-of-type {
  /*
    Constrain the width of the final introductory paragraph to ensure it
    remains easily readable on very wide screens.
  */
  max-width: 600px;
  /* margin: 0 auto; will center the paragraph block if its max-width is met. */
  margin: 0 auto;
}

/*
  ========================================
  ABOUT SECTION
  ========================================
  Styles for the "About Me" section, featuring a two-column layout.
*/

#about {
  /* Add significant vertical padding to give the section breathing room. */
  padding: calc(var(--spacing-unit) * 4) 0;
}

#about h2 {
  /* Center the section title and give it space from the content below. */
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.about-content {
  /* This is where the magic happens! We create our two-column layout here. */
  display: flex;
  
  /* Vertically align the image and the text block to their centers. */
  align-items: center;
  
  /* Create a sizable gap between the image column and the text column. */
  gap: calc(var(--spacing-unit) * 4);
}

.about-image {
  /* Define the width for the image column. flex: 1; would make it share space equally. */
  /* Here, we give it a fixed proportion of the layout. */
  flex: 1; 
  max-width: 300px; /* Optional: cap the max size of the image container */
}

.about-image img {
  /* Make the image responsive, ensuring it never overflows its container. */
  max-width: 100%;
  
  /* This maintains the image's aspect ratio. */
  height: auto;
  
  /* A popular and modern design choice: make the profile picture a circle. */
  border-radius: 50%;
  
  /* Add a subtle shadow to make the image "pop" from the background. */
  box-shadow: 0 4px 15px var(--shadow-color);
}

.about-text {
  /* Let the text column take up more space. 'flex: 2;' makes it twice as wide as the image column. */
  flex: 2;
}

.about-text p {
  /* Add space between the paragraphs for better readability. */
  margin-bottom: var(--spacing-unit);
}

/* Remove the margin from the last paragraph to avoid extra space at the bottom. */
.about-text p:last-child {
  margin-bottom: 0;
}

/*
  ========================================
  PROJECTS SECTION
  ========================================
  Styles for the project showcase, including the individual project cards.
*/

#projects {
  /* Give the projects section ample breathing room from the 'About' section. */
  padding: calc(var(--spacing-unit) * 4) 0;
  /* Use our main background color, as the cards will have the surface color. */
  background-color: var(--background-color);
}

#projects h2 {
  /* Center the section title and give it space from the cards below. */
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 3);
}

/* ... a few lines above this, you have the #projects h2 styles ... */

.projects-container {
  /* 
    This is the magic declaration that turns this container into a grid.
    All direct children of this element (our .project-card divs) now
    become grid items.
  */
  display: grid;

  /*
    This property defines the columns of our grid. It's the most important
    part of our grid layout. Let's break it down:
    - 'repeat(3, 1fr)': This is a powerful and modern way to define columns.
    - 'repeat()': A function that saves us from writing '1fr 1fr 1fr'.
    - '3': We want three columns.
    - '1fr': The 'fr' or 'fractional' unit. This tells the browser to divide the 
      available space into equal fractions. So, '1fr' means each of our 3 columns
      will take up 1 equal fraction of the container's width, creating a perfectly
      responsive three-column layout.
  */
  grid-template-columns: repeat(3, 1fr);

  /*
    The 'gap' property is the modern way to create space between grid items.
    This one property elegantly handles both the space between rows and columns,
    ensuring consistent spacing throughout our gallery. We use our existing
    spacing variable for consistency.
  */
  gap: calc(var(--spacing-unit) * 2);
}

.project-card {
  background-color: var(--surface-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px var(--shadow-color);
  border-color: var(--primary-color);
}

.project-image-container {
  overflow: hidden;
  position: relative;
  aspect-ratio: 20 / 10;
  background-color: var(--background-color);
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-normal);
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-image {
  /* Ensures the image is responsive and fills the width of the card. */
  width: 100%;
  
  /* 'display: block' removes any potential extra space below the image. */
  display: block;
}

.project-info {
  padding: 1.5rem;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tech-pill {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--primary-color);
  background-color: rgba(99, 102, 241, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.project-info h3 {
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--text-color);
}

.project-links {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  gap: 1rem;
  margin-top: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-display);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn-secondary:hover {
  background-color: var(--primary-color);
  color: white;
}

/*
  ========================================
  CONTACT SECTION
  ========================================
  Styles for the contact form, ensuring it's visually consistent
  with the rest of the site and provides a great user experience.
*/

#contact {
  /* Add padding to create vertical space around the section. */
  padding: calc(var(--spacing-unit) * 4) 0;
}

#contact .container > h2,
#contact .container > p {
  /* Center the section's introductory text. */
  text-align: center;
}

#contact .container > p {
  /* Add significant space between the intro text and the form itself. */
  margin-bottom: calc(var(--spacing-unit) * 3);
  /* Constrain the intro text width for readability on large screens. */
  max-width: 600px;
  /* Center the constrained paragraph block. */
  margin-left: auto;
  margin-right: auto;
}

/* === Form Element Styling === */

#contact form {
  /* Give the form a max-width to prevent it from becoming too wide on desktops. */
  max-width: 700px;
  /* Center the form within the container. */
  margin: 0 auto;
}

#contact label {
  /* Display labels as blocks to place them on their own line above the input. */
  display: block;
  /* Make labels bold to stand out. */
  font-weight: var(--font-weight-bold);
  /* Add a little space between the label and its input field. */
  margin-bottom: 0.5rem;
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background-color: var(--surface-color);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-color);
  transition: all var(--transition-normal);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

#contact input[type="text"]:focus,
#contact input[type="email"]:focus,
#contact textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  background-color: var(--surface-color);
}

/* A useful tweak for the textarea: allow vertical resizing but not horizontal, which can break layouts. */
#contact textarea {
  resize: vertical;
  min-height: 150px;
}

/*
  The :focus pseudo-class is CRUCIAL for accessibility and user experience.
  It provides a clear visual indicator of which field the user is currently editing.
*/
#contact input[type="text"]:focus,
#contact input[type="email"]:focus,
#contact textarea:focus {
  /* Remove the browser's default, often ugly, focus outline. */
  outline: none;
  /* Change the border color to our primary brand color. */
  border-color: var(--primary-color);
  /* Add a subtle "glow" effect (box-shadow) to make the active field pop. */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

#contact button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: var(--font-weight-black);
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
}

#contact button[type="submit"]:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
}

#contact button[type="submit"]:hover {
  /* The filter property is a modern way to change appearance. brightness(90%) slightly darkens the element. */
  filter: brightness(90%);
}

/*
  ========================================
  FOOTER SECTION
  ========================================
  Styles for the final site footer, ensuring it's a clean and
  professional closing for the page.
*/

footer {
  /* Use the surface color for the footer background, similar to the header. */
  background-color: var(--surface-color);
  
  /* Use our spacing variable for consistent vertical padding. */
  padding: calc(var(--spacing-unit) * 2) 0;
  
  /* Add a subtle top border to visually separate the footer from the content above. */
  border-top: 1px solid var(--border-color);
  
  /* Ensure the text color is set correctly, especially for the copyright notice. */
  color: var(--text-color-light);
  
  /* Center the text within the footer by default. This will apply to the <p> tag. */
  text-align: center;
  transition: background-color 0.3s ease-in-out, border-top-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* 
  We target the .container inside the footer to apply our Flexbox layout.
  This ensures our footer content aligns with the main content of the page.
*/
footer .container {
  display: flex;
  
  /*
    This powerful property distributes space between flex items.
    'space-between' pushes the first item (the <p>) to the start (left)
    and the last item (the <ul>) to the end (right).
  */
  justify-content: space-between;
  
  /*
    This property aligns items along the cross-axis (vertically). 'center'
    ensures the copyright text and the social media links are perfectly
    aligned on their horizontal midline.
  */
  align-items: center;

  /* We'll also apply the standard container behavior here. */
  max-width: var(--container-width);
  margin: 0 auto; /* Centers the container horizontally */
  padding: 0 var(--spacing-unit); /* Adds padding on the sides for smaller screens */
}

/* 
  Now we style the list of social media links.
*/
footer ul {
  /* This is a great example of NESTED FLEXBOX. We make the <ul> a flex container
     as well, to arrange its children (the <li> items) in a row. */
  display: flex;
  
  /* The gap property adds a consistent space between each of the social media links. */
  gap: var(--spacing-unit);
  
  /* This is crucial to remove the default bullet points from the list. */
  list-style: none;
}

/*
  Finally, we style the social media links themselves.
*/
footer ul li a {
  /* Remove the default underline from links. */
  text-decoration: none;
  
  /* Use our theme's text color. */
  color: var(--text-color-light);
  
  /* Add a smooth transition for the hover effect. */
  transition: color 0.2s ease-in-out;
}

/*
  A hover effect provides important visual feedback to the user,
  letting them know an element is interactive.
*/
footer ul li a:hover {
  /* Change the link color to our primary brand color on hover. */
  color: var(--primary-color);
}

/*
  ========================================
  THEME SWITCHER
  ========================================
  Styles for the light/dark mode toggle switch.
*/

.theme-switcher {
  /* Aligns the switcher nicely with the navigation links */
  display: flex;
  align-items: center;
}

.switch-label {
  /* This makes the label the positioning container for the elements inside. */
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  cursor: pointer;
}

.switch-checkbox {
  /* 
    This is a common accessibility-friendly technique to hide an element visually
    but keep it available to screen readers and the browser's form submission logic.
    We hide it because we're creating our own custom visual representation.
  */
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  border-radius: 26px;
  transition: all var(--transition-normal);
  border: 1px solid var(--border-color);
}

.slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: all var(--transition-normal);
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* 
  This is the magic! The :checked pseudo-class targets the input WHEN it is checked.
  The adjacent sibling combinator (+) selects the .slider that immediately follows it.
*/
.switch-checkbox:checked + .slider {
  /* When checked, we change the background of the track to our primary color. */
  background-color: var(--primary-color);
}

.switch-checkbox:checked + .slider::before {
  /* When checked, we move the thumb to the right using a transform. */
  transform: translateX(24px);
}

/*
  ========================================
  RESPONSIVE STYLES - MEDIA QUERIES
  ========================================
*/

/* 
  Breakpoint 1: Tablet Devices (up to 768px)
*/
@media (max-width: 768px) {
  /* 
    Inside this block, we add rules that will ONLY apply when the viewport
    is 768px wide or less. These rules override the default desktop styles.
  */

  /* === Typography Adjustments === */
  /* Reduce the size of the main hero heading to prevent it from being overwhelming on smaller screens. */
  #hero h1 {
    font-size: 2.8rem; /* Down from 3.5rem */
  }

  /* Also reduce the size of the hero subtitle for better balance. */
  #hero .hero-subtitle {
    font-size: 1.25rem; /* Down from 1.5rem */
  }

  /* === Layout Adjustments === */
  
  /* 
    The 'About Me' section: On tablets, the side-by-side layout can feel
    cramped. Stacking the image and text vertically creates a better
    reading flow on a narrower screen.
  */
  .about-content {
    /* Change the flex-direction from the default 'row' to 'column'. */
    flex-direction: column;
    
    /* Increase the gap to provide vertical space between the stacked items. */
    gap: calc(var(--spacing-unit) * 3);
  }

  /* Ensure the about image doesn't look too small when stacked. */
  .about-image {
    max-width: 250px;
    margin: 0 auto; /* Center the image container */
  }

  /* 
    The 'Projects' section grid: We switch from a 3-column grid to a 2-column grid.
    This gives each project card more horizontal space, making them larger,
    more prominent, and easier to tap on a touch device.
  */
  .projects-container {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* In your RESPONSIVE STYLES section */
@media (max-width: 768px) {
  /* ... your existing tablet styles for typography and layouts ... */

  /* === Header Adjustments for Tablets === */
  
  header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--surface-color);
    box-shadow: 0 4px 4px var(--shadow-color);
    padding: var(--spacing-unit) 0;
  }

  header nav.active {
    display: block;
  }

  header nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-unit);
  }

  .menu-toggle {
    display: flex;
  }
  .menu-toggle .bar{
    display: block;
  }
}

/* Find this block at the very end of your style.css file */
@media (max-width: 480px) {
  /*
    These rules will ONLY apply on screens 480px wide or narrower.
    They will override any conflicting rules from the desktop or tablet styles.
  */

  /* === Layout Adjustments === */
  
  /* 
    The most critical mobile adjustment: switch the project grid to a single column.
    This ensures each project card has the full width of the screen, making it
    large, readable, and easy to tap. We are overriding the 'repeat(2, 1fr)'
    from our tablet media query.
  */
  .projects-container {
    grid-template-columns: 1fr; /* Or repeat(1, 1fr) */
  }

  /*
    On mobile, the side-by-side header layout can feel cramped.
    We can stack the logo/nav and the theme switcher vertically.
    Let's also add some space between them.
  */
  header .container {
    flex-direction: row; /* Keep it horizontal but spaced out */
    justify-content: space-between;
    gap: var(--spacing-unit);
  }

  .switch-label {
    width: 40px;
    height: 20px;
  }

  .slider::before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
  }

  .switch-checkbox:checked + .slider::before {
    transform: translateX(20px);
  }

  .theme-switcher {
    order: 2; /* Ensure toggle stays visible and accessible */
  }


  /* === Typography Adjustments === */
  
  /* 
    Further reduce the hero heading size for the smallest screens to
    prevent it from taking up too much vertical space.
  */
  #hero h1 {
    font-size: 2.2rem; /* Down from 2.8rem on tablet */
  }

  /* Reduce the hero subtitle as well. */
  #hero .hero-subtitle {
    font-size: 1.1rem; /* Down from 1.25rem on tablet */
  }

  /* === Spacing Adjustments === */
  
  /*
    On mobile, vertical space is precious. We can reduce the large top/bottom
    padding on our main content sections to show more content "above the fold".
  */
  #about,
  #projects,
  #contact {
    padding: calc(var(--spacing-unit) * 2) 0;
  }
  .menu-toggle {
    padding: 0.5rem; /* Adds 8px of tappable space on all sides */
    width: 36px;
    height: 28px;
  }

  /*
    Increase the size of the project buttons to make them more prominent
    and easier to tap on a touch screen.
  */
  .project-links a {
    padding: 0.75rem 1.25rem; /* Increased from 0.5rem 1rem */
    font-size: 1rem; /* Ensure font size is consistently readable */
  }

  /*
    Increase the tappable area and spacing of footer social media links.
    This prevents users from accidentally tapping the wrong link.
  */
  footer ul {
    gap: calc(var(--spacing-unit) * 1.5); /* Increase the space between links */
  }

  footer ul li a {
    padding: 0.4rem;
  }

  /* Stack footer items vertically on very small screens */
  footer .container {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  footer ul {
    justify-content: center;
  }
}

/* Form Status Messages */
#form-status {
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  text-align: center;
  font-weight: var(--font-weight-medium);
  font-size: 0.9rem;
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: all var(--transition-normal);
}

#form-status.success,
#form-status.error,
#form-status.info {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

#form-status.success {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

#form-status.error {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

#form-status.info {
  background-color: #cfe2ff;
  color: #084298;
  border: 1px solid #b6d4fe;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

#hero * {
  animation: fadeInUp 0.8s ease-out forwards;
}

#hero h1 { animation-delay: 0.2s; }
#hero .hero-subtitle { animation-delay: 0.4s; }
#hero p { animation-delay: 0.6s; }

html[data-theme='dark'] #form-status.success {
  background-color: #0f5132;
  color: #d1e7dd;
  border-color: #146c43;
}

html[data-theme='dark'] #form-status.error {
  background-color: #842029;
  color: #f8d7da;
  border-color: #9b2a34;
}