/* ==========================================================================
   Obsidian Publish — Adam's minimal garden theme
   - Default Obsidian layout (no custom width caps)
   - Gradient text (subtle, tasteful)
   - Light/Dark aware tokens
   - Outlined-gradient buttons
   - Optional minimal cards (off by default)
   ========================================================================== */

/* ------------------------------
   Tokens (light by default)
   ------------------------------ */
:root {
  /* neutrals */
  --bg: #ffffff;
  --bg-elev: #f6f7fb;
  --text: #0b1020;
  --muted: #5b647a;
  --border: #e6e8ef;

  /* brand */
  --grad-1: #a0e9ff;
  --grad-2: #f093b0;
  --grad-3: #edca85;
  --accent: #06b6d4;

  /* type */
  --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
  --lh: 1.65;

  /* buttons */
  --btn-radius: 12px;
  --btn-pad-y: .55rem;
  --btn-pad-x: .9rem;
  --btn-text: var(--text);
  --btn-fill-text: #ffffff;

  /* tiny details */
  --uline-thickness: 1.5px;
  --uline-offset: 2px;

  /* graph */
  --graph-text: #6b7280;
  --graph-line: #cdd3e1;
  --graph-node: #0ea5e9;
  --graph-node-focused: #22d3ee;
  --graph-node-tag: #f093b0;
  --graph-node-attachment: #22c55e;
}

/* Dark overrides */
.theme-dark, body.theme-dark {
  --bg: #0b0f19;
  --bg-elev: #0f1424;
  --text: #e6e9f5;
  --muted: #97a0bf;
  --border: #1d2440;

  --btn-text: var(--text);
  --btn-fill-text: #0b0f19;

  --graph-text: #a8b0cc;
  --graph-line: #223058;
}

/* ------------------------------
   Base (keep default Obsidian layout)
   ------------------------------ */
html, body { background: var(--bg); color: var(--text); color-scheme: light dark; }
body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Don’t constrain content width — use Publish defaults */
.markdown-preview-view,
.markdown-rendered,
.markdown-preview-sizer {
  max-width: none;
}

/* ------------------------------
   Media
   ------------------------------ */
/* Raster images + video: soft panel by default */
.markdown-rendered img:not([src$=".svg"]):not([src$=".SVG"]),
.markdown-rendered video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--bg-elev);
}

/* SVGs: neutral by default (no panel) */
.markdown-rendered img[src$=".svg"],
.markdown-rendered img[src$=".SVG"] {
  display: block;
  max-width: 100%;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Publish wrapper around embeds should not add a panel either */
.markdown-rendered .image-embed.is-loaded { background: transparent !important; }

/* ------------------------------
   Headings (with safe fallback + WebKit fix)
   ------------------------------ */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3
 {
  margin: 2.2rem 0 1rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--text); /* fallback if gradient unsupported */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .markdown-rendered h1,
  .markdown-rendered h2,
  .markdown-rendered h3
  {
    background: linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; /* Safari/WebKit */
  }
}
.markdown-rendered h3 {
  margin: 1.8rem 0 .8rem;
  font-weight: 700;
}
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  margin: 1.4rem 0 .6rem;
  color: var(--muted);
}

/* Small cyan rule under h2 */
.markdown-rendered h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: .6rem;
  background: var(--accent);
  border-radius: 999px;
  opacity: .6;
}

/* Heading anchors show on hover */
.markdown-rendered :is(h1,h2,h3,h4,h5,h6) { scroll-margin-top: 80px; position: relative; }
.markdown-rendered :is(h1,h2,h3,h4,h5,h6) a.heading-link {
  opacity: 0; margin-left: .5rem; text-decoration: none; transition: opacity .2s ease;
}
.markdown-rendered :is(h1,h2,h3,h4,h5,h6):hover a.heading-link { opacity: .5; }

/* ------------------------------
   Text & links
   ------------------------------ */
.markdown-rendered p { margin: 1rem 0; }
.markdown-rendered a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--uline-thickness);
  text-underline-offset: var(--uline-offset);
  text-decoration-color: rgba(6, 182, 212, .25);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.markdown-rendered a:hover { text-decoration-color: var(--accent); }

.muted { color: var(--muted); }
.gradient-text {
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ------------------------------
   Blockquotes
   ------------------------------ */
.markdown-rendered blockquote {
  margin: 1.2rem 0;
  padding: .9rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  color: inherit;
  border-radius: 0 8px 8px 0;
}

/* ------------------------------
   Code
   ------------------------------ */
.markdown-rendered code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: color-mix(in srgb, var(--bg-elev) 80%, var(--bg));
  padding: .12rem .32rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.markdown-rendered pre {
  background: var(--bg-elev);
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: auto;
}

/* ------------------------------
   Tables
   ------------------------------ */
.markdown-rendered table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
}
.markdown-rendered th,
.markdown-rendered td {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.markdown-rendered thead th {
  font-weight: 700;
  background: var(--bg-elev);
}

/* ------------------------------
   Buttons — outlined gradient
   ------------------------------ */
.btn {
  display: inline-block;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: 700;
  line-height: 1.2;
  color: var(--btn-text);
  text-decoration: none;
  border: 1.6px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)) border-box;
  transition: background .25s ease, color .25s ease, transform .06s ease;
}
.btn:hover {
  color: var(--btn-fill-text);
  background:
    linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)) padding-box,
    linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)) border-box;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-sm { padding: .4rem .7rem; border-radius: 10px; font-weight: 600; }
