/*
 Theme Name:   Swallow Child（ioswallow 子主题）
 Theme URI:    https://www.iotheme.cn
 Description:  ioswallow 主题的官方子主题，承载 QQ 互联登录等自定义功能，不改动父主题任何文件。
 Author:       子主题维护者
 Author URI:   https://www.iowen.cn/
 Template:     ioswallow
 Version:      1.0.0
 Requires at least: 5.5
 Tested up to: 6.5
 Requires PHP: 7.0
 Text Domain:  iosw_child
*/

/* ===================== QQ 互联登录入口（子主题） ===================== */
/* 桌面端（≥992px）把登录入口推到菜单右侧、与菜单同一水平；
   限定媒体查询，避免覆盖移动端 .main-navigation{display:none} */
@media (min-width:992px){
    .main-navigation{display:flex;align-items:center}
    .header-tradition .main-navigation{display:inline-flex}
    /* 行式布局（如 tradition）下让导航菜单占满剩余宽度，
       .qq-login-entry 的 margin-left:auto 才能始终贴到最右边（普通态与吸顶态一致） */
    .header-layout:not(.flex-column) .main-navigation{flex:1}
    .qq-login-entry{margin-left:auto;display:inline-flex;align-items:center}
}

.qq-login-entry{font-size:14px;line-height:1.2}

/* 未登录：QQ 登录按钮（未悬停=浅灰 calm；悬停=红+阴影升起+轻微上浮） */
.qq-login-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 16px;
    /* 圆角加大到两端成半圆（pill） */
    border-radius:999px !important;
    /* 未悬停：浅灰底 + 白字 + 无阴影（calm 状态） */
    background:rgba(140,140,140,.5) !important;
    color:#fff !important;
    text-decoration:none;white-space:nowrap;font-weight:500;
    box-shadow:0 2px 10px 0 transparent !important;
    transition:background-color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.qq-login-btn:hover,
