/* ==========================================================================
   Base reset, typography, and layout primitives
   Ported from src/styles/globals.css (@layer base) + the Container/Section
   React components. Loaded after variables.css.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--te-navy-900);
  font-family: var(--te-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Tailwind Preflight sets `img,video{height:auto}` — without it, an <img>
   with both width/height HTML attributes keeps the attribute's absolute
   height even when CSS constrains width to a percentage or an aspect-ratio,
   producing a hugely distorted/oversized image (caught live: the homepage
   hero image rendered 580x1067 instead of 580x435, pushing the CTA buttons
   and stat badge ~600px below the fold). */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--te-font-display);
  color: inherit;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Guarantee the native `hidden` attribute always wins over any class that
   sets its own `display` (e.g. .te-form { display: flex }) — otherwise a
   class-based `display` and the UA's `[hidden] { display: none }` tie on
   specificity and the later-loaded rule (ours) silently wins, leaving a
   "hidden" element visible. This was caught live: the Contact form stayed
   visible underneath its own success message until this rule was added. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--te-brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--te-brand-200);
  color: var(--te-navy-950);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Layout primitives (Container.jsx / Section.jsx equivalents)
   -------------------------------------------------------------------------- */

.te-container {
  width: 100%;
  max-width: var(--te-container-max);
  margin-inline: auto;
  padding-inline: var(--te-container-pad);
}

@media (min-width: 640px) {
  .te-container { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
  .te-container { padding-inline: 2.5rem; }
}

.te-section {
  padding-block: 3rem; /* py-12 */
}

@media (min-width: 768px) {
  .te-section { padding-block: 5rem; } /* md:py-20 */
}

@media (min-width: 1024px) {
  .te-section { padding-block: 7rem; } /* lg:py-28 */
}

.te-section--tight {
  padding-block: 2.5rem;
}

@media (min-width: 768px) {
  .te-section--tight { padding-block: 3.5rem; }
}

@media (min-width: 1024px) {
  .te-section--tight { padding-block: 5rem; }
}

.te-section--light { background: #fff; }
.te-section--subtle { background: color-mix(in srgb, var(--te-brand-50) 40%, transparent); }
.te-section--dark { background: var(--te-navy-950); color: #fff; }
.te-section--navy { background: var(--te-navy-900); color: #fff; }
.te-section--cream { background: var(--te-cream-100); }

/* Faint grid texture used behind dark hero/CTA sections. */
.te-bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* --------------------------------------------------------------------------
   Small, genuinely-reused utility set (not a full utility framework —
   only the patterns that recur across many components).
   -------------------------------------------------------------------------- */

.te-eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--te-accent-600);
}

.te-section--navy .te-eyebrow,
.te-section--dark .te-eyebrow,
.te-section--teal-dark .te-eyebrow,
.te-on-dark .te-eyebrow {
  color: var(--te-accent-400);
}

.te-section-heading {
  max-width: 48rem;
}

.te-section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.te-section-heading h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--te-navy-950);
}

@media (min-width: 640px) {
  .te-section-heading h2 { font-size: 2.25rem; }
}

.te-on-dark .te-section-heading h2,
.te-section--navy .te-section-heading h2,
.te-section--dark .te-section-heading h2,
.te-section--teal-dark .te-section-heading h2 {
  color: #fff;
}

.te-section-heading p {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--te-navy-600);
}

.te-section--navy .te-section-heading p,
.te-section--dark .te-section-heading p,
.te-section--teal-dark .te-section-heading p {
  color: rgba(255, 255, 255, 0.7);
}

.te-section--teal-dark { position: relative; overflow: hidden; background: var(--te-brand-800); color: #fff; }

.te-grid {
  display: grid;
  gap: 1.25rem;
}

.te-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.te-skip-link {
  position: fixed;
  left: -9999px;
  top: 0.5rem;
  z-index: 60;
  background: var(--te-brand-600);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--te-radius-lg);
}

.te-skip-link:focus {
  left: 0.5rem;
}