.btn-lg { padding: .72rem 1.05rem; border-radius: 14px; }

/* Optional ghost variant */
.btn-ghost:hover {
  color: var(--btn-text);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)) border-box;
}

/* ------------------------------
   Minimal cards (optional)
   ------------------------------ */
ul.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 0; list-style: none; margin: 1rem 0;
}
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  transition: border-color .2s ease, transform .1s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-2px); }
.card-title { font-weight: 800; margin: 0 0 .3rem; }
.card-meta { color: var(--muted); font-size: .9em; }

/* ------------------------------
   Publish chrome (subtle)
   ------------------------------ */
.site-header, .publish-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-footer {
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.site-body-left-column {
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.site-body-left-column .tree-item-self.is-clickable {
  border-radius: 8px;
  padding: .35rem .5rem;
}
.site-body-left-column .tree-item-self.is-clickable:hover { background: color-mix(in srgb, var(--bg-elev) 80%, var(--bg)); }
.site-body-left-column .tree-item-self.is-active {
  background: color-mix(in srgb, var(--bg-elev) 85%, var(--bg));
  outline: 1px solid rgba(6, 182, 212, .24);
}

/* Graph view */
.graph-view.color-fill            { color: var(--graph-node); }
.graph-view.color-fill-unresolved { color: var(--graph-node-tag); opacity: .85; }
.graph-view.color-line            { color: var(--graph-line); }
.graph-view.color-text            { color: var(--graph-text); }

/* ------------------------------
   Utilities
   ------------------------------ */
.kicker { width: 32px; height: 2px; background: var(--accent); border-radius: 999px; opacity: .6; }
.stack > * + * { margin-top: .6rem; }
.center { text-align: center; }

/* ------------------------------
   Responsive
   ------------------------------ */
@media (max-width: 820px) {
  .markdown-rendered h1 { font-size: clamp(28px, 8vw, 40px); }
  .markdown-rendered h2 { font-size: clamp(22px, 6.2vw, 30px); }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Sidebar nav icons (emoji style) — robust matching for files + folders */
.site-body-left-column .tree-item-self[data-path] {
  position: relative;
  padding-left: 1.6rem;
}
.site-body-left-column .tree-item-self[data-path] .tree-item-inner::before {
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .9;
  content: ""; /* set per-item below */
}

/* HOME — match: "home", "home.md", ".../home", ".../home.md" (case-insensitive) */
.site-body-left-column .tree-item-self[data-path="home" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path="home.md" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/home" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/home.md" i] .tree-item-inner::before {
  content: "🏠";
}

/* ABOUT — works for files or folders */
.site-body-left-column .tree-item-self[data-path="about" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path="about.md" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/about" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/about.md" i] .tree-item-inner::before {
  content: "👤";
}

/* PROJECTS */
.site-body-left-column .tree-item-self[data-path="projects" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path="projects.md" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/projects" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/projects.md" i] .tree-item-inner::before {
  content: "📂";
}

/* BLOG */
.site-body-left-column .tree-item-self[data-path="blog" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path="blog.md" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/blog" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/blog.md" i] .tree-item-inner::before {
  content: "📝";
}

/* READING */
.site-body-left-column .tree-item-self[data-path="reading" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path="reading.md" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/reading" i] .tree-item-inner::before,
.site-body-left-column .tree-item-self[data-path$="/reading.md" i] .tree-item-inner::before {
  content: "📖";
}

/* Float astronaut top-right and wrap text around it */
.hero-astro {
  float: right;
  width: min(260px, 35%);
  margin: 0 0 1rem 1.5rem;  /* space between text and image */
  background: transparent !important; /* ensure no panel on wrapper */
  shape-outside: circle(50%);          /* pleasant text wrap */
  -webkit-shape-outside: circle(50%);
}
.hero-astro img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* optional utility if you want to stop the float later */
.clear { clear: both; }

/* Mobile: stack instead of float */
@media (max-width: 820px) {
  .hero-astro {
    float: none;
    width: 70%;
    max-width: 320px;
    margin: 0 auto 1rem auto;
    shape-outside: none;
  }
}




/* Book gallery */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 10px 0 24px;
}

.book-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  transition: border-color .2s ease, transform .1s ease;
}
.book-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-2px);
}

