/* Light theme (default) */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --nav-border: oklch(80% 3% 200);
    --nav-hover-bg: oklch(95% 3% 200);
    --current-border: oklch(90% 3% 200);
    color-scheme: light;
}

/* Dark theme */
:root[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --nav-border: oklch(30% 3% 200);
    --nav-hover-bg: oklch(25% 3% 200);
    --current-border: oklch(40% 3% 200);
    color-scheme: dark;
}

/* Auto theme - responds to system preference */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --bg-color: #1a1a1a;
        --text-color: #e0e0e0;
        --nav-border: oklch(30% 3% 200);
        --nav-hover-bg: oklch(25% 3% 200);
        --current-border: oklch(40% 3% 200);
        color-scheme: dark;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    font-family: system-ui, -apple-system, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

img {
    max-width: 300px;
    height: auto;
    border-radius: 8px;
}

.color-scheme {
    position: absolute;
    top: 1rem;     /* Places it 1rem from the top */
    right: 1rem;   /* Places it 1rem from the right */
    font-size: 80%;  /* Makes it a little smaller */
    font-family: inherit; /* Matches the rest of your site */
}

main {
    max-width: 100ch;
    margin-inline: auto;
    padding: 1em;
}
/* Make <ul>/<li> elements behave like contents so all links show in a row */
nav ul,
nav li {
  display: contents;
}

/* Style the nav bar as a horizontal flex container with a bottom border */
nav {
  display: flex;
  border-bottom: 1px solid var(--nav-border); /* Soft accent color line */
  margin-bottom: 1em; /* Adds space below nav */
  --border-color: oklch(50% 10% 200 / 40%);
}

/* Style each navigation link */
nav a {
  flex: 1; /* Makes all links equally wide */
  text-decoration: none; /* Removes underlines */
  color: inherit; /* Uses current text color */
  text-align: center; /* Centers link text */
  padding: 0.5em; /* Adds vertical space */
}

/* Highlight the current page's link with a thicker accent line */
#current {
  border-bottom: 0.4em solid var(--current-border); /* Bright accent */
  padding-bottom: 0.1em;
}

/* On hover, add a matching accent-colored line and subtle highlight */
nav a:hover {
  border-bottom: 0.4em solid var(--color-accent);
  background-color: color-mix(in oklch, var(--color-accent), canvas 85%);
}

/* Accent color setup for matching and customization */
:root {
  --color-accent: oklch(65% 50% 0); /* You can change this value for a different color theme */
}

form {
    display: grid;
    grid-template-columns: auto 1fr; /* label column and input column */
    gap: 1em;                        /* space between rows */
  }
  form label {
    display: contents; /* removes label box so text and input go side by side */
  }
  form input,
  form textarea {
    grid-column: 2;    /* make inputs appear in second column */
    width: 100%;       /* fill the available space */
  }
  form button {
    grid-column: 1 / -1; /* makes button span whole row */
  }
  .projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 1em;
  }
  .projects article {
    display: grid;
    grid-template-rows: subgrid;
  }
  .projects h2 {
    margin: 0; /* Removes extra spacing above/below headings */
  }
  h1 {
    font-size: 400%;        /* Make page title stand out */
  }
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;       /* Reduce vertical spacing on headings */
    text-wrap: balance;     /* Prevent uneven heading lines */
  }