/* =========================================================
   Encyclopedia Hub SVG Icon Normalization

   Purpose:
   - Give every theme card icon the same visual box.
   - Force repository SVG assets to use the same theme color.
   - Reduce differences caused by mixed external SVG sources.

   Note:
   CSS can normalize the outer box and color, but if an SVG has large
   internal whitespace or a very unusual viewBox, edit that SVG file too.
   Best source format: viewBox="0 0 24 24" with artwork roughly inside
   x/y 3–21.
   ========================================================= */

.type-icon-circle {
    --hub-icon-size: 42px;

    width: 64px;
    height: 64px;
    color: var(--wood-dark);
    line-height: 1;
}

.type-icon-circle svg {
    width: var(--hub-icon-size) !important;
    height: var(--hub-icon-size) !important;
    max-width: var(--hub-icon-size) !important;
    max-height: var(--hub-icon-size) !important;
    display: block;
    color: currentColor;
    fill: currentColor !important;
    stroke: currentColor;
    overflow: visible;
    flex: 0 0 var(--hub-icon-size);
    transition: transform 0.2s ease, color 0.2s ease;
}

.type-icon-circle--festivals-events,
.type-icon-circle--religion-belief,
.type-icon-circle--music-performing-arts {
    --hub-icon-size: 46px;
}

.type-icon-circle--geography {
    --hub-icon-size: 48px;
}

.type-icon-circle--nomadic-culture {
    --hub-icon-size: 52px;
}

.type-icon-circle--natural-history {
    --hub-icon-size: 58px;
}

.type-icon-circle svg * {
    color: inherit !important;
}

.type-icon-circle svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

.type-icon-circle svg :where(path, rect, circle, ellipse, polygon, polyline):not([fill="none"]) {
    fill: currentColor !important;
}

.type-icon-circle svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

/* Preserve intentionally unfilled outlines when SVGs use fill="none". */
.type-icon-circle svg [fill="none"] {
    fill: none !important;
}

.type-card:hover .type-icon-circle {
    color: var(--accent-river);
}

.type-card:hover .type-icon-circle svg {
    transform: scale(1.06);
}