/* ── Global ─────────────────────────────────────────── */

:root {
  --md-accent-fg-color--transparent: rgba(0, 191, 165, .12);
}

[data-md-color-scheme="slate"] {
  --md-accent-fg-color--transparent: rgba(0, 191, 165, .15);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* ── Typography polish ─────────────────────────────── */

.md-typeset h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}

/* Section headings on subpages styled like the home's "// currently" label */
.md-typeset h2 {
  font-family: "Fira Code", monospace;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--md-accent-fg-color);
  text-transform: lowercase;
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
}

.md-typeset h2::before {
  content: "// ";
}

/* Hide the permalink pilcrow on these label-style headings */
.md-typeset h2 .headerlink {
  display: none;
}

.md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Lede — first paragraph after the page h1 */
.md-typeset h1 + p {
  font-size: 1.2rem;
  line-height: 1.55;
  opacity: .82;
  margin-bottom: 2.75rem;
  max-width: 38rem;
}

/* Body prose */
.md-typeset p,
.md-typeset li {
  font-size: 1rem;
  line-height: 1.7;
}

/* Page-wide ambient gradient — same intensity as the home hero */
body {
  background:
    radial-gradient(ellipse 70% 100% at 18% 22%, rgba(128, 90, 213, .22) 0%, transparent 60%) fixed,
    radial-gradient(ellipse 60% 80% at 88% 85%, rgba(0, 191, 165, .09) 0%, transparent 55%) fixed,
    var(--md-default-bg-color);
}

/* ── Logo as text ─────────────────────────────────── */

.md-header__button.md-logo svg,
.md-header__button.md-logo img {
  display: none;
}

.md-header__button.md-logo::after {
  content: "{blsmth}";
  font-family: "Fira Code", monospace;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Hide the duplicate site name text — {blsmth} logo carries the brand */
.md-header__title {
  display: none;
}

/* ── Navigation: header + tabs both transparent + frosted on every page ── */

.md-header,
.md-tabs,
[data-md-color-scheme="slate"] .md-header {
  background: transparent;
  backdrop-filter: blur(10px);
  box-shadow: none;
  border-bottom: none;
}

/* ── No-sidebar, single-column content layout ──────── */

.md-sidebar--primary,
.md-sidebar--secondary {
  display: none !important;
}

/* Drop the grid max-width so subpage content centers at the viewport level
   (same way the home's .home__inner centers) */
.md-main__inner.md-grid {
  max-width: none;
  margin: 0;
}

/* !important defeats Material's wide-viewport rule
   `.md-sidebar--primary:not([hidden])~.md-content>.md-content__inner { margin-left: 1.2rem }`,
   which still matches because `:not([hidden])` ignores our display:none on the sidebar. */
.md-content__inner {
  max-width: 48rem;
  margin: 0 auto !important;
  padding: 6rem 2rem 7rem;
}

/* ── Top nav tabs strip ────────────────────────────── */

.md-tabs__list {
  margin: 0;
}

.md-tabs__list {
  margin: 0;
}

.md-tabs__item {
  height: 2.4rem;
}

.md-tabs__link {
  font-size: .82rem;
  font-weight: 500;
  margin-top: .85rem;
  opacity: .65;
  transition: opacity .2s, color .2s;
}

.md-tabs__link:hover {
  opacity: 1;
  color: var(--md-accent-fg-color);
}

.md-tabs__link--active {
  opacity: 1;
  color: var(--md-accent-fg-color);
}

/* ── Card utilities for content pages ──────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.card {
  padding: 1.75rem;
  border-radius: .75rem;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

[data-md-color-scheme="slate"] .card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.card h3 {
  margin-top: 0 !important;
  font-size: 1.1rem;
}

.card p {
  margin-bottom: .5rem;
}

/* ── Tag chips ─────────────────────────────────────── */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}

.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .22rem .65rem;
  border-radius: 1rem;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  letter-spacing: .01em;
}

/* ── Timeline for experience page ──────────────────── */

/* Each entry is a rail node — same thin teal left-border treatment
   as the home page's "// currently" list. No card background. */

.md-typeset .timeline-entry {
  position: relative;
  padding: .25rem 0 1.5rem 1.5rem;
  margin-bottom: 1.75rem;
  border-left: 1px solid rgba(0, 191, 165, .3);
  transition: border-left-color .2s, opacity .2s;
  opacity: .92;
}

.md-typeset .timeline-entry:hover {
  border-left-color: var(--md-accent-fg-color);
  opacity: 1;
}

.md-typeset .timeline-entry h3 {
  margin-top: 0 !important;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: .15rem;
}

.md-typeset .timeline-entry p {
  margin: .5rem 0 .75rem;
}

.md-typeset .timeline-entry ul {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
}

.md-typeset .timeline-entry li {
  margin-bottom: .35rem;
  line-height: 1.65;
}

.timeline-meta {
  font-family: "Fira Code", monospace;
  font-size: .78rem;
  opacity: .65;
  margin-bottom: .85rem;
  letter-spacing: .01em;
}

/* ── Contact page social links ─────────────────────── */

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  color: var(--md-typeset-color);
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: transform .2s, box-shadow .2s, border-color .2s, color .2s;
}

.social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

/* ── Footer polish ─────────────────────────────────── */

.md-footer {
  margin-top: 0;
}

/* ── Subtle scroll-in for timeline entries ─────────── */

@media (prefers-reduced-motion: no-preference) {
  .md-typeset .timeline-entry {
    animation: timeline-fade-in .5s ease-out backwards;
  }

  .md-typeset .timeline-entry:nth-child(2) { animation-delay: .05s; }
  .md-typeset .timeline-entry:nth-child(3) { animation-delay: .10s; }
  .md-typeset .timeline-entry:nth-child(4) { animation-delay: .15s; }
  .md-typeset .timeline-entry:nth-child(5) { animation-delay: .20s; }
  .md-typeset .timeline-entry:nth-child(6) { animation-delay: .25s; }
  .md-typeset .timeline-entry:nth-child(7) { animation-delay: .30s; }
  .md-typeset .timeline-entry:nth-child(8) { animation-delay: .35s; }

  @keyframes timeline-fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: .92;
      transform: translateY(0);
    }
  }
}