/* =========================================================
   5M BIOTECH INDIA
   SITEWIDE TYPOGRAPHY V1

   Goals:
   - Senior-professional readability
   - Mobile-first legibility
   - No external font dependency
   - Consistent typography across pages/products/forms/footer
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL FONT STACK
   --------------------------------------------------------- */

html {

    font-size: 100%;

    -webkit-text-size-adjust: 100%;

    text-size-adjust: 100%;
}


body,
button,
input,
select,
textarea {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif !important;
}


body {

    font-size: 18px;

    line-height: 1.68;

    font-weight: 400;

    color: #263b42;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}


/* ---------------------------------------------------------
   BODY COPY
   --------------------------------------------------------- */

p,
ul,
ol,
dl,
blockquote {

    line-height: 1.68;
}


p {

    margin-bottom: 1.05em;
}


main p,
main li {

    font-size: 1rem;
}


main li {

    line-height: 1.65;
}


/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

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

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif !important;

    color: #072f3d;

    font-weight: 700;

    text-rendering: optimizeLegibility;
}


h1 {

    font-weight: 720;

    line-height: 1.06;
}


h2 {

    font-weight: 700;

    line-height: 1.12;
}


h3 {

    font-weight: 680;

    line-height: 1.25;
}


h4,
h5,
h6 {

    font-weight: 650;

    line-height: 1.35;
}


/* ---------------------------------------------------------
   LONG-FORM COPY WIDTH
   --------------------------------------------------------- */

.entry-content > p,
.entry-content > ul,
.entry-content > ol {

    max-width: 75ch;
}


/* ---------------------------------------------------------
   FORMS
   16PX+ PREVENTS MOBILE LEGIBILITY / ZOOM ISSUES
   --------------------------------------------------------- */

input,
select,
textarea,
button {

    font-size: 16px !important;

    line-height: 1.45;
}


input,
select,
textarea {

    min-height: 46px;
}


textarea {

    min-height: 130px;
}


button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button,
.button {

    font-weight: 650;
}


/* ---------------------------------------------------------
   HEADER + NAVIGATION
   --------------------------------------------------------- */

.site-header,
.site-header a,
.main-navigation,
.main-navigation a,
.primary-menu-container a,
.mobile-navigation a {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif !important;
}


.site-header a,
.main-navigation a,
.primary-menu-container a {

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .005em;
}


/* ---------------------------------------------------------
   5M EYEBROWS / SECTION INDEX LABELS
   Existing designs often used 9–10px.
   Raise them for senior/mobile readability.
   --------------------------------------------------------- */

[class$="-eyebrow"],
[class$="-index"],
.m5-footer-kicker {

    font-size: 12px !important;

    line-height: 1.4 !important;

    font-weight: 750 !important;

    letter-spacing: .10em !important;
}


/* ---------------------------------------------------------
   COMMON 5M PAGE COPY
   --------------------------------------------------------- */

[class$="-lead"],
[class$="-intro"],
[class$="-copy"] p,
[class$="-dark-copy"] p,
[class$="-contact-copy"] p,
[class$="-hero-copy"] {

    font-size: 16px !important;

    line-height: 1.72 !important;
}


/* ---------------------------------------------------------
   PROCESS / GRID / SUPPORT TEXT
   --------------------------------------------------------- */

[class*="-steps"] p,
[class*="-grid"] span,
[class*="-list"] p,
[class*="-list"] span {

    font-size: 15px;
}


/* ---------------------------------------------------------
   PRODUCT / CATALOGUE READABILITY
   --------------------------------------------------------- */

.m5-product-card,
.m5-product-card a,
.m5-product-card p,
.m5-product-card span,
.m5v5-product,
.m5v5-product p,
.m5v5-product li,
.single-m5_product main,
.archive-m5_product main {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;
}


.m5-product-card p,
.m5-product-card li,
.m5v5-product p,
.m5v5-product li {

    font-size: 16px;

    line-height: 1.62;
}


.m5-category-name {

    font-size:
        clamp(
            17px,
            1.18vw,
            20px
        ) !important;

    font-weight: 700;
}


.m5-category-subtitle {

    font-size: 13px !important;

    line-height: 1.4 !important;
}


/* ---------------------------------------------------------
   FOOTER
   No tiny 9–11px copy for senior audience.
   --------------------------------------------------------- */

.m5-footer-brand strong {

    font-size: 21px;
}


.m5-footer-positioning {

    font-size: 14px !important;

    line-height: 1.65;
}


.m5-footer-contact {

    font-size: 14px !important;

    line-height: 1.55;
}


.m5-footer-proof-link {

    font-size: 14px !important;
}


.m5-footer-nav h3 {

    font-size: 13px !important;

    letter-spacing: .07em;
}


.m5-footer-nav a {

    font-size: 14px !important;

    line-height: 1.5;
}


.m5-footer-trust-strip span {

    font-size: 13px !important;

    line-height: 1.45;
}


.m5-footer-disclaimer p,
.m5-footer-disclaimer a {

    font-size: 13px !important;

    line-height: 1.6;
}


.m5-footer-bottom {

    font-size: 13px !important;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

table {

    font-size: 16px;
}


th {

    font-weight: 700;
}


td,
th {

    line-height: 1.5;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

main a {

    text-underline-offset: .16em;

    text-decoration-thickness: .08em;
}


/* ---------------------------------------------------------
   ACCESSIBILITY / ZOOM
   --------------------------------------------------------- */

small {

    font-size: .875rem;
}


strong,
b {

    font-weight: 700;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    body {

        font-size: 18px;
    }


    main p,
    main li {

        font-size: 1rem;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    html {

        font-size: 100%;
    }


    body {

        font-size: 18px;

        line-height: 1.7;
    }


    main p,
    main li {

        font-size: 17px;

        line-height: 1.7;
    }


    h1 {

        line-height: 1.08;
    }


    h2 {

        line-height: 1.14;
    }


    .site-header a,
    .main-navigation a,
    .mobile-navigation a {

        font-size: 16px;
    }


    [class$="-lead"],
    [class$="-intro"],
    [class$="-copy"] p,
    [class$="-dark-copy"] p,
    [class$="-contact-copy"] p,
    [class$="-hero-copy"] {

        font-size: 17px !important;

        line-height: 1.72 !important;
    }


    [class$="-eyebrow"],
    [class$="-index"],
    .m5-footer-kicker {

        font-size: 12px !important;
    }


    .m5-footer-nav a {

        font-size: 15px !important;

        padding:
            7px 0 !important;
    }


    .m5-footer-positioning,
    .m5-footer-contact {

        font-size: 15px !important;
    }


    .m5-footer-disclaimer p,
    .m5-footer-disclaimer a,
    .m5-footer-bottom {

        font-size: 13px !important;
    }


    .m5-category-name {

        font-size: 20px !important;
    }


    .m5-category-subtitle {

        font-size: 14px !important;
    }


    input,
    select,
    textarea,
    button {

        font-size: 16px !important;
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 390px) {

    body {

        font-size: 17px;
    }


    main p,
    main li {

        font-size: 17px;
    }

}