/* ==========================================================================
   RisingStar Child Theme — GLOBAL STYLES
   Loaded on EVERY page (header.php / footer.php are shared site-wide).

   Contents:
     1. Design tokens (:root palette — single source of truth)
     2. Shared components reused across pages
        (.sol-container, .route-divider, .sol-btn*)
     3. Header styles (formerly header.css)
     4. Footer styles (formerly footer.css)

   Page-specific CSS (e.g. solution.css) is enqueued separately on its own
   template and always loads AFTER this file, so contextual overrides win.
   Font styles are NOT set here — the parent theme (twentytwentyfour)
   controls typography.
   ========================================================================== */

/* ===================== 1. DESIGN TOKENS ===================== */
:root {
	--rs-blue-50:  #eff6ff;
	--rs-blue-100: #dbeafe;
	--rs-blue-500: #3b82f6;
	--rs-blue-600: #2563eb;
	--rs-blue-700: #1d4ed8;

	--rs-gray-50:  #f9fafb;
	--rs-gray-100: #f3f4f6;
	--rs-gray-200: #e5e7eb;
	--rs-gray-300: #d1d5db;
	--rs-gray-400: #9ca3af;
	--rs-gray-500: #6b7280;
	--rs-gray-600: #4b5563;
	--rs-gray-700: #374151;
	--rs-gray-900: #111827;

	--rs-white:    #ffffff;
	--rs-red-600:  #dc2626;
}

/* ===================== 0. MINIMAL RESET =====================
   Tailwind Play CDN is injected with preflight DISABLED, so the browser's
   default `body { margin: 8px }` is NOT cleared. That pushes the first
   in-flow element (the homepage hero) down 8px while the transparent
   absolute header stays pinned at viewport top:0 — leaving a white strip
   above the dark hero (and the white header text floats over white).
   Reset the root / body and our wrapper to zero. No !important, so the
   WP admin-bar inline `html { margin-top: 32px }` still wins when logged in. */
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }
.wp-site-blocks { padding: 0; }

/* WP core (block-theme flow spacing) adds `margin-block-start: 1.2rem` to
   every direct child of `.wp-site-blocks` via `:where(.wp-site-blocks) > *`.
   That puts a ~1.2rem gap above <main>, i.e. between the header and the page
   content, on every page. Kill it site-wide so <main> is flush to its top.
   `:where()` carries 0 specificity, so this plain selector wins without
   !important. Page-specific hero-flush rules below (home / tax archives) stay
   as-is and only add padding-top:0 for their transparent floating headers. */
.wp-site-blocks > main {
	margin-block-start: 0;
	margin-top: 0;
}

/* Homepage: the hero must be flush to the top of the viewport. The floating
   transparent header overlaps the dark hero, not the white body. */
body.home main { margin-top: 0; padding-top: 0; }

/* When logged in (admin bar), the 32px html offset pushes the hero down too;
   drop the floating header just below the bar so its nav isn't hidden.
   Generic to ALL over-hero headers (homepage, tax archives, the old
   solution-template pages AND the new-design solution/industry pages) so the
   floating bar clears the admin bar everywhere — otherwise the new-design
   pages keep the header at top:0 while the mega panel (which always shifts
   +32px under body.admin-bar) drops to 112px, leaving a 32px gap. */
body.admin-bar .rs-header--over-hero { top: 32px; }

/* Solution/Industry category archive (栏目页): hero must be flush to the
   viewport top so the transparent floating header (--over-hero) sits OVER the
   category hero image, not over a white band above it. Single solution
   articles use the in-flow --flow header and are unaffected. */
body.tax-industries main,
body.tax-solutions main { margin-top: 0; padding-top: 0; }

/* Single solution pages: now also float the header over the dark hero
   (--over-hero), so the hero must be flush to the viewport top — same as the
   homepage / tax archives above. Keeps the transparent bar over the hero
   image, not over a white padding band. */
body.solution-template-default main { margin-top: 0; padding-top: 0; }

/* Replicate Tailwind preflight's link reset, applied site-wide.
   This site runs Tailwind with preflight OFF, so every <a href> would
   otherwise keep the browser default underline. A bare element selector
   (specificity 0,0,0,1) stays below any component class rule, so explicit
   `text-decoration` on specific links and a Tailwind `underline` utility
   still win where one is actually wanted. */
a { text-decoration: none; }

