/* ==========================================================================
   FureverFrame — Apple Minimal 品牌样式定制包 (v1.0)
   --------------------------------------------------------------------------
   目标站点：air-light 主题 + WooCommerce + mrvs-photo-curtain 定制插件
   风格基线：白底 / 大留白 / 大字号 / 克制动效 / 系统字体栈
   说明：
     1. 本文件全部规则自带高优先级（:root 变量 + 页面级选择器），
        可直接粘贴进「外观 → 自定义 → 附加 CSS」，或作为 style-branding.css
        通过 functions.php enqueue 挂载（挂载代码见文末注释）。
     2. 覆盖强度以"必要为准"，不破坏 mrvs-photo-curtain 定制器的专属样式；
        二者冲突时以本文件为准（权重更高、且定制器容器规则明确标注）。
     3. 配色/字号集中在 :root 变量区，后续调品牌只需改这里。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 品牌设计变量（唯一需要长期维护的调色中心）
   --------------------------------------------------------------------------
   设计令牌说明：
     --ff-bg        全站背景（纯白，苹果留白感）
     --ff-bg-soft   次级区块背景（浅灰，区分层级但克制）
     --ff-fg        主文字（深灰近黑 #1d1d1f = Apple 主文字）
     --ff-fg-sub    次级文字（中灰 #6e6e73 = Apple 次级文字）
     --ff-accent    主强调（Apple 蓝 #0071e3，按钮/链接/CTA）
     --ff-accent-2  暖色辅助（琥珀金，用于宠物赛道的小点缀，克制使用）
     --ff-radius    圆角基调（Apple 统一用大圆角，卡片/按钮一致）
     --ff-font      系统字体栈：-apple-system / SF Pro / Frutiger 族
   -------------------------------------------------------------------------- */
:root {
  --ff-bg: #ffffff;
  --ff-bg-soft: #f5f5f7;                       /* Apple 次级灰 */
  --ff-border: #e5e5ea;                        /* 极细分隔线 */
  --ff-fg: #1d1d1f;                            /* Apple 主文字 */
  --ff-fg-sub: #6e6e73;                        /* Apple 次级文字 */
  --ff-accent: #0071e3;                        /* Apple 蓝 */
  --ff-accent-soft: #e8f2fd;                   /* 蓝的浅底，hover 用 */
  --ff-accent-2: #c7862e;                      /* 琥珀金，宠物点缀，少用 */
  --ff-radius: 14px;
  --ff-radius-lg: 24px;
  --ff-space: 24px;                            /* 基准留白 */
  --ff-space-lg: 64px;                         /* 大区块留白 */
  --ff-font: -apple-system, BlinkMacSystemFont, "SF Pro Display",
             "SF Pro Text", "Helvetica Neue", Frutiger, "Frutiger Linotype",
             "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", sans-serif;
  --ff-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
             "SF Pro Text", "Helvetica Neue", Frutiger, "Frutiger Linotype",
             "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   2. 全局基线：白底 + 系统字体栈 + 克制成重
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body,
.site,
.site-content,
.entry,
#page {
  background-color: var(--ff-bg);
  color: var(--ff-fg);
  font-family: var(--ff-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;                     /* Apple 现代排印的负字距 */
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ff-fg);
}

p, li, blockquote {
  color: var(--ff-fg-sub);
}

a {
  color: var(--ff-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. 站名 / 品牌 Logo：大号、克制、居中留白
   -------------------------------------------------------------------------- */
.site-branding,
.branding,
.site-title,
#site-title {
  padding: 0;
}

.site-title a,
.site-branding .site-title,
.logo a {
  font-family: var(--ff-font-display);
  font-size: 1.6rem;                           /* 站名略大但不夸张 */
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ff-fg);
  text-decoration: none;
}

.site-description,
.tagline {
  color: var(--ff-fg-sub);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   4. 导航：白底、留白充足、淡入动效克制
   ------------------------------------------------------------------------- */
.navbar,
.navigation,
.main-navigation,
#primary-menu,
.site-nav {
  background-color: var(--ff-bg);
  border-bottom: 1px solid var(--ff-border);
}

/* sticky 时给极轻的毛玻璃，克制体现 Apple 感 */
.navbar.is-sticky,
.navbar.sticky,
.main-navigation.is-scrolled {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

.main-navigation ul.menu > li > a,
.navbar .menu > li > a,
#primary-menu > li > a {
  color: var(--ff-fg-sub);
  font-size: 0.98rem;
  font-weight: 500;
  padding: 0.9rem 1.1rem;
  letter-spacing: 0;
  transition: color 0.2s ease;
}

.main-navigation ul.menu > li > a:hover,
.navbar .menu > li > a:hover {
  color: var(--ff-fg);
}

.main-navigation ul.menu > li.current-menu-item > a,
.current-menu-ancestor > a {
  color: var(--ff-fg);
  font-weight: 600;
}

/* 子菜单：白卡片 + 大圆角 + 阴影 */
.main-navigation ul.sub-menu,
.navbar .sub-menu {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  padding: 6px;
}

.main-navigation ul.sub-menu a,
.navbar .sub-menu a {
  color: var(--ff-fg-sub);
  border-radius: 8px;
  padding: 0.55rem 1rem;
}

.main-navigation ul.sub-menu a:hover {
  background: var(--ff-bg-soft);
  color: var(--ff-fg);
}

/* --------------------------------------------------------------------------
   5. 按钮：Apple 风胶囊按钮（主色 / 次级 / 幽灵三态）
   ------------------------------------------------------------------------- */
button,
a.button,
input[type="submit"],
.button,
.wp-block-button__link,
.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
  font-family: var(--ff-font);
  border-radius: 980px;                        /* 苹果经典圆胶囊 */
  border: none;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  background-color: var(--ff-accent);
  padding: 0.7rem 1.9rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  line-height: 1.5;
}

