/* ================================================================
   READABILITY-FIX.CSS — Sagar Patel Portfolio
   Fixes: font sizes, text contrast, skill bar fill, conveyor items
   Load AFTER global.css, animations.css, sidebar.css, mechanical.css
   ================================================================ */

/* ══ 1. GLOBAL COLOUR & TEXT CONTRAST BOOST ═══════════════════ */
:root {
  /* Brighter muted text — was #506080 (barely visible) */
  --text-muted:  #8aaccc;
  /* Brighter dim text — was #a0b4cc */
  --text-dim:    #bdd0e8;
  /* Brighter border so lines are visible */
  --border:      rgba(69,123,189,0.45);
}

/* Base body text bump */
body { font-size: 16px; }

p { font-size: 0.97rem; color: var(--text-dim); }
li { color: var(--text-dim); }

/* ══ 2. SECTION TITLE / LABEL ═══════════════════════════════════ */
.section-title .label {
  font-size: 0.65rem !important;   /* was .45rem — nearly invisible */
  letter-spacing: 0.18em;
  color: var(--orange-hi) !important;
}

/* ══ 3. SIDEBAR — all text bigger & brighter ════════════════════ */
.player-name {
  font-size: 0.75rem !important;   /* was .65rem */
  color: var(--yellow-hi) !important;
}
.player-title {
  font-size: 0.66rem !important;   /* was .58rem */
  color: #a8c4e0 !important;       /* was text-dim — too faint */
}
.player-online {
  font-size: 0.5rem !important;    /* was .42rem */
  color: var(--green-hi) !important;
}
.player-xp-label {
  font-size: 0.48rem !important;
  color: #8aaccc !important;
}
.player-xp-val {
  font-size: 0.48rem !important;
  color: var(--yellow-hi) !important;
}
.nav-section-label {
  font-size: 0.5rem !important;    /* was .42rem */
  color: #8aaccc !important;
}
.nav-link {
  font-size: 0.6rem !important;    /* was .52rem */
  color: #c8d8ee !important;
}
.nav-label {
  font-size: 0.6rem !important;
}
.sb-badge {
  font-size: 0.48rem !important;   /* was .4rem */
  color: #8aaccc !important;
}
.sidebar-copy {
  font-size: 0.48rem !important;   /* was .38rem */
  color: #8aaccc !important;
}
.sidebar-social {
  font-size: 0.52rem !important;   /* was .44rem */
}

