/* D3Decoded conversion + E-E-A-T components.
   Loaded on every page; classes are namespaced to avoid Tailwind collisions. */

/* ---------- Inline FTC disclosure (above-the-fold, near first affiliate link) ---------- */
.ftc-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #f59e0b;
  border-radius: 0.5rem;
  padding: 0.55rem 0.85rem;
  margin: 0 0 1.25rem;
}
.ftc-inline svg { flex-shrink: 0; margin-top: 1px; }
.ftc-inline a { color: #0369a1; text-decoration: underline; font-weight: 600; }
html.dark .ftc-inline { background: #0f172a; border-color: #334155; border-left-color: #f59e0b; color: #cbd5e1; }
html.dark .ftc-inline a { color: #7dd3fc; }

/* Hero variant (white text on dark hero background) */
.ftc-inline--hero {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
}
.ftc-inline--hero a { color: #fcd34d; }

/* ---------- Byline / author block ---------- */
.byline {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}
.byline__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0369a1 0%, #0d9488 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.byline__meta { min-width: 0; flex: 1; }
.byline__name { font-size: 0.875rem; font-weight: 700; color: #0f172a; margin: 0; }
.byline__name a { color: inherit; text-decoration: none; border-bottom: 1px dotted #94a3b8; }
.byline__name a:hover { color: #0369a1; border-bottom-color: #0369a1; }
.byline__credentials { font-size: 0.75rem; color: #64748b; margin: 0.1rem 0 0; line-height: 1.4; }
.byline__updated { font-size: 0.7rem; color: #64748b; margin: 0.25rem 0 0; }
.byline__updated strong { color: #334155; font-weight: 600; }
html.dark .byline { background: #1e293b; border-color: #334155; }
html.dark .byline__name { color: #f1f5f9; }
html.dark .byline__credentials, html.dark .byline__updated { color: #94a3b8; }
html.dark .byline__updated strong { color: #cbd5e1; }

/* ---------- Editor's Top Pick banner (above-the-fold on articles) ---------- */
.top-pick {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  margin: 0 0 2rem;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
  border: 2px solid #f59e0b;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -10px rgba(245, 158, 11, 0.35);
  position: relative;
}
.top-pick__ribbon {
  position: absolute;
  top: -10px;
  left: 1rem;
  background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.35);
}
.top-pick__img-wrap { display: flex; justify-content: center; }
.top-pick__img { max-height: 130px; width: auto; object-fit: contain; }
.top-pick__body { display: flex; flex-direction: column; gap: 0.35rem; }
.top-pick__title { font-size: 1.125rem; font-weight: 800; color: #0f172a; margin: 0; line-height: 1.3; }
.top-pick__why { font-size: 0.875rem; color: #334155; margin: 0.15rem 0 0.35rem; }
.top-pick__meta { font-size: 0.75rem; color: #475569; margin: 0; }
.top-pick__meta strong { color: #0f172a; }
.top-pick__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  min-height: 48px;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 0.75rem;
  text-decoration: none;
  box-shadow: 0 6px 15px -3px rgba(234, 88, 12, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.top-pick__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -3px rgba(234, 88, 12, 0.55); }
@media (min-width: 640px) {
  .top-pick { grid-template-columns: 140px 1fr; padding: 1.5rem 1.75rem; }
}
html.dark .top-pick { background: linear-gradient(135deg, #2a1a04 0%, #1e293b 60%); border-color: #fcd34d; }
html.dark .top-pick__title { color: #f8fafc; }
html.dark .top-pick__why { color: #cbd5e1; }
html.dark .top-pick__meta { color: #94a3b8; }
html.dark .top-pick__meta strong { color: #fcd34d; }

/* ---------- Article comparison table ---------- */
.compare-wrap {
  margin: 1.25rem 0 2rem;
  overflow-x: auto;
  border: 2px solid #cbd5e1;
  border-radius: 1rem;
  background: #ffffff;
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}
.compare-table thead tr { background: #0c4a6e; color: #ffffff; }
.compare-table th, .compare-table td { padding: 0.75rem 0.85rem; vertical-align: middle; }
.compare-table tbody tr { border-top: 1px solid #e2e8f0; }
.compare-table tbody tr:nth-child(odd) { background: #f8fafc; }
.compare-table .product-cell {
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 170px;
}
.compare-table .product-cell img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border-radius: 0.4rem;
  padding: 2px;
  border: 1px solid #e2e8f0;
}
.compare-table .rating { color: #b45309; font-weight: 700; white-space: nowrap; }
.compare-table .cta-cell { text-align: center; min-width: 150px; }
.compare-table .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  background: #ea580c;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 8px -2px rgba(234, 88, 12, 0.45);
  transition: background 0.15s ease, transform 0.15s ease;
}
.compare-table .cta-btn:hover { background: #c2410c; transform: translateY(-1px); }
html.dark .compare-wrap { background: #1e293b; border-color: #475569; }
html.dark .compare-table tbody tr:nth-child(odd) { background: #0f172a; }
html.dark .compare-table tbody tr { border-top-color: #334155; }
html.dark .compare-table .product-cell { color: #f1f5f9; }
html.dark .compare-table .product-cell img { background: #fff; border-color: #475569; }
html.dark .compare-table td { color: #cbd5e1; }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  border-top: 2px solid #f59e0b;
  box-shadow: 0 -8px 20px -8px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sticky-cta.is-visible { display: flex; }
.sticky-cta__img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; background: #fff; border-radius: 0.4rem; padding: 2px; border: 1px solid #e2e8f0; }
.sticky-cta__text { flex: 1; min-width: 0; line-height: 1.25; }
.sticky-cta__label { display: block; font-size: 0.65rem; font-weight: 700; color: #ea580c; text-transform: uppercase; letter-spacing: 0.05em; }
.sticky-cta__title { display: block; font-size: 0.85rem; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  border-radius: 0.6rem;
  text-decoration: none;
  box-shadow: 0 4px 12px -2px rgba(234, 88, 12, 0.5);
}
.sticky-cta__btn:hover { filter: brightness(1.05); }
@media (min-width: 1024px) { .sticky-cta { display: none !important; } }
html.dark .sticky-cta { background: rgba(15, 23, 42, 0.97); border-top-color: #fcd34d; }
html.dark .sticky-cta__img { background: #fff; }
html.dark .sticky-cta__title { color: #f1f5f9; }

/* Bottom padding on body so sticky CTA doesn't cover content on mobile */
@media (max-width: 1023px) {
  body.has-sticky-cta { padding-bottom: 78px; }
}

/* ---------- Trust badge "Editorial standards" ---------- */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
  text-decoration: none;
}
.trust-badge:hover { background: #cffafe; color: #155e75; }
.trust-badge svg { width: 12px; height: 12px; }
html.dark .trust-badge { background: #0c2035; color: #67e8f9; border-color: #155e75; }

/* ---------- Inline email capture (mid-article) ---------- */
.email-inline {
  margin: 2.25rem 0;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(135deg, #ecfeff 0%, #f0f9ff 100%);
  border: 2px solid #67e8f9;
  border-radius: 1rem;
}
.email-inline h3 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: #0c4a6e;
}
.email-inline p { margin: 0 0 0.9rem; font-size: 0.875rem; color: #334155; }
.email-inline form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.email-inline input[type="email"] {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: #fff;
  color: #0f172a;
}
.email-inline input[type="email"]:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18); }
.email-inline button {
  min-height: 44px;
  padding: 0 1.1rem;
  background: #0369a1;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}
.email-inline button:hover { background: #075985; }
.email-inline .email-inline__legal { font-size: 0.7rem; color: #64748b; margin: 0.6rem 0 0; }
html.dark .email-inline { background: linear-gradient(135deg, #0c2035 0%, #0f172a 100%); border-color: #155e75; }
html.dark .email-inline h3 { color: #67e8f9; }
html.dark .email-inline p { color: #cbd5e1; }
html.dark .email-inline input[type="email"] { background: #1e293b; border-color: #334155; color: #f1f5f9; }
html.dark .email-inline .email-inline__legal { color: #94a3b8; }

/* ---------- Larger tap target for article Check-Amazon buttons ---------- */
.article-prose a.cta-amazon,
.article-prose .product-callout a[href*="amzn.to"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.1rem;
  font-size: 0.875rem;
}