/* =========================================================================
   Custom touches that Tailwind utilities don't cover.
   ========================================================================= */

/* Filled Material icons */
.material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Frosted-glass panel (used by the nav bar) */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Soft card shadow + indigo button glow */
.card-shadow      { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); }
.btn-primary-shadow { box-shadow: 0 4px 14px 0 rgba(70, 72, 212, 0.39); }

/* Smooth in-page scrolling for anchor links */
html { scroll-behavior: smooth; }

/* Active state for the Work-page filter chips (toggled by assets/app.js) */
.filter-chip { cursor: pointer; }
.filter-chip.is-active {
  background: rgba(70, 72, 212, 0.12);
  color: #4648d4;
  border-color: rgba(70, 72, 212, 0.25);
}

/* Make replaceable placeholder images obvious on hover */
img[data-placeholder] { outline: 1px dashed rgba(70,72,212,0.25); outline-offset: -1px; }

/* Featured cards — blue body for contrast against the light page */
.card-blue { background: #4648d4 !important; border-color: rgba(255,255,255,0.12) !important; }
.card-blue h2, .card-blue h3, .card-blue .text-on-surface { color: #fff !important; }
.card-blue p, .card-blue .text-secondary { color: rgba(255,255,255,0.88) !important; }
.card-blue .text-primary { color: #fff !important; }
.card-blue .material-symbols-outlined { color: #fff !important; }
.card-blue .font-caption { background: rgba(255,255,255,0.20) !important; color: #fff !important; }
.card-blue:hover { box-shadow: 0 22px 45px -18px rgba(70,72,212,0.55) !important; }

/* offset in-page anchor jumps for the fixed nav */
:target { scroll-margin-top: 96px; }