/* seo-fixes.css - added 2026-08-31 (T-020) */
/* AOS fade-left/right applies translateX(100px) before animating, creating a */
/* 100px horizontal scrollbar on mobile. Standard AOS remedy below. */
html, body { overflow-x: hidden; }
.banner-right-image img { max-width: 100%; height: auto; }

/* T-016: reserve intrinsic space for the hero and award badges so they do not
   shift layout while decoding (CLS). Ratios match the real files exactly. */
.banner-right-image img { aspect-ratio: 650 / 639; }
.banner-left-image img, .award-box img, .banner-award img { aspect-ratio: 10 / 7; height: auto; }

/* 2026-08-31 fix: the SEO editing pass added <figure class="sl-figure ..."> markup
   to article pages (Schroth Method etc.) but never shipped the CSS for those
   classes. Result: unstyled figures rendered at full intrinsic image size,
   overflowing the article column and looking stretched. Add proper responsive
   figure styling with left/right float variants that collapse to full-width
   on mobile. */
figure.sl-figure {
    display: block;
    margin: 1.25rem auto;
    max-width: 100%;
}

/* 2026-08-31 (round 3): sl-figure-right in the Schroth page was floating
   into the NEXT section — its image was taller than the paragraph beside
   it, so the following <h2> and <ul.include> wrapped around it, giving
   the appearance of huge vertical gaps between list items. Force each
   new section heading to clear any float above it. Applied narrowly to
   the article content wrapper so we don't accidentally clear elsewhere. */
.schroth-method-of-scoliosis h2,
.services-section h2.main-heading,
.services-section .comparison,
.services-section table,
.services-section > ul,
.services-section > p:has(+ h2) {
    clear: both;
}

/* 2026-08-31 (round 3): the checklist icons (verified.svg) have no
   intrinsic width/height — only a viewBox — so any UA that fell back
   to the 300×150 default was rendering each icon huge and every list-
   item ~150px tall. Force a real, small size. Applied to both the raw
   selector and the seo-a11y-tagged variant so it wins whichever runs
   first. */
ul.include li.list-item > img,
ul.include li.list-item img[src*="verified.svg"],
.list-item > img[src$=".svg"] {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    vertical-align: middle;
    display: inline-block;
    flex: none;
}

/* 2026-09-01: content-safety net.
   Any <img> or <svg> placed in article/CMS content that doesn't have
   explicit dimensions must cap at 100% of its container. Without this
   the site relied on seo-a11y.js stamping HTML width/height on every
   image (now disabled — see /js/seo-a11y.js). Cap at container width
   and let height auto-derive so aspect ratio stays intact. */
.services-section img:not([width]):not([style*="width"]) {
    max-width: 100%;
    height: auto;
}
/* Bare inline SVGs without viewBox-derived sizing fall back to a
   300x150 box. Cap them the same way — content authors get sensible
   defaults instead of a full-page hero. */
.services-section svg:not([width]) {
    max-width: 100%;
    height: auto;
}

/* 2026-09-01: Scoliometer app page uses .slapp-* markup classes that
   were introduced with the SEO pass but never shipped CSS. Result:
   the App Store / Google Play badges rendered as 300x150 blobs
   (SVG default) and the hero collapsed. Add the missing styles. */
