@import url('tokens.css');

/* ============================================================
   RESET (Andy Bell modern reset)
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
  overflow-x: hidden; /* prevent horizontal scroll from bleeding elements */
}

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

img, video, svg, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
}

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — hidden until focused */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

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

h1 { font-size: clamp(1.75rem, 3.9vw, 3rem); letter-spacing: var(--tracking-tight); }
h2 { font-size: clamp(1.5rem, 3.3vw, 2.6875rem); letter-spacing: var(--tracking-tight); }
h3 { font-size: clamp(1.375rem, 2.8vw, 2.25rem); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

/* Base paragraph size — 18px across the site.
   Any element with a more-specific class rule (cards, captions,
   labels, footer, etc.) keeps its explicit override. */
p { font-size: var(--text-body); }

/* Prose — long-form reading column */
.prose {
  max-width: var(--width-content);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
}

.prose ul,
.prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }

.prose figure { margin-bottom: var(--space-12); }

.prose figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ============================================================
   LAYOUT — PAGE SHELL
   ============================================================ */

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main { flex: 1; }

.content-column {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.content-column--wide { max-width: var(--width-wide); }
.content-column--full { max-width: var(--width-full); }

.section       { padding-block: var(--space-16); }
.section--sm   { padding-block: var(--space-8); }
.section--lg   { padding-block: var(--space-24); }

/* ============================================================
   GRID UTILITIES
   ============================================================ */

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

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

@media (max-width: 640px) {
  :root { --gutter: var(--space-4); } /* 16px on mobile */
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-neutral-0);
  border-bottom: var(--border-thin);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-12);
  height: 60px;
  gap: var(--space-8);
}

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__logo-img {
  height: 34px;
  width: auto;
}

.site-nav__logo-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__logo:hover .site-nav__logo-name {
  color: var(--color-text-muted);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__links a {
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__links a:hover { color: var(--color-text); }

.site-nav__links a[aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-accent);
}

/* Right group: nav links + icon buttons */
.site-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__icons {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__icon-link:hover { color: var(--color-text); }

.site-nav__icon-link .mdi {
  font-size: 20px;
  line-height: 1;
}

/* Hamburger — hidden on desktop */
.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--color-text);
  line-height: 1;
}

@media (max-width: 640px) {
  .site-nav__toggle  { display: none; }
  .site-nav__links   { display: none; }

  .site-nav__inner {
    justify-content: space-between;
    padding-inline: var(--space-4);
  }

  .site-nav__icons {
    display: flex;
    gap: 0;
    margin-right: calc(-1 * var(--space-2));
  }

  .site-nav__icon-link {
    width: 44px;
    height: 44px;
    justify-content: center;
  }

  .site-nav__icon-link .mdi {
    font-size: 25px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  position: relative;
  z-index: 1;
  background-color: var(--color-neutral-0);
  border-top: var(--border-thin);
  padding-block: var(--space-5);
  margin-top: var(--space-16);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--width-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.site-footer__logo-img {
  height: 28px;
  width: auto;
}

.site-footer__logo-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

.site-footer__logo:hover .site-footer__logo-name {
  color: var(--color-text-muted);
}

.site-footer__copy {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.site-footer__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-end;
}

.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__links a:hover { color: var(--color-link-hover); }

@media (max-width: 640px) {
  .site-footer {
    padding-block-end: var(--space-2);
  }
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: var(--space-3);
  }
  .site-footer__logo  { grid-column: 1; grid-row: 1; }
  .site-footer__links { grid-column: 2; grid-row: 1; }
  .site-footer__copy  {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
    font-size: var(--text-xs);
    margin-top: 6px;
    padding-block-end: var(--space-1);
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */

.text-muted    { color: var(--color-text-muted); }
.text-sm       { font-size: var(--text-sm); }
.text-center   { text-align: center; }
.mt-auto       { margin-top: auto; }
.stack         { display: flex; flex-direction: column; }
.stack--sm     { gap: var(--space-2); }
.stack--md     { gap: var(--space-4); }
.stack--lg     { gap: var(--space-8); }