/*
  TDY IT Stylesheet
  Cleaned + unified for brand consistency
*/

:root {
  --tdy-dark: #080325;       /* Brand dark */
  --tdy-red: #dc2626;        /* Primary red */
  --tdy-red-dark: #b91c1c;   /* Darker hover red */
}

/* Base */
body {
  color: var(--tdy-dark);
  background-color: #f9fafb; /* Tailwind zinc-50 */
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Header */
header {
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e7; /* zinc-200 */
}

header a {
  color: var(--tdy-dark);
  text-decoration: none;
}

header a:hover {
  color: var(--tdy-red);
}

/* Footer */
footer {
  background-color: #ffffff;
  border-top: 1px solid #e4e4e7;
  color: #52525b; /* zinc-600 */
}

footer a {
  color: var(--tdy-dark);
  text-decoration: none;
}

footer a:hover {
  color: var(--tdy-red);
}

/* CTA buttons */
.btn-primary {
  background-color: var(--tdy-red);
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  display: inline-block;
}

.btn-primary:hover {
  background-color: var(--tdy-red-dark);
}

.btn-outline {
  border: 1px solid var(--tdy-red);
  color: var(--tdy-red);
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  display: inline-block;
}

.btn-outline:hover {
  background-color: var(--tdy-red);
  color: #fff;
}

/* ===== Home hero background — target the actual hero by its Tailwind classes ===== */
html[data-nav="home"] .relative.bg-gradient-to-b.from-white.to-zinc-50 {
  position: relative;
  background: url("/img/TDYIT-BG.png") left center / cover no-repeat !important;
}

/* Soft overlay so text stays readable */
html[data-nav="home"] .relative.bg-gradient-to-b.from-white.to-zinc-50::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.78),
    rgba(255,255,255,0.60)
  );
}

/* Ensure content sits above overlay */
html[data-nav="home"] .relative.bg-gradient-to-b.from-white.to-zinc-50 > * {
  position: relative;
  z-index: 1;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  html[data-nav="home"] .relative.bg-gradient-to-b.from-white.to-zinc-50 {
    background-position: center top !important;
  }
  html[data-nav="home"] .relative.bg-gradient-to-b.from-white.to-zinc-50::before {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.96),
      rgba(255,255,255,0.86),
      rgba(255,255,255,0.72)
    );
  }
}


/* Accessibility (reduced data / high contrast) */
@media (prefers-reduced-data: reduce), (prefers-contrast: more) {
  html[data-nav="home"] body > section:first-of-type {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: #fafafa;
  }
  html[data-nav="home"] body > section:first-of-type::before {
    background: rgba(255,255,255,0.9);
  }
}