/* ====== Liz Marlowe — Portfolio (External CSS overlay) ======
   Works with the exact HTML you shared. No content changes needed.
   Loads AFTER your current inline <style> so these rules take effect.
============================================================== */

/* --- Design tokens --- */
:root {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e5e7eb;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --note: #0ea5e9;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(16,24,40,.08);
}

/* --- Page background / typography polish --- */
html, body {
  background: var(--bg);
  color: var(--ink);
}

/* keep your existing max-width but allow a bit more room if desired */
.container { max-width: 980px; }

/* --- Headings / text refinements (non-destructive) --- */
h1, h2, h3 { font-weight: 800; line-height: 1.2; }
h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); }
p { color: var(--muted); }
strong { color: var(--ink); }

/* --- Hero keeps your current layout; just subtle spacing --- */
.hero { align-items: center; }
.subtitle { margin-bottom: .25rem; }
.lead { margin-top: .15rem; }

/* --- Buttons (you already have .btn); just refine hover and elevation --- */
.button-row { margin: 1.25rem 0 1.5rem; }
.btn { box-shadow: var(--shadow-sm); }
.btn:hover { transform: translateY(-1px); }
.btn.btn--ghost { border-color: #cfe0ff; color: var(--primary); background: #e8f0ff; }
.btn.btn--ghost:hover { background: #dbe7ff; }

/* --- Carded intro block --- */
.intro {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* --- Global section dividers on H2 (subtle) --- */
h2 {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  width: 100% !important; /* forces full width */
}

/* --- Note/blockquote as a callout --- */
blockquote {
  background: #ffffff;
  border-left: 6px solid var(--note);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
}
blockquote p { margin: 0; color: var(--muted); }

/* =========================
   Documentation Index layout
   ========================= */

/* Keep “Browse by category…” directly under the H2, visually grouped */
section[aria-labelledby="docs-index"] > h2 + p {
  margin-top: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
}

/* Style each .category as a light card */
section[aria-labelledby="docs-index"] > .category {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  margin-top: .75rem; /* slight spacing on mobile */
}
section[aria-labelledby="docs-index"] > .category h3 {
  margin: 0 0 .5rem 0;
  font-size: 1.05rem; /* keep your emoji size feel */
}
section[aria-labelledby="docs-index"] > .category ul {
  margin: .25rem 0 0 1.1rem;
}
section[aria-labelledby="docs-index"] > .category li + li {
  margin-top: .4rem;
}

/* Two-column grid at desktop, full-width heading and intro line */
@media (min-width: 900px) {
  section[aria-labelledby="docs-index"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    grid-auto-flow: row;
  }
  section[aria-labelledby="docs-index"] > h2 { grid-column: 1 / -1; }
  section[aria-labelledby="docs-index"] > h2 + p { grid-column: 1 / -1; }
  /* .category cards automatically flow into two columns */
}

/* =========================
   Remaining sections as cards
   ========================= */
section[aria-labelledby="about-me"] > p,
section[aria-labelledby="skills-tools"] > ul,
section[aria-labelledby="planning-process"] > p,
section[aria-labelledby="planning-process"] > ul,
section[aria-labelledby="about-portfolio"] > ul {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  margin-top: .75rem;
}

/* Contact divider and link polish */
section[aria-labelledby="contact"] > p {
  margin-top: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.dotlinks a { color: var(--primary); }
.dotlinks a:hover { text-decoration: none; color: var(--primary-hover); }
.dotlinks a + a::before { content: " · "; color: var(--muted); }

/* --- Images / avatars --- */
.h1-avatar { box-shadow: var(--shadow-sm); }
.avatar--sm { vertical-align: -.2em; border: 1px solid var(--line); }

/* --- Mobile adjustments --- */
@media (max-width: 480px) {
  .container { padding: 2rem 1rem 3rem; }
  .button-row { gap: .6rem; }
}

/* ==== TWEAKS: Documentation Index spacing, Note alignment, 2x2 card layout ==== */

/* 1) Move the whole Documentation Index section slightly closer to the intro */
section[aria-labelledby="docs-index"] {
  margin-top: -8px;   /* adjust to -6px or -10px if you want a bit more or less */
}

/* 2) Keep the Note block directly UNDER the “Browse by category…” line,
      full-width, aligned with it in the same column span */
section[aria-labelledby="docs-index"] > h2 + p {
  margin-top: .5rem; /* (already carded above) */
}

@media (min-width: 900px) {
  section[aria-labelledby="docs-index"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    grid-auto-flow: row;
  }

  /* H2 and the “Browse by category…” line span both columns (full width) */
  section[aria-labelledby="docs-index"] > h2 { grid-column: 1 / -1; }
  section[aria-labelledby="docs-index"] > h2 + p { grid-column: 1 / -1; }

  /* Make the Note (blockquote) sit right under the browse line, also full width */
  section[aria-labelledby="docs-index"] > blockquote {
    grid-column: 1 / -1;
    margin-top: .75rem;
  }

  /* 3) Force the four category cards into a 2x2 grid in the desired order:
        Row 1: User Guides | API Guides
        Row 2: Knowledge Base Article | Technical Reference Guides
     (Assumes the four .category elements are the next four direct children.) */
  section[aria-labelledby="docs-index"] > .category:nth-of-type(1) { grid-column: 1; } /* User Guides */
  section[aria-labelledby="docs-index"] > .category:nth-of-type(2) { grid-column: 2; } /* API Guides */
  section[aria-labelledby="docs-index"] > .category:nth-of-type(3) { grid-column: 1; } /* Knowledge Base Article */
  section[aria-labelledby="docs-index"] > .category:nth-of-type(4) { grid-column: 2; } /* Technical Reference Guides */
}
``

/* ==== SPACING TIGHTENERS (append-only) ==== */

/* Reduce global <hr> space to bring sections closer */
hr {
  margin: 1rem 0 !important; /* was 2rem in the inline <style> */
}

/* Pull the Documentation Index up a bit relative to the <hr> above it */
hr + section[aria-labelledby="docs-index"] {
  margin-top: 0.5rem; /* gentle nudge */
}

/* Pull the Skills & Tools section closer to the preceding <hr> */
hr + section[aria-labelledby="skills-tools"] {
  margin-top: 0.5rem; /* reduces the big gap before Skills & Tools */
}

/* Optional: tighten the gap after the intro’s <hr> only */
.intro + hr {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* Optional: ensure the first paragraph under each H2 doesn’t add extra top gap */
h2 + p,
h2 + ul {
  margin-top: 0.5rem; /* small, consistent spacing under headings */
}

section[aria-labelledby="docs-index"] hr {
  grid-column: 1 / -1 !important;
}