/*
    JP Wales IT - Main Stylesheet
    Color Scheme
    --color-1: #19183B; Dark Navy
    --color-2: #708993; Slate Blue
    --color-3: #A1C2BD; Light Teal
    --color-4: #E7F2EF; Very Light Grey-Green
*/

:root {
  --white: #ffffff;
  --grey-bg: #f3f4f6;
  --light-grey: #e5e7eb;
  --mid-grey: #9ca3af;
  --dark: #111827;
  --text: #374151;
  --accent: #0f62fe;
  --accent-hover: #0043ce;
  --accent-light: #dbeafe;
  --nav-height: 62px;

  /* Legacy Mapping for compatibility while migrating */
  --color-1: var(--dark);
  --color-2: var(--mid-grey);
  --color-3: var(--accent-light);
  --color-4: var(--white);
  --bg-color: var(--grey-bg);
  --color-white: var(--white);
  --color-border: var(--light-grey);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-hero-bg: var(--grey-bg);
}

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

h1, h2, h3, h4, h5, h6,
button, input, textarea, select {
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
  /* Optional: offset if you want nav to permanently take up space, but since nav is sticky, 0 works great */
  scroll-padding-top: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Outfit", sans-serif;
  background-color: var(--bg-color);
  color: var(--color-1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------- */
/*   Simple Dark Theme Footer    */
/* ----------------------------- */
.site-footer {
  background-color: var(--color-1); /* Deep navy */
  color: var(--color-4); /* White */
  padding: 4rem 2rem 2rem;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer-logo {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.footer-logo span {
  color: var(--color-3); /* Light Teal */
}

.footer-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  color: var(--color-2); /* Slate Blue */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--color-4); /* White */
}

.footer-copyright {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  width: 100%;
}


/* -------------------------------- */
/*   Scroll Reveal Animations       */
/* -------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.reveal.delay-1 { transition-delay: 0.15s; }
.reveal.delay-2 { transition-delay: 0.3s; }
.reveal.delay-3 { transition-delay: 0.45s; }

/* -------------------------------- */
/*   Gradient Text Utility          */
/* -------------------------------- */
.gradient-text {
  background: linear-gradient(120deg, var(--accent) 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ------------------- */
/*   Responsive        */
/* ------------------- */
/* Global responsive resets if any */