/* ============================================================
   YOUTH ICON LIBRARY — Bloom Design System
   Custom SVG icons for the Holy Nation Youth (Bloom) section.
   No emojis — purpose-built stroke icons.
   ============================================================ */

/* ── Base icon wrapper ──────────────────────────────────────── */
.yi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Auto-render placeholder before JS kicks in */
.yi[data-icon]:empty {
    width: 1em;
    height: 1em;
}

/* ── Shared SVG base ─────────────────────────────────────────── */
.yi-icon {
    display: block;
    flex-shrink: 0;
    /* Inherit colour from parent by default */
    color: inherit;
    stroke: currentColor;
    fill: none;
    transition: color 0.18s ease, stroke 0.18s ease, opacity 0.18s ease;
    /* Prevent SVG from capturing pointer events unexpectedly */
    pointer-events: none;
}

/* ── Size modifiers ─────────────────────────────────────────── */
.yi-xs  .yi-icon, .yi-xs  { width: 14px; height: 14px; }
.yi-sm  .yi-icon, .yi-sm  { width: 18px; height: 18px; }
.yi-md  .yi-icon, .yi-md  { width: 24px; height: 24px; } /* default */
.yi-lg  .yi-icon, .yi-lg  { width: 28px; height: 28px; }
.yi-xl  .yi-icon, .yi-xl  { width: 36px; height: 36px; }
.yi-2xl .yi-icon, .yi-2xl { width: 48px; height: 48px; }

/* ── Colour variants (Bloom palette) ────────────────────────── */
.yi-coral   .yi-icon, .yi-coral   { color: var(--coral,   #FF6B5B); }
.yi-amber   .yi-icon, .yi-amber   { color: var(--amber,   #FFB347); }
.yi-mint    .yi-icon, .yi-mint    { color: var(--mint,    #6DDAB4); }
.yi-lavender .yi-icon, .yi-lavender { color: var(--lavender, #C3B1E1); }
.yi-sky     .yi-icon, .yi-sky     { color: var(--sky,     #7BC8F6); }
.yi-rose    .yi-icon, .yi-rose    { color: var(--rose,    #F7A8B8); }
.yi-sage    .yi-icon, .yi-sage    { color: var(--sage,    #A8D5A2); }
.yi-gold    .yi-icon, .yi-gold    { color: var(--gold,    #F5C842); }
.yi-dark    .yi-icon, .yi-dark    { color: var(--dark,    #1C1B2E); }
.yi-muted   .yi-icon, .yi-muted   { color: var(--muted,   #9B8E87); }
.yi-white   .yi-icon, .yi-white   { color: #fff; }

/* ── Tile icon — used in app grid ───────────────────────────── */
.tile-yi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

.tile-yi .yi-icon {
    width: 100%;
    height: 100%;
}

/* ── Navigation icon — used in drawer and tab bar ───────────── */
.nav-yi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.nav-yi .yi-icon {
    width: 100%;
    height: 100%;
}

/* ── Tab bar icon ───────────────────────────────────────────── */
.tab-yi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.tab-yi .yi-icon {
    width: 100%;
    height: 100%;
}

/* ── Header icon ────────────────────────────────────────────── */
.header-yi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--muted, #9B8E87);
}

.header-yi .yi-icon {
    width: 100%;
    height: 100%;
}

/* ── Story / card icon ──────────────────────────────────────── */
.card-yi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-card, 22px);
}

/* ── Drawer footer icon ─────────────────────────────────────── */
.drawer-footer-yi .yi-icon {
    width: 18px;
    height: 18px;
}

/* ── Stroke-width helpers ───────────────────────────────────── */
.yi-thin   .yi-icon { stroke-width: 1.25; }
.yi-normal .yi-icon { stroke-width: 1.75; } /* default */
.yi-bold   .yi-icon { stroke-width: 2.25; }

/* ── Animation helpers ──────────────────────────────────────── */
.yi-spin .yi-icon {
    animation: yi-spin 1s linear infinite;
}
@keyframes yi-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.yi-pulse .yi-icon {
    animation: yi-pulse 2s ease-in-out infinite;
}
@keyframes yi-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.yi-bounce .yi-icon {
    animation: yi-bounce 2s ease-in-out infinite;
}
@keyframes yi-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

/* ── Hover state helpers ────────────────────────────────────── */
a:hover .yi-icon,
button:hover .yi-icon {
    opacity: 0.85;
}

/* ── Active / current state in nav ─────────────────────────── */
.active .nav-yi .yi-icon,
.active .tab-yi .yi-icon {
    color: var(--coral, #FF6B5B);
    stroke: var(--coral, #FF6B5B);
}

/* ── Dark mode overrides ────────────────────────────────────── */
.dark-mode .yi-icon,
html.dark .yi-icon {
    /* Icons inherit currentColor — dark mode handled by parent colour changes */
}