/*
 * base.css — Global Reset & Utilities
 * Depends on: tokens.css
 */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--font-size-md);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height-base);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bottom-nav-h) + 8px);
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-dark);
  margin: 0 0 var(--space-4);
}

p { margin: 0 0 var(--space-4); }

ul, ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ── Layout Helpers ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

@media (max-width: 768px) {
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ── Utility: Screen-reader only ────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Utility: Text truncation ───────────────────────────────────── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Page layout wrapper ────────────────────────────────────────── */
.homemint_page {
  display: flex;
  gap: var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4);
}
.body-left-page { flex: 1; min-width: 0; }
.body-right     { width: var(--sidebar-width); flex-shrink: 0; }

@media (max-width: 1024px) {
  .body-right { display: none; }
}