/* =============================================================
   GLOBAL.CSS — Resets, base layout, utilities
   ============================================================= */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` (not `hidden`) prevents a horizontal scrollbar WITHOUT turning
     the body into a scroll container, which would break position: sticky
     (sticky navbar + sticky mobile filter bar). */
  overflow-x: clip;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; outline: none; }
ul, ol { list-style: none; }

::selection { background: var(--c-primary); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* Focus visibility for accessibility */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-xs); }

/* ---------- LAYOUT HELPERS ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-6); }
.container-narrow { max-width: var(--container-narrow); }

.page { min-height: 60vh; padding-block: var(--s-8); }
.page-pad { padding-top: var(--s-7); padding-bottom: var(--s-10); }

.section { padding-block: var(--s-9); }
.section-tight { padding-block: var(--s-7); }

.row { display: flex; }
.col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.flex-1 { flex: 1; }
.grid { display: grid; }

/* spacing utilities */
.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}
.mb-1{margin-bottom:var(--s-1)}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}
.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}
.mx-auto{margin-inline:auto}

/* text utilities */
.t-center{text-align:center}.t-right{text-align:right}
.t-muted{color:var(--c-text-soft)}.t-faint{color:var(--c-muted)}
.t-primary{color:var(--c-primary)}.t-success{color:var(--c-success)}
.t-strong{color:var(--c-text-strong)}
.uppercase{text-transform:uppercase;letter-spacing:var(--ls-wide)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.hidden{display:none !important}
.relative{position:relative}
.full-w{width:100%}

/* dividers */
.divider{height:1px;background:var(--c-border);border:none;width:100%}
.dot{width:4px;height:4px;border-radius:50%;background:var(--c-border-strong);display:inline-block}

/* generic grids */
.auto-grid { display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

/* section headers */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-6); }
.section-head h2 { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); color:var(--c-text-strong); }
.section-head .eyebrow { display:block; font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--c-primary); margin-bottom:var(--s-2); }
.section-head .link-more { font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--c-primary); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.section-head .link-more:hover { gap:10px; transition:gap var(--t-base); }

.skip-link { position:absolute; left:-999px; top:0; background:var(--c-ink); color:#fff; padding:10px 16px; z-index:var(--z-max); border-radius:0 0 var(--r-sm) 0; }
.skip-link:focus { left:0; }