/* =====================================================================
   Syncraft Electronics — custom styles
   Tailwind handles the bulk of styling via CDN. This file holds:
   - Font-family helpers and base typographic rhythm
   - Scroll-reveal animation utilities (progressive enhancement)
   - A few small component touches that are awkward in utility classes
   ===================================================================== */

:root {
  /* Brand palette — kept in sync with the Tailwind config in each page */
  --se-navy: #0a2540;   /* deep blue primary  */
  --se-blue: #1b4db1;   /* primary blue        */
  --se-accent: #3b82f6; /* lighter blue accent */
  --se-ink: #1e293b;    /* body text           */
  --se-muted: #64748b;  /* secondary text      */
}

/* ---- Base typography ------------------------------------------------ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--se-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display {
  font-family: "Rajdhani", "Inter", system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/* Respect users who jump straight to an in-page anchor: offset for the
   sticky header so headings aren't hidden underneath it. */
:target {
  scroll-margin-top: 6rem;
}

/* ---- Scroll-reveal animation --------------------------------------- */
/* Elements tagged with data-reveal start hidden and fade/slide in once
   they enter the viewport (handled in main.js via IntersectionObserver). */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Honour reduced-motion preferences: no transforms, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Small component touches --------------------------------------- */

/* Keyboard focus ring that matches the brand accent. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--se-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Honeypot field — visually and programmatically hidden from humans,
   still present in the DOM for bots to (hopefully) fill in. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}