/* Resume layout and typography — Phase 2 (reference layout); Phase 6 (theme) */
/* Refactored: DRY + BEM */

/* ----- Theme: CSS custom properties (DRY: one palette per theme) ----- */
:root {
  --color-bg: #f5f5f5;
  --color-surface: #fff;
  --color-text: #222;
  --color-text-muted: #333;
  --color-text-meta: #555;
  --color-border: #bbb;
  --color-border-hover: #999;
  --color-on-dark: #fff;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    "Courier New", monospace;
  --section-gap: 1.25rem;
  --grid-gap: 1rem 2rem;
  --grid-cols-narrow: minmax(0, 11rem) 1fr;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #1a1a1a;
    --color-surface: #2d2d2d;
    --color-text: #e5e5e5;
    --color-text-muted: #d4d4d4;
    --color-text-meta: #b0b0b0;
    --color-border: #555;
    --color-border-hover: #777;
    --color-on-dark: #222;
  }
}

[data-theme="light"] {
  --color-bg: #f5f5f5;
  --color-surface: #fff;
  --color-text: #222;
  --color-text-muted: #333;
  --color-text-meta: #555;
  --color-border: #bbb;
  --color-border-hover: #999;
  --color-on-dark: #fff;
}

[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-surface: #2d2d2d;
  --color-text: #e5e5e5;
  --color-text-muted: #d4d4d4;
  --color-text-meta: #b0b0b0;
  --color-border: #555;
  --color-border-hover: #777;
  --color-on-dark: #222;
}

/* ----- Base ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.55;
}

/* ----- Utilities ----- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-text);
  color: var(--color-on-dark);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

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

/* Shared label style (DRY: portfolio heading, skills category name) */
.label,
.portfolio__heading,
.skills__category-name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.35em;
  color: var(--color-text-meta);
}

/* Shared list reset (DRY) */
.experience__list,
.skills__list,
.recognitions__list,
.education__list,
.languages__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Shared prose paragraph (DRY: entry desc/body, side-project desc) */
.entry__desc p,
.entry__body p,
.side-project__desc p {
  margin: 0 0 0.5em;
}

.entry__desc p:last-child,
.entry__body p:last-child,
.side-project__desc p:last-child {
  margin-bottom: 0;
}

/* ----- Block: .resume ----- */
.resume {
  max-width: 52rem;
  margin: 1.5rem auto;
  padding: 1.5rem 1.25rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.resume__main {
  padding: 0;
  padding-top: var(--section-gap);
  border-top: 1px solid var(--color-border);
  margin-top: 0;
}

.resume main section {
  padding-top: 0;
}

.resume main section + section,
.resume main section + .aside-row,
.resume main .aside-row + section,
.resume main section + .edu-lang-row,
.resume main .aside-row + .edu-lang-row,
.resume main .edu-lang-row + section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--section-gap);
  margin-top: 0;
}

@media (max-width: 767px) {
  .resume {
    margin: 0;
    border: none;
    max-width: none;
  }
}

@media (min-width: 768px) {
  .resume {
    padding: 1.75rem 2rem;
  }
}

@media (min-width: 1024px) {
  .resume {
    padding: 2rem 2.5rem;
  }
}

/* ----- Block: .resume__header ----- */
.resume__header {
  margin-bottom: 1.75rem;
}

.resume__header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.15em;
  line-height: 1.2;
  color: var(--color-text);
}

.resume__tagline {
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

.resume__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
}

.resume a[href] {
  color: inherit;
  text-decoration: none;
}

.resume__contact-sep {
  color: var(--color-text-meta);
  margin-right: 0.25rem;
  user-select: none;
}

/* ----- Section headings ----- */
h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 1.75rem 0 0.6em;
  line-height: 1.3;
  color: var(--color-text);
}

h2:first-of-type {
  margin-top: 0;
}

section {
  margin-bottom: 1.5rem;
}

section:last-of-type {
  margin-bottom: 2rem;
}

/* ----- Block: .intro ----- */
.intro {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.intro--two-col {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .intro--two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.intro__summary p,
.intro__skills .skills__list {
  margin: 0 0 0.5em;
  font-size: 0.9375rem;
}

/* ----- Block: .portfolio ----- */
.portfolio {
  margin-top: 1rem;
}

.portfolio__link {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text);
  word-break: break-all;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

/* Link hover: only for pointer devices, not when printing */
@media (hover: hover) and (pointer: fine) {
  .resume a[href]:hover {
    text-decoration: underline;
  }
}

.portfolio__qr {
  display: block;
  width: 88px;
  height: 88px;
  border: 1px solid var(--color-border);
}

/* ----- Block: .skills ----- */
.skills__category {
  margin-bottom: 1rem;
}

.skills__category:last-of-type {
  margin-bottom: 0;
}

.skills__category-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: var(--color-text);
}

.skills__list {
  margin-top: 0.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem 0.5rem;
  font-size: 0.9375rem;
}

.skills__chip {
  display: inline-block;
  margin: 0;
  padding: 0.25em 0.9em;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 0.875em;
}

/* ----- Block: .experience ----- */
.experience__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ----- Block: .entry ----- */
.entry {
  display: grid;
  gap: var(--grid-gap);
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .entry {
    grid-template-columns: var(--grid-cols-narrow);
    align-items: start;
  }
}

.entry:last-child {
  margin-bottom: 0;
}

.entry__dates,
.entry__main,
.entry__info {
  min-width: 0;
}

.entry__title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.2em;
  color: var(--color-text);
}

.entry__meta {
  font-size: 0.875rem;
  margin: 0 0 0.15em;
  color: var(--color-text-muted);
}

