/**
Theme Name: astra-product
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-product
Template: astra
*/

/* =========================================
   1. 定义全局变量 (源自 theme.css)
   ========================================= */
:root {
  /* 基础颜色系统 */
  --background: #ffffff;
  --foreground: #252525; /* 转换 oklch(0.145 0 0) 为近似 Hex，兼容性更好 */
  
  --primary: #030213;
  --primary-foreground: #ffffff;
  
  --secondary: #f1f2f4; /* 转换自 oklch(0.95...) */
  --secondary-foreground: #030213;
  
  --muted: #ececf0;
  --muted-foreground: #717182;
  
  --accent: #e9ebef;
  --accent-foreground: #030213;
  
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  
  --border: rgba(0, 0, 0, 0.1);
  --input-background: #f3f3f5;
  
  /* 圆角设置 */
  --radius: 0.625rem; /* 约 10px */
}

/* =========================================
   2. 自定义实用类 (源自 tailwind.css)
   可在区块的 "高级 -> 额外的 CSS 类" 中使用
   ========================================= */

/* 背景网格纹理 - 使用方法：在容器区块添加类名 bg-grid-pattern */
.bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* 渐变背景动画 - 使用方法：添加类名 animate-gradient */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

/* 悬浮漂浮动画 - 使用方法：添加类名 animate-float */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* =========================================
   3. 动画关键帧定义
   ========================================= */
@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* =========================================
   4. 全局样式微调
   ========================================= */
body {
  background-color: var(--background);
  color: var(--foreground);
}

/* 让所有输入框和卡片使用你的圆角变量 */
input, textarea, button, .wp-block-button__link {
  border-radius: var(--radius) !important;
}

/* 科技风十字加号背景 (Plus Pattern) */
.bg-plus-lingt {
  background-color: #F8FAFC; /* 极淡的灰白底色 */
  
  /* 使用 SVG 绘制精准的十字 */
  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='none' fill-rule='evenodd'%3E%3Cg stroke='%233B82F6' stroke-opacity='0.15' stroke-width='2'%3E%3Cpath d='M30 24v12M24 30h12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  
  /* 确保背景平铺 */
  background-repeat: repeat;
  background-position: center;
}

/* 证书卡片悬停交互 - 增强版 */

/* 1. 定义过渡动画 */
.cert-card, 
.cert-title, 
.cert-title * { /* 星号代表选中标题里所有的东西 */
    transition: all 0.3s ease !important;
}

/* 2. 鼠标悬停大卡片时，强制标题里的所有文字变蓝 */
.cert-card:hover .cert-title,
.cert-card:hover .cert-title h1,
.cert-card:hover .cert-title h2,
.cert-card:hover .cert-title h3,
.cert-card:hover .cert-title h4,
.cert-card:hover .cert-title h5,
.cert-card:hover .cert-title h6,
/*.cert-card:hover .cert-title span, */
.cert-card:hover .cert-title a {
    color: #3B82F6 !important; /* 核心：!important 强制生效 */
}

/* 3. (可选) 如果你希望里面的图标也一起变蓝，把下面的注释去掉 */
/*
.cert-card:hover .cert-title svg {
    fill: #3B82F6 !important;
}
*/

/* 这里的 #mega-menu-wrap-primary 是常见的 ID，如果没生效，请看下下方的提示 */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    letter-spacing: 2px !important;   /* 这里控制字间距，2px 可根据需要调整 */
    padding-left: 15px !important;    /* 这里控制菜单项之间的左间距 */
    padding-right: 15px !important;   /* 这里控制菜单项之间的右间距 */
}
}