/* ══ 4. HERO PAGE — stats, labels, gauges ══════════════════════ */
.hero-eyebrow {
  font-size: 0.72rem !important;   /* was .62rem */
  color: var(--green-hi) !important;
}
.stat-l {
  font-size: 0.65rem !important;   /* was .54rem */
  color: #8aaccc !important;
  letter-spacing: 0.08em;
}
.stat-n {
  font-size: 1.9rem !important;
  color: #74a8e0 !important;
}
.gauge-label {
  font-size: 0.58rem !important;   /* was .48rem */
  color: #8aaccc !important;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}
.hero-bio {
  font-size: 1rem !important;
  color: #bdd0e8 !important;
  line-height: 1.8;
}
.hero-roles {
  font-size: clamp(0.9rem, 2vw, 1.1rem) !important;
  color: var(--blue-hi) !important;
}
.float-badge {
  font-size: 0.72rem !important;   /* was .6rem */
  color: #d0e4f8 !important;
}
.float-badge .val {
  color: var(--blue-hi) !important;
}

/* ══ 5. QUICK NAV CARDS ══════════════════════════════════════════ */
.qc-label {
  font-size: 0.82rem !important;   /* was .68rem */
  color: #d0e4f8 !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.qc-sub {
  font-size: 0.88rem !important;   /* was .78rem */
  color: #8aaccc !important;
}
.qc-icon {
  font-size: 1.7rem !important;    /* was 1.5rem */
}

/* ══ 6. SKILL PAGE ══════════════════════════════════════════════ */
.skill-name {
  font-size: 0.85rem !important;   /* was .72rem */
  color: #d0e4f8 !important;
  font-weight: 700;
}
.skill-pct {
  font-size: 0.78rem !important;   /* was .62rem */
  color: var(--orange-hi) !important;
  font-weight: 700;
}
.skill-lvl-badge {
  font-size: 0.46rem !important;   /* was .38rem */
  padding: 0.15rem 0.4rem;
}
.skill-group-title {
  font-size: 0.9rem !important;    /* was .75rem */
  color: #74a8e0 !important;
  letter-spacing: 0.12em;
}
.char-name {
  font-size: 1.1rem !important;
}
.char-class {
  font-size: 0.7rem !important;    /* was .6rem */
  color: var(--orange-hi) !important;
  letter-spacing: 0.08em;
}

/* Char stat labels */
.char-card [style*="font-family:var(--font-mono)"] {
  font-size: 0.72rem !important;
  color: #8aaccc !important;
}

/* ══ 7. CONVEYOR ITEMS — bigger, readable ═══════════════════════ */
.conveyor-item {
  font-size: 0.72rem !important;   /* was .6rem */
  min-width: 110px !important;
  padding: 0.6rem 1.1rem !important;
}
.conveyor-item .ci-name {
  font-size: 0.75rem !important;   /* was .62rem */
  color: #d0e4f8 !important;
  font-weight: 700;
}
.conveyor-item .ci-lvl {
  font-size: 0.6rem !important;    /* was .5rem */
  color: var(--yellow-hi) !important;
}
.conveyor-item .ci-icon {
  font-size: 1.6rem !important;
}
.conveyor-title,
div[style*="CONVEYOR"] {
  font-size: 0.65rem !important;   /* was .55rem */
  color: var(--orange-hi) !important;
}

/* ══ 8. CONTROL PANEL SWITCHES ══════════════════════════════════ */
.ctrl-label {
  font-size: 0.62rem !important;   /* was .52rem */
  color: #b0c8e4 !important;
  font-weight: 700;
  text-align: center;
}
.ctrl-panel {
  gap: 0.8rem !important;
}

/* ══ 9. HUD / AXIS DISPLAY ══════════════════════════════════════ */
.axis-hud {
  font-size: 0.62rem !important;   /* was .55rem */
  padding: 0.5rem 1rem !important;
}
.ax-label {
  color: #8aaccc !important;
  font-size: 0.62rem !important;
}
.ax-val {
  font-size: 0.62rem !important;
  font-weight: 700;
}
.hud-panel {
  font-size: 0.65rem !important;   /* was .55rem */
  color: #b0c8e4 !important;
  gap: 0.5rem !important;
  padding: 0.55rem 1.1rem !important;
}
#hud-time {
  font-size: 0.65rem !important;
  color: #b0c8e4 !important;
}

/* ══ 10. EXPERIENCE PAGE ════════════════════════════════════════ */
.job-period {
  font-size: 0.72rem !important;   /* was .6rem */
  color: var(--orange-hi) !important;
}
.job-role {
  font-size: 1.05rem !important;   /* was .95rem */
  color: #e8f4ff !important;
}
.job-company {
  font-size: 0.95rem !important;   /* was .88rem */
  color: #ff7080 !important;       /* brighter red */
}
.job-sub {
  font-size: 0.8rem !important;    /* was .72rem */
  color: #8aaccc !important;
}
.job-points li {
  font-size: 0.9rem !important;    /* was .83rem */
  color: #bdd0e8 !important;
  line-height: 1.6;
}
.edu-period {
  font-size: 0.72rem !important;   /* was .6rem */
  color: var(--blue-hi) !important;
}
.edu-degree {
  font-size: 0.92rem !important;   /* was .82rem */
  color: #d0e4f8 !important;
}
.edu-school {
  font-size: 0.88rem !important;   /* was .8rem */
  color: #8aaccc !important;
}

/* CNC status bar */
.cnc-status-bar {
  font-size: 0.62rem !important;   /* was .52rem */
  color: #8aaccc !important;
}
.cnc-stat-val {
  font-size: 0.62rem !important;
  color: var(--orange-hi) !important;
}
.exp-stat-n {
  font-size: 2.2rem !important;
  color: var(--orange-hi) !important;
}
.exp-stat-l {
  font-size: 0.62rem !important;   /* was .52rem */
  color: #8aaccc !important;
}

/* Mechanical section header numbers */
.mech-sh-num { font-size: 2rem !important; }
.mech-sh-label {
  font-size: 0.65rem !important;   /* was .55rem */
  color: var(--orange-hi) !important;
}
.mech-sh-title {
  font-size: 1.5rem !important;
}

