/* ============================================================
   it.css — IT SKILLS PAGE STYLES
   Loaded by it-skills.html on top of style.css.
   Aesthetic: Terminal / matrix green — like a command line,
   with animated typing text, glowing skill bars,
   and a dot-on-a-line work timeline.

   Sections:
     1.  Accent colour variables (green theme)
     2.  Hero section (terminal typing effect)
     3.  Skill bars section
     4.  Tools grid
     5.  Work experience timeline
     6.  Certifications grid
     7.  VS Code projects section
     8.  Responsive overrides
   ============================================================ */


/* ============================================================
   1. ACCENT COLOUR OVERRIDE
   This page uses green (#00ff88) instead of blue as its accent.
   ============================================================ */
:root {
  --accent:      #00ff88;                /* bright matrix green */
  --accent-glow: rgba(0,255,136,0.3);    /* glow/shadow version */
  --accent-dim:  rgba(0,255,136,0.08);   /* very faint tint for backgrounds */
  --accent2:     #ffcc00;                /* yellow, used sparingly */
}


/* ============================================================
   2. HERO SECTION
   Full viewport. Behind the content there's a scrolling
   block of terminal-style text (code/commands).
   The heading uses the typewriter JS effect.
   ============================================================ */

.it-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;  /* so the terminal background can be positioned behind */
  overflow: hidden;
  padding-top: 80px;   /* clear the fixed nav */
}

/* --- Terminal text background ---
   A large block of monospace text showing fake terminal commands.
   It's faint (very low opacity) and purely decorative.
   pointer-events: none means clicks pass straight through it. */
.it-hero__terminal-bg {
  position: absolute;
  inset: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(0,255,136,0.05); /* 5% opacity — barely visible */
  overflow: hidden;
  white-space: pre-wrap;   /* preserves line breaks and spaces */
  line-height: 1.6;
  pointer-events: none;
  user-select: none;       /* can't accidentally highlight/copy this text */
  padding: 6rem 2rem 2rem;
}

/* Content sits above the terminal background (z-index: 1) */
.it-hero__content { position: relative; z-index: 1; }

/* The "❯ IT Specialist_" typewriter line at the top */
.it-hero__prompt {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.it-hero__prompt::before { content: '❯'; } /* terminal prompt symbol */

/* Blinking cursor — uses the shared @keyframes blink from style.css */
.it-hero__cursor { animation: blink 1s step-end infinite; }

/* Main hero title */
.it-hero__title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.9;
  color: var(--text);
  margin-bottom: 1.5rem;
}
/* "TOOLS." uses the outline effect: green stroke, transparent fill */
.it-hero__title .highlight {
  -webkit-text-stroke: 1px var(--accent);
  color: transparent;
}

/* Sub-heading listing skills */
.it-hero__sub {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
  line-height: 1.8;
}
.it-hero__sub span { color: var(--accent); } /* highlighted words go green */


/* ============================================================
   3. SKILL BARS SECTION
   Two columns of skills, each with a bar that animates
   from 0 to its target width when scrolled into view.
   The JS in main.js (initSkillBars) handles the animation.
   ============================================================ */

.skills-grid-section { padding: 6rem 0; }

/* Two-column layout for the skill groups */
.skills-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

/* Section title inside each skill group (e.g. "// Game Engines & Dev") */
.skills-group__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* Wrapper for one skill + its bar */
.skill-bar { margin-bottom: 1.4rem; }

/* The label row: skill name on the left, level on the right */
.skill-bar__top { display: flex; justify-content: space-between; margin-bottom: 0.4rem; }
.skill-bar__name  { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); }
.skill-bar__level { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); }

/* The grey track the fill bar sits on */
.skill-bar__track {
  height: 4px;
  background: rgba(255,255,255,0.06); /* very faint track */
  position: relative;
  overflow: hidden;
}

/* The coloured fill — starts at width: 0, animates to data-width% via JS */
.skill-bar__fill {
  height: 100%;
  background: var(--accent);
  width: 0;                          /* starts empty */
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* smooth ease-in-out */
  position: relative;
}
/* The glowing dot at the right edge of the fill bar */
.skill-bar__fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent); /* green glow */
}


/* ============================================================
   4. TOOLS GRID
   A responsive grid of small tool tiles — each shows
   an emoji icon, tool name, and category.
   ============================================================ */

.tools-section { padding: 6rem 0; background: var(--surface); }

/* auto-fill means as many columns as fit at minimum 140px each */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.tool-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1.2rem 1rem;
  text-align: center;
  transition: border-color 0.3s, background 0.3s;
  cursor: default;
}
.tool-card:hover { border-color: var(--accent); background: var(--accent-dim); }

.tool-card__icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
.tool-card__name { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text); }
.tool-card__cat  {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
}


