/* ---- A/508 F73 fix: links must have a non-color cue ---- */
a, a.inline, .big-footer a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* Hover/focus visible cue */
a:hover,
a:focus-visible {
  text-decoration: underline !important;
  outline: 2px solid transparent;
}

/* Button-style anchors should stay clean */
a.btn, a.ghost, .btn a, .ghost a {
  text-decoration: none !important;
}

/* ============================================================
   GLASS / BACKDROP-FILTER FIX PACK  —  Universal Site Patch
   Applies to: 3d-text, color-picker, image, unit-converter, etc.
   ============================================================ */

/* ✅ Standard glass blur strength */
.card,
.panel,
.about,
.side-card,
.badge {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ✅ Correct syntax replacements for individual pages
   (only needed if you still have old inline styles)
   .panel  { -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px);  }
   .card   { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
   .about  { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
   .badge  { -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  }
*/

/* ✅ Fallback: when blur not supported (iPhone/iPad ≤17, old browsers) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card,
  .panel,
  .about,
  .side-card,
  .badge {
    background: rgba(12,18,32,0.92) !important;   /* darker opaque base */
    border-color: rgba(255,255,255,.14) !important;
  }
}

/* ✅ Optional JS-based fallback hook */
.no-backdrop .card,
.no-backdrop .panel,
.no-backdrop .about,
.no-backdrop .side-card,
.no-backdrop .badge {
  background: rgba(12,18,32,0.92) !important;
}

/* ✅ Color & contrast tuning for AAA readability */
:root {
  --text:  #EAF2FF;  /* bright main text on dark panels */
  --muted: #E2E8F0;  /* helper/secondary text (≥7:1 contrast) */
}

/* Ensure small text and footer always readable */
.small,
small,
footer,
.muted {
  color: var(--muted);
  opacity: 1 !important;
}

/* ✅ Decorative gradient underline for headings (AAA-safe) */
.hc-title {
  color: var(--text);
  font-weight: 800;
}
.hc-title::after {
  content: "";
  display: block;
  margin: 6px 0 0;
  width: 80px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff2d95,#a16eff,#00f0ff);
}

/* ============================================================
   OPTIONAL JS DETECTOR (place before </body> in HTML)
   ============================================================
<script>
(function(){
  var ok = CSS && (CSS.supports('backdrop-filter','blur(1px)') ||
                   CSS.supports('-webkit-backdrop-filter','blur(1px)'));
  if(!ok){ document.documentElement.classList.add('no-backdrop'); }
})();
</script>
*/