/**
 * ============================================================================
 * MEDSPA BELLA APP-LEVEL UTILITIES
 * ============================================================================
 *
 * DSC-10-07: Utility classes extracted from medspabella-theme.css so that
 * component-specific utilities are separate from brand theming concerns.
 *
 * Load this file AFTER medspabellaclearwater-theme.css in each page template.
 * ============================================================================
 */

/* VIS-I19/RES-I-019: Responsive director photo sizing */
.director-photo {
    max-width: min(250px, 100%);
}

/* DES-I25/RES-I-030: Step number circles for process steps */
/* DSC-12H-05: Converted from hardcoded px to rem for font-size-relative scaling (60px = 3.75rem) */
.step-number-circle {
    height: 3.75rem;
    width: 3.75rem;
}

/* Content formatting utilities */
.text-pre-wrap {
    white-space: pre-wrap;
}

/* DSC-23d-02: Removed duplicate dark mode tokens — variables.css @media block handles noscript fallback */
/* Note: Card borders are intentional MedSpa brand differentiation (DSC-23d-05). See medspabellaclearwater-theme.css:372 */

/* VIS-L20/VIS-L03: Dark mode coverage for service highlight boxes and bg-light remnants */
[data-bs-theme="dark"] .service-highlight {
    background-color: var(--gray-800);
    color: var(--bcss-text);
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--gray-800) !important;
    color: var(--bcss-text);
}