/*
 * Scoped reset for the portal SPA mount.
 *
 * The SPA renders inside an ordinary WordPress page template via the
 * [tgm_client_portal] / [tgm_coach_dashboard] / [tgm_org_dashboard]
 * shortcodes, so — unlike the plain-PHP public pages, which intentionally
 * inherit the active theme's styling — it picks up whatever the theme
 * cascades onto the page: global element selectors, resets,
 * page-builder/framework CSS. This file cancels that out for anything
 * under the SPA's theme wrapper (the `.tgm-portal-theme` div ThemeProvider
 * renders as the first child of #tgm-portal-root) so the design tokens in
 * tlm-tokens.css are the only thing that applies — without a Shadow DOM
 * boundary.
 *
 * How it stays out of the SPA's own way: every selector below resolves to
 * exactly one class of specificity — the real `.tgm-portal-theme` class;
 * any extra element-type selector is wrapped in :where() so it adds zero
 * specificity of its own. That ties with an ordinary single-class CSS
 * Modules selector (e.g. `.button { ... }`), and Frontend_Assets registers
 * this file as a dependency that prints before the SPA bundle's own
 * compiled CSS — so on a tie, the later, real component rule wins, same as
 * plain cascade order. It also comfortably beats the bare element/type
 * selectors most theme resets lean on (`p { margin: 0 }`, `a { color: ... }`),
 * since a class always outranks a lone type selector regardless of load
 * order. It will lose to a theme rule that itself uses two or more
 * classes, an ID selector, or `!important` on the same element — if a
 * theme turns out to do that, the fix is a Shadow DOM boundary, not
 * stacking `!important` on top of this file.
 */

.tgm-portal-theme,
.tgm-portal-theme * {
    all: revert;
    box-sizing: border-box;
}

.tgm-portal-theme {
    font-family: var(--tlm-font-family);
    font-size: var(--tlm-fs-base);
    line-height: 1.5;
    color: var(--tlm-color-text);
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
}

.tgm-portal-theme :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
}

.tgm-portal-theme :where(a) {
    color: inherit;
    text-decoration: none;
}

.tgm-portal-theme :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tgm-portal-theme :where(img, svg, video) {
    display: block;
    max-width: 100%;
}

.tgm-portal-theme :where(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}