/* Prob N Tech overrides — header, responsiveness, conversion path.
Loaded last, so it wins over style.css without editing 350KB of theme CSS. */
:root{
--pnt-ink:#0d2137; --pnt-accent:#0f7b8a; --pnt-wa:#25D366;
--pnt-header-h:76px; --pnt-topbar-h:38px;
}
/* ---------- 1. TOP BAR: was 294px of header on desktop. Now one thin utility strip. ---------- */
.th-header .header-top{padding:0!important;min-height:var(--pnt-topbar-h);display:flex;align-items:center;font-size:13px}
.th-header .header-top .row{gy-0:0;row-gap:0!important;flex-wrap:nowrap}
.th-header .header-top ul{margin:0;padding:0;display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
.th-header .header-top li{margin:0!important;padding:0!important;white-space:nowrap;line-height:var(--pnt-topbar-h)}
.th-header .header-top .icon-btn{width:auto;height:auto;line-height:1;background:none;border:0;margin-right:6px;font-size:12px}
/* the email address is long, breaks the bar, and its domain does not resolve: phone is the channel */
.th-header .header-top li:has(a[href^="mailto:"]){display:none!important}
.th-header .social-title{display:none}
.th-header .header-top .social-links a{width:26px;height:26px;line-height:26px;font-size:12px}
/* ---------- 2. MENU BAR: compact, and actually sticky on scroll ---------- */
.th-header .menu-area{padding:0!important}
.sticky-wrapper{position:sticky;top:0;z-index:1000;background:#fff;transition:box-shadow .2s ease}
.sticky-wrapper.pnt-stuck{box-shadow:0 6px 24px rgba(13,33,55,.10)}
.th-header .header-logo{padding:6px 0}
.th-header .header-logo img{max-height:52px;width:auto!important;height:auto}
.th-header .header-logo .logo-bg{display:none} /* decorative slab that inflated the bar */
.th-header .main-menu>ul>li>a{padding:26px 14px;font-size:15px}
.th-header .header-button .th-btn,.th-header .bounce-button{padding:12px 20px;font-size:14px}
/* the theme shipped this CTA with contradictory display classes (d-lg-none + d-xl-block + d-sm-none),
so it appeared on phones as a stray floating pill over the hero. Desktop only, in the bar.
Gated at 1200px, not 992px: between those widths the bar already carries the full menu plus
the Get Appointment button, and adding this pill pushed the row 173px past the viewport —
the horizontal scroll that showed up on every page from 992 to 1199. The theme's own
d-xl-block class had the breakpoint right; only its conflicting siblings were wrong. */
.bounce-button{display:none!important}
@media (min-width:1200px){
.bounce-button{display:inline-block!important;background:var(--pnt-wa);color:#fff!important;border-radius:999px;
font-weight:600;text-decoration:none;box-shadow:0 2px 10px rgba(37,211,102,.35)}
.bounce-button:hover{filter:brightness(.95);color:#fff!important}
}
/* ---------- 3. MOBILE HEADER ---------- */
@media (max-width:991.98px){
:root{--pnt-header-h:64px}
/* the utility strip now carries both clinics' timings — QA 2026-09 keeps it visible at every
width instead of hiding it (see the compact rewrite at the end of this file, section 23) */
.th-header .header-logo img{max-height:40px}
.th-menu-toggle{width:44px;height:44px;line-height:44px;border-radius:10px;background:var(--pnt-ink);color:#fff;border:0;font-size:18px}
.th-header .menu-area .container{padding-left:16px;padding-right:16px}
}
/* ---------- 4. RESPONSIVENESS: the testimonial slider overflowed its container at every width ---------- */
.th-slider,.swiper,.testi-slider,[class*="slider"]{overflow:hidden!important;max-width:100%}
.swiper-slide{max-width:100%!important;height:auto}
.testi-card,.box-review{max-width:100%!important}
img,svg,video,iframe{max-width:100%;height:auto}
body{overflow-x:hidden}
@media (max-width:575.98px){
.th-btn{width:100%;justify-content:center;text-align:center}
/* hyphens:auto broke words mid-syllable on a 390px screen ("neurosur-geon",
"mi-crodiscectomy"). Never hyphenate a headline; wrap whole words instead. */
.hero-title2,.sec-title,h1,h2,h3{hyphens:none!important;overflow-wrap:normal;word-break:normal;text-wrap:balance}
h1,.h1,.hero-title2{font-size:clamp(23px,5.9vw,30px);line-height:1.22;letter-spacing:-.01em}
.hero-title2 .line-text{background-size:100% 3px;background-position:0 100%}
h2,.h2,.sec-title{font-size:clamp(21px,5.2vw,28px);line-height:1.25}
.th-hero-wrapper .hero-inner{padding-top:26px;padding-bottom:10px}
.hero-style2 .hero-text{font-size:15px;line-height:1.6}
.hero-img img{max-height:52vh;width:auto;object-fit:contain;margin-inline:auto}
}
/* ---------- 8. The template preloader ---------- */
/* It ships with a visible "CANCEL PRELOADER" escape hatch, which on a slow phone
renders across the logo while the page sits behind a half-faded curtain. There is
nothing here worth waiting for: the page is static HTML. */
.preloader,#preloader,.preloader-inner,.preloader .loader,[class*="preloader"] button,
.preloader-cancel,.preloader .cancel{display:none!important;visibility:hidden!important}
body{opacity:1!important}
/* ---------- 9. Tap targets ---------- */
/* Bigger tap target on phones, but ONLY on phones. Forcing display here with no media query
put the hamburger next to the desktop nav and wrapped the header onto three rows. */
@media (max-width:991.98px){
.th-header .th-menu-toggle,.th-menu-toggle,button.th-menu-toggle{
width:46px!important;height:46px!important;line-height:46px!important;
display:inline-flex!important;align-items:center;justify-content:center;font-size:19px}
}
@media (min-width:992px){ .th-menu-toggle{display:none!important} }
/* the header must stay on one row: logo left, nav centre, CTA right */
.th-header .menu-area .row{flex-wrap:nowrap;align-items:center}
.th-header .menu-area .row>[class*="col"]{display:flex;align-items:center}
.th-header .header-button{margin-left:auto;gap:10px}
.th-social a,.footer-links a,.breadcumb-menu a{min-height:32px;display:inline-flex;align-items:center}
/* ---------- 5. ONE WhatsApp float, with a real tap target ---------- */
.pnt-wa-fab{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;align-items:center;gap:10px;
height:56px;padding:0 16px 0 14px;border-radius:999px;background:var(--pnt-wa);color:#fff!important;
text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.pnt-wa-fab svg{width:28px;height:28px;flex:none}
.pnt-wa-fab span{display:none}
@media (min-width:992px){.pnt-wa-fab span{display:inline}}
@media (max-width:991.98px){.pnt-wa-fab{width:56px;padding:0;justify-content:center;bottom:calc(16px + env(safe-area-inset-bottom))}}
.whatsapp-icon{display:none!important} /* template's second float, hotlinked from a Google thumbnail */
/* ---------- 6. ANSWER BLOCKS (AEO): the 40-60 word quotable unit ---------- */
.pnt-answer{background:#f4f9fa;border-left:4px solid var(--pnt-accent);padding:18px 20px;border-radius:0 10px 10px 0;margin:0 0 22px}
.pnt-answer p{margin:0;font-size:17px;line-height:1.65;color:var(--pnt-ink)}
.pnt-answer p+p{margin-top:10px}
.pnt-keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:24px 0}
.pnt-keyfacts div{background:#fff;border:1px solid #e4edf0;border-radius:12px;padding:14px 16px}
.pnt-keyfacts b{display:block;color:var(--pnt-accent);font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.pnt-keyfacts span{font-size:16px;color:var(--pnt-ink)}
/* ---------- 7. MAP: loaded on click instead of ~270KB of Google JS on first paint ---------- */
.pnt-map{position:relative;min-height:320px;background:#e9eff1 url('../img/bg/breadcumb-bg.jpg') center/cover;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pnt-map button{border:0;border-radius:999px;padding:14px 22px;font-weight:600;background:var(--pnt-ink);color:#fff;cursor:pointer}
.pnt-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ---------- ARTICLE INDEX: theme sections and cards (blog.html + hub "read more") ---------- */
.pnt-theme{max-width:1080px;margin:0 auto 44px}
.pnt-theme>h2{font-size:26px;color:var(--pnt-ink);margin:0 0 4px}
.pnt-theme-sub{color:#5b6b7a;font-size:15px;margin:0 0 18px}
.pnt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
a.pnt-card{display:block;background:#fff;border:1px solid #e4edf0;border-radius:12px;padding:18px 20px;
text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.pnt-card:hover,a.pnt-card:focus-visible{border-color:var(--pnt-accent);box-shadow:0 4px 16px rgba(13,33,55,.08)}
a.pnt-card h3{font-size:17px;line-height:1.4;color:var(--pnt-ink);margin:0 0 8px}
a.pnt-card p{font-size:14px;line-height:1.6;color:#5b6b7a;margin:0 0 10px}
a.pnt-card span{font-size:13px;font-weight:600;color:var(--pnt-accent)}
a.pnt-card:focus-visible{outline:2px solid var(--pnt-accent);outline-offset:2px}
@media(max-width:575px){.pnt-cards{grid-template-columns:1fr}.pnt-theme>h2{font-size:22px}}
/* the floating button sits over the last lines of a page at rest; give it room */
@media (max-width:991.98px){ body{padding-bottom:84px} }
/* Condition-page content headings were
inside
, which made the outline
jump h1 -> h5 (and nested a heading inside a paragraph). Promoted to
for a valid outline;
these rules pin the rendered appearance to exactly what the h5 produced, so nothing moves. */
.testi-box h2.pnt-box-heading,h2.pnt-box-heading{font-size:24px;font-weight:700;line-height:1.4;
margin:0 0 15px;color:rgb(0,13,68);font-family:Outfit,sans-serif}
@media(max-width:575px){h2.pnt-box-heading{font-size:20px}}
/* Two single heading-level skips (about h2->h4, contact h1->h3). Promoted one level each for a
valid outline; pinned to the exact rendering the original tags produced. */
h3.sec-title[data-pnt-lvl="4"]{font-size:30px;font-weight:600;margin-bottom:24px;color:rgb(0,13,68)}
h2.box-title[data-pnt-lvl="3"]{font-size:20px;font-weight:600;margin-bottom:1px;color:rgb(0,13,68)}
/* TAP TARGETS. The site's only conversion CTAs measured 17px tall in Chromium at 360px — these
standalone "Ask this on WhatsApp" links sit alone in their own
, so giving them a real
target does not disturb running text. Gated on (pointer: coarse): tap size is a property of
the INPUT DEVICE, not the viewport width. min-height never shrinks the 56px buttons. */
@media (pointer: coarse){
p > a[href*="wa.me"]:only-child{display:flex;align-items:center;justify-content:center;
min-height:48px;padding:10px 18px;background:var(--pnt-wa,#25D366);color:#fff;
border-radius:10px;text-decoration:none;font-weight:600}
.th-header .header-top a[href*="wa.me"]{display:inline-flex;align-items:center;min-height:44px}
/* min-height is inert on display:inline, which is why the key-facts WhatsApp link stayed
17px despite inheriting it. inline-flex keeps the link in flow but makes the box real. */
a[href*="wa.me"],a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
}
/* The theme draws menu arrows, breadcrumb separators, list bullets and checkbox ticks with
var(--icon-font) at weights 400/500/600/700. Each distinct weight pulls a SEPARATE 300-380KB
webfont for a handful of decorative glyphs. Consolidated onto the one face the icon set
already loads (300/light), per god 2026-09-10. Generated from style.css's own selectors. */
input[type="checkbox"]~label:before{font-weight:300}
input[type="radio"]~label::before{font-weight:300}
.th-mobile-menu ul li a:before{font-weight:300}
.th-mobile-menu ul .th-item-has-children>a .th-mean-expand:before{font-weight:300}
.th-mobile-menu ul .th-item-has-children>a:after{font-weight:300}
.scroll-top:after{font-weight:300}
.font-icon{font-weight:300}
.widget_nav_menu a::before, .widget_meta a::before, .widget_pages a::before, .widget_archive a::before, .widget_categories a::before, .wp-block-categories a::before{font-weight:300}
.recent-post .media-img:after{font-weight:300}
.widget_recent_comments li:before, .wp-block-latest-comments li:before{font-weight:300}
.main-menu ul li.menu-item-has-children>a:after{font-weight:300}
.main-menu ul.sub-menu li a:before{font-weight:300}
.dropdown-toggle::after{font-weight:300}
.breadcumb-menu li:after{font-weight:300}
.woocommerce-message:before, .woocommerce-info:before{font-weight:300}
.star-rating{font-weight:300}
.rating-select p.stars a::before{font-weight:300}
.th-product .added_to_cart:after{font-weight:300}
.select2-container--default .select2-selection--single .select2-selection__arrow b:before{font-weight:300}
.accordion-card .accordion-button:after{font-weight:300}
/* Same consolidation: these rules set only the WEIGHT and inherit the icon family from the
rules above, so they were invisible to a scan that looked for var(--icon-font) in the body.
Higher specificity than the group rules, so they are re-stated here verbatim. */
.footer-widget.widget_meta a:before, .footer-widget.widget_pages a:before, .footer-widget.widget_archive a:before, .footer-widget.widget_categories a:before, .footer-widget.widget_nav_menu a:before{font-weight:300}
.rating-select p.stars a:hover~a::before{font-weight:300}
.rating-select p.stars:hover a::before{font-weight:300}
.rating-select p.stars.selected a.active::before{font-weight:300}
.rating-select p.stars.selected a.active~a::before{font-weight:300}
.rating-select p.stars.selected a:not(.active)::before{font-weight:300}
/* ---------- 10. Hero: the portrait was overlapping the headline at desktop widths ---------- */
@media (min-width:1200px){
/* The headline had grown to four lines, which made the hero tall enough to push the portrait
off screen. Smaller type, its own lane, portrait anchored beside it. */
.th-hero-wrapper .hero-style2{max-width:58%;position:relative;z-index:2}
.th-hero-wrapper .hero-title2{font-size:clamp(38px,3.3vw,56px);line-height:1.1;margin-bottom:18px}
.th-hero-wrapper .hero-inner{padding-top:56px;padding-bottom:56px}
.th-hero-wrapper .hero-img{right:2%;max-width:38%;top:auto;bottom:0}
.th-hero-wrapper .hero-img img{max-height:70vh;width:auto;object-fit:contain}
}
@media (min-width:992px) and (max-width:1199.98px){
.th-hero-wrapper .hero-style2{max-width:62%;position:relative;z-index:2}
.th-hero-wrapper .hero-img{max-width:36%}
}
/* the hero carried ~400px of dead space above the headline, which pushed the portrait below the fold */
@media (min-width:992px){
.th-hero-wrapper .hero-inner{padding-top:40px!important;padding-bottom:40px!important;min-height:0}
.th-hero-wrapper{min-height:0}
.th-hero-wrapper .hero-style2 .sub-title{margin-bottom:10px}
}
/* The dead space was 208px of padding on the hero TEXT block, not on .hero-inner. */
@media (min-width:992px){
.th-hero-wrapper .hero-style2{padding-top:70px!important;padding-bottom:70px!important}
}
@media (max-width:991.98px){
.th-hero-wrapper .hero-style2{padding-top:36px!important;padding-bottom:28px!important}
}
/* ---------- 11. Hero, every width ---------- */
/* The 576-991px band fell between my media queries and rendered the headline at the theme's 60px
with a 540px portrait under it, so the hero ran to 1153px before a visitor saw anything else. */
.th-hero-wrapper .hero-title2{font-size:clamp(26px,4.4vw,56px);line-height:1.12}
@media (max-width:991.98px){
.th-hero-wrapper .hero-title2{font-size:clamp(26px,5vw,40px)}
.th-hero-wrapper .hero-style2{text-align:center}
.th-hero-wrapper .hero-style2 .btn-group{justify-content:center}
.th-hero-wrapper .hero-img{position:static!important;max-width:100%;margin:8px auto 0;text-align:center}
.th-hero-wrapper .hero-img img{max-height:300px;width:auto;margin-inline:auto}
.th-hero-wrapper .hero-shape1,.th-hero-wrapper .hero-shape2,.th-hero-wrapper .hero-shape3,
.th-hero-wrapper .hero-shape4,.th-hero-wrapper .hero-shape5{display:none} /* decoration eats the screen */
}
@media (max-width:575.98px){
.th-hero-wrapper .hero-img img{max-height:230px}
.th-hero-wrapper .hero-style2 .hero-text{font-size:15px}
}
/* ---------- 12. QA-audit fixes (home / about / contact-faq / service-pages) ---------- */
/* Home, #about-sec: the "jump" decorative capsule graphic (pill + orange dots,
assets/img/shape/medicine_1.png) is absolutely positioned with fixed data-bottom/
data-right offsets sized for the wide desktop column. Below 1200px the checklist
text wraps under that fixed offset and the graphic sits on top of "Advanced
facilities" / "Patient-focused approach" / "Commitment to excellence" / "Expert
guidance". Purely decorative (pointer-events:none already on the theme's
.shape-mockup), safe to drop wherever the two-column desktop layout isn't in play. */
@media (max-width:1199.98px){
#about-sec .shape-mockup.jump{display:none!important}
}
/* contact.html: .contact-map's line-height:0 (style.css, written for the iframe it
swaps in) is inherited by the "Show ... on Google Maps" buttons. That squashes
every button to a 28px tap target, and on narrow phones the 2-line label paints
its second line directly on top of the first ("Show MujahidMapspital on Google").
Restoring a normal line-height fixes both: readable wrapped text and a ~50px target. */
.pnt-map button{line-height:1.3}
/* Article/blog-style pages (microscopic-disc-surgery, laser-spine-surgery,
brain-treatment, cervical-spine, advance-treatment, lumbar-spine, spine-treatment,
thoracic-spine, spinal-fusion, endoscopic-disc-surgery, ...): the opening
image is a portrait photo with only the sitewide img{height:auto} rule, so a
960x1503 source renders at ~1.6x aspect, eating most of the viewport height on
mobile and running taller than the viewport itself on tablet. Cap it to a sane
band and crop with object-fit so the composition still reads, on every width. */
.page-content figure img{
width:100%;
max-height:clamp(220px,55vw,480px);
object-fit:cover;
object-position:center;
}
/* ---------- 13. Hero portrait: centred in its lane, not wedged into the corner ---------- */
/* It was absolutely positioned with bottom:0 and right:29px, so it read as stuck in the
bottom-right corner of the section instead of sitting beside the headline. */
@media (min-width:992px){
.th-hero-wrapper .hero-img{
left:58%; right:0; top:50%; bottom:auto;
transform:translateY(-50%);
width:42%; max-width:42%;
display:flex; align-items:center; justify-content:center;
}
.th-hero-wrapper .hero-img img{
max-height:64vh; width:auto; height:auto; object-fit:contain; margin:0 auto;
}
}
@media (min-width:1600px){
.th-hero-wrapper .hero-img{left:56%; width:44%; max-width:44%}
.th-hero-wrapper .hero-img img{max-height:68vh}
}
/* ---------- 14. The blog, built like a blog ---------- */
.pnt-blog-tools{max-width:1100px;margin:0 auto 26px}
#pnt-search{width:100%;padding:14px 18px;border:1px solid #dde7ea;border-radius:12px;font-size:16px;background:#fff}
#pnt-search:focus{outline:2px solid var(--pnt-accent);outline-offset:1px}
.pnt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pnt-chip{border:1px solid #dde7ea;background:#fff;border-radius:999px;padding:8px 14px;font-size:14px;
color:var(--pnt-ink);cursor:pointer;min-height:40px}
.pnt-chip span{opacity:.55;margin-left:4px;font-size:12px}
.pnt-chip.is-on{background:var(--pnt-ink);color:#fff;border-color:var(--pnt-ink)}
.pnt-chip:hover{border-color:var(--pnt-accent)}
.pnt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;max-width:1200px;margin:0 auto}
.pnt-post{background:#fff;border:1px solid #e6eef1;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
transition:box-shadow .18s ease,transform .18s ease}
.pnt-post:hover{box-shadow:0 10px 28px rgba(13,33,55,.10);transform:translateY(-2px)}
.pnt-post-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#eef4f6}
.pnt-post-img img{width:100%;height:100%;object-fit:cover;display:block}
.pnt-post-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pnt-cat{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--pnt-accent);font-weight:700}
.pnt-post h3{font-size:18px;line-height:1.3;margin:0}
.pnt-post h3 a{color:var(--pnt-ink);text-decoration:none}
.pnt-post h3 a:hover{color:var(--pnt-accent)}
.pnt-post p{font-size:14.5px;line-height:1.55;color:#5b6b7a;margin:0;flex:1}
.pnt-post-meta{font-size:13px;color:#7b8a99;border-top:1px solid #eef3f5;padding-top:10px}
.pnt-post[hidden]{display:none}
.pnt-empty{text-align:center;color:#5b6b7a;margin:28px auto}
.pnt-more-wrap{text-align:center;margin-top:30px}
/* article furniture */
.pnt-article-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px;color:#6b7a89;
border-bottom:1px solid #eef3f5;padding-bottom:14px;margin-bottom:22px}
.pnt-share{display:flex;gap:8px;align-items:center;margin-left:auto}
.pnt-share a{width:34px;height:34px;border-radius:50%;background:#eef4f6;color:var(--pnt-ink);
display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px}
.pnt-share a:hover{background:var(--pnt-accent);color:#fff}
/* ---------- 15. ARTICLE READING EXPERIENCE OVERHAUL ---------- */
/* Baseline before this pass (kamar-dard.html, 1440px): body copy ran the full 912px
Bootstrap col-lg-9 column at 16px/28px, averaging ~82 chars/line and peaking past 106 —
worse than HSS's own 108.9 counter-example. In-body H2/H3 inherited the theme's page-hero
sizes (48px/54px and 36px/46px) with no distinct rhythm from a 16px paragraph, so every
subheading in a 2,600-word article read like a second hero banner. Scoped to .pnt-article
only — other pages keep the theme's type scale untouched. */
.pnt-article{max-width:920px}
.pnt-article>p,.pnt-article>ul,.pnt-article>ol,.pnt-article>.pnt-answer,.pnt-article>.pnt-home-link,
.pnt-article .pnt-toc,.pnt-article .pnt-author-box,.pnt-article .pnt-takeaways,.pnt-article .pnt-refs{
max-width:720px;
}
.pnt-article>h2,.pnt-article>h3{max-width:720px}
.pnt-article>h2{
font-size:clamp(22px,2.1vw,28px)!important;
line-height:1.3!important;
font-weight:700;
margin-top:44px!important;
margin-bottom:16px!important;
color:var(--pnt-ink);
}
.pnt-article>h3{
font-size:19px!important;
line-height:1.4!important;
font-weight:700;
margin-top:28px!important;
margin-bottom:10px!important;
color:var(--pnt-ink);
}
.pnt-article>p{font-size:16px;line-height:1.75;color:#3d4a5c}
.pnt-article>ul,.pnt-article>ol{padding-left:24px;margin-bottom:20px}
.pnt-article>ul>li,.pnt-article>ol>li{font-size:16px;line-height:1.65;margin-bottom:10px;color:#3d4a5c}
/* in-body links: colour alone (no underline) fails WCAG 1.4.1 against surrounding copy —
underline on the link text itself so a link is legible in grayscale, not just green-on-grey */
.pnt-article>p a:not(.th-btn),.pnt-article>ul a:not(.th-btn),.pnt-article>ol a:not(.th-btn),
.pnt-article figcaption a:not(.th-btn),.pnt-answer p a:not(.th-btn){
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
color:var(--pnt-accent);font-weight:500;
}
.pnt-article>p a:hover:not(.th-btn),.pnt-article>ul a:hover:not(.th-btn){color:var(--pnt-ink)}
/* Figure: was a bare at full 912-936px column width with no size cap, so a 1200x1778
source (solid black fill behind a small skeleton diagram) rendered ~1,300-1,400px tall —
eating the entire first mobile screen. .page-content figure img (rule 12, above) only
matches condition/treatment pages, never .pnt-article — this is the article equivalent.
The card treatment also visually reframes it as a contained illustration rather than a
full-bleed hero, which is the only lever CSS has on an image whose black background is
baked into the source JPEG; the source assets still need re-exporting on white/transparent. */
.pnt-article figure{
max-width:560px;margin:28px auto;padding:16px;background:#f7fafb;
border:1px solid #e6eef1;border-radius:14px;text-align:center;
}
.pnt-article figure img{
max-height:320px;width:auto;max-width:100%;object-fit:contain;
border-radius:8px;margin:0 auto;display:block;
}
.pnt-article figcaption{font-size:13px;color:#6b7a89;margin-top:10px}
@media(max-width:575.98px){
.pnt-article figure{max-width:100%;padding:12px;margin:22px auto}
.pnt-article figure img{max-height:220px}
}
/* Category chip on the byline — was a plain coloured text label indistinguishable from the
other meta items (date, read time), so it read as text, not as a taxonomy link. */
.pnt-article-meta .pnt-cat{background:#eaf6f4;border-radius:999px;padding:4px 12px;letter-spacing:.03em}
/* Breadcrumb visually above the H1 (order swap only — DOM order, and so screen-reader/
reading order, is unchanged; the underlying fix belongs in article_shell.py's markup
order, out of scope for this CSS-only pass). Matches NHS/HSS/Spine-health, all of which
orient the reader with the breadcrumb before the title is read. */
.breadcumb-content{display:flex;flex-direction:column}
.breadcumb-content .breadcumb-menu{order:-1;margin-bottom:16px}
.breadcumb-content .breadcumb-title{order:0}
/* ---------- 16. STYLING READY FOR THE REBUILD (elements not yet in article_shell.py) ---------- */
/* Table of contents: plain "On this page" link list, inline in body flow — never a floating/
sticky sidebar on any reference site checked (NHS, HSS, Spine-health all render it inline). */
.pnt-toc{background:#fff;border:1px solid #e4edf0;border-radius:12px;padding:18px 22px;margin:0 0 28px}
.pnt-toc .pnt-toc-title{margin:0 0 10px;font-weight:700;font-size:14px;color:var(--pnt-ink);
text-transform:uppercase;letter-spacing:.03em}
.pnt-toc ol{margin:0;padding-left:20px}
.pnt-toc li{font-size:15px;line-height:1.8}
.pnt-toc a{color:var(--pnt-accent);text-decoration:none;text-underline-offset:2px;
border-left:3px solid transparent;margin-left:-13px;padding-left:10px;transition:border-color .15s,color .15s}
.pnt-toc a:hover,.pnt-toc a:focus-visible{color:var(--pnt-ink);text-decoration:underline}
.pnt-toc a.is-current{color:var(--pnt-ink);font-weight:700;text-decoration:none;border-left-color:var(--pnt-accent)}
@media(min-width:768px){.pnt-toc ol{columns:2;column-gap:28px}}
/* Author/reviewer bio box: fuller trust signal at the end of the article, restating (not just
repeating) the byline credit with credentials and a link to the profile page. */
.pnt-author-box{display:flex;gap:18px;align-items:flex-start;background:#f4f9fa;
border-radius:14px;padding:22px;margin:36px 0}
.pnt-author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.pnt-author-box h3{margin:0 0 4px;font-size:16px;color:var(--pnt-ink)}
.pnt-author-box p{margin:0;font-size:14px;line-height:1.6;color:#5b6b7a}
.pnt-author-box a{color:var(--pnt-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:480px){.pnt-author-box{flex-direction:column;align-items:flex-start}}
/* Key takeaways: end-of-article recap for skimmers and AI-answer extraction — visually
distinct from the top-of-article .pnt-keyfacts grid, which serves a different job. */
.pnt-takeaways{background:#fff;border:1px solid #e4edf0;border-left:4px solid var(--pnt-accent);
border-radius:0 12px 12px 0;padding:20px 24px;margin:34px 0}
.pnt-takeaways .pnt-takeaways-title{margin:0 0 10px;font-weight:700;color:var(--pnt-ink)}
.pnt-takeaways ul{margin:0;padding-left:20px}
.pnt-takeaways li{margin-bottom:8px;line-height:1.6;color:#3d4a5c}
/* Numbered references list, after the body and takeaways, before the author bio. */
.pnt-refs{margin:30px 0;padding-top:20px;border-top:1px solid #eef3f5}
.pnt-refs h2{font-size:18px;margin:0 0 12px;max-width:none}
.pnt-refs ol{padding-left:20px;font-size:13.5px;line-height:1.75;color:#5b6b7a}
.pnt-refs a{color:var(--pnt-accent);text-decoration:underline;text-underline-offset:2px}
.pnt-cite{font-size:.72em;vertical-align:super;color:var(--pnt-accent);text-decoration:none;margin:0 1px}
/* Emergency / "go to hospital now" callout — a distinct colour from the generic teal
.pnt-answer so a safety-critical box does not read identically to a cost/logistics one. */
.pnt-callout-emergency{background:#fdf2f2;border-left:4px solid #d64545;padding:18px 20px;
border-radius:0 10px 10px 0;margin:0 0 24px}
.pnt-callout-emergency p{margin:0;color:#7a2020;font-size:15.5px;line-height:1.6}
.pnt-callout-emergency p+p{margin-top:10px}
.pnt-callout-emergency strong{color:#b91c1c}
/* Related posts, restyled for end-of-article placement (reuses .pnt-cards' grid/card rules). */
.pnt-related{margin:38px 0 12px}
.pnt-related>h2{font-size:22px;margin:0 0 14px;max-width:none}
/* TOC links landed ~100px high because the header is sticky: give anchors clearance */
.pnt-article h2, .pnt-article h3, .pnt-article [id]{scroll-margin-top:110px}
@media (max-width:991.98px){.pnt-article h2,.pnt-article h3,.pnt-article [id]{scroll-margin-top:90px}}
/* ---------- 17. ARTICLE COVER IMAGE: a real 16:9 banner, not the illustration card ---------- */
/* .pnt-article figure (§15) is tuned for the small in-body diagrams (Wikimedia-style
illustrations) — a 560px bordered card with letterboxed contain-fit. The new per-article
cover figure is the lede image and needs the opposite treatment: full column width, a
fixed 16:9 crop so it reads as a banner, and capped so it frames the article instead of
dominating the first screen. Class selector outweighs §15's element selector regardless
of source order, but kept last for readability. */
.pnt-article .pnt-hero-figure{
max-width:none;width:100%;margin:0 0 28px;padding:0;background:none;border:0;
border-radius:14px;text-align:left;
}
.pnt-article .pnt-hero-figure img{
width:100%;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
max-height:420px;border-radius:14px;display:block;margin:0;
}
/* Defensive polish for elements the generator doesn't currently emit (no article in the
112 uses a