/* Homepage right-hand blog list: thin light-grey divider between entries.
   Defined with a full `border-bottom` shorthand (style included) on purpose:
   this site runs Tailwind with preflight OFF, so the Play CDN's `.border-b`
   utility only sets border-width and leaves border-style:none — making the
   line invisible. The element carries no Tailwind border utility, so this is
   the sole border rule and applies conflict-free. */
.rs-home-blog-item {
	border-bottom: 1px solid #9CA3AF;
}
.rs-home-blog-item:last-child {
	border-bottom: 0 !important;
}
/* Right-hand blog list column: left padding so the divider/items don't hug
   the left capsule. Defined explicitly (with the Tailwind `lg` breakpoint) on
   purpose — the homepage loads Tailwind from precompiled home-tailwind.css
   only (the Play CDN is skipped on the front page), and `lg:pl-10` was never
   compiled into that static file, so it silently did nothing. */
@media (min-width: 1024px) {
	.rs-home-blog-list {
		padding-left: 2.5rem; /* = Tailwind pl-10 */
	}
}

/* Replicate Tailwind preflight's block-margin reset, SCOPED to the homepage.
   This site injects Tailwind with preflight OFF, so <p>/<h*> keep the browser
   default block margins (~1em top & bottom on <p>, ~0.67–1em on headings).
   The 4-up STATS bar stacks two <p>s with no margin utility, so those default
   margins double up and make the bar ~2× taller than the xunruiCMS reference
   (which ran Tailwind WITH preflight). `:where()` keeps specificity at 0, so
   the utility classes (mb-*, mt-*) still win — exactly how preflight +
   utilities interact. Scoped to body.home so blog/solution single pages that
   still rely on default paragraph spacing are untouched. */
:where(body.home) p,
:where(body.home) h1, :where(body.home) h2, :where(body.home) h3,
:where(body.home) h4, :where(body.home) h5, :where(body.home) h6 {
	margin: 0;
}

/* Replicate Tailwind preflight's <button> reset, SCOPED to the homepage main.
   Preflight is OFF on this site, so raw <button> elements (solution tabs, the
   Projects carousel arrows) keep the browser's native 2px border + grey
   background — which reads as a dark/black outline, most visible on
   :active/:focus. This is exactly what xunruiCMS got for free from preflight.
   `:where()` holds specificity at 0, so the Tailwind bg/border utilities on
   those buttons still win (bg-gray-900, border-2, etc.). */
:where(body.home) main button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* ===================== 2. SHARED COMPONENTS ===================== */

/* ----- Container ----- */
.sol-container {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
@media (min-width: 640px)  { .sol-container { padding-left: 2rem;   padding-right: 2rem; } }
@media (min-width: 1024px) { .sol-container { padding-left: 2.5rem; padding-right: 2.5rem; } }

/* Container shared by the CTA banner + product detail (centers content, caps
   width). Defined once here so page CSS can drop its duplicate copy. */
.rs-container {
	max-width: var(--rs-max-width);
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 640px) {
	.rs-container { padding: 0 1.5rem; }
}

/* ----- Route divider (blue gradient + dots) ----- */
.route-divider {
	position: relative;
	display: block;
	width: 100%;
	max-width: 120px;
	height: 3px;
	margin: 0 auto 1.5rem;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--rs-blue-500) 10%, var(--rs-blue-500) 90%, transparent 100%);
	flex-shrink: 0;
}
.route-divider::before,
.route-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--rs-blue-500);
	border: 3px solid var(--rs-white);
	box-shadow: 0 0 0 2px var(--rs-blue-500);
}
.route-divider::before { left: 8%; }
.route-divider::after  { right: 8%; }

/* ----- Buttons (design-system) ----- */
.sol-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.6rem;
	border-radius: 0.6rem;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rs-btn-block { width: 100%; }

/* Primary — blue with left-to-right fill on hover */
.sol-btn-primary {
	position: relative;
	overflow: hidden;
	z-index: 1;
	background: var(--rs-blue-600);
	color: var(--rs-white);
	box-shadow: 0 8px 24px -10px rgba(37, 99, 235, 0.55);
}
.sol-btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--rs-blue-700);
	transition: width 0.35s ease;
	z-index: -1;
}
.sol-btn-primary:hover::before { width: 100%; }
.sol-btn-primary:hover { box-shadow: 0 10px 28px -10px rgba(29, 78, 216, 0.6); }

