/* ==========================================================================
   Minimal Human Portfolio • tagy
   Curated Theme Palette: Tailwind Harmonized Orange System
   Cohesive, calibrated solid tones with zero transparency and zero highlights
   ========================================================================== */

:root {
  /* Canvas Background: Tailwind Orange 600 (Vibrant, warm, solid) */
  --bg-color: #ea580c;

  /* Boxes / Cards: Tailwind Orange 900 (Deep, solid terracotta orange) */
  --card-bg: #7c2d12;
  /* Card Border: Tailwind Orange 800 (Tone-matched solid border) */
  --card-border: #9a3412;
  
  /* Navigation Bar (Left-aligned, high contrast) */
  --nav-btn-bg: #1c0a03;
  --nav-btn-color: #ffedd5;
  --nav-btn-border: #1c0a03;
  --nav-btn-active-bg: #ffedd5;
  --nav-btn-active-color: #1c0a03;
  --nav-btn-active-border: #ffedd5;

  /* Typography outside cards */
  --heading-outside: #1c0a03;
  --heading-outside-sub: #1c0a03;

  /* Typography inside cards */
  --text-main: #ffffff;
  --text-body: #ffedd5;    /* Tailwind Orange 100: Soft warm cream */
  --text-muted: #fed7aa;   /* Tailwind Orange 200: Soft amber cream */

  /* Action buttons inside cards */
  --btn-bg: #1c0a03;
  --btn-border: #1c0a03;
  --btn-color: #ffffff;

  /* Contact Items */
  --item-bg: #65220c;
  --item-border: #872e10;
  --item-icon-bg: #431407;
  --item-icon-color: #fed7aa;
  --item-tag-bg: #1c0a03;
  --item-tag-color: #ffffff;

  --radius-card: 0px;
  --radius-btn: 0px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------- Reset & Base ---------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0 !important;
}

html, body {
  width: 100%;
  min-height: 100%;
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- Container & Layout (Shifted Left) ---------------- */
.site-container {
  width: 100%;
  max-width: 820px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px 24px 80px 24px;
}

/* ---------------- Top Navigation Bar (Left-aligned & Bigger) ---------------- */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 40px;
  width: 100%;
}

.nav-pill {
  background: var(--nav-btn-bg);
  border: 2px solid var(--nav-btn-border);
  color: var(--nav-btn-color);
  padding: 16px 36px;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  /* Strictly solid: no hover animations, transitions, or highlight jumps */
}

.nav-pill.active {
  background: var(--nav-btn-active-bg);
  color: var(--nav-btn-active-color);
  border-color: var(--nav-btn-active-border);
}

/* ---------------- Content Area & Tabs ---------------- */
.content-wrapper {
  width: 100%;
}

.tab-pane {
  display: none;
  width: 100%;
}

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

/* ---------------- Home Hero Card (Details Left, Photo Right) ---------------- */
.hero-card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hero-name {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin-bottom: 10px;
}

.hero-bio {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 480px;
}

.hero-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.hero-photo-wrapper {
  flex-shrink: 0;
  width: 190px;
  height: 190px;
  background: #000000;
  border: 2px solid var(--btn-border);
  overflow: hidden;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------- Showcase (Projects List) ---------------- */
.showcase-header {
  margin-bottom: 24px;
}

.showcase-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--heading-outside);
  margin-bottom: 6px;
}

.showcase-header p {
  color: var(--heading-outside-sub);
  font-size: 0.95rem;
  font-weight: 600;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.project-entry {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* Strictly solid: no hover highlight, lift, or animation */
}

.project-media {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 0;
  overflow: hidden;
  background: #000000;
  border: 2px solid #571500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-title-row {
  display: flex;
  align-items: center;
}

.project-title-row h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
}

.project-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body);
}

.project-actions {
  margin-top: 4px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 0;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  color: var(--btn-color);
  cursor: pointer;
  /* Strictly solid: no hover glow, border jumps, or color shifts */
}

/* ---------------- Contact Card ---------------- */
.contact-card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 36px 40px;
}

.contact-card h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.contact-card p {
  color: var(--text-body);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.contact-links-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--radius-btn);
  background: var(--item-bg);
  border: 2px solid var(--item-border);
  cursor: pointer;
  text-decoration: none;
  color: var(--text-main);
  /* Strictly solid: no hover highlight, jumps, or animations */
}

.method-icon {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: var(--item-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--item-icon-color);
  flex-shrink: 0;
  margin-right: 14px;
}

.method-icon svg,
.method-icon img {
  width: 20px;
  height: 20px;
}

.modrinth-icon-small {
  object-fit: contain;
}

.method-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.method-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.method-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.copy-tag {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--item-tag-color);
  background: var(--item-tag-bg);
  border: none;
  padding: 6px 12px;
  border-radius: 0;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 680px) {
  .site-container {
    padding: 30px 16px 60px 16px;
  }

  .nav-bar {
    gap: 10px;
  }

  .nav-pill {
    padding: 12px 22px;
    font-size: 1rem;
  }

  .hero-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
  }

  .hero-photo-wrapper {
    width: 140px;
    height: 140px;
  }

  .hero-name {
    font-size: 1.7rem;
  }

  .project-entry {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .contact-card {
    padding: 24px;
  }
}