/* ===========================
   GLOBAL RESET
=========================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===========================
   COLOR SYSTEM (YOUR 7 COLORS)
=========================== */
:root {
  --white: #FFFFFF;
  --offwhite: #dedede; /* slightly off-white for subtle contrast */
  --border-gray: #4A4A4A; /* dark gray, visible but not bright */
  --blue-gray: #3f4d63;


  /* Highlight system (BLUE VERSION) */
  --highlight: #3a7bd5;                 /* main blue */
  --highlight-opaque: #3a7bd544;        /* same opacity as before */
  --highlight-hover: #6fb3ff;           /* lighter blue for hover */
  --highlight-glow: rgba(58, 123, 213, 0.45); /* same glow strength */
  --highlight-hover-opaque: rgba(111, 179, 255, 0.241);
  
  --miniboxborder: rgba(58, 123, 213, 0.25);

  /* Text */
  --text-gray: #bebebe; /* unchanged */

  /* Backgrounds (BLUE-TINTED VERSIONS) */
  --bg-black: #000000; /* unchanged */
  --bg-secondary: #111418;
  --bg-rect-dark: #121722c4;      /* large rectangles (dark blue-tinted) */
  --bg-rect-light: #1e273864;     /* inner rectangles (slightly lighter blue-tinted) */
}

html {
  scroll-behavior: smooth;
}

/* ===========================
   BODY
=========================== */
body {
  font-family: "Oswald", sans-serif;
  line-height: 1.6;
  color: var(--text-gray);
  background-color: var(--bg-black);
}

/* ===========================
   NAVIGATION
=========================== */
header {
  background-color: var(--bg-black);
  color: var(--white);
  padding-bottom: 60px;
}

nav {
  display: flex;
  justify-content: center; /* centered */
  align-items: center;
  padding: 12px 10%; /* thinner bar */
  border-bottom: 1px solid var(--border-gray);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5000; /* above everything */
  background-color: var(--bg-black); /* keep same background */
}

nav ul {
  list-style: none;
  display: flex;
  gap: 55px; /* increased spacing */
}

nav a {
  font-size: 22px; /* slightly bigger */
  color: var(--text-gray);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
  transition: color 0.25s ease;
}

nav a:hover {
  color: var(--white); /* guaranteed hover color */
}


nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--highlight);
  transform: translateX(-50%) scaleX(0); /* start collapsed at center */
  transform-origin: center; /* grows from center */
  transition: transform 0.25s ease;
}

nav a:hover::after {
  transform: translateX(-50%) scaleX(1); /* expands outward from center */
}



/* ===========================
   HERO SECTION (NEW)
=========================== */
.hero {
  padding: 120px 10% 50px;
  text-align: left;
  background-color: var(--bg-black);
  color: var(--white);
  z-index:998;
}

.hero-name {
  font-size: 100px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.1;
}

.hero-lastname {
  color: var(--highlight);
}

.hero-underline {
  width: 140px;
  height: 5px;
  background-color: var(--highlight);
  margin: 12px 0 50px;
}

.hero-description {
  font-size: 22px;
  color: var(--text-gray);
  font-weight: 200; /* thinner */
  max-width: 600px;
  margin-bottom: 50px;
}

.hero-description strong {
  color: var(--offwhite);
  font-weight: 400;
}

/* ===========================
   GPA BLOCK
=========================== */
.gpa-block {
  display: flex;
  align-items: stretch; /* ensures bar matches full height */
  gap: 18px;
  margin-bottom: 70px;
}

.gpa-bar {
  width: 5px;
  background-color: var(--highlight);
  border-radius: 0px;
}

.gpa-text-wrapper {
  display: flex;
  flex-direction: column;
  line-height: 1; /* removes extra invisible vertical padding */
}

.gpa-text {
  font-size: 52px; /* ~2× larger */
  font-weight: 600;
  color: var(--white);
}

