/* ============================================================
   electrotalks — single-post template layer
   Loaded by electrotalks-design-12-single.php (after ds.css).
   Scoped to body.single-post. Uses tokens from electrotalks-ds.css.
   ============================================================ */

/* smooth jump-links + sticky-header offset for the TOC */
html{scroll-behavior:smooth}
.single-post .entry-content h2{scroll-margin-top:96px}

/* ---- keep H1, drop Astra's stock banner meta + legacy featured image ---- */
.single-post .entry-header .ast-single-post-meta,
.single-post .entry-header .entry-meta{display:none}
.single-post .post-thumb-img-content,
.single-post .entry-header .post-thumb{display:none!important}

/* tighten the gap between the nav and the article */
.single-post .site-content .ast-container{padding-top:30px}
.single-post #primary{padding-top:0;margin-top:0!important}
.single-post .entry-header{margin:0;padding:0}
.single-post .entry-header .entry-title{margin-top:0;margin-bottom:0}
.et-hero{margin:2px 0 28px}
.single-post .entry-title{font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--text-1);margin:0 0 4px}

/* ============================================================
   HERO (breadcrumbs → meta → author → image), full width
   ============================================================ */
.et-hero{margin:6px 0 30px;font-family:var(--font-sans)}
.et-hero .et-breadcrumbs{margin:0 0 14px}
.et-hero .et-breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:13px;color:var(--text-3)}
.et-hero .et-breadcrumbs li{display:flex;align-items:center;gap:8px}
.et-hero .et-breadcrumbs li:not(:last-child)::after{content:"›";color:var(--line-strong)}
.et-hero .et-breadcrumbs a{color:var(--text-2);text-decoration:none}
.et-hero .et-breadcrumbs a:hover{color:var(--accent)}
.et-hero .et-breadcrumbs li[aria-current]{color:var(--text-1);font-weight:600}

.et-hmeta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;font-size:13.5px;color:var(--text-2);margin:0 0 18px}
.et-hmeta .it{display:inline-flex;align-items:center;gap:7px}
.et-hmeta svg{width:15px;height:15px;stroke:var(--text-3);fill:none;stroke-width:2}
.et-hmeta .et-catpill{background:var(--accent-tint);color:var(--accent-700);font-weight:600;padding:4px 12px;border-radius:var(--r-pill);text-decoration:none;font-size:12.5px}
.et-hmeta .et-catpill:hover{background:var(--accent);color:#fff}

.et-hauthor{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 26px}
.et-hauthor .av{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;letter-spacing:.02em;background:linear-gradient(135deg,var(--accent),var(--ww-periwinkle))}
.et-hauthor .nm{font-weight:700;color:var(--text-1);font-size:15px;line-height:1.25}
.et-hauthor .ro{color:var(--text-3);font-size:13px}

.et-himg{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:16/9;background:var(--surface-2)}
.et-himg img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   2-COLUMN BODY + STICKY SIDEBAR
   ============================================================ */
.et-postwrap{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:48px;align-items:start}
.et-postmain{min-width:0}
.et-postside{position:sticky;top:96px;margin-top:88px;display:flex;flex-direction:column;gap:22px}
.et-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card)}

/* ---- TOC ---- */
.et-toc{padding:20px 22px}
.et-toc>.t{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px}
.et-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.et-toc li{margin:0 0 2px}
.et-toc a{display:flex;gap:10px;padding:7px 9px;border-radius:9px;font-size:14px;line-height:1.35;color:var(--text-2);text-decoration:none;transition:all var(--dur) var(--ease)}
.et-toc a::before{counter-increment:toc;content:counter(toc);color:var(--accent);font-weight:700;font-size:12.5px;flex:none}
.et-toc a:hover{background:var(--accent-tint);color:var(--text-1)}

