/* ─── Catppuccin CSS Variables ──────────────────────────────────── */

[data-theme="mocha"] {
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --text: #cdd6f4;
  --subtext1: #bac2de;
  --subtext0: #a6adc8;
  --lavender: #b4befe;
  --blue: #89b4fa;
  --sapphire: #74c7ec;
  --sky: #89dceb;
  --teal: #94e2d5;
  --green: #a6e3a1;
  --yellow: #f9e2af;
  --peach: #fab387;
  --maroon: #eba0ac;
  --red: #f38ba8;
  --mauve: #cba6f7;
  --pink: #f5c2e7;
  --flamingo: #f2cdcd;
  --rosewater: #f5e0dc;
  --accent: #cba6f7;
  --accent2: #89b4fa;
}

[data-theme="macchiato"] {
  --base: #24273a;
  --mantle: #1e2030;
  --crust: #181926;
  --surface0: #363a4f;
  --surface1: #494d64;
  --surface2: #5b6078;
  --overlay0: #6e738d;
  --overlay1: #8087a2;
  --text: #cad3f5;
  --subtext1: #b8c0e0;
  --subtext0: #a5adcb;
  --lavender: #b7bdf8;
  --blue: #8aadf4;
  --sapphire: #7dc4e4;
  --sky: #91d7e3;
  --teal: #8bd5ca;
  --green: #a6da95;
  --yellow: #eed49f;
  --peach: #f5a97f;
  --maroon: #ee99a0;
  --red: #ed8796;
  --mauve: #c6a0f6;
  --pink: #f5bde6;
  --flamingo: #f0c6c6;
  --rosewater: #f4dbd6;
  --accent: #c6a0f6;
  --accent2: #8aadf4;
}

[data-theme="frappe"] {
  --base: #303446;
  --mantle: #292c3c;
  --crust: #232634;
  --surface0: #414559;
  --surface1: #51576d;
  --surface2: #626880;
  --overlay0: #737994;
  --overlay1: #838ba7;
  --text: #c6d0f5;
  --subtext1: #b5bfe2;
  --subtext0: #a5adce;
  --lavender: #babbf1;
  --blue: #8caaee;
  --sapphire: #85c1dc;
  --sky: #99d1db;
  --teal: #81c8be;
  --green: #a6d189;
  --yellow: #e5c890;
  --peach: #ef9f76;
  --maroon: #ea999c;
  --red: #e78284;
  --mauve: #ca9ee6;
  --pink: #f4b8e4;
  --flamingo: #eebebe;
  --rosewater: #f2d5cf;
  --accent: #ca9ee6;
  --accent2: #8caaee;
}

[data-theme="latte"] {
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
  --surface0: #ccd0da;
  --surface1: #bcc0cc;
  --surface2: #acb0be;
  --overlay0: #9ca0b0;
  --overlay1: #8c8fa1;
  --text: #4c4f69;
  --subtext1: #5c5f77;
  --subtext0: #6c6f85;
  --lavender: #7287fd;
  --blue: #1e66f5;
  --sapphire: #209fb5;
  --sky: #04a5e5;
  --teal: #179299;
  --green: #40a02b;
  --yellow: #df8e1d;
  --peach: #fe640b;
  --maroon: #e64553;
  --red: #d20f39;
  --mauve: #8839ef;
  --pink: #ea76cb;
  --flamingo: #dd7878;
  --rosewater: #dc8a78;
  --accent: #8839ef;
  --accent2: #1e66f5;
}

/* ─── Reset & Base ──────────────────────────────────────────────── */
:root {
  /* --fs = font-size */
  --fs-300: 1rem; /*16px*/
  --fs-400: 1.125rem; /*18px*/
  --fs-500: 1.3125rem; /*21px*/
  --fs-600: 1.5rem; /*24px*/
  --fs-700: 2.25rem; /*36px*/
  --fs-800: 3rem; /*48px*/
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--base);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: var(--fs-400);
  font-weight: 300;
  line-height: 1.6;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
  overflow-x: clip;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;

  &:hover {
    color: var(--accent2);
  }
}

strong {
  font-weight: 500;
  color: var(--text);
}

img {
  max-width: 100%;
  display: block;
}

section {
  padding: 96px 0;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.wrapper {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 2rem;
}

/* ─── Theme Switcher ────────────────────────────────────────────── */

.theme-switcher {
  /* Mobile: visible inside the open drawer */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.9rem 2rem; /* matches nav link <a> padding so the row is the same height */
  border-top: 1px solid var(--surface0);
  transition: border-color 0.35s;

  @media (min-width: 800px) {
    padding: 0;
    border-top: none;
  }
}

/* Mobile-first: themes row is always flex */
.themes {
  list-style: none;
  display: flex;
  gap: 1.25em;
}

.theme-btn {
  position: relative;
  padding-block: 0.8rem;
  padding-inline: 0.8rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s;
  background: none;

  &::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
  }

  &[data-flavor="mocha"]::after {
    background-color: #8839ef;
  }

  &[data-flavor="macchiato"]::after {
    background-color: #c6a0f6;
  }

  &[data-flavor="frappe"]::after {
    background-color: #ca9ee6;
  }

  &[data-flavor="latte"]::after {
    background-color: #e8dff3;
  }

  &:hover {
    transform: scale(1.2);
  }

  &.active {
    border-color: var(--text);
  }
}

