/* ==========================================================================
   Custom Font: THSarabun
   ========================================================================== */
@font-face {
  font-family: 'THSarabun';
  src: url('THSarabun.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design System Tokens
   ========================================================================== */
:root {
  /* Spacing Scale: 4, 8, 12, 16, 24, 32, 48 */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* Radius */
  --radius-btn: 6px;
  --radius-card: 8px;
  --radius-tag: 4px;

  /* Border */
  --border-width: 1px;
  --border-color: #443830; /* Dark mode warm brown border */
  --border-light: #DFD5C6; /* Pastel warm light border */

  /* Dark Theme Palette (Warm Dark Espresso / Mocha) */
  --bg-primary: #1C1815;
  --bg-secondary: #27211C;
  --bg-tertiary: #342C25;
  --bg-chip: #2E2721;

  --text-primary: #F7F2EB;
  --text-secondary: #D1C2B4;
  --text-muted: #9E8E82;

  --accent-blue: #DDB892;   /* Pastel Latte Caramel */
  --accent-purple: #D4A373; /* Pastel Warm Sand */
  --accent-green: #A3B18A;  /* Pastel Sage */
  --accent-amber: #E6CCB2;  /* Pastel Warm Cream */

  /* Typography */
  --font-sans: 'THSarabun', 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --lh-tight: 1.4;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --transition: 0.15s ease;
}

/* Light Theme: Pastel Light Brown / Warm Sand / Oat Latte (Default) */
[data-theme="light"] {
  --border-color: #DFD5C6; /* Pastel light brown border */

  --bg-primary: #FBF9F5;   /* Pastel light warm oat linen */
  --bg-secondary: #F3ECE2; /* Pastel soft biscuit / light latte */
  --bg-tertiary: #E8DFD3;  /* Pastel warm sand */
  --bg-chip: #EFE7DC;      /* Pastel warm chip */

  --text-primary: #382E28;   /* Deep warm espresso brown */
  --text-secondary: #6B5B52; /* Warm mocha taupe */
  --text-muted: #9C8C80;     /* Soft hazelnut taupe */

  --accent-blue: #9C6644;   /* Warm Caramel Mocha */
  --accent-purple: #8C5E58; /* Pastel Warm Terracotta */
  --accent-green: #687D59;  /* Pastel Warm Olive Sage */
  --accent-amber: #B87D4B;  /* Pastel Warm Honey */
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Heading Typography: 32 / 28 / 24 / 20 with Line Height: 1.4–1.5 */
h1 {
  font-size: 32px;
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--text-primary);
}

h2 {
  font-size: 28px;
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--text-primary);
}

h3 {
  font-size: 24px;
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--text-primary);
}

h4 {
  font-size: 20px;
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--text-primary);
}

/* Body Typography: 14 / 16 with Line Height: 1.4–1.6 */
p {
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.text-sm {
  font-size: 16px;
  line-height: var(--lh-normal);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-24);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-primary);
  border-bottom: var(--border-width) solid var(--border-color);
  padding: var(--space-12) 0;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
}

.nav-brand {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.nav-brand-tag {
  color: var(--text-muted);
}

.nav-brand:hover {
  text-decoration: none;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--space-24);
  align-items: center;
}

.nav-link {
  font-size: 16px;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Buttons: 6px radius, 1px border */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-btn);
  border: var(--border-width) solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  line-height: var(--lh-tight);
  transition: background-color var(--transition), border-color var(--transition);
}

.btn:hover {
  background: var(--bg-tertiary);
  text-decoration: none;
}

.btn-primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #ffffff;
}

[data-theme="dark"] .btn-primary {
  background: #9C6644;
  border-color: #9C6644;
  color: #ffffff;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-icon {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-btn);
  border: var(--border-width) solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
}

.btn-icon:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.view-mode-pill {
  display: flex;
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-btn);
  padding: 2px;
}

.mode-btn {
  font-size: 16px;
  font-weight: 500;
  padding: var(--space-4) var(--space-12);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.mode-btn.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
}

/* ==========================================================================
   Header / Profile Overview Section
   ========================================================================== */
.profile-header-section {
  padding: var(--space-48) 0 var(--space-32);
  border-bottom: var(--border-width) solid var(--border-color);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-32);
  align-items: flex-start;
}

.profile-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.profile-status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--accent-green);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-green);
}

.profile-name {
  font-size: 32px;
  line-height: var(--lh-tight);
  font-weight: 700;
}

.profile-title {
  font-size: 20px;
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--accent-blue);
}

.profile-bio {
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.profile-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background: var(--bg-chip);
  border: var(--border-width) solid var(--border-color);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-btn);
}

.contact-chip:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  text-decoration: none;
}

/* Quick Spec Sidebar Card: 8px Radius, 1px Border */
.spec-box {
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}

.spec-box-header {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: var(--border-width) solid var(--border-color);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-16);
}

.spec-item {
  margin-bottom: var(--space-16);
}

.spec-item:last-child {
  margin-bottom: 0;
}

.spec-label {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.spec-value {
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text-primary);
  font-weight: 500;
}

/* ==========================================================================
   Section Common Layout
   ========================================================================== */
.section {
  padding: var(--space-48) 0;
  border-bottom: var(--border-width) solid var(--border-color);
}

.section-header {
  margin-bottom: var(--space-24);
}

