/*
Theme Name: Baike FineChem
Author: WordPress Telex
Description: A professional B2B block theme for Baike FineChem Co., Ltd. — pharmaceutical intermediates, customized chemicals, cosmetic raw materials, optoelectronic materials, and plastic raw materials. Built with the Process Integrity design direction featuring a bold dark navy aesthetic with teal accents and industrial typographic hierarchy.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: baike-finechem
Tags: block-theme, full-site-editing, dark, industrial

Baike FineChem — Where Chemistry Meets Commitment
*/

/* ── Reset & Base ── */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Ensure images are responsive */
img {
	max-width: 100%;
	height: auto;
}

/* ── Equal Card Layout ── */
.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.equal-cards .cta-bottom {
	margin-top: auto;
	justify-content: center;
}

/* ── Spec Label ── */
.spec-label {
	display: flex;
	align-items: center;
	gap: 16px;
}

.spec-label::before {
	content: '';
	display: block;
	width: 32px;
	height: 1px;
	background-color: var(--wp--preset--color--teal, #0A7EA4);
}

/* Centered spec-label: hide the left line and center text */
.spec-label.has-text-align-center {
	justify-content: center;
}

.spec-label.has-text-align-center::before {
	display: none;
}

/* ── Hero Divider ── */
.hero-divider {
	width: 80px;
	height: 2px;
	background-color: var(--wp--preset--color--teal, #0A7EA4);
}

/* ── Teal Underline Links ── */
.teal-underline-link a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
	font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.teal-underline-link a:hover {
	color: var(--wp--preset--color--teal, #0A7EA4);
	border-color: var(--wp--preset--color--teal, #0A7EA4);
}

/* ── Ticker Strip ── */
.ticker-strip {
	overflow: hidden;
	border-top: 1px solid rgba(10,126,164,0.2);
	border-bottom: 1px solid rgba(10,126,164,0.1);
	background-color: rgba(9,26,51,0.9);
}

.ticker-strip .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: 32px;
	white-space: nowrap;
	animation: ticker-scroll 40s linear infinite;
}

@keyframes ticker-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.ticker-item {
	font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace !important;
	font-size: 12px !important;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.35) !important;
	white-space: nowrap;
}

/* ── Node Dots ── */
.node-dot {
	width: 8px;
	height: 8px;
	border: 1.5px solid var(--wp--preset--color--teal, #0A7EA4);
	border-radius: 50%;
	opacity: 0.4;
	flex-shrink: 0;
}

.node-dot.active {
	background-color: var(--wp--preset--color--teal, #0A7EA4);
	opacity: 1;
}

/* ── Capability Card ── */
.capability-card {
	border: 1px solid rgba(10,126,164,0.15);
	transition: border-color 0.3s ease, transform 0.3s ease;
	position: relative;
	overflow: hidden;
}

.capability-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--wp--preset--color--teal, #0A7EA4);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

@media (hover: hover) {
	.capability-card:hover {
		border-color: rgba(10,126,164,0.4);
		transform: translateY(-4px);
	}

	.capability-card:hover::before {
		transform: scaleX(1);
	}
}

/* ── Step Number ── */
.step-number {
	width: 56px;
	height: 56px;
	border: 1.5px solid var(--wp--preset--color--teal, #0A7EA4);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.step-number::after {
	content: '';
	position: absolute;
	inset: 4px;
	border: 0.5px solid rgba(10,126,164,0.3);
}

/* ── Stat Block ── */
.stat-value {
	font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif !important;
	line-height: 1 !important;
	letter-spacing: 2px;
}

/* ── Process Connector Lines ── */
.process-connector {
	position: relative;
}

.process-connector::after {
	content: '';
	position: absolute;
	top: 28px;
	left: 100%;
	width: 100%;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--teal, #0A7EA4) 0, var(--wp--preset--color--teal, #0A7EA4) 6px, transparent 6px, transparent 10px);
	opacity: 0.3;
}

@media (max-width: 781px) {
	.process-connector::after {
		display: none;
	}
}

/* ── Grid Pattern Overlay ── */
.grid-overlay {
	position: relative;
}

.grid-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(10,126,164,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10,126,164,0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
	z-index: 0;
}

.grid-overlay > * {
	position: relative;
	z-index: 1;
}

/* ── Header Nav Styling ── */
.site-header-nav a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.65);
	text-decoration: none;
	padding: 8px 20px;
	transition: color 0.2s ease;
}

.site-header-nav a:hover {
	color: #ffffff;
}

/* ── CTA Button Style ── */
.wp-block-button.is-style-teal-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--cerulean, #1A9FD4);
	color: #ffffff;
	border-radius: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 16px 36px;
	transition: background-color 0.2s ease;
	font-family: 'Figtree', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.wp-block-button.is-style-teal-cta .wp-block-button__link:hover {
	background-color: #1590C0;
}

.wp-block-button.is-style-outline-teal .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--teal, #0A7EA4);
	border: 1.5px solid var(--wp--preset--color--teal, #0A7EA4);
	border-radius: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 14px 32px;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-family: 'Figtree', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.wp-block-button.is-style-outline-teal .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--teal, #0A7EA4);
	color: #ffffff;
}

/* ── Header CTA Small ── */
.wp-block-button.is-style-header-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--cerulean, #1A9FD4);
	color: #ffffff;
	border-radius: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 10px 24px;
	transition: background-color 0.2s ease;
	font-family: 'Figtree', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.wp-block-button.is-style-header-cta .wp-block-button__link:hover {
	background-color: #1590C0;
}

/* ── Certification Badge ── */
.cert-badge {
	border: 1px solid rgba(10,126,164,0.2);
	transition: border-color 0.3s ease;
}

@media (hover: hover) {
	.cert-badge:hover {
		border-color: rgba(10,126,164,0.5);
	}
}

/* ── Footer Teal Link ── */
.footer-link a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	transition: color 0.2s ease;
	font-size: 14px;
}

.footer-link a:hover {
	color: var(--wp--preset--color--teal, #0A7EA4);
}

/* ── Scroll Animations ── */
@media (prefers-reduced-motion: no-preference) {
	.fade-in-up {
		opacity: 0;
		transform: translateY(24px);
		animation: fadeInUp 0.6s ease forwards;
	}

	@keyframes fadeInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
	.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
	.fade-in-up:nth-child(3) { animation-delay: 0.3s; }
	.fade-in-up:nth-child(4) { animation-delay: 0.4s; }
	.fade-in-up:nth-child(5) { animation-delay: 0.5s; }
}

/* ── Separator Teal ── */
.wp-block-separator.is-style-teal-accent {
	border-color: var(--wp--preset--color--teal, #0A7EA4);
	width: 80px;
	border-width: 2px;
	margin-left: auto;
	margin-right: auto;
}

/* Left-aligned separator when not centered */
.wp-block-separator.is-style-teal-accent:not(.aligncenter) {
	margin-left: 0;
}

/* ── Cover Overlay Fine-Tune ── */
.hero-cover .wp-block-cover__image-background {
	filter: saturate(0.5) brightness(0.7);
}

/* ── Responsive Columns Stacking ── */
@media (max-width: 781px) {
	.equal-cards {
		flex-direction: column;
	}

	.equal-cards > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ── Navigation Mobile Overlay ── */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy-deep, #091A33);
}

/* ── Focus Styles for Accessibility ── */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal, #0A7EA4);
	outline-offset: 2px;
}

/* ── Skip Link ── */
.skip-link {
	background-color: var(--wp--preset--color--cerulean, #1A9FD4);
	color: #ffffff;
	font-family: 'Figtree', 'Segoe UI', 'Helvetica Neue', sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 24px;
	text-decoration: none;
	z-index: 9999;
}

/* ── Block Editor Specific ── */
.editor-styles-wrapper .capability-card,
.editor-styles-wrapper .cert-badge {
	transition: none;
}

.editor-styles-wrapper .capability-card::before {
	display: none;
}