button:hover,
a.button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.single_add_to_cart_button:hover,
.woocommerce a.button:hover {
  background-color: #0077ed;                   /* Apple 蓝 hover */
  color: #fff;
  opacity: 1;
}

button:active,
a.button:active,
.single_add_to_cart_button:active {
  transform: scale(0.97);
}

/* 次级按钮：浅灰底 */
.button.button-secondary,
.woocommerce a.button.alt,
.entry-content .button-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--ff-fg);
  box-shadow: inset 0 0 0 1px var(--ff-border);
}

.button.button-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--ff-bg-soft);
  color: var(--ff-fg);
}

/* --------------------------------------------------------------------------
   6. Hero：全宽、居中、超大标题、最大化留白
   ------------------------------------------------------------------------- */
.hero,
.entry-hero,
.page-header,
.site-hero,
#hero {
  background-color: var(--ff-bg);
  padding: var(--ff-space-lg) var(--ff-space);
  text-align: center;
}

.hero h1,
.entry-title,
.hero .entry-title {
  font-size: clamp(2.6rem, 6vw, 4.5rem);       /* 苹果大标题，随屏缩放 */
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ff-fg);
  margin: 0 auto 1.25rem;
  max-width: 15ch;
  line-height: 1.05;
}

.hero p,
.hero-description,
.subtitle {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 400;
  color: var(--ff-fg-sub);
  max-width: 58ch;
  margin: 0 auto 2rem;
}

/* --------------------------------------------------------------------------
   7. 卡片 / 产品展示：白卡、细边框、大圆角、悬停轻抬升
   ------------------------------------------------------------------------- */
.card,
.woocommerce ul.products li.product,
.mpc-card,
.feature-card,
.step-card {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover,
.woocommerce ul.products li.product:hover,
.feature-card:hover,
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.woocommerce ul.products {
  padding: var(--ff-space) 0;
}

.woocommerce a.button.product_type_simple,
.woocommerce .add_to_cart_button {
  font-size: 0.9rem;
  padding: 0.55rem 1.4rem;
}

.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ff-fg);
}

.woocommerce .price,
.woocommerce-loop-product__title + .price {
  color: var(--ff-fg-sub);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. Footer：白底、细顶线、灰文字、居中大字距
   ------------------------------------------------------------------------- */
.site-footer,
footer.site-footer,
#colophon {
  background-color: var(--ff-bg);
  border-top: 1px solid var(--ff-border);
  padding: var(--ff-space-lg) var(--ff-space) 2.5rem;
  text-align: center;
}

.site-footer .widget,
.site-footer a {
  color: var(--ff-fg-sub);
  font-size: 0.9rem;
}

.site-footer a:hover {
  color: var(--ff-fg);
}

.site-info,
.copyright,
.site-footer .copyright {
  color: var(--ff-fg-sub);
  font-size: 0.85rem;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   9. 表单 / 输入：Airbnb Apple 式极简输入框
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select,
.woocommerce form .form-row input.input-text {
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  background: #fff;
  color: var(--ff-fg);
  padding: 0.7rem 1rem;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--ff-accent);
  box-shadow: 0 0 0 3px var(--ff-accent-soft);
}

/* --------------------------------------------------------------------------
   10. 定制商品页（mrvs-photo-curtain）与品牌风格对齐 ------
   说明：定制器自身样式（#mrvs-mpc-root）保留；这里仅微调品牌一致性，
   不强攻覆盖，避免破坏已部署的定制器布局。
   ------------------------------------------------------------------------- */
#mrvs-mpc-root {
  font-family: var(--ff-font);
  background: var(--ff-bg);
  border-radius: var(--ff-radius-lg);
}

#mrvs-mpc-root .mrvs-mpc__title {
  font-family: var(--ff-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ff-fg);
}

#mrvs-mpc-root .mrvs-mpc__subtitle {
  color: var(--ff-fg-sub);
}

/* 定制器内的上传 / 导出按钮统一胶囊 */
#mrvs-mpc-root button,
#mrvs-mpc-root .mrvs-mpc__upload label {
  border-radius: 980px;
  font-family: var(--ff-font);
}

/* 异形模板（猫爪等）选中态用品牌蓝描边 */
#mrvs-mpc-root .mrvs-mpc__style-item.is-selected {
  border-color: var(--ff-accent);
  box-shadow: 0 0 0 3px var(--ff-accent-soft);
}

/* 定制器主按钮跟随品牌强调色 */
#mrvs-mpc-root .mrvs-mpc__cta {
  background-color: var(--ff-accent);
  color: #fff;
  border-radius: 980px;
  border: none;
  font-weight: 500;
}

#mrvs-mpc-root .mrvs-mpc__cta:hover {
  background-color: #0077ed;
}

/* --------------------------------------------------------------------------
   11. 适度动效（克制原则）：只保留淡入与轻位移，禁用炫技动画
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero, .card, .feature-card, .step-card {
    animation: ff-fade-in 0.6s ease both;
  }
}

@keyframes ff-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   挂载方式（任选其一）
   --------------------------------------------------------------------------
   方式 A：WordPress 后台 → 外观 → 自定义 → 附加 CSS，全量粘贴本文件。
   方式 B：把本文件上传到主题目录（如 child-theme/style-branding.css），
           然后在子主题 functions.php 中加入：

           add_action('wp_enqueue_scripts', function () {
               wp_enqueue_style(
                   'ff-branding',
                   get_stylesheet_directory_uri() . '/style-branding.css',
                   [],
                   '1.0.0'
               );
           });

   方式 C：若使用插件二次 enqueue，写法同上，URL 换成插件内地址。
   ========================================================================== */