/* ============================================================
   5. WORK EXPERIENCE TIMELINE
   A vertical line runs down the left side.
   Each job entry has a glowing dot on the line.
   ============================================================ */

.work-section { padding: 6rem 0; }

.work-timeline {
  margin-top: 3rem;
  position: relative; /* so the ::before line can be absolutely positioned */
}

/* The vertical line running down the left side */
.work-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}

/* Each job entry — indented to the right of the vertical line */
.work-item {
  padding: 0 0 3rem 2.5rem; /* 2.5rem left padding = space for the dot */
  position: relative;
}

/* The glowing dot on the timeline for each job entry */
.work-item::before {
  content: '';
  position: absolute;
  left: -4px;   /* centres the 9px dot on the 1px line */
  top: 0.5rem;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent); /* green glow */
}

/* Header row: role name, company, date range */
.work-item__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.work-item__role    { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--text); }
.work-item__company { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); }
/* margin-left: auto pushes the date to the far right */
.work-item__period  { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); margin-left: auto; }

/* Bullet point list of responsibilities */
.work-item__bullets { margin-top: 0.8rem; }
.work-item__bullets li {
  font-size: 0.88rem;
  color: var(--muted);
  padding: 0.3rem 0;
  padding-left: 1.2rem; /* space for the custom bullet */
  position: relative;
  line-height: 1.5;
}
/* Custom green triangle bullet instead of a standard list bullet */
.work-item__bullets li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.7rem;
}


/* ============================================================
   6. CERTIFICATIONS GRID
   Cards with an icon, title, year, and description.
   ============================================================ */

.certs-section { padding: 6rem 0; background: var(--surface); }

.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 3rem;
}

.cert-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;       /* icon sits to the left of text */
  gap: 1.2rem;
  align-items: flex-start;
  transition: border-color 0.3s;
}
.cert-card:hover { border-color: var(--accent); }

.cert-card__icon  { font-size: 1.5rem; flex-shrink: 0; } /* icon doesn't shrink */
.cert-card__title { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); margin-bottom: 0.3rem; }
.cert-card__year  { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); }
.cert-card__desc  { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.4; }


/* ============================================================
   7. VS CODE PROJECTS SECTION
   Cards styled to look like VS Code editor windows.
   Each card has:
   - A fake title bar (traffic-light dots + filename)
   - A clickable image area for screenshots
   - An info body with title, description, tags, and link
   ============================================================ */

.vscode-section { padding: 6rem 0; }

/* Responsive grid — fills as many columns as fit at 300px min */
.vscode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.vscode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.3s;
}
.vscode-card:hover { border-color: var(--accent); }

/* --- Fake editor title bar at the top of each card ---
   Dark background, traffic-light dots, filename. */
.vscode-card__chrome {
  background: #1e1e2e;  /* VS Code dark background colour */
  padding: 0.5rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* The three traffic-light circles */
.vscode-dot { width: 8px; height: 8px; border-radius: 50%; }
.vscode-dot.r { background: #ff5f57; }  /* red = close */
.vscode-dot.y { background: #ffbd2e; }  /* yellow = minimise */
.vscode-dot.g { background: #28c840; }  /* green = maximise */

/* The filename text next to the dots */
.vscode-filename {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
  margin-left: 0.3rem;
}

/* Language badge on the far right (e.g. "HTML/CSS/JS") */
.vscode-lang-badge {
  margin-left: auto; /* pushes to the right edge */
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--accent);
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.2);
  padding: 0.15rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Screenshot preview area ---
   16:9 placeholder with a dashed border.
   Clicking it triggers the hidden file input via JS. */
.vscode-card__preview {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg2);
  border: 2px dashed rgba(0,255,136,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s;
  position: relative;
}
.vscode-card__preview:hover { border-color: var(--accent); }
/* Once an image is loaded it fills the area */
.vscode-card__preview img { width: 100%; height: 100%; object-fit: cover; }

/* Hint text inside the empty preview */
.vscode-card__preview .preview-hint {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.2);
  text-align: center;
  pointer-events: none; /* don't intercept the click that triggers upload */
}

/* Hidden file input — triggered by clicking the preview area */
input.vscode-img-input { display: none; }

/* Card body below the preview */
.vscode-card__body { padding: 1.5rem; }

.vscode-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}
.vscode-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Row of small technology tags */
.vscode-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vscode-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--accent);
  background: rgba(0,255,136,0.06);
  border: 1px solid rgba(0,255,136,0.2);
  padding: 0.2rem 0.55rem;
}

/* External link at the bottom of the card */
.vscode-card__link {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  transition: color 0.2s;
}
.vscode-card__link:hover { color: var(--accent); }


/* ============================================================
   8. RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
  /* Stack skill columns vertically on tablet/mobile */
  .skills-columns { grid-template-columns: 1fr; }
}