/* TruHue editorial layer — the BLOG (facelift part 7, Nov 2026).
   Every post: <body class="te-blog"> + /css/truhue-editorial.css + /css/article-editorial.css + this file,
   loaded after the post's own <style>. New posts built from templates/blog/post-template.html need
   NO page-level CSS at all — this file styles every standard blog block:
     quick-answer · highlight-box · pullquote · mid-cta · intro-cta · quiz-cta-inline · lead-magnet(-capture)
     email-capture · faq-item · further-reading · internal-links · related-posts · app-download-cta
     shop-products · shop-retailers · shade-pack-cta · product-card · compare-card · tables · share row
   YAY / OKAY / NAY colors (.yay .okay .nay .verdict-* .score-* .badge-*) are deliberately NOT touched.
   The .mid-cta and .further-reading rules below also satisfy scripts/audit-blog-seo.cjs check 12. */

/* ---------- Header extras ---------- */
.te-blog .back-link, .te-blog .post-nav a { color: var(--te-ink) !important; text-decoration: underline; text-decoration-color: var(--te-rose); text-underline-offset: 3px; }
.te-blog .breadcrumb, .te-blog .breadcrumb a { color: var(--te-muted) !important; }
.te-blog .share-row, .te-blog .share-buttons { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule-2) !important; border-bottom: 1px solid var(--te-rule-2) !important; border-radius: 0 !important; box-shadow: none !important; }
.te-blog .share-label { color: var(--te-muted) !important; font-family: var(--te-sans) !important; }
.te-blog .share-btn { border-radius: var(--te-radius) !important; }

/* ---------- Pull-outs ---------- */
.te-blog .quick-answer, .te-blog .key-takeaway { background: transparent !important; border: 0 !important; border-left: 2px solid var(--te-rose) !important; border-radius: 0 !important; box-shadow: none !important; }
.te-blog .quick-answer-label { font-family: var(--te-sans) !important; color: var(--te-rose) !important; letter-spacing: 0.16em !important; }
.te-blog .quick-answer p, .te-blog .key-takeaway p { color: var(--te-ink) !important; }
.te-blog .pullquote { font-family: var(--te-serif) !important; font-style: italic; font-weight: 400 !important; color: var(--te-ink) !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-bottom: 1px solid var(--te-rule) !important; border-radius: 0 !important; text-align: left !important; }

/* ---------- Calls to action ---------- */
.te-blog .mid-cta { background: transparent !important; border: 0 !important; border-left: 2px solid var(--te-rose) !important; border-radius: 0 !important; text-align: left !important; box-shadow: none !important; }
.te-blog .mid-cta p { color: var(--te-body) !important; }
.te-blog .mid-cta a, .te-blog .intro-cta a { color: var(--te-ink) !important; text-decoration: underline !important; text-decoration-color: var(--te-rose) !important; border: 0 !important; }
.te-blog .intro-cta { text-align: left !important; }
.te-blog .quiz-cta-inline, .te-blog .app-download-cta, .te-blog .shade-pack-cta, .te-blog .lead-magnet, .te-blog .lead-magnet-capture, .te-blog .email-capture, .te-blog .shop-products, .te-blog .shop-retailers {
  background: var(--te-ivory-2) !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-bottom: 1px solid var(--te-rule) !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; }
.te-blog .lead-magnet-inner { background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: left !important; }
.te-blog .app-download-icon { display: none !important; }
.te-blog .quiz-cta-inline h3, .te-blog .app-download-cta h3, .te-blog .shade-pack-cta h3, .te-blog .lead-magnet-title, .te-blog .lead-magnet-capture h3, .te-blog .email-capture h3, .te-blog .shop-products p:first-child, .te-blog .shop-retailers p:first-child {
  font-family: var(--te-serif) !important; font-weight: 500 !important; font-style: normal !important; color: var(--te-ink) !important; }
.te-blog .lead-magnet-eyebrow { font-family: var(--te-sans) !important; color: var(--te-rose) !important; letter-spacing: 0.16em !important; background: transparent !important; }
.te-blog .lead-magnet-desc, .te-blog .lm-desc, .te-blog .quiz-cta-inline p, .te-blog .app-download-cta p, .te-blog .shade-pack-cta p { color: var(--te-body) !important; }
.te-blog .lead-magnet-privacy, .te-blog .lm-privacy, .te-blog .ec-privacy, .te-blog .shop-products p:last-child { color: var(--te-muted) !important; }
.te-blog .lead-magnet-form, .te-blog .lead-magnet-capture form, .te-blog .ec-form-row, .te-blog .form-row { justify-content: flex-start !important; margin-left: 0 !important; }
.te-blog .lead-magnet input, .te-blog .lead-magnet-capture input[type="email"], .te-blog .email-capture input, .te-blog input[type="email"], .te-blog input[type="text"] {
  border-radius: var(--te-radius) !important; border: 1px solid var(--te-rule) !important; background: var(--te-paper) !important; font-family: var(--te-sans) !important; box-shadow: none !important; }
.te-blog input[type="email"]:focus, .te-blog input[type="text"]:focus { border-color: var(--te-ink) !important; box-shadow: 0 0 0 3px var(--te-rose-soft) !important; outline: none; }
.te-blog .quiz-cta-inline a, .te-blog .app-download-cta a, .te-blog .shade-pack-cta a, .te-blog .lead-magnet button, .te-blog .lead-magnet-capture button, .te-blog .email-capture button, .te-blog .lead-magnet-download, .te-blog .download-btn, .te-blog .buy-btn {
  background: var(--te-ink) !important; color: var(--te-ivory) !important; border: 1px solid var(--te-ink) !important; border-radius: var(--te-radius) !important; box-shadow: none !important; transform: none !important; font-family: var(--te-sans) !important; font-weight: 600 !important; text-decoration: none !important; }
