/* Blog static page styles. Hand-authored, no JS. */
/*
 * Brand palette mirrors apparelhub-ui's indigo theme
 * (src/theme/palette--indigo.js). Keep in sync if the in-app palette changes.
 */
:root {
  --blog-bg: #030331;
  --blog-bg-soft: #35355A;
  --blog-surface: #ffffff;
  --blog-text: #2d3748;
  --blog-text-muted: #646e73;
  --blog-accent: #1DE9B6;
  --blog-accent-hover: #14A37F;
  --blog-link-on-dark: #3FD3A1;
  --blog-border: #e6e8eb;
  --blog-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f7f8fa;
  color: var(--blog-text);
  font-family: var(--blog-font);
  line-height: 1.6;
}
.blog-header {
  background: var(--blog-bg);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 36px;
}
.blog-brand img { display: block; }
.blog-logo { height: 80px; width: auto; }
@media (max-width: 600px) {
  .blog-logo { height: 56px; }
}
.blog-nav a { color: white; text-decoration: none; margin-left: 24px; transition: color 0.2s; }
.blog-nav a:hover { color: var(--blog-link-on-dark); }

.blog-main { max-width: 820px; margin: 0 auto; padding: 48px 28px 80px; }
.blog-article { background: var(--blog-surface); border-radius: 12px; padding: 48px 56px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.blog-article h1 { font-size: 36px; margin: 0 0 8px; line-height: 1.2; }
.blog-article h2 { font-size: 22px; margin: 36px 0 12px; border-bottom: 1px solid var(--blog-border); padding-bottom: 8px; }
.blog-article h3 { font-size: 17px; margin: 20px 0 6px; }
.blog-article p, .blog-article li { font-size: 16px; }
.blog-article a { color: var(--blog-accent-hover); text-decoration: none; font-weight: 500; }
.blog-article a:hover { text-decoration: underline; }
.blog-article ul { padding-left: 22px; }
.blog-article code { background: #f1f3f5; padding: 1px 5px; border-radius: 3px; font-size: 14px; }
.blog-meta { color: var(--blog-text-muted); font-size: 13px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.blog-category { color: var(--blog-accent-hover); font-weight: 600; }

.blog-cta {
  background: var(--blog-surface);
  border-radius: 12px;
  padding: 28px 32px;
  margin-top: 24px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.blog-cta h3 { margin-top: 0; font-size: 18px; }
.blog-button {
  display: inline-block;
  background: var(--blog-accent);
  color: var(--blog-bg);
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 8px;
  transition: background 0.2s;
}
.blog-button:hover { background: var(--blog-accent-hover); color: white; }

.blog-lede { color: var(--blog-text-muted); font-size: 17px; max-width: 640px; }
.blog-index { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.blog-index-item a { display: block; background: var(--blog-surface); padding: 24px 28px; border-radius: 10px; text-decoration: none; color: var(--blog-text); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.blog-index-item a:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-1px); }
.blog-index-item h2 { margin: 4px 0; font-size: 20px; }
.blog-snippet { color: var(--blog-text-muted); font-size: 14px; margin: 8px 0 0; }
.blog-empty { color: var(--blog-text-muted); padding: 32px; text-align: center; }

.blog-footer { background: var(--blog-bg); color: white; padding: 24px 36px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.blog-footer a { color: white; text-decoration: none; margin-left: 18px; transition: color 0.2s; opacity: 0.85; }
.blog-footer a:hover { color: var(--blog-link-on-dark); opacity: 1; }

@media (max-width: 600px) {
  .blog-header, .blog-footer { flex-direction: column; gap: 12px; padding: 16px 20px; }
  .blog-nav a, .blog-footer a { margin: 0 8px; }
  .blog-main { padding: 32px 16px 56px; }
  .blog-article { padding: 28px 20px; }
}