.gpa-label {
  font-size: 16px;
  color: var(--text-gray);
  margin-top: 6px;
  letter-spacing: 1px;
}

.gpa-highlight {
  color: var(--highlight);
  margin-left: 4px;
}

.left-accent-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px; /* your chosen width */
  height: 100vh;
  background-color: var(--highlight);

  /* massive, bright, layered glow */
  box-shadow:
    0 0 60px 4px rgba(58, 123, 213, 1),       /* core */
    0 0 120px 8px rgba(58, 123, 213, 0.85),   /* halo */
    0 0 180px 12px rgba(58, 123, 213, 0.65),   /* spread */
    0 0 220px 16px rgba(58, 123, 213, 0.45);   /* ambient */

  z-index: 999;
}

.accent-wrapper {
  position: relative;
  height: calc(100% - 300px); /* stops before footer */
}



/* ===========================
   BUTTONS (NEW)
=========================== */
.button-primary {
  background-color: var(--highlight);
  color: var(--bg-black);
  padding: 14px 28px;
  border-radius: 0px;
  text-decoration: none;
  font-size: 20px;
  border: 2px solid var(--highlight);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.button-primary:hover {
  background-color: var(--highlight-hover);
  transform: translateY(-8px);
  box-shadow: 0 0 12px var(--highlight-glow);
  border: 2px solid var(--highlight-hover);
}

.button-secondary {
  background-color: var(--bg-black);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 0px;
  text-decoration: none;
  font-size: 20px;
  border: 2px solid var(--border-gray);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.button-secondary:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 12px var(--highlight-glow);
  color: var(--highlight);
  font-size: 20px;
  border-color: var(--highlight);
}

/* ===========================
   ABOUT SECTION
=========================== */

.about-section {
  background-color: var(--bg-secondary);
  padding: 90px 10% 90px;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  border-top: 0.5px solid var(--highlight-opaque);
  position: relative;
  margin-bottom: 0 !important;
  z-index: 1001;
  align-items: center;
}

/* LEFT SIDE (text) */
.about-left {
  flex: 1;
  max-width: 600px;
}

.about-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 25px;
}

.about-highlight {
  color: var(--highlight);
}

.about-body p {
  font-size: 22px;
  color: var(--text-gray);
  font-weight: 200;
  margin-bottom: 22px;
  line-height: 1.55;
}

.about-body strong {
  color: var(--offwhite);
  font-weight: 400;
}

/* RIGHT SIDE (skills grid) */
.skills-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* OUTER SKILL BOXES */
.skill-box {
  background-color: var(--bg-rect-dark); /* lighter yellow */
  border: 1px solid var(--highlight-opaque);       /* thin yellow outline */
  border-left: 3px solid var(--highlight);  /* yellow bar on left */
  padding: 20px;
  border-radius: 0px;
}

/* CATEGORY TITLE */
.skill-box h3 {
  color: var(--highlight);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
}

/* INNER ITEM BOXES */
.skill-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.skill-items span {
  display: flex;
  justify-content: center;   /* center left/right */
  align-items: center;        /* center up/down */
  text-align: center;         /* center multi-line text */
  background-color: var(--bg-rect-light);
  padding: 5px 7px;
  border-radius: 0px;
  color: var(--text-gray);
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--miniboxborder);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.skill-items span:hover {
  background-color: var(--highlight-hover-opaque);
  border-color: var(--highlight);
  color: var(--white);
}


/* ===========================
   EXPERIENCE SECTION (WITH BAR + DIAMONDS)
=========================== */

.experience-section {
  background-color: var(--bg-black);
  padding: 90px 10% 90px;
  border-top: 0.5px solid var(--highlight-opaque);
  border-bottom: 0.5px solid var(--highlight-opaque);
  position: relative;
  margin-bottom: 0;
  z-index: 1002;
  width: 100%;
}

/* Inner content column */
.experience-inner {
  max-width: 1120px;
  margin-left: 40px; /* indent text to the right of the bar */
  position: relative;
}

