/* Warm pixel/retro theme — shared across all pages.
   Headings, labels, and buttons use a pixel font; body text stays readable. */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* ---- Palette (light: black on white, ocean-teal accents) ---- */
:root {
  --page-bg: #ffffff;
  --panel-bg: #ffffff;
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --muted-color: #5f5f5f;
  --link-color: #c2410c;
  --link-hover-color: #9a3412;
  --border-color: #1a1a1a;
  --accent: #f5a84f;
  --accent-2: #ffe3b0;
  --accent-ink: #3a2415;
  --hard-shadow: rgba(26, 26, 26, 0.18);
  --grid-dot: rgba(58, 36, 21, 0.07);
  --deco-1: rgba(245, 140, 40, 0.13);
  --deco-2: rgba(194, 65, 12, 0.11);
  --pixel-font: "Press Start 2P", "Courier New", monospace;
}

/* ---- Palette (dark: white on black, ocean-teal accents) ---- */
[data-theme="dark"] {
  --page-bg: #000000;
  --panel-bg: #000000;
  --bg-color: #000000;
  --text-color: #f2f2f2;
  --muted-color: #b3b3b3;
  --link-color: #ffb366;
  --link-hover-color: #ffcd94;
  --border-color: #f2f2f2;
  --accent: #e0922f;
  --accent-2: #3a2c1c;
  --accent-ink: #2a1a0e;
  --hard-shadow: rgba(242, 242, 242, 0.16);
  --grid-dot: rgba(255, 220, 170, 0.07);
  --deco-1: rgba(224, 146, 47, 0.12);
  --deco-2: rgba(245, 140, 40, 0.09);
}

/* ---- Page (clean black/white with a faint pixel grid) ---- */
body {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(var(--grid-dot) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
  background-position: 0 0;
  color: var(--text-color);
}

body > table {
  width: min(860px, 100%) !important;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  margin: 24px auto 40px;
  position: relative;
  z-index: 1;
}

/* ---- Background decoration: translucent pixel blocks in top corners ---- */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 64px;
  width: 14px;
  height: 14px;
  z-index: 0;
  pointer-events: none;
}

body::before {
  left: 16px;
  background: var(--deco-1);
  box-shadow:
    26px 12px 0 0 var(--deco-1),
    8px 40px 0 0 var(--deco-2),
    52px 30px 0 0 var(--deco-1),
    16px 64px 0 0 var(--deco-1),
    60px 80px 0 0 var(--deco-2),
    0px 104px 0 0 var(--deco-1),
    40px 120px 0 0 var(--deco-1),
    70px 150px 0 0 var(--deco-2),
    12px 176px 0 0 var(--deco-1),
    48px 196px 0 0 var(--deco-1),
    6px 230px 0 0 var(--deco-2),
    64px 250px 0 0 var(--deco-1),
    26px 286px 0 0 var(--deco-1),
    54px 320px 0 0 var(--deco-2),
    14px 356px 0 0 var(--deco-1),
    44px 392px 0 0 var(--deco-1),
    70px 430px 0 0 var(--deco-2),
    22px 470px 0 0 var(--deco-1),
    50px 510px 0 0 var(--deco-1);
}

body::after {
  right: 16px;
  background: var(--deco-2);
  box-shadow:
    -26px 12px 0 0 var(--deco-2),
    -8px 40px 0 0 var(--deco-1),
    -52px 30px 0 0 var(--deco-2),
    -16px 64px 0 0 var(--deco-2),
    -60px 80px 0 0 var(--deco-1),
    -0px 104px 0 0 var(--deco-2),
    -40px 120px 0 0 var(--deco-2),
    -70px 150px 0 0 var(--deco-1),
    -12px 176px 0 0 var(--deco-2),
    -48px 196px 0 0 var(--deco-2),
    -6px 230px 0 0 var(--deco-1),
    -64px 250px 0 0 var(--deco-2),
    -26px 286px 0 0 var(--deco-2),
    -54px 320px 0 0 var(--deco-1),
    -14px 356px 0 0 var(--deco-2),
    -44px 392px 0 0 var(--deco-2),
    -70px 430px 0 0 var(--deco-1),
    -22px 470px 0 0 var(--deco-2),
    -50px 510px 0 0 var(--deco-2);
}

/* ---- Cat chat box: floating + compact ---- */
.site-cat-chat--floating {
  position: fixed !important;
  left: 0;
  top: 0;
  right: auto !important;
  bottom: auto !important;
  margin: 0;
  width: min(280px, calc(100vw - 24px));
  z-index: 1002;
  padding: 10px;
}

.site-cat-chat__label {
  font-size: 9px;
  margin-bottom: 6px;
}

.site-cat-chat__log {
  max-height: 160px;
  gap: 6px;
  margin-bottom: 8px;
}

.site-cat-chat__message {
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 8px;
}

.site-cat-chat__input {
  font-size: 12px;
  padding: 7px 9px;
}

.site-cat-chat__send {
  font-size: 8px;
  padding: 6px 8px;
}