.entry__header .entry__meta {
  margin: 0 0 0.5em;
}

.entry__desc,
.entry__body {
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.entry__body {
  margin-top: 0.5em;
}

/* ----- Block: .side-project ----- */
.side-project {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.side-project__title-wrap {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 1rem;
  margin: 0;
}

.side-project__title {
  font-weight: 700;
  color: var(--color-text);
}

.side-project__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-meta);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.side-project__desc {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.side-project .skills__list {
  margin: 0;
}

/* ----- Block: .aside-row ----- */
.aside-row {
  display: grid;
  gap: var(--grid-gap);
  margin-bottom: 1.5rem;
}

.aside-row section {
  margin-bottom: 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .aside-row {
    grid-template-columns: 3fr 2fr; /* 60% side projects, 40% recognitions */
  }

  .resume main .aside-row section + section {
    border-top: none;
    padding-top: 0;
  }
}

@media print {
  .resume main .aside-row section + section {
    border-top: none;
    padding-top: 0;
  }

  .aside-row {
    grid-template-columns: 3fr 2fr; /* 60% side projects, 40% recognitions */
  }
}

/* ----- Block: .recognitions ----- */
.recognitions h2 {
  margin-top: 0;
}

.recognitions__list {
  margin: 0 0 0.5em;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

.recognitions__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35em;
}

.recognitions__item:last-child {
  margin-bottom: 0;
}

.recognitions__title {
  flex: 1;
  min-width: 0;
}

.recognitions__count {
  flex-shrink: 0;
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* ----- Block: .read-more (web only; print shows all, no button) ----- */
.read-more__row {
  list-style: none;
}

.read-more__trigger {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-border);
  padding: 0.35em 0.75em;
  cursor: pointer;
  border-radius: 2px;
  margin-top: 0.5em;
}

.read-more__trigger:hover {
  border-color: var(--color-border-hover);
}

.read-more__trigger:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.read-more__extra {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}

.read-more__extra--expanded {
  max-height: 3000px;
  transition: max-height 0.4s ease-in;
}

.read-more__extra .read-more__entry {
  margin-top: var(--section-gap);
}

.read-more__extra .read-more__entry:first-child {
  margin-top: 0;
}

/* ----- Block: .edu-lang-row ----- */
.edu-lang-row {
  display: grid;
  gap: var(--grid-gap);
  margin-bottom: 1.5rem;
}

.edu-lang-row section {
  margin-bottom: 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .edu-lang-row {
    grid-template-columns: 1fr 1fr; /* 50/50 */
  }

  .resume main .edu-lang-row section + section {
    border-top: none;
    padding-top: 0;
  }
}

@media print {
  .resume main .edu-lang-row section + section {
    border-top: none;
    padding-top: 0;
  }

  .edu-lang-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----- Block: .education (simplified list) ----- */
.education__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.education__entry {
  margin: 0;
}

.education__line {
  font-size: 0.9375rem;
  margin: 0 0 0.15em;
  color: var(--color-text);
}

.education__year {
  font-size: 0.875rem;
  margin: 0;
  color: var(--color-text-muted);
}

/* ----- Block: .languages ----- */
.languages h2 {
  margin-top: 0;
}

.languages__list {
  margin: 0 0 0.5em;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}

.languages__item {
  margin-bottom: 0.35em;
}

.languages__item:last-child {
  margin-bottom: 0;
}

/* ----- Block: .toolbar ----- */
.toolbar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .toolbar {
    top: 1.25rem;
    right: 1.25rem;
  }
}

.toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.toolbar__btn:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border-hover);
}

.toolbar__btn:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.toolbar__btn--theme .toolbar__icon--sun {
  display: none;
}

.toolbar__btn--theme .toolbar__icon--moon {
  display: block;
}

.toolbar__btn--theme.toolbar__btn--show-sun .toolbar__icon--sun {
  display: block;
}

.toolbar__btn--theme.toolbar__btn--show-sun .toolbar__icon--moon {
  display: none;
}

.toolbar__btn--theme.toolbar__btn--show-moon .toolbar__icon--sun {
  display: none;
}

.toolbar__btn--theme.toolbar__btn--show-moon .toolbar__icon--moon {
  display: block;
}

/* ----- Print ----- */
@media print {
  .toolbar {
    display: none !important;
  }

  .read-more__trigger {
    display: none !important;
  }

  .read-more__extra {
    display: block !important;
    max-height: none !important;
    overflow: visible;
  }

  body {
    background-color: #fff;
    color: #222;
    margin: 0.75in;
  }

  .resume {
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: none;
  }

  main {
    max-width: none;
    margin: 0;
    background-color: #fff;
    border-top: 1px solid #ccc;
    padding-top: 1.25rem;
  }

  main section + section {
    border-top: 1px solid #ccc;
    padding-top: 1.25rem;
    margin-top: 0;
  }

  /* Keep divider with Side projects (and Recognitions) when page breaks before .aside-row */
  .resume main section + .aside-row {
    border-top: none;
    padding-top: 0;
  }

  .resume main .aside-row > section:first-child {
    border-top: 1px solid #ccc;
    padding-top: 1.25rem;
    margin-top: 0;
  }

  @page {
    size: letter;
    margin: 0;
  }

  .entry,
  .side-project,
  section {
    break-inside: avoid;
  }

  h2 {
    break-after: avoid;
  }

  .resume__header h1,
  .entry__title,
  .entry__info .entry__title,
  h2 {
    color: #222;
  }

  .entry__meta,
  .entry__info .entry__meta,
  .resume__contact span,
  .resume__contact a {
    color: #333;
  }

  .resume a[href]:hover {
    text-decoration: none;
  }
}