/* ==========================================================================
   C64 PORTFOLIO — stylesheet
   Kleuren komen uit het originele Commodore 64 palet.
   ========================================================================== */

/* --- C64 palet ----------------------------------------------------------- */
:root {
  --c64-black:      #000000;
  --c64-white:      #ffffff;
  --c64-red:        #883932;
  --c64-cyan:       #67b6bd;
  --c64-purple:     #8b3f96;
  --c64-green:      #55a049;
  --c64-blue:       #40318d;
  --c64-yellow:     #bfce72;
  --c64-orange:     #8b5429;
  --c64-brown:      #574200;
  --c64-lightred:   #b86962;
  --c64-darkgrey:   #505050;
  --c64-grey:       #787878;
  --c64-lightgreen: #94e089;
  --c64-lightblue:  #7869c4;
  --c64-lightgrey:  #9f9f9f;

  /* actieve monitorkleuren (worden per thema overschreven) */
  --border:  var(--c64-lightblue);
  --screen:  var(--c64-blue);
  --fg:      #a99de9;               /* iets opgehelderd t.o.v. het origineel, leest beter */
  --accent:  #d8e59a;
  --dim:     #7869c4;
  --glow:    rgba(169, 157, 233, .3);
}

/* Groen fosfor-monitor */
[data-theme="green"] {
  --border: #1d4d1a;
  --screen: #0b1e08;
  --fg:     var(--c64-lightgreen);
  --accent: #d7ffcd;
  --dim:    #3f7a38;
  --glow:   rgba(148, 224, 137, .35);
}

/* Amber monitor */
[data-theme="amber"] {
  --border: #4a2f06;
  --screen: #170f02;
  --fg:     #ffb64a;
  --accent: #ffe6ac;
  --dim:    #9a6a1c;
  --glow:   rgba(255, 182, 74, .35);
}

/* --- Basis --------------------------------------------------------------- */
* { box-sizing: border-box; }

html { background: var(--border); }

body {
  margin: 0;
  padding: clamp(10px, 3vw, 44px);
  background: var(--border);
  font-family: 'Press Start 2P', 'C64 Pro Mono', 'Courier New', monospace;
  font-size: clamp(9px, 1.45vw, 12px);
  line-height: 2;
  color: var(--fg);
  -webkit-font-smoothing: none;
  transition: background .4s ease;
}

/* Het "beeldscherm" */
.screen {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: calc(100vh - clamp(20px, 6vw, 88px));
  text-transform: uppercase;        /* de C64 kende alleen hoofdletters */
  padding: clamp(14px, 3vw, 30px);
  background: var(--screen);
  text-shadow: 0 0 6px var(--glow);
  overflow: hidden;
  transition: background .4s ease;
}

/* Scanlines + vignette over het hele scherm */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, .18) 0px,
      rgba(0, 0, 0, .18) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45) 100%);
  animation: flicker 5s infinite steps(60);
  z-index: 20;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: .82; }
  98%           { opacity: 1; }
  99%           { opacity: .9; }
}

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; font-weight: normal; font-size: inherit; }
ul, ol { list-style: none; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--dim);
}
a:hover, a:focus-visible { background: var(--accent); color: var(--screen); outline: none; }

.accent  { color: var(--accent); }
.dim     { color: var(--dim); }
.inverse { background: var(--fg); color: var(--screen); }

.line { white-space: pre-wrap; word-break: break-word; }
.blank { height: 1em; }

/* --- Bootscherm ---------------------------------------------------------- */
#boot { min-height: 60vh; }

.boot-banner {
  color: var(--accent);
  margin-bottom: 1em;
}

/* --- Header / menu ------------------------------------------------------- */
.masthead {
  border: 2px solid var(--fg);
  padding: clamp(10px, 2.5vw, 20px);
  margin-bottom: 1.5em;
}

.masthead .name {
  color: var(--accent);
  font-size: clamp(13px, 3.6vw, 26px);
  line-height: 1.5;
  letter-spacing: .06em;
}

.masthead .role { margin-top: .8em; }

nav.menu {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.2em;
  margin-bottom: 1.6em;
}

