/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #008080;
  --color-surface: #c0c0c0;
  --color-window: #c0c0c0;
  --color-border-light: #ffffff;
  --color-border-dark: #808080;
  --color-border-darker: #404040;
  --color-text: #000000;
  --color-text-secondary: #404040;
  --color-primary: #000080;
  --color-title-bar: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  --color-title-text: #ffffff;
  --color-button: #c0c0c0;
}

html {
  font-size: 13px;
}

body {
  font-family: "MS Sans Serif", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.4;
  min-block-size: 100vh;
  padding: 2rem;
}

/* Windows 95 3D Border Mixins via box-shadow */
.win95-outset {
  border: 2px solid;
  border-color: var(--color-border-light) var(--color-border-darker) var(--color-border-darker) var(--color-border-light);
  box-shadow: 
    inset 1px 1px 0 var(--color-border-light),
    inset -1px -1px 0 var(--color-border-dark);
}

.win95-inset {
  border: 2px solid;
  border-color: var(--color-border-darker) var(--color-border-light) var(--color-border-light) var(--color-border-darker);
  box-shadow: 
    inset 1px 1px 0 var(--color-border-dark),
    inset -1px -1px 0 var(--color-border-light);
}

/* Accessibility */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: auto;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  z-index: 100;
  padding: 0.5rem;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.skip-link:focus {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  inline-size: auto;
  block-size: auto;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container - Main Window */
.container {
  max-inline-size: 640px;
  margin-inline: auto;
  background: var(--color-window);
  border: 2px solid;
  border-color: var(--color-border-light) var(--color-border-darker) var(--color-border-darker) var(--color-border-light);
  box-shadow: 
    inset 1px 1px 0 var(--color-border-light),
    inset -1px -1px 0 var(--color-border-dark),
    4px 4px 0 rgba(0, 0, 0, 0.3);
}

.container::before {
  content: "portfolio.exe";
  display: block;
  background: var(--color-title-bar);
  color: var(--color-title-text);
  padding: 3px 6px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0;
}

/* Profile Header */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin: 0.5rem;
  background: var(--color-surface);
  border: 2px solid;
  border-color: var(--color-border-darker) var(--color-border-light) var(--color-border-light) var(--color-border-darker);
}

.avatar {
  inline-size: 80px;
  block-size: 80px;
  border: 2px solid;
  border-color: var(--color-border-darker) var(--color-border-light) var(--color-border-light) var(--color-border-darker);
  image-rendering: pixelated;
}

.profile-info h1 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-block-end: 0.25rem;
  color: var(--color-text);
}

.job-title {
  color: var(--color-text-secondary);
  font-size: 1rem;
}

/* About - Group Box */
.about {
  margin: 0.5rem;
  padding: 1rem;
  padding-block-start: 1.5rem;
  border: 2px solid var(--color-border-dark);
  position: relative;
}

.about::before {
  content: "About";
  position: absolute;
  inset-block-start: -0.6rem;
  inset-inline-start: 0.5rem;
  background: var(--color-surface);
  padding-inline: 0.25rem;
  font-size: 0.9rem;
}

.about p {
  margin-block-end: 0.75rem;
  color: var(--color-text);
}

.about p:last-child {
  margin-block-end: 0;
}

/* Contacts */
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem;
}

.contact-link {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 4px 12px;
  background: var(--color-button);
  border: 2px solid;
  border-color: var(--color-border-light) var(--color-border-darker) var(--color-border-darker) var(--color-border-light);
  box-shadow: 
    inset 1px 1px 0 var(--color-border-light),
    inset -1px -1px 0 var(--color-border-dark);
  cursor: pointer;
}

.contact-link:hover {
  background: var(--color-surface);
}

.contact-link:active {
  border-color: var(--color-border-darker) var(--color-border-light) var(--color-border-light) var(--color-border-darker);
  box-shadow: 
    inset 1px 1px 0 var(--color-border-dark),
    inset -1px -1px 0 var(--color-border-light);
}