.section-title {
  font-size: 28px;
  line-height: var(--lh-tight);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-primary);
}

.section-title::before {
  content: '#';
  font-family: var(--font-mono);
  color: var(--accent-blue);
  font-weight: 600;
}

.section-desc {
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin-top: var(--space-4);
}

/* ==========================================================================
   Skills Section (8px Card Radius, 1px Border)
   ========================================================================== */
.skills-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: var(--space-4) var(--space-12);
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-btn);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.filter-btn.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--accent-blue);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-12);
}

.skill-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
}

.skill-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.skill-level-badge {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px var(--space-8);
  border-radius: var(--radius-tag);
}

/* ==========================================================================
   Experience & Extra Projects Cards (8px Radius, 1px Border)
   ========================================================================== */
.entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.entry-card {
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
}

.entry-role {
  font-size: 20px;
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--text-primary);
}

.entry-period {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
}

.entry-company {
  font-size: 16px;
  font-weight: 500;
  color: var(--accent-blue);
  margin-bottom: var(--space-12);
}

.entry-desc {
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-16);
}

.entry-bullets {
  list-style: none;
  margin-bottom: var(--space-16);
}

.entry-bullets li {
  position: relative;
  padding-left: var(--space-24);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.entry-bullets li::before {
  content: '-';
  position: absolute;
  left: var(--space-4);
  color: var(--text-muted);
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-tag);
  background: var(--bg-tertiary);
  border: var(--border-width) solid var(--border-color);
  color: var(--text-secondary);
}

/* ==========================================================================
   Projects Section Cards (8px Radius, 1px Border)
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-24);
}

.project-card {
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
}

.project-category-tag {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--accent-purple);
  margin-bottom: var(--space-8);
}

.project-title {
  font-size: 20px;
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.project-subtitle {
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text-muted);
  margin-bottom: var(--space-12);
}

.project-desc {
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-16);
}

.project-features {
  list-style: none;
  margin-bottom: var(--space-16);
  font-size: 16px;
  color: var(--text-secondary);
}

.project-features li {
  position: relative;
  padding-left: var(--space-16);
  margin-bottom: var(--space-8);
  line-height: var(--lh-normal);
}

.project-features li::before {
  content: '•';
  position: absolute;
  left: var(--space-4);
  color: var(--text-muted);
}

/* ==========================================================================
   Architecture Highlights Section Cards (8px Radius, 1px Border)
   ========================================================================== */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-24);
}

.arch-card {
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}

.arch-title {
  font-size: 20px;
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

.arch-desc {
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ==========================================================================
   Education & Credentials Card (8px Radius, 1px Border)
   ========================================================================== */
.edu-card {
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  padding: var(--space-24);
}

/* ==========================================================================
   Executive Printable CV View (A4 / ATS Friendly Minimalist)
   ========================================================================== */
#cv-view-container {
  display: none;
  padding: var(--space-32) 0;
  background: var(--bg-primary);
}

.cv-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  max-width: 850px;
  margin: 0 auto var(--space-16) auto;
}

.cv-sheet {
  background: #FDFBF8;
  color: #382E28;
  max-width: 850px;
  margin: 0 auto;
  padding: var(--space-48);
  border: var(--border-width) solid #DFD5C6;
  border-radius: var(--radius-card);
  font-size: 16px;
  line-height: var(--lh-normal);
}

.cv-header {
  border-bottom: 2px solid #382E28;
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-24);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cv-name {
  font-size: 28px;
  line-height: var(--lh-tight);
  font-weight: 700;
  color: #382E28;
}

.cv-title {
  font-size: 16px;
  line-height: var(--lh-tight);
  font-weight: 600;
  color: #9C6644;
  margin-top: var(--space-4);
}

.cv-contact-list {
  list-style: none;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 14px;
  color: #6B5B52;
}

.cv-contact-list li {
  margin-bottom: var(--space-4);
}

.cv-section {
  margin-bottom: var(--space-24);
}

.cv-section-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #382E28;
  border-bottom: var(--border-width) solid #DFD5C6;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-12);
}

.cv-skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  font-size: 16px;
  line-height: var(--lh-normal);
}

.cv-skill-cat-title {
  font-weight: 700;
  color: #382E28;
}

.cv-item {
  margin-bottom: var(--space-16);
}

.cv-item:last-child {
  margin-bottom: 0;
}

.cv-item-header {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #382E28;
  font-size: 16px;
}

.cv-item-sub {
  color: #9C6644;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: var(--space-4);
}

.cv-bullet-list {
  padding-left: var(--space-16);
  color: #4F4038;
  font-size: 16px;
}

.cv-bullet-list li {
  margin-bottom: var(--space-4);
  line-height: var(--lh-normal);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  padding: var(--space-24) 0;
  border-top: var(--border-width) solid var(--border-color);
  font-size: 16px;
  color: var(--text-muted);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* ==========================================================================
   Print Stylesheet
   ========================================================================== */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
  }

  .navbar,
  #portfolio-view-container,
  .cv-controls,
  .footer {
    display: none !important;
  }

  #cv-view-container {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .cv-sheet {
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .cv-section {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .nav-menu {
    display: none;
  }

  .cv-header {
    flex-direction: column;
    gap: var(--space-12);
  }

  .cv-contact-list {
    text-align: left;
  }

  .cv-skills-grid {
    grid-template-columns: 1fr;
  }
}