/* ==========================================================================
   Huatai Theme · Layout
   页面骨架：跳转链接 / 页头占位 / 主体网格 / 侧边栏 / 面包屑页头
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主体包裹器
   -------------------------------------------------------------------------- */
.site-main {
    display: block;
    min-height: 60vh;
}

/* content + sidebar 的两栏：小屏堆叠，大屏 侧栏 + 内容
   用 grid-template-areas，避免旧版 float 造成的列宽错位 */
.main-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "content"
        "sidebar";
    gap: var(--h-section-y) var(--h-gutter);
    width: 100%;
    max-width: calc(var(--h-container-max) + (var(--h-container-pad) * 2));
    margin-inline: auto;
    padding-block: clamp(2rem, 1.25rem + 2.5vw, 4rem);
    padding-inline: var(--h-container-pad);
}

.main-wrapper > .sidebar,
.main-wrapper > aside.sidebar      { grid-area: sidebar; min-width: 0; }
.main-wrapper > .content-area,
.main-wrapper > article.content-area { grid-area: content; min-width: 0; }

@media (min-width: 62em) {
    .main-wrapper {
        grid-template-columns: minmax(0, 1fr) var(--h-sidebar-w);
        grid-template-areas: "content sidebar";
        align-items: start;
    }

    /* 侧栏在左的变体（旧 page-leftsidebar 模板用到了 .template-leftsidebar） */
    .main-wrapper.is-sidebar-left {
        grid-template-columns: var(--h-sidebar-w) minmax(0, 1fr);
        grid-template-areas: "sidebar content";
    }
}

/* 侧栏吸顶：只有在内容比侧栏高时才真正吸住，用 align-self: start 保证 */
@media (min-width: 62em) {
    .main-wrapper > .sidebar { align-self: start; }

    @supports (position: sticky) {
        .main-wrapper > .sidebar {
            position: sticky;
            top: calc(var(--h-header-total) + var(--h-space-md));
        }
    }
}

/* --------------------------------------------------------------------------
   2. 内容区通用容器
   -------------------------------------------------------------------------- */
.content-area {
    min-width: 0;
}

.content-area > * + * {
    margin-block-start: var(--h-space-lg);
}

/* 限制正文行长，提升可读性 */
.entry-content,
.content-body,
.post-content,
.detail-content,
.legal-content,
.template-fullwidth .fullwidth-content,
.product-description,
.project-content {
    max-width: var(--h-content-measure);
}

/* --------------------------------------------------------------------------
   3. 通用区块（section + title）
   -------------------------------------------------------------------------- */
.contact-section,
.about-section,
.faq-section,
.gallery-section,
.videos-section,
.sitemap-section,
.legal-section,
.section-featured,
.section-projects,
.section-news,
.archive-section,
.error-404-section {
    padding-block: var(--h-section-y);
}

.section-header {
    max-width: 52rem;
    margin-block-end: var(--h-space-xl);
}

.section-header:where(:not(:first-child)) {
    margin-block-start: var(--h-space-xl);
}

.section-title {
    position: relative;
    font-size: var(--h-fs-700);
    font-weight: var(--h-fw-bold);
    color: var(--h-text-strong);
    letter-spacing: var(--h-tracking-tight);
}

.section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-block-start: var(--h-space-xs);
    border-radius: var(--h-radius-pill);
    background: linear-gradient(90deg, var(--h-color-brand), var(--h-color-gold));
}

.section-subtitle {
    font-size: var(--h-fs-500);
    font-weight: var(--h-fw-semibold);
    color: var(--h-text-strong);
    margin-block-end: var(--h-space-2xs);
}

.section-more {
    display: inline-flex;
    align-items: center;
    gap: var(--h-space-3xs);
    font-size: var(--h-fs-300);
    font-weight: var(--h-fw-semibold);
    color: var(--h-color-brand);
    text-decoration: none;
}

.section-more::after {
    content: "";
    width: 0.6em;
    height: 0.6em;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    rotate: 45deg;
    transition: translate var(--h-dur-base) var(--h-ease-out);
}

.section-more:hover::after { translate: 3px 0; }

/* --------------------------------------------------------------------------
   4. 面包屑页头
   -------------------------------------------------------------------------- */
