/*
 * Neobrutalist portfolio UI experiment — calebstallard.com
 * Design reference: https://github.com/ekmas/neobrutalism-components (MIT)
 * This is a dependency-free CSS adaptation of the design language, NOT
 * a direct import of the React/Tailwind component package.
 *
 * Intentionally does not alter the user's original SnapMol JPG, individual
 * project logos, drag/resize/close logic, or desktop icon placement.
 */
:root {
  --neo-ink: #1c3049;
  --neo-blue: #93c7e8;
  --neo-green: #a9dcb9;
  --neo-cream: #f7f7f0;
  --neo-stone: #e8ecee;
  --neo-muted: #c8d6dc;
  --neo-white: #fff;
  --neo-highlight: #0c78b8;
  --neo-red: #e58f89;
  --neo-hard-shadow: 4px 4px 0 var(--neo-ink);
  --neo-small-shadow: 3px 3px 0 var(--neo-ink);
  --xp-blue: var(--neo-highlight);
  --xp-border: var(--neo-ink);
  --xp-panel: var(--neo-cream);
  --xp-text: var(--neo-ink);
}
body { background: var(--neo-ink); }
#taskbar {
  flex: 0 0 50px;
  height: 50px;
  background: var(--neo-stone);
  border-top: 3px solid var(--neo-ink);
  box-shadow: none;
  padding: 0 4px 0 5px;
  gap: 5px;
}
#start-button {
  align-self: center;
  height: 37px;
  min-width: 93px;
  padding: 0 13px;
  background: var(--neo-green);
  color: var(--neo-ink);
  border: 2px solid var(--neo-ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--neo-ink);
  text-shadow: none;
  font: 700 14px Tahoma, Arial, sans-serif;
  font-style: normal;
  letter-spacing: -.015em;
  gap: 8px;
}
#start-button:hover,#start-button[aria-expanded=true] {
  filter: none;
  background: #c2edc9;
  box-shadow: 1px 1px 0 var(--neo-ink);
  transform: translate(2px,2px);
}
.start-symbol { width: 17px; height: 17px; gap: 2px; transform: none; }
.start-symbol i { border-radius: 1px; }
.start-symbol i:nth-child(1){background:var(--neo-ink)}
.start-symbol i:nth-child(2){background:#0c78b8}
.start-symbol i:nth-child(3){background:#119b45}
.start-symbol i:nth-child(4){background:var(--neo-ink)}
#quick-launch { display:none; }
#taskbar-windows { gap: 8px; padding: 0 6px 0 10px; }
.task-window {
  height: 34px;
  padding: 0 10px;
  border: 2px solid var(--neo-ink);
  border-radius: 3px;
  background: var(--neo-white);
  color: var(--neo-ink);
  box-shadow: 2px 2px 0 var(--neo-ink);
  font-weight: 700;
  min-width: 46px;
}
.task-window:hover { background: #ecf7f3; }
.task-window.active {
  background: var(--neo-blue);
  border-color: var(--neo-ink);
  color: var(--neo-ink);
  box-shadow: 2px 2px 0 var(--neo-ink);
}
#system-tray {
  background: transparent;
  border-left: 2px solid var(--neo-ink);
  box-shadow: none;
  color: var(--neo-ink);
  padding: 0 13px;
  font-weight: 700;
}
#show-desktop {
  width: 14px;
  background: var(--neo-blue);
  border-left: 2px solid var(--neo-ink);
}
#show-desktop:hover {background:#c1e3f7}
#start-menu {
  border: 3px solid var(--neo-ink);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: var(--neo-cream);
  box-shadow: 5px -5px 0 var(--neo-ink);
  color: var(--neo-ink);
}
.start-head {
  background: var(--neo-blue);
  border-bottom: 3px solid var(--neo-ink);
  color: var(--neo-ink);
}
.start-head strong { color: var(--neo-ink); font-size: 16px; }
.start-head img {
  background:var(--neo-cream);
  border:2px solid var(--neo-ink);
  border-radius:3px;
}
.start-left { background: var(--neo-cream); }
.start-right {
  background: #deece9;
  border-left: 2px solid var(--neo-ink);
}
.start-foot {
  background: var(--neo-ink);
  color: var(--neo-white);
  border-top: 2px solid var(--neo-ink);
}
.start-entry,.side-entry {
  border-radius:3px;
  border:2px solid transparent;
  color:var(--neo-ink);
}
.start-entry:hover,.side-entry:hover {
  background: var(--neo-green);
  border-color: var(--neo-ink);
  color: var(--neo-ink);
}
.start-entry strong,.side-entry {font-weight:700}
.menu-eyebrow{color:#43566a;letter-spacing:.075em}
.xp-window {
  background: var(--neo-cream);
  border: 3px solid var(--neo-ink);
  border-radius: 5px 5px 3px 3px;
  box-shadow: 6px 6px 0 var(--neo-ink);
}
.xp-window.active {box-shadow: 7px 7px 0 var(--neo-ink);}
.xp-titlebar {
  background: var(--neo-blue);
  border-bottom: 3px solid var(--neo-ink);
  border-radius: 0;
  color: var(--neo-ink);
}
.xp-window:not(.active) .xp-titlebar {background:var(--neo-muted);}
.titlebar-caption,.titlebar-text {color:var(--neo-ink);text-shadow:none;font-weight:700}
.window-controls button {
  border: 2px solid var(--neo-ink);
  border-radius: 2px;
  background: var(--neo-cream);
  box-shadow: 1px 1px 0 var(--neo-ink);
  color: var(--neo-ink);
  text-shadow: none;
}
.window-controls button[data-window-action=close] {
  background: var(--neo-red);
  border-color: var(--neo-ink);
  color:var(--neo-ink);
}
.window-controls button:hover{filter:brightness(1.07)}
.window-main,.window-main.no-padding {
  background: var(--neo-cream);
  color: var(--neo-ink);
}
.content-pad h2,.project-detail-header h2,.quick-heading h2 {
  color:var(--neo-ink);
  font-weight:700;
}
.content-pad,.explorer-content { color:var(--neo-ink); }
.info-card,.tile-btn,.contact-box,.project-item {
  border:2px solid var(--neo-ink);
  border-radius:3px;
  background:var(--neo-white);
  box-shadow:var(--neo-small-shadow);
}
.tile-btn:hover,.project-item:hover {
  background:#dff3ec;
  border-color:var(--neo-ink);
}
.tile-btn strong,.info-card h4 {color:var(--neo-ink)}
.quick-visit {
  background:var(--neo-green);
  border:2px solid var(--neo-ink);
  border-radius:3px;
  color:var(--neo-ink);
  box-shadow:var(--neo-hard-shadow);
  text-shadow:none;
}
.quick-visit:hover {
  background:#bdebd0;
  color:var(--neo-ink);
  text-decoration:none;
  box-shadow:1px 1px 0 var(--neo-ink);
  transform:translate(3px,3px);
}
.xp-button,.xp-button.primary {
  background: var(--neo-blue);
  border:2px solid var(--neo-ink);
  border-radius:3px;
  color:var(--neo-ink);
  box-shadow:2px 2px 0 var(--neo-ink);
  font-weight:700;
}
.xp-button:hover,.xp-button.primary:hover {
  background: #bfebf4;
  border-color:var(--neo-ink);
}
.window-toolbar,.address-bar {
  background:#edf4ef;
  border-bottom:2px solid var(--neo-ink);
}
.win-toolbar-btn {color:var(--neo-ink);font-weight:700}
.win-toolbar-btn:hover{background:var(--neo-green)}
.address-bar .path {
  background:var(--neo-white);
  border:2px solid var(--neo-ink);
  color:var(--neo-ink);
}
.file-item {color:var(--neo-ink)}
.file-item:hover,.file-item:focus-visible {
  background:#dcf1e7;
  border-color:var(--neo-ink);
}
.explorer-side .side-box,.context-menu {
  background:var(--neo-cream);
  border:2px solid var(--neo-ink);
  border-radius:2px;
}
.context-menu {box-shadow:4px 4px 0 var(--neo-ink)}
.context-menu button:hover {background:var(--neo-green);color:var(--neo-ink)}
.desktop-icon:hover,.desktop-icon:focus-visible {
  border-color:var(--neo-white);
  background:#1c30492b;
}
.desktop-icon .icon-text {
  background:rgba(18,39,55,.81);
  border:1px solid #e5f6f155;
  border-radius:2px;
  text-shadow:none;
  padding:2px 5px;
}
button:focus-visible,a:focus-visible {
  outline:3px solid #119b45;
  outline-offset:3px;
}
@media (max-width:740px) {
  #taskbar{flex-basis:47px;height:47px;padding:0 2px}
  #start-button{height:35px;min-width:82px;padding:0 8px;font-size:12px;box-shadow:2px 2px 0 var(--neo-ink)}
  #system-tray{padding:0 7px}
  #taskbar-windows{gap:4px;padding:0 5px}
  .task-window{height:33px;padding:0 6px;box-shadow:1px 1px 0 var(--neo-ink)}
  .xp-window{box-shadow:3px 3px 0 var(--neo-ink)}
  .xp-window.active{box-shadow:3px 3px 0 var(--neo-ink)}
  .info-card,.tile-btn,.contact-box{box-shadow:2px 2px 0 var(--neo-ink)}
  #start-menu{max-width:calc(100vw - 8px);box-shadow:3px -3px 0 var(--neo-ink)}
}
@media (prefers-reduced-motion: reduce) {
  #start-button:hover,.quick-visit:hover {transform:none}
}