/**
 * TECTRANZ — BASE STYLES (WordPress/Elementor Edition)
 * Reset, typography, utilities, layout helpers
 * NOTE: @import removed — fonts enqueued via functions.php
 * NOTE: Body padding removed — Elementor Pro Theme Builder handles header offset
 */

/* ── RESET ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-gray-100); }
::-webkit-scrollbar-thumb { background: var(--c-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gray-400); }

/* Selection */
::selection { background: var(--c-blue-light); color: var(--c-navy); }

/* ── TYPOGRAPHY ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-navy);
}

h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: var(--fw-black); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.75rem); font-weight: var(--fw-extra); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); font-weight: var(--fw-bold); }
h4 { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: var(--fw-bold); }
h5 { font-size: var(--fs-base); font-weight: var(--fw-semi); }
h6 { font-size: var(--fs-sm); font-weight: var(--fw-semi); }

p { color: var(--c-text); line-height: var(--lh-relaxed); }
p + p { margin-top: var(--sp-4); }

a { color: var(--c-blue); text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--c-blue-dark); }

strong, b { font-weight: var(--fw-semi); }
em, i { font-style: italic; }

small { font-size: var(--fs-sm); color: var(--c-text-muted); }

ul, ol { list-style: none; }

img, video { max-width: 100%; height: auto; display: block; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

input, textarea, select {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  outline: none;
  border: none;
}

/* ── LAYOUT CONTAINERS ────────────────────────── */
.container {
  width: 100%;
  max-width: var(--lay-container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.container-wide {
  width: 100%;
  max-width: var(--lay-wide);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.container-narrow {
  width: 100%;
  max-width: var(--lay-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* ── SECTION BASE ─────────────────────────────── */
section { position: relative; }

.section-pad    { padding-block: var(--section-py); }
.section-pad-sm { padding-block: var(--sp-12); }
.section-pad-lg { padding-block: var(--section-py-lg); }

.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--sp-12);
}

.section-header--left {
  text-align: left;
  margin-inline: 0;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: var(--sp-3);
}

.eyebrow--blue  { color: var(--c-blue); }
.eyebrow--white { color: rgba(255,255,255,0.7); }

.section-title          { margin-bottom: var(--sp-4); color: var(--c-navy); }
.section-title--white   { color: var(--c-white); }

.section-lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
  font-family: var(--f-body);
  font-weight: var(--fw-regular);
}

.section-lead--white { color: rgba(255,255,255,0.75); }

/* ── BACKGROUND VARIANTS ──────────────────────── */
.bg-white { background: var(--c-white); }
.bg-alt   { background: var(--c-bg-alt); }
.bg-tint  { background: var(--c-bg-tint); }
.bg-dark  { background: var(--c-bg-dark); }
.bg-navy  { background: var(--c-navy); }
.bg-blue  { background: var(--g-blue); }
.bg-hero  { background: var(--g-hero); }
.bg-mesh  { background: var(--g-mesh); }

/* Dot grid overlay */
.dot-overlay { position: relative; }
.dot-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.dot-overlay > * { position: relative; z-index: 1; }

/* Grid line overlay */
.grid-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.grid-overlay > * { position: relative; z-index: 1; }

/* ── SKIP NAV ─────────────────────────────────── */
.skip-nav {
  position: fixed;
  top: -100px;
  left: var(--sp-4);
  z-index: 9999;
  background: var(--c-blue);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  transition: top var(--tr-fast);
}
.skip-nav:focus { top: var(--sp-4); outline: 2px solid var(--c-white); }

/* ── UTILITY CLASSES ──────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-white  { color: var(--c-white) !important; }
.text-navy   { color: var(--c-navy) !important; }
.text-blue   { color: var(--c-blue) !important; }
.text-green  { color: var(--c-green) !important; }
.text-muted  { color: var(--c-text-muted) !important; }

.fw-black  { font-weight: var(--fw-black); }
.fw-extra  { font-weight: var(--fw-extra); }
.fw-bold   { font-weight: var(--fw-bold); }
.fw-semi   { font-weight: var(--fw-semi); }
.fw-medium { font-weight: var(--fw-medium); }

.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-block   { display: block; }
.d-none    { display: none; }

.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

.w-full       { width: 100%; }
.h-full       { height: 100%; }
.rounded      { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-full); }

.overflow-hidden { overflow: hidden; }
.relative        { position: relative; }
.absolute        { position: absolute; }

/* ── IMAGE PLACEHOLDERS ───────────────────────── */
.img-placeholder {
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.img-placeholder img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-gray-400);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: rgba(255,255,255,0.8);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-blue-light);
  border-radius: var(--r-lg);
  color: var(--c-blue);
  flex-shrink: 0;
}

/* ── DIVIDERS ─────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--c-border);
  border: none;
  margin-block: var(--sp-8);
}

/* ── FOCUS STYLES ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}