.qq-login-btn:focus{
    /* 悬停：红色 + 阴影淡入 + 轻微上浮（动效） */
    background:var(--theme-color,#f1404b) !important;
    color:#fff !important;
    box-shadow:0 12px 20px -8px var(--shadow-color,rgba(241,64,75,.5)) !important;
    transform:translateY(-2px);
    text-decoration:none;
}
.qq-login-btn .iconfont{font-size:16px;line-height:1}

/* 已登录：头像 + 昵称 + 下拉菜单 */
.qq-user-panel{position:relative}

/* 头像/昵称区阴影默认值（后台“头像阴影”设置可覆盖，见 wp_head 注入的 :root 变量） */
:root{
    --iosw-user-avatar-shadow:0 4px 10px -3px rgba(0,0,0,.28);
    --iosw-user-name-shadow:0 1px 2px rgba(0,0,0,.28);
}

.qq-user-trigger{
    display:inline-flex;align-items:center;height:36px;
    padding:0 8px 0 2px;color:var(--body-color,#555);
    border-radius:900px;text-decoration:none;
    /* 已登录头像/昵称区：取消背景，仅以阴影制造“悬浮”的立体感（非位移动效） */
    background:transparent;
    box-shadow:none;
    transition:color .25s;
}
.qq-user-trigger:hover,
.qq-user-trigger:focus{color:var(--theme-color,#f1404b);text-decoration:none;outline:0}

.qq-user-avatar{
    flex:0 0 32px;display:block;width:32px;height:32px;
    overflow:hidden;border-radius:50%;
    background:var(--transparent-bg-color,rgba(130,130,130,.1));
    /* 柔和投影，使头像看起来悬浮于页面之上（非位移动效）；值由后台“头像阴影”调节 */
    box-shadow:var(--iosw-user-avatar-shadow);
}
.qq-user-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

.qq-user-name{
    max-width:96px;margin:0 1px 0 8px;overflow:hidden;
    font-size:13px;white-space:nowrap;text-overflow:ellipsis;
    /* 轻微文字阴影，呈现浮起感；值由后台“头像阴影”调节 */
    text-shadow:var(--iosw-user-name-shadow);
}

.qq-user-arrow{font-size:12px;line-height:1;transform:scale(.7);transition:transform .25s}
.qq-user-panel:hover .qq-user-arrow,
.qq-user-panel:focus-within .qq-user-arrow{transform:scale(.7) rotate(180deg)}

.qq-user-dropdown{
    position:absolute;top:calc(100% + 12px);right:0;z-index:1060;
    width:210px;padding:8px;
    background:var(--main-bg-color,#fff);
    border-radius:var(--theme-border-radius,12px);
    box-shadow:0 10px 30px 0 rgba(0,0,0,.16);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s,visibility .22s,transform .22s;
}
/* 鼠标从触发区移到下拉菜单的间隙时不误关 */
.qq-user-dropdown::before{
    content:"";position:absolute;top:-12px;left:0;right:0;height:12px;
}
.qq-user-panel:hover .qq-user-dropdown,
.qq-user-panel:focus-within .qq-user-dropdown{
    opacity:1;visibility:visible;transform:translateY(0);
}

.qq-user-dropdown__head{
    display:flex;align-items:center;padding:6px 6px 10px;margin-bottom:4px;
    border-bottom:1px solid var(--transparent-bg-color,rgba(130,130,130,.1));
}
.qq-user-dropdown__avatar{flex:0 0 44px;width:44px;height:44px;object-fit:cover;border-radius:50%}
.qq-user-dropdown__info{min-width:0;margin-left:10px}
.qq-user-dropdown__name{overflow:hidden;color:var(--body-color,#555);font-size:14px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.qq-user-dropdown__desc{margin-top:3px;color:var(--theme-muted-color,#999);font-size:12px}

.qq-user-dropdown__menu{margin:0;padding:0;list-style:none}
.qq-user-dropdown__menu li{display:block}
.qq-user-dropdown__menu a{
    display:flex;align-items:center;padding:8px 10px;
    color:var(--body-color,#555);font-size:13px;
    border-radius:var(--theme-border-radius-sm,8px);
    transition:color .2s,background-color .2s;
}
.qq-user-dropdown__menu a:hover{color:var(--theme-color,#f1404b);background:var(--transparent-bg-color,rgba(130,130,130,.1));text-decoration:none}
.qq-user-dropdown__menu .iconfont{width:20px;margin-right:6px;font-size:15px;line-height:1;text-align:center;opacity:.85}

/* 评论需 QQ 登录提示 */
.qq-comment-tip{padding:12px;background:var(--transparent-bg-color,rgba(130,130,130,.1));border-radius:var(--theme-border-radius,8px)}
.qq-comment-tip a{color:var(--theme-color,#f1404b);font-weight:500}

/* ===================== 文章卡片 / 幻灯 / 分类卡片 阴影（后台可调） ===================== */
/* 通过 CSS 变量统一接管父主题卡片阴影，变量值由子主题后台“卡片阴影”设置注入（见 :root 覆盖块）。
   子主题以 !important 覆盖父级，确保文章卡片、幻灯/头图、以及所有分类文章卡片的阴影大小/透明度可被后台统一调节。
   --iosw-card-shadow-scale     ：阴影大小（缩放倍数，默认 1 = 主题原始），对应后台“阴影大小（倍数）”
   --iosw-card-shadow-opacity  ：阴影透明度（0~1），对应后台“阴影透明度” */
:root{
    --iosw-card-shadow-scale:1;
    --iosw-card-shadow-opacity:0.6;
}
/* 幻灯 / 头图卡片：video-card、首页 swiper-home、文章头图 single-thumbnail */
.video-card,
.page .swiper-home,
.single-thumbnail{
    box-shadow:0 calc(22px * var(--iosw-card-shadow-scale)) calc(50px * var(--iosw-card-shadow-scale)) calc(-24px * var(--iosw-card-shadow-scale)) rgba(0,0,0, var(--iosw-card-shadow-opacity)) !important;
}
/* 文章列表 / 相关文章卡片 / 分类 card 型（archive_list_type=card） */
.related-posts .custom-card .card,
.slice.cms_top .card,
.blog-post-thumbnail-zone img{
    box-shadow:0 calc(19px * var(--iosw-card-shadow-scale)) calc(35px * var(--iosw-card-shadow-scale)) calc(-22px * var(--iosw-card-shadow-scale)) rgba(0,0,0, var(--iosw-card-shadow-opacity)) !important;
}
.related-posts .custom-card .card:hover,
.slice.cms_top .card:hover{
    box-shadow:0 calc(8px * var(--iosw-card-shadow-scale)) calc(11px * var(--iosw-card-shadow-scale)) calc(-6px * var(--iosw-card-shadow-scale)) rgba(0,0,0, var(--iosw-card-shadow-opacity)) !important;
}
/* 分类 card 型 hover：原主题淡出为透明，保留该行为（位移/变暗由父规则提供） */
.blog-post-thumbnail-zone img:hover{
    box-shadow:0 calc(8px * var(--iosw-card-shadow-scale)) calc(11px * var(--iosw-card-shadow-scale)) calc(-6px * var(--iosw-card-shadow-scale)) rgba(0,0,0,0) !important;
}
/* 分类 横向卡片（archive_list_type=h，.post-card-thumbnail.shadow-on-hover） */
.shadow-on-hover{
    box-shadow:0 calc(15px * var(--iosw-card-shadow-scale)) calc(20px * var(--iosw-card-shadow-scale)) calc(-10px * var(--iosw-card-shadow-scale)) rgba(0,0,0, var(--iosw-card-shadow-opacity)) !important;
}
/* 横向卡片 hover：原主题淡出为透明，保留该行为（位移由父规则 .shadow-on-hover:hover 提供） */
.shadow-on-hover:hover{
    box-shadow:0 calc(5px * var(--iosw-card-shadow-scale)) calc(20px * var(--iosw-card-shadow-scale)) 0px transparent !important;
}

/* ===================== 评论 / 正文表情图标与文字垂直居中 ===================== */
/* 父主题 css/style.css 对 .wp-smiley 强加了 height:24px !important（即表情原本大小），
   但未设 vertical-align，默认按 baseline 对齐导致表情偏下；此处保持原高度（不缩小），
   先 vertical-align:middle 与文字中线对齐，再用 top 微调向上一点点（-2px，可按需调整）。 */
.wp-smiley,
.comments-main .wp-smiley,
.entry-content .wp-smiley{
    height:24px !important;
    max-height:24px !important;
    width:auto !important;
    vertical-align:middle !important;
    position:relative !important;
    top:-2px !important;
}

/* ===================== 修复 Bootstrap 模态框（插入图片 / 插入代码等）打开时页面横向位移 ===================== */
/* 成因：父主题 css/style.css 给 body 设了 overflow-x:hidden（按规范会强制 overflow-y 计算为 auto），
   使 <body> 自身成为纵向滚动容器；同时父主题给 body 加了 scrollbar-gutter:stable，始终预留滚动条槽位。
   Bootstrap 模态框打开时给 body.modal-open 额外写入 padding-right（用于补偿“消失”的滚动条），
   但滚动条槽位已被 scrollbar-gutter 预留，这 ~15px padding 属于重复补偿，导致页面右移；
   且 body 上的 transition:all .5s 让该位移被动画化、更明显。关闭弹窗后 padding 复位、页面回到原位。
   由于槽位已预留，直接强制清零该 padding-right 即可消除位移（overflow:hidden 仍生效，弹窗背后不滚动）。
   本次只加回这一条修复，不碰背景 / 槽位 / 滚动条，避免牵一发动全身。 */
body.modal-open{
    /* 清零 Bootstrap 多余的 padding-right，避免弹窗打开时页面横向位移（保留 scrollbar-gutter 预留的 15px 槽位） */
    padding-right:0 !important;
}