/* Outline — transparent with white border (on dark hero / dark CTA) */
.sol-btn-outline {
	background: transparent;
	color: var(--rs-white);
	border-color: rgba(255, 255, 255, 0.35);
}
.sol-btn-outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.6);
}

/* White — white bg, blue text (on dark CTA block) */
.rs-btn-white {
	background: var(--rs-white);
	color: var(--rs-blue-600);
}
.rs-btn-white::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--rs-gray-200);
	transition: width 0.35s ease;
	z-index: -1;
}
.rs-btn-white { position: relative; overflow: hidden; z-index: 1; }
.rs-btn-white:hover::before { width: 100%; }

/* Keyboard focus ring for buttons (mouse clicks keep their hover state) */
a:focus, button:focus, [tabindex]:focus, .sol-btn:focus { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--rs-blue-600);
	outline-offset: 2px;
}
.sol-btn:focus-visible {
	outline: 2px solid var(--rs-blue-600);
	outline-offset: 2px;
}

/* ==========================================================================
   3. HEADER STYLES
   Matches the xunrui CMS header design
   (F:\php\WWW\www.rs-pid.com\template\pc\default\home\header.html)
   Single-level navigation (no hover dropdowns) for the early-stage site.
   ========================================================================== */

/* --- Header shell --- */
/* Default: NOT fixed. The header sits in normal flow above the main content
   and scrolls away with the page (matching the xunruiCMS reference). Pages
   that need a fixed/transparent header overlaying a full-bleed hero (e.g.
   future landing pages) can add the .rs-header--transparent class,
   whose position:fixed rule (defined later) wins by source order. */
.rs-header {
	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid #f3f4f6;
}

.rs-header-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

@media (min-width: 640px) {
	.rs-header-inner {
		padding: 0 2rem;
	}
}

@media (min-width: 1024px) {
	.rs-header-inner {
		padding: 0 2.5rem;
	}
}

.rs-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

@media (min-width: 1024px) {
	.rs-header-row {
		height: 80px;
	}
}

/* --- Left group (logo + nav) --- */
.rs-header-left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

@media (min-width: 1024px) {
	.rs-header-left {
		gap: 2.5rem;
	}
}

/* --- Logo --- */
.rs-header-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

/* Header logo — hard-cap the container AND the img so block-theme image
   resets can't render the logo at full intrinsic size. The <a> container is
   clipped to the intended height (44 / 36), so even if the <img> somehow
   renders larger, the visible logo stays within the bar. Specificity (0,2,0)
   + !important mirrors the base header rules. */
.rs-header .rs-header-logo {
	height: 36px !important;
	max-height: 36px !important;
	overflow: hidden !important;
}
.rs-header .rs-header-logo-img {
	display: block !important;
	height: 36px !important;
	max-height: 36px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

@media (min-width: 1024px) {
	.rs-header .rs-header-logo {
		height: 44px !important;
		max-height: 44px !important;
	}
	.rs-header .rs-header-logo-img {
		height: 44px !important;
		max-height: 44px !important;
	}
}

/* --- Desktop Nav (single level) --- */
.rs-header-nav {
	display: none;
}

@media (min-width: 1024px) {
	.rs-header-nav {
		display: block;
	}
}

.rs-header-nav-list {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-header-nav-list li {
	margin: 0;
	padding: 0;
}

.rs-header-nav-link {
	display: inline-block;
	padding: 0.5rem 18px;
	font-size: 16px;
	font-weight: 600;
	color: #374151 !important;
	text-decoration: none;
	transition: color 0.15s;
}

.rs-header-nav-link:hover,
.rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header-nav-list li.current_page_item > .rs-header-nav-link {
	color: #2563eb !important;
}

/* --- Dropdown caret (top-level items with children) --- */
.rs-nav-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-top: 4px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	transition: transform 0.2s ease;
}
.rs-header-nav-list li.menu-item-has-children {
	position: relative;
}
.rs-header-nav-list li.menu-item-has-children.is-open > a .rs-nav-caret {
	transform: rotate(180deg);
}

/* --- Desktop dropdown panel --- */
.rs-header-nav-list .rs-sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border: 1px solid #e5e7eb;
	border-top: 3px solid #2563eb;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 100;
}
/* Reveal on hover (desktop) and on .is-open (JS toggle / keyboard) */
@media (min-width: 1024px) {
	.rs-header-nav-list li.menu-item-has-children:hover > .rs-sub-menu,
	.rs-header-nav-list li.menu-item-has-children.is-open > .rs-sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}
