/* ==========================================================================
   utilities.css
   Single-purpose helper classes reused across many sections: layout
   containers, section spacing/headers, badges, and button variants.
   ========================================================================== */

/* ---- Accessibility ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 10000;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-4); color: var(--color-white); }

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Layout ---- */
.container-xl-custom {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-padding-y); position: relative; }
.section--soft { background-color: var(--color-bg-soft); }
.section--deep {
  background-color: var(--color-bg-deep);
  color: var(--color-white);
}
.section--deep h2, .section--deep h3, .section--deep p { color: var(--color-white); }
.section--deep .lead { color: rgba(255,255,255,0.75); }

/* ---- Section title pattern (eyebrow + heading + subtext) ---- */
.section-title { max-width: 720px; margin-bottom: var(--space-10); }
.section-title--center { margin-inline: auto; text-align: center; }
.section-title__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  background: var(--color-accent-50);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.section-title__heading { margin-bottom: var(--space-3); }
.section-title__desc { color: var(--color-charcoal-muted); font-size: var(--fs-lead); }
.section--deep .section-title__desc { color: rgba(255,255,255,0.7); }

/* ---- Badges ---- */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: var(--radius-btn);
  padding: 0.9rem 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base);
  border: 2px solid transparent;
}
.btn-lg { padding: 1.1rem 2.25rem; font-size: 1.05rem; }
.btn-sm { padding: 0.65rem 1.25rem; font-size: var(--fs-sm); }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-primary);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-3px);
}

.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-accent);
}
.btn-accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); transform: translateY(-3px); }

.btn-outline-secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-charcoal);
}
.btn-outline-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.section--deep .btn-outline-secondary {
  border-color: rgba(255,255,255,0.3);
  color: var(--color-white);
}
.section--deep .btn-outline-secondary:hover { border-color: var(--color-white); background: rgba(255,255,255,0.08); }

/* Call button on the dark Final CTA — solid white pill with blue brand
   text, rather than an outline, so it reads as a second solid action
   next to "Get Instant Quote" instead of a ghost button. */
.final-cta .btn-outline-secondary {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}
.final-cta .btn-outline-secondary:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-bg-soft);
  color: var(--color-primary-dark);
}

/* ---- Cards (shared base) ---- */
.card-soft {
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-soft:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---- Misc ---- */
.hr-soft { border: none; border-top: 1px solid var(--color-border); }
.aspect-1x1 { aspect-ratio: 1 / 1; object-fit: cover; }
.aspect-4x3 { aspect-ratio: 4 / 3; object-fit: cover; }
.rounded-img { border-radius: var(--radius-lg); }