.page-header {
    position: relative;
    isolation: isolate;
    /* 注意：这里不能用简写 padding，否则会把 padding-top 覆盖掉，
       导致标题被 fixed 页头挡住（旧版就是这个 bug） */
    padding-block-start: calc(var(--h-header-total) + clamp(1.5rem, 1rem + 2vw, 3rem));
    padding-block-end: clamp(1.5rem, 1rem + 2vw, 3rem);
    background: linear-gradient(135deg, var(--h-color-navy-deep) 0%, var(--h-color-navy-soft) 100%);
    color: var(--h-text-inverse);
    overflow: hidden;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.page-header-inner {
    position: relative;
    max-width: calc(var(--h-container-max) + (var(--h-container-pad) * 2));
    margin-inline: auto;
    padding-inline: var(--h-container-pad);
}

.page-title {
    font-size: var(--h-fs-800);
    line-height: var(--h-lh-tight);
    color: var(--h-text-inverse);
    letter-spacing: var(--h-tracking-tight);
}

.page-subtitle {
    max-width: 48rem;
    margin-block-start: var(--h-space-2xs);
    font-size: var(--h-fs-400);
    color: var(--h-text-inverse-muted);
}

/* 移动端：页头去掉 SVG 图案，改用纯色块，降低渲染成本、加快首屏 */
@media (max-width: 47.99em) {
    .page-header {
        background: var(--h-color-navy-deep);
    }

    .page-header::before { display: none; }
}

/* --- 面包屑（自建 + Yoast 两种输出都适配） --- */
.breadcrumb-wrapper,
.breadcrumb-section {
    margin-block-end: var(--h-space-sm);
}

.breadcrumb-wrapper #breadcrumbs,
.breadcrumb-wrapper .yoast-breadcrumbs,
.breadcrumb-wrapper nav > span,
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--h-space-2xs);
    margin: 0;
    padding: 0;
    font-size: var(--h-fs-200);
    line-height: 1.4;
    color: var(--h-text-inverse-muted);
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--h-space-2xs);
    color: inherit;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    rotate: 45deg;
    opacity: 0.6;
}

.breadcrumb-wrapper #breadcrumbs a,
.breadcrumb-wrapper .yoast-breadcrumbs a,
.breadcrumb-item a {
    color: var(--h-text-inverse-muted);
    text-decoration: none;
}

.breadcrumb-wrapper #breadcrumbs a:hover,
.breadcrumb-wrapper .yoast-breadcrumbs a:hover,
.breadcrumb-item a:hover {
    color: #fff;
    text-decoration: underline;
}

.breadcrumb-wrapper #breadcrumbs .breadcrumb_last,
.breadcrumb-wrapper .yoast-breadcrumbs .breadcrumb_last,
.breadcrumb-item.active,
.breadcrumb-item[aria-current="page"] {
    color: #fff;
    font-weight: var(--h-fw-medium);
}

.breadcrumb-wrapper .sep,
.breadcrumb-wrapper .breadcrumb-separator {
    display: inline-flex;
    opacity: 0.55;
}

/* Yoast 输出裸分隔符字符时补一个箭头 */
.breadcrumb-wrapper #breadcrumbs .sep:empty::before {
    content: "›";
    color: currentColor;
}

/* --------------------------------------------------------------------------
   5. 侧边栏
   -------------------------------------------------------------------------- */
.sidebar {
    min-width: 0;
}

.sidebar-panel {
    display: grid;
    gap: var(--h-space-md);
}

.sidebar-section {
    padding: var(--h-space-md);
    background: var(--h-bg-surface);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-xs);
}

.sidebar-section:last-child { margin-block-end: 0; }

.sidebar-title {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
    margin-block-end: var(--h-space-sm);
    padding-block-end: var(--h-space-2xs);
    border-block-end: 1px solid var(--h-border-subtle);
    font-size: var(--h-fs-300);
    font-weight: var(--h-fw-bold);
    color: var(--h-text-strong);
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-caps);
}

.sidebar-title .icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    color: var(--h-color-brand);
}

.sidebar-menu li + li { margin-block-start: 2px; }

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h-space-2xs);
    padding: var(--h-space-2xs) var(--h-space-xs);
    border-radius: var(--h-radius-sm);
    font-size: var(--h-fs-200);
    color: var(--h-text-body);
    text-decoration: none;
    transition: var(--h-transition);
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background: var(--h-color-brand-wash);
    color: var(--h-color-brand-strong);
}

.sidebar-link.active,
.sidebar-link[aria-current="page"] {
    background: var(--h-color-brand-wash);
    color: var(--h-color-brand-strong);
    font-weight: var(--h-fw-semibold);
    box-shadow: inset 3px 0 0 var(--h-color-brand);
}

.sidebar-link .count {
    flex: none;
    min-width: 1.75em;
    padding: 0.1em 0.5em;
    border-radius: var(--h-radius-pill);
    background: var(--h-bg-sunken);
    font-size: var(--h-fs-100);
    font-weight: var(--h-fw-semibold);
    color: var(--h-text-muted);
    text-align: center;
}

