/* ============================================================================
   MITCON Credensia — Base Styles
   ----------------------------------------------------------------------------
   Typography rules, container, grid utilities. Mobile-first.
   No component styling here — those live in /public/css/components/.
   ============================================================================ */

/* ============================================================================
   1. TYPOGRAPHY HIERARCHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-dark);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--fs-4xl);              /* 48px mobile, 56px tablet, scales up */
  font-weight: var(--fw-extra);
}

@media (min-width: 64em) {
  h1 {
    font-size: var(--fs-5xl);             /* 60-72px desktop */
  }
}

h2 {
  font-size: var(--fs-3xl);              /* 36px */
}

@media (min-width: 64em) {
  h2 {
    font-size: var(--fs-4xl);             /* 48-56px desktop */
  }
}

h3 {
  font-size: var(--fs-2xl);              /* 30px */
}

h4 {
  font-size: var(--fs-xl);               /* 24px */
  font-weight: var(--fw-semibold);
}

h5 {
  font-size: var(--fs-lg);               /* 20px */
  font-weight: var(--fw-semibold);
}

h6 {
  font-size: var(--fs-md);               /* 18px */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

p {
  margin-bottom: var(--space-4);
  max-width: var(--measure-normal);      /* WCAG 1.4.8 — 65ch readability */
  color: var(--color-text);
}

p.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* ============================================================================
   2. LINKS (in body content — navbar/footer override these)
   ============================================================================ */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration-thickness: 2px;
}

a:visited {
  color: var(--color-primary);            /* keep brand consistent — don't go purple */
}

/* ============================================================================
   3. INLINE TEXT
   ============================================================================ */
strong, b {
  font-weight: var(--fw-bold);
  color: var(--color-dark);
}

em, i {
  font-style: italic;
}

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

mark {
  background-color: var(--color-warning-bg);
  color: var(--color-dark);
  padding: 0 0.2em;
  border-radius: var(--radius-sm);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-grey-lighter);
  border-radius: var(--radius-sm);
}

code {
  padding: 0.125em 0.375em;
}

pre {
  padding: var(--space-4);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

pre code {
  padding: 0;
  background: transparent;
}

blockquote {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-2) var(--space-6);
  margin: var(--space-6) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ============================================================================
   4. LISTS (in body content — sidebars/menus override)
   ============================================================================ */
ul:not([role="list"]),
ol:not([role="list"]) {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

ul:not([role="list"]) li,
ol:not([role="list"]) li {
  margin-bottom: var(--space-2);
}

dl {
  margin-bottom: var(--space-4);
}

dt {
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  margin-top: var(--space-3);
}

dd {
  margin-left: var(--space-4);
  color: var(--color-text-secondary);
}

/* ============================================================================
   5. HORIZONTAL RULE
   ============================================================================ */
hr {
  border: 0;
  height: 1px;
  background-color: var(--color-grey-light);
  margin: var(--space-8) 0;
}

/* ============================================================================
   6. CONTAINER (centers + constrains content width)
   ============================================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container-narrow {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container-wide {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ============================================================================
   7. SECTION (consistent vertical rhythm — solves "blank space" issue)
   ============================================================================ */
.section {
  padding-block: var(--section-py);
}

.section--alt {
  background-color: var(--color-bg-light);
}

.section--primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.section--primary h1,
.section--primary h2,
.section--primary h3 {
  color: var(--color-text-on-primary);
}

/* ============================================================================
   8. SECTION HEADER (used across home, services, blog)
   ============================================================================ */
.section-header {
  text-align: center;
  max-width: var(--measure-wide);
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.section-header__eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-header__title {
  margin-bottom: var(--space-4);
}

.section-header__lead {
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  max-width: var(--measure-normal);
  margin-inline: auto;
}

/* ============================================================================
   9. RESPONSIVE GRID (CSS Grid — no framework needed)
   ============================================================================ */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40em) {                /* 640px — small tablet */
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {                /* 1024px — desktop */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Auto-fit grid — for cards that should fill space naturally */
.grid--auto {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* ============================================================================
   10. FLEX UTILITIES
   ============================================================================ */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ============================================================================
   11. SPACING UTILITIES (use sparingly — prefer component CSS)
   ============================================================================ */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* ============================================================================
   12. TEXT UTILITIES
   ============================================================================ */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

.text-primary    { color: var(--color-primary); }
.text-accent     { color: var(--color-accent); }
.text-dark       { color: var(--color-dark); }
.text-muted      { color: var(--color-text-muted); }
.text-secondary  { color: var(--color-text-secondary); }

.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-md  { font-size: var(--fs-md); }
.text-lg  { font-size: var(--fs-lg); }
.text-xl  { font-size: var(--fs-xl); }

.font-medium    { font-weight: var(--fw-medium); }
.font-semibold  { font-weight: var(--fw-semibold); }
.font-bold      { font-weight: var(--fw-bold); }

.uppercase     { text-transform: uppercase; letter-spacing: var(--ls-wider); }
.tracking-wide { letter-spacing: var(--ls-wide); }

/* ============================================================================
   13. ASPECT RATIO HELPERS (for cards, video embeds)
   ============================================================================ */
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* ============================================================================
   14. RESPONSIVE VISIBILITY (use sparingly)
   ============================================================================ */
.hidden          { display: none !important; }

@media (max-width: 47.9375em) {
  .hidden-mobile { display: none !important; }
}

@media (min-width: 48em) {
  .hidden-tablet-up { display: none !important; }
}

@media (max-width: 63.9375em) {
  .hidden-tablet { display: none !important; }
}

@media (min-width: 64em) {
  .hidden-desktop { display: none !important; }
}

/* ============================================================================
   15. CONTENT MEASURE (apply to long prose blocks)
   ============================================================================ */
.measure-narrow { max-width: var(--measure-narrow); }
.measure-normal { max-width: var(--measure-normal); }
.measure-wide   { max-width: var(--measure-wide); }