/**
 * PufferGo Plugin CSS
 *
 * 所有手写 CSS 的单一来源。按职责分区，所有 fullpage 区域
 * 通过统一的 .puffergo-fullpage-layout 作用域保护。
 *
 * 分区：
 *   §1 Block Editor Scope     — [class^="pg--"] 古腾堡区块防御
 *   §2 Fullpage Scope Defense — .puffergo-fullpage-layout 统一防御
 *   §3 Button & Form Reset    — button/input/textarea/select 主题覆盖
 *   §4 Layout                 — 固定 header、内容区 offset
 *   §5 Template Switcher      — header/footer 变体切换
 *   §6 Header-2 Nav           — 导航下拉、nav-link 按钮
 *   §7 Admin UI               — 样式选择器面板
 */


/* ================================================================
   §1  Block Editor Scoped Preflight
   匹配所有 Tailwind container blocks（class 以 "pg--" 开头）。
   这些区块可出现在任何 post/page，不限于 fullpage 模板。
   ================================================================ */

[class^="pg--"],
[class^="pg--"] *,
[class^="pg--"] *::before,
[class^="pg--"] *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--pg-border, currentColor);
}

[class^="pg--"] blockquote,
[class^="pg--"] dl, [class^="pg--"] dd,
[class^="pg--"] h1, [class^="pg--"] h2, [class^="pg--"] h3,
[class^="pg--"] h4, [class^="pg--"] h5, [class^="pg--"] h6,
[class^="pg--"] hr, [class^="pg--"] figure, [class^="pg--"] p, [class^="pg--"] pre {
    margin: 0;
    padding: 0;
}

[class^="pg--"] {
    font-family: var(--pg-font-body, inherit);
    line-height: 1.5;
    color: var(--pg-text-main, inherit);
    -webkit-font-smoothing: antialiased;
}

[class^="pg--"] img, [class^="pg--"] svg, [class^="pg--"] video {
    display: block;
    max-width: 100%;
    height: auto;
}

[class^="pg--"] ul li, [class^="pg--"] ol li {
    list-style: none;
}
[class^="pg--"].puffergo-tailwind-container ul,
.puffergo-tailwind-container-editor ul {
    padding-left: 0;
}

.puffergo-tailwind-container-editor .iconify {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    vertical-align: middle;
}


/* ================================================================
   §2  Fullpage Scope Defense
   防御主题样式污染，覆盖所有 PufferGo 控制的区域：
   header, footer, page-content, product-archive, product-single。
   一套规则代替原先 4 份重复代码。
   ================================================================ */

.puffergo-fullpage-layout,
.puffergo-fullpage-layout *,
.puffergo-fullpage-layout *::before,
.puffergo-fullpage-layout *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--pg-border, currentColor);
}

.puffergo-fullpage-layout {
    font-family: var(--pg-font-body, inherit);
    line-height: 1.5;
    color: var(--pg-text-main, inherit);
    -webkit-font-smoothing: antialiased;
}

.puffergo-fullpage-layout h1, .puffergo-fullpage-layout h2,
.puffergo-fullpage-layout h3, .puffergo-fullpage-layout h4,
.puffergo-fullpage-layout h5, .puffergo-fullpage-layout h6,
.puffergo-fullpage-layout p, .puffergo-fullpage-layout figure,
.puffergo-fullpage-layout pre, .puffergo-fullpage-layout blockquote,
.puffergo-fullpage-layout hr, .puffergo-fullpage-layout dl,
.puffergo-fullpage-layout dd {
    margin: 0;
    padding: 0;
}

.puffergo-fullpage-layout ul,
.puffergo-fullpage-layout ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.puffergo-fullpage-layout li::before,
.puffergo-fullpage-layout li::after {
    content: none;
    display: none;
}

.puffergo-fullpage-layout a {
    text-decoration: none;
    color: inherit;
}

