/* This CSS file uses media queries and flexible units to make the site mobile friendly and responsive.
   The viewport meta tag in each HTML file is also required for proper scaling on phones and tablets. */

/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #e0e6ed; /* Light text for dark background */
  /* Gradient background with black, blue-green, purple, and a hint of red */
  background: linear-gradient(135deg, #18181b 0%, #232946 40%, #3a185c 75%, #2a0a16 100%);
  min-height: 100vh;
}

/* Make all links use blue-green by default and red when visited */
a {
  color: #00ffe7; /* Blue-green for unvisited links */
  text-decoration: underline; /* Underline for clarity */
}

/* Change link color to red when visited */
a:visited {
  color: #e94560; /* Red for visited links */
}

/* Header */
header {
  background: #18181b; /* Almost black */
  color: #00ffe7; /* Neon blue-green accent */
  padding: 2.5rem 0 2rem 0;
  text-align: center;
  letter-spacing: 2px;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  box-shadow: 0 6px 24px rgba(0, 255, 231, 0.10);
  text-shadow: 0 0 8px #00ffe7, 0 0 2px #e94560, 0 0 12px #a259f7;
  /* Add a background image to the header */
  background-image: url('/img/bg.png');
  background-size: cover;      /* Make the image cover the header area */
  background-position: center; /* Center the image */
}

header h1 {
  font-size: 2.5rem; /* Increase header font size */
  margin: 0.5rem 0;
}

/* Style for the catchy hook under the main heading */
.hero-hook {
  font-family: 'Audiowide', cursive;
  font-size: 1.4rem; /* Increased proportionally to the mini-propup */
  color: #00ffe7;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Navigation */
nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  background: #232946; /* Deep blue-grey */
  padding: 1rem 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 12px rgba(162, 89, 247, 0.08);
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #a259f7; /* Purple accent */
}

nav a {
  color: #a259f7; /* Purple accent */
  text-decoration: none;
  font-weight: bold;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  text-shadow: 0 0 4px #a259f7;
}

nav a:hover {
  background: #e94560; /* Red accent on hover */
  color: #fff;
  box-shadow: 0 2px 8px #e94560;
}

/* Main content uses flex for layout on large screens */
.main-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Each section is a card */
section {
  background: #232946; /* Deep blue-grey */
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(162,89,247,0.07);
  padding: 2rem 1.5rem;
  border: 1px solid #3a185c; /* Subtle purple border */
  flex: 1 1 320px;
  min-width: 300px;
  margin-bottom: 2rem;
}

/* Section Headings */
h2 {
  color: #00ffe7; /* Blue-green accent */
  border-bottom: 2px solid #e94560; /* Red underline */
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.7rem;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #a259f7, 0 0 2px #e94560;
}

/* Skills List */
.skills {
  list-style: none;
  padding: 0;
}

.skills li {
  display: inline-block;
  margin: 0.5rem 0.5rem 0.5rem 0;
  /* Remove background and color for a simpler look */
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  transition: none;
}

.skills li:hover {
  background: none;
  color: inherit;
}

/* Skill icon image style */
.skill-icon {
  width: 60px;
  height: 60px;
  vertical-align: middle;
  border-radius: 8px;
  background: #fff;
  padding: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  border: none;
}

/* AI Tools icon should be wider */
.skill-icon[src*="AI.png"] {
  width: 200px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 8px;
  background: #fff;
  padding: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  border: none;
}

/* Project List */
#projects ul {
  padding-left: 1.2rem;
}

#projects li {
  margin-bottom: 1rem;
  background: #2a0a16; /* Deep red-black */
  border-left: 4px solid #a259f7; /* Purple accent */
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(233,69,96,0.10);
  color: #e0e6ed;
}

/* Projects section uses flex to show cards in a 2x2 grid */
.projects-flex {
  display: flex;              /* Place projects side by side */
  gap: 2rem;                  /* Space between projects */
  flex-wrap: wrap;            /* Wrap to create rows */
  margin-top: 1rem;
  justify-content: center;    /* Center the cards */
}