/* Vertical bar aligned with GPA bar */
.experience-bar {
  position: absolute;
  left: -40px;   /* keep this – horizontal alignment is good */
  top: 120px;     /* was 0 – this drops the bar below the title */
  width: 3px;
  height: calc(100% - 120px); /* keeps bottom aligned with last item */
  background-color: var(--highlight);
  box-shadow: 0 0 25px var(--highlight-glow);

  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);

  z-index: 1;
}

/* Title */
.experience-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--white);
  margin-left:-40px;
  margin-bottom: 40px;
}

/* Experience items */
.experience-item {
  margin-bottom: 60px;
  position: relative;
}

/* Diamond marker */
.experience-item::before {
  content: "";
  position: absolute;
  left: -43px;  /* was -47px – this centers the diamond on the 6px bar */
  top: 10px;
  width: 10px;
  height: 10px;
  background-color: var(--highlight);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--highlight-glow);
  z-index: 2;
}

/* Date */
.experience-date {
  font-size: 20px;
  font-weight: 300;
  color: var(--highlight);
  margin-bottom: 8px;
}

/* Role */
.experience-role {
  font-size: 26px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}

/* Tools */
.experience-tools {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-gray);
  margin-bottom: 12px;
}

/* Description */
.experience-description {
  font-size: 22px;
  color: var(--text-gray);
  font-weight: 200;
  line-height: 1.55;
}

/* ===========================
   PROJECT GRID
=========================== */

.projects-section {
  background-color: var(--bg-secondary);
  padding: 90px 0 90px;   /* FIXED */
  border-bottom: 0.5px solid var(--highlight-opaque);
  position: relative;
  margin-bottom: 0;
  z-index: 4002;
  width: 100%;
}

.projects-inner {
  max-width: 1120px;
  margin: 0 auto;         /* FIXED */
}

.projects-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 40px;
  margin-left: -40px;     /* keep your left-shift aesthetic */
}

/* Placeholder for future tabs */
.projects-tabs {
  margin-bottom: 40px;
  margin-left: -40px;     /* matches title */
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;            /* FIXED */
  margin-top: 40px;
  margin-left: -40px;     /* matches tab bar */
}

.project-divider {
  width: 100%;
  height: 0.5px;
  background-color: rgba(255, 255, 255, 0.25);
  margin: 12px 0; /* was 20px */
}



@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}


/* Card styling (updated to match your theme) */
.project-card {
  background-color: var(--bg-black);
  border-radius: 0px;
  border: 1px solid var(--highlight-opaque);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
  margin-bottom: 25px;
  padding: 22px 25px 18px 25px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* IMPORTANT: no more space-between */
  position: relative;
}

.project-top {
  min-height: 120px; /* tune this value depending on your tallest card */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 1);
  border: 1px solid var(--highlight-glow);
}

.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 0%;                 /* starts hidden */
  height: 4px;               /* thickness */
  background-color: var(--highlight);

  transition: width 0.35s ease; /* smooth slide-in */
}

.project-card:hover::before {
  width: 100%; /* animate across the top */
}


.project-card h3 {
  margin-bottom: 10px;
  color: var(--offwhite);
  font-size: 20px;
  font-weight: 500;
}

.project-card p {
  color: var(--text-gray);
  font-size: 18px;
  line-height: 1.55;
  font-weight:300;
}

.project-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-card-link h3,
.project-card-link p,
.project-card-link span {
  text-decoration: none;
}


/* Skill box container inside project cards */
.project-skills {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Individual skill boxes (same style as About Me mini boxes) */
.project-skill {
  background-color: var(--bg-rect-light);
  padding: 4px 8px;
  border-radius: 0px;
  color: var(--highlight);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--miniboxborder);
  font-family: "Oswald", sans-serif;
}
 
/* ===========================
   PROJECT TABS (NEW)
=========================== */

