/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Text-zoom safety net (WCAG 1.4.4). Grid children default to min-width:auto,
 * so a long word inside a card can push its track wider than the viewport and
 * force horizontal scrolling when a visitor resizes text to 200%.
 */
body {
  overflow-wrap: break-word;
}

/*
 * `anywhere` (rather than `break-word`) is needed on grid items because it
 * also lowers their min-content size, which is what decides track widths.
 */
:where(.grid) > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/*
 * Flex children keep their content width by default too. Letting them shrink
 * matters for icon + heading rows, where the heading would otherwise push the
 * page wider than the viewport. The wrapping behaviour is inherited from the
 * ancestor (grid items pass down `anywhere`), so it is not set here.
 */
:where(.flex) > * {
  min-width: 0;
}