/* =========================================\n   ColorBlog — Compiled Main Stylesheet\n   ========================================= */\n\n/* --- 1. CORE LAYOUT RESETS & BASE CONFIGURATIONS --- */
html {
  box-sizing: border-box;
  font-size: 16px;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-top: 71px;
}
a {
  color: #534AB7;
  text-decoration: none;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover { opacity: 0.75; }
img {
  max-width: 100%;
  height: auto;
  display: block;
  background: transparent !important;
}
/* --- 2. GRID ARCHITECTURE & WRAPPERS --- */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; width: 100%; }
.container {
  width: 100%;
  max-width: 1140px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
  box-sizing: border-box;
}
.content-sidebar-wrap {
  display: block;
  padding-top: 0px !important;
  padding-bottom: 2rem !important;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.content-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* --- 3. NAVIGATIONAL LAYOUTS & STICKY HEADER ENGINE --- */
.site-header {
  background: #0f172a;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #e040fb, #40c4ff) 1;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.header-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; position: relative; }
.site-title a {
  font-size: 1.5rem; font-weight: 700; color: transparent;
  background: linear-gradient(90deg, #818cf8, #67e8f9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.menu-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1010; }
.hamburger-bar { width: 100%; height: 2px; background-color: #c9c3c3; border-radius: 2px; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1); }

@media (max-width: 767px) {
  .main-navigation {
    position: absolute; top: 70px; left: 0; width: 100%; background-color: #0f172a; border-bottom: 2px solid #534AB7; box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .main-navigation.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-navigation ul { list-style: none; padding: 1rem 0; display: flex; flex-direction: column; width: 100%; }
  .main-navigation li a { display: block; padding: 0.85rem 24px; color: #c9c3c3; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .main-navigation li a:hover { color: #ffffff; background-color: rgba(255,255,255,0.03); }
  .menu-toggle.is-active .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); background-color: #ffffff; }
  .menu-toggle.is-active .hamburger-bar:nth-child(2) { opacity: 0; }
  .menu-toggle.is-active .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background-color: #ffffff; }
}
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .main-navigation { display: block !important; position: static; width: auto; background: transparent; border: none; box-shadow: none; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .main-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: row; gap: 1.5rem; }
  .main-navigation a { font-size: 0.9rem; color: #c9c3c3; font-weight: 500; }
  .main-navigation a:hover { color: #ffffff; }
}
/* --- 4. STREAMFEED CARDS & EDITORIAL TYPOGRAPHY --- */
.entry-card {
  background: #ffffff; border: 1px solid #e8e8e4; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06); width: 100%; max-width: 1140px; box-sizing: border-box;
}
.entry-title { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; }
.entry-title a { color: #1a1a1a; transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.entry-title a:hover { color: #534AB7; opacity: 1; }
.entry-meta { font-size: 0.88rem; color: #6b6b6b; margin-bottom: 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding-left: 4px; }
.entry-meta span, .entry-meta .divider-pipe { display: inline-block; vertical-align: middle; }
.entry-meta .divider-pipe { margin: 0 2px; color: currentColor; }
.entry-excerpt { color: #6b6b6b; font-size: 0.88rem; }

.single-post-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 2.25rem; color: #1a1a1a; margin-top: 2rem !important; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; text-align: left; }
.entry-content { color: #1a1a1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; width: 100%; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
.entry-content p { margin-bottom: 1.25rem; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1a1a1a; font-weight: 700; line-height: 1.3; margin: 2.25rem 0 1rem 0; }
.entry-content ol { padding-left: 2rem; margin-bottom: 1.5rem; }

/* Custom Bullet overrides */
.entry-content ul { list-style: none; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.entry-content ul li { position: relative; margin-bottom: 0.6rem; line-height: 1.4; }
.entry-content ul li::before { content: "►"; position: absolute; left: -1.25rem; color: #534AB7; font-size: 0.85em; }
/* --- 5. AUTOMATED FLUID TABLE GRID MATRIX --- */
.scroll-table-wrapper { overflow-x: auto; width: 100%; display: block; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.entry-content table { width: 100% !important; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.88rem; table-layout: auto !important; }

/* Product Table Guard Engine */
.entry-content table:has(.table-product-header) { table-layout: fixed !important; width: 100% !important; max-width: 970px !important; }
@media (max-width: 1140px) { .entry-content table:has(.table-product-header) { width: max-content !important; } }
.entry-content thead { background: #ffffff !important; border-bottom: 2px solid #e8e8e4; }

/* General Purpose Headers */
.entry-content th:not(.table-product-header) { text-align: left !important; vertical-align: middle !important; padding: 10px 12px !important; font-size: 0.85rem !important; font-weight: 700 !important; color: #1a1a1a !important; }

/* Product Row Specific Headers */
.entry-content th.table-product-header { text-align: center !important; vertical-align: bottom !important; padding-bottom: 15px !important; }
.entry-content th.table-product-header:first-child { width: 170px !important; text-align: left; background: #ffffff !important; color: #1a1a1a !important; padding: 10px 5px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.entry-content th.table-product-header:not(:first-child) { width: 160px !important; text-align: center; background: #ffffff !important; padding: 10px 2px; }
.entry-content th .product-title { font-size: 0.85rem !important; font-weight: 600 !important; line-height: 1.3 !important; color: #1a1a1a !important; margin: 10px 0 4px 0 !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; height: 2.6em !important; }

/* Affiliate Button Frameworks */
.entry-content th .btn-table-buy { display: inline-block !important; background: #FF9900 !important; color: #ffffff !important; font-weight: 700 !important; font-size: 0.78rem !important; padding: 6px 12px !important; border-radius: 4px !important; text-decoration: none !important; margin-top: 12px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; transition: background-color 0.2s ease !important; }
.entry-content th .btn-table-buy:hover { background: #e68a00 !important; }
.entry-content th img { margin: 0 auto !important; width: 140px !important; height: auto !important; display: block !important; object-fit: contain; }

/* Shared Body Rows Layout */
.entry-content td { padding: 10px 12px; vertical-align: middle; word-wrap: break-word; white-space: normal; line-height: 1.4; border-bottom: 1px solid #e8e8e4; }
.entry-content tr:nth-child(even) { background: #f7f7f5; }
.entry-content tr:hover { background: #EEEDFE; }
/* --- 6. MINIMALIST PASTEL PROS & CONS BOXES --- */
.pros-cons, .premium-review-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; width: 100%; }
.pros-cons-pros { background: #f0fdf4 !important; border: 1px solid #dcfce7 !important; padding: 1.25rem; border-radius: 6px; }
.pros-cons-cons { background: #fef2f2 !important; border: 1px solid #fee2e2 !important; padding: 1.25rem; border-radius: 6px; }

.pros-cons-pros h3 { color: #16a34a !important; margin-top: 0 !important; margin-bottom: 0.75rem !important; }
.pros-cons-cons h3 { color: #dc2626 !important; margin-top: 0 !important; margin-bottom: 0.75rem !important; }

.pros-cons ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.pros-cons ul li { position: relative !important; margin-bottom: 0.6rem !important; padding-left: 1.4rem !important; }
.pros-cons ul li::before { content: none !important; }
.pros-cons ul li::after { position: absolute !important; left: 0 !important; font-weight: 400 !important; }

/* Vector Checks & Clean Crosses (Perfectly Balanced Sizes and Heights) */
.pros-cons-pros ul li::after { content: "✓" !important; top: 1px !important; color: #16a34a !important; font-size: 1rem !important; }
.pros-cons-cons ul li::after { content: "✗" !important; top: 1px !important; color: #dc2626 !important; font-size: 1rem !important; }
/* --- 7. REVIEWS, RATINGS, AUTHOR & DISCLOSURE CARDS --- */
.entry-content blockquote { border-left: 3px solid #534AB7; background: #EEEDFE; padding: 0.75rem 1.25rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0; font-style: italic; color: #6b6b6b; }
.entry-content code { font-family: 'Courier New', Courier, monospace; font-size: 0.88em; background: #f7f7f5; padding: 2px 6px; border-radius: 4px; border: 1px solid #e8e8e4; }
.entry-content pre { background: #1a1a1a; color: #e8e8e8; font-family: 'Courier New', Courier, monospace; padding: 1.25rem; overflow-x: auto; margin-bottom: 1.5rem; }
.wp-block-image figcaption, .wp-caption-text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.78rem; color: #6b6b6b; text-align: center; margin-top: 0.5rem; padding: 0.25rem 0.75rem; border-left: 2px solid #534AB7; }
.entry-content img { border-radius: 0 !important; max-width: 100%; height: auto; margin: 1.5rem 0; }
hr { border: none; border-top: 1px solid #e8e8e4; margin: 2rem 0; }
strong { font-weight: 600; }

.star-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.star-rating .stars { color: #f59e0b; }
.star-rating .score { font-weight: 700; color: #1a1a1a; }

.review-box { background: #EEEDFE; border: 1px solid #e8e8e4; border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.review-box h3 { margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.review-box p:last-child, .review-box ul:last-child { margin-bottom: 0; }
.review-box-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #534AB7; margin-bottom: 0.6rem; display: block; }

.review-cta { background: #0f172a; color: #fff; border-radius: 8px; padding: 1.5rem; margin: 2rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.review-cta-score { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #67e8f9; margin-bottom: 4px; display: block; }
.review-cta-number { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.review-cta-number span { font-size: 1rem; color: #94a3b8; }
.review-cta-name { font-size: 0.88rem; color: #cbd5e1; margin-top: 4px; display: block; }
.review-cta a, .btn-amazon { display: inline-block; background: #FF9900; color: #fff; font-weight: 700; font-size: 0.88rem; padding: 12px 24px; border-radius: 8px; text-decoration: none; }

/* Rating Visual Tracks (Optimized: Thinner, Orange Fill, Side Padding) */
.rating-bars {
  margin: 1.5rem 0;
  padding: 0 10px; /* Adds subtle breathing room on both the left and right sides */
}
.rating-bar-item { margin-bottom: 1rem; }
.rating-bar-label { font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; }

/* Thinned out from 8px down to 5px for a sleeker, minimalist design */
.rating-bar-track { background: #e8e8e4; border-radius: 999px; height: 5px; }
.rating-bar-fill { background: #FF9900; height: 5px; border-radius: 999px; } /* Swapped purple to high-conversion orange */

.author-box { display: flex; gap: 1.25rem; align-items: flex-start; background: #f7f7f5; border: 1px solid #e8e8e4; border-radius: 8px; padding: 1.25rem; margin: 2rem 0 0 0; }

/* FIXED: Added !important to force a perfect circular crop over global resets */
.author-box img { width: 72px; height: 72px; border-radius: 50% !important; object-fit: cover; flex-shrink: 0; min-height: unset; margin: 0; }

.author-box h3 { margin: 0 0 0.35rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; }
.author-box-meta { font-size: 0.78rem; color: #6b6b6b; margin-bottom: 0.75rem; display: block; }
.author-box p { font-size: 0.88rem; margin-bottom: 0; }

.research-methodology-container, .author-box-method { background: #f7f7f5; border: 1px solid #e8e8e4; border-top: none; border-radius: 0 0 8px 8px; padding: 1rem 1.25rem; font-size: 0.78rem; color: #6b6b6b; line-height: 1.7; margin: 0 0 1.5rem 0; }
.affiliate-disclosure-container, .affiliate-disclosure { font-size: 0.78rem; color: #6b6b6b; font-style: italic; background: #f7f7f5; border: 1px solid #e8e8e4; padding: 1rem; border-radius: 8px; line-height: 1.7; margin: 1.5rem 0; }
.research-methodology-container p, .affiliate-disclosure-container p { margin: 0; font-size: inherit; color: inherit; font-style: inherit; }
.entry-tags { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e8e8e4; }
.entry-tags a { display: inline-block; background: #f7f7f5; border: 1px solid #e8e8e4; border-radius: 4px; padding: 3px 10px; font-size: 0.78rem; color: #6b6b6b; margin: 0 4px 4px 0; text-decoration: none; }
/* --- 8. FORMS, CANVAS GENERATORS & STRUCTURAL MEDIA OVERRIDES --- */
.custom-contact-form p { margin-bottom: 1.25rem; }
.custom-contact-form label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.custom-contact-form input, .custom-contact-form textarea { width: 100%; padding: 12px; border: 1px solid #e8e8e4; border-radius: 8px; background: #ffffff; color: #1a1a1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-sizing: border-box; }
.contact-submit-btn { background: #534AB7; color: #ffffff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.contact-submit-btn:hover { opacity: 0.9; }

.landing-fullwidth-canvas-active .site-content > .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.landing-fullwidth-canvas-active .content-sidebar-wrap { padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.landing-fullwidth-canvas-active .site-content { padding-top: 0px !important; margin-top: -71px !important; }
.landing-fullwidth-container { width: 100%; margin: 0; padding: 0; }
/* --- 9. GLOBAL SITE FOOTER LAYOUT & RESPONSIVE QUERIES --- */
.site-footer { background: #0f172a; color: #c9c3c3; border-top: 1px solid rgba(255,255,255,0.08); padding: 4rem 0 2rem 0; margin-top: auto; }
.footer-widgets-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-footer .widget-title { color: #c9c3c3; font-size: 0.85rem; margin-bottom: 1.25rem; }
.site-footer ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.site-footer li { margin-bottom: 0.65rem !important; }
.site-footer p, .site-footer li, .site-footer span, .site-footer div:not(.widget-title) { font-size: 13px !important; }
.site-footer a { color: #c9c3c3 !important; font-size: 14px !important; }
.site-footer a:hover { color: #ffffff !important; }
.site-info { font-size: 13px !important; }
.footer-bottom-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding-top: 2rem; }
.footer-social-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.social-icon-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #c9c3c3 !important; transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.social-icon-link:hover { opacity: 1 !important; background-color: rgba(255, 255, 255, 0.1) !important; border-color: #ffffff !important; }
.social-icon-link svg { width: 16px !important; height: 16px !important; fill: currentColor !important; display: block !important; }

@media (max-width: 640px) { .author-box { flex-direction: column; } }
@media (min-width: 768px) { .entry-card { padding: 2.5rem; margin-bottom: 2rem; } .footer-widgets-grid { grid-template-columns: repeat(4, 1fr); } .footer-bottom-row { flex-direction: row; justify-content: space-between; } }