/* ==========================================================================
   Responsive typography layer
   Loaded last on every customer facing shell. Gives reading text a fluid,
   comfortable base on every viewport and keeps form controls at a size
   mobile browsers never zoom into. Component sizes are set by their own
   stylesheets; this layer only provides the baseline and shared floors.
   ========================================================================== */

:root {
    /* 16px on small phones, 17.5px from 1440px upward */
    --rt-text: clamp(1rem, 0.9639rem + 0.1442vw, 1.09375rem);
    --rt-leading: 1.6;
}

/* Marketing, blog, auth, error and review shells */
body.rt-front {
    font-size: var(--rt-text);
    line-height: var(--rt-leading);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.rt-front h1,
body.rt-front h2 {
    text-wrap: balance;
}

body.rt-front p,
body.rt-front li,
body.rt-front dd,
body.rt-front blockquote {
    text-wrap: pretty;
}

body.rt-front small,
body.rt-front .small {
    font-size: max(0.875rem, 0.875em);
}

/* Application shell: dashboard, cart, checkout, orders, certificates, course player.
   16px body on phones, tablets and laptops; desktop monitors from 1800px read one
   step larger and wide monitors from 2240px a second step, in line with the shell
   tokens in adminMain.css and the generated large screen blocks of every page. */
body.rt-app {
    font-size: 1rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (min-width: 1800px) {
    body.rt-app {
        font-size: 1.0625rem;
    }
}

@media (min-width: 2240px) {
    body.rt-app {
        font-size: 1.125rem;
    }
}

body.rt-app small,
body.rt-app .small {
    font-size: max(0.875rem, 0.875em);
}

/* Form controls never drop below 16px on phones, so iOS Safari does not zoom
   into the field on focus and every input stays legible. */
@media (max-width: 767.98px) {
    body.rt-front input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
    body.rt-front select,
    body.rt-front textarea,
    body.rt-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
    body.rt-app select,
    body.rt-app textarea,
    body.rt-app .form-control,
    body.rt-app .form-select {
        font-size: max(16px, 1em) !important;
    }
}