/* =========================================================================
   NoyMed Academy - Base / reset layer
   Element defaults, resets, accessibility primitives, and layout utilities.
   Load order: tokens.css -> base.css -> components.css -> (marketing|portal).css
   ========================================================================= */

/* ---- Self-hosted fonts (files added in Phase 4 finalisation) --------------
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
-------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

/* `hidden` must always win, even over component rules that set display
   (e.g. .alert { display: flex }). */
[hidden] {
  display: none !important;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-700);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-ink-900);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-500); }

p { max-width: 68ch; }

a {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-700); }

strong, b { font-weight: var(--weight-semibold); color: var(--color-ink-900); }

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

ul, ol { padding-left: 1.25rem; }
li { margin-block: 0.15rem; }

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

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-6);
}

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; }
pre {
  background: var(--color-surface-sunk);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
code:not(pre code) {
  background: var(--color-surface-sunk);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* ---- Forms: inherit typography ---- */
button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: none; }
textarea { resize: vertical; }

table { border-collapse: collapse; width: 100%; }

/* ---- Focus visibility ---- */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Selection ---- */
::selection {
  background: var(--color-primary-100);
  color: var(--color-primary-900);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Layout utilities
   ========================================================================= */

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

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 768px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.section { padding-block: var(--space-10); }
.section--tight { padding-block: var(--space-8); }
.section--alt { background: var(--color-surface); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.text-center { text-align: center; }
.muted { color: var(--color-ink-500); }
.lead { font-size: var(--text-lg); color: var(--color-ink-700); line-height: var(--leading-relaxed); }
.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary-600);
}

/* ---- Accessibility helpers ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: var(--z-toast);
  background: var(--color-primary-700);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); color: #fff; }