/* ══ 11. PROJECTS PAGE ══════════════════════════════════════════ */
.proj-title {
  font-size: 1.1rem !important;    /* was 1rem */
  color: #e8f4ff !important;
}
.proj-desc {
  font-size: 0.92rem !important;   /* was .85rem */
  color: #bdd0e8 !important;
  line-height: 1.7;
}
.proj-tag {
  font-size: 0.65rem !important;   /* was .55rem */
  color: var(--blue-hi) !important;
  padding: 0.2rem 0.6rem !important;
}
.proj-cat-badge {
  font-size: 0.5rem !important;    /* was .4rem */
  color: var(--orange-hi) !important;
  padding: 0.2rem 0.6rem !important;
}
.proj-year {
  font-size: 0.72rem !important;   /* was .6rem */
  color: #8aaccc !important;
}
.filter-btn {
  font-size: 0.55rem !important;   /* was .44rem/.45rem */
  padding: 0.5rem 1.2rem !important;
  color: #b0c8e4 !important;
}
.filter-btn.active {
  color: var(--yellow-hi) !important;
}
.filter-panel::before {
  font-size: 0.6rem !important;    /* was .48rem */
  color: #8aaccc !important;
}

/* ══ 12. CERTIFICATIONS PAGE ════════════════════════════════════ */
.cert-name {
  font-size: 0.85rem !important;   /* was .76rem */
  color: #d0e4f8 !important;
  letter-spacing: 0.04em;
}
.cert-issuer {
  font-size: 0.8rem !important;    /* was .72rem */
  color: var(--yellow-hi) !important;
}
.cert-year {
  font-size: 0.68rem !important;   /* was .6rem */
  color: #8aaccc !important;
}
.cert-cat {
  font-size: 0.88rem !important;   /* was .8rem */
  color: var(--blue-hi) !important;
}

/* ══ 13. CONTACT PAGE ═══════════════════════════════════════════ */
.d-key {
  font-size: 0.68rem !important;   /* was .58rem */
  color: #8aaccc !important;
  letter-spacing: 0.1em;
}
.d-val {
  font-size: 0.95rem !important;   /* was .85rem */
  color: #d0e4f8 !important;
}
.a-part {
  font-size: 0.72rem !important;   /* was .62rem */
  color: #c0d4ec !important;
}
.ap-key {
  font-size: 0.62rem !important;   /* was .52rem */
  color: #8aaccc !important;
  letter-spacing: 0.1em;
}
.ap-val {
  font-size: 0.88rem !important;
  color: #d0e4f8 !important;
}
.assembly-wrap-title {
  font-size: 0.62rem !important;   /* was .52rem */
  color: var(--orange-hi) !important;
}

/* ══ 14. SERVICES PAGE ══════════════════════════════════════════ */
.svc-title {
  font-size: 0.9rem !important;    /* was .8rem */
  color: var(--blue-hi) !important;
}
.svc-desc {
  font-size: 0.92rem !important;   /* was .83rem */
  color: #bdd0e8 !important;
}

/* ══ 15. INFO PANELS (About page) ═══════════════════════════════ */
.info-k {
  font-size: 0.68rem !important;   /* was .6rem */
  color: #8aaccc !important;
  letter-spacing: 0.1em;
}
.info-v {
  font-size: 0.9rem !important;    /* was .82rem */
  color: #d0e4f8 !important;
}
.hl-title {
  font-size: 0.85rem !important;   /* was .75rem */
  color: var(--blue-hi) !important;
}
.hl-desc {
  font-size: 0.88rem !important;   /* was .78rem */
  color: #bdd0e8 !important;
}
.v-arr {
  color: var(--blue-hi) !important;
  font-size: 1rem !important;
}

/* ══ 16. FORM LABELS ════════════════════════════════════════════ */
.form-label {
  font-size: 0.62rem !important;   /* was .42rem — tiny! */
  color: var(--yellow-hi) !important;
  letter-spacing: 0.12em;
}
.form-control {
  font-size: 0.95rem !important;
  color: #d8ecff !important;
}
.form-control::placeholder {
  color: #607898 !important;
  font-size: 0.9rem !important;
}

/* ══ 17. BADGE (job tags) ═══════════════════════════════════════ */
.badge {
  font-size: 0.68rem !important;   /* was .6rem */
  color: var(--blue-hi) !important;
  padding: 0.22rem 0.6rem !important;
}

