/* ============================================================
   LEGALFREI BLOG TEXT VISIBILITY LAYER

   TEXT PRESENTATION ONLY.

   Does NOT change:
   - page layout
   - cards
   - backgrounds
   - footer structure
   - animations
   - images
   - buttons
   - content
   - review functionality
   ============================================================ */

:root {

    /* LIGHT / CURRENT THEME */

    --lf-blog-text:
        #24364b;

    --lf-blog-heading:
        #081426;

    --lf-blog-strong:
        #0b1728;

    --lf-blog-muted:
        #526a82;

    --lf-blog-soft:
        #60768c;

    --lf-blog-link:
        #006f9f;
}


/* ============================================================
   PREMIUM DARK THEME
   Same readable values used by the blog.
   ============================================================ */

html.lf-application-premium-dark,
body.lf-application-premium-dark,

html[data-theme="premium-dark"],
body[data-theme="premium-dark"],

html[data-theme="dark"],
body[data-theme="dark"] {

    --lf-blog-text:
        #c9d8e3;

    --lf-blog-heading:
        #eef8ff;

    --lf-blog-strong:
        #ffffff;

    --lf-blog-muted:
        #a9bfd0;

    --lf-blog-soft:
        #7e9bb1;

    --lf-blog-link:
        #72eaff;
}


/* ============================================================
   GLOBAL TEXT RENDERING
   ============================================================ */

body,
body main {

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ============================================================
   HEADINGS
   ============================================================ */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {

    color:
        var(--lf-blog-heading) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    text-rendering:
        optimizeLegibility !important;
}


main h1 {

    font-weight:
        800 !important;
}


main h2 {

    font-weight:
        750 !important;

    line-height:
        1.12 !important;

    letter-spacing:
        -.025em !important;
}


main h3,
main h4,
main h5,
main h6 {

    font-weight:
        700 !important;
}


/* ============================================================
   NORMAL BODY TEXT
   ============================================================ */

main p,
main li,
main dt,
main dd,
main blockquote,
main figcaption {

    color:
        var(--lf-blog-text) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    text-rendering:
        optimizeLegibility !important;
}


/* Blog-style readable paragraphs */

main p {

    line-height:
        1.9 !important;
}


/* Lists */

main li {

    line-height:
        1.75 !important;
}


/* ============================================================
   STRONG / BOLD TEXT
   ============================================================ */

main strong,
main b {

    color:
        var(--lf-blog-strong) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    font-weight:
        750 !important;
}


/* ============================================================
   ITALIC TEXT
   ============================================================ */

main em,
main i {

    color:
        var(--lf-blog-text) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ============================================================
   SMALL / MUTED TEXT
   ============================================================ */

main small,
main .muted,
main .text-muted,
main .description,
main .subtitle,
main .secondary-text,
main .meta {

    color:
        var(--lf-blog-muted) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ============================================================
   LABELS
   ============================================================ */

main label {

    color:
        var(--lf-blog-text) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ============================================================
   LINKS
   ============================================================ */

main a {

    visibility:
        visible !important;

    opacity:
        1 !important;

    text-rendering:
        optimizeLegibility !important;
}


main a:not(.btn):not(.button) {

    color:
        var(--lf-blog-link) !important;
}


/* ============================================================
   FAQ / DETAILS
   ============================================================ */

main details,
main summary {

    color:
        var(--lf-blog-text) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ============================================================
   REVIEW TEXT
   TEXT ONLY — NO REVIEW LAYOUT CHANGES
   ============================================================ */

#customer-reviews,
.lf-shared-reviews {

    color:
        var(--lf-blog-text) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


#customer-reviews h1,
#customer-reviews h2,
#customer-reviews h3,
.lf-shared-reviews h1,
.lf-shared-reviews h2,
.lf-shared-reviews h3 {

    color:
        var(--lf-blog-heading) !important;
}


#customer-reviews p,
#customer-reviews li,
#customer-reviews span,
#customer-reviews small,

.lf-shared-reviews p,
.lf-shared-reviews li,
.lf-shared-reviews span,
.lf-shared-reviews small {

    color:
        var(--lf-blog-text) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


#customer-reviews strong,
.lf-shared-reviews strong {

    color:
        var(--lf-blog-strong) !important;
}


/* Review dates/categories */

#customer-reviews time,
#customer-reviews .date,
#customer-reviews .category,

.lf-shared-reviews time,
.lf-shared-reviews .date,
.lf-shared-reviews .category {

    color:
        var(--lf-blog-muted) !important;
}


/* ============================================================
   FORMS — TEXT ONLY
   ============================================================ */

main input,
main textarea,
main select {

    color:
        var(--lf-blog-strong) !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


main input::placeholder,
main textarea::placeholder {

    color:
        var(--lf-blog-soft) !important;

    opacity:
        1 !important;
}


/* ============================================================
   INLINE TEXT COLORS
   Prevent old invisible text colors from winning.
   ============================================================ */

main p[style*="color"],
main li[style*="color"],
main label[style*="color"],
main small[style*="color"],
main .description[style*="color"],
main .subtitle[style*="color"],
main .muted[style*="color"] {

    color:
        var(--lf-blog-text) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ============================================================
   TEXT VISIBILITY PROTECTION
   ============================================================ */

main p,
main li,
main label,
main small,
main span,
main strong,
main b,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:700px) {

    main p {

        line-height:
            1.85 !important;
    }

    main li {

        line-height:
            1.7 !important;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

main :focus-visible {

    outline:
        2px solid #72eaff !important;

    outline-offset:
        3px !important;
}