.projects-tabs {
  display: flex;
  gap: 0;              /* no space between tabs */
  margin-bottom: 40px;
  margin-left: -40px;
  position: relative;
  padding-bottom: 8px;
}

.projects-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  z-index:1;
  background-color: var(--blue-gray); /* darker baseline */
  opacity: 0.6; /* subtle but visible */
}

.tab-button {
  background-color: transparent;
  font-family: "Oswald", sans-serif;
  border: none;
  color: var(--text-gray);
  font-size: 22px;
  font-weight: 500;
  padding: 6px 28px;   /* wider in general, but still text-based */
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
  display: inline-block;  /* width = text + padding */
}


.tab-button:hover {
  color: var(--white);
  font-family: "Oswald", sans-serif;
}

.tab-button.active {
  color: var(--white);
}

/* ACTIVE TAB UNDERLINE — FULL WIDTH + TOUCHES BASELINE */
.tab-button.active::after {
  content: "";
  position: absolute;
  left: 0;               /* full width underline */
  z-index: 2;
  bottom: -8px;          /* aligns exactly with baseline */
  width: 100%;
  height: 3px;
  background-color: var(--highlight);
}

.tab-button {
  display: inline-flex;
  align-items: center;
}


/* Ensure SVG + text align nicely */
.tab-button {
  display: inline-flex;
  align-items: center;
}



/* ===========================
   CONTACT INFO
=========================== */
.contact-section {
  background-color: black;
  padding: 90px 0;
  position: relative;
  z-index: 2000;
  color: var(--white);
}

/* Inner wrapper */
.contact-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* Title */
.contact-title {
  font-size: 42px;
  font-family: "Oswald", sans-serif;
  margin-left: -40px;
  margin-bottom: 40px;
  color: var(--white);
}

/* Two-column layout */
.contact-content {
  display: flex;
  gap: 60px;
  width: 100%;
}

/* LEFT SIDE */
.contact-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Contact info boxes */
.contact-box {
  background-color: #0b0b0b; /* deeper black to match your aesthetic */
  padding: 16px 20px;
  border-radius: 0px;
  border: 1.5px solid var(--highlight-opaque); /* your dim blue */
  background-color:var(--bg-secondary);
}

/* Smaller label text */
.contact-label {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  font-family: "Oswald", sans-serif;
}

/* Smaller value text */
.contact-value {
  margin-top: 4px;
  font-size: 19px;
  color: var(--white);
  font-family: "Oswald", sans-serif;
}

/* RIGHT SIDE FORM */
.contact-right {
  width: 50%;
  margin-top: -5px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Labels */
.form-label {
  font-size: 15px;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.55);
  font-family: "Oswald", sans-serif;
}

/* Inputs + textarea */
.form-input,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--highlight-opaque);
  border-radius: 0px;
  color: var(--white);
  font-size: 15px;
  font-family: "Oswald", sans-serif;
}

.form-textarea {
  height: 120px;
  resize: none;
}

/* Submit button — updated to your blue accent */
.form-submit {
  margin-top: 10px;
  padding: 12px 18px;
  background-color: var(--highlight);
  color: black;
  font-family: "Oswald", sans-serif;
  font-size: 18px;

  /* border always exists — no size change on hover */
  border: 2px solid transparent;

  border-radius: 0px;
  cursor: pointer;

  /* smooth glow transition */
  transition: background-color 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.form-submit:hover {
  background-color: var(--highlight-hover);

  /* glow only — no resizing */
  box-shadow: 0 0 12px var(--highlight-glow);

  /* border lights up but stays same thickness */
  border-color: var(--highlight-hover);
}


/* Footer */
.site-footer {
  background-color: black;
  position: relative;
  z-index: 2000;
}


/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 800px) {
  nav {
    flex-direction: column;
    gap: 15px;
  }

  nav ul {
    flex-direction: column;
    text-align: center;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .hero-name {
    font-size: 42px;
  }
}