/* ==========================================================================
   si163 导航站 · 站点卡片国旗角标  v4
   ---------------------------------------------------------------------------
   演进：
     v1 全部卡片铺半透明模糊国旗 → 1429 条里 821 条是 cn（57%），首页 275 张卡
        150 张变粉色，整页糊成噪音，国内/海外反而更难分。
     v2 只给海外站铺底色 → 底色仍被判为干扰。
     v3 去掉背景，角标挂在图标右下角。
     v4 **角标移到卡片右上角**（用户指定）；「直达」箭头归到右下；
        cc-gl（地球）与无国旗的站点不显示角标。

   数据：postmeta `_sites_cc`，由 themes/onenav/inc/functions/io-cards.php 输出
         `flag-on` + `cc-xx`；国别来自双通道实测（本机 Chrome / 新加坡出口）。

   几何（CDP 实测，勿凭猜）：
     首页网格卡 153×62，圆角 16px
       .item-title  y12..33（x59..142）  .item-desc y33..51
       .togo 直达箭头：position:absolute / right:5 / top:5 / 16×24 / 静止 opacity 0，
                        hover 才浮现 → 与「右上角角标」抢位，v4 把它挪到右下
     归档·搜索大卡 373×131 圆角 20px，图标 60×60，标题 x79 起
       .togo 本来就在右下（y81）；.meta-ico（浏览/点赞）占 top-right（y6..24）
       → 角标插在最右侧时把 .meta-ico 左移 34px 让位
     两类靠 .posts-row 区分（首页那层是 .row，不是 .posts-row）
   ========================================================================== */

/* ---- 卡片定位上下文 ---- */
html body .posts-item.sites-item.flag-on {
    position: relative;
}

/* ==========================================================================
   一、国旗角标：卡片右上角
   ========================================================================== */
html body .posts-item.sites-item.flag-on::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 8px;
    width: 18px;
    height: 12px;
    border-radius: 2.5px;
    background-image: var(--si-flag);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(15, 23, 42, .18);
    pointer-events: none;
    z-index: 2;
    transition: opacity .18s ease;
}

html.io-black-mode body .posts-item.sites-item.flag-on::after {
    box-shadow: 0 0 0 1.5px #2d2e2f, 0 1px 3px rgba(0, 0, 0, .5);
}

/* 地球（综合/海外未定）与没有国旗的站点：不显示角标 */
html body .posts-item.sites-item.flag-on.cc-gl::after {
    content: none;
}

/* ==========================================================================
   二、悬停：首页卡的「直达」箭头原本就浮现在右上角，与角标同一位置
       → 悬停时让角标淡出，把角标位让给箭头（文字一点都不用让位）
       → 归档大卡的箭头在右下，不冲突，角标保持可见
   ========================================================================== */
html body .posts-item.sites-item.flag-on:hover::after {
    opacity: 0;
}

html body .posts-row .posts-item.sites-item.flag-on:hover::after {
    opacity: 1;
}

/* ==========================================================================
   三、归档 / 搜索页大卡：角标放大 + 浏览/点赞左移让位
   ========================================================================== */
html body .posts-row .posts-item.sites-item.flag-on::after {
    top: 8px;
    right: 10px;
    width: 26px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(15, 23, 42, .2);
}

html.io-black-mode body .posts-row .posts-item.sites-item.flag-on::after {
    box-shadow: 0 0 0 2px #2d2e2f, 0 2px 5px rgba(0, 0, 0, .5);
}

html body .posts-row .posts-item.sites-item.flag-on:not(.cc-gl) .item-title {
    padding-right: 36px;
}

/* 浏览数/点赞挪到角标左侧，避免被压住 */
html body .posts-row .posts-item.sites-item.flag-on:not(.cc-gl) .meta-ico {
    right: 44px;
}

/* ==========================================================================
   四、国旗资源映射
   ========================================================================== */