/* ---- Navigation links as pixel buttons ---- */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.nav-links__label {
  width: 100%;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--muted-color);
}

.nav-links a {
  display: inline-block;
  border: 2px solid var(--border-color);
  background: var(--accent-2);
  color: var(--text-color);
  font-family: var(--pixel-font);
  font-size: 8px;
  line-height: 1.5;
  font-weight: 400;
  padding: 7px 9px;
  box-shadow: 3px 3px 0 var(--border-color);
  text-decoration: none;
}

.nav-links a:hover {
  transform: translate(-1px, -1px);
  color: var(--link-color);
  text-decoration: none;
}

/* Inner layout tables stay transparent */
body > table table,
body > table td,
body > table th {
  background: transparent !important;
}

/* ---- Typography ---- */
body,
td,
th {
  color: var(--text-color);
  line-height: 1.5;
}

/* News / experience date column */
body > table td[width="15%"],
body > table td[width="25%"] {
  color: var(--muted-color);
  font-weight: 600;
}

body > table td[width="25%"] strong {
  color: var(--text-color);
}

pageheading {
  display: inline-block;
  font-family: var(--pixel-font);
  font-size: clamp(20px, 4.2vw, 30px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-color);
  text-shadow: 3px 3px 0 var(--accent);
}

sectionheading {
  display: inline-block;
  margin: 6px 0;
  padding: 9px 13px;
  font-family: var(--pixel-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--accent-ink);
  background: var(--accent);
  border: 3px solid var(--border-color);
  box-shadow: 4px 4px 0 var(--border-color);
}

/* Paper / item titles stay in a readable font, just bold + accented */
heading {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--link-color);
}

strong,
strongred {
  color: var(--text-color);
}

em {
  color: var(--muted-color);
}

/* ---- Links ---- */
a {
  color: var(--link-color);
  font-weight: 600;
  text-decoration: none;
}

a:focus,
a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ---- Images: subtle pixel frames on big images (profile + paper thumbnails) ---- */
body > table img[width="100%"] {
  border: 3px solid var(--border-color);
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--hard-shadow);
}

/* ---- Theme toggle button (square pixel) ---- */
.theme-toggle {
  width: 42px;
  height: 42px;
  border: 3px solid var(--border-color) !important;
  border-radius: 0 !important;
  background: var(--accent-2) !important;
  color: var(--text-color) !important;
  box-shadow: 4px 4px 0 var(--border-color) !important;
  font-size: 20px;
}

.theme-toggle:hover {
  transform: translate(-1px, -1px);
  color: var(--link-hover-color) !important;
}

/* ---- Status badges + highlights ---- */
.status-ongoing,
.status-completed,
.status-underreview {
  display: inline-block;
  border: 2px solid var(--border-color);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--border-color);
  font-family: var(--pixel-font);
  font-size: 8px;
  line-height: 1.4;
  padding: 5px 7px;
  vertical-align: middle;
}

.status-ongoing {
  background: var(--accent);
  color: var(--accent-ink);
}

.status-completed {
  background: #2f9e6f;
  color: #fff;
}

.status-underreview {
  background: #2f7fd1;
  color: #fff;
}

.achievement-highlight {
  color: var(--link-color);
  font-weight: 700;
}

/* ---- Recent News date column ---- */
.site-news-date {
  font-family: var(--pixel-font);
  font-size: 9px;
  color: var(--muted-color);
}

/* ---- Footer text ---- */
font[size="2"] {
  color: var(--muted-color);
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
  }

  body::before,
  body::after {
    display: none;
  }

  body > table {
    width: 100% !important;
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--hard-shadow);
    margin: 52px auto 24px;
  }

  /* No side margins on phones, so retire the roaming cat + its UI here */
  .site-cat,
  .site-cat-manual,
  .site-cat-chat--floating {
    display: none !important;
  }

  /* Table-based layout: stack every cell vertically so nothing is cramped */
  body > table table {
    width: 100% !important;
  }

  body > table tr,
  body > table td,
  body > table th {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  body > table td {
    padding: 8px 14px !important;
    text-align: left;
  }

  /* Cap and center big images (profile photo + paper figures) */
  body > table img[width="100%"] {
    display: block;
    width: auto;
    max-width: min(240px, 80%);
    margin: 8px auto;
  }

  /* Center the profile column contents */
  body > table td[width="32%"],
  body > table td[width="33%"],
  body > table td[width="25%"] {
    text-align: center;
  }

  body > table td[width="25%"] {
    padding-top: 14px !important;
    font-weight: 700;
  }

  pageheading {
    text-shadow: 2px 2px 0 var(--accent);
    word-break: break-word;
  }

  sectionheading {
    font-size: 11px;
  }

  heading {
    font-size: 15px;
  }

  .nav-links {
    justify-content: center;
  }

  /* Keep the cat small and unobtrusive on phones */
  .site-cat {
    transform: scale(0.55);
  }

  .site-cat-manual__button {
    font-size: 10px;
    padding: 6px 8px;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}