/* =================================================================
   InCheq Design System - Base Styles
   LOCKED DESIGN SYSTEM - Do not modify without brand approval
   ================================================================= */

/* ============================================================
   FONT LOADING
   Self-host Inter or use Google Fonts
   ============================================================ */

/* Option 1: Google Fonts (uncomment to use) */
/*
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*/

/* Option 2: Self-hosted fonts (place in /fonts directory)
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================================================
   RESET
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  line-height: 1.5;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--ink);
  background-color: var(--mist);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Headings - Georgia, left-aligned, 600-700 weight, never all-caps */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--ink);
  text-align: left;
  text-transform: none; /* NEVER all-caps */
}

/* Primary page heading - fluid scaling */
h1 {
  font-size: var(--text-5xl);        /* clamp(32px → 48px) */
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-fluid-md);
  line-height: 1.1;
}

/* Section headings - fluid scaling */
h2 {
  font-size: var(--text-4xl);        /* clamp(28px → 36px) */
  font-weight: var(--weight-bold);
  margin-top: var(--space-fluid-xl);
  margin-bottom: var(--space-fluid-sm);
}

/* First h2 on page or in section (no top margin) */
h2:first-of-type,
section > h2:first-child,
.container > h2:first-child {
  margin-top: 0;
}

/* Subsection headings - fluid scaling */
h3 {
  font-size: var(--text-2xl);        /* clamp(20px → 24px) */
  font-weight: var(--weight-semibold);
  margin-top: var(--space-fluid-lg);
  margin-bottom: var(--space-4);
}

/* Card titles and inline section headers - fluid scaling */
h4 {
  font-size: var(--text-xl);         /* clamp(18px → 20px) */
  font-weight: var(--weight-semibold);
  margin-top: var(--space-fluid-md);
  margin-bottom: var(--space-3);
}

/* Small callouts */
h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body text - Inter, 16px minimum */
p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  color: var(--ink);
}

/* Lead paragraphs - 18px */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* Small text */
small, .text-sm {
  font-size: var(--text-sm);
}

/* Strong/bold - Inter medium or semibold */
strong, b {
  font-weight: var(--weight-semibold);
}

/* Emphasis */
em, i {
  font-style: italic;
}

/* Numbers - can be 600-700 weight */
.number, .metric {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--dark-teal);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: all var(--transition-base);
}

a:hover {
  color: var(--incheq-blue);
  text-decoration-color: currentColor;
}

a:visited {
  color: var(--incheq-blue);
}

a:focus {
  outline: 2px solid var(--incheq-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   LISTS
   ============================================================ */

ul, ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-normal);
}

/* ============================================================
   IMAGES
   ============================================================ */

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

/* ============================================================
   FOCUS STATES
   ============================================================ */

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

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--incheq-blue);
  outline-offset: 2px;
}

/* ============================================================
   SKIP LINK (Accessibility)
   ============================================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--pure-white);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: none;
}

/* ============================================================
   CONTAINER
   ============================================================ */

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-xl);      /* 1280px - DEFAULT */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-fluid-md); /* Fluid: 16px → 32px */
  padding-right: var(--space-fluid-md);
}


/* Use for: Text-heavy content, FAQs, long-form articles */
.container-narrow {
  max-width: var(--container-lg);      /* 1024px */
}

/* Use for: Forms, single-column focused content */
.container-focused {
  max-width: var(--container-md);      /* 768px */
}

/* Use for: Wide feature grids, data displays */
.container-wide {
  max-width: var(--container-2xl);     /* 1536px */
}

/* Use for: Hero sections, full-width panels */
.container-full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   RESPONSIVE CONTENT WIDTHS
   Replace inline max-width styles with responsive classes
   ============================================================ */

/* Text content - max 700px on desktop, full width on mobile */
.content-text {
  width: 100%;
  max-width: 700px;
}

/* Medium content - max 800px on desktop, full width on mobile */
.content-medium {
  width: 100%;
  max-width: 800px;
}

/* Wide content - max 900px on desktop, full width on mobile */
.content-wide {
  width: 100%;
  max-width: 900px;
}

/* Standardized breakpoint: Remove max-width constraints on mobile (below 640px) */
@media (max-width: 639px) {
  .content-text,
  .content-medium,
  .content-wide {
    max-width: none;
  }
}

/* ============================================================
   FULL-WIDTH SECTION WRAPPER (explicit only)
   ============================================================ */

.section-full {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   CONTENT SPLIT LAYOUT (text + images side-by-side)
   ============================================================ */

.content-split {
  display: grid;
  gap: var(--space-fluid-xl); /* 32px → 64px */
  align-items: start;
  margin-top: var(--space-fluid-lg); /* 24px → 48px */
}

/* Desktop: side-by-side layout */
@media (min-width: 1024px) {
  .content-split {
    grid-template-columns: 1.5fr 1fr; /* 60% text, 40% images */
  }
}

/* Mobile: stack vertically, images first for visual impact */
@media (max-width: 1023px) {
  .content-split {
    grid-template-columns: 1fr;
  }

  /* Reverse order on mobile: show images above text */
  .content-split-images {
    order: -1;
  }
}

.content-split-text {
  /* Text content inherits from parent */
}

.content-split-images {
  display: flex;
  flex-direction: column;
  gap: var(--space-fluid-md); /* 16px → 32px gap between images */
}

.workplace-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   SECTION RHYTHM - ENHANCED SYSTEM (FLUID)
   ============================================================ */

/* Default section spacing - now fluid */
section {
  padding-top: var(--section-padding-fluid-normal);    /* clamp(48px → 64px) */
  padding-bottom: var(--section-padding-fluid-normal);
}

/* Explicit rhythm classes - fluid */
.section-compact {
  padding-top: var(--section-padding-fluid-compact);    /* clamp(32px → 48px) */
  padding-bottom: var(--section-padding-fluid-compact);
}

.section-normal {
  padding-top: var(--section-padding-fluid-normal);     /* clamp(48px → 64px) */
  padding-bottom: var(--section-padding-fluid-normal);
}

.section-spacious {
  padding-top: var(--section-padding-fluid-spacious);   /* clamp(64px → 96px) */
  padding-bottom: var(--section-padding-fluid-spacious);
}

/* First section after hero (reduce top padding) */
.hero + section {
  padding-top: var(--section-padding-fluid-normal);
}

/* Breakpoint: Tablet → Desktop (1024px) - add extra spacing after hero */
@media (min-width: 1024px) {
  .hero + section {
    padding-top: var(--section-padding-fluid-spacious);
  }
}


/* ============================================================
   UTILITY: VISUALLY HIDDEN
   ============================================================ */

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