/* colors.css imported globally via style.css */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/*
    1. Spacing Helpers
    2. Text Alignment
    3. Text Colors
    4. Background Colors
    5. Display Helpers
    6. Dark Mode Overrides
    7. Extended Utilities
*/

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Spacing helpers */
.u-mt-0 {
  margin-top: 0 !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-mt-sm {
  margin-top: var(--space-1) !important;
  /* 0.5rem */
}

.u-mb-sm {
  margin-bottom: var(--space-1) !important;
  /* 0.5rem */
}

.u-pt-sm {
  padding-top: var(--space-1) !important;
  /* 0.5rem */
}

.u-pb-sm {
  padding-bottom: var(--space-1) !important;
  /* 0.5rem */
}

.u-mt-lg {
  margin-top: var(--space-5) !important;
  /* 2rem */
}

.u-mb-lg {
  margin-bottom: var(--space-5) !important;
  /* 2rem */
}

/* Text alignment */
.u-text-left {
  text-align: left !important;
}

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

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

/* Text colors */
.u-text-primary {
  color: var(--kaplon-blue) !important;
}

.u-text-danger {
  color: var(--kaplon-red) !important;
}

.u-text-muted {
  color: var(--gray-mid) !important;
}

/* Background colors */
.u-bg-primary {
  background-color: var(--kaplon-blue) !important;
  color: var(--white) !important;
}

.u-bg-danger {
  background-color: var(--kaplon-red) !important;
  color: var(--white) !important;
}

.u-bg-light {
  background-color: var(--gray-light) !important;
}

.u-bg-dark {
  background-color: var(--gray-dark) !important;
  color: var(--white) !important;
}

/* Display helpers */
.u-hidden {
  display: none !important;
}

.u-inline {
  display: inline !important;
}

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

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

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

/* ==========================================================================
   6.0 Dark Mode Overrides
   ========================================================================== */

/* ==========================================================================
   7.0 Extended Utilities
   ========================================================================== */

/* Border helpers */
.u-border {
  border: 1px solid var(--gray-300) !important;
}

.u-border-0 {
  border: none !important;
}

/* Width helpers */
.u-w-100 {
  width: 100% !important;
}

.u-w-auto {
  width: auto !important;
}

/* Accessibility helpers */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   Communities + Brand Utilities (no new variables; uses colors.css tokens)
   Rollback: delete this whole block
   ========================================================================== */
.text-brand {
  color: var(--kaplon-blue) !important;
}

/* brand blue */
.text-brand-primary {
  color: var(--kaplon-red) !important;
}

/* brand red utilities kept minimal here. Button colors and interactive
   states are defined in css/partials/buttons.css to avoid duplicates. */

.surface-soft {
  background: var(--gray-lighter);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-5, 16px);
  box-shadow: 0 3px 16px var(--gray-shadow);
}

.communities-text {
  padding: var(--space-4) !important;
  background-color: var(--gray-lighter) !important;
  /* 24px */
}

/* ==========================================================================
   Dark Mode overrides for Communities utilities
   Uses existing tokens from colors.css (no new variables)
   Rollback: delete this whole block
   ========================================================================== */

/* ==========================================================================
   Contrast Guard (Dark Mode)
   --------------------------------------------------------------------------
   Purpose: Brand blue (#191944 / var(--kaplon-blue)) as plain text on dark
            surfaces failed WCAG contrast in multiple audit cases.
            This guard swaps low‑contrast brand blue body text for a high
            contrast semantic token while preserving brand color in interactive
            components (buttons already overridden elsewhere).
   Scope:  Common dark surface containers + generic text utility classes.
   Rollback: Delete this entire block.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .u-bg-light {
    background-color: var(--gray-800) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .u-text-muted {
    color: var(--gray-300) !important;
  }

  html[data-kaplon-color-mode=system] .u-bg-dark {
    background-color: var(--dark-surface) !important;
    color: var(--white) !important;
  }

  /* Card shell: darker surface, subtle border + deeper shadow */
  html[data-kaplon-color-mode=system] .surface-soft {
    background: var(--gray-800) !important;
    border: 1px solid var(--white-08) !important;
    box-shadow: var(--shadow-dark-lg) !important;
  }

  /* Bottom text wrapper: match dark surface, ensure readable text */
  html[data-kaplon-color-mode=system] .communities-text {
    background-color: var(--gray-800) !important;
    color: var(--white) !important;
  }

  /* CTA keeps brand red; improve focus visibility on dark */
  html[data-kaplon-color-mode=system] .btn-brand {
    outline-color: var(--white);
  }

  html[data-kaplon-color-mode=system] .btn-brand:hover,html[data-kaplon-color-mode=system] 
  .btn-brand:focus {
    background: var(--kaplon-red-dark);
  }

  /* Flip primary text to white for contrast */
  html[data-kaplon-color-mode=system] .u-text-primary {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .text-brand {
    color: var(--white) !important;
  }

  /* Replace standalone brand-blue text inside dark surface contexts */
  html[data-kaplon-color-mode=system] :where(.surface-soft, .communities-text, .IDX-wrapper-standard, .icon-nav, .chip-bar, .footer, .hero-intro, .card-md, .header-nav, .navigation, .IDX-resultsCellActions) :where(.text-brand, .u-text-primary) {
    color: var(--text-primary-dark) !important;
  }

  /* Links: lighten brand blue while keeping recognizability */
  html[data-kaplon-color-mode=system] :where(.surface-soft, .communities-text, .IDX-wrapper-standard, .icon-nav, .chip-bar, .footer, .hero-intro, .card-md, .header-nav, .navigation) a:where(:not(.btn):not(.btn-brand):not(.btn-community):not(.btn-primary)) {
    color: var(--text-link-dark) !important;
  }

  html[data-kaplon-color-mode=system] :where(.surface-soft, .communities-text, .IDX-wrapper-standard, .icon-nav, .chip-bar, .footer, .hero-intro, .card-md, .header-nav, .navigation) a:where(:not(.btn):not(.btn-brand):not(.btn-community):not(.btn-primary)):where(:hover, :focus-visible) {
    color: var(--kaplon-blue-light) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
/* Card shell: darker surface, subtle border + deeper shadow */
/* Bottom text wrapper: match dark surface, ensure readable text */
/* CTA keeps brand red; improve focus visibility on dark */
/* Flip primary text to white for contrast */
/* Replace standalone brand-blue text inside dark surface contexts */
/* Links: lighten brand blue while keeping recognizability */
html[data-kaplon-color-mode=dark] .u-bg-light {
    background-color: var(--gray-800) !important;
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .u-text-muted {
    color: var(--gray-300) !important;
  }
html[data-kaplon-color-mode=dark] .u-bg-dark {
    background-color: var(--dark-surface) !important;
    color: var(--white) !important;
  }
/* Card shell: darker surface, subtle border + deeper shadow */
html[data-kaplon-color-mode=dark] .surface-soft {
    background: var(--gray-800) !important;
    border: 1px solid var(--white-08) !important;
    box-shadow: var(--shadow-dark-lg) !important;
  }
/* Bottom text wrapper: match dark surface, ensure readable text */
html[data-kaplon-color-mode=dark] .communities-text {
    background-color: var(--gray-800) !important;
    color: var(--white) !important;
  }
/* CTA keeps brand red; improve focus visibility on dark */
html[data-kaplon-color-mode=dark] .btn-brand {
    outline-color: var(--white);
  }
html[data-kaplon-color-mode=dark] .btn-brand:hover,html[data-kaplon-color-mode=dark] 
  .btn-brand:focus {
    background: var(--kaplon-red-dark);
  }
/* Flip primary text to white for contrast */
html[data-kaplon-color-mode=dark] .u-text-primary {
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .text-brand {
    color: var(--white) !important;
  }
/* Replace standalone brand-blue text inside dark surface contexts */
html[data-kaplon-color-mode=dark] :where(.surface-soft, .communities-text, .IDX-wrapper-standard, .icon-nav, .chip-bar, .footer, .hero-intro, .card-md, .header-nav, .navigation, .IDX-resultsCellActions) :where(.text-brand, .u-text-primary) {
    color: var(--text-primary-dark) !important;
  }
/* Links: lighten brand blue while keeping recognizability */
html[data-kaplon-color-mode=dark] :where(.surface-soft, .communities-text, .IDX-wrapper-standard, .icon-nav, .chip-bar, .footer, .hero-intro, .card-md, .header-nav, .navigation) a:where(:not(.btn):not(.btn-brand):not(.btn-community):not(.btn-primary)) {
    color: var(--text-link-dark) !important;
  }
html[data-kaplon-color-mode=dark] :where(.surface-soft, .communities-text, .IDX-wrapper-standard, .icon-nav, .chip-bar, .footer, .hero-intro, .card-md, .header-nav, .navigation) a:where(:not(.btn):not(.btn-brand):not(.btn-community):not(.btn-primary)):where(:hover, :focus-visible) {
    color: var(--kaplon-blue-light) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }