/*
 Theme Name:   Astra Child — ALVUME
 Theme URI:    https://alvume.com/
 Description:  ALVUME 品牌子主题：Ink Navy × Champagne Gold 设计令牌。请勿修改本文件头部注释中的 Template 值。
 Author:       ALVUME
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child-alvume
*/

/* ============================================================
   1. 品牌设计令牌（直接从 alvume logo 提取）
   ============================================================ */
:root{
  /* 主色 —— 取自 logo "ALVUME" 文字色 */
  --ink:        #14263B;
  --ink-2:      #1E3A57;
  --ink-3:      #2A4868;

  /* 强调色 —— 取自 logo A 标香槟金 */
  --gold:       #B08A4F;
  --gold-2:     #C9A227;
  --gold-soft:  #E6D4B0;
  --gold-tint:  #F4ECDC;

  /* 次级辅助 —— 仅用于强调点缀，占比 < 5% */
  --teal:       #0E8074;

  /* 中性系统 */
  --bg:         #FFFFFF;
  --bg-soft:    #F7F5F2;
  --border:     #E3DDD0;
  --text:       #23323D;
  --text-soft:  #5B6B78;

  /* 字体 */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* 其他 */
  --radius:     10px;
  --shadow:     0 10px 30px rgba(20,38,59,.08);
  --maxw:       1240px;
}

/* ============================================================
   2. 全局字体映射
   ============================================================ */
body{
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title{
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
h1{ font-size: 62px }
h2{ font-size: 46px }
h3{ font-size: 28px }
h4{ font-size: 21px }

/* ============================================================
   3. 链接与按钮（品牌金）
   ============================================================ */
a{ color: inherit; text-decoration: none }
.ast-button, .wp-block-button__link,
button, .button, input[type="submit"]{
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 15px 32px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: all .3s cubic-bezier(.2,.6,.2,1);
}
.ast-button:hover, .wp-block-button__link:hover,
button:hover, input[type="submit"]:hover{
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(20,38,59,.3);
}

/* ============================================================
   4. 导航栏 —— 滚动阴影 + 金色激活态
   ============================================================ */
#masthead, .site-header{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s, background .3s;
}
#masthead.scrolled, .site-header.scrolled{
  background: #fff;
  box-shadow: 0 6px 24px rgba(20,38,59,.08);
}
.main-header-menu a{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.main-header-menu a:hover,
.main-header-menu .current-menu-item a{
  color: var(--gold);
}
.ast-site-header-cart, .ast-header-account-wrap{ display: none }

/* ============================================================
   5. 内容容器 —— 与原型 1240px 对齐
   ============================================================ */
.ast-container{
  max-width: var(--maxw);
  padding-left: 28px;
  padding-right: 28px;
}

/* ============================================================
   6. 首页 Hero 特效
   用法：Spectra 容器块 → 高级 → 附加 CSS 类 → 填 alv-hero
   ============================================================ */
.alv-hero{
  position: relative;
  background: linear-gradient(125deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  overflow: hidden;
}
.alv-hero::before{
  content: "";
  position: absolute; right: -15%; top: -25%;
  width: 55%; height: 170%;
  background: radial-gradient(ellipse, rgba(176,138,79,.22), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.alv-hero > *{ position: relative; z-index: 2 }
.alv-hero h1, .alv-hero h2, .alv-hero h3{ color: #fff }
.alv-hero h1 em{ color: var(--gold-2); font-style: italic }
.alv-hero p{ color: rgba(255,255,255,.78) }

/* 产品浮动动效 —— 图片块加 alv-float */
.alv-float{
  animation: alvFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
}
@keyframes alvFloat{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-12px) }
}

/* Hero 参数徽章 —— 文本块加 alv-badge */
.alv-badge{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 12px 30px rgba(20,38,59,.25);
  display: inline-flex;
  flex-direction: column;
}
.alv-badge b{
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  line-height: 1;
  font-weight: 600;
}
.alv-badge span{
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ============================================================
   7. 通用组件
   ============================================================ */

/* 金色小标题（eyebrow） */
.alv-eyebrow{
  display: inline-block;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 18px;
}

/* 数据强调数字 */
.alv-stat b{
  font-family: var(--font-serif);
  font-size: 42px;
  color: var(--gold-2);
  font-weight: 600;
  line-height: 1;
  display: block;
  letter-spacing: -.02em;
}
.alv-stat span{
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-top: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* 产品标签 chip */
.alv-chip{
  display: inline-block;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  margin: 2px;
}

/* 卡片 hover 效果 —— 产品卡/能力卡加 alv-card */
.alv-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all .35s cubic-bezier(.2,.6,.2,1);
}
.alv-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(20,38,59,.14);
  border-color: var(--gold-soft);
}

/* 引言卡（品牌故事用） */
.alv-quote{
  background: #fff;
  border: 1px solid var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: 0 20px 40px rgba(20,38,59,.15);
}

/* 深色板块（流程/CTA 用） */
.alv-dark{
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.alv-dark h1, .alv-dark h2, .alv-dark h3, .alv-dark h4{ color: #fff }
.alv-dark p{ color: rgba(255,255,255,.78) }

/* 浅色交替板块 */
.alv-soft{ background: var(--bg-soft) }

/* ============================================================
   8. 滚动揭示动画（配合 js/main.js 自动生效）
   用法：任意块 → 高级 → 附加 CSS 类 → 填 alv-reveal
   ============================================================ */
.alv-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.alv-reveal.visible{
  opacity: 1;
  transform: none;
}

/* ============================================================
   9. 移动端适配（Astra 断点：921px / 544px）
   ============================================================ */
@media (max-width: 921px){
  h1{ font-size: 46px }
  h2{ font-size: 36px }
  h3{ font-size: 24px }
  .ast-container{ padding-left: 20px; padding-right: 20px }
  .alv-badge{ padding: 8px 12px; border-radius: 10px }
  .alv-badge b{ font-size: 15px }
  .alv-badge span{ font-size: 9px; letter-spacing: 1px }
  .alv-stat b{ font-size: 34px }
}
@media (max-width: 544px){
  h1{ font-size: 36px }
  h2{ font-size: 30px }
  h3{ font-size: 21px }
  .alv-stat b{ font-size: 32px }
  .alv-card:hover{ transform: none }
}

/* 尊重用户的「减少动效」系统设置 */
@media (prefers-reduced-motion: reduce){
  .alv-float{ animation: none }
  .alv-reveal{ opacity: 1; transform: none; transition: none }
}