.sidebar-link.active .count {
    background: var(--h-color-brand);
    color: #fff;
}

/* 侧栏导航小工具（WP 菜单 / 区块导航）的多级样式：
   去掉全局下划线，并按层级区分缩进、字号与颜色 */
.sidebar-panel .menu,
.sidebar-panel .wp-block-navigation ul,
.sidebar-panel .widget_nav_menu > div > ul {
    list-style: none;
}

.sidebar-panel .menu a,
.sidebar-panel .wp-block-navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h-space-2xs);
    padding: var(--h-space-2xs) var(--h-space-xs);
    border-radius: var(--h-radius-sm);
    font-size: var(--h-fs-200);
    color: var(--h-text-body);
    text-decoration: none;
    transition: var(--h-transition);
}

.sidebar-panel .menu a:hover,
.sidebar-panel .wp-block-navigation a:hover {
    background: var(--h-color-brand-wash);
    color: var(--h-color-brand-strong);
}

.sidebar-panel .sub-menu,
.sidebar-panel .menu .children,
.sidebar-panel .wp-block-navigation ul ul {
    margin-block-start: 2px;
    padding-inline-start: var(--h-space-sm);
    border-inline-start: 1px solid var(--h-border-subtle);
}

.sidebar-panel .sub-menu a,
.sidebar-panel .menu .children a { font-size: var(--h-fs-200); }

.sidebar-panel .sub-menu .sub-menu a,
.sidebar-panel .menu .children .children a {
    font-size: var(--h-fs-100);
    color: var(--h-text-muted);
}

/* 侧栏联系卡 */
.contact-card {
    padding: var(--h-space-md);
    border-radius: var(--h-radius-lg);
    background: linear-gradient(160deg, var(--h-color-navy-deep), var(--h-color-navy-soft));
    color: var(--h-text-inverse-muted);
}

.contact-card-title {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
    margin-block-end: var(--h-space-sm);
    font-size: var(--h-fs-400);
    color: #fff;
}

.contact-info { display: grid; gap: var(--h-space-xs); }

.contact-info-box,
.contact-row {
    display: flex;
    align-items: flex-start;
    gap: var(--h-space-2xs);
    font-size: var(--h-fs-200);
    line-height: 1.5;
    word-break: break-word;
}

.contact-info-box i,
.contact-row .icon,
.contact-row i {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    margin-block-start: 0.15em;
    color: var(--h-color-gold-soft);
}

.contact-row a { color: #fff; }

/* 移动端入口：吸底/折叠按钮 */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--h-space-2xs);
    width: 100%;
    padding: var(--h-space-xs) var(--h-space-sm);
    margin-block-end: var(--h-space-md);
    border: 1px solid var(--h-border-default);
    border-radius: var(--h-radius-md);
    background: var(--h-bg-surface);
    font-size: var(--h-fs-300);
    font-weight: var(--h-fw-semibold);
    color: var(--h-text-strong);
    box-shadow: var(--h-shadow-xs);
}

.sidebar-toggle svg { width: 1.15em; height: 1.15em; }
.sidebar-toggle:hover { border-color: var(--h-color-brand); color: var(--h-color-brand); }

.sidebar-overlay {
    display: none;
}

/* 移动端把侧栏变成抽屉：默认完全隐藏，激活时从左侧滑入 */
@media (max-width: 61.99em) {
    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: var(--h-z-drawer);
        width: var(--h-drawer-w);
        max-width: 100%;
        padding: var(--h-space-md);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--h-bg-surface);
        box-shadow: var(--h-shadow-xl);
        visibility: hidden;
        translate: -100% 0;
        transition: translate var(--h-dur-slow) var(--h-ease-out),
                    visibility var(--h-dur-slow);
    }

    .sidebar.active {
        visibility: visible;
        translate: 0 0;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--h-z-overlay);
        background: rgb(15 12 10 / 55%);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--h-dur-base) var(--h-ease-standard),
                    visibility var(--h-dur-base);
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

@media (min-width: 62em) {
    .sidebar-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   6. 左 / 右 / 全宽模板容器
   -------------------------------------------------------------------------- */
.template-fullwidth,
.template-leftsidebar {
    width: 100%;
    max-width: calc(var(--h-container-max) + (var(--h-container-pad) * 2));
    margin-inline: auto;
    padding-block: clamp(2rem, 1.25rem + 2.5vw, 4rem);
    padding-inline: var(--h-container-pad);
}

.template-leftsidebar .content-section { min-width: 0; }
.template-leftsidebar .sidebar { min-width: 0; }
.template-leftsidebar .page-content { max-width: var(--h-content-measure); }