.puffergo-fullpage-layout img,
.puffergo-fullpage-layout svg,
.puffergo-fullpage-layout video {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ================================================================
   §3  Button & Form Element Reset
   防御主题对 button/input/textarea/select 的全局样式。
   之前只保护 header，现在保护所有 fullpage 区域。
   ================================================================ */

/*
 * 不使用 !important — 让 Tailwind utility 类（特异性 0,2,0）可以覆盖此 reset（特异性 0,1,1）。
 * 对于裸 <button>（无 utility 类），此 reset 仍然能防御主题的 button { ... }（特异性 0,0,1）。
 */
.puffergo-fullpage-layout button,
.puffergo-fullpage-layout .button,
.puffergo-fullpage-layout .wp-block-button__link,
.puffergo-fullpage-layout .wp-element-button,
.puffergo-fullpage-layout input[type="button"],
.puffergo-fullpage-layout input[type="submit"],
.puffergo-fullpage-layout input[type="reset"] {
    background: transparent;
    color: inherit;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.puffergo-fullpage-layout button:hover,
.puffergo-fullpage-layout .button:hover,
.puffergo-fullpage-layout .wp-block-button__link:hover,
.puffergo-fullpage-layout .wp-element-button:hover,
.puffergo-fullpage-layout input[type="button"]:hover,
.puffergo-fullpage-layout input[type="submit"]:hover,
.puffergo-fullpage-layout input[type="reset"]:hover {
    background: transparent;
    color: inherit;
}

/* --- Text inputs / textarea / select baseline reset --- */
.puffergo-fullpage-layout input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
.puffergo-fullpage-layout textarea,
.puffergo-fullpage-layout select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

.puffergo-fullpage-layout input::placeholder,
.puffergo-fullpage-layout textarea::placeholder {
    color: var(--pg-text-muted);
    opacity: 1;
}

/* --- Spec Accordion --- */
.spec-group .minus-icon { display: none; }
.spec-group .plus-icon  { display: block; }
.spec-group.group-expanded .minus-icon { display: block; }
.spec-group.group-expanded .plus-icon  { display: none; }


/* ================================================================
   §4  Layout
   Header wrapper uses sticky positioning — no padding-top compensation needed.
   Sticky keeps the header in document flow, so content automatically starts
   below it regardless of header height. New variants need zero extra CSS.
   ================================================================ */

/* Header shell: wrapper handles positioning (sticky), header itself is in normal flow */
.puffergo-default-header {
    background-color: #fff;
}

/* Sticky wrapper — only the active variant is visible */
.puffergo-header-wrap.puffergo-header-active {
    position: sticky;
    top: 0;
    z-index: 40;
}
@media (min-width: 783px) {
    body.admin-bar .puffergo-header-wrap.puffergo-header-active {
        top: 32px;
    }
}
@media screen and (max-width: 782px) {
    body.admin-bar .puffergo-header-wrap.puffergo-header-active {
        top: 46px;
    }
}


/* ================================================================
   §5  Template Switcher
   Header / Footer 变体的显示/隐藏（仅渲染选中的变体）。
   ================================================================ */

.puffergo-header-wrap { display: none; }
.puffergo-header-wrap.puffergo-header-active { display: block; }

.puffergo-footer-wrap { display: none; }
.puffergo-footer-wrap.puffergo-footer-active { display: block; }


/* ================================================================
   §6  Header-2 Navigation
   导航链接按钮 + 下拉面板行为。
   ================================================================ */

/* Nav link buttons stay link-style, no border */
.puffergo-fullpage-layout button.puffergo-nav-link {
    background: transparent !important;
    border: none !important;
    color: var(--pg-text-main) !important;
}
.puffergo-fullpage-layout button.puffergo-nav-link:hover {
    background: transparent !important;
    border: none !important;
    color: var(--pg-text-main) !important;
}

/* Dropdown open state (JS toggles .is-open on .puffergo-nav-dropdown) */
.puffergo-fullpage-layout .puffergo-nav-dropdown.is-open .puffergo-nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Footer link reset */
.puffergo-default-footer a {
    text-decoration: none;
}
.puffergo-default-footer a:hover {
    text-decoration: none;
}


/* ================================================================
   §7  Admin UI
   Header / Footer 样式选择器面板（仅编辑模式可见）。
   ================================================================ */

.puffergo-header-style-selector {
    position: fixed;
    top: 100px;
    right: 12px;
    z-index: 10001;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.puffergo-header-style-panel {
    position: fixed;
    top: 100px;
    right: -308px;
    width: 300px;
    max-height: calc(100vh - 120px);
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px 0 0 8px;
    transition: right 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.puffergo-header-style-panel[aria-hidden="false"] {
    right: 0;
}
.puffergo-header-style-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}
.puffergo-header-style-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #94a3b8;
    line-height: 1;
    padding: 2px 6px;
}
.puffergo-header-style-panel-close:hover {
    color: #64748b;
}
.puffergo-header-style-panel-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.puffergo-header-style-option {
    padding: 12px 14px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    text-align: left;
    transition: all 0.15s ease;
}
.puffergo-header-style-option:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}
.puffergo-header-style-trigger {
    position: fixed;
    top: 100px;
    right: 12px;
    z-index: 10002;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #6366f1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}
.puffergo-header-style-trigger:hover {
    background: rgba(99, 102, 241, 0.1);
}
body.puffergo-has-design-card .puffergo-header-style-trigger-wrap {
    display: none;
}