/* =====================================================================
   a4e-blog / single.css  (depends on base.css)
   1. page frame around the Elementor header
   2. neutralisers for the host theme (Hello Elementor reset/theme + Elementor kit 4453)
   3. small additions that are not in the P02 reference CSS
   Specificity is raised with .a4e-article on purpose: the host sets button, table, link
   and heading styles with element selectors, and :hover rules on buttons.
   ===================================================================== */

/* 1. Frame --------------------------------------------------------- */
body.a4e-blog-single{margin:0;background:var(--a4e-bg-page)}
/* Sticky offset: header height (base.css) + WP admin bar (fixed above 600px). single.js overwrites --a4e-sticky-top with the measured value. */
body.admin-bar.a4e-blog-single{--a4e-sticky-top:calc(var(--a4e-header-h) + 32px)}
@media (max-width:782px){ body.admin-bar.a4e-blog-single{--a4e-sticky-top:calc(var(--a4e-header-h) + 46px)} }
@media (max-width:600px){ body.admin-bar.a4e-blog-single{--a4e-sticky-top:var(--a4e-header-h)} }
.a4e-site-header{position:relative;z-index:30}
.a4e-skip{position:absolute;left:8px;top:-60px;z-index:100000;background:var(--a4e-ink);color:#fff;padding:10px 16px;border-radius:var(--a4e-r-sm);font:600 14px/1.2 var(--a4e-font-body);text-decoration:none}
.a4e-skip:focus{top:8px}
.a4e-article{overflow-x:clip}
.a4e-hero--noimg{padding-bottom:var(--a4e-s-8)}
.a4e-admin-note{background:#FFF6DD;border-bottom:1px solid var(--a4e-warn-line);color:var(--a4e-warn-ink);font:13px/1.4 var(--a4e-font-body);padding:6px 16px}
.a4e-admin-note a{color:var(--a4e-warn-ink);text-decoration:underline}
.a4e-missing{border:1px dashed var(--a4e-bad);color:var(--a4e-bad);background:var(--a4e-bad-wash);padding:8px 12px;margin:12px 0;font-size:var(--a4e-fs-sm);border-radius:var(--a4e-r-sm)}
.a4e-price{font-weight:var(--a4e-body-weight-strong);font-variant-numeric:tabular-nums}
.a4e-price del{color:var(--a4e-text-muted);font-weight:400;margin-right:4px}
.a4e-price ins{text-decoration:none;color:var(--a4e-bad)}
.a4e-hero__img img.a4e-hero__photo{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:var(--a4e-r-sm);box-shadow:var(--a4e-shadow-lift);background:var(--a4e-surface-d)}
.a4e-product__img{display:block;width:76px;height:76px;object-fit:contain;border-radius:var(--a4e-r-sm);background:var(--a4e-paper)}
.a4e-product-link{margin:0 0 var(--a4e-s-4)}

/* 2. Neutralisers --------------------------------------------------- */
/* Links: the Elementor kit paints every <a> with the brand cyan (unreadable on white) */
.a4e-article .a4e-prose a{color:var(--a4e-link)}
.a4e-article .a4e-prose a:hover{color:var(--a4e-link-hover)}
.a4e-article .a4e-crumb a{color:var(--a4e-on-dark-2)}
.a4e-article .a4e-crumb a:hover{color:#fff}
.a4e-article .a4e-toc a{color:var(--a4e-text)}
.a4e-article .a4e-toc a:hover{color:var(--a4e-link)}
.a4e-article .a4e-toc a[aria-current="true"]{color:var(--a4e-text-strong)}
.a4e-article a.a4e-btn, .a4e-article a.a4e-btn:hover{color:var(--a4e-btn-text)!important;text-decoration:none!important}
.a4e-article a.a4e-btn--secondary, .a4e-article a.a4e-btn--secondary:hover{color:var(--a4e-text-strong)!important}
.a4e-article a.a4e-btn--ghost, .a4e-article a.a4e-btn--ghost:hover{color:#fff!important}
.a4e-article .a4e-product__name a, .a4e-article .a4e-product__name a:hover{color:var(--a4e-text-strong)}
.a4e-article .a4e-mbar__name, .a4e-article .a4e-mbar__name:hover{color:#fff}
.a4e-article .a4e-verdict a, .a4e-article .a4e-verdict a:hover{color:var(--a4e-cyan)}
.a4e-article .a4e-card, .a4e-article .a4e-card:hover{color:inherit;text-decoration:none}
.a4e-article .a4e-cta a:not(.a4e-btn){color:var(--a4e-cyan)}

/* Buttons: Hello paints every <button> with a pink outline and a pink :hover fill */
.a4e-article button.a4e-anchor, .a4e-article button.a4e-mbar__close{
  -webkit-appearance:none;appearance:none;margin:0;text-transform:none;letter-spacing:0;white-space:normal;
  transition:color var(--a4e-t-fast),border-color var(--a4e-t-fast),opacity var(--a4e-t-fast)}
.a4e-article button.a4e-anchor{display:inline-block;padding:0;background:var(--a4e-paper);border:1px solid var(--a4e-border);border-radius:var(--a4e-r-sm);color:var(--a4e-text-muted);font:600 14px/1 var(--a4e-font-body);text-align:center}
.a4e-article button.a4e-anchor:hover, .a4e-article button.a4e-anchor:focus{background:var(--a4e-paper);color:var(--a4e-link);border-color:var(--a4e-line-strong)}
.a4e-article button.a4e-anchor[data-copied="true"], .a4e-article button.a4e-anchor[data-copied="true"]:hover{color:var(--a4e-ok);border-color:var(--a4e-ok)}
.a4e-article button.a4e-mbar__close{display:inline-block;padding:0;background:none;border:0;border-radius:0;color:var(--a4e-on-dark-muted);font-size:20px;line-height:1}
.a4e-article button.a4e-mbar__close:hover, .a4e-article button.a4e-mbar__close:focus{background:none;color:#fff}

/* Headings and paragraphs: keep the article's own sizes and spacing over the host's rem-based ones */
.a4e-article .a4e-hero h1{margin:var(--a4e-s-3) 0 var(--a4e-s-4);font-size:var(--a4e-fs-h1);line-height:var(--a4e-display-lh);color:#fff}
.a4e-article .a4e-prose h2{margin:var(--a4e-s-8) 0 var(--a4e-s-3);font-size:var(--a4e-fs-h2);line-height:var(--a4e-lh-tight);color:var(--a4e-text-strong)}
.a4e-article .a4e-prose>h2:first-child{margin-top:0}
.a4e-article .a4e-prose h3{margin:var(--a4e-s-6) 0 var(--a4e-s-2);font-size:var(--a4e-fs-h3);line-height:var(--a4e-lh-tight);color:var(--a4e-text-strong)}
.a4e-article .a4e-faq>h2{margin-top:var(--a4e-s-4)}
.a4e-article .a4e-related__title{margin:0 0 var(--a4e-s-4);font-size:var(--a4e-fs-h3);line-height:var(--a4e-lh-tight)}
.a4e-article .a4e-card__title{margin:0;font-size:20px;line-height:1.15}
.a4e-article p{margin-block-start:0}
.a4e-article .a4e-prose p{margin-block-end:var(--a4e-s-4)}
.a4e-article .a4e-product p, .a4e-article .a4e-answer p, .a4e-article .a4e-author p, .a4e-article .a4e-steps p, .a4e-article .a4e-checklist p, .a4e-article .a4e-note p, .a4e-article .a4e-tip p, .a4e-article .a4e-warn p{margin-block-end:0}
.a4e-article .a4e-steps>li p{margin-block-end:6px}
.a4e-article .a4e-steps>li>div>p:last-child{margin-block-end:0}
.a4e-article .a4e-note p, .a4e-article .a4e-tip p, .a4e-article .a4e-warn p{margin-block-end:var(--a4e-s-2)}
.a4e-article .a4e-note>:last-child, .a4e-article .a4e-tip>:last-child, .a4e-article .a4e-warn>:last-child{margin-block-end:0}
.a4e-article .a4e-prose ul, .a4e-article .a4e-prose ol{margin-block:0 var(--a4e-s-4)}
.a4e-article .a4e-prose li{margin-block:0 6px}
.a4e-article .a4e-checklist ul{margin:0}
.a4e-article .a4e-checklist li, .a4e-article .a4e-verdict li{margin-block:0}
.a4e-article figcaption{font-style:normal;font-size:var(--a4e-fs-xs);line-height:1.5;color:var(--a4e-text-muted)}

/* Tables: Hello draws a grey grid on every cell, zebra stripes and a hover fill */
.a4e-article .a4e-table table{margin:0;font-size:var(--a4e-fs-sm);width:100%}
.a4e-article .a4e-table th, .a4e-article .a4e-table td{border:0;border-bottom:1px solid var(--a4e-border);padding:10px 12px;line-height:1.5;vertical-align:top}
.a4e-article .a4e-table thead th{background:var(--a4e-table-head-bg);color:var(--a4e-table-head-text);border-bottom:0;font-size:var(--a4e-fs-sm)}
.a4e-article .a4e-table tbody tr>td, .a4e-article .a4e-table tbody tr>th{background:transparent}
.a4e-article .a4e-table tbody tr:nth-child(even)>td, .a4e-article .a4e-table tbody tr:nth-child(even)>th{background:var(--a4e-table-row-alt)}
.a4e-article .a4e-table tbody tr:hover>td, .a4e-article .a4e-table tbody tr:hover>th{background:transparent}
.a4e-article .a4e-table tbody tr:nth-child(even):hover>td, .a4e-article .a4e-table tbody tr:nth-child(even):hover>th{background:var(--a4e-table-row-alt)}
.a4e-article .a4e-table tbody tr.is-hl>td, .a4e-article .a4e-table tbody tr.is-hl>th, .a4e-article .a4e-table tbody tr.is-hl:hover>td{background:var(--a4e-cyan-wash)}
.a4e-article .a4e-table--compare td:first-child, .a4e-article .a4e-table--compare th:first-child{background:var(--a4e-paper)}
.a4e-article .a4e-table--compare tbody tr:nth-child(even)>td:first-child{background:var(--a4e-table-row-alt)}
.a4e-article .a4e-table--compare thead th:first-child{background:var(--a4e-table-head-bg)}

/* Lists and definition lists: Hello zeroes them with a broad selector */
.a4e-article .a4e-specs dd{margin-inline-start:0}

/* Images: the host sets img height:auto/max-width:100%; keep fixed product sizes */
.a4e-article .a4e-product__media img, .a4e-article .a4e-mbar img{max-width:none}

/* Mobile: leave the bottom-right corner free for the chat bubble (#ht-ctc-chat: right 15px, 50x50)
   and keep the bar from covering the text of the last lines */
@media (max-width:767.98px){
  .a4e-article{padding-bottom:0}
  .a4e-mbar{max-width:calc(100vw - 12px - var(--a4e-chat-clear))}
  .a4e-mbar__name{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* Long words and URLs never widen the page */
.a4e-prose{overflow-wrap:break-word}
.a4e-prose img, .a4e-prose video, .a4e-prose iframe{max-width:100%}
.a4e-prose pre{overflow-x:auto;max-width:100%}

/* .a4e-prose ol (0,1,1) would otherwise beat .a4e-steps (0,1,0) and indent the step cards */
.a4e-article .a4e-prose ol.a4e-steps{padding:0;margin:var(--a4e-s-4) 0 var(--a4e-s-5)}
.a4e-article .a4e-prose .a4e-checklist ul, .a4e-article .a4e-prose .a4e-verdict ul{padding:0;margin:0}
.a4e-article .a4e-prose .a4e-stats{padding:0}