/*Default styles.*/
:root {
  /* Base Colors */
  --primary-background: hsl(0, 0%, 98%);   /* subtle white for site background */
  --primary-text: hsl(0, 0%, 7%);          /* near-black for readability */

  /* Accent Colors */
  --accent-one: hsl(210, 90%, 60%);
  --accent-one-hover: hsl(210, 90%, 67%);

  /* Surfaces & Buttons */
  --surface-light: hsl(0, 0%, 100%);       /* white for cards/sections */
  --surface-dark: hsl(0, 0%, 10%);         /* dark containers if needed */
  
  --button-primary-bg: hsl(0, 0%, 10%);     /* dark button */
  --button-primary-hover: hsl(0, 0%, 15%);  /* dark button hover*/

  --button-primary-text: hsl(0, 0%, 98%);   /* white button text */

  --button-secondary-bg: hsl(0, 0%, 100%);  /* white buttons */
  --button-secondary-border: hsl(0, 0%, 30%); /* medium-dark gray for contrast */
  --button-secondary-hover-bg: hsl(0, 0%, 95%);
  --button-secondary-text: hsl(0, 0%, 7%);

  /* Nav Link Colors */
  --link-default: hsl(0, 0%, 7%);         /* primary text */
  --link-hover: hsl(0, 0%, 40%);          /* subtle hover */
  --link-active: hsl(212, 90%, 45%);      /* accent blue for active/current */
  --link-focus: hsl(212, 90%, 40%);       /* darker blue for click/focus */

  /* Nav + Footer Colors */
  --nav-footer-bg: hsl(210, 35%, 30%);    /* darkened accent color */
  --nav-text: hsl(0, 0%, 96%);
  --nav-link-hover: hsl(220, 80%, 65%);
  --nav-active-indicator: hsl(220, 90%, 70%);
  --footer-divider: hsl(220, 40%, 40%);

  /* Supporting Colors */
  --muted-text: hsl(0, 0%, 40%);           /* secondary paragraphs */
  --divider-border: hsl(0, 0%, 85%);       /* subtle dividers */

  /* Shadows */
  --shadow-color: rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.08);  
  /*

  /* Type Scale (Perfect Fourth) */
  --fs-xs: 0.625rem;  /* ~10px */
  --fs-sm: 0.75rem;   /* 12px */
  --fs-base: 1rem;    /* 16px */
  --fs-md: 1.313rem;  /* 21px */
  --fs-lg: 1.75rem;   /* 28px */
  --fs-xl: 2.25rem;   /* 36px */
  --fs-xxl: 3rem;     /* 48px */
}

html{
  scroll-behavior: smooth;
}

*{
  margin: 0rem;
  padding: 0rem;
  box-sizing: border-box;
}

body {
  color: var(--primary-text);
  background-color: var(--primary-background);
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  font-size: var(--fs-base);
  overflow-x: hidden; /* Prevents accidental horizontal scrolling */
}

h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
}

h3 {
  font-size: var(--fs-md);
  font-weight: 500;
}

p {
  font-size: var(--fs-base);
  font-weight: 400;
}

small {
  font-size: var(--fs-sm);
  color: var(--muted-text);
}

/* Highlighted Text*/
.highlight{
    color: var(--accent-one);
}

/* Link Styles */
a {
  color: var(--link-default);
  text-decoration: none;
}
a:visited {
  color: var(--link-default);
}
a:hover {
  color: var(--link-hover);
}
a:focus-visible {
  color: var(--link-focus);
  text-decoration: underline;
}
a:active {
  color: var(--link-active);
}

/* Button Styles */
.primary-button {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);

  cursor: pointer;
  padding: 1.5rem;     /* 24px */
  height: 3.125rem;  /* 50px */
  border: none;
  border-radius: 0.5rem; /* 8px */
  font: 1rem;

  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.08);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.primary-button:hover{
  background-color: var(--button-primary-hover);
  transform: translateY(-0.125rem); /* -2px */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.12);
}
/* Lock primary button text color across all link states */
.primary-button,
.primary-button:hover,
.primary-button:focus-visible,
.primary-button:active,
.primary-button:visited {
  color: var(--button-primary-text);
  text-decoration: none;
}
.primary-button:focus-visible {
  outline: 2px solid var(--accent-one);
  outline-offset: 3px;
}

