/*
Theme Name: Twenty Twenty-Four Child Theme
Theme URI: https://your-website.com/twentytwentyfour-child/
Description: An example child theme for the Twenty Twenty-Four theme.
Author: Your Name
Author URI: https://your-website.com
Template: twentytwentyfour
Version: 0.1.1
*/

/* 添加你自己的CSS样式 */

/** 太极八卦 **/
.canvas {
 	--bg-color: var(--wp--preset--color--base); 
	--main-color: #000;
	--light-color: #fff;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color);
	width: 70%;
	aspect-ratio: 1/1; 
}

.wrap {
	position: relative;
	/* 将 transform 移到这里，可以启用硬件加速 */
	transform: rotate(0deg); 
	animation: spin 8s linear infinite;
	animation-play-state: running;
	width: 100%;
	aspect-ratio: 1/1; 
}

.wrap:hover {
  animation-play-state: paused;
}

/* 中心太极图 */
.taiji {
	position: inherit;
	left: 50%;
	top: 50%;
	width: 60%;
	aspect-ratio: 1/1; 
	transform: translate(-50%, -50%);
	border-radius: 50%;
	box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.75);
	/* 使用CSS变量 */
	background:
		radial-gradient(10% 10% at 75% 50%, var(--main-color) 50%, transparent 50%),
		radial-gradient(10% 10% at 25% 50%, var(--light-color) 50%, transparent 50%),
		radial-gradient(50% 50% at 25% 50%, var(--main-color) 50%, transparent 50%),
		radial-gradient(50% 50% at 75% 50%, var(--light-color) 50%, transparent 50%),
		linear-gradient(var(--light-color) 50%, var(--main-color) 50%);
}

.wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gua-name {
  font-size: 33px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* 将所有爻线样式统一到一个类中 */
.yao-line {
  fill: var(--main-color);
}

.yin-gap {
  fill: none;
  stroke: var(--bg-color);
  stroke-width: 10;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

ul.wp-block-navigation li.current-menu-item::before {
  content: "☯";   /* adds a checkmark before each item */
}