/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Inter:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

/* Basic Reset */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  height: 100%;
  color: #000000;
}

*:focus, *:focus-visible {
  outline: 2px solid #4c3bcf;
  outline-offset: 2px;
}

/* Background Animation */
body {
  background: linear-gradient(45deg, #402e7a, #4c3bcf, #402e7a, #4c3bcf);
  background-size: 200% 200%;
  animation: gradientMove 120s ease infinite;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding-bottom: 5rem;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

h1 {
    color: #ffffff;
  }

  .description {
    color: #ffffff;
  }
  
/* Dark Mode */
body.dark-mode {
  background: #121212;
  color: #e0e0e0;
}

body.dark-mode .logo,
body.dark-mode .nav-links li a,
body.dark-mode .freemoney {
  color: #ffffff;
  text-shadow: 0 0 0.625rem rgba(255, 255, 255, 0.5);
}

body.dark-mode .menu-icon div {
  background-color: #ffffff;
}

body.dark-mode .donation-complete {
  background-color: #2a2a2a !important;
  color: #ffffff;
  border-color: #4a4a4a;
}

body.dark-mode *:focus, body.dark-mode *:focus-visible {
  outline-color: #62d9ff;
}

/* Container */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 5rem;
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Main Content Area */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.5rem 1.25rem;
  width: 90%;
  max-width: 87.5rem;
  margin: 0 auto;
  background-color: transparent;
  border-radius: 0.5rem;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/* Global link styles */
a {
  color: #62d9ff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a:visited {
  color: #62d9ff;
}

a:hover,
a:focus {
  opacity: 0.8;
  text-decoration: underline;
  color: #84dbf8;
}

a:active {
  color: #24baec;
}

/* Text Content */
.text-content {
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  padding: 2.5rem;
  margin-top: 1.25rem;
  width: 100%;
  max-width: 70ch;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.dark-mode .text-content {
  background-color: #2a2a2a;
  color: #e0e0e0;
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.08);
}

.text-content h2 {
  color: #333333;
  margin-top: 0;
}

body.dark-mode .text-content h2 {
  color: #ffffff;
}

.text-content p {
  color: #4a4a4a;
  line-height: 1.6;
}

body.dark-mode .text-content p {
  color: #cccccc;
}

/* Custom Cursors */
.cursor-about { cursor: url('images/about.png') 16 16, auto; }
.cursor-portfolio { cursor: url('images/portfolio.png') 16 16, auto; }
.cursor-ai { cursor: url('images/ai.png') 16 16, auto; }
.cursor-contact { cursor: url('images/contact.png') 16 16, auto; }
.cursor-money { cursor: url('images/Money.png') 16 16, auto; }
.cursor-home { cursor: url('images/house.png') 16 16, auto; }
.cursor-sunglasses { cursor: url('images/sunglasses.png') 16 16, auto; }

/* Mobile Adjustments */
@media (max-width: 48rem) {
  body {
    font-size: 14px;
  }

  .container {
    padding-top: 3.75rem;
  }

  main {
    width: 95%;
    padding: 1.25rem 0.625rem;
  }

  .text-content {
    padding: 1.5rem;
  }
}

/* Prevent layout shifts for images */
img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

/* Improve performance for animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Optimize paint operations */
.nav-links li a {
  will-change: transform;
}

/* Optimize for print */
@media print {
  body {
    background: none;
    color: black;
  }

  .no-print {
    display: none;
  }

  a {
    text-decoration: underline;
    color: black;
  }

  .container {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  @page {
    margin: 2cm;
  }

  body {
    font: 13px Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
  }

  h1 {
    font-size: 24px;
    color: #ffffff;
  }

  h2 {
    font-size: 18px;
    margin-top: 25px;
  }
}

/* Prevent layout shifts for web fonts */
html {
  font-display: optional;
}

/* Ensure smooth scrolling, but respect user preferences */
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Optimize font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Improve form element styling consistency across browsers */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/* Normalize box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Improve tap target sizes for mobile */
nav a,
button {
  min-width: 48px;
  min-height: 48px;
}

/* Optimize image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Hide content visually but keep it available for screen readers */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Fallback for browsers that don't support CSS Grid */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .grid > * {
    flex-basis: calc(33.333% - 20px);
    margin: 10px;
  }
}