/*
 * One type scale for the whole website: every page title, section title, small label, intro text and card text takes its
 * size from General settings → Website look → Typography (the --ms-* variables of App\Services\SiteDesign), so the same
 * kind of text is the same size on every page. A section can still change its own sizes (Pages & content → Style).
 * Loaded after the site's other stylesheets; "html body" makes these win over each block's own older size.
 */

/* Page titles: the heading on a page's picture hero (H1) */
html body :is(.ph h1.ph-title, .pl-hero h1, .bl-hero h1, .bl-post-hero h1, .ex-hero h1, .gl-title h1, .cms-cafe-hero h1, .cat-hero h1,
    .cms-ct-info h1, .pkg-hero h1, .apd-hero h1) {
    font-size: var(--ms-h1);
    line-height: var(--ms-lh-head);
}
/* on phones the phone share alone left 45px, so long titles took five or six lines of the hero */
@media (max-width: 767px) {
    html body :is(.ph h1.ph-title, .pl-hero h1, .bl-hero h1, .bl-post-hero h1, .ex-hero h1, .gl-title h1, .cms-cafe-hero h1, .cat-hero h1,
        .cms-ct-info h1, .pkg-hero h1, .apd-hero h1) {
        font-size: min(var(--ms-h1), clamp(30px, 10vw, 45px));
    }
}

/* Section titles (H2): the title of each part of a page */
html body :is(.fb h2, .ib h2, .ex-intro h2, .ex-show h2, .ex-moments h2, .ex-book h2, .gl-head h2, .pl-rules-top h2, .lgp-disc h2,
    .cms-cafe-story .cms-sec__title, .cms-cfe__head .cms-sec__title, .cms-cmenu__head h2, .cms-promo-head__title, .rel-head h2, .ig-head h2,
    .cms-grid-head h2, .cms-intro h2, .vr-head h2, .rv-head h2) {
    font-size: var(--ms-h2);
    line-height: var(--ms-lh-head);
}
/* ...and the theme's own section titles (Elementor heading widgets carry a size per element, so this one must insist) */
html body .elementor-widget-heading h2.elementor-heading-title { font-size: var(--ms-h2) !important; line-height: var(--ms-lh-head); }

/* Small labels: the small uppercase line above a title */
html body :is(.ph-kicker, .ex-kicker, .fb-kicker, .pl-kicker, .ib-kicker, .ig-kick, .gl-kicker, .vr-kicker, .rv-kicker, .rel-kicker,
    .apt-intro-kicker, .bl-kick, .bl-eyebrow, .bl-cta-eyebrow, .co-exp-kick, .cms-cafe-kicker, .cms-cafe-hero__kicker, .cms-menu-kicker,
    .cms-intro__kicker, .cms-ct-kicker, .cms-promo-head__kicker) {
    font-size: var(--ms-t-kicker);
    letter-spacing: var(--ms-kicker-ls);
}

/* Intro texts: the larger sentence under a page or section title */
html body :is(.ph-lead, .bl-lead, .pl-lead, .cms-ct-lead, .cms-promo-head__lead, .co-exp-lead, .ex-hero p, .gl-title p, .cms-cafe-hero p) {
    font-size: var(--ms-t-lead);
}

/* Card texts: the text inside cards and boxes */
html body :is(.bl-card p, .ex-card .ex-desc, .fb-why-card p, .pl-card-h p, .rvm-card p, .cms-ct-card p, .cms-near-card p, .rv-card p) {
    font-size: var(--ms-t-card);
}

/*
 * Space between sections: the blocks that are a whole band of a page (founder, intro band, Explore and Gallery parts,
 * house rules, the legal and blog bodies) use the one standard space of Website look → Spacing (--cms-sec-space: computer,
 * tablet and phone), instead of each their own. A block that follows its own heading keeps its small top.
 */
html body :is(.fb, .ib, .ex-intro, .ex-show, .ex-moments, .pl-rules, .gl-apts) {
    padding-top: var(--cms-sec-space);
    padding-bottom: var(--cms-sec-space);
}
html body :is(.gl-all, .ex-book, .lgp-body, .bl-news, .cms-gallery) { padding-bottom: var(--cms-sec-space); }