/**
 * Styled Icons - Frontend CSS
 * Riproduce lo stile delle icone arrotondate con outline colorato
 */

:root {
    --si-icon-color: #ff5722;
    --si-bg-color: #3a1e10;
    --si-size: 64px;
    --si-radius: 16px;
    --si-stroke: 2px;
}

.styled-icon-wrapper {
    display: block;
    margin: 10px 0;
    line-height: 1;
}

.styled-icon-wrapper.si-align-left {
    text-align: left;
}
.styled-icon-wrapper.si-align-center {
    text-align: center;
}
.styled-icon-wrapper.si-align-right {
    text-align: right;
}

.styled-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--si-size);
    height: var(--si-size);
    background-color: var(--si-bg-color);
    border-radius: var(--si-radius);
    color: var(--si-icon-color);
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

a.styled-icon-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.styled-icon-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55%;
    height: 55%;
    color: var(--si-icon-color);
}

.styled-icon-inner svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: var(--si-stroke);
}

/* Supporto icone Font Awesome / Linea / Iconsmind / Steadysets */
.styled-icon-inner i {
    font-size: calc(var(--si-size) * 0.5);
    line-height: 1;
    color: var(--si-icon-color);
}

/* Migliora il rendering Font Awesome */
.styled-icon-inner .fa,
.styled-icon-inner .fas,
.styled-icon-inner .far,
.styled-icon-inner .fab,
.styled-icon-inner .fal {
    font-size: calc(var(--si-size) * 0.45);
}

/* Responsive */
@media (max-width: 767px) {
    .styled-icon-box {
        width: calc(var(--si-size) * 0.85);
        height: calc(var(--si-size) * 0.85);
    }
}