/* =========================================================
   FitCheck Legacy Class Bridge
   /static/css/legacy_bridge.css

   Maps legacy Bootstrap-style class names onto the new design
   system so they look brand-correct WITHOUT rewriting them.

   Two tiers of consumer remain:
     1. App-wide button/spacing classes (.btn*, .padding-xsmall,
        .input-group, .form-select) — used across ~30 templates.
        These are the de-facto component API; renaming to fc-* is a
        deferred large refactor, not a quick cleanup.
     2. Page-specific structure — fully migrated to fc-* primitives;
        no page-specific legacy classes remain here.

   Each rule is documented with its consumer + target replacement.
   When a class drops to zero consumers, delete its block here.

   Load order in base.html:
     1. design_system.css
     2. app_components.css
     3. premium.css        (slim bridge — Bootstrap classes)
     4. legacy_bridge.css  (this file — page-specific legacy)
   ========================================================= */


/* ---------- .section-header + .container + .padding-* (style.css legacy)
   Consumers: index.html, events.html
   Replacement: .u-text-center / .fc-page-eyebrow / explicit padding utilities */
.section-header { margin-bottom: var(--space-6); }
.section-header h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--ink-0);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}
.section-header h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink-0);
  margin: 0 0 var(--space-2);
}
.section-header p {
  color: var(--ink-2);
  font-size: var(--text-md);
  margin: 0;
}

.padding-xsmall { padding: var(--space-4) 0; }


/* ---------- .btn-accent + .btn-medium + .btn-small + .btn-outline-*
   Consumers: app-wide (~30 templates) — de-facto button API via the bridge
   Replacement: .fc-btn-* with size modifiers (deferred — large refactor) */
.btn,
.btn-accent,
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

/* btn-accent → primary ochre */
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-accent:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* btn-outline-* → secondary outline */
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary {
  background: transparent;
  color: var(--ink-0);
  border-color: var(--ink-4);
}
.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover {
  background: var(--paper-1);
  border-color: var(--ink-2);
  color: var(--ink-0);
}

/* Size modifiers */
.btn-small  { font-size: var(--text-xs);  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.btn-medium { font-size: var(--text-sm);  padding: var(--space-3) var(--space-5); }

.btn-center { display: flex; justify-content: center; gap: var(--space-3); }


/* ---------- .input-group (Bootstrap, used by settings) */
.input-group {
  display: flex;
  gap: var(--space-2);
}
.input-group > * { flex: 1; }
.input-group > select { flex: 0 0 auto; }


/* ---------- .form-select (Bootstrap, used by settings) */
.form-select {
  background: var(--paper-1);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-0);
  width: 100%;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239C988E' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
}
.form-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}


/* ---------- .form-check-input / .form-check-label (Bootstrap)
   Already in premium.css — kept here for completeness reference */


/* =========================================================
   END LEGACY BRIDGE
   When all consumers above are migrated, delete this file
   and remove its <link> from base.html.
   ========================================================= */