.te-blog .quiz-cta-inline a:hover, .te-blog .app-download-cta a:hover, .te-blog .shade-pack-cta a:hover, .te-blog .lead-magnet button:hover, .te-blog .lead-magnet-capture button:hover, .te-blog .email-capture button:hover, .te-blog .lead-magnet-download:hover, .te-blog .download-btn:hover, .te-blog .buy-btn:hover {
  background: var(--te-rose) !important; border-color: var(--te-rose) !important; color: #fff !important; }
.te-blog .shop-products a, .te-blog .shop-retailers a { background: transparent !important; color: var(--te-ink) !important; border: 1px solid var(--te-ink) !important; border-radius: var(--te-radius) !important; font-family: var(--te-sans) !important; }
.te-blog .shop-products a:hover, .te-blog .shop-retailers a:hover { background: var(--te-ink) !important; color: var(--te-ivory) !important; }

/* ---------- FAQ + links ---------- */
.te-blog .faq-item { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; }
.te-blog .faq-item:last-of-type { border-bottom: 1px solid var(--te-rule) !important; }
.te-blog .faq-item summary { background: transparent !important; font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; padding-left: 0 !important; padding-right: 0 !important; }
.te-blog .faq-item summary::after { color: var(--te-rose) !important; }
.te-blog .faq-item .faq-answer { padding-left: 0 !important; padding-right: 0 !important; color: var(--te-body) !important; }
.te-blog .further-reading, .te-blog .internal-links, .te-blog .related-posts { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-shadow: none !important; }
.te-blog .further-reading h3, .te-blog .internal-links h3, .te-blog .related-posts h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-blog .further-reading a, .te-blog .internal-links a, .te-blog .related-posts a { color: var(--te-ink) !important; border-bottom-color: var(--te-rule) !important; }
.te-blog .further-reading a:hover, .te-blog .internal-links a:hover, .te-blog .related-posts a:hover { color: var(--te-rose) !important; }
.te-blog .further-reading li::before { color: var(--te-rose) !important; }
.te-blog .further-reading .ext, .te-blog .affiliate-note, .te-blog .affiliate-disclosure, .te-blog .disclosure { color: var(--te-muted) !important; }

/* ---------- Product blocks (verdict colors untouched) ---------- */
.te-blog .product-card, .te-blog .compare-card, .te-blog .step-card, .te-blog .verdict-card, .te-blog .season-card {
  background: var(--te-paper) !important; border: 1px solid var(--te-rule) !important; border-radius: var(--te-radius) !important; box-shadow: none !important; transform: none !important; }
.te-blog .product-name, .te-blog .compare-card h3, .te-blog .season-card h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-blog .product-shade, .te-blog .product-details, .te-blog .price { color: var(--te-body) !important; }
.te-blog .swatch, .te-blog .swatch-chip, .te-blog .color-swatch { border-radius: var(--te-radius); }
.te-blog table { border-collapse: collapse; }
.te-blog .comparison-table th, .te-blog .score-table th, .te-blog .product-table th, .te-blog .season-comparison-table th, .te-blog .post-body table th {
  background: var(--te-ivory-2) !important; color: var(--te-ink) !important; border-bottom: 1px solid var(--te-ink) !important; font-family: var(--te-sans) !important; }
.te-blog .post-body table td { border-bottom-color: var(--te-rule-2) !important; }

/* ---------- Bottom "More Free Tools" strip (inline-styled, injected site-wide) ---------- */
.te-blog div[style*="max-width:680px"] > p[style*="text-transform:uppercase"] { color: var(--te-rose) !important; }
.te-blog div[style*="max-width:680px"] a[style*="#FFF8F9"] { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-radius: 0 !important; text-align: left !important; }
.te-blog div[style*="max-width:680px"] a[style*="#FFF8F9"] > div:first-child { display: none !important; }
.te-blog div[style*="max-width:680px"] a[style*="#FFF8F9"] > div:nth-child(2) { font-family: var(--te-serif) !important; font-weight: 500 !important; font-size: 1rem !important; }

/* ---------- Wide tables scroll inside the column instead of widening the page on phones ---------- */
@media (max-width: 700px) {
  .te-blog .post-body table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ================= /blog/ index ================= */
.te-blogindex .page-header { text-align: left !important; }
.te-blogindex .page-title { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; font-size: var(--te-size-display) !important; line-height: 1.05 !important; letter-spacing: -0.015em; }
.te-blogindex .page-subtitle { margin: 0 !important; color: var(--te-body) !important; font-size: var(--te-size-lede) !important; }
.te-blogindex .blog-grid { gap: 0 !important; border-top: 1px solid var(--te-ink); }
.te-blogindex .blog-card { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; border-bottom: 1px solid var(--te-rule); padding: 1.6rem 0 !important; }
.te-blogindex .card-category { color: var(--te-rose) !important; font-weight: 600 !important; letter-spacing: 0.16em !important; }
.te-blogindex .card-title { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-blogindex .blog-card:hover .card-title { color: var(--te-rose) !important; }
.te-blogindex .card-excerpt { color: var(--te-body) !important; }
.te-blogindex .card-meta { color: var(--te-muted) !important; }
.te-blogindex .card-read-more { color: var(--te-ink) !important; text-decoration: underline; text-decoration-color: var(--te-rose); }
.te-blogindex .blog-cta { background: var(--te-ivory-2) !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--te-rule); border-bottom: 1px solid var(--te-rule); text-align: left !important; }
.te-blogindex .blog-cta h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-blogindex .blog-cta a { background: var(--te-ink) !important; border-radius: var(--te-radius) !important; color: var(--te-ivory) !important; }
.te-blogindex .blog-cta a:hover { background: var(--te-rose) !important; }
.te-blogindex .filter-pill { border-radius: var(--te-radius) !important; border: 1px solid var(--te-rule) !important; background: transparent !important; color: var(--te-ink) !important; font-family: var(--te-sans) !important; }
.te-blogindex .filter-pill:hover { border-color: var(--te-ink) !important; }
.te-blogindex .filter-pill.active { background: var(--te-ink) !important; border-color: var(--te-ink) !important; color: var(--te-ivory) !important; }
.te-blogindex .search-input-wrap input, .te-blogindex .search-filter-bar input { border-radius: var(--te-radius) !important; border: 1px solid var(--te-rule) !important; font-family: var(--te-sans) !important; background: var(--te-paper) !important; }
.te-blogindex .filter-pills { justify-content: flex-start !important; }

/* ================= Base layout for posts built from templates/blog/post-template.html =================
   Older posts carry this layout in their own <style>; template posts carry none, so it lives here,
   scoped to .te-blogbase so it can never shift an existing post. */
.te-blogbase *, .te-blogbase *::before, .te-blogbase *::after { box-sizing: border-box; }
body.te-blogbase { margin: 0; line-height: 1.8; -webkit-font-smoothing: antialiased; }
.te-blogbase a { color: var(--te-ink); }
.te-blogbase .top-bar { padding: 0.55rem 0; }
.te-blogbase .top-bar-inner { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.te-blogbase .top-bar a { text-decoration: none; }
.te-blogbase header { text-align: center; }
.te-blogbase header a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.te-blogbase header img { width: 36px; height: 36px; border-radius: 6px; }
.te-blogbase header .brand { font-family: var(--te-serif); font-size: 1.6rem; font-weight: 500; color: var(--te-ink); }
.te-blogbase .container { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.te-blogbase .post-category { font-size: var(--te-size-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.te-blogbase .post-title { margin: 0.6rem 0 0.8rem; }
.te-blogbase .post-body { margin-top: 2rem; }
.te-blogbase .post-body p { margin: 0 0 1.3rem; }
.te-blogbase .post-body h2 { margin: 2.6rem 0 0.9rem; }
.te-blogbase .post-body h3 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
.te-blogbase .post-body ul, .te-blogbase .post-body ol { margin: 0 0 1.3rem 1.2rem; }
.te-blogbase .quick-answer, .te-blogbase .mid-cta, .te-blogbase .highlight-box { padding: 0.3rem 0 0.3rem 1.2rem; margin: 1.6rem 0; }
.te-blogbase .quick-answer p:last-child, .te-blogbase .mid-cta p { margin: 0; }
.te-blogbase .quick-answer-label { font-size: var(--te-size-label); font-weight: 600; text-transform: uppercase; margin: 0 0 0.4rem !important; }
.te-blogbase .pullquote { font-size: 1.35rem; line-height: 1.4; padding: 1.2rem 0; margin: 2rem 0; }
.te-blogbase .product-card { padding: 1.2rem 1.3rem; margin: 1rem 0; }
.te-blogbase .product-card .swatch { width: 44px; height: 44px; border: 1px solid rgba(0, 0, 0, 0.08); margin-bottom: 0.7rem; }
.te-blogbase .product-card .product-name { font-size: 1.2rem; margin: 0 0 0.3rem; }
.te-blogbase .buy-btn, .te-blogbase .post-cta a, .te-blogbase .app-download-cta a, .te-blogbase .lead-magnet-capture button { display: inline-block; padding: 0.75rem 1.4rem; font-size: 0.95rem; cursor: pointer; }
.te-blogbase .lead-magnet-capture, .te-blogbase .app-download-cta, .te-blogbase .post-cta, .te-blogbase .quiz-cta-inline { padding: 1.6rem 1.4rem; margin: 2.2rem 0; }
.te-blogbase .lead-magnet-capture form { display: flex; gap: 0.5rem; flex-wrap: wrap; max-width: 440px; }
.te-blogbase .lead-magnet-capture input[type="email"] { flex: 1; min-width: 200px; padding: 0.7rem 0.9rem; font-size: 1rem; }
.te-blogbase .lm-hp { position: absolute; left: -9999px; }
.te-blogbase .lm-desc, .te-blogbase .lm-privacy { font-size: 0.95rem; }
.te-blogbase .faq-item summary { cursor: pointer; padding: 1rem 0; font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.te-blogbase .faq-item summary::-webkit-details-marker { display: none; }
.te-blogbase .faq-item summary::after { content: '+'; flex-shrink: 0; }
.te-blogbase .faq-item[open] summary::after { content: '\2212'; }
.te-blogbase .faq-answer p { margin: 0 0 1rem; }
.te-blogbase .further-reading { padding-top: 1.2rem; margin: 2.5rem 0 1rem; }
.te-blogbase .further-reading ul { list-style: none; margin: 0; padding: 0; }
.te-blogbase .further-reading li { padding: 0.3rem 0; }
.te-blogbase .further-reading li::before { content: '\2192'; margin-right: 0.5rem; }
.te-blogbase .further-reading a { text-decoration: none; border-bottom: 1px solid var(--te-rule); }
.te-blogbase .affiliate-note { font-size: 0.85rem; font-style: italic; }
.te-blogbase .post-nav { margin: 2rem 0 3rem; }
.te-blogbase footer { text-align: center; padding: 2rem 1.5rem; }
.te-blogbase footer p { margin: 0.3rem 0; }
.te-blogbase footer a { margin: 0 0.6rem; text-decoration: none; }