/*
 * main.css — Global Styles & Typography Baseline
 * Teaching Portfolio — Dr. Christopher Teh Boon Sung
 */

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

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

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-on-surface);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

h1 { font-size: var(--text-display-lg); }
h2 { font-size: var(--text-display-sm); }
h3 { font-size: var(--text-heading-lg); }
h4 { font-size: var(--text-heading-md); font-weight: 500; }
h5 { font-size: var(--text-body-lg); font-weight: 600; letter-spacing: 0; }
h6 { font-size: var(--text-body-md); font-weight: 600; letter-spacing: 0; }

p {
  line-height: var(--leading-relaxed);
  max-width: var(--container-prose);
  color: var(--color-on-surface);
}

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

/* ============================================================
   LINKS
   The "Editorial" link — primary color, growing underline on hover
   ============================================================ */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition-fast),
              text-decoration-color var(--transition-fast),
              color var(--transition-fast);
}

a:hover {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--color-accent);
}

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

button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-none);
}

/* ============================================================
   IMAGES
   ============================================================ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0;
}

figcaption {
  font-family: var(--font-label);
  font-size: var(--text-body-md);
  color: var(--color-on-surface-muted);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  margin-top: var(--space-3);
  line-height: var(--leading-snug);
}

/* ============================================================
   LISTS — Editorial styled (scoped to content blocks only)
   Square amber markers (ul) · Typographic counters (ol)
   ============================================================ */

/* --- Unordered: amber square bullet --- */
.block-text ul {
  list-style: none;
  padding-left: 0;
}

.block-text ul > li {
  position: relative;
  padding-left: var(--space-7);
}

.block-text ul > li::before {
  content: '';
  position: absolute;
  left: var(--space-1);
  top: 0.62em;
  width: 7px;
  height: 7px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Ordered: serif counter in accent-dark --- */
.block-text ol {
  list-style: none;
  padding-left: 0;
  counter-reset: list-counter;
}

.block-text ol > li {
  position: relative;
  padding-left: var(--space-8);
  counter-increment: list-counter;
}

.block-text ol > li::before {
  content: counter(list-counter, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--color-accent-dark);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  min-width: var(--space-7);
}

/* --- Shared spacing --- */
.block-text li + li {
  margin-top: var(--space-3);
}

/* Nested lists — indented, slightly smaller marker */
.block-text ul ul,
.block-text ol ol,
.block-text ul ol,
.block-text ol ul {
  margin-top: var(--space-3);
  padding-left: var(--space-6);
}

.block-text ul ul > li::before {
  width: 5px;
  height: 5px;
  top: 0.66em;
  background-color: var(--color-accent-dim);
}

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-text);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

/* Sidebar overlays content — no margin shift needed */

/* ============================================================
   PAGE LOADING STATE
   ============================================================ */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.app-error {
  padding: 4rem 2rem;
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--font-body);
}

.app-error-title {
  font-family: var(--font-display);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.app-error-body {
  color: var(--color-on-surface-muted);
  margin-bottom: 1rem;
}

.app-error-body:last-of-type {
  margin-bottom: 0;
}

.app-error-command {
  display: block;
  background: var(--color-surface-low);
  padding: 1rem;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.app-error-details {
  margin-top: 2rem;
}

.app-error-summary {
  cursor: pointer;
  color: var(--color-on-surface-faint);
  font-size: 0.8rem;
}

.app-error-trace {
  font-size: 0.75rem;
  color: var(--color-on-surface-faint);
  margin-top: 0.5rem;
  white-space: pre-wrap;
}

.loading-mark {
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-surface-high);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   GRAIN TEXTURE OVERLAY
   Subtle SVG noise gives the entire site a premium, printed feel —
   like ink on fine paper rather than pixels on a screen.
   ============================================================ */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url(%23n)%27%2F%3E%3C%2Fsvg%3E");
  opacity: 0.028;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-label);
  font-weight: 700;
  text-decoration: none;
  z-index: var(--z-toast);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: var(--space-4);
}

.noscript-notice {
  padding: 2rem;
  font-family: sans-serif;
  text-align: center;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-display-lg  { font-family: var(--font-display); font-size: var(--text-display-lg); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.text-display-md  { font-family: var(--font-display); font-size: var(--text-display-md); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.text-display-sm  { font-family: var(--font-display); font-size: var(--text-display-sm); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.text-label       { font-family: var(--font-label); font-size: var(--text-label-md); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.text-label-sm    { font-family: var(--font-label); font-size: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.text-muted       { color: var(--color-on-surface-muted); }
.text-accent      { color: var(--color-accent-dark); }
.text-gold        { color: var(--color-accent); }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .container,
  .container-narrow {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

}