:root {
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
    /*
     * Reserve scrollbar space consistently. Without this, macOS-style overlay
     * scrollbars report zero width to the page but Bootstrap's modal still
     * detects a nonzero scrollbar via its measurement trick and pads <body>
     * to compensate, shifting page content sideways when a modal opens.
     */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

turbo-frame {
    display: block;
}

/*
 * Bootstrap's .modal-content relies on being the direct flex item inside
 * .modal-dialog (display: flex) to stretch to full width. Wrapping it in
 * <turbo-frame> for lazy-loaded modal content makes the frame the flex item
 * instead, which shrinks to its content's natural width unless told to fill
 * the row.
 */
.modal-dialog > turbo-frame {
    width: 100%;
}