:root {
  --site-pad: 2rem;
}
@media (max-width: 576px) {
  :root {
    --site-pad: 1.25rem;
  }
}
.site-pad {
  padding-inline: var(--site-pad);
}

:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: #121211;
  --bs-body-color: #fff;
  --bs-border-color: #333;
  --bs-secondary-color: #aaa;
  --bs-navbar-bg: var(--bs-body-bg);
  --bs-navbar-color: var(--bs-body-color);
  --bs-link-color: #f0f0f0;
  --bs-link-hover-color: #bbb;
}

:root[data-bs-theme="light"] {
  color-scheme: light;
  --bs-body-bg: #edeeef;
  --bs-body-color: #000;
  --bs-border-color: #e5e5e5;
  --bs-secondary-color: #666;
  --bs-navbar-bg: var(--bs-body-bg);
  --bs-navbar-color: var(--bs-body-color);
  --bs-link-color: #1f2937;
  --bs-link-hover-color: #000;
}
  
body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.7;
  transition: background-color .18s ease, color .18s ease;
}

.navbar {
  background: var(--bs-navbar-bg);
  --bs-navbar-color: var(--bs-body-color);
  --bs-navbar-brand-color: var(--bs-body-color);
  transition: background-color .18s ease, color .18s ease;
}

a {
  color: var(--bs-link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover,
a:focus-visible {
  color: var(--bs-link-hover-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Resume button — switches color based on theme */
:root[data-bs-theme="dark"] .btn-resume {
  color: #fff;
  border-color: #fff;
}

:root[data-bs-theme="light"] .btn-resume {
  color: #000;
  border-color: #000;
}

/* Hover/focus styles */
:root[data-bs-theme="dark"] .btn-resume:hover,
:root[data-bs-theme="dark"] .btn-resume:focus-visible {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}

:root[data-bs-theme="light"] .btn-resume:hover,
:root[data-bs-theme="light"] .btn-resume:focus-visible {
  color: #fff;
  background-color: #000;
  border-color: #000;
}


footer a {
  color: var(--bs-secondary-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
footer a:hover,
footer a:focus-visible {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Theme toggle button styles */
#themeToggle {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--bs-link-color);        
  cursor: pointer;
  border-radius: .5rem;
  padding: .25rem;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#themeToggle:hover { color: var(--bs-link-hover-color); }
#themeToggle:focus-visible {
  outline: 0;                         
  box-shadow: 0 0 0 2px var(--bs-link-hover-color);
}
#themeToggle #themeIcon {
  color: currentColor;               
  transition: color .15s ease;
}
:root[data-bs-theme="light"] #themeToggle:hover,
:root[data-bs-theme="light"] #themeToggle:focus-visible { background-color: rgba(0,0,0,.06); }
:root[data-bs-theme="dark"] #themeToggle:hover,
:root[data-bs-theme="dark"] #themeToggle:focus-visible { background-color: rgba(255,255,255,.08); }

/* Keep icon color in sync with button color */
#themeToggle #themeIcon {
  color: inherit;
  transition: color .15s ease;
}
/* Explicitly set icon color on hover */
#themeToggle:hover #themeIcon {
  color: var(--link-hover-color) !important;
}
/* Explicitly set icon color on focus */
#themeToggle:focus #themeIcon {
  color: var(--link-color) !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important; 
    animation: none !important;
  }
}

#about nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem; /* tweak to taste */
  align-items: flex-start;
}

#about .col-md-6:first-child {
  padding-bottom: 1rem; /* was 2rem */
}
@media (min-width: 768px) {
  #about .col-md-6:first-child {
    padding-bottom: 0;
  }
}

.project {
    padding-block: 0.5rem;
    border: none;
}
#projects .project + .project {
  margin-top: 3rem;
  padding-top: 3rem;
}

.project-text {
  max-width: 50%;
}

/* For mobile, let it take full width */
@media (max-width: 767.98px) {
  .project-text {
    max-width: 100%;
  }
}

.project-img {
  width: 100%;
  height: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  object-fit: cover;
}

h2, h3 {
  color: var(--bs-secondary-color);
}

p {
  line-height: 1.7;
}