.theme-label {
  vertical-align: middle;
  line-height: 0;

  font-family: "DM Mono", monospace;
  font-size: var(--fs-300); /* match nav link font-size on mobile */
  letter-spacing: 0.1em; /* match nav link letter-spacing */
  text-transform: uppercase;
  color: var(--subtext0);
  margin-right: 4px;
  transition: color 0.35s;

  @media (min-width: 800px) {
    font-size: var(--fs-400);
    letter-spacing: 0.08em;
    text-transform: none;
  }
}

/* ─── Nav Dropdown (mobile drawer wrapper) ──────────────────────── */

/* On mobile this is the collapsible drawer container.
   On desktop, display:contents makes it invisible to flexbox so
   nav-links and theme-switcher attach directly to nav-inner as before. */
.nav-dropdown {
  display: none;

  &.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: -2rem;
    right: -2rem;
    background-color: var(--mantle);
    border-top: 1px solid var(--surface0);
    border-bottom: 1px solid var(--surface0);
    z-index: 50;
  }

  @media (min-width: 800px) {
    /* Transparent to flex layout — children become direct flex items of nav-inner */
    display: contents;

    /* Override .open if the menu was left open before resizing to desktop */
    &.open {
      display: contents;
      position: static;
      background: none;
      border: none;
    }
  }
}

/* ─── Navigation ────────────────────────────────────────────────── */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--base);
  border-bottom: 1px solid var(--surface0);
  transition:
    background-color 0.35s,
    border-color 0.35s;
}

.nav-inner {
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.nav-logo {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.35s;
  text-wrap: nowrap;

  span {
    color: var(--accent);
    transition: color 0.35s;
  }
}

/* Mobile-first: nav links flow naturally inside the drawer wrapper */
.nav-links {
  display: flex;
  list-style: none;
  flex-direction: column;
  padding: 1.4rem 2rem; /* slightly roomier than before */
  gap: 0;

  li {
    border-bottom: 1px solid var(--surface0);

    &:last-child {
      border-bottom: none;
    }
  }

  a {
    padding: 0.9rem 0; /* up from 0.75rem */
    font-size: var(--fs-300);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--subtext1);
    transition: color 0.2s;

    &:hover {
      color: var(--text);
    }
  }

  @media (min-width: 800px) {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    background: transparent;
    border: none;
    padding: 0;
    margin-inline: auto;

    li {
      border-bottom: none;
    }

    a {
      padding: 0;
    }
  }
}

/* ─── Nav Theme Item ────────────────────────────────────────────── */

.nav-theme-item {
  /* Mobile: no extra padding — theme-switcher container handles it */
  padding: 0;
  list-style-type: none;
  line-height: 0;

  .theme-switcher {
    justify-content: flex-start;
  }

  @media (min-width: 800px) {
    /* Desktop: inline with the nav links, separated by a subtle border */
    padding: 0;
    padding-inline-start: 20px;
    transition: border-color 0.35s;
  }
}

/* ─── Hamburger Button ──────────────────────────────────────────── */

.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  margin-inline-start: auto; /* pushes hamburger to the far right of the logo */

  span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  &.open {
    span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
  }

  @media (min-width: 800px) {
    display: none;
  }
}

/* ─── Hero ──────────────────────────────────────────────────────── */

#hero {
  padding: 120px 0 96px;
  background-color: var(--base);
  border-bottom: 1px solid var(--surface0);
  transition:
    background-color 0.35s,
    border-color 0.35s;
}

.hero-eyebrow {
  font-weight: bold;
  font-size: var(--fs-500);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 1.125rem;
  transition: color 0.35s;
}

.hero-name {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 24px;
  transition: color 0.35s;

  .highlight {
    color: var(--accent);
    transition: color 0.35s;
  }
}

.hero-tagline {
  font-size: var(--fs-500);
  color: var(--subtext1);
  line-height: 1.7;
  margin-bottom: 40px;
  transition: color 0.35s;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: block;
  align-items: center;
  padding-block: 0.4em;
  padding-inline: 1.1em;
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--base);
  font-weight: 500;

  &:hover {
    background-color: var(--accent2);
    color: var(--base);
  }
}

.btn-ghost {
  background-color: transparent;
  color: var(--subtext1);
  border-color: var(--surface1);

  &:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* --- Passions List --- */
.passions-list {
  list-style-position: inside;
}

/* ─── Section Headers ───────────────────────────────────────────── */

.section-tag {
  font-size: var(--fs-300);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--overlay1);
  margin-bottom: 10px;
  transition: color 0.35s;
}

.section-title {
  font-family: "Syne", sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 48px;
  transition: color 0.35s;
}

.divider {
  border: none;
  border-top: 1px solid var(--surface0);
  margin-bottom: 48px;
  transition: border-color 0.35s;
}