/* ══ 18. MOBILE TOPBAR ══════════════════════════════════════════ */
.mobile-logo {
  font-size: 0.85rem !important;   /* was .7rem */
}

/* ══ 19. FOOTER ═════════════════════════════════════════════════ */
.footer-copy {
  font-size: 0.72rem !important;   /* was .62rem */
  color: #8aaccc !important;
}
.footer-link {
  font-size: 0.68rem !important;   /* was .58rem */
  color: #8aaccc !important;
}

/* ══ 20. SKILL BARS — FIX FILL ANIMATION ═══════════════════════ */

/* piston-bar track */
.piston-bar {
  height: 24px !important;        /* was 22px — slightly taller */
}
.piston-track {
  inset: 3px !important;
}
/* piston-fill: ensure transition fires on .revealed parent */
.piston-fill {
  transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Global xp-fill bars */
.xp-fill {
  transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.xp-track {
  height: 12px !important;        /* was 10px */
}
.xp-bar-name {
  font-size: 0.85rem !important;  /* was .72rem */
  color: #d0e4f8 !important;
}
.xp-bar-val {
  font-size: 0.58rem !important;  /* was .45rem */
  color: var(--yellow-hi) !important;
}
.xp-level {
  font-size: 0.52rem !important;  /* was .42rem */
  padding: 0.18rem 0.45rem !important;
}

/* ══ 21. MECHANICAL SPECIFIC ════════════════════════════════════ */
.cnc-status-bar {
  font-size: 0.65rem !important;
  letter-spacing: 0.06em;
}
.job-period::before {
  font-size: 0.5rem !important;
}
.col-head {
  font-size: 1rem !important;     /* was .88rem */
}
.cnc-chuck {
  font-size: 0.85rem !important;  /* was .7rem */
}

/* Achievement cards */
.ach-step {
  font-size: 1.4rem !important;   /* was 1.2rem */
  color: rgba(244,129,31,0.5) !important;
}
.achievement-card p:first-child {
  font-size: 0.88rem !important;  /* was .8rem */
  color: #d0e4f8 !important;
}
.achievement-card p:last-child {
  font-size: 0.82rem !important;  /* was .78rem */
  color: #8aaccc !important;
}

/* Stepper motor text */
.stepper-motor {
  font-size: 0.65rem !important;  /* was .58rem */
  color: #8aaccc !important;
}

/* Nav indicator (section counter) */
.nav-indicator {
  font-size: 0.62rem !important;  /* was .5rem */
  color: #8aaccc !important;
}

/* Robot arm section label */
[style*="DATA BLOCKS"], [style*="6-AXIS"],
.robot-section [style*="font-family:var(--font-mono)"] {
  font-size: 0.65rem !important;
  color: var(--orange-hi) !important;
}

/* Data blocks */
.data-block {
  font-size: 0.78rem !important;  /* was .65rem */
  color: #d0e4f8 !important;
  padding: 0.5rem 1.1rem !important;
}

/* ══ 22. GLASS / GAME CARDS — bio text ══════════════════════════ */
.bio-card p {
  font-size: 0.97rem !important;
  color: #bdd0e8 !important;
  line-height: 1.85;
}
.values-list li {
  font-size: 0.92rem !important;
  color: #bdd0e8 !important;
}
.tl-date {
  font-size: 0.75rem !important;
  color: var(--green-hi) !important;
}
.tl-title {
  font-size: 1rem !important;
  color: #d0e4f8 !important;
}
.tl-org {
  font-size: 0.88rem !important;
  color: #74a8e0 !important;
}

/* ══ 23. SOFT SKILLS PANEL ══════════════════════════════════════ */
.soft-name {
  font-size: 0.65rem !important;  /* was .58rem */
  color: #8aaccc !important;
}

/* ══ 24. TOOL CARDS ═════════════════════════════════════════════ */
.tool-name {
  font-size: 0.62rem !important;  /* was .5rem */
  color: #8aaccc !important;
}
.tool-icon {
  font-size: 1.6rem !important;
}

/* ══ 25. CONVEYOR SECTION HEADER ════════════════════════════════ */
.conveyor-section .conveyor-title {
  font-size: 0.68rem !important;
  color: var(--orange-hi) !important;
  letter-spacing: 0.15em;
}