.project-card {
  background: #232946;        /* Match section background */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(162,89,247,0.07);
  padding: 1rem;
  flex: 0 1 calc(50% - 2rem);  /* Take up approximately half the container width minus gap */
  min-width: 280px;           /* Ensure minimum width for readability */
  max-width: 500px;           /* Limit maximum width */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

/* Make project thumbnails larger and more visible */
.project-thumb {
  width: 180px;                /* Increased size from 80px */
  height: 180px;               /* Increased size from 80px */
  object-fit: cover;
  border-radius: 12px;         /* Slightly larger radius */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Stronger shadow for emphasis */
  border: none;
  transition: transform 0.2s; /* Add a subtle hover effect */
}

/* Add hover effect to thumbnails */
.project-card a:hover .project-thumb {
  transform: scale(1.05);    /* Slightly enlarge on hover */
}

/* Adjust text portion of project cards */
.project-card div {
  width: 100%;
}

/* Bio section layout */
.bio-container {
  display: flex; /* Place image and text side by side */
  align-items: flex-start;
  gap: 1.5rem;
}

.bio-photo {
  width: 140px;        /* Adjust size as needed */
  height: 140px;
  object-fit: cover;   /* Crop image to fit */
  border-radius: 50%;  /* Make image round */
  border: 3px solid #a259f7; /* Purple border for accent */
  box-shadow: 0 2px 12px rgba(162, 89, 247, 0.15);
}

.bio-text {
  max-width: 600px;      /* Limit the width for better readability */
  margin: 0 auto;        /* Center the section horizontally */
  padding: 1rem;         /* Add some space inside the box */
  background: #232946;   /* Optional: subtle background for contrast */
  border-radius: 10px;   /* Rounded corners */
  color: #e0e6ed;        /* Light text for readability */
  font-size: 1.08rem;    /* Slightly larger text for beginners */
  box-shadow: 0 2px 8px rgba(162, 89, 247, 0.08); /* Soft shadow */
}

/* Stack image above text on small screens */
@media (max-width: 600px) {
  .bio-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .bio-photo {
    margin-bottom: 1rem;
  }
}

/* Responsive: stack cards on small screens */
@media (max-width: 900px) {
  .main-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
  section {
    padding: 1.2rem 0.7rem;
    min-width: unset;
  }
}

@media (max-width: 600px) {
  nav {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 0 0 12px 12px;
  }
  .main-grid {
    padding: 0 0.5rem;
  }
}

@media (max-width: 700px) {
  .projects-flex {
    flex-direction: column;
    gap: 1rem;
  }
  .project-card {
    flex-direction: column;    /* Keep thumbnails above text on mobile */
    align-items: center;
    min-width: unset;
  }

  .project-thumb {
    width: 160px;             /* Slightly smaller on mobile but still clearly visible */
    height: 160px;
  }
}

/* Contact Section Styles */
.contact-main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
}

.contact-info {
  background: #232946;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(162, 89, 247, 0.08);
  padding: 2rem 2.5rem;
  margin-top: 2rem;
  font-size: 1.2rem;
  color: #e0e6ed;
}

.contact-info a {
  color: #00ffe7;
  text-decoration: underline;
  word-break: break-all;
}

.contact-info a:visited {
  color: #e94560;
}

/* Contact Form Styling */
.contact-form {
  max-width: 420px;
  margin: 2rem auto;
  padding: 2rem 2rem 1.5rem 2rem;
  background: #232946;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(162, 89, 247, 0.10);
  font-size: 1.15rem;
  color: #e0e6ed;
  text-align: left;
}

.contact-form label {
  font-weight: bold;
  color: #00ffe7;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  padding: 0.7rem;
  border-radius: 8px;
  border: 1px solid #39393b;
  background: #18181b;
  color: #e0e6ed;
  font-size: 1rem;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical;
}

.contact-btn {
  background: #00ffe7;
  color: #232946;
  border: none;
  border-radius: 8px;
  padding: 0.8rem 2.2rem;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,255,231,0.10);
  transition: background 0.2s, color 0.2s;
  margin-top: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.contact-btn:hover {
  background: #e94560;
  color: #fff;
}

/* Footer styles */
footer {
  text-align: center;
  color: #aaa;
  font-size: 1rem;
  padding: 1.5rem 0 1rem 0;
  margin-top: 2rem;
  background: none;
  border-top: 1px solid #39393b;
}

/* Add to your style.css file */

