/**
 * SSA - GLOBAL UTILITIES SYSTEM (ssa-utilities.css)
 * ARCHITECTURE MODE: STRICT GLOBAL DESIGN SYSTEM
 */

/* ==========================================================================
   1. BRAND COLOR UTILITIES (Approved tokens only)
   ========================================================================== */
.text-navy,
.ssa-text-navy {
  color: var(--ssa-primary) !important;
}

.text-navy-900,
.ssa-text-navy-900 {
  color: var(--ssa-navy-900) !important;
}

.text-green,
.ssa-text-green {
  color: var(--ssa-secondary) !important;
}

.text-orange,
.ssa-text-orange {
  color: var(--ssa-accent) !important;
}

.text-muted,
.ssa-text-muted {
  color: var(--ssa-text-muted) !important;
}

.text-white,
.ssa-text-white {
  color: var(--ssa-white) !important;
}

/* ==========================================================================
   2. BACKGROUND UTILITIES (Approved surfaces only)
   ========================================================================== */
.bg-white,
.ssa-bg-white {
  background-color: var(--ssa-white) !important;
}

.bg-soft,
.ssa-bg-soft {
  background-color: var(--ssa-bg-soft) !important;
}

.bg-soft-navy,
.ssa-bg-soft-navy {
  background-color: var(--ssa-bg-navy-soft) !important;
}

.bg-soft-green,
.ssa-bg-soft-green {
  background-color: var(--ssa-bg-green-soft) !important;
}

.bg-warm,
.ssa-bg-warm {
  background-color: var(--ssa-bg-warm) !important;
}

.bg-navy,
.ssa-bg-navy {
  background-color: var(--ssa-primary) !important;
}

.bg-deep-navy,
.ssa-bg-deep-navy {
  background-color: var(--ssa-navy-900) !important;
}

/* ==========================================================================
   3. TEXT ALIGNMENT
   ========================================================================== */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

/* ==========================================================================
   4. DISPLAY & VISIBILITY
   ========================================================================== */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

.ssa-u-mt-3 {
  margin-top: var(--ssa-space-3) !important;
}

.ssa-u-mt-4 {
  margin-top: var(--ssa-space-4) !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   WordPress Accessibility Standard: .screen-reader-text (WCAG 2.1 Level AA)
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--ssa-navy-900, #072F41);
  border-radius: var(--ssa-radius-sm, 6px);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.4);
  clip: auto !important;
  clip-path: none;
  color: #FFFFFF;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 6px;
  line-height: normal;
  padding: 12px 20px;
  text-decoration: none;
  top: 6px;
  width: auto;
  z-index: 100000;
}