/* BLOG-READ-001 (2026-10-04, owner): reading layout for blog posts, loaded only on post pages
   (layout amblog_index_post.xml). Benchmarked on the pages that rank first for our topics: 1.6-1.8 line
   height, ~70 characters a line, clear sections, a contents box, tables readable on a phone.
   Markup for the contents box, short-answer box, table labels and product cards: Plugin/Response/BlogReadingAids.
   Overrides of theme rules carry `body ` (styles-l.css loads after module CSS). */

/* the page H1 already shows the title: no second, smaller copy under the hero */
body.amblog-index-post .page-title-wrapper .page-title { font-size: 28px; line-height: 1.2; }
body.amblog-index-post .amblog-post-container.-post-page .amblog-content > .amblog-post-title { display: none; }
body .amblog-post-container.-post-page .amblog-dates { margin: 14px 0 6px; }

/* text */
body .amblog-post-container.-post-page .amblog-content p,
body .amblog-post-container.-post-page .amblog-content li,
body .amblog-post-container.-post-page .amblog-content [itemprop="text"] { font-size: 17px; line-height: 1.7; }
body .amblog-post-container.-post-page .amblog-content p { margin: 0 0 1.05em; }
body .amblog-post-container.-post-page .amblog-content [data-content-type="html"] > p:first-child { font-size: 18.5px; line-height: 1.6; color: #2e2b28; }
body .amblog-post-container.-post-page .amblog-content h2 { font-size: 23px; line-height: 1.25; margin: 2.1em 0 .65em; scroll-margin-top: 80px; }
body .amblog-post-container.-post-page .amblog-content h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: #ff9a02; margin-bottom: 14px; }
body .amblog-post-container.-post-page .amblog-content h3 { font-size: 19px; line-height: 1.35; margin: 1.5em 0 .4em; }
body .amblog-post-container.-post-page .amblog-content ul,
body .amblog-post-container.-post-page .amblog-content ol { margin: 0 0 1.3em; padding-left: 1.3em; }
body .amblog-post-container.-post-page .amblog-content li { margin: 0 0 .5em; }
body .amblog-post-container.-post-page .amblog-content li::marker { color: #b86200; }

/* images in the article */
body .amblog-post-container.-post-page .amblog-content figure { margin: 1.6em 0 1.8em; }
body .amblog-post-container.-post-page .amblog-content figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
body .amblog-post-container.-post-page .amblog-content figcaption { font-size: 14px; line-height: 1.45; color: #6b6963; margin-top: 8px; }

/* short answer */
body .ipatio-blog-answer { background: #fff7ea; border-left: 4px solid #ff9a02; border-radius: 0 12px 12px 0; padding: 16px 18px 2px; margin: 1.2em 0 1.6em; }
body .amblog-post-container.-post-page .amblog-content .ipatio-blog-answer h2 { margin: 0 0 .4em; font-size: 19px; }
body .amblog-post-container.-post-page .amblog-content .ipatio-blog-answer h2::before { display: none; }

/* tables */
body .amblog-post-container.-post-page .amblog-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.3em 0 1.8em; border: 1px solid #e4ded4; border-radius: 12px; overflow: hidden; font-size: 15px; line-height: 1.45; }
body .amblog-post-container.-post-page .amblog-content th { background: #f5f0e7; text-align: left; vertical-align: bottom; padding: 12px 14px; font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 700; color: #1d1b19; }
body .amblog-post-container.-post-page .amblog-content td { padding: 12px 14px; border-top: 1px solid #ece6dc; vertical-align: top; }
body .amblog-post-container.-post-page .amblog-content tbody tr:nth-child(even) td { background: #fbf8f3; }
body .amblog-post-container.-post-page .amblog-content td:first-child { font-weight: 700; }
@media (max-width: 767px) {
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]),
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) tbody,
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) tr,
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) td { display: block; width: auto; }
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) { border: 0; border-radius: 0; overflow: visible; }
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) thead,
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) tr:has(> th) { display: none; }
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) tr { border: 1px solid #e4ded4; border-radius: 12px; margin: 0 0 12px; overflow: hidden; background: #fff; }
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) tbody tr:nth-child(even) td { background: transparent; }
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) td { border-top: 1px solid #f0ebe3; padding: 10px 14px; }
    body .amblog-post-container.-post-page .amblog-content table:has(td[data-label]) td:first-child { border-top: 0; background: #f5f0e7; font-size: 16px; }
    body .amblog-post-container.-post-page .amblog-content td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: #6b6963; margin-bottom: 2px; }
}

/* FAQ */
body .amblog-post-container.-post-page .amblog-content [itemtype$="schema.org/FAQPage"] { display: grid; gap: 12px; margin: 0 0 1.5em; }
body .amblog-post-container.-post-page .amblog-content [itemtype$="schema.org/Question"] { border: 1px solid #e4ded4; border-radius: 12px; padding: 16px 18px 4px; background: #fbf8f3; }
body .amblog-post-container.-post-page .amblog-content [itemtype$="schema.org/Question"] h3 { margin-top: 0; }

/* products in this guide */
body .ipatio-blog-products { margin: 1.4em 0 1.8em; }
body .amblog-post-container.-post-page .amblog-content .ipatio-blog-products__title { font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b6963; margin: 0 0 10px; }
body .ipatio-blog-products__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body .amblog-post-container.-post-page .amblog-content a.ipatio-blog-product { display: flex; flex-direction: column; gap: 8px; border: 1px solid #e4ded4; border-radius: 12px; padding: 10px; color: #1d1b19; text-decoration: none; background: #fff; }
body .amblog-post-container.-post-page .amblog-content a.ipatio-blog-product:hover { border-color: #ff9a02; }
body .amblog-post-container.-post-page .amblog-content a.ipatio-blog-product:focus-visible { outline: 2px solid #1d1b19; outline-offset: 2px; }
body .ipatio-blog-product img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
body .ipatio-blog-product__text { display: flex; flex-direction: column; gap: 4px; }
body .ipatio-blog-product__name { font-size: 14px; line-height: 1.35; font-weight: 600; }
body .ipatio-blog-product__price { font-size: 15px; font-weight: 700; }
body .ipatio-blog-product__price s { color: #6b6963; font-weight: 400; font-size: 13px; }
@media (max-width: 767px) {
    body .ipatio-blog-products__list { grid-template-columns: 1fr; gap: 10px; }
    body .amblog-post-container.-post-page .amblog-content a.ipatio-blog-product { flex-direction: row; align-items: center; min-height: 44px; }
    body .ipatio-blog-product img { width: 76px; flex: 0 0 76px; }
}

/* contents box: a collapsed bar on phones and tablets (CSS-only toggle) */
body .ipatio-blog-toc { position: relative; border: 1px solid #e4ded4; border-radius: 12px; background: #fbf8f3; margin: 10px 0 18px; }
body .ipatio-blog-toc__toggle { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; opacity: 0; margin: 0; }
body .ipatio-blog-toc__title { display: flex; align-items: center; justify-content: space-between; min-height: 48px; box-sizing: border-box; padding: 12px 18px; margin: 0; cursor: pointer; font-size: 16px; font-weight: 700; color: #1d1b19; }
body .ipatio-blog-toc__title::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #1d1b19; border-bottom: 2px solid #1d1b19; transform: rotate(45deg); margin: -4px 4px 0 12px; }
body .ipatio-blog-toc:has(.ipatio-blog-toc__toggle:checked) .ipatio-blog-toc__title::after { transform: rotate(-135deg); margin-top: 4px; }
body .ipatio-blog-toc:has(.ipatio-blog-toc__toggle:focus-visible) .ipatio-blog-toc__title { outline: 2px solid #1d1b19; outline-offset: -2px; border-radius: 12px; }
body .ipatio-blog-toc__list { display: none; list-style: decimal; margin: 0; padding: 0 18px 14px 40px; }
body .ipatio-blog-toc__toggle:checked ~ .ipatio-blog-toc__list { display: block; }
body .amblog-post-container.-post-page .amblog-content .ipatio-blog-toc li { font-size: 16px; line-height: 1.45; margin: 0 0 .4em; }
body .amblog-post-container.-post-page .amblog-content .ipatio-blog-toc a { color: #9a5600; text-decoration: none; }
body .amblog-post-container.-post-page .amblog-content .ipatio-blog-toc a:hover { text-decoration: underline; }

@media (min-width: 768px) {
    body.amblog-index-post .page-title-wrapper .page-title { font-size: 36px; }
    body .amblog-post-container.-post-page .amblog-content p,
    body .amblog-post-container.-post-page .amblog-content li,
    body .amblog-post-container.-post-page .amblog-content [itemprop="text"] { font-size: 18px; }
    body .amblog-post-container.-post-page .amblog-content [data-content-type="html"] > p:first-child { font-size: 20px; }
    body .amblog-post-container.-post-page .amblog-content h2 { font-size: 28px; }
    body .amblog-post-container.-post-page .amblog-content h3 { font-size: 21px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    body .amblog-post-container.-post-page .amblog-content > * { max-width: 740px; margin-left: auto; margin-right: auto; }
}

/* desktop: ~70-character column and the contents as a sticky side column */
@media (min-width: 1024px) {
    body.amblog-index-post .page-wrapper { overflow-x: clip; overflow-y: visible; }
    body .amblog-post-container.-post-page .amblog-content { display: grid; grid-template-columns: minmax(0, 720px) 230px; column-gap: 44px; justify-content: center; align-items: start; overflow: visible; }
    body .amblog-post-container.-post-page .amblog-content > * { grid-column: 1; }
    body .amblog-post-container.-post-page .amblog-content > .ipatio-blog-toc { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 24px; margin: 14px 0 0; background: transparent; border: 0; border-left: 2px solid #ece6dc; border-radius: 0; }
    body .ipatio-blog-toc__toggle { display: none; }
    body .ipatio-blog-toc__title { cursor: default; pointer-events: none; min-height: 0; padding: 0 0 8px 16px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #6b6963; }
    body .ipatio-blog-toc__title::after { display: none; }
    body .ipatio-blog-toc__list { display: block; list-style: none; padding: 0 0 0 16px; }
    body .amblog-post-container.-post-page .amblog-content .ipatio-blog-toc li { font-size: 15px; margin-bottom: .55em; }
    body .amblog-post-container.-post-page .amblog-content .ipatio-blog-toc a { color: #1d1b19; }
    body .amblog-post-container.-post-page .amblog-content .ipatio-blog-toc a:hover { color: #9a5600; }
}
@media print {
    body .ipatio-blog-toc, body .ipatio-blog-products { display: none; }
}