.rs-header-nav-list .rs-sub-menu li {
	margin: 0;
	padding: 0;
}
.rs-header-nav-list .rs-sub-menu .rs-header-nav-link {
	display: block;
	padding: 0.625rem 1rem;
	font-size: 15px;
	font-weight: 500;
	color: #4b5563 !important;
	white-space: nowrap;
	border-bottom: 1px solid #f3f4f6;
}
.rs-header-nav-list .rs-sub-menu li:last-child .rs-header-nav-link {
	border-bottom: none;
}
.rs-header-nav-list .rs-sub-menu .rs-header-nav-link:hover {
	background: #eff6ff;
	color: #2563eb !important;
}

/* Mobile: hide desktop dropdown behaviour, use accordion instead */
.rs-mobile-nav-list .rs-sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
}
.rs-mobile-nav-list li.menu-item-has-children.is-open > .rs-sub-menu {
	display: block;
}
.rs-mobile-nav-list .rs-sub-menu .rs-mobile-nav-link {
	font-size: 0.9375rem;
	font-weight: 500;
	color: #6b7280;
}
.rs-mobile-nav-list .rs-sub-menu .rs-mobile-nav-link:hover {
	color: #2563eb;
}
.rs-mobile-nav-list .rs-nav-caret {
	float: right;
	margin-top: 0.55rem;
	transition: transform 0.2s ease;
}
.rs-mobile-nav-list li.menu-item-has-children.is-open > a .rs-nav-caret {
	transform: rotate(180deg);
}

/* --- Right group (search + CTA) --- */
.rs-header-right {
	display: none;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 1024px) {
	.rs-header-right {
		display: flex;
	}
}

.rs-header-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563 !important;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.15s;
}

.rs-header-search-toggle:hover {
	color: #2563eb !important;
}

.rs-header-search-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

.rs-header-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff !important;
	background: #2563eb !important;
	border-radius: 0.75rem;
	text-decoration: none;
	transition: background 0.15s;
	white-space: nowrap;
}

.rs-header-cta:hover {
	background: #1d4ed8 !important;
}

/* --- WooCommerce header icons (My Account + Cart) --- */
.rs-header-wc {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.rs-header-wc-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563 !important;
	text-decoration: none;
	transition: color 0.15s;
}

.rs-header-wc-link:hover {
	color: #2563eb !important;
}

.rs-header-wc-link svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* --- Mini Cart block in header --- */
.rs-header-wc .wc-block-mini-cart {
	display: inline-flex;
	align-items: center;
}
.rs-header-wc .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563;
	text-decoration: none;
	background: none !important;
	border: none !important;
	cursor: pointer;
	transition: color 0.15s;
	line-height: 1;
	position: relative;
}
.rs-header-wc .wc-block-mini-cart__button:hover {
	color: #2563eb;
}
.rs-header-wc .wc-block-mini-cart__icon {
	width: 1.25rem;
	height: 1.25rem;
}
.rs-header-wc .wc-block-mini-cart__badge {
	position: absolute;
	top: 0.125rem;
	right: 0.125rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #2563eb;
	border-radius: 9999px;
	border: 2px solid #fff;
}
.rs-header-wc .wc-block-mini-cart__quantity-badge {
	display: inline-flex;
	position: relative;
}
.rs-header-wc .wc-block-mini-cart__amount {
	display: none;
}

/* Kill the default focus rectangle on header controls. */
.rs-header-wc-link:focus,
.rs-header-nav-link:focus,
.rs-header-search-toggle:focus,
.rs-header-cta:focus,
.rs-header-mobile-nav-link:focus,
.rs-header-mobile-toggle:focus,
.rs-header-search-close:focus,
.rs-header-wc .wc-block-mini-cart__button:focus {
	outline: none;
}
.rs-header-wc-link:focus-visible,
.rs-header-nav-link:focus-visible,
.rs-header-search-toggle:focus-visible,
.rs-header-cta:focus-visible,
.rs-header-mobile-nav-link:focus-visible,
.rs-header-mobile-toggle:focus-visible,
.rs-header-wc .wc-block-mini-cart__button:focus-visible {
	outline: 2px solid #111827;
	outline-offset: 2px;
	border-radius: 6px;
}