/* Tabs */
.tabs-section {
  margin: 0.5rem;
}

.tab-buttons {
  display: flex;
  gap: 2px;
  padding-inline-start: 4px;
  overflow-inline: auto;
  overflow-block: hidden;
}

.tab-button {
  background: var(--color-button);
  border: 2px solid;
  border-color: var(--color-border-light) var(--color-border-darker) var(--color-border-darker) var(--color-border-light);
  border-block-end: none;
  padding: 4px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  inset-block-end: -2px;
}

.tab-button:hover {
  background: #d4d4d4;
}

.tab-button.active {
  background: var(--color-surface);
  border-block-end: 2px solid var(--color-surface);
  z-index: 1;
}

/* Tab Panels */
.tab-panels {
  border: 2px solid;
  border-color: var(--color-border-light) var(--color-border-darker) var(--color-border-darker) var(--color-border-light);
  background: var(--color-surface);
  padding: 1rem;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-panel[hidden] {
  display: none;
}

/* Experience Cards */
.experience-card {
  background: var(--color-surface);
  border: 2px solid;
  border-color: var(--color-border-darker) var(--color-border-light) var(--color-border-light) var(--color-border-darker);
  padding: 0.75rem;
  margin-block-end: 0.75rem;
}

.experience-card:last-child {
  margin-block-end: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block-end: 0.25rem;
}

.card-header h3 {
  font-size: 1rem;
  font-weight: bold;
}

.date-range {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-family: "Courier New", monospace;
}

.subtitle {
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: bold;
  margin-block-end: 0.5rem;
  text-decoration: underline;
}

.description p {
  font-size: 0.95rem;
  margin-block-end: 0.5rem;
  color: var(--color-text);
}

.description p:last-child {
  margin-block-end: 0;
}

/* Badges */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--color-border-dark);
  list-style: none;
}

.badges li {
  display: flex;
  padding: 4px;
  background: white;
  border: 1px solid var(--color-border-dark);
}

.badge-icon {
  inline-size: 20px;
  block-size: 20px;
  image-rendering: auto;
}

/* Footer */
.site-footer {
  max-inline-size: 640px;
  margin-inline: auto;
  padding-block: 1rem;
  text-align: center;
  color: white;
  font-size: 0.85rem;
  text-shadow: 1px 1px 0 #006060;
}

/* Address reset */
address {
  font-style: normal;
}

/* Theme Switcher */
.theme-switcher {
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  z-index: 1000;
}

#theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-button);
  border: 2px solid;
  border-color: var(--color-border-light) var(--color-border-darker) var(--color-border-darker) var(--color-border-light);
  box-shadow: 
    inset 1px 1px 0 var(--color-border-light),
    inset -1px -1px 0 var(--color-border-dark);
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
}

#theme-toggle:active {
  border-color: var(--color-border-darker) var(--color-border-light) var(--color-border-light) var(--color-border-darker);
  box-shadow: 
    inset 1px 1px 0 var(--color-border-dark),
    inset -1px -1px 0 var(--color-border-light);
}

.theme-label {
  color: var(--color-text);
}

#theme-name {
  font-weight: bold;
  color: var(--color-primary);
}

/* Status Bar at bottom of window */
.container::after {
  content: "Ready";
  display: block;
  background: var(--color-surface);
  border: 2px solid;
  border-color: var(--color-border-darker) var(--color-border-light) var(--color-border-light) var(--color-border-darker);
  margin: 0.25rem;
  padding: 2px 6px;
  font-size: 11px;
}

/* Responsive */
@media (max-width: 600px) {
  body {
    padding: 1rem;
  }

  .profile-header {
    flex-direction: column;
  }

  .avatar {
    inline-size: 64px;
    block-size: 64px;
  }

  .profile-info h1 {
    font-size: 1.1rem;
  }

  .contacts {
    flex-direction: column;
  }

  .card-header {
    flex-direction: column;
    gap: 0.25rem;
  }

  .tab-button {
    padding: 4px 10px;
    font-size: 0.85rem;
  }
}