/* =============================================================================
   Ara Taiohi — Experience Cloud Flow Runtime Styling

   Load this in Experience Builder → Settings → Advanced → Head Markup
   (use the Experience Cloud static-resource path, NOT Visualforce {!$Resource} syntax):
   <link rel="stylesheet" type="text/css" href="/sfsites/c/resource/araTaiohiFlowCSS" />
   ============================================================================= */

/* =============================================================================
   Flow Container
   ============================================================================= */
.flowruntime-lwc-body,
.flowruntime-flow {
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
    color: #32404D;
}

/* Flow screen wrapper */
.flowruntime-lwc-body .slds-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 52, 100, 0.12);
    border: 1px solid #BFDBF7;
    overflow: hidden;
}

/* =============================================================================
   Flow Navigation Buttons (Next, Previous, Finish)
   ============================================================================= */
.flowruntime-navigation-bar .slds-button_brand,
.flowruntime-lwc-body .slds-button_brand {
    background-color: #003464 !important;
    border-color: #003464 !important;
    border-radius: 8px !important;
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.flowruntime-navigation-bar .slds-button_brand:hover,
.flowruntime-lwc-body .slds-button_brand:hover {
    background-color: #05A8AA !important;
    border-color: #05A8AA !important;
}

.flowruntime-navigation-bar .slds-button_brand:active,
.flowruntime-lwc-body .slds-button_brand:active {
    background-color: #047A7C !important;
    border-color: #047A7C !important;
}

.flowruntime-navigation-bar .slds-button_neutral,
.flowruntime-lwc-body .slds-button_neutral {
    border-color: #BFDBF7 !important;
    border-radius: 8px !important;
    color: #003464 !important;
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif !important;
    transition: background-color 0.2s ease-in-out !important;
}

.flowruntime-navigation-bar .slds-button_neutral:hover,
.flowruntime-lwc-body .slds-button_neutral:hover {
    background-color: #D6E3F0 !important;
}

/* =============================================================================
   Flow Progress Indicator
   ============================================================================= */
.slds-progress__marker,
.flowruntime-lwc-body .slds-progress__marker {
    background-color: #BFDBF7 !important;
    border-color: #BFDBF7 !important;
}

.slds-progress__marker.slds-is-active,
.flowruntime-lwc-body .slds-progress__marker.slds-is-active {
    background-color: #05A8AA !important;
    border-color: #05A8AA !important;
}

.slds-progress__marker.slds-is-completed,
.flowruntime-lwc-body .slds-progress__marker.slds-is-completed {
    background-color: #04844b !important;
    border-color: #04844b !important;
}

.slds-progress__bar_complete,
.flowruntime-lwc-body .slds-progress__bar span {
    background-color: #05A8AA !important;
}

/* =============================================================================
   Flow Screen Headers / Section Titles
   ============================================================================= */
.flowruntime-lwc-body .slds-text-heading_medium,
.flowruntime-lwc-body .flowruntime-screen-title {
    color: #003464 !important;
    font-weight: 700 !important;
    font-family: 'Red Hat Display', Arial, Helvetica, sans-serif !important;
    font-size: 1.5rem !important;
    border-bottom: 2px solid #BFDBF7;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

/* =============================================================================
   Flow Input Fields
   ============================================================================= */
.flowruntime-lwc-body .slds-input,
.flowruntime-lwc-body .slds-textarea,
.flowruntime-lwc-body .slds-select {
    border-color: #E2E2E2 !important;
    border-radius: 8px !important;
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif !important;
    color: #32404D !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.flowruntime-lwc-body .slds-input:focus,
.flowruntime-lwc-body .slds-textarea:focus,
.flowruntime-lwc-body .slds-select:focus {
    border-color: #05A8AA !important;
    box-shadow: 0 0 0 3px rgba(5, 168, 170, 0.15) !important;
}

/* Input Labels */
.flowruntime-lwc-body .slds-form-element__label {
    color: #003464 !important;
    font-weight: 500 !important;
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif !important;
}

/* =============================================================================
   Flow Display Text
   ============================================================================= */
.flowruntime-lwc-body .slds-rich-text-editor__output,
.flowruntime-lwc-body .flowruntime-display-text {
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif !important;
    color: #32404D !important;
    line-height: 1.8 !important;
}

.flowruntime-lwc-body .slds-rich-text-editor__output h1,
.flowruntime-lwc-body .slds-rich-text-editor__output h2,
.flowruntime-lwc-body .slds-rich-text-editor__output h3 {
    color: #003464 !important;
    font-family: 'Red Hat Display', Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
}

/* =============================================================================
   Flow Picklist / Combobox
   ============================================================================= */
.flowruntime-lwc-body .slds-combobox__input,
.flowruntime-lwc-body .slds-dropdown {
    border-radius: 8px !important;
    border-color: #E2E2E2 !important;
}

.flowruntime-lwc-body .slds-listbox__option:hover {
    background-color: #D6E3F0 !important;
}

.flowruntime-lwc-body .slds-listbox__option[aria-selected="true"] {
    background-color: #E0EBF5 !important;
}

/* =============================================================================
   Flow Checkbox / Radio
   ============================================================================= */
.flowruntime-lwc-body .slds-checkbox_faux,
.flowruntime-lwc-body .slds-radio_faux {
    border-color: #E2E2E2 !important;
}

.flowruntime-lwc-body .slds-checkbox input:checked + .slds-checkbox_faux {
    background-color: #003464 !important;
    border-color: #003464 !important;
}

.flowruntime-lwc-body .slds-radio input:checked + .slds-radio_faux {
    border-color: #05A8AA !important;
}

.flowruntime-lwc-body .slds-radio input:checked + .slds-radio_faux::after {
    background-color: #05A8AA !important;
}

/* =============================================================================
   Flow Help Text / Descriptions
   ============================================================================= */
.flowruntime-lwc-body .slds-form-element__help {
    color: #6088AE;
    font-size: 0.8125rem;
}

/* =============================================================================
   Flow Error Messages
   ============================================================================= */
.flowruntime-lwc-body .slds-has-error .slds-input,
.flowruntime-lwc-body .slds-has-error .slds-textarea,
.flowruntime-lwc-body .slds-has-error .slds-select {
    border-color: #c23934 !important;
    box-shadow: #c23934 0 0 0 1px inset !important;
}

.flowruntime-lwc-body .slds-form-element__help_error,
.flowruntime-lwc-body .slds-has-error .slds-form-element__help {
    color: #c23934 !important;
}

/* =============================================================================
   Flow Section (Grouped fields)
   ============================================================================= */
.flowruntime-lwc-body .slds-section__title {
    color: #003464 !important;
    font-weight: 700 !important;
    font-family: 'Red Hat Display', Arial, Helvetica, sans-serif !important;
    border-bottom: 1px solid #BFDBF7 !important;
}

/* =============================================================================
   Responsive adjustments for Flow screens
   ============================================================================= */
@media (max-width: 768px) {
    .flowruntime-lwc-body .slds-card {
        border-radius: 8px;
        margin: 0 0.5rem;
    }

    .flowruntime-lwc-body .slds-text-heading_medium,
    .flowruntime-lwc-body .flowruntime-screen-title {
        font-size: 1.25rem !important;
    }
}

/* =============================================================================
   Accessibility: Respect reduced motion preferences
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .flowruntime-navigation-bar .slds-button_brand,
    .flowruntime-lwc-body .slds-button_brand,
    .flowruntime-navigation-bar .slds-button_neutral,
    .flowruntime-lwc-body .slds-button_neutral,
    .flowruntime-lwc-body .slds-input,
    .flowruntime-lwc-body .slds-textarea,
    .flowruntime-lwc-body .slds-select {
        transition: none !important;
    }
}