.slapp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    margin: 24px 0 40px;
}
.slapp-hero-text { flex: 1 1 320px; min-width: 0; }
.slapp-hero-shot { flex: 1 1 320px; min-width: 0; max-width: 100%; }
.slapp-hero-shot img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
}
.slapp-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #ef7821;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.slapp-icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.slapp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 8px;
}
.slapp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #111;
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none !important;
    line-height: 1.15;
    font-size: 14px;
    min-width: 150px;
}
.slapp-badge:hover { background: #333; text-decoration: none !important; }
.slapp-badge svg {
    width: 24px !important;
    height: 24px !important;
    flex: none;
    fill: #fff;
}
.slapp-badge span { display: inline-flex; flex-direction: column; line-height: 1.15; }
.slapp-badge small { font-size: 11px; opacity: 0.85; }
.slapp-badge b { font-size: 15px; font-weight: 600; }
.slapp-cta {
    display: inline-block;
    padding: 12px 24px;
    background: #ef7821;
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 600;
    margin: 12px 0;
}
.slapp-cta:hover { background: #d66817; }
.slapp-cite {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 8px;
}
.slapp-disclaim {
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin-top: 12px;
}
@media (max-width: 767px) {
    .slapp-hero { gap: 16px; }
    .slapp-hero-text, .slapp-hero-shot { flex-basis: 100%; }
    .slapp-badge { flex: 1 1 auto; justify-content: center; }
}

/* 2026-09-01 orphan-class sweep — CSS for 21 classes the SEO pass
   introduced without shipping styles for. Discovered by grepping all
   pages updated since 2026-08-25 and cross-referencing with App.css.
   Grouped by feature so each block is self-contained and skippable. */

/* --- Buttons (sl-btn, sl-orange, sl-green) --- */
.sl-btn {
    display: inline-block;
    padding: 13px 34px;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 600;
    line-height: 1.2;
    margin: 6px;
    color: #fff !important;
    transition: opacity 0.15s;
}
.sl-btn:hover { opacity: 0.9; text-decoration: none !important; }
.sl-orange { background: #fba700; }
.sl-green { background: #25d366; }

/* --- Section CTA text ("Read more →") --- */
.sl-g-cta {
    margin-top: 16px;
    font-weight: 700;
    font-size: 14px;
    color: #ef8a21;
}

/* --- Guides grid (sl-guides-grid / sl-guide-card) --- */
.sl-guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 24px 0;
}
.sl-guide-card {
    display: block;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    text-decoration: none !important;
    color: #222 !important;
    transition: box-shadow 0.15s, transform 0.15s;
}
.sl-guide-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    text-decoration: none !important;
}
.sl-guide-card h3, .sl-guide-card strong {
    margin: 0 0 8px;
    font-size: 17px;
    color: #222;
}

/* --- How-to grid (sl-how-grid) --- */
.sl-how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

/* --- FAQ blocks (sl-faq / sl-faq-a / faq-answer) --- */
details.sl-faq {
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 0;
}
details.sl-faq[open] { padding-bottom: 8px; }
details.sl-faq > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    color: #222;
    padding: 8px 32px 8px 0;
    position: relative;
}
details.sl-faq > summary::-webkit-details-marker { display: none; }
details.sl-faq > summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: #ef8a21;
    line-height: 1;
    transition: transform 0.2s;
}
details.sl-faq[open] > summary::after { content: "−"; }
details.sl-faq .faq-answer,
details.sl-faq .sl-faq-a {
    padding: 6px 0 4px;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}
details.sl-faq .faq-answer p:last-child,
details.sl-faq .sl-faq-a p:last-child { margin-bottom: 0; }

/* --- Scoliometer app extras (slapp-steps-imgs, slapp-lead, slapp-quote, slapp-rating, slapp-trust, slapp-video, slapp-gallery) --- */
.slapp-steps-imgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.slapp-steps-imgs img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.slapp-lead {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    margin: 8px 0 20px;
}
.slapp-quote {
    background: #f7f5f1;
    border-left: 4px solid #ef8a21;
    padding: 16px 20px;
    margin: 20px 0;
    font-style: italic;
    color: #444;
}
.slapp-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
    margin: 8px 0;
}
.slapp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    margin: 12px 0 20px;
    font-size: 13px;
    color: #666;
}
.slapp-video {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
}
.slapp-video iframe,
.slapp-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.slapp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.slapp-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* --- Success rate page (sr-img, sr-img-float, sr-img-floatr, sr-answer, sr-clear) --- */
.sr-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border-radius: 6px;
}
.sr-img-float {
    float: left;
    max-width: 42%;
    margin: 8px 24px 12px 0;
    height: auto;
    border-radius: 6px;
}
.sr-img-floatr {
    float: right;
    max-width: 42%;
    margin: 8px 0 12px 24px;
    height: auto;
    border-radius: 6px;
}
@media (max-width: 767px) {
    .sr-img-float, .sr-img-floatr {
        float: none;
        max-width: 100%;
        margin: 12px 0;
    }
}
.sr-clear { clear: both; }
.sr-answer {
    background: #fff8ec;
    border-left: 4px solid #fba700;
    padding: 14px 18px;
    margin: 16px 0;
    color: #333;
    border-radius: 0 6px 6px 0;
}
figure.sl-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
}
figure.sl-figure figcaption {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1.4;
}
figure.sl-figure-right {
    float: right;
    max-width: 48%;
    margin: 0.25rem 0 1rem 1.5rem;
}
figure.sl-figure-left {
    float: left;
    max-width: 48%;
    margin: 0.25rem 1.5rem 1rem 0;
}
@media (max-width: 767px) {
    figure.sl-figure-right,
    figure.sl-figure-left {
        float: none;
        max-width: 100%;
        margin: 1rem 0;
    }
}