/* Amozonpill Blog Redesign — single post styling */ :root { --abr-font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --abr-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --abr-accent: #0d6efd; --abr-accent-dark: #0a58ca; --abr-ink: #16181d; --abr-muted: #6b7280; --abr-border:#e5e9f0; --abr-soft: #f6f8fb; } /* --------------------------------------------------------------- Layout reset: storevilla's stylesheet has #primary{float:left; width:70%} expecting a floated sidebar (#secondaryright) next to it. Our template doesn't use one, so without this override the float collapses oddly and leaves dead space above the content — this neutralizes it regardless of theme version/customizer state. --------------------------------------------------------------- */ /* --------------------------------------------------------------- Sticky-positioning vs. horizontal-scroll — the careful bit. StoreVilla sets `overflow-x: hidden` on . That silently breaks `position: sticky` (any non-visible overflow on an ancestor becomes the sticky scroll context). So on DESKTOP we free so the sticky TOC works. BUT freeing also removes the guard that stops wide content (tables, the mega-menu, long unbroken words) from pushing the whole page sideways. On MOBILE the TOC is not sticky anyway (it goes static under 900px), so there we KEEP the horizontal guard to prevent the page from scrolling/shifting sideways. This is why the earlier global override broke mobile. --------------------------------------------------------------- */ @media (min-width: 901px) { html { overflow-x: visible !important; } body.abr-redesigned { overflow-x: hidden; } } @media (max-width: 900px) { html, body.abr-redesigned { overflow-x: hidden !important; max-width: 100% !important; } /* Contain the theme's own wrappers too (footer, mega-menu) so nothing outside our article pushes the page sideways on mobile either. */ body.abr-redesigned #content.site-content, body.abr-redesigned .store-container, body.abr-redesigned .store-container-inner, body.abr-redesigned .site-footer, body.abr-redesigned .site-header { max-width: 100% !important; overflow-x: hidden !important; } } /* Belt-and-suspenders: never let any descendant of the article exceed the viewport width on mobile — this is what actually stops the sideways shift regardless of which element is the wide culprit. */ @media (max-width: 900px) { body.abr-redesigned .abr-article, body.abr-redesigned .abr-article > *, body.abr-redesigned .abr-entry-content > * { max-width: 100%; } body.abr-redesigned .abr-article { overflow-x: hidden; } /* Long unbroken strings (URLs, chemical names) wrap instead of stretching */ body.abr-redesigned .abr-entry-content { overflow-wrap: break-word; word-wrap: break-word; } /* Tables: the SCROLL WRAPPER is capped to the viewport; the table INSIDE it is allowed to be wider and scrolls horizontally within the wrapper (so the table stays readable instead of being crushed, but never pushes the whole page sideways). */ body.abr-redesigned .abr-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--abr-border); border-radius: 8px; } body.abr-redesigned .abr-table-scroll table { max-width: none; /* allow natural width so columns don't crush */ min-width: 560px; /* keep columns legible; wrapper scrolls */ margin: 0; border: none; } /* Any bare table not yet wrapped by JS still scrolls itself as a fallback */ body.abr-redesigned .abr-entry-content > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } body.abr-redesigned #content.site-content { padding-top: 0 !important; margin-top: 0 !important; } body.abr-redesigned .store-container, body.abr-redesigned .store-container-inner { padding-top: 0 !important; margin-top: 0 !important; } body.abr-redesigned #primary.abr-content-area { float: none !important; width: 100% !important; margin: 0 !important; } body.abr-redesigned #primary.abr-content-area .site-main.abr-main { padding: 0 !important; } .abr-article { max-width: 1140px; margin: 0 auto; padding: 14px 20px 60px; font-family: var(--abr-font-ui); color: #333; } /* Breadcrumbs */ .abr-breadcrumbs, .abr-breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; color: #777; } .abr-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; } .abr-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: #bbb; } .abr-breadcrumbs a { color: #777; text-decoration: none; } .abr-breadcrumbs a:hover { color: #0d6efd; } /* Category pill */ .abr-category { margin-bottom: 10px; } .abr-category a { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0d6efd; text-decoration: none; } /* Title */ .abr-title { font-size: var(--abr-h1); line-height: 1.25; font-weight: 800; margin: 0 0 18px; color: #16181d; } /* ---------- HERO — title-area panel: trust bar, image, share (matches medhub) ---------- */ .abr-hero{ display:flex; flex-direction:column; gap:20px; margin:6px 0 26px; padding:26px 28px; background:linear-gradient(135deg, #fff 55%, var(--abr-soft) 100%); border:1px solid var(--abr-border); border-radius:18px; box-shadow:0 4px 22px rgba(20,20,40,.05); } .abr-hero .abr-breadcrumbs{ margin-bottom: 10px; } .abr-hero .abr-title{ margin-bottom: 4px; } .abr-trust-bar{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:22px; } .abr-trust-item{ display:flex; flex-direction:column; line-height:1.35; } .abr-trust-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color: var(--abr-muted); margin-bottom:3px; } .abr-trust-item a{ font-size:13.5px; font-weight:700; color: var(--abr-ink); text-decoration:none; } .abr-trust-item a:hover{ color: var(--abr-accent); } .abr-trust-value{ font-size:13.5px; font-weight:700; color: var(--abr-ink); } .abr-cred{ color: var(--abr-muted); font-weight:400; } .abr-trust-divider{ width:1px; align-self:stretch; background: var(--abr-border); min-height:32px; } /* Featured image — contained, not force-cropped, sized for legibility */ .abr-featured-image{ position:relative; margin:0; width:100%; max-width:640px; } .abr-featured-image img{ width:100%; height:auto; max-height:340px; object-fit:contain; border-radius:14px; display:block; background:#fff; box-shadow:0 8px 24px rgba(20,20,40,.14); } .abr-share-row-top{ display:flex; align-items:center; gap:12px; font-size:13px; } .abr-share-row-top span{ font-weight:700; color: var(--abr-muted); } .abr-share-row-top a{ color: var(--abr-ink); text-decoration:none; border:1px solid var(--abr-border); padding:6px 14px; border-radius:999px; font-weight:600; transition:all .15s ease; } .abr-share-row-top a:hover{ border-color: var(--abr-accent); color: var(--abr-accent); } @media (max-width:700px){ .abr-hero{ padding:20px; } .abr-featured-image{ max-width:100%; } .abr-featured-image img{ max-height:180px; } .abr-trust-bar{ gap:16px; } .abr-trust-divider{ display:none; } } /* Standalone rating (kept, just moved out of the trust bar) */ .abr-rating{ margin: 0 0 22px; display: flex; align-items: center; gap: 4px; color: #f5a623; font-size: 16px; white-space: nowrap; } .abr-rating-num { color: var(--abr-ink); font-size: 13.5px; font-weight: 700; margin-left: 4px; } .abr-rating-count { color: var(--abr-muted); font-size: 13px; } /* Two-column grid: sticky sidebar (LEFT) + content (RIGHT) */ .abr-body-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: stretch; } .abr-sidebar-col{ order: 1; } .abr-content-col{ order: 2; } @media (max-width: 900px) { .abr-body-grid { grid-template-columns: 1fr; } .abr-sidebar-col{ order: 0; margin-bottom: 18px; } .abr-content-col{ order: 1; } } .abr-sidebar-col { display: flex; flex-direction: column; gap: 20px; } .abr-sticky { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; } /* Smooth anchor scrolling on redesigned posts (TOC links, back-to-top) */ /* This stylesheet is only enqueued on redesigned single posts, so a plain html selector is safe here. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Mobile TOC toggle — hidden on desktop, the inner list is always visible */ .abr-toc-mobile-toggle { display: none; } /* Table of contents */ .abr-toc-box { background: #fff; border: 1px solid var(--abr-border); border-radius: 14px; padding: 20px 20px 22px; box-shadow: 0 2px 14px rgba(20,20,40,.04); } .abr-toc-progress-track{ height:4px; width:100%; background: var(--abr-border); border-radius:999px; overflow:hidden; margin-bottom:16px; } .abr-toc-progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--abr-accent), var(--abr-accent-dark)); border-radius:999px; transition:width .1s linear; } .abr-toc-readtime{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color: var(--abr-ink); margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--abr-border); } .abr-icon{ color: var(--abr-accent); flex-shrink:0; vertical-align:-2px; } .abr-toc-title{ display:flex; align-items:center; gap:6px; font-weight: 800; font-size: 11px; text-transform:uppercase; letter-spacing:.6px; margin-bottom: 10px; color: var(--abr-muted); } .abr-toc-count{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; color:#b7bcc5; font-size:11px; } .abr-toc-list { list-style: none; margin: 0; padding: 0; } .abr-toc-list li { margin-bottom: 2px; } .abr-toc-list a { display:block; padding:8px 10px; margin-left:-10px; border-radius:6px; font-size: 13.5px; color: var(--abr-ink) !important; text-decoration: none !important; line-height: 1.4; border-left:2px solid transparent; transition: background .15s ease, color .15s ease; } .abr-toc-list a:hover, .abr-toc-list a:focus{ color: var(--abr-accent) !important; background: var(--abr-soft) !important; border-left-color: var(--abr-accent); } .abr-toc-list .abr-toc-level-3 a{ padding-left: 24px; font-size: 12.5px; } .abr-toc-list a.abr-active{ font-weight: 700; color: var(--abr-accent) !important; background: var(--abr-soft) !important; border-left-color: var(--abr-accent); } /* Entry content typography ONE reading size for the whole article. Every text section (paragraphs, lists, callouts, FAQ answers, HowTo steps, citations) uses the same --abr-text size so nothing looks randomly bigger/smaller mid-article. */ /* Typography scale — all reader-facing sizes flow through these variables. Defaults live here; the admin screen (Settings → Blog Typography) outputs inline CSS with the same selectors to override them. Scoped to .abr-article so nothing outside the redesigned post is ever affected. */ .abr-article { --abr-text: 16.5px; --abr-text-lh: 1.75; --abr-h1: 34px; --abr-h2: 26px; --abr-h3: 19px; --abr-h4: 17.5px; --abr-h5: 16.5px; } @media (max-width: 600px) { .abr-article { --abr-text: 16px; --abr-h1: 23px; --abr-h2: 22px; --abr-h3: 18px; --abr-h4: 17px; --abr-h5: 16px; } } .abr-article { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .abr-entry-content { font-size: var(--abr-text); line-height: var(--abr-text-lh); font-family: var(--abr-font-body); } .abr-entry-content p, .abr-entry-content li, .abr-entry-content blockquote, .abr-callout-body, .abr-callout-body p, .abr-callout-body li, .abr-faq-answer, .abr-faq-answer p, .abr-faq-answer li, .abr-howto-step p, .abr-citations-intro, .abr-citations-list li { font-size: var(--abr-text); line-height: var(--abr-text-lh); } .abr-entry-content h2.abr-heading, .abr-entry-content h2 { font-size: var(--abr-h2); font-weight: 800; margin: 44px 0 18px; scroll-margin-top: 90px; color: #16181d; font-family: var(--abr-font-ui); letter-spacing: -.01em; } .abr-entry-content h3.abr-heading, .abr-entry-content h3 { font-size: var(--abr-h3); font-weight: 700; margin: 32px 0 14px; scroll-margin-top: 90px; color: #16181d; font-family: var(--abr-font-ui); } .abr-entry-content h4 { font-size: var(--abr-h4); font-weight: 700; margin: 26px 0 12px; scroll-margin-top: 90px; color: #16181d; font-family: var(--abr-font-ui); } .abr-entry-content h5, .abr-entry-content h6 { font-size: var(--abr-h5); font-weight: 700; margin: 22px 0 10px; scroll-margin-top: 90px; color: #16181d; font-family: var(--abr-font-ui); text-transform: none; } .abr-entry-content p { margin: 0 0 20px; } .abr-entry-content ul, .abr-entry-content ol { margin: 0 0 20px; padding-left: 22px; } .abr-entry-content li { margin-bottom: 8px; } .abr-entry-content img { max-width: 100%; height: auto; border-radius: 8px; } .abr-entry-content a { color: #0d6efd; } /* Drop cap removed per feedback — first paragraph now renders as normal text */ /* Callout box shortcode */ .abr-callout { border-radius: 10px; padding: 18px 20px; margin: 26px 0; border-left: 4px solid #16a34a; background: #ecfdf3; } .abr-callout-info { border-left-color: #16a34a; background: #ecfdf3; } .abr-callout-warning { border-left-color: #d97706; background: #fff7ed; } .abr-callout-title { font-weight: 800; font-size: 14px; margin-bottom: 6px; color: #16181d; text-transform: uppercase; letter-spacing: .03em; } .abr-callout-body p:last-child { margin-bottom: 0; } /* CTA box shortcode */ .abr-cta-box { background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; padding: 22px; margin: 30px 0; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .abr-cta-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: #16181d; } .abr-cta-desc { font-size: 14px; color: #666; margin-bottom: 14px; } .abr-cta-button { display: inline-block; background: #f5c518; color: #16181d; font-weight: 700; padding: 12px 26px; border-radius: 8px; text-decoration: none; } .abr-cta-button:hover { background: #e0b012; } /* Reviewer credential box */ .abr-reviewer-box { margin-top: 40px; padding: 18px 20px; background: #f6f8fb; border-radius: 10px; border: 1px solid #e5e9f0; } .abr-reviewer-box-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #888; font-weight: 700; margin-bottom: 4px; } .abr-reviewer-box-name { font-size: 15px; font-weight: 700; color: #16181d; } .abr-reviewer-box-cred { font-size: 13.5px; color: #666; } /* Tags */ .abr-tags-row { margin-top: 20px; } .abr-tags a { display: inline-block; font-size: 12px; background: #f0f2f5; color: #555; padding: 5px 12px; border-radius: 20px; margin: 0 6px 6px 0; text-decoration: none; } /* Post navigation — redesigned as clean cards. StoreVilla's defaults (top/bottom hairlines, a center divider, 50% floats, right-aligned text, FontAwesome « » arrows positioned OUTSIDE the link box) look broken inside our layout, so every theme rule is overridden here. */ .abr-article .post-navigation { margin-top: 40px; } .abr-article .post-navigation .nav-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; border: none !important; margin: 0 !important; overflow: visible !important; } .abr-article .post-navigation .nav-previous, .abr-article .post-navigation .nav-next { float: none !important; width: auto !important; max-width: 100% !important; text-align: left !important; padding: 16px 18px !important; border: 1px solid var(--abr-border) !important; border-radius: 12px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .abr-article .post-navigation .nav-previous:hover, .abr-article .post-navigation .nav-next:hover { border-color: var(--abr-accent) !important; box-shadow: 0 3px 14px rgba(13,110,253,.08); } .abr-article .post-navigation .nav-previous a, .abr-article .post-navigation .nav-next a { display: block; position: static !important; font-family: var(--abr-font-ui); font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--abr-ink) !important; text-decoration: none !important; } /* Kill the theme's floating FontAwesome arrows */ .abr-article .post-navigation .nav-previous a::before, .abr-article .post-navigation .nav-next a::before, .abr-article .post-navigation .nav-previous a::after, .abr-article .post-navigation .nav-next a::after { content: none !important; } .abr-nav-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--abr-accent); letter-spacing: .06em; margin-bottom: 6px; font-family: var(--abr-font-ui); } .abr-nav-label::after { content: none !important; } @media (max-width: 700px) { .abr-article .post-navigation .nav-links { grid-template-columns: 1fr; } } /* FAQ accordion */ .abr-faq { margin: 20px 0 30px; border-top: 1px solid #eee; } .abr-faq-item { border-bottom: 1px solid #eee; } .abr-faq-question { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 16px 4px; font-size: 15.5px; font-weight: 700; color: #16181d; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .abr-faq-icon { font-size: 20px; color: #0d6efd; flex: 0 0 auto; transition: transform .15s ease; } .abr-faq-question[aria-expanded="true"] .abr-faq-icon { transform: rotate(45deg); } .abr-faq-answer { max-height: 0; overflow: hidden; transition: max-height .2s ease; color: #444; padding: 0 4px; } .abr-faq-answer p:last-child { margin-bottom: 14px; } .abr-faq-question[aria-expanded="true"] + .abr-faq-answer { max-height: 3000px; } /* HowTo step list */ .abr-howto { list-style: none; margin: 20px 0 30px; padding: 0; counter-reset: abr-step; } .abr-howto-step { counter-increment: abr-step; position: relative; padding: 4px 0 16px 42px; border-left: 2px solid #e5e9f0; margin-left: 14px; } .abr-howto-step:last-child { border-left-color: transparent; } .abr-howto-step::before { content: counter(abr-step); position: absolute; left: -15px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: #0d6efd; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .abr-howto-title { display: block; font-weight: 700; font-size: 15.5px; color: #16181d; margin-bottom: 4px; } .abr-howto-step p { margin: 0 0 8px; } /* Citations box */ .abr-citations-box { margin: 40px 0 0; border-radius: 12px; overflow: hidden; border: 1px solid #e5e9f0; } .abr-citations-header { background: #14336b; color: #fff; font-size: 19px; font-weight: 800; padding: 18px 22px; } .abr-citations-intro { padding: 18px 22px; color: #333; background: #fff; } .abr-citations-list { list-style: disc; margin: 0; padding: 16px 22px 16px 40px; background: #eceff3; display: flex; flex-wrap: wrap; gap: 4px 28px; } .abr-citations-list a { color: #16181d; text-decoration: underline; } /* Rating widget */ .abr-rating-widget { margin: 30px 0; } .abr-avg-badge { display: inline-block; background: #ecfdf3; color: #15803d; border: 1px solid #bbf0d1; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; margin-bottom: 18px; } .abr-avg-badge .abr-avg-value { font-weight: 800; } .abr-rating-heading { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: #16181d; } .abr-rating-subtext { font-size: 14px; color: #666; margin: 0 0 14px; } .abr-star-buttons { display: flex; gap: 10px; } .abr-star-btn { width: 46px; height: 46px; border-radius: 8px; border: 1px solid #e0e3e8; background: #fff; font-size: 22px; color: #d8dbe0; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .abr-star-btn:hover, .abr-star-btn.abr-hovered { color: #f5a623; border-color: #f5c66c; } .abr-star-btn.abr-selected { color: #f5a623; border-color: #f5a623; } .abr-star-btn:disabled { cursor: default; } /* Explore more + share row */ .abr-explore-share-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 30px 0; padding: 18px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .abr-explore-more { font-size: 14.5px; color: #333; } .abr-explore-more a { color: #14336b; font-weight: 700; text-decoration: none; } .abr-explore-more a:hover { text-decoration: underline; } .abr-share-buttons { display: flex; align-items: center; gap: 10px; } .abr-share-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #888; margin-right: 4px; } .abr-share-btn { width: 34px; height: 34px; border-radius: 8px; background: #f0f2f5; border: none; display: inline-flex; align-items: center; justify-content: center; color: #16181d; cursor: pointer; text-decoration: none; } .abr-share-btn:hover { background: #e2e6eb; } /* Author / reviewer bio cards */ .abr-bio-cards { margin: 10px 0 20px; } .abr-bio-card { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid #eee; } .abr-bio-photo { flex: 0 0 auto; } .abr-bio-photo img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; display: block; } .abr-bio-photo-placeholder { width: 76px; height: 76px; border-radius: 10px; background: #14336b; color: #fff; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .abr-bio-content { flex: 1; } .abr-bio-label { font-size: 13px; color: #777; margin-bottom: 2px; } .abr-bio-name { font-size: 18px; font-weight: 800; color: #16181d; margin-bottom: 6px; } .abr-bio-text { font-size: 14px; color: #555; line-height: 1.6; margin: 0 0 8px; } .abr-bio-link { font-size: 13.5px; font-weight: 700; color: #0d6efd; text-decoration: underline; } /* Widget title inside sidebar widget area */ .abr-widget-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; } .abr-widget { background: #fff; border: 1px solid #e5e9f0; border-radius: 10px; padding: 18px; } /* ===================================================================== MOBILE RESPONSIVE — comprehensive pass Consolidated small-screen tuning so every part of the article reads well on phones, not just the sidebar/content stack. ===================================================================== */ /* Wide content tables (drug comparisons etc.) — never let them overflow the viewport; allow horizontal scroll within the content column instead */ .abr-entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; } .abr-entry-content .abr-table-scroll, .abr-entry-content figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 20px; } /* ---- Tablet / small laptop ---- */ @media (max-width: 900px) { .abr-article { padding: 8px 16px 48px; } /* ------------------------------------------------------------- FULL-WIDTH mobile layout: kill the boxed/card look. The theme container padding is zeroed so the only side gap is the article's own 16px — content runs edge to edge with breathing room. ------------------------------------------------------------- */ body.abr-redesigned .store-container, body.abr-redesigned .store-container-inner { padding-left: 0 !important; padding-right: 0 !important; } /* Hero stops being a rounded bordered card on mobile — flat, full-width, separated from the body by a simple divider */ .abr-hero { padding: 4px 0 20px; margin: 0 0 20px; background: none; border: none; border-bottom: 1px solid var(--abr-border); border-radius: 0; box-shadow: none; } .abr-featured-image { max-width: 100%; } .abr-featured-image img { box-shadow: 0 3px 12px rgba(20,20,40,.10); } /* TOC box: full width, lighter chrome */ .abr-toc-box { border-radius: 12px; } /* sidebar already stacks above content at this width (rule above); make the sticky TOC non-sticky once stacked so it doesn't cover content while scrolling on touch devices */ .abr-sticky { position: static; max-height: none; overflow: visible; } /* ------------------------------------------------------------- Reading-order fix: on desktop the aside holds the TOC AND promo widgets to the left of the article. When stacked on mobile, the whole aside used to sit ABOVE the article — readers had to scroll past a full-height TOC + widgets before the first paragraph. Fix: `display: contents` dissolves the aside so its children become grid items themselves, letting us order them: 1. TOC (collapsed, one tap-bar tall) 2. Article content 3. Promo widgets (moved BELOW the article) ------------------------------------------------------------- */ .abr-sidebar-col { display: contents; } .abr-toc-box { order: 0; margin-bottom: 16px; } .abr-content-col { order: 1; } .abr-sidebar-widgets { order: 2; margin-top: 28px; } .abr-sidebar-widgets .abr-widget { margin-bottom: 14px; } /* Collapsed-by-default TOC: show the tap bar, hide the list until the reader opens it. Desktop keeps the always-open list. */ .abr-toc-mobile-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; padding: 2px 0; cursor: pointer; font-family: var(--abr-font-ui); text-align: left; min-height: 44px; /* comfortable tap target */ } .abr-toc-mobile-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--abr-ink); } .abr-toc-mobile-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--abr-muted); white-space: nowrap; } .abr-toc-chevron { font-size: 14px; color: var(--abr-accent); transition: transform .2s ease; } .abr-toc-mobile-toggle[aria-expanded="true"] .abr-toc-chevron { transform: rotate(180deg); } .abr-toc-inner { display: none; padding-top: 12px; } .abr-toc-box.abr-toc-open .abr-toc-inner { display: block; } /* The tap bar already shows read time + section count — hide the duplicated desktop header lines inside the expanded list */ .abr-toc-inner .abr-toc-readtime, .abr-toc-inner .abr-toc-title { display: none; } /* Bigger tap targets for TOC links on touch devices */ .abr-toc-list a { padding: 11px 10px; font-size: 14px; } .abr-toc-list .abr-toc-level-3 a { padding-left: 26px; } /* The in-box progress track is redundant on mobile (JS shows a fixed top-of-viewport bar instead) */ .abr-toc-box .abr-toc-progress-track { display: none; } } /* Fixed thin reading-progress bar at the top of the viewport (mobile only, injected by toc.js) */ .abr-mobile-progress { display: none; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 99999; pointer-events: none; } .abr-mobile-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--abr-accent), var(--abr-accent-dark)); } @media (max-width: 900px) { .abr-mobile-progress { display: block; } } /* ---- Phones ---- */ @media (max-width: 600px) { .abr-article { padding: 10px 14px 40px; } /* Title + hero (stays flat/full-width — card look removed at 900px) */ .abr-title { line-height: 1.28; } .abr-hero { padding: 2px 0 18px; gap: 14px; border-radius: 0; } /* Trust bar: wrap to a clean 2-per-row grid instead of a cramped flex row with dividers */ .abr-trust-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .abr-trust-divider { display: none; } .abr-trust-label { font-size: 10px; } .abr-trust-item a, .abr-trust-value { font-size: 13px; } /* Featured image */ .abr-featured-image img { max-height: 220px; } /* Share rows: allow wrap, comfortable tap targets */ .abr-share-row-top { flex-wrap: wrap; gap: 8px; } .abr-share-row-top a { padding: 8px 14px; } .abr-explore-share-row { flex-direction: column; align-items: flex-start; gap: 12px; } .abr-share-btn { width: 38px; height: 38px; } /* Body copy: slightly smaller, tighter margins */ .abr-entry-content h2.abr-heading, .abr-entry-content h2 { margin: 34px 0 14px; } .abr-entry-content h3.abr-heading, .abr-entry-content h3 { margin: 26px 0 12px; } .abr-entry-content p { margin: 0 0 18px; } .abr-entry-content ul, .abr-entry-content ol { padding-left: 20px; } /* TOC box */ .abr-toc-box { padding: 16px 16px 18px; } /* Callout / CTA / reviewer / citations — reduce padding */ .abr-callout { padding: 16px 16px; margin: 22px 0; } .abr-cta-box { padding: 18px 16px; } .abr-reviewer-box { padding: 16px; } .abr-citations-header { font-size: 17px; padding: 16px 18px; } .abr-citations-intro { padding: 16px 18px; } .abr-citations-list { padding: 14px 18px 14px 34px; } .abr-citations-list li { flex: 1 1 100%; } /* HowTo steps */ .abr-howto-step { padding-left: 38px; } /* Rating widget: stars fit small screens */ .abr-star-buttons { gap: 8px; } .abr-star-btn { width: 42px; height: 42px; font-size: 20px; } .abr-rating-heading { font-size: 20px; } /* Bio cards: stack photo above text so it doesn't squeeze the copy */ .abr-bio-card { flex-direction: column; gap: 12px; } .abr-bio-photo img, .abr-bio-photo-placeholder { width: 64px; height: 64px; } /* FAQ questions: comfortable tap size */ .abr-faq-question { padding: 15px 2px; font-size: 15px; } /* Long FAQ answers were clipping at 800px — raise the ceiling */ .abr-faq-question[aria-expanded="true"] + .abr-faq-answer { max-height: 3000px; } /* Breadcrumbs: keep to a single tidy line; truncate the (long) current post title instead of letting it wrap into 3 lines above the H1 */ .abr-breadcrumbs ol { flex-wrap: nowrap; overflow: hidden; } .abr-breadcrumbs li { white-space: nowrap; } .abr-breadcrumbs li:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* Slightly larger headings' scroll offset is unnecessary on mobile (no sticky header); tighten so TOC taps land closer to the heading */ .abr-entry-content h2.abr-heading, .abr-entry-content h3.abr-heading { scroll-margin-top: 16px; } /* Citations header shouldn't dominate a small screen */ .abr-citations-list { gap: 8px 0; } } /* ---- Very small phones ---- */ @media (max-width: 380px) { .abr-trust-bar { grid-template-columns: 1fr; } .abr-featured-image img { max-height: 190px; } }