/* Mini pro-pup section style */
.mini-propup {
  font-family: 'Rubik', Arial, sans-serif; /* Use Rubik font */
  background: #232946; /* Soft background for contrast */
  color: #e0e6ed;      /* Light text for readability */
  padding: 1rem 1.5rem;
  margin: 1.5rem auto 1.5rem auto;
  border-radius: 10px;
  max-width: 800px;
  font-size: 1.22rem; /* Increased font size for better readability */
  text-align: center;
  box-shadow: 0 2px 8px rgba(162, 89, 247, 0.08);
}

/* Simple row for icons under the mini-propup */
.icon-row {
  text-align: center; /* Center the icons */
  margin: 1.2rem 0;
}

.about-icon {
  width: 64px;      /* Set all icons to the same width */
  height: 64px;     /* Set all icons to the same height */
  margin: 0 12px;   /* Add space between icons */
  vertical-align: middle;
}



/* Hamburger menu styles for mobile navigation */
/* Hide the checkbox and hamburger by default on desktop */
.nav-toggle,
.nav-toggle-label {
  display: none;
}

/* Show hamburger menu on small screens */
@media (max-width: 700px) {
  nav {
    /* Stack nav vertically on mobile */
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: 0;
    padding: 0.5rem 0;
  }
  /* Show hamburger icon */
  .nav-toggle {
    display: block;
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 40px;
    height: 40px;
    opacity: 0; /* Hide the checkbox itself */
    z-index: 101;
  }
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-left: 1rem;
    z-index: 102;
  }
  .nav-toggle-label span {
    display: block;
    height: 4px;
    width: 28px;
    background: #a259f7;
    margin: 5px 0;
    border-radius: 2px;
    transition: 0.3s;
  }
  /* Hide nav links by default on mobile */
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #232946;
    margin-top: 2.5rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  }
  /* Show nav links when hamburger is checked */
  .nav-toggle:checked + .nav-toggle-label + .nav-links {
    display: flex;
  }
  .nav-links a {
    padding: 1rem 2rem;
    border-bottom: 1px solid #39393b;
    color: #a259f7;
    text-align: left;
    width: 100%;
  }
  .nav-links a:last-child {
    border-bottom: none;
  }
  /* Hide the default nav links on mobile */
  nav > a {
    display: none;
  }
}

/* Make images responsive */
img,
.about-icon,
.bio-photo,
.skill-icon,
.project-thumb {
  max-width: 100%;
  height: auto;
}

/* Make text scale on small screens */
body,
.bio-text,
.mini-propup,
contact-info,
.contact-form {
  font-size: 1rem;
}

@media (max-width: 700px) {
  body,
  .bio-text,
  .mini-propup,
  .contact-info,
  .contact-form {
    font-size: 1.05rem;
  }
  header h1 {
    font-size: 1.5rem;
  }
  .hero-hook {
    font-size: 1.1rem;
  }
  h2 {
    font-size: 1.2rem;
  }
}

.accessibility-highlight {
  background-color: #003366;
  color: white;
  padding: 4rem 2rem;
  font-family: 'Rubik', sans-serif;
  border-top: 4px solid #FFD700;
}

.highlight-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.highlight-image {
  max-width: 240px;
  height: auto;
}

.highlight-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.highlight-text h2 em {
  color: #FFD700;
  font-style: normal;
}

.highlight-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 700px;
}

.highlight-text .secondary {
  margin-top: 2rem;
  font-weight: 600;
  font-size: 1.3rem;
}

@media (min-width: 768px) {
  .highlight-container {
    flex-direction: row;
    text-align: left;
  }

  .highlight-text {
    flex: 1;
    padding-left: 2rem;
  }
}

/* Accessibility Carousel Styles */
.carousel-container {
  position: relative;
  width: 240px;
  height: 300px; /* Increased height to accommodate caption */
  margin: 0 auto;
  background-color: #1a1a2e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.carousel-image {
  width: 240px;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease;
}

.carousel-caption {
  background-color: #003366;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Screen reader only class (visually hidden but accessible to screen readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* GitHub Activity and Skills Layout */
.top-sections-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* GitHub Activity Section */
#github-activity {
  background: #232946; /* Match existing section background */
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(162,89,247,0.07);
  padding: 2rem 1.5rem;
  border: 1px solid #3a185c; /* Subtle purple border */
  flex: 1 1 320px;
  min-width: 300px;
  margin-bottom: 2rem;
}

