/* ============================================================
   苏州市民治路幼儿园 · 站点样式（温柔典雅版）
   ------------------------------------------------------------
   本文件仅包含 JquanUI 原子体系无法可靠表达的少量规则：
   1) .fade-in 滚动淡入：由 IntersectionObserver 切换类名触发，
      该运行时版本不解析配置中的 shortcuts，故用最小规则表达过渡；
   2) .jq-tab[aria-selected]：tabs 组件合并 className 时会移除
      is-active 类，aria-selected 变体被编译为字面类名，需原生属性选择器；
   3) .card-hover：参考稿 hover 效果（-4px 位移 + 柔阴影）需精确值；
   4) .nav-drop 导航二级菜单：默认隐藏，hover / 键盘聚焦时展开
      （group-hover 变体在该运行时不可靠，改用显式类组合）；
   5) @media print：打印 / 无头整页渲染时兜底显示全部内容。
   ============================================================ */

/* ---------- 滚动淡入 ---------- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}
.fade-in.visible,
.fade-in.fade-in-show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- tabs 激活态（属性选择器，防 hover 覆盖） ---------- */
.jq-tab[aria-selected="true"] {
    background: #C4A0A0;
    color: #fff !important;
    border-color: #C4A0A0;
    font-weight: 500;
}
.jq-tab[aria-selected="false"] {
    color: #8B7B72;
}

/* ---------- 卡片 hover ---------- */
.card-hover {
    transition: all .3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(90, 74, 66, 0.12);
}

/* ---------- 导航二级下拉：默认隐藏，悬停/聚焦时向下渐入，水平居中于父级 ---------- */
.nav-drop {
    left: 50% !important;
    visibility: hidden;
    opacity: 0;
    /* !important：该环境运行时样式偶发压过本文件普通声明（见轮播按钮修复），
       定位与位移一并锁定，避免与父级链接左对齐或位移丢失 */
    transform: translate(-50%, 10px) !important;
    pointer-events: none;
    transition: visibility 0s linear .15s, opacity .18s ease, transform .18s ease;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0) !important;
    pointer-events: auto;
    transition-delay: 0s;
}

/* ---------- 栏目模块上下留白 ----------
   py-fluid-section 为全站栏目统一的内边距类：移动端 4rem、
   桌面（md 断点起）5rem，避免模块标题紧贴上一模块底部。 */
.py-fluid-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (min-width: 768px) {
    .py-fluid-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* ---------- 轮播左右切换按钮 ----------
   组件生成的按钮是 .jq-carousel-arrow 类，而组件自带 base CSS 用的是
   [jq-carousel-arrow] 属性选择器，二者不一致导致按钮无尺寸/无定位，
   这里按类补全完整样式并叠加温柔典雅化外观。 */
.jq-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    /* !important：运行时 preflight 的 button{background-color:transparent} 会压过本类
       规则（该环境层叠行为异常），强制声明背景色以确保按钮可见 */
    background: rgba(255, 255, 255, 0.88) !important;
    color: #5A4A42;
    box-shadow: 0 2px 12px rgba(90, 74, 66, 0.18);
    backdrop-filter: blur(4px);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.jq-carousel-arrow:hover {
    background: #C4A0A0 !important;
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}
.jq-carousel-arrow[disabled] {
    opacity: .35;
    cursor: not-allowed;
}
.jq-carousel-arrow-prev { left: 14px; }
.jq-carousel-arrow-next { right: 14px; }

/* ---------- 轮播图文字阴影（图片上叠加可读性） ---------- */
.banner-shadow {
    text-shadow: 0 2px 14px rgba(40, 28, 22, 0.45);
}

/* ---------- 打印兜底 ---------- */
@media print {
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .nav-drop {
        visibility: hidden !important;
        opacity: 0 !important;
    }
}