/* Cover — preserve aspect ratio, rounded, no shadow */
.book-cover {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.book-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--bg-elev);
}

/* Title + meta */
.book-info { min-height: 2.5em; }
.book-title {
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.book-title a {
  text-decoration: none;
  color: inherit;
}
.book-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--uline-thickness);
  text-underline-offset: var(--uline-offset);
}
.book-meta {
  color: var(--muted);
  font-size: .9em;
  margin-top: 2px;
}

/* Compact on small screens */
@media (max-width: 560px) {
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Book page header */
.book-hero {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
  margin: .5rem 0 1rem;
}
.book-hero-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.book-hero-meta { display: grid; gap: 6px; }
.book-hero-title { margin: 0; line-height: 1.15; font-weight: 800; }
.book-hero-author { margin: 0; color: var(--muted); }
.book-hero-badges { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Star rating (0–5, from --rating) */
.rating {
  --rating: 0;
  --stars: "★★★★★";
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: .05em;
}
.rating::before {
  content: "★★★★★";
  opacity: .25;
}
.rating::after {
  content: "★★★★★";
  position: absolute;
  left: 0; top: 0;
  width: calc((var(--rating) / 5) * 1em * 5 + (var(--rating) / 5) * .05em * 4);
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Compact on mobile */
@media (max-width: 640px) {
  .book-hero {
    grid-template-columns: 100px 1fr;
    gap: 12px;
  }
}

/* Hide frontmatter block completely on book pages */
.markdown-rendered.book pre.frontmatter,
.markdown-rendered.book .frontmatter,
.markdown-rendered.book .metadata-container {
  display: none !important;
}

/* ===========================
   Blog index (card grid)
   =========================== */

/* Year headings: keep your gradient look but tighten spacing */
.markdown-rendered h2 + .post-grid,
.markdown-rendered h3 + .post-grid { margin-top: .6rem; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 8px 0 28px;
}

/* Card shell */
.post-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, transform .12s ease;
}
.post-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-2px);
}

/* Banner (16:9, cover) */
.post-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev);
}
.post-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-banner.placeholder {
  background:
    linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3));
  opacity: .18;
}

/* Body */
.post-info {
  padding: 12px 14px 14px;
  min-height: 92px;
}
.post-title {
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 4px;
}
.post-title a {
  text-decoration: none;
  color: inherit;
}
.post-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--uline-thickness);
  text-underline-offset: var(--uline-offset);
}

.post-meta {
  color: var(--muted);
  font-size: .9em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

/* Summary */
.post-summary {
  margin: 0;
  color: inherit;
}

/* Tags as chips (shared style) */
.chip {
  display: inline-block;
  padding: .18rem .46rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3)) border-box;
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
}
.chip-soft {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-elev) 70%, var(--bg));
}

/* Focus accessibility on card links */
.post-card a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Compact on small screens */
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
}


/* -------- Tag “skill chip” base -------- */
.markdown-preview-view a.tag,
.page a.tag,
.tag-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  border-radius: .75rem;
  background: #111;           /* dark pill */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  margin: .25rem 1.25rem .75rem 0;  /* room for underline */
  line-height: 1.25;
}

/* remove default border some themes add */
.markdown-preview-view a.tag,
.page a.tag { border: none; }

/* cyan underline */
.markdown-preview-view a.tag::after,
.page a.tag::after,
.tag-link::after {
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: -6px;
  height: 4px;
  border-radius: 2px;
  background: #12cfe3;   /* cyan */
  transform: scaleX(.75);
  transform-origin: left;
  transition: transform .18s ease;
}

.markdown-preview-view a.tag:hover::after,
.page a.tag:hover::after,
.tag-link:hover::after {
  transform: scaleX(1);
}

/* icon slot */
.markdown-preview-view a.tag::before,
.page a.tag::before,
.tag-link::before {
  content: "";
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 22px;
  filter: drop-shadow(0 0 0 transparent);
}

/* -------- Per-tag icon mapping -------- */
/* Obsidian Publish renders tags as <a class="tag" href="/tags/<lowercase>">… */
/* Target by href ending; adjust if your theme outputs a different URL. */

a.tag[href$="/php"]::before,
a.tag[href="/tags/php"]::before {        /* fallback exact match */
  background-image: url("/svg/php.svg");
}

a.tag[href$="codeigniter"]::before,
a.tag[href="/tags/codeigniter"]::before {
  background-image: url("/svg/codeigniter-plain.svg");
}

/* Example extra mappings */
a.tag[href$="/python"]::before { background-image: url("/svg/python-original.svg"); }
a.tag[href$="/django"]::before { background-image: url("/svg/django.svg"); }

/* -------- Small niceties -------- */
a.tag { text-transform: none; }          /* keep case as written */
a.tag:visited { color: #fff; }           /* avoid purple visited tags */