/* Container for commit cards */
.github-activity-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Individual commit card styling */
.commit-card {
  background: #1a1e3a; /* Slightly darker than section bg */
  border-left: 4px solid #00ffe7; /* Blue-green accent */
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}

.commit-card:hover {
  transform: translateY(-3px);
}

/* Commit card header with repo name and date */
.commit-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.commit-repo {
  color: #00ffe7; /* Blue-green accent */
  font-weight: bold;
}

.commit-date {
  color: #aaa;
  font-size: 0.85rem;
}

/* Commit message styling */
.commit-message {
  font-size: 1rem;
  color: #e0e6ed;
  margin: 0.5rem 0;
  line-height: 1.4;
}

.commit-type {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 4px currentColor;
}

.commit-title {
  font-weight: 500;
  display: inline;
}

.commit-details {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid #39393b;
}

.commit-bullet,
.commit-line {
  font-size: 0.9rem;
  margin: 0.3rem 0;
  color: #c0c6cd;
  line-height: 1.3;
}

.commit-bullet {
  padding-left: 0.5rem;
}

/* Make commit messages more readable on mobile */
@media (max-width: 600px) {
  .commit-details {
    padding-left: 0.3rem;
    border-left-width: 1px;
  }
  
  .commit-bullet,
  .commit-line {
    font-size: 0.85rem;
  }
  
  .commit-type {
    display: block;
    margin-bottom: 0.2rem;
  }
}

/* Skills section - update flex properties */
#skills {
  flex: 1 1 320px;
  min-width: 300px;
  margin-bottom: 2rem;
}

/* GitHub Activity Toggle Button Styles */
.github-toggle-container {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #39393b;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.github-toggle-btn,
.github-refresh-btn {
  background: #232946;
  color: #00ffe7;
  border: 2px solid #a259f7;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
  justify-content: center;
}

.github-refresh-btn {
  border-color: #00ffe7;
  min-width: 100px;
}

.github-toggle-btn:hover,
.github-refresh-btn:hover {
  background: #a259f7;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(162, 89, 247, 0.3);
}

.github-refresh-btn:hover {
  background: #00ffe7;
  color: #232946;
  box-shadow: 0 4px 12px rgba(0, 255, 231, 0.3);
}

.toggle-arrow {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

/* Responsive: Stack buttons vertically on small screens */
@media (max-width: 600px) {
  .github-toggle-container {
    flex-direction: column;
    align-items: center;
  }
  
  .github-toggle-btn,
  .github-refresh-btn {
    width: 100%;
    max-width: 200px;
  }
}

/* Responsive layout for GitHub Activity and Skills sections */
@media (max-width: 700px) {
  .top-sections-container {
    flex-direction: column;
  }
}

/* GitHub logo in section header */
.github-header-logo {
  height: 2.25rem; /* Increased by 50% from 1.5rem */
  width: auto;
  vertical-align: middle;
  margin-left: 0.5rem;
  margin-right: 0.3rem; /* Small space between logo and "GitHub" text */
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.github-header-logo:hover {
  opacity: 1;
}

/* Responsive: smaller logo on mobile */
@media (max-width: 600px) {
  .github-header-logo {
    height: 1.8rem; /* Increased by 50% from 1.2rem */
    margin-left: 0.3rem;
    margin-right: 0.2rem;
  }
}

/* Personal note under GitHub section title */
.github-personal-note {
  font-family: 'Georgia', 'Times New Roman', serif; /* More personal, conversational font */
  font-style: italic;
  font-size: 0.95rem;
  color: #c0c6cd;
  margin-top: -0.5rem; /* Pull it closer to the title */
  margin-bottom: 1.5rem;
  line-height: 1.4;
  text-align: left;
  border-left: 3px solid #a259f7;
  padding-left: 1rem;
  background: rgba(162, 89, 247, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 0 8px 8px 0;
}

/* Responsive: adjust personal note on mobile */
@media (max-width: 600px) {
  .github-personal-note {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    margin-top: -0.3rem;
  }
}