/* --- Mobile toggle --- */
.rs-header-mobile-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #4b5563;
	background: none;
	border: none;
	cursor: pointer;
	margin-left: auto;
}

.rs-header-mobile-toggle:hover {
	color: #2563eb;
}

.rs-header-mobile-toggle svg {
	width: 1.5rem;
	height: 1.5rem;
}

@media (min-width: 1024px) {
	.rs-header-mobile-toggle {
		display: none;
	}
}

/* --- Search dropdown (floating card — matches design reference) --- */
.rs-search-dropdown {
	position: fixed;
	width: 480px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
	padding: 20px;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 60;
}

.rs-search-dropdown.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Dark circular close button, top-right (turns red on hover, per reference) */
.rs-search-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #111827;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
	z-index: 1;
}

.rs-search-close:hover {
	background: #dc2626;
	transform: scale(1.1);
}

.rs-search-close svg {
	width: 1rem;
	height: 1rem;
}

.rs-search-form {
	display: block;
}

/* Bordered input group, stretches full width of the card */
.rs-search-input-wrap {
	display: flex;
	align-items: stretch;
	border: 2px solid #d1d5db;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s;
}

.rs-search-input-wrap:focus-within {
	border-color: #3b82f6;
}

.rs-search-input {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: #111827;
	background: transparent;
	border: none;
	outline: none;
}

.rs-search-input::placeholder {
	color: #9ca3af;
}

.rs-search-submit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: #2563eb;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
}

.rs-search-submit:hover {
	background: #1d4ed8;
}

.rs-search-submit svg {
	width: 1rem;
	height: 1rem;
}

/* --- Mobile drawer --- */
.rs-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.rs-mobile-overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.5);
	backdrop-filter: blur(2px);
}

.rs-mobile-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 280px;
	max-width: 80vw;
	background: #fff;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.rs-mobile-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.rs-mobile-logo {
	height: 32px;
	width: auto;
	object-fit: contain;
}

.rs-mobile-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: #6b7280;
	background: none;
	border: none;
	cursor: pointer;
}

.rs-mobile-close:hover {
	color: #2563eb;
}

.rs-mobile-close svg {
	width: 1.25rem;
	height: 1.25rem;
}

.rs-mobile-nav {
	flex: 1;
}

.rs-mobile-nav-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-mobile-nav-list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #f3f4f6;
}

.rs-mobile-nav-link {
	display: block;
	padding: 0.85rem 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #1f2937;
	text-decoration: none;
	transition: color 0.15s;
}

.rs-mobile-nav-link:hover,
.rs-mobile-nav-list li.current-menu-item > .rs-mobile-nav-link {
	color: #2563eb;
}

.rs-mobile-foot {
	padding-top: 1.5rem;
	border-top: 1px solid #f3f4f6;
}

.rs-mobile-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: #2563eb;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: background 0.15s;
}

.rs-mobile-cta:hover {
	background: #1d4ed8;
}

/* --- Solution header: NOT fixed (scrolls away) ---
   On solution single pages the header is in normal flow (relative), so it
   scrolls away with the page instead of overlaying the hero. The sticky
   section-nav below the hero is what pins to the top on scroll. */
.rs-header.rs-header--flow {
	position: relative;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}

/* --- About header: floats OVER the editor-built hero (absolute), NOT fixed ---
   The hero is a Kadence alignfull row built in the block editor with its own
   (mid/dark) background image + gradient overlay. The header overlays it
   (absolute, top:0) instead of occupying flow space and pushing the hero down.
   Because it is absolute (not fixed), it scrolls away with the page.

   Transparent initially (white logo / white nav text over the hero) and turns
   solid white on hover — design system: transparent -> solid on hover. The page
   gives the hero NO top offset (see about.css) so the hero is flush under the
   bar and the transparent bar sits over the hero image, not over a white gap. */
.rs-header.rs-header--over-hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent !important;
	border-bottom-color: transparent !important;
}
.rs-header.rs-header--over-hero .rs-header-logo-img {
	filter: brightness(0) invert(1);
}
/* NOTE: the base .rs-header-* rules use !important (to defeat the
   block theme's default styles), so every transparent-state override here
   MUST also carry !important — otherwise the dark default color wins and
   only the logo (which uses filter, not color) turns white. Matches the
   xunruiCMS pattern: header.absolute.text-white .nav-item{color:#fff!important}. */
