/* ==========================================================================
   IGrow Design System — Minimal Reset
   Deliberately light-touch so it co-exists with WordPress / GeneratePress
   defaults. Drop this in BEFORE components.css if you control the page;
   skip it if you're injecting components into a host theme.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-fg-default);
  background: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: don't reset margins to zero — they're context dependent.
   Components that need precise spacing use the .ig-h* utility classes. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

a {
  color: var(--color-fg-link);
  text-decoration: none;
  transition: color var(--duration-base) var(--easing-standard);
}
a:hover { color: var(--color-fg-link-hover); }
a:focus-visible { outline: 0; box-shadow: var(--ring-default); border-radius: var(--radius-sm); }

img, svg, video { display: block; max-width: 100%; height: auto; }

button { font-family: inherit; }

/* Form controls inherit type by default — WordPress themes love to break this. */
input, button, textarea, select { font: inherit; color: inherit; }

/* Accessible visually-hidden helper. Use for skip-links and form-helper text
   that should be readable by AT but not visible. */
.ig-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip-link — paired with `<a class="ig-skip-link" href="#main">` */
.ig-skip-link {
  position: absolute;
  top: -100px; left: var(--space-4);
  background: var(--color-brand-dark);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  z-index: var(--z-toast);
  transition: top var(--duration-base) var(--easing-standard);
}
.ig-skip-link:focus { top: var(--space-4); color: var(--color-white); }