.menu button {
  font: inherit;
  color: var(--fg);
  background: none;
  border: none;
  padding: .2em .4em;
  cursor: pointer;
  text-shadow: inherit;
}
.menu button:hover,
.menu button:focus-visible { background: var(--fg); color: var(--screen); outline: none; }
.menu button[aria-current="true"] { background: var(--accent); color: var(--screen); }

/* --- Content ------------------------------------------------------------- */
main { position: relative; z-index: 2; min-height: 40vh; }

.section-title {
  color: var(--accent);
  margin-bottom: 1em;
}

.rule {
  color: var(--dim);
  overflow: hidden;
  white-space: nowrap;
  margin: 1em 0;
}

/* Projectlijst in LOAD"$",8-stijl */
.dir-head { color: var(--accent); margin-bottom: .6em; }

.dir {
  width: 100%;
  border-collapse: collapse;
}
.dir td {
  padding: .15em .6em .15em 0;
  vertical-align: top;
  white-space: nowrap;
}
.dir td.desc { white-space: normal; width: 99%; }
.dir tr { cursor: pointer; }
.dir tr:hover td, .dir tr:focus-visible td { background: var(--fg); color: var(--screen); }
.dir tr:focus-visible { outline: none; }

.status-live    { color: var(--c64-lightgreen); }
.status-beta    { color: var(--accent); }
.status-wip     { color: var(--c64-lightred); }
.status-archief { color: var(--dim); }
[data-theme="green"] .status-live,
[data-theme="green"] .status-beta,
[data-theme="green"] .status-wip,
[data-theme="amber"] .status-live,
[data-theme="amber"] .status-beta,
[data-theme="amber"] .status-wip { color: var(--accent); }

/* Projectdetail */
.tags { margin-top: 1em; color: var(--dim); }

.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .2em 1.2em;
  margin: 1em 0;
}
.meta dt { color: var(--dim); }
.meta dd { margin: 0; }

/* Skills als balk */
.bar {
  display: flex;
  align-items: center;
  gap: .8em;
  margin-bottom: .6em;
  white-space: nowrap;
}
.bar .label { min-width: 12em; }
.bar .track {
  flex: 1;
  max-width: 300px;
  height: 1em;
  border: 2px solid var(--dim);
  padding: 2px;
}
.bar .fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .5s steps(20);
}
.bar .pct { color: var(--dim); min-width: 4em; text-align: right; }

/* Werkervaring */
.job { margin-bottom: 1.4em; }
.job .when { color: var(--dim); }
.job .what { color: var(--accent); }

/* Contact */
.contact-row { display: flex; flex-wrap: wrap; gap: 0 1em; }
.contact-row .label { min-width: 9em; color: var(--dim); }

/* --- BASIC-prompt -------------------------------------------------------- */
.prompt-wrap {
  margin-top: 2em;
  border-top: 2px solid var(--dim);
  padding-top: 1em;
}

.readyline { color: var(--fg); }

.prompt {
  display: flex;
  align-items: baseline;
  gap: .5em;
  margin-top: .4em;
}

.prompt input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  background: none;
  border: none;
  outline: none;
  caret-color: transparent;
  text-shadow: inherit;
  text-transform: uppercase;
}
.prompt input::placeholder { color: var(--dim); opacity: 1; }

.cursor {
  display: inline-block;
  width: .8em;
  height: 1.05em;
  background: var(--fg);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

#log .echo { color: var(--dim); }
#log { margin-bottom: .6em; }

/* --- Footer / statusbalk ------------------------------------------------- */
.statusbar {
  margin-top: 2em;
  padding-top: .8em;
  border-top: 2px solid var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.4em;
  color: var(--dim);
}
.statusbar button {
  font: inherit;
  color: var(--dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-shadow: inherit;
}
.statusbar button:hover, .statusbar button:focus-visible {
  color: var(--screen); background: var(--dim); outline: none;
}

/* --- Toegankelijkheid ---------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .screen::after { animation: none; }
  .cursor { animation: none; }
}

@media (max-width: 560px) {
  body { line-height: 1.9; }
  .bar .label { min-width: 100%; display: block; }
  .contact-row .label { min-width: 100%; }
  .dir td { white-space: normal; }
}