.secondary-button {
  background-color: var(--button-secondary-bg);
  color: var(--primary-text);
  border: 1px solid var(--button-secondary-border);

  cursor: pointer;
  padding: 1.5rem;     /* 24px */
  height: 3.125rem;  /* 50px */
  border-radius: 0.5rem; /* 8px */
  font: 1rem;

  text-decoration: none;
  display: inline-flex; /* changed from flex */
  justify-content: center;
  align-items: center;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.08);

  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.secondary-button:hover {
  background-color: var(--button-secondary-hover-bg);
  transform: translateY(-0.125rem); /* -2px */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Lock secondary button text color across all link states */
.secondary-button,
.secondary-button:hover,
.secondary-button:focus-visible,
.secondary-button:active,
.secondary-button:visited {
  color: var(--button-secondary-text);
  text-decoration: none;
}

.secondary-button:focus-visible {
  outline: 2px solid var(--accent-one);
  outline-offset: 3px;
}

/* Accent Button Styles */
.accent-button {
  display: inline-flex;               /* center content */
  justify-content: center;
  align-items: center;

  padding: 1.5rem;                       /* 16px */ 
  height: 2.5rem;                      /* 40px */
  border-radius: 0.5rem;               /* 8px */
  border: none;
  font: 1rem;

  background-color: var(--accent-one);
  color: var(--primary-background);

  cursor: pointer;
  text-decoration: none;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.08);

  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover State */
.accent-button:hover {
  background-color: var(--accent-one-hover);
  transform: translateY(-0.125rem);   /* -2px */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Lock text color across all link states */
.accent-button,
.accent-button:hover,
.accent-button:focus-visible,
.accent-button:active,
.accent-button:visited {
  color: var(--primary-background);
  text-decoration: none;
}

/* Focus outline */
.accent-button:focus-visible {
  outline: 2px solid var(--accent-one);
  outline-offset: 3px;
}

/* THE GLOBAL WRAPPER --- */
.container {
  width: 100%;
  padding-block: 3rem; /* 48px */
  max-width: 75rem; /* 1200px */
  margin: 0 auto;    /* Centers the container */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 24px */
}
/*End of default styles.*/


/* Nav Bar */
/* Hamburger Button */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  z-index: 1000;
}
.bar {
  width: 25px;
  height: 3px;
  background-color: var(--nav-text);
  transition: 0.3s;
}
.logo{
  display: none;
}
/* Transforming the UL into a Sidebar */
.nav-links {
  position: fixed;
  left: -100%; /* Hide off-screen */
  top: 4rem;    /* Height of your nav-bar */
  flex-direction: column; /* Stack links vertically */
  background-color: var(--nav-footer-bg);
  width: 70%;   /* Sidebar width */
  height: 100vh;
  padding: 2rem;
  gap: 2rem;
  transition: 0.5s ease-in-out;
  box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}
/* The "Open" State */
.nav-links.active {
  left: 0; /* Slide into view */
}
.nav-bar{
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--nav-footer-bg);
  border-bottom: 1px solid var(--footer-divider);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

  max-width: 100%;
  height: 4rem;
  padding: 0 2rem;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.nav-bar ul {
  max-width: 60%;

  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.nav-bar a {
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;

  /* NAV TEXT COLOR */
  color: var(--nav-text);

  transition: color 0.2s ease;
}
.nav-bar a:hover {
  color: var(--nav-link-hover);
}
.nav-bar a:focus {
  color: var(--nav-link-hover);
}
.nav-bar a.active {
  color: var(--nav-active-indicator);
}

@media (min-width: 1000px) {
  .nav-bar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 4rem;
  }
  .menu-toggle{
    display: none;
  }
  .nav-bar ul {
    position: static;           /* no longer fixed */
    left: auto;
    top: auto;

    flex-direction: row;        /* horizontal layout */
    justify-content: flex-end;  /* align links to the right */
    gap: 1.5rem;

    width: auto;
    height: auto;
    padding: 0;

    background-color: transparent;
    box-shadow: none;
    transition: none;
  }
  .logo{
    width: 45px;
    height: 45px;
    
    display: flex;
  }
}
/* End of Nav Bar */


/* Hero Section */
.hero{
  scroll-margin-top: 4rem; /* 64px */
}
.hero-content{
  width: 100%;
  padding: 2rem;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  flex-wrap: wrap;
}
.hero-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}
.buttons-container{
  display: flex;
  justify-content: flex-start;
  gap: 1rem; /* 16px */
  flex-wrap: wrap;
}
.profile-image{
  max-width: 100%;
  border-radius: 0.5rem; /* 8px */
  box-shadow:
  0 4px 10px rgba(0, 0, 0, 0.08),
  0 12px 30px rgba(0, 0, 0, 0.12);
}

