/* Navigation & Theme Toggle styling 
 * Using !important throughout to override Simple.css defaults
 * This ensures consistent button sizing between nav links and theme toggle */
nav a,
nav #theme-toggle {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  min-width: 0 !important;
  width: auto !important;
  height: 2.2rem !important; /* Fixed height prevents layout shift when icons load */
  padding: 0 15px !important;
  margin: 5px !important;
  border: var(--border-width) solid var(--border) !important;
  border-radius: var(--standard-border-radius) !important;
  background: var(--accent-bg) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: all 0.3s ease !important;
}

/* Icon sizing ensures Font Awesome icons don't cause button width changes */
nav #theme-toggle i {
  width: 1.2rem !important;
  text-align: center !important;
  line-height: 0 !important;
  margin: 0 !important;
}

main img {
  background-color: var(--bg accent) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Hover effect for buttons and links with hover-button class */
.button {
  transition: all 0.3s ease !important;
}

.button:hover {
  transform: translateY(-2px);
}

nav a:hover,
nav #theme-toggle:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: translateY(-2px);
}

/* Mobile nav override - Simple.css removes borders on mobile by default
 * We restore them to maintain visual consistency across breakpoints */
@media only screen and (max-width: 720px) {
  header nav a {
    border: var(--border-width) solid var(--border) !important;
    padding: 0 15px !important;
  }
}

/* Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change:
    opacity, transform; /* Optimizes GPU rendering for smoother animations */
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility: Disable animations for users who prefer reduced motion
 * This respects the prefers-reduced-motion media query per WCAG guidelines */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  nav a:hover,
  nav #theme-toggle:hover {
    transform: none;
  }

  .animate-pop {
    animation: none;
  }
}

/* Theme Variables
 * Light theme uses high contrast for readability
 * Dark theme uses warmer accent (gold) to reduce eye strain */
[data-theme="light"] {
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --accent: #0d47a1;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}

[data-theme="dark"] {
  --bg: #212121;
  --accent-bg: #2b2b2b;
  --text: #dcdcdc;
  --text-light: #ababab;
  --accent: #ffb300; /* Gold instead of blue - warmer and less harsh on eyes */
  --accent-hover: #ffe099;
  --accent-text: var(--bg);
  --code: #f06292;
  --preformatted: #ccc;
  --disabled: #111;
}

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: var(--accent);
  z-index: 1000;
}

/* Vanta background fix - ensure full viewport coverage */
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  background-color: var(--bg) !important;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile - prevents address bar issues */
  margin: 0;
  padding: 0;
}

/* Fixed positioning ensures Vanta canvas stays behind all content
 * Using dvh (dynamic viewport height) prevents iOS Safari scrolling bugs */
.vanta-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Disable Vanta on actual mobile devices (detected via JavaScript)
 * This targets phones and small tablets, not just any small screen
 * Improves performance and battery life on mobile devices */
.is-mobile-device .vanta-canvas {
  display: none !important;
}

.is-mobile-device body {
  background-color: var(--bg) !important;
}

/* Performance: Disable Vanta for users who prefer reduced motion
 * The WebGL animation can cause issues for users with vestibular disorders */
@media (prefers-reduced-motion: reduce) {
  .vanta-canvas {
    display: none !important;
  }
}

/* General Styles */
main a,
footer a {
  text-decoration: none;
  position: relative;
  color: var(--accent);
}

/* Animated underline effect using CSS transforms instead of width
 * Transform is GPU-accelerated and performs better than width transitions */
main a::after,
footer a::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--accent);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

main a:hover::after,
footer a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left; /* Direction change creates smooth left-to-right animation */
}

kbd {
  font-family: inherit;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 5px;
}

/* Date styling (replaces <dt> tag)
 * Using class instead of semantic <dt> because Simple.css has unwanted <dt> styles */
.date {
  color: var(--text-light);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Icon transition animation
 * Used when theme toggle is clicked to provide visual feedback */
@keyframes icon-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8); /* Shrink to 80% before bouncing back */
  }

  100% {
    transform: scale(1);
  }
}

.animate-pop {
  animation: icon-pop 0.4s ease-in-out;
}