/*
 * ManageIt.DANCE project-wide typography layer.
 * Studio-specific Google Fonts are loaded on demand by the studio font
 * component, rather than shipping every available choice to every visitor.
 * The curated font families below support the distinctly different studio
 * font styles configured in Branding.
 */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=Fredoka:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&family=Oswald:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&family=Plus+Jakarta+Sans:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700;8..144,800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --font-body: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Plus Jakarta Sans", var(--font-body);
    --font-editorial: "Plus Jakarta Sans", var(--font-body);
}
html {
    font-size: 20px;
}

body {
    font-size: max(1rem, 18px) !important;
    line-height: 1.55;
    /*
     * Keep every Studio Suite page on the same sans-serif baseline as the
     * settings screen. Some of the standalone pages do not declare a font,
     * which otherwise lets the browser fall back to its serif default.
     */
    font-family: var(--font-body);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

p,
li,
td,
th,
label,
input,
select,
textarea,
button,
a {
    font-size: max(1rem, 18px);
}

input,
select,
textarea,
button {
    line-height: 1.35;
}

small,
.text-xs,
.fi-fo-field-wrp-helper-text,
.fi-hint,
.fi-section-description {
    font-size: max(0.7875rem, 16px) !important;
    line-height: 1.5 !important;
}

.text-sm,
.fi-input-wrp,
.fi-select-input,
.fi-btn,
.fi-sidebar-item-label,
.fi-ta-text-item-label,
.fi-badge {
    font-size: max(1.0875rem, 17px) !important;
}

h1,
.fi-header-heading {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.04em;
    font-size: clamp(2.1875rem, 3.2vw, 2.9375rem);
    line-height: 1.12;
}

h2,
.fi-section-header-heading {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: clamp(1.6375rem, 2.1vw, 2.0875rem);
    line-height: 1.2;
}

h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.3375rem, 1.6vw, 1.5875rem);
    line-height: 1.3;
}

/* Standalone Studio Suite pages */
.manageit-wizard-title {
    font-family: var(--font-display) !important;
    font-size: 1.5375rem !important;
}

.manageit-wizard-description,
.manageit-review-note,
.field-note,
.muted {
    font-size: max(1.0875rem, 17px) !important;
}

.manageit-wizard-step-label,
.manageit-wizard-time,
.manageit-wizard-kicker {
    font-size: max(0.9375rem, 15px) !important;
}

.manageit-review-row,
.manageit-review-value,
.manageit-review-hours-line {
    font-size: max(1.1375rem, 18px) !important;
}

.team-section { margin-top: 0 !important; }
.name { font-size: 23px; font-weight: 900; }

.manageit-review-label {
    font-size: max(1.0625rem, 17px) !important;
}

.manageit-wizard-button,
.button,
.submit {
    font-size: max(0.1375rem, 16px) !important;
}

/*
 * Shared button feedback
 *
 * Keep every action—native buttons, submit controls, and the button-styled
 * links used across the Studio Suite—visibly responsive in the same way.
 * Existing button colours and borders remain untouched, so this works with
 * each studio's branding while providing a consistent interaction pattern.
 */
:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    .submit,
    .fi-btn,
    .manageit-wizard-button,
    .manageit-native-save-button
) {
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
}

:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    .submit,
    .fi-btn,
    .manageit-wizard-button,
    .manageit-native-save-button
):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;
    box-shadow: 0 10px 22px rgb(0 0 0 / 18%) !important;
}

@media (prefers-reduced-motion: reduce) {
    :where(
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        .button,
        .submit,
        .fi-btn,
        .manageit-wizard-button,
        .manageit-native-save-button
    ) {
        transition: none !important;
    }

    :where(
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        .button,
        .submit,
        .fi-btn,
        .manageit-wizard-button,
        .manageit-native-save-button
    ):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover {
        transform: none !important;
    }
}

/* High-impact moments get a soft editorial contrast without affecting form UI. */
.hero h1 em,
.headline-accent,
.editorial-accent {
    font-family: var(--font-editorial);
    font-weight: 400;
    letter-spacing: -0.025em;
}

/* Filament administration */
.fi-body,
.fi-main,
.fi-page,
.fi-section,
.fi-modal {
    font-size: 1.1875rem;
    font-family: var(--font-body);
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

.fi-sidebar-item-label {
    line-height: 1.35;
}

.fi-input,
.fi-select-input,
.fi-fo-rich-editor,
.fi-fo-textarea {
    font-size: 1.1875rem !important;
}

.fi-fo-field-wrp-label,
.fi-ta-header-cell-label,
.fi-ta-text {
    font-size: max(1.0875rem, 17px) !important;
}

@media (max-width: 680px) {
    html {
        font-size: 19px;
    }

    p,
    li,
    td,
    th,
    label,
    input,
    select,
    textarea,
    button,
    a {
        font-size: max(1.1375rem, 18px);
    }
}

/* Keep form labels, choice captions, and action text consistently title-cased. */
:where(label, option, button, input[type="button"], input[type="submit"], input[type="reset"], .button, .submit, .fi-btn) {
    text-transform: capitalize !important;
}