/**
 * style.css
 * Everything here is stuff Tailwind's utility classes can't express on
 * their own: scroll-reveal transition states, smooth-scroll behavior,
 * focus/accessibility polish, and brand CSS variables for anything that
 * ends up outside the Tailwind config (e.g. inline SVGs, print styles).
 *
 * Layout, spacing, and color are handled by Tailwind classes directly in
 * the HTML — keep new rules here scoped to things Tailwind can't do.
 */

:root {
  --color-navy: #0B2447;
  --color-navy-deep: #071A33;
  --color-blue: #2F8FFF;
  --color-blue-tint: #EAF3FF;
  --color-ink: #0A0E17;
  --color-white: #FFFFFF;

  --reveal-duration: 600ms;
  --reveal-distance: 24px;
}

/* -----------------------------------------------------------------------
   Smooth-scroll for in-page anchors
   ----------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* keeps anchored sections clear of the fixed header */
}

/* -----------------------------------------------------------------------
   Scroll-reveal (fade + slide-up on section entry)
   Toggled by IntersectionObserver in animations.js, which adds
   .reveal-visible when an element enters the viewport.
   ----------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) ease-out,
              transform var(--reveal-duration) ease-out;
  will-change: opacity, transform;
}

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

/* -----------------------------------------------------------------------
   Respect reduced-motion preference at the CSS level too, in addition to
   the JS check in animations.js that skips the IntersectionObserver
   entirely. Belt-and-suspenders: if JS is slow to run, content is still
   visible and unanimated rather than stuck at opacity: 0.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal-visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* -----------------------------------------------------------------------
   Focus visibility — Tailwind's default outline is easy to lose against
   the navy/white palette, so this makes keyboard focus unmistakable
   without relying on browser default styles.
   ----------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -----------------------------------------------------------------------
   Text selection color, matched to brand
   ----------------------------------------------------------------------- */
::selection {
  background-color: var(--color-blue);
  color: var(--color-white);
}

/* -----------------------------------------------------------------------
   Print styles — nav and decorative chrome have no place on a
   printed page (e.g. a printed blog article or product spec sheet).
   ----------------------------------------------------------------------- */
@media print {
  header,
  footer {
    display: none !important;
  }
}


/* ===== Responsive hardening ===== */
/* Stop iOS from inflating text after rotation; keep layout from scrolling sideways */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Media and embeds never exceed their container */
img, svg, video, canvas, iframe {
  max-width: 100%;
}
img, video {
  height: auto;
}

/* Long words, emails and URLs wrap instead of pushing the page wide */
h1, h2, h3, h4, p, li, a {
  overflow-wrap: anywhere;
}
/* ...but keep short nav/button labels intact */
nav a, button, .inline-flex {
  overflow-wrap: normal;
}

/* Nicer line breaks in headings on narrow screens */
h1, h2 {
  text-wrap: balance;
}

/* Notched phones: keep the fixed header and footer clear of cutouts / home bar
   (needs viewport-fit=cover in each page's viewport meta) */
#site-header {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
footer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mobile menu: scrolls on short/landscape screens instead of being cut off */
#mobile-menu {
  max-height: calc(100vh - 4rem - env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - 4rem - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mobile-menu a, #mobile-menu button {
  min-height: 44px;
  display: flex;
  align-items: center;
}
#mobile-menu a.justify-center {
  justify-content: center;
}
#mobile-products-trigger {
  justify-content: space-between;
}

/* Touch devices: comfortable tap targets, no sticky hover states */
@media (pointer: coarse) {
  footer ul a {
    display: inline-block;
    padding-block: 0.375rem;
  }
  #mobile-menu-trigger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Phones: 16px form controls prevent iOS Safari's zoom-on-focus */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
  }
  input[type="file"] {
    font-size: 14px !important;
    max-width: 100%;
  }
}

/* Very small phones (<= 360px): tighten gutters and section spacing */
@media (max-width: 360px) {
  .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .py-24 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .p-8 {
    padding: 1.5rem;
  }
}

/* Charts: shorter on phones so they don't dominate the screen */
@media (max-width: 639px) {
  .h-56 {
    height: 14rem;
  }
}

/* Wide tables stay readable and scroll inside their own box */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}
.overflow-x-auto table {
  min-width: 34rem;
}

/* Landscape phones: reduce the tall fixed-header offset on heroes */
@media (max-height: 480px) and (orientation: landscape) {
  .pt-32 {
    padding-top: 6rem;
  }
}

/* Large screens: cap line length on long-form reading pages */
@media (min-width: 1536px) {
  html {
    font-size: 17px;
  }
}