/* 必扬律所 - 水系杂志风全局样式 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Playfair+Display:wght@600&display=swap');

:root {
    --water-primary: #4A90E2;
    /* 主水蓝：导航、标题、按钮 */
    --water-light: #E8F4FC;
    /* 浅天蓝：柔和板块 */
    --water-deep: #2D6CB9;
    /* 深海蓝：严谨板块 */
    --water-cream: #F5F9FC;
    /* 水漾米白：全局背景 */
    --text-dark: #2C3E50;
    /* 深海灰：正文 */
    --text-soft: #4D5D73;
    --border-line: #D0E1F9;
    /* 精致分割线 */
    --card-shadow: 0 14px 38px rgba(74, 144, 226, 0.08);
}

@layer base {
    body {
        background-color: var(--water-cream);
        /* 极浅水波纹点阵肌理 */
        background-image:
            radial-gradient(circle at 24px 24px, rgba(74, 144, 226, 0.12) 0.7px, transparent 0),
            radial-gradient(circle at 90px 70px, rgba(45, 108, 185, 0.1) 0.7px, transparent 0),
            linear-gradient(115deg, rgba(232, 244, 252, 0.45), rgba(232, 244, 252, 0.15));
        background-size: 180px 180px, 220px 220px, 100% 100%;
        background-attachment: fixed;
        color: var(--text-dark);
        font-family: 'Manrope', 'Inter', 'system-ui', sans-serif;
        line-height: 1.65;
    }

    h1,
    h2,
    h3 {
        font-family: 'Playfair Display', 'Manrope', serif;
        color: var(--water-primary) !important;
    }

    p {
        color: var(--text-soft);
    }

    a {
        transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    }
}

/* 统一导航样式（含旧类名覆盖） */
.nav-shell,
header.sticky {
    background-color: var(--water-primary) !important;
    color: #fff;
    border-bottom: 1px solid rgba(45, 108, 185, 0.3);
    box-shadow: 0 10px 28px rgba(45, 108, 185, 0.16);
    pointer-events: auto !important;
    /* 确保 Header 整体可交互 */
    position: sticky;
    top: 0;
    z-index: 9999 !important;
    /*极其高的层级，确保在最上层*/
}

/* 确保所有 Header 内的链接都可点击 */
header.sticky a,
header.sticky button {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 导航链接默认颜色 - 但不应用于按钮 */
/* 导航一级链接颜色 */
header.sticky nav a.nav-top-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

header.sticky nav a.nav-top-link:hover {
    color: #fff !important;
}

header.sticky #mobile-menu {
    background-color: var(--water-primary) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

header.sticky button {
    color: #fff !important;
}

header.sticky a[class*="bg-"] {
    background: #fff !important;
    color: var(--water-primary) !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none !important;
}

/* 导航激活状态 - 使用更高优先级覆盖 .nav-top-link 的白色 */
header.sticky nav a.nav-top-link.nav-active,
.nav-top-link.nav-active,
.nav-active {
    background-color: #ffffff !important;
    color: #3b82f6 !important;
    /* logo-blue brand color */
    border-radius: 9999px;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600;
}

/* 导航下拉菜单 */
.nav-top-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 只有包含下拉菜单的链接才显示箭头 */
.nav-top-link.has-dropdown::after {
    content: "▾";
    font-size: 0.7rem;
    opacity: 0.7;
}

/* 下拉菜单容器 - 默认隐藏 */
.nav-dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding-top: 0.5rem;
    /* 用 padding 代替 margin，避免鼠标移动时断开 hover */
    min-width: 12.5rem;
    z-index: 9999 !important;
}

/* 下拉菜单内容区 */
.nav-dropdown:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
    /* 桥接区域，防止鼠标移动时下拉菜单消失 */
}

/* 下拉菜单内部卡片 */
.nav-dropdown-content {
    background: #ffffff !important;
    border-radius: 0.9rem;
    border: 1px solid rgba(208, 225, 249, 0.8);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    backdrop-filter: blur(10px);
}

/* Hover 显示下拉菜单 - 只对有子菜单的父级生效 */
.nav-item:hover>.nav-dropdown {
    display: block !important;
}

/* 导航项容器确保相对定位 */
.nav-item {
    position: relative;
    z-index: 20;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 下拉菜单链接 - 确保始终可见和可点击 */
.nav-dropdown a,
.nav-dropdown-content a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    color: #000000 !important;
    /* 纯黑色，确保始终可见 */
    font-weight: 600;
    /* 加粗字体 */
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
    pointer-events: auto;
    /* 确保可点击 */
    background: transparent;
}

.nav-dropdown a:hover,
.nav-dropdown-content a:hover {
    background: rgba(74, 144, 226, 0.15);
    color: var(--water-primary) !important;
    transform: translateX(2px);
}

.nav-dropdown small {
    font-weight: 500;
    color: rgba(77, 93, 115, 0.7);
}

/* 导航按钮样式 - 确保文字可见 */
.nav-cta,
.nav-btn {
    background: #fff !important;
    color: var(--water-primary) !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    cursor: pointer;
}

.nav-cta:hover,
.nav-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--water-primary) !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

/* 移动端折叠菜单 */
.nav-accordion {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.9rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.08);
}

.nav-accordion summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-accordion summary::-webkit-details-marker {
    display: none;
}

.nav-accordion summary::after {
    content: "+";
    font-size: 1rem;
    opacity: 0.8;
}

.nav-accordion[open] summary::after {
    content: "–";
}

.nav-accordion-panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding-left: 0.2rem;
    font-size: 0.95rem;
}

