/* ==========================================================
   图标系统 v2 — SVG Sprite
   ----------------------------------------------------------
   用法：
     HTML      <svg class="ic"><use href="/usr/themes/paul/assets/icons-sprite.svg#ri-home-4-line"></use></svg>
     PHP       <?php paulren_icon('home-4-line', 22); ?>
   特点：体积 18.8KB（原字体方案 322KB），支持 currentColor 继承
   ========================================================== */

.ic {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
    overflow: hidden;
    /* 让 SVG 跟随文字颜色与大小 */
    color: inherit;
}

/* 尺寸工具类 */
.ic-sm { width: 14px; height: 14px; }
.ic-md { width: 18px; height: 18px; }
.ic-lg { width: 22px; height: 22px; }
.ic-xl { width: 28px; height: 28px; }

/* 圆角描边风格（可选） */
.ic-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 与文字行高对齐 */
.ic-baseline { vertical-align: baseline; }
.ic-middle   { vertical-align: middle; }
.ic-top      { vertical-align: text-top; }

/* 微交互动效 */
.ic-spin {
    animation: ic-spin 1s linear infinite;
}
@keyframes ic-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ic-pulse {
    animation: ic-pulse 1.8s ease-in-out infinite;
}
@keyframes ic-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}

/* 悬停放大（用于社交图标） */
a:hover > .ic,
.social a:hover .ic {
    transform: scale(1.15);
    transition: transform .2s ease;
}

/* 按钮内图标与文字间距 */
.btn .ic,
.article-meta .ic,
.post-meta-date .ic {
    margin-right: .35em;
}

@media (prefers-reduced-motion: reduce) {
    .ic-spin, .ic-pulse { animation: none; }
    a:hover > .ic { transform: none; }
}

/* ==========================================================
   导航菜单图标（顶部中间按钮）
   ========================================================== */
.head-menu .nav-ic,
.head-menu svg.ic {
    width: 1.15em;
    height: 1.15em;
    margin-right: .4em;
    color: inherit;
    fill: currentColor !important;
}

/* 确保图标与文字同色（深色主题下自动为浅色） */
.head-menu .has-child > a {
    color: inherit;
}

.head-menu .has-child > a .nav-ic {
    fill: currentColor;
    stroke: none;
}

/* 单色 SVG（home）需要描边填充 */
.head-menu .has-child > a > svg path:first-child[fill="none"] {
    fill: none;
}

/* ==========================================================
   顶部社交图标（head-social）— 原缺失基础样式导致过小
   ========================================================== */
.head-social {
    display: flex;
    align-items: center;
    gap: .3em;
}

/* 无圆框：纯图标，悬停仅变色 + 轻微上浮 */
.head-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    line-height: 1;
    color: inherit;
    opacity: .85;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.head-social a:hover {
    color: var(--tech-primary, #5B8DEF);
    opacity: 1;
    transform: translateY(-2px);
}

.head-social .ic,
.head-social svg.ic {
    /* viewBox 24×24 标准坐标系，1em 即按钮尺寸 */
    width: .78em;
    height: .78em;
    fill: currentColor;
    overflow: visible;
}

/* ==========================================================
   页脚社交圆按钮内的图标 — 显式尺寸，避免被圆形容器裁切
   ========================================================== */
footer .social a .ic,
footer .social a svg.ic {
    /* 无圆框后 ~17px（原 15.1px 基础上 +2px） */
    width: .88em;
    height: .88em;
    fill: currentColor;
    stroke: none;
    display: block;
    margin: 0;
    overflow: visible;
}

footer .social a {
    overflow: visible;
    line-height: 1;
}

/* 移动端略微缩小，避免拥挤 */
@media screen and (max-width: 768px) {
    footer .social a {
        width: 2.1em;
        height: 2.1em;
    }
    footer .social a .ic,
    footer .social a svg.ic {
        width: 1em;
        height: 1em;
    }
}