/*
 * USWDS Web Components - Functional CSS Extensions
 *
 * This file contains documented functional CSS that enhances USWDS components
 * with web component capabilities not available in standard USWDS.
 *
 * All CSS in this file follows the balanced CSS standards:
 * - FUNCTIONAL PURPOSE: Performance, accessibility, or essential functionality
 * - DOCUMENTED: Each rule includes justification and alternative verification
 * - MINIMAL: Only what's necessary for web component operation
 */

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* FUNCTIONAL CSS: Virtual scrolling containers for performance optimization
 * JUSTIFICATION: USWDS does not provide virtualization utilities
 * ALTERNATIVE CHECKED: No USWDS utility for virtual rendering exists
 * PURPOSE: Enable high-performance rendering of large datasets
 */
.usa-collection__virtual-container,
.usa-table-virtual-container {
  position: relative; /* Required for virtual scroll positioning */
}

.usa-collection__virtual-container {
  overflow-y: auto; /* Enable scrolling within container */
  height: var(--usa-collection-container-height, 600px); /* Dynamic height via CSS custom property */
}

/* ==========================================================================
   INTERACTIVE ENHANCEMENTS
   ========================================================================== */

/* FUNCTIONAL CSS: Interactive table functionality
 * JUSTIFICATION: USWDS does not provide sortable table cursor styling
 * ALTERNATIVE CHECKED: No USWDS utility for sortable header cursor exists
 * PURPOSE: Visual feedback for sortable table headers
 */
.usa-table__header--sortable {
  cursor: pointer; /* Required for sortable column indication */
}

/* ==========================================================================
   BROWSER BEHAVIOR CONTROL
   ========================================================================== */

/* FUNCTIONAL CSS: Modal body scroll prevention
 * JUSTIFICATION: Essential browser behavior control for modal functionality
 * ALTERNATIVE CHECKED: No USWDS class for body overflow management exists
 * PURPOSE: Prevent background scrolling when modal is open
 */
body.usa-modal--open {
  overflow: hidden; /* Required to prevent body scroll during modal */
}

/* FUNCTIONAL CSS: Smooth scroll behavior control
 * JUSTIFICATION: Essential for in-page navigation functionality
 * ALTERNATIVE CHECKED: No USWDS class for scroll behavior exists
 * PURPOSE: Enable smooth scrolling for in-page navigation
 */
html.usa-in-page-navigation--smooth-scroll {
  scroll-behavior: smooth; /* Required for smooth in-page navigation */
}

/* ==========================================================================
   PRECISE POSITIONING
   ========================================================================== */

/* FUNCTIONAL CSS: Tooltip positioning system
 * JUSTIFICATION: USWDS tooltips require precise positioning not achievable with utilities
 * ALTERNATIVE CHECKED: No USWDS utilities for precise percentage-based positioning
 * PURPOSE: Accurate tooltip placement relative to trigger elements
 */
.usa-tooltip__body--positioned-top {
  left: 50%; /* Center horizontally */
  top: -5px; /* Position above trigger */
}

.usa-tooltip__body--positioned-bottom {
  left: 50%; /* Center horizontally */
  /* Default bottom positioning */
}

.usa-tooltip__body--positioned-left {
  top: 50%; /* Center vertically */
  left: -5px; /* Position to the left of trigger */
}

.usa-tooltip__body--positioned-right {
  top: 50%; /* Center vertically */
  /* Default right positioning */
}

/* ==========================================================================
   DYNAMIC STYLING SYSTEM
   ========================================================================== */

/* FUNCTIONAL CSS: Dynamic section backgrounds
 * JUSTIFICATION: USWDS sections don't support dynamic background properties
 * ALTERNATIVE CHECKED: No USWDS utilities for dynamic backgrounds
 * PURPOSE: Enable dynamic background colors and images via CSS custom properties
 */
.usa-section--dynamic-style {
  background-color: var(--usa-section-bg-color, transparent);
  background-image: var(--usa-section-bg-image, none);
  background-size: var(--usa-section-bg-size, cover);
  background-position: var(--usa-section-bg-position, center);
}