/* ==========================================================================
   InstaFreight Blog • Global Styles (v2.1)
   File: static/blog/blog.css
   - Scoped to blog components/classes in this file
   - Picks up site tokens when present (site-bg, site-text, site-primary, etc.)
   - Explicit dark-mode support via prefers-color-scheme and [data-theme="dark"]
   - RTL polish, a11y focus rings, reduced motion, clean print
   ========================================================================== */

/* ---------- Tokens (Light) ---------- */
:root{
  /* Prefer site-wide tokens if your theme defines them */
  --bg:                var(--site-bg, #ffffff);
  --text:              var(--site-text, #111827);          /* gray-900 */
  --muted:             #6b7280;                             /* gray-500 */
  --border:            #e5e7eb;                             /* gray-200 */
  --border-2:          #eef2f7;                             /* light blue-gray */
  --chip:              #f3f4f6;                             /* gray-100 */
  --chip-light:        #f9fafb;                             /* gray-50 */
  --primary:           var(--site-primary, #111827);
  --primary-contrast:  var(--site-primary-contrast, #ffffff);
  --link:              var(--site-link, #0ea5e9);           /* sky-500 for article links */
  --card:              #ffffff;
  --subtle:            #f8fafc;                             /* gray-50/blue-50 mix */
  --shadow-sm:         0 1px 2px rgba(0,0,0,.04);
  --shadow-md:         0 6px 16px rgba(0,0,0,.08);
  --focus:             var(--site-focus, #60a5fa);
}

/* ---------- Dark (auto) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f19;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: #1f2937;
    --border-2: #111827;
    --chip: #0f172a;
    --chip-light: #111827;
    --primary: var(--site-primary-dark, #e5e7eb);
    --primary-contrast: var(--site-primary-contrast-dark, #0b0f19);
    --link: #7dd3fc;
    --card: #0e1422;
    --subtle: #0a0f1a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
    --shadow-md: 0 8px 24px rgba(0,0,0,.35);
    --focus: var(--site-focus-dark, #60a5fa);
  }
  img{filter:brightness(.98) contrast(1.02)}
}

/* ---------- Explicit Dark (wins over media if set) ---------- */
html[data-theme="dark"], html[data-bs-theme="dark"]{
  --bg: #0b0f19;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --border-2: #111827;
  --chip: #0f172a;
  --chip-light: #111827;
  --primary: var(--site-primary-dark, #e5e7eb);
  --primary-contrast: var(--site-primary-contrast-dark, #0b0f19);
  --link: #7dd3fc;
  --card: #0e1422;
  --subtle: #0a0f1a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --focus: var(--site-focus-dark, #60a5fa);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
a:hover{opacity:.9}
img{max-width:100%; height:auto; display:block}
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.muted{color:var(--muted)}
.dot{margin:0 .4rem; color:#d1d5db}
hr{border:0;border-top:1px solid var(--border); margin:1rem 0}

/* ---------- Focus (A11y) ---------- */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px; border-radius:6px
}

/* ---------- Buttons & Chips ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; padding:.6rem 1rem;
  text-decoration:none; border:1px solid var(--border); background:var(--card); color:var(--text);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{box-shadow:var(--shadow-sm); transform:translateY(-1px)}
.btn--primary{
  background:var(--primary); color:var(--primary-contrast);
  border-color:var(--primary);
  box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 20%, transparent);
}
.btn--ghost{background:transparent}
.btn--text{border:0; padding:.25rem .35rem; background:transparent}

.chip{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  background:var(--chip); color:var(--text); text-decoration:none;
  margin:.2rem .25rem 0 0; font-size:.9rem; border:1px solid transparent
}
.chip--light{background:var(--chip-light)}
.chip--ghost{background:transparent; border:1px solid var(--border)}

/* ---------- Search ---------- */
.search{display:flex; gap:.5rem}
.search__input{
  flex:1; border:1px solid var(--border); border-radius:10px;
  padding:.7rem 1rem; font-size:1rem; background:var(--card); color:var(--text)
}
.search__input::placeholder{color:var(--muted)}

/* ---------- Eyebrow, Avatar ---------- */
.eyebrow{font-size:.92rem; color:var(--muted)}
.avatar{display:inline-flex; align-items:center; gap:.5rem}
.avatar__circle{
  width:28px; height:28px; border-radius:50%;
  background:var(--primary); color:var(--primary-contrast);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700
}
.avatar__name{font-size:.95rem}

/* ==========================================================================
   Toolbar / Filters
   ========================================================================== */
.blog-toolbar{
  padding:1.25rem 0; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg),rgba(255,255,255,.6))
}
.filters{margin-top:.75rem; display:flex; flex-direction:column; gap:.35rem}
.filters__group{display:flex; flex-wrap:wrap}

/* ==========================================================================
   Hero / Featured
   ========================================================================== */
.blog-hero{padding:2rem 0}
.hero-card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem; align-items:stretch
}
.hero-card__media{display:block; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm)}
.hero-card__image{position:relative; aspect-ratio:16/9; background:var(--border-2); overflow:hidden}
.hero-card__image img{width:100%; height:100%; object-fit:cover}
.hero-card__body{display:flex; flex-direction:column; gap:.8rem}
.hero-card__title{font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.15; margin:0}
.hero-card__excerpt{color:#374151}
.hero-card__meta{display:flex; gap:1rem; align-items:center; justify-content:space-between; margin-top:auto}

/* ==========================================================================
   Cards & Grid
   ========================================================================== */
.blog-grid{padding:1rem 0 2rem}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{
  display:flex; flex-direction:column; border:1px solid var(--border-2);
  border-radius:16px; overflow:hidden; background:var(--card);
  box-shadow:var(--shadow-sm); transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border)}
.card__media{display:block}
.card__image{position:relative; aspect-ratio:16/10; background:var(--border-2)}
.card__image img{width:100%; height:100%; object-fit:cover}
.card__body{display:flex; flex-direction:column; gap:.6rem; padding:1rem}
.card__title{font-size:1.1rem; margin:0}
.card__excerpt{color:#4b5563}
.card__meta{display:flex; align-items:center; justify-content:space-between; margin-top:auto}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs{border-bottom:1px solid var(--border)}
.crumbs ol{list-style:none; display:flex; gap:.5rem; padding:.5rem 0; margin:0; flex-wrap:wrap}
.crumbs a{text-decoration:none; color:#374151}

/* ==========================================================================
   Post Detail
   ========================================================================== */
.post-hero{padding:1.5rem 0 0}
.post-hero__media{border-radius:18px; overflow:hidden; background:var(--border-2); box-shadow:var(--shadow-sm)}
.post-hero__head{padding:1rem 0 1.25rem}
.post-title{font-size:clamp(1.6rem,3.2vw,2.35rem); line-height:1.15; margin:.25rem 0}
.post-deck{font-size:1.1rem; color:#374151; margin:.3rem 0 0}
.author-line{display:flex; align-items:center; gap:.5rem; margin-top:.65rem}
.post-shell{padding:1rem 0 2rem}
.layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.25rem}
.post-aside .sticky-card{
  position:sticky; top:1rem; border:1px solid var(--border-2); border-radius:16px;
  padding:1rem; background:var(--card); display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-sm)
}
.share h3{margin:0 0 .4rem}
.share__btn{
  display:block; width:100%; text-align:center; margin:.35rem 0; padding:.5rem .7rem;
  border:1px solid var(--border); border-radius:10px; background:var(--chip-light); text-decoration:none; color:var(--text)
}
.newsletter-cta p{margin:.3rem 0 .7rem}
.toc{border:1px dashed var(--border); border-radius:12px; padding:.75rem; background:var(--subtle); margin:0 0 1rem}
.toc nav{display:flex; flex-direction:column; gap:.35rem}
.toc a{text-decoration:none; color:#374151; font-size:.95rem}

/* Prose (rendered HTML) */
.prose{font-size:1.05rem; line-height:1.75; color:var(--text)}
.prose p{margin:.75rem 0}
.prose h2{margin-top:1.6rem; line-height:1.25}
.prose h3{margin-top:1.1rem; line-height:1.3}
.prose a{color:var(--link); text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose img, .prose video{max-width:100%; height:auto; border-radius:12px}
.prose blockquote{
  border-left:3px solid var(--primary); padding:.3rem .9rem; color:#374151; background:var(--subtle);
  border-radius:8px; margin:1rem 0
}
.prose code{
  background:rgba(148,163,184,.15); padding:.1rem .35rem; border-radius:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace
}
.prose pre{
  background:#0a0f1a; color:#e5e7eb; padding:1rem; border-radius:12px; overflow:auto
}
.prose table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem}
.prose th, .prose td{border:1px solid var(--border); padding:.6rem .7rem}
.prose th{background:var(--chip); text-align:left}

/* RTL support */
.post-body[dir="rtl"] .prose{direction:rtl; text-align:right}

/* Tags below post */
.post-tags{margin-top:1rem}

/* ==========================================================================
   Category / Tag / Author / Archive
   ========================================================================== */
.cat-hero, .tag-hero, .author-hero, .arch-hero{
  padding:1rem 0 .5rem; background:linear-gradient(180deg,var(--bg),rgba(255,255,255,.6))
}
.cat-hero__head, .tag-hero__head{display:flex; flex-direction:column; gap:.6rem}
.cat-title, .tag-title, .author-name, .arch-title{font-size:clamp(1.6rem,3.2vw,2.2rem); margin:0}
.cat-meta, .tag-meta, .arch-meta{display:flex; align-items:center; flex-wrap:wrap; gap:.25rem}
.cat-search, .tag-search, .arch-search{display:flex; gap:.5rem; margin-top:.4rem}
.cat-actions, .tag-actions{display:flex; gap:.5rem; margin-top:.4rem; flex-wrap:wrap}
.author-head{display:grid; grid-template-columns:120px 1fr; gap:1rem; align-items:center}
.avatar-xl{
  width:108px; height:108px; border-radius:50%; overflow:hidden; background:var(--primary);
  display:flex; align-items:center; justify-content:center
}
.avatar-xl img{width:100%; height:100%; object-fit:cover}
.avatar-xl__fallback{color:var(--primary-contrast); font-weight:800; font-size:2rem}
.author-meta{display:flex; flex-wrap:wrap; gap:.35rem; color:var(--muted); margin:.25rem 0 .35rem}
.author-bio{color:#374151; margin:.2rem 0 .4rem}
.author-links{display:flex; flex-wrap:wrap; gap:.35rem}

.hero-card, .author-hero-card .hero-card, .cat-hero-card .hero-card, .tag-hero-card .hero-card, .arch-hero-card .hero-card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem; align-items:stretch;
  border:1px solid var(--border-2); border-radius:18px; padding:1rem; background:var(--card); box-shadow:var(--shadow-sm)
}
.hero-card__image{position:relative; aspect-ratio:16/9; background:var(--border-2); border-radius:12px; overflow:hidden}
.hero-card__image img{width:100%; height:100%; object-fit:cover}
.hero-card__excerpt{color:#374151}

/* Archive month nav + mini calendar */
.month-nav{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end}
.mini-cal{margin-top:.75rem; border:1px solid var(--border-2); border-radius:12px; padding:.6rem; background:var(--card)}
.mini-cal__title{font-weight:600; margin-bottom:.4rem}
.mini-cal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem}
.mini-cal__day{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; border-radius:8px; border:1px solid var(--border); background:#fafafa; color:#374151
}
.mini-cal__day.is-cool{background:#e8f3ff}
.mini-cal__day.is-warm{background:#cfe8ff}
.mini-cal__day.is-hot{background:#9fd0ff}
.mini-cal__day.is-empty{opacity:.5}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.pagination__summary{color:var(--muted); font-size:.95rem}
.pagination__list{list-style:none; display:flex; gap:.25rem; margin:0; padding:0}
.pagination__link{
  display:inline-flex; min-width:2.25rem; height:2.25rem; align-items:center; justify-content:center;
  padding:0 .6rem; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--text); background:var(--card)
}
.pagination__item.is-active .pagination__link{background:var(--primary); color:var(--primary-contrast); border-color:var(--primary)}
.pagination__item.is-disabled .pagination__link{opacity:.45; pointer-events:none}
.pagination__item.is-ellipsis .pagination__link{border-color:transparent; background:transparent}

/* ==========================================================================
   Comments
   ========================================================================== */
.comments{padding:1.5rem 0; border-top:1px solid var(--border)}
.comments-wrap{display:block}
.comments-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 .75rem}
#comments-title{margin:0; font-size:1.25rem}
.comments-empty{border:1px dashed var(--border); border-radius:12px; padding:1rem; background:var(--subtle); margin:.5rem 0 1rem}
.comments-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem}
.comment{display:grid; grid-template-columns:40px 1fr; gap:.75rem}
.comment__meta{color:#374151; font-size:.95rem; display:flex; align-items:center; gap:.25rem; flex-wrap:wrap}
.comment__author{font-weight:600}
.comment__permalink{text-decoration:none; color:#9ca3af; margin-left:auto}
.comment__text{margin-top:.25rem; line-height:1.6}

/* Comment Form */
.comment-form-wrap{margin-top:1.25rem}
.alert{padding:.75rem 1rem; border-radius:10px; margin-bottom:.75rem}
.alert--success{background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46}
.alert--error{background:#fef2f2; border:1px solid #fecaca; color:#991b1b}
.comment-form{display:grid; gap:.8rem}
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-weight:600}
.input,.textarea{
  border:1px solid var(--border); border-radius:10px; padding:.7rem 1rem; font-size:1rem; background:var(--card); color:var(--text)
}
.textarea{resize:vertical}
.hint{font-size:.85rem; color:var(--muted); text-align:right}
.error{color:#b91c1c; font-size:.9rem}
.hp{position:absolute; left:-5000px; top:auto; width:1px; height:1px; overflow:hidden}
.actions{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}

/* Dark-friendly inputs (when explicit dark theme is set) */
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-bs-theme="dark"] .input,
html[data-bs-theme="dark"] .textarea{
  background:#0f172a; color:#e5e7eb; border-color:#1f2937;
}

/* ==========================================================================
   Footer Strip / Newsletter
   ========================================================================== */
.blog-foot{
  background:linear-gradient(180deg, var(--subtle), var(--bg));
  padding:2rem 0; border-top:1px solid var(--border-2)
}
.foot-grid{display:grid; grid-template-columns:2fr 1fr; gap:1rem; align-items:start}
.foot__title{margin:.2rem 0 0}

/* ==========================================================================
   Empty State
   ========================================================================== */
.empty{padding:2rem 0; text-align:center}

/* ==========================================================================
   Utilities
   ========================================================================== */
.hide{display:none !important}
.rtl{direction:rtl}
.ltr{direction:ltr}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .layout{grid-template-columns:1fr}
  .post-aside{order:-1}
}
@media (max-width: 960px){
  .hero-card{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .author-head{grid-template-columns:80px 1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .pagination{flex-direction:column; align-items:flex-start; gap:.5rem}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .btn, .chip, .card, .hero-card__media, .share__btn{
    transition: none !important;
  }
}

/* ==========================================================================
   Print (clean article printout)
   ========================================================================== */
@media print{
  .crumbs, .blog-toolbar, .post-aside, .blog-foot, .comments, .pagination{display:none !important}
  .hero-card__media, .post-hero__media img{filter:grayscale(1)}
  a{text-decoration:none}
}