/**
 * ============================================================================
 * icons.css — .icon BEM Block (SVG Mask Icon System)
 * ============================================================================
 *
 * PURPOSE:
 *   Renders Lucide SVG icons via CSS mask-image. Icons are NOT inlined —
 *   each is referenced by URL from /assets/icons/*.svg. The mask technique
 *   lets icons inherit colour from their context via background-color:
 *   currentColor, so they automatically match surrounding text colour.
 *
 * HOW IT WORKS:
 *   1. The <span class="icon"> is an empty inline-block element
 *   2. background-color: currentColor fills it with the text colour
 *   3. mask-image clips that colour to the SVG shape
 *   Result: a re-colourable icon that behaves like text
 *
 * USAGE:
 *   <span class="icon icon--percent" aria-hidden="true"></span>
 *   <span class="icon icon--lg icon--piggy-bank" aria-hidden="true"></span>
 *
 *   Always include aria-hidden="true" — these are decorative. If an icon
 *   IS the only content (e.g. a button), use a visually-hidden label instead.
 *
 * BEM STRUCTURE:
 *   .icon                — Base block (mask setup, default 1.25em size)
 *   .icon--sm            — Size variant: 1em
 *   .icon--lg            — Size variant: 1.5em
 *   .icon--xl            — Size variant: 2em (used for header logo)
 *   .icon--{name}        — Modifier per icon, sets the mask-image URL
 *
 * WHY MASK NOT INLINE:
 *   - No DOM bloat (each inline SVG adds ~5 child elements)
 *   - CSS-controlled colour (no need for fill="currentColor" hacks)
 *   - Cacheable — browser caches the SVG file, reuses across pages
 *   - Clean templates — one <span>, not a block of SVG markup
 *
 * ICONS USED (from /assets/icons/ — Lucide icon set):
 *   Brand:       percent
 *   Calculators: trending-up, piggy-bank, house, credit-card, banknote,
 *                shield-check, graduation-cap, landmark, scale, trending-down
 *   Rates:       landmark, piggy-bank, house (shared with calculators)
 *   Footer:      info, lock
 *
 * ============================================================================
 */


/* ==========================================================================
 * BASE ICON — Mask setup and default sizing
 * ==========================================================================
 * The --icon custom property is set by each modifier class. This avoids
 * repeating the full mask shorthand for every icon variant.
 * ========================================================================== */

.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;

  /* Colour: inherits from surrounding text via currentColor */
  background-color: currentColor;

  /* Mask: clips the background to the SVG shape.
     -webkit- prefix required for Safari (as of 2026). */
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  /* Vertical alignment: sit nicely alongside text baselines */
  vertical-align: -0.15em;
}


/* ==========================================================================
 * SIZE VARIANTS
 * ==========================================================================
 * Default is 1.25em (20px at 16px base). Sizes scale with font-size of
 * the parent element because they use em units.
 * ========================================================================== */

.icon--sm {
  width: 1em;
  height: 1em;
}

.icon--lg {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.2em;
}

.icon--xl {
  width: 2em;
  height: 2em;
  vertical-align: -0.35em;
}


/* ==========================================================================
 * ICON MODIFIERS — One per icon we actually use
 * ==========================================================================
 * Each modifier simply sets the --icon custom property to the SVG URL.
 * Only ~15 icons are registered here — not the full 1,671 Lucide set.
 * Add new ones as needed: copy the pattern, use the Lucide filename.
 * ========================================================================== */

/* --- Brand / Logo --- */
.icon--percent        { --icon: url('/assets/icons/percent.svg'); }

/* --- Calculator-specific icons (mapped via calculators.json "icon" field) --- */
.icon--trending-up    { --icon: url('/assets/icons/trending-up.svg'); }
.icon--piggy-bank     { --icon: url('/assets/icons/piggy-bank.svg'); }
.icon--house          { --icon: url('/assets/icons/house.svg'); }
.icon--credit-card    { --icon: url('/assets/icons/credit-card.svg'); }
.icon--banknote       { --icon: url('/assets/icons/banknote.svg'); }
.icon--shield-check   { --icon: url('/assets/icons/shield-check.svg'); }
.icon--graduation-cap { --icon: url('/assets/icons/graduation-cap.svg'); }
.icon--landmark       { --icon: url('/assets/icons/landmark.svg'); }
.icon--scale          { --icon: url('/assets/icons/scale.svg'); }
.icon--trending-down  { --icon: url('/assets/icons/trending-down.svg'); }

/* --- Footer link icons --- */
.icon--info           { --icon: url('/assets/icons/info.svg'); }
.icon--lock           { --icon: url('/assets/icons/lock.svg'); }

/* --- Theme toggle --- */
.icon--sun            { --icon: url('/assets/icons/sun.svg'); }
.icon--moon            { --icon: url('/assets/icons/moon.svg'); }
.icon--sun-moon        { --icon: url('/assets/icons/sun-moon.svg'); }

/* --- Mobile app shell (tab bar, sheets) --- */
.icon--layout-grid    { --icon: url('/assets/icons/layout-grid.svg'); }
.icon--settings       { --icon: url('/assets/icons/settings.svg'); }
.icon--x              { --icon: url('/assets/icons/x.svg'); }