/* ---- sidebar search ---- */
.et-sidesearch{padding:18px 20px}
.et-sidesearch .t{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin:0 0 12px}
.et-sidesearch form{display:flex;gap:8px}
.et-sidesearch input[type=search]{flex:1;min-width:0;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:11px 16px;font-family:inherit;font-size:14px;color:var(--text-1);outline:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.et-sidesearch input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.et-sidesearch button{flex:none;border:none;background:var(--accent);color:#fff;font-family:inherit;font-weight:700;font-size:14px;border-radius:var(--r-pill);padding:0 20px;min-height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur) var(--ease)}
.et-sidesearch button:hover{background:var(--accent-hover)}
.et-sidesearch button svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.4}

/* ---- related posts ---- */
.et-related{padding:18px 20px}
.et-related .t{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px}
.et-related a.it{display:flex;gap:12px;align-items:center;padding:8px 0;text-decoration:none;border-top:1px solid var(--line)}
.et-related a.it:first-of-type{border-top:none;padding-top:0}
.et-related .th{width:62px;height:54px;border-radius:10px;flex:none;object-fit:cover;background:var(--surface-2)}
.et-related .tt{font-size:13.5px;font-weight:600;line-height:1.32;color:var(--text-1);transition:color var(--dur) var(--ease);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.et-related a.it:hover .tt{color:var(--accent)}

/* ---- newsletter box ---- */
.et-newsbox{background:var(--ink);border-radius:var(--r-md);padding:24px 22px;color:#fff;box-shadow:var(--shadow-md)}
.et-newsbox h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0 0 8px;color:#fff}
.et-newsbox p{font-size:13.5px;line-height:1.5;color:var(--on-dark-2);margin:0 0 16px}
.et-newsbox form{display:flex;flex-direction:column;gap:10px}
.et-newsbox input[type=email]{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;border-radius:var(--r-pill);padding:12px 18px;font-family:inherit;font-size:14px;outline:none}
.et-newsbox input[type=email]::placeholder{color:var(--on-dark-3)}
.et-newsbox input[type=email]:focus{border-color:var(--accent);background:rgba(255,255,255,.11)}
.et-newsbox button{border:none;background:var(--accent);color:#fff;border-radius:var(--r-pill);padding:12px 18px;font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;transition:background var(--dur) var(--ease)}
.et-newsbox button:hover{background:var(--accent-hover)}
.et-newsbox .done{font-size:13.5px;color:#fff;margin:0;display:none}
.et-newsbox.ok form{display:none}
.et-newsbox.ok .done{display:block}

/* ============================================================
   COMPARISON TABLE REDESIGN
   ============================================================ */
.single-post .entry-content figure.wp-block-table,
.single-post .entry-content .et-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:28px 0;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.single-post .entry-content table{border-collapse:collapse;width:100%;margin:0;font-size:14.5px;background:#fff;border:none}
.single-post .entry-content table thead th{background:var(--accent);color:#fff;font-weight:700;text-align:left;padding:14px 16px;border:none;letter-spacing:-.01em;vertical-align:middle}
.single-post .entry-content table tbody td{padding:13px 16px;border:none;border-top:1px solid var(--line);color:var(--text-2);vertical-align:top;line-height:1.5}
.single-post .entry-content table tbody tr:nth-child(even){background:var(--surface-2)}
.single-post .entry-content table tbody tr:hover{background:var(--accent-tint)}
.single-post .entry-content table a{color:var(--accent-700);font-weight:600;text-decoration:none}
.single-post .entry-content table a:hover{text-decoration:underline}

/* ============================================================
   RECOLOR ASTRA CHROME → teal (scoped to single posts)
   ============================================================ */
.single-post .comment-form input#submit,
.single-post .comment-form .submit,
.single-post #commentform input[type=submit]{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;border-radius:var(--r-pill)!important;padding:12px 26px!important;font-weight:700!important;transition:background var(--dur) var(--ease)}
.single-post .comment-form input#submit:hover,
.single-post #commentform input[type=submit]:hover{background:var(--accent-hover)!important}
.single-post .post-navigation a,
.single-post .nav-links a,
.single-post .ast-author-details a,
.single-post .widget_recent_entries a{color:var(--accent)}
.single-post .post-navigation a:hover,
.single-post .nav-links a:hover{color:var(--accent-hover)}

/* --- white text/icons on teal + dark surfaces (beat Astra .entry-content) --- */
.single-post .et-newsbox h3{color:#fff!important}
.single-post .et-newsbox p{color:rgba(255,255,255,.85)!important}
.single-post .et-newsbox .done{color:#fff!important}
.single-post .et-newsbox button{color:#fff!important}
.single-post .et-sidesearch button,
.single-post .et-sidesearch button svg{color:#fff!important;stroke:#fff!important}
.single-post .et-sidesearch button svg{fill:none!important}
.single .post-navigation a,
.single-post .post-navigation a{color:var(--accent)!important}

/* ============================================================
   AUTHOR BAND (spread)
   ============================================================ */
.et-authorband{display:flex;gap:22px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 32px;margin:44px 0 8px}
.et-authorband .av{width:72px;height:72px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:24px;background:linear-gradient(135deg,var(--accent),var(--ww-periwinkle))}
.et-authorband .ab-body{flex:1;min-width:0}
.et-authorband .ab-name{font-size:18px;font-weight:700;color:var(--text-1);margin:0 0 2px}
.et-authorband .ab-role{font-size:13px;color:var(--accent-700);font-weight:600;margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}
.et-authorband .ab-bio{font-size:15px;line-height:1.6;color:var(--text-2);margin:0;max-width:64ch}
.et-authorband .ab-bio a{color:var(--accent);font-weight:600;text-decoration:none}
.et-authorband .ab-bio a:hover{text-decoration:underline}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* inline TOC copy (shown only on mobile, right under the hero) */
.et-toc-inline{display:none}
@media(max-width:1000px){
  .et-postwrap{grid-template-columns:1fr;gap:32px}
  .et-postside{position:static;top:auto;margin-top:0}
  .et-toc-inline{display:block;margin:4px 0 2px}
  .et-postside .et-toc{display:none}        /* sidebar TOC hidden; inline one shows at top */
  .et-postside .et-sidesearch{display:none} /* search moves to the nav on mobile */
  .et-himg{aspect-ratio:16/10}
}
@media(max-width:560px){
  .et-authorband{flex-direction:column;gap:14px;padding:22px 20px}
  .et-hauthor{margin-bottom:20px}
  .et-himg{aspect-ratio:4/3}
}

/* ============================================================
   COMMERCIAL ROUND-UPS — WP Table Builder restyle + product images
   (product/comparison posts; informational posts are unaffected)
   ============================================================ */
/* table shell (WPTB reconstructs to div.wptb-table-container > table.wptb-table) */
.single-post .et-postmain .wptb-table-container{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--line)}
.single-post .et-postmain .wptb-table{width:100%}
.single-post .et-postmain .wptb-table td{border-color:var(--line)!important}
/* black header / star bands (inline bg on <td>/<tr>; formats vary: rgb(0,0,0) or #000000 shorthand) -> site teal */
.single-post .et-postmain .wptb-table td[style*="rgb(0, 0, 0)"],
.single-post .et-postmain .wptb-table td[style*="rgb(0,0,0)"],
.single-post .et-postmain .wptb-table td[style*="background: #000"],
.single-post .et-postmain .wptb-table td[style*="background:#000"],
.single-post .et-postmain .wptb-table td[style*="background-color: #000"],
.single-post .et-postmain .wptb-table td[style*="background-color:#000"],
.single-post .et-postmain .wptb-table tr[style*="rgb(0, 0, 0)"],
.single-post .et-postmain .wptb-table tr[style*="background: #000"]{background:var(--accent)!important;background-color:var(--accent)!important}
.single-post .et-postmain .wptb-table td[style*="rgb(0, 0, 0)"] p,
.single-post .et-postmain .wptb-table td[style*="rgb(0,0,0)"] p,
.single-post .et-postmain .wptb-table td[style*="background: #000"] p,
.single-post .et-postmain .wptb-table td[style*="background:#000"] p{color:#fff!important}
/* "Check Amazon" buttons (div.wptb-button, styled via plugin <style>) -> Amazon orange */
.single-post .et-postmain .wptb-button{background:#FF9900!important;border-radius:8px!important}
.single-post .et-postmain .wptb-button:hover{background:#E88A00!important}
.single-post .et-postmain .wptb-button .wptb-button-text-container p,
.single-post .et-postmain .wptb-button p{color:#fff!important}
/* rating stars -> gold (svg fill:currentColor) */
.single-post .et-postmain .wptb-filled-rating-star{color:#FFB400!important}
/* keep full-width / wide / media-text blocks INSIDE the article column
   (these break out to the viewport edge by default -> images land far-left) */
.single-post .et-postmain .alignfull,
.single-post .et-postmain .alignwide,
.single-post .et-postmain .wp-block-media-text{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;left:auto!important;right:auto!important;inset-inline:auto!important}
/* product images: cap + center; reset images inside tables */
.single-post .et-postmain img{max-width:100%;height:auto}
.single-post .et-postmain img.size-full{max-width:360px;display:block;margin:18px auto}
.single-post .et-postmain .wp-block-media-text img{max-width:100%}
.single-post .et-postmain .wptb-preview-table img{max-width:100%!important;display:inline-block;margin:0}

/* ---- Verdict callouts (Buy it = green, It depends = orange, Skip it = red) ---- */
.single-post .et-postmain .et-verdict{padding:13px 18px;border-radius:10px;margin:20px 0;border-left:5px solid}
.single-post .et-postmain .et-verdict-buy{background:#ECF6F0;border-left-color:#1F8A5B}
.single-post .et-postmain .et-verdict-buy strong{color:#1F8A5B}
.single-post .et-postmain .et-verdict-depends{background:#FBF2E4;border-left-color:#E0922F}
.single-post .et-postmain .et-verdict-depends strong{color:#C9781C}
.single-post .et-postmain .et-verdict-skip{background:#FBEDEC;border-left-color:#D8403A}
.single-post .et-postmain .et-verdict-skip strong{color:#C5352F}