.posts-item.sites-item.cc-cn { --si-flag: url(../img/flags/cn.png); }
.posts-item.sites-item.cc-us { --si-flag: url(../img/flags/us.png); }
.posts-item.sites-item.cc-sg { --si-flag: url(../img/flags/sg.png); }
.posts-item.sites-item.cc-hk { --si-flag: url(../img/flags/hk.png); }
.posts-item.sites-item.cc-mo { --si-flag: url(../img/flags/mo.png); }
.posts-item.sites-item.cc-tw { --si-flag: url(../img/flags/cn.png); }
.posts-item.sites-item.cc-jp { --si-flag: url(../img/flags/jp.png); }
.posts-item.sites-item.cc-kr { --si-flag: url(../img/flags/kr.png); }
.posts-item.sites-item.cc-gb { --si-flag: url(../img/flags/gb.png); }
.posts-item.sites-item.cc-de { --si-flag: url(../img/flags/de.png); }
.posts-item.sites-item.cc-fr { --si-flag: url(../img/flags/fr.png); }
.posts-item.sites-item.cc-nl { --si-flag: url(../img/flags/nl.png); }
.posts-item.sites-item.cc-fi { --si-flag: url(../img/flags/fi.png); }
.posts-item.sites-item.cc-ca { --si-flag: url(../img/flags/ca.png); }
.posts-item.sites-item.cc-au { --si-flag: url(../img/flags/au.png); }
.posts-item.sites-item.cc-in { --si-flag: url(../img/flags/in.png); }
.posts-item.sites-item.cc-ru { --si-flag: url(../img/flags/ru.png); }
.posts-item.sites-item.cc-br { --si-flag: url(../img/flags/br.png); }
.posts-item.sites-item.cc-it { --si-flag: url(../img/flags/it.png); }
.posts-item.sites-item.cc-es { --si-flag: url(../img/flags/es.png); }
.posts-item.sites-item.cc-ch { --si-flag: url(../img/flags/ch.png); }
.posts-item.sites-item.cc-se { --si-flag: url(../img/flags/se.png); }
.posts-item.sites-item.cc-dk { --si-flag: url(../img/flags/dk.png); }
.posts-item.sites-item.cc-ie { --si-flag: url(../img/flags/ie.png); }
.posts-item.sites-item.cc-il { --si-flag: url(../img/flags/il.png); }
.posts-item.sites-item.cc-ae { --si-flag: url(../img/flags/ae.png); }
.posts-item.sites-item.cc-my { --si-flag: url(../img/flags/my.png); }
.posts-item.sites-item.cc-id { --si-flag: url(../img/flags/id.png); }
.posts-item.sites-item.cc-vn { --si-flag: url(../img/flags/vn.png); }
.posts-item.sites-item.cc-ph { --si-flag: url(../img/flags/ph.png); }
.posts-item.sites-item.cc-nz { --si-flag: url(../img/flags/nz.png); }
.posts-item.sites-item.cc-pl { --si-flag: url(../img/flags/pl.png); }
.posts-item.sites-item.cc-tr { --si-flag: url(../img/flags/tr.png); }
.posts-item.sites-item.cc-ua { --si-flag: url(../img/flags/ua.png); }
.posts-item.sites-item.cc-za { --si-flag: url(../img/flags/za.png); }
.posts-item.sites-item.cc-mx { --si-flag: url(../img/flags/mx.png); }
.posts-item.sites-item.cc-ar { --si-flag: url(../img/flags/ar.png); }
.posts-item.sites-item.cc-cl { --si-flag: url(../img/flags/cl.png); }
.posts-item.sites-item.cc-th { --si-flag: url(../img/flags/th.png); }
.posts-item.sites-item.cc-gl { --si-flag: url(../img/flags/gl.png); }

/* ==========================================================================
   五、小屏
   ========================================================================== */
@media (max-width: 575.98px) {
    html body .posts-item.sites-item.flag-on::after {
        top: 3px;
        right: 7px;
        width: 17px;
        height: 11px;
    }
}