/* Theme Variables - Inherit from Theme Defaults */
:root {
  --highlight-color: var(--color-primary); /* Inherits theme's light primary (Red) */
  --color-background: #f8f2e3; /* Sepia background */
}

/* Override for dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --highlight-color: var(--color-primary-dark); /* Inherits theme's dark primary (Green) */
  }
}

/* Force dark theme color if toggled via JS */
body.dark {
  --highlight-color: var(--color-primary-dark);
}

/* Force light theme color if toggled via JS */
body:not(.dark) {
   --highlight-color: var(--color-primary);
}

/* Global font size override */
html {
    font-size: 15px !important; /* Default is 15px, adjust as needed */
}

/* Profile picture in header */
.profile-pic-link {
  border-bottom: none;
  display: flex;
}

.profile-pic-link:hover,
.profile-pic-link:focus {
  background-color: transparent;
  outline: none;
}

.profile-pic {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-border);
}

header.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 2rem;
}

header.site-header .branding {
  display: flex;
  align-items: center;
}

header.site-header .branding .site-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Prevents title from stretching to subtitle width */
  line-height: 1.15;
}
header.site-header .branding .site-text .site-title {
  font-size: 1.65rem;
  font-weight: 600;
  text-decoration: none;
  border-color: var(--color-border);
}

header.site-header .branding .site-text .subtitle {
  margin-top: 4px;
  font-size: 0.95rem;
  color: #333;
}

nav.main-nav {
  display: flex;
  align-items: flex-start;
  /* gap: 1.1rem; */
  margin-top: 2.9rem; /* aligns with centered title baseline */
}

nav.main-nav a {
  display: inline-block;
  line-height: 1.5;
  text-decoration: none;
  font-size: 0.9rem;
  position: relative;
  /* border-color: var(--color-border); */

}

nav.main-nav .nav-toggle {
  margin-left: 0.5rem;
}