/* ==========================================================
   global.css — Asurgo
   Reset, typography, layout, spacing, section backgrounds,
   scroll animations. Import after variables.css.
   ========================================================== */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-dark);
  background: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-blue);
  line-height: 1.15;
}

h1 { font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: 800; }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: 700; }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 700; }
h4 { font-size: var(--text-body); font-weight: 700; }

p {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-dark);
  margin-bottom: 1.2em;
}
p:last-child { margin-bottom: 0; }

/* ---- Layout ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

.container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

/* ---- Section backgrounds ---- */
.section { padding: var(--space-section) 0; }
.section--white  { background: var(--color-white); }
.section--tan    { background: var(--color-tan); }
.section--light  { background: var(--color-light); }
.section--blue   { background: var(--color-blue); color: var(--color-white); }

/* ---- Scroll reveal ---- */
/* JS in main.js adds .is-visible when element enters viewport */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: 0s;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in--left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.75s ease, transform 0.75s ease;
  transition-delay: 0s;
}
.fade-in--left.is-visible { opacity: 1; transform: translateX(0); }

.fade-in--delay-1 { transition-delay: 0.1s; }
.fade-in--delay-2 { transition-delay: 0.2s; }
.fade-in--delay-3 { transition-delay: 0.3s; }
.fade-in--delay-4 { transition-delay: 0.4s; }

/* ---- Utility ---- */
.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;
}

.text-center { text-align: center; }
.text-orange { color: var(--color-orange); }
.text-blue   { color: var(--color-blue); }

/* ---- Eyebrow label (small uppercase label above headings) ---- */
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-sm);
}

/* ---- Accent serif text ---- */
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
}

/* ---- Mobile bottom bar clearance ---- */
/* Prevents .mob-bar from covering page content on small screens */
@media (max-width: 768px) {
  body { padding-bottom: 64px; }
}