/* =====================================================================
   blog.davidlindin.com — modern style layer
   Dark / techy / distinctive + magazine-style blog index.
   Pure additive overrides on top of MkDocs Material. Safe to delete.
   ===================================================================== */

/* ----- 1. Design tokens --------------------------------------------- */
:root {
  --dl-accent:        #5eead4;   /* teal — security/dev identity */
  --dl-accent-2:      #818cf8;   /* indigo secondary */
  --dl-radius:        14px;
  --dl-radius-sm:     10px;
  --dl-maxw:          820px;     /* comfortable reading measure */
  --md-text-font:     "Inter";
  --md-code-font:     "JetBrains Mono";
}

/* Map our accent onto Material's primary/accent in dark (slate) scheme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #0b0f14;
  --md-primary-fg-color--light: #11161d;
  --md-primary-fg-color--dark:  #070a0e;
  --md-accent-fg-color:         var(--dl-accent);
  --md-default-bg-color:        #0b0f14;
  --md-typeset-a-color:         var(--dl-accent);
  --md-code-bg-color:           #0e141b;
  --md-code-fg-color:           #d6deeb;
}

[data-md-color-scheme="slate"] body {
  background:
    radial-gradient(1100px 600px at 85% -8%, rgba(94,234,212,.07), transparent 60%),
    radial-gradient(900px 600px at 5% 0%, rgba(129,140,248,.06), transparent 55%),
    var(--md-default-bg-color);
}

/* ----- 2. Typography ------------------------------------------------ */
.md-typeset {
  font-feature-settings: "cv05", "ss01", "liga";
  letter-spacing: -0.003em;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  letter-spacing: -0.02em;
  font-weight: 700;
}
.md-typeset h1 { line-height: 1.12; }

/* Comfortable reading width for article bodies (not the blog index) */
.md-content article.md-content__inner > * {
  max-width: var(--dl-maxw);
}
.md-content article.md-content__inner > .md-post,
.md-content article.md-content__inner > .md-post-list { max-width: none; }

/* ----- 3. Header / nav -------------------------------------------- */
.md-header {
  backdrop-filter: blur(10px);
  background: rgba(11, 15, 20, 0.72);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: none;
}
.md-tabs { background: transparent; }
.md-tabs__link { opacity: .8; font-weight: 500; }
.md-tabs__link--active,
.md-tabs__link:hover { opacity: 1; }

/* Accent underline on hover for body links */
.md-typeset a {
  text-decoration: none;
  background-image: linear-gradient(var(--dl-accent), var(--dl-accent));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .22s ease;
}
.md-typeset a:hover { background-size: 100% 1.5px; }

/* ----- 4. Magazine-style blog index ------------------------------- */
/* Material's blog plugin renders each entry as article.md-post--excerpt */
.md-post--excerpt {
  position: relative;
  margin: 0 0 1.6rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--dl-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.md-post--excerpt:hover {
  border-color: rgba(94,234,212,.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -18px rgba(94,234,212,.35);
}
.md-post--excerpt::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--dl-accent), var(--dl-accent-2));
  opacity: .0;
  transition: opacity .2s ease;
}
.md-post--excerpt:hover::before { opacity: 1; }

.md-post--excerpt .md-post__header { margin-bottom: .35rem; }
.md-post--excerpt .md-post__meta {
  font-family: var(--md-code-font), monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}
.md-post--excerpt .md-post__title,
.md-post--excerpt h2 {
  margin: .1rem 0 .4rem;
  font-size: 1.35rem;
  line-height: 1.2;
}
.md-post--excerpt h2 a { color: var(--md-default-fg-color); }
.md-post--excerpt h2 a:hover { color: var(--dl-accent); }
.md-post--excerpt .md-post__content > p { opacity: .85; }

/* "Continue reading" as a pill */
.md-post__action a,
.md-post--excerpt .md-post__more a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .4rem;
  padding: .35rem .8rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(94,234,212,.35);
  color: var(--dl-accent);
  background: rgba(94,234,212,.06);
}
.md-post__action a:hover,
.md-post--excerpt .md-post__more a:hover {
  background: rgba(94,234,212,.14);
}

/* Tags as chips */
.md-typeset .md-tag {
  background: rgba(129,140,248,.12);
  border: 1px solid rgba(129,140,248,.25);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .02em;
}

/* ----- 5. Code blocks --------------------------------------------- */
[data-md-color-scheme="slate"] .md-typeset pre > code,
[data-md-color-scheme="slate"] .md-typeset .highlight {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--dl-radius-sm);
}
.md-typeset code {
  border-radius: 5px;
  font-size: .82em;
}

/* ----- 6. Hero landing page (used by index.md) -------------------- */
.dl-hero {
  margin: 1.2rem 0 2.4rem;
  padding: 2.6rem 0 2rem;
}
.dl-hero__eyebrow {
  font-family: var(--md-code-font), monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dl-accent);
  opacity: .9;
}
.md-typeset .dl-hero__title {
  margin: .5rem 0 .6rem;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #e8eef6 30%, var(--dl-accent) 75%, var(--dl-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dl-hero__lead {
  max-width: 640px;
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: .82;
}
.dl-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.4rem;
}
.md-typeset .dl-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .62rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  background-image: none;          /* kill the underline-link bg trick */
}
.md-typeset .dl-btn--primary {
  background: linear-gradient(120deg, var(--dl-accent), var(--dl-accent-2));
  color: #07120f;
}
.md-typeset .dl-btn--primary:hover { filter: brightness(1.08); }
.md-typeset .dl-btn--ghost {
  border: 1px solid rgba(255,255,255,.16);
  color: var(--md-default-fg-color);
}
.md-typeset .dl-btn--ghost:hover { border-color: var(--dl-accent); }

/* Feature row under the hero */
.dl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.md-typeset .dl-card {
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--dl-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}
.dl-card h3 { margin: .2rem 0 .4rem !important; font-size: 1rem; }
.dl-card p  { margin: 0; opacity: .78; font-size: .9rem; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .md-post--excerpt,
  .md-typeset a { transition: none; }
}