@media (min-width: 985px){
  .hero-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
  }
}
/* End of Hero Section */


/* About Section */
.about-me{
  scroll-margin-top: 1rem; /* 48px */
}
.about-container{
  align-items: flex-start;
}
.about-content{
  max-width: 50rem; /* 800px */
  padding: 2rem;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* 16px */
}
/* End of About Section */


/* Projects Section */
.projects{
  scroll-margin-top: 1rem; /* 48px */
}
.projects-content{
  max-width: 100%;
  padding: 2rem;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* 16px */
}
.project-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  padding: 1.5rem; /* 16px */
  
  border-radius: 0.5rem; /* 8px */
  border: 1px solid var(--divider-border);

  box-shadow:
  0 3px 6px rgba(0, 0, 0, 0.05),
  0 8px 16px rgba(0, 0, 0, 0.08);
}
/* Skills subSection*/
.skills-content{
  width: 100%;
  padding: 2rem;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* 16px */
}
.skill-group{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  
  width: 15.625rem; /* 250px */
  height: 9.375rem; /* 150px */

  background-color: var(--surface-light);
  border: 1px solid var(--divider-border);
  border-radius: 0.5rem; /* 8px */
}
.skills-group-title{
  margin-left: 1.25rem; /* 20px */
  margin-top: 0.625rem; /* 10px */

  font-weight: 500;
}
.fs-sm-p{
  margin-left: 1.25rem; /* 20px */
  
  font-size: var(--fs-sm);
  color: var(--muted-text);
}

@media (min-width: 840px) {
  .projects-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
/* End of Projects Section */


/* Contact Section */
.contact{
  scroll-margin-top: 1rem; /* 48px */
}
.contact-container{
  align-items: flex-start;
}
.contact-content{
  max-width: 50rem; /* 800px */
  padding: 2rem;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* 16px */
}
.contact-form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
}
.inputField{
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
}
#name, #email{
  padding: 1rem;
  height: 3.125rem;
  border: 1px solid var(--divider-border);
  border-radius: 5px;
}
.message-field{
  height: 10rem; 
  
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  border: 1px solid var(--divider-border);
  background-color: var(--surface-light);
  color: var(--primary-text);
  resize: vertical; /* prevents horizontal stretching */
}
.form-submit{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.social-icons{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem; /* 16px */
}
.social-icons svg{
    width: 2.5rem;  /* 40px */
    height: 2.5rem; /* 40px */

    cursor: pointer;
    box-shadow: var(--shadow-color);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-icons svg:hover {
  transform: scale(1.3);
}
#form-submit {
  display: inline-block; 
  padding: 0rem 1.5rem;
  height: 3.125rem;        /* 50px */
  text-align: center;
  line-height: 3.125rem;   /* vertically center text */
  font-size: 1rem;         /* 16px */
  color: var(--button-primary-text);
  background-color: var(--button-primary-bg);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.05),
    0 8px 20px rgba(0,0,0,0.08);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
#form-submit:hover {
  background-color: var(--button-primary-hover);
  transform: translateY(-0.125rem);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.05),
    0 12px 28px rgba(0,0,0,0.12);
}
/* End of Contact Section */


/* Footer */
.footer{
  background-color: var(--nav-footer-bg);
  color: var(--nav-text);
  width: 100%;
  border-top: 1px solid var(--footer-divider);
}
.footer-content{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem; /* 32px */
}
/* End of Footer */