/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root{
  --tblr-body-bg: #12151c;
  --tblr-bg-surface: #1d222d;
  --tblr-border-color: #2a3040;
  --gold: #e3a857;
  --gold-dim: #a67c3d;
  --green: #6b9a7d;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;
}
body{
  background-color:var(--tblr-body-bg) !important;
  font-family:var(--sans);
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size:28px 28px;
}
.font-mono{ font-family:var(--mono) !important; }
a{ text-decoration:none; }
::selection{ background:var(--gold); color:#161206; }

/* Navbar */
.navbar{ background:rgba(18,21,28,0.85) !important; backdrop-filter:blur(10px); border-bottom:1px solid var(--tblr-border-color); }
.navbar-brand{ font-family:var(--mono); font-weight:500; color:#e9ebf0 !important; }
.navbar-brand .caret{ color:var(--gold); animation:blink 1.1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.nav-link{ font-family:var(--mono); font-size:.8125rem; color:#8b93a7 !important; }
.nav-link:hover{ color:#e9ebf0 !important; }
.btn-rss{ text-decoration:none !important; font-family:var(--mono); font-size:.8125rem; border:1px solid var(--tblr-border-color); color:var(--gold) !important; border-radius:6px; padding:.375rem .75rem; }
.btn-rss:hover{ border-color:var(--gold); background:rgba(227,168,87,0.06); }

/* Breadcrumb */
.breadcrumb-mono{ font-family:var(--mono); font-size:.8125rem; color:#5a6274; }
.breadcrumb-mono a{ color:#8b93a7; }
.breadcrumb-mono a:hover{ color:var(--gold); }

/* Hero (home) */
.hero{ padding:6rem 0 4rem; border-bottom:1px solid var(--tblr-border-color); }
.badge-live{ font-family:var(--mono); font-size:.75rem; color:var(--green); background:rgba(107,154,125,0.08); border:1px solid rgba(107,154,125,0.25); border-radius:20px; padding:.35rem .7rem; }
.badge-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 3px rgba(107,154,125,0.15); }
.hero-title{ font-weight:800; letter-spacing:-0.02em; line-height:1.1; font-size:clamp(2rem,5vw,3.25rem); max-width:720px; }
.hero-title .accent{ color:var(--gold); }
.hero-sub{ color:#8b93a7; max-width:540px; font-size:1rem; }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:#161206; font-family:var(--mono); font-weight:500; font-size:.85rem; }
.btn-gold:hover{ background:#eeb668; border-color:#eeb668; color:#161206; }
.btn-outline-soft{ border:1px solid var(--tblr-border-color); color:#e9ebf0; font-family:var(--mono); font-weight:500; font-size:.85rem; }
.btn-outline-soft:hover{ border-color:#5a6274; color:#e9ebf0; background:transparent; }
.stat-num{ font-family:var(--mono); font-size:1.375rem; font-weight:700; color:#e9ebf0; }
.stat-label{ font-family:var(--mono); font-size:.6875rem; color:#5a6274; text-transform:uppercase; letter-spacing:.06em; }

/* Section headers */
.section-eyebrow{ font-family:var(--mono); font-size:.75rem; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; }
.section-title{ font-size:1.625rem; font-weight:700; letter-spacing:-0.01em; }
.section-link{ font-family:var(--mono); font-size:.8125rem; color:#8b93a7; border-bottom:1px solid var(--tblr-border-color); }
.section-link:hover{ color:var(--gold); border-color:var(--gold); }

.post-meta-item{ font-family:var(--mono); font-size:.75rem; color:#5a6274; }

/* Post cards (home, posts index, tag, search) */
.card-post{ background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color); border-radius:10px; transition:border-color .15s ease, transform .15s ease; height:100%; position:relative; }
.card-post:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
.post-tag{ font-family:var(--mono); font-size:.75rem; color:var(--gold-dim); }
.card-post-title{ font-size:1rem; font-weight:600; margin-bottom:.5rem; }
.card-post-title a{ color:#e9ebf0; text-decoration:none !important }
.card-post-desc{ font-size:.85rem; color:#8b93a7; margin-bottom:.75rem; }
.pill-tag{ font-family:var(--mono); font-size:.6875rem; color:#8b93a7; border:1px solid var(--tblr-border-color); border-radius:20px; padding:.1rem .55rem; }
.post-date{ font-family:var(--mono); font-size:.75rem; color:#5a6274; white-space:nowrap; }

/* Project cards (home) */
.card-project{ background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color); border-radius:10px; transition:border-color .15s ease, transform .15s ease; height:100%; }
.card-project:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
.project-name{ font-family:var(--mono); font-weight:600; font-size:1rem; color:#e9ebf0; }
.project-star{ font-family:var(--mono); font-size:.75rem; color:#5a6274; }
.project-desc{ font-size:.85rem; color:#8b93a7; }
.lang-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.lang-label{ font-family:var(--mono); font-size:.75rem; color:#8b93a7; }
.project-link{ font-family:var(--mono); font-size:.75rem; color:var(--gold); border-bottom:1px solid transparent; }

/* Post detail page */
.post-title{ font-weight:800; letter-spacing:-0.02em; font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.15; max-width:760px; }
.post-lede{ color:#8b93a7; font-size:1.05rem; max-width:640px; }

.author-box{ display:flex; align-items:center; gap:.75rem; padding:1rem 0; border-top:1px solid var(--tblr-border-color); border-bottom:1px solid var(--tblr-border-color); }
.author-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#e3a857,#6b9a7d); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; color:#161206; font-size:.9rem; }
.author-name{ font-size:.875rem; font-weight:600; color:#e9ebf0; }
.author-role{ font-family:var(--mono); font-size:.75rem; color:#5a6274; }

.article-body{ max-width:720px; font-size:1.01rem; line-height:1.8; color:#c7cad3; }
.article-body h1, .article-body h2, .article-body h3{ font-weight:700; color:#e9ebf0; letter-spacing:-0.01em; }
.article-body h1{ font-size:1.6rem; margin:2.5rem 0 1rem; }
.article-body h2{ font-size:1.4rem; margin:2.5rem 0 1rem; }
.article-body h3{ font-size:1.15rem; margin:2rem 0 .75rem; }
.article-body .anchor{ display:none; }
.article-body p{ margin-bottom:1.25rem; }
.article-body strong{ color:#e9ebf0; }
.article-body a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.article-body ul, .article-body ol{ margin-bottom:1.25rem; padding-left:1.5rem; }
.article-body li{ margin-bottom:.4rem; }
.article-body code{ font-family:var(--mono); background:rgba(227,168,87,0.08); color:var(--gold); padding:.1rem .4rem; border-radius:4px; font-size:.875em; }
.article-body pre{
  background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color); border-radius:8px;
  padding:1.25rem; overflow-x:auto; margin-bottom:1.5rem;
}
.article-body pre code{ background:none; padding:0; color:#c7cad3; font-size:.85rem; line-height:1.7; }
.article-body blockquote{
  border-left:2px solid var(--gold); padding-left:1.25rem; margin:1.75rem 0; color:#8b93a7; font-style:italic;
}

.toc{ background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color); border-radius:10px; padding:1.25rem; position:sticky; top:100px; }
.toc-title{ font-family:var(--mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:.75rem; }
.toc a{ display:block; font-size:.8125rem; color:#8b93a7; padding:.3rem 0; border-left:2px solid transparent; padding-left:.75rem; }
.toc a:hover{ color:#e9ebf0; border-color:var(--gold-dim); }

.post-nav-link{ background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color); border-radius:10px; padding:1.25rem; height:100%; display:block; transition:border-color .15s ease; }
.post-nav-link:hover{ border-color:var(--gold-dim); text-decoration: none !important }
.post-nav-label{ font-family:var(--mono); font-size:.6875rem; color:#5a6274; text-transform:uppercase; letter-spacing:.06em; }
.post-nav-title{ font-size:.9rem; font-weight:600; color:#e9ebf0; margin-top:.35rem; }

/* Tag page */
.tag-hero{ padding:3rem 0 2.5rem; border-bottom:1px solid var(--tblr-border-color); }
.tag-eyebrow{ font-family:var(--mono); font-size:.75rem; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; }
.tag-title{ font-family:var(--mono); font-weight:700; font-size:clamp(2rem,5vw,2.75rem); color:#e9ebf0; }
.tag-title span{ color:var(--gold); }
.tag-desc{ color:#8b93a7; max-width:560px; }
.tag-count{ font-family:var(--mono); font-size:.8125rem; color:#5a6274; }

.filter-bar{ display:flex; gap:.5rem; flex-wrap:wrap; padding:1.5rem 0; }
.filter-pill{ font-family:var(--mono); font-size:.75rem; color:#8b93a7; border:1px solid var(--tblr-border-color); border-radius:20px; padding:.35rem .85rem; }
.filter-pill.active{ color:var(--gold); border-color:var(--gold-dim); background:rgba(227,168,87,0.06); }

.pagination-mono{ font-family:var(--mono); font-size:.8125rem; }
.pagination-mono a, .pagination-mono span{ color:#8b93a7; padding:.4rem .7rem; border:1px solid var(--tblr-border-color); border-radius:6px; }
.pagination-mono a:hover{ color:#e9ebf0; border-color:#5a6274; }
.pagination-mono .active{ color:var(--gold); border-color:var(--gold-dim); }

.other-tags{ padding:2.5rem 0; border-top:1px solid var(--tblr-border-color); margin-top:1rem; }
.other-tags-title{ font-family:var(--mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:#5a6274; margin-bottom:1rem; }

/* About page */
.about-hero{ padding:5rem 0 3rem; border-bottom:1px solid var(--tblr-border-color); }
.about-avatar{
  width:88px; height:88px; border-radius:14px;
  background:linear-gradient(135deg,#e3a857,#6b9a7d);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:1.75rem; color:#161206;
}
.about-title{ font-weight:800; letter-spacing:-0.02em; font-size:clamp(1.9rem,4vw,2.75rem); }
.about-title .accent{ color:var(--gold); }
.about-role{ font-family:var(--mono); font-size:.875rem; color:var(--gold-dim); }
.about-lede{ color:#8b93a7; max-width:640px; font-size:1.02rem; }

.stack-card{ background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color); border-radius:10px; padding:1.25rem; height:100%; }
.stack-cat{ font-family:var(--mono); font-size:.7rem; color:#5a6274; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.75rem; }
.stack-pill{ font-family:var(--mono); font-size:.75rem; color:#c7cad3; border:1px solid var(--tblr-border-color); border-radius:20px; padding:.25rem .7rem; display:inline-block; margin:.2rem .3rem .2rem 0; }

.contact-strip{ background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color); border-radius:10px; padding:2rem; text-align:center; }
.contact-links a{ font-family:var(--mono); font-size:.85rem; color:#8b93a7; border:1px solid var(--tblr-border-color); border-radius:6px; padding:.5rem 1rem; }
.contact-links a:hover{ text-decoration:none !important; color:var(--gold); border-color:var(--gold-dim); }

/* Footer */
.footer-status{ border-top:1px solid var(--tblr-border-color); font-family:var(--mono); font-size:.7rem; color:#5a6274; padding:1rem 0; }
.status-live{ color:var(--green); display:inline-flex; align-items:center; gap:.35rem; }
.status-live span{ width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; }
.footer-status a{ color:#5a6274; }
.footer-status a:hover{ color:#e9ebf0; }