.nav-accordion-panel a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.nav-accordion-panel a:hover {
    color: #fff !important;
}

/* 杂志式容器与留白 */
.section-shell {
    position: relative;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--border-line);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    box-shadow: none;
    overflow: hidden;
}

.section-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 18% 28%, rgba(74, 144, 226, 0.12), transparent 42%), radial-gradient(circle at 82% 68%, rgba(45, 108, 185, 0.1), transparent 45%);
    opacity: 0.35;
    pointer-events: none;
}

.section-shell>* {
    position: relative;
    z-index: 1;
}

/* 深海蓝版块（问答区） */
.section-shell.deep-panel {
    background: var(--water-deep);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--card-shadow);
}

.section-shell.deep-panel .panel-heading h2,
.section-shell.deep-panel .panel-heading h3,
.section-shell.deep-panel .panel-heading h4,
.section-shell.deep-panel .panel-heading p,
.section-shell.deep-panel .panel-heading a {
    color: #fff !important;
}

.section-shell.deep-panel .panel-heading p {
    opacity: 0.9;
}

/* Hero：水波纹封面 */
.hero-ripple {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(135deg, #F0F7FF, #EBF3FB);
    box-shadow: 0 25px 60px rgba(45, 108, 185, 0.1);
}

.hero-ripple::before,
.hero-ripple::after {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.32), transparent 38%),
        radial-gradient(circle at 70% 45%, rgba(232, 244, 252, 0.26), transparent 30%),
        radial-gradient(circle at 60% 75%, rgba(45, 108, 185, 0.22), transparent 32%);
    animation: ripple-flow 18s linear infinite;
    opacity: 0.75;
    pointer-events: none;
    /* 关键：防止装饰元素拦截点击 */
    z-index: 0;
}

.hero-ripple>* {
    position: relative;
    z-index: 10;
}

.hero-ripple::after {
    animation-duration: 24s;
    animation-direction: reverse;
    mix-blend-mode: screen;
    opacity: 0.55;
}

@keyframes ripple-flow {
    0% {
        transform: translate3d(-4%, -2%, 0) scale(1);
    }

    50% {
        transform: translate3d(4%, 3%, 0) scale(1.06);
    }

    100% {
        transform: translate3d(-4%, -2%, 0) scale(1);
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--card-shadow);
}

/* 水系栏目分区与卡片 */
.morandi-band {
    background: var(--water-light);
    border-radius: 28px;
    border: 1px solid var(--border-line);
    box-shadow: none;
    padding: clamp(1.75rem, 3vw, 2.75rem);
}

.morandi-card {
    position: relative;
    border-radius: 16px;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--border-line);
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.morandi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 22px rgba(74, 144, 226, 0.12);
    border-color: rgba(74, 144, 226, 0.35);
}

.morandi-card .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(74, 144, 226, 0.14);
    color: var(--water-primary);
}

.morandi-card .meta {
    color: var(--text-soft);
    font-size: 0.85rem;
}

.morandi-card.blue {
    background: #F7FBFF;
}

.morandi-card.green,
.morandi-card.pink,
.morandi-card.purple {
    background: #fff;
}

/* Water Style Variations */
.card-water-light {
    background-color: var(--water-light);
}

.card-water-light i {
    color: var(--water-primary);
}

.card-water-deep {
    background-color: var(--water-deep);
    color: white;
}

.card-water-deep i {
    color: var(--water-light);
}

.card-water-deep .text-dark-gray {
    color: white !important;
}

.card-water-deep p {
    color: rgba(255, 255, 255, 0.9);
}

.card-water-deep a {
    color: var(--water-light);
}

.card-water-border {
    border: 2px solid var(--border-line);
    background: white;
}

.card-water-border i {
    color: var(--water-deep);
}

/* 轻量装饰分割线 */
.装饰分割线 {
    display: none;
}

/* 背景图案工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .bg-pattern {
        background-color: var(--water-cream);
        background-image:
            radial-gradient(var(--water-primary) 0.6px, transparent 0.6px),
            linear-gradient(115deg, rgba(232, 244, 252, 0.45), rgba(232, 244, 252, 0.15));
        background-size: 30px 30px, 100% 100%;
        background-attachment: fixed;
    }

    .water-pattern {
        background-image: radial-gradient(circle at 15% 20%, rgba(74, 144, 226, 0.25), transparent 28%), radial-gradient(circle at 80% 60%, rgba(232, 244, 252, 0.6), transparent 30%);
        background-size: cover;
    }

    /* 隐藏滚动条 */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* 问答卡片样式（热门回复页面） */
    .问答卡片 {
        border: 1px solid rgba(74, 144, 226, 0.4);
        transition: all 0.3s ease;
    }

    .问答卡片:hover {
        border-color: var(--water-primary);
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
    }

    /* 文书卡片样式（起诉状模板页面） */
    .文书卡片 {
        border: 1px solid rgba(74, 144, 226, 0.2);
        transition: all 0.3s ease;
    }

    .文书卡片:hover {
        border-color: var(--water-primary);
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);
    }

    /* 合同条款标题样式（劳动合同页面） */
    .合同条款标题 {
        color: var(--text-dark);
        font-weight: 600;
        border-left: 3px solid var(--water-primary);
        padding-left: 0.8rem;
        margin: 1.5rem 0 0.8rem;
    }

    /* 变量标记样式（劳动合同页面） */
    .变量标记 {
        background-color: rgba(74, 144, 226, 0.12);
        color: var(--water-primary);
        padding: 0 0.3rem;
        border-radius: 3px;
        font-weight: 500;
    }
}