/* ─── About ─────────────────────────────────────────────────────── */

#about {
  background-color: color-mix(in srgb, var(--blue) 7%, var(--mantle));
  border-top: 3px solid var(--blue);
  border-bottom: 1px solid var(--surface0);
  transition:
    background-color 0.35s,
    border-color 0.35s;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;

  @media (min-width: 700px) {
    grid-template-columns: 1fr 1fr;
  }
}

.about-text {
  p {
    color: var(--subtext1);
    margin-bottom: 16px;
    font-size: var(--fs-400);
    transition: color 0.35s;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.about-sidebar {
  padding-top: 32px;
  border-top: 1px solid var(--surface0);
  transition: border-color 0.35s;

  @media (min-width: 700px) {
    padding-top: 0;
    padding-left: 32px;
    border-top: none;
    border-left: 1px solid var(--surface0);
  }
}

.sidebar-block {
  margin-bottom: 32px;

  &:last-child {
    margin-bottom: 0;
  }
}

.sidebar-label {
  font-size: var(--fs-300);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--overlay0);
  margin-bottom: 10px;
  transition: color 0.35s;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: var(--fs-300);
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--surface0);
  color: var(--subtext1);
  transition:
    background 0.35s,
    color 0.35s;
}

/* ─── Projects ──────────────────────────────────────────────────── */

#projects {
  background-color: color-mix(in srgb, var(--mauve) 7%, var(--crust));
  border-top: 3px solid var(--mauve);
  border-bottom: 1px solid var(--surface0);
  transition:
    background-color 0.35s,
    border-color 0.35s;
}

.project-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1px;
}

.project-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--surface0);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.35s;

  &:first-child {
    border-top: 1px solid var(--surface0);
  }

  &:hover {
    .project-name {
      color: var(--accent);
    }

    .project-arrow {
      color: var(--accent);
      transform: translate(3px, -3px);
    }
  }
}

.project-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-name {
  font-family: "Syne", sans-serif;
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--text);
  transition: color 0.35s;
}

.project-desc {
  font-size: var(--fs-300);
  color: var(--subtext0);
  transition: color 0.35s;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-year {
  font-size: var(--fs-300);
  color: var(--overlay0);
  letter-spacing: 0.06em;
  transition: color 0.35s;
}

.project-arrow {
  font-size: var(--fs-300);
  color: var(--overlay0);
  transition:
    color 0.2s,
    transform 0.2s;
}

/* ─── Blog ──────────────────────────────────────────────────────── */

#blog {
  background-color: color-mix(in srgb, var(--teal) 7%, var(--mantle));
  border-top: 3px solid var(--teal);
  border-bottom: 1px solid var(--surface0);
  transition:
    background-color 0.35s,
    border-color 0.35s;
}

.post-list {
  display: flex;
  flex-direction: column;
}

.post-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--surface0);
  text-decoration: none;
  transition: border-color 0.35s;

  &:first-child {
    border-top: 1px solid var(--surface0);
  }

  &:hover {
    .post-title {
      color: var(--accent);
    }
  }
}

.post-title {
  font-size: var(--fs-400);
  color: var(--subtext1);
  transition: color 0.2s;
}

.post-date {
  font-size: var(--fs-300);
  color: var(--overlay0);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.35s;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: var(--fs-300);
  color: var(--accent);
  letter-spacing: 0.04em;

  &:hover {
    color: var(--accent2);
  }
}

/* ─── Contact ───────────────────────────────────────────────────── */

#contact {
  padding-bottom: 120px;
  background-color: color-mix(in srgb, var(--peach) 7%, var(--base));
  border-top: 3px solid var(--peach);
  transition:
    background-color 0.35s,
    border-color 0.35s;
}

.contact-intro {
  font-size: var(--fs-400);
  color: var(--subtext1);
  max-width: 480px;
  margin-bottom: 36px;
  transition: color 0.35s;
}

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

.contact-row {
  display: grid;
  padding: 14px 0;
  border-bottom: 1px solid var(--surface0);
  transition: border-color 0.35s;

  &:first-child {
    border-top: 1px solid var(--surface0);
  }

  &:hover {
    .contact-handle {
      color: var(--accent);
    }
  }
}

.contact-platform {
  font-size: var(--fs-300);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--overlay0);
  transition: color 0.35s;
}

.contact-handle {
  font-size: var(--fs-400);
  color: var(--subtext1);
  transition: color 0.2s;
}

/* ─── Footer ────────────────────────────────────────────────────── */

footer {
  background: var(--mantle);
  border-top: 1px solid var(--surface0);
  padding: 28px 32px;
  transition:
    background 0.35s,
    border-color 0.35s;
}

.footer-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;

  @media (min-width: 700px) {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-copy {
  color: var(--overlay0);
  transition: color 0.35s;
}

.footer-flavor {
  color: var(--overlay0);
  transition: color 0.35s;

  span {
    color: var(--accent);
    transition: color 0.35s;
  }
}

/* ─── Scroll Fade-In ────────────────────────────────────────────── */

.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;

  &.visible {
    opacity: 1;
    transform: translateY(0);
  }
}