/* ============================================================================
   dswd-bridge.css  ·  AyudaGO "Civic Calm" legacy bridge
   ----------------------------------------------------------------------------
   Re-skins the project's EXISTING Bootstrap / legacy markup (.btn, .card,
   .form-control, .table, .modal …) to the new Civic Calm look, using the tokens
   from dswd-design-system.css.

   LOAD ORDER (set in includes/dswd_head.php and includes/dswd_favicon.php):
       dswd-theme.css  →  dswd-design-system.css  →  dswd-bridge.css
   This file is loaded LAST so the calmer styling wins on pages that still use
   Bootstrap classes. It only touches visual properties (fill, radius, border,
   shadow, focus) — never layout — and is fully reversible: remove the <link>
   to revert. !important is used only where dswd-theme.css forces a value.
   ============================================================================ */

/* ---- Buttons: flat fills, 6px radius, subtle elevation (no gradients) ---- */
.btn { border-radius: var(--radius-control) !important; font-weight: var(--fw-semibold); }
.btn-primary, .btn-hero-primary {
  background: var(--c-primary) !important; border: 1.5px solid var(--c-primary) !important;
  color: #fff !important; box-shadow: none !important; }
.btn-primary:hover, .btn-hero-primary:hover {
  background: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important;
  color: #fff !important; transform: none !important; filter: none !important; box-shadow: var(--shadow-sm) !important; }
.btn-danger {
  background: var(--c-danger-solid) !important; border: 1.5px solid var(--c-danger-solid) !important;
  color: #fff !important; box-shadow: none !important; }
.btn-danger:hover {
  background: var(--c-danger-hover) !important; border-color: var(--c-danger-hover) !important;
  transform: none !important; filter: none !important; }
.btn-success {
  background: var(--c-success-solid) !important; border: 1.5px solid var(--c-success-solid) !important;
  color: #fff !important; box-shadow: none !important; }
.btn-success:hover { filter: brightness(.95) !important; transform: none !important; }
.btn-info {
  background: var(--c-info-solid) !important; border: 1.5px solid var(--c-info-solid) !important;
  color: #fff !important; }
.btn-warning {
  background: var(--c-warning-solid) !important; border: 1.5px solid var(--c-warning-solid) !important;
  color: #101828 !important; }
.btn-outline-primary {
  background: #fff !important; color: var(--c-primary-text) !important;
  border: 1.5px solid var(--c-control-border) !important; }
.btn-outline-primary:hover {
  background: var(--c-primary-tint) !important; border-color: var(--c-primary) !important;
  color: var(--c-primary-text) !important; transform: none !important; }
.btn:disabled, .btn.disabled {
  background: var(--c-bg-2) !important; color: var(--c-disabled-text) !important;
  border-color: var(--c-border) !important; box-shadow: none !important; }

/* ---- Cards & stat tiles: calmer radius/shadow, gentle 2px lift ---- */
.card, .panel, .stat-card, .glass-card, .dswd-card, .dswd-stat {
  border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; }
.card:hover, .panel:hover, .hover-card:hover, .stat-card:hover,
.dswd-card:hover, .dswd-stat:hover {
  box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; }

/* ---- Form controls: 6px radius, accessible border + focus ring ---- */
.form-control, .form-select {
  border-radius: var(--radius-control) !important;
  border: 1.5px solid var(--c-control-border) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary) !important; box-shadow: var(--focus-ring) !important; }
.form-control::placeholder { color: var(--c-placeholder) !important; }

/* ---- Tables: quieter header, readable zebra/hover ---- */
.table thead th {
  background: var(--c-surface-2) !important; color: var(--c-text-2) !important;
  text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-caption);
  border-bottom: 2px solid var(--c-border-strong) !important; }
.table-hover tbody tr:hover { background: var(--c-primary-tint) !important; }

/* ---- Modal & dropdown: calmer corners + elevation ---- */
.modal-content { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; }
.dropdown-menu { border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; }

/* ---- Public nav buttons: align with the flag-blue brand ---- */
.btn-staff { background: var(--c-primary) !important; }
.btn-staff:hover { background: var(--c-primary-hover) !important; box-shadow: var(--shadow-sm) !important; transform: none !important; }
.btn-citizen { background: var(--c-success-solid) !important; }
.btn-citizen:hover { background: var(--c-success-text) !important; box-shadow: var(--shadow-sm) !important; transform: none !important; }

/* ---- Skip link target gets no visible outline jump when focused programmatically ---- */
[id="main"]:focus, [id="maincontent"]:focus { outline: none; }

/* ============================================================================
   LINK TREATMENT — remove persistent underlines on linked words (esp. links to
   .php pages: nav, menus, buttons, brand, cards, footer). Links stay
   distinguished by colour + context; keyboard focus outline is untouched.
   Loaded last in the chain, so this wins over the design-system default.
   ============================================================================ */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
.ds-btn, .btn, .nav-item, .navlink, .brand, .brand-logo,
.site-footer a, .ds-footer a, .ds-nav a, .ds-header a, a.ds-card, .ds-card a
{ text-decoration: none !important; }
/* Keyboard users still get the focus ring from the design system (:focus-visible). */

/* ---- Exception: links inline in body copy DO get an underline back -------
   Nav items/buttons/cards are identifiable as controls by their position,
   background and icon, so colour-only is acceptable there. A bare link
   inside a sentence has no such affordance, so colour alone would fail
   WCAG 1.4.1 (use of color) for anyone who can't distinguish the hue from
   surrounding text. Scoped to prose-like containers only. ---------------- */
p a, li a, .ds-card__body a, .ds-alert a, .alert a, .field-hint a, .ds-help a,
.dswd-tl-item a, td a, .card-body p a {
  text-decoration: underline; text-underline-offset: 2px;
}

/* ============================================================================
   HEADING COLOUR FIX — hero / banner titles on dark backgrounds were rendering
   dark instead of white. Cause: the design-system base sets a dark colour on
   every h1–h5, which overrides the white that hero sections set on their
   container (a colour set directly on the element beats an inherited one).
   Letting headings INHERIT fixes this: dark sections (color:#fff) -> white
   titles; light pages -> dark titles (inherited from body). Headings with an
   explicit colour (.section-title, .ds-* titles, .prog-title, etc.) keep theirs.
   ============================================================================ */
h1, h2, h3, h4, h5, h6 { color: inherit; }