.rs-header.rs-header--over-hero .rs-header-nav-link,
.rs-header.rs-header--over-hero .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header.rs-header--over-hero .rs-header-nav-list li.current_page_item > .rs-header-nav-link {
	color: #fff !important;
}
.rs-header.rs-header--over-hero .rs-header-nav-link:hover {
	color: #60a5fa !important;
}
.rs-header.rs-header--over-hero .rs-header-search-toggle {
	color: #fff !important;
}
.rs-header.rs-header--over-hero .rs-header-search-toggle:hover {
	color: #60a5fa !important;
}
.rs-header.rs-header--over-hero .rs-header-wc-link {
	color: #fff !important;
}
.rs-header.rs-header--over-hero .rs-header-wc-link:hover {
	color: #60a5fa !important;
}
.rs-header.rs-header--over-hero .wc-block-mini-cart__button {
	color: #fff !important;
}
.rs-header.rs-header--over-hero .wc-block-mini-cart__button:hover {
	color: #60a5fa !important;
}
.rs-header.rs-header--over-hero .rs-header-cta {
	color: #fff !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.rs-header.rs-header--over-hero .rs-header-cta:hover {
	color: #fff !important;
	background: #2563eb !important;
	border-color: #2563eb !important;
}
.rs-header.rs-header--over-hero .rs-header-mobile-toggle {
	color: #fff !important;
}
.rs-header.rs-header--over-hero .rs-header-mobile-toggle:hover {
	color: #60a5fa !important;
}

/* Hover-reveal solid white (design system: transparent -> solid on hover).
   Also applies when a dropdown is open via JS (click/keyboard) — without
   :hover the header would stay transparent and the white dropdown text
   would be invisible. */
.rs-header.rs-header--over-hero:hover,
.rs-header.rs-header--over-hero.dropdown-open {
	background: #fff !important;
	border-bottom-color: #e5e7eb !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-logo-img,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-logo-img {
	filter: none;
}
.rs-header.rs-header--over-hero:hover .rs-header-nav-link,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-link,
.rs-header.rs-header--over-hero:hover .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-list li.current-menu-item > .rs-header-nav-link,
.rs-header.rs-header--over-hero:hover .rs-header-nav-list li.current_page_item > .rs-header-nav-link,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-list li.current_page_item > .rs-header-nav-link {
	color: #374151 !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-nav-link:hover,
.rs-header.rs-header--over-hero.dropdown-open .rs-header-nav-link:hover {
	color: #2563eb !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-search-toggle {
	color: #4b5563 !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-search-toggle:hover {
	color: #2563eb !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-cta {
	color: #fff !important;
	background: #2563eb !important;
	border-color: #2563eb !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-mobile-toggle {
	color: #4b5563 !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-mobile-toggle:hover {
	color: #2563eb !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-wc-link {
	color: #4b5563 !important;
}
.rs-header.rs-header--over-hero:hover .rs-header-wc-link:hover {
	color: #2563eb !important;
}
.rs-header.rs-header--over-hero:hover .wc-block-mini-cart__button {
	color: #4b5563 !important;
}
.rs-header.rs-header--over-hero:hover .wc-block-mini-cart__button:hover {
	color: #2563eb !important;
}

/* --- Solid white header (normal flow, NOT floating over the hero) ---
   Use this variant for pages whose content should begin under a normal
   white header (e.g. Contact). It sits in normal document flow
   (position: relative) so it occupies space and pushes the hero down —
   it never floats over the main area. Pick per page in header.php. */
.rs-header.rs-header--solid {
	position: relative;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}

/* Note: .rs-header--transparent and .is-solid were removed — the header
   now uses .rs-header--flow (solution), .rs-header--over-hero (about), or
   .rs-header--solid (contact) instead. */

/* --- Hide the block theme's default header (we provide our own) --- */
.wp-block-template-part-header,
.wp-block-site-title,
.wp-block-navigation {
	display: none !important;
}

/* ==========================================================================
   4. FOOTER STYLES
   Matches the xunrui CMS footer design
   (F:\php\WWW\www.rs-pid.com\template\pc\default\home\footer.html)
   ========================================================================== */

/* --- Footer Container --- */
.rs-footer {
	background: #F8FAFC;
	border-top: 1px solid #e2e8f0;
	margin-top: 0;
}

.rs-footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 1.25rem;
	padding-top: 3.5rem;
	padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.rs-footer-inner {
		padding: 0 2rem;
		padding-top: 3.5rem;
		padding-bottom: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.rs-footer-inner {
		padding: 0 2.5rem;
		padding-top: 3.5rem;
		padding-bottom: 1.5rem;
	}
}

/* --- Footer Grid (3 columns with dividers) --- */
.rs-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.rs-footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}
	.rs-footer-brand-col {
		padding-right: 3rem;
	}
	.rs-footer-contact-col {
		padding: 0 3rem;
		border-left: 1px solid #cbd5e1;
		border-right: 1px solid #cbd5e1;
	}
	.rs-footer-social-col {
		padding-left: 3rem;
	}
}

/* --- Shared column title --- */
.rs-footer-col-title {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1rem;
}

/* --- Col 1: Brand + Address (stacked: logo on top, address below) --- */
.rs-footer-brand-col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Image logo, desaturated to pure black */
.rs-footer-logo-link {
	display: inline-block;
	text-decoration: none;
	line-height: 0;
}

.rs-footer-logo-img {
	display: block;
	width: 230px;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	/* Force the logo to monochrome black (invert + grayscale) */
	filter: grayscale(1) brightness(0);
}

.rs-footer-address {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #111827;
	width: 230px;
	max-width: 230px;
}

.rs-footer-address p {
	margin: 0;
}

/* --- Col 2: Get in touch --- */
.rs-footer-contact-intro {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #111827;
	margin: 0 0 1.5rem;
}

.rs-footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.rs-footer-contact-link {
	display: inline-block;
	color: #111827;
	text-decoration: none;
	border-bottom: 1px solid #111827;
	padding-bottom: 0.25rem;
	transition: color 0.2s, border-color 0.2s;
}

.rs-footer-contact-link:hover {
	color: #2563eb;
	border-color: #2563eb;
}

/* --- Col 3: Social + Certifications --- */
.rs-footer-social-grid {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 1rem 2rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.rs-footer-social-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #111827;
	text-decoration: none;
	transition: color 0.2s;
}

.rs-footer-social-link:hover {
	color: #2563eb;
}

.rs-social-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.rs-footer-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.rs-footer-badge {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #111827;
	border: 1px solid #111827;
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;
	cursor: default;
	transition: color 0.2s, border-color 0.2s;
}

.rs-footer-badge:hover {
	color: #2563eb;
	border-color: #2563eb;
}

/* --- Bottom Bar --- */
.rs-footer-bottom {
	background: #E2E8F0;
}

.rs-footer-bottom-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0.3rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.rs-footer-bottom-inner {
		padding: 0.3rem 2rem;
	}
}

@media (min-width: 1024px) {
	.rs-footer-bottom-inner {
		padding: 0.3rem 2.5rem;
	}
}

.rs-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.5rem;
}

.rs-footer-legal-link {
	font-size: 0.75rem;
	color: #6b7280;
	text-decoration: none;
	transition: color 0.3s;
}

.rs-footer-legal-link:hover {
	color: #2563eb;
}

.rs-footer-copyright {
	font-size: 0.75rem;
	color: #6b7280;
}

/* --- Send Us a Message (inline email combo box) --- */
/* --- WhatsApp Floating Button --- */
.rs-whatsapp-btn {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 50;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	background-color: #bfdbfe;
	transition: background-color 0.3s, transform 0.3s;
	text-decoration: none;
}

.rs-whatsapp-btn:hover {
	background-color: #93c5fd;
	transform: scale(1.08);
}

.rs-whatsapp-icon {
	width: 1.75rem;
	height: 1.75rem;
	color: #fff;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.rs-footer-inner {
		padding-top: 2.5rem;
		padding-bottom: 1.25rem;
	}

	.rs-footer-grid {
		gap: 2rem;
	}

	.rs-footer-brand {
		align-items: flex-start;
		align-self: flex-start;
	}

	.rs-footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.rs-whatsapp-btn {
		bottom: 1rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
	}

	.rs-whatsapp-icon {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* --- Hide the block theme's default footer on all pages --- */
.wp-block-template-part-footer,
.wp-block-footer-site-nav,
.wp-block-footer-copyright {
	display: none !important;
}