/*
 * CADchat — pattern styles
 *
 * Per-pattern visual rules. Each pattern's CSS lives under a dedicated `.cc-*`
 * class hook on its outer container, so styles never leak across patterns.
 */

/* === Button block styles ===
 *
 * Variants are registered as core/button block styles in inc/block-styles.php
 * — they appear in the editor's "Styles" panel for clean, click-to-apply UX.
 * Frontend CSS targets `.wp-block-button.is-style-{name}` selectors.
 *
 * Selectors are scoped under `.cc-section` to outweigh GeneratePress's
 * default `a.wp-block-button__link:not(.has-background)` rule (specificity
 * 0,2,1). Three classes brings ours to 0,3,1 — wins cleanly without !important.
 */

/*
 * Per prototype landing-preview.html (line ~536):
 *   padding: "14px 34px" -- not the cc-space-3/6 pair
 *   borderRadius: 8       -- rounded rectangle, NOT 9999px pill
 *   fontSize: 15
 *   fontWeight: 700       -- bold, NOT semibold
 */
.cc-section .wp-block-button .wp-block-button__link,
.cc-section .wp-block-button .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	padding: 14px 32px;
	border-radius: 8px;
	font-weight: var(--cc-fw-bold);
	font-size: 15px;
	letter-spacing: 0.01em;
	transition:
		background var(--cc-duration-fast) var(--cc-easing-standard),
		color var(--cc-duration-fast) var(--cc-easing-standard),
		box-shadow var(--cc-duration-fast) var(--cc-easing-standard),
		transform var(--cc-duration-fast) var(--cc-easing-standard);
}

.cc-section .wp-block-button .wp-block-button__link:hover,
.cc-section .wp-block-button .wp-element-button:hover {
	transform: translateY(-1px);
	opacity: 1;
}

/* Action — blue CTA (prototype's "Book a demo" / "Get started" / "Talk to sales"). */
.cc-section .wp-block-button.is-style-action .wp-block-button__link,
.cc-section .wp-block-button.is-style-action .wp-element-button {
	background: var(--cc-color-action);
	color: var(--cc-color-text-on-dark);
}

.cc-section .wp-block-button.is-style-action .wp-block-button__link:hover,
.cc-section .wp-block-button.is-style-action .wp-element-button:hover {
	background: var(--cc-color-action-deep);
}

/* Action outline — white bg + blue text + blue border. Pairs with Action.
 * Works on light AND brand-purple backgrounds (prototype uses identically
 * on both). */
.cc-section .wp-block-button.is-style-action-outline .wp-block-button__link,
.cc-section .wp-block-button.is-style-action-outline .wp-element-button {
	background: var(--cc-color-text-on-dark);
	color: var(--cc-color-action);
	box-shadow: inset 0 0 0 1.5px var(--cc-color-action);
}

.cc-section .wp-block-button.is-style-action-outline .wp-block-button__link:hover,
.cc-section .wp-block-button.is-style-action-outline .wp-element-button:hover {
	box-shadow: inset 0 0 0 2px var(--cc-color-action-deep);
	color: var(--cc-color-action-deep);
}

/* Brand — purple CTA. Reserved for special-context CTAs (e.g. Trust Center
 * button on the dark security strip). Standard CTAs should use Action. */
.cc-section .wp-block-button.is-style-brand .wp-block-button__link,
.cc-section .wp-block-button.is-style-brand .wp-element-button {
	background: var(--cc-color-brand-primary);
	color: var(--cc-color-text-on-dark);
}

.cc-section .wp-block-button.is-style-brand .wp-block-button__link:hover,
.cc-section .wp-block-button.is-style-brand .wp-element-button:hover {
	background: var(--cc-color-brand-primary-deep);
}

/* Outline — WP core's `is-style-outline`. GP's `a.wp-block-button__link:not(.has-background)`
 * default fills the button gray, so we set background:transparent at higher specificity
 * (0,3,1 vs GP's 0,2,1) to win the cascade. Used by the Free pricing tier CTA. */
.cc-section .wp-block-button.is-style-outline .wp-block-button__link,
.cc-section .wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--cc-color-text-heading);
	box-shadow: inset 0 0 0 1.5px var(--cc-color-border-subtle);
}

.cc-section .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cc-section .wp-block-button.is-style-outline .wp-element-button:hover {
	box-shadow: inset 0 0 0 2px var(--cc-color-text-heading);
	color: var(--cc-color-text-heading);
}

/* === Pattern: Hero — landing === */

.cc-hero-landing {
	padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.cc-hero-landing__h {
	max-width: 820px;
	margin-inline: auto;
	margin-bottom: var(--cc-space-5);
}

.cc-hero-landing__lead {
	max-width: 680px;
	margin-inline: auto;
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	color: var(--cc-color-text-muted);
	margin-bottom: var(--cc-space-8);
}

.cc-hero-landing__btns {
	gap: var(--cc-space-3);
	margin-bottom: var(--cc-space-3);
}

.cc-hero-landing__tertiary {
	margin: 0;
	font-size: var(--cc-type-small);
}

.cc-hero-landing__tertiary-link {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	color: var(--cc-color-text-muted);
	font-weight: var(--cc-fw-bold);
	padding: var(--cc-space-3) var(--cc-space-4);
	border-radius: var(--cc-radius-md);
}

.cc-hero-landing__tertiary-link:hover {
	color: var(--cc-color-brand-primary);
	opacity: 1;
}

/* === Pattern: CTA banner ===
 *
 * Default variant: light/transparent bg with dark text (matches prototype's
 * landing-preview.html final-CTA section — bg is transparent on white parent).
 *
 * Opt-in dark variant: add `cc-section--brand` to the section block to get
 * the purple gradient bg + light text — used on pages that want the bolder
 * end-of-page CTA.
 */

.cc-cta-banner {
	text-align: center;
}

.cc-cta-banner__h {
	color: var(--cc-color-text-heading);
	margin-bottom: var(--cc-space-4);
}

.cc-cta-banner__lead {
	color: var(--cc-color-text-muted);
	font-size: clamp(1rem, 1vw, 1.125rem);
	margin-bottom: var(--cc-space-8);
}

.cc-cta-banner.cc-section--brand .cc-cta-banner__h {
	color: var(--cc-color-text-on-dark);
}

.cc-cta-banner.cc-section--brand .cc-cta-banner__lead {
	color: var(--cc-color-text-on-dark);
	opacity: 0.9;
}

.cc-cta-banner__btns {
	gap: var(--cc-space-3);
	justify-content: center;
}

/* === HystModal — minor layout helper (CSS lives in WPCode snippet 2136) === */

.hystmodal video {
	display: block;
	border-radius: var(--cc-radius-md);
}

/* === Pattern: Logo ticker (CSS-only marquee) === */

.cc-ticker-section {
	padding-block: var(--cc-space-12);
	overflow: hidden;
}

.cc-ticker {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.cc-ticker__track {
	display: flex;
	gap: var(--cc-space-12);
	width: max-content;
	animation: cc-ticker-scroll 28s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.cc-ticker__track {
		animation: none;
	}
}

.cc-ticker__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	height: 48px;
}

.cc-ticker__item img {
	max-height: 32px;
	width: auto;
	opacity: 0.7;
	filter: grayscale(100%);
	transition: opacity var(--cc-duration-base) var(--cc-easing-standard);
}

.cc-ticker__item img:hover {
	opacity: 1;
}

/* === Pattern: Testimonials (Glide) === */

.cc-testimonials__h {
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: var(--cc-space-12);
}

.cc-testimonials__glide {
	max-width: 800px;
	margin-inline: auto;
}

.cc-testimonial {
	background: var(--cc-color-bg-section);
	border: 1px solid var(--cc-color-border-subtle);
	border-radius: var(--cc-radius-lg);
	padding: var(--cc-space-8);
	margin: 0;
	height: 100%;
	box-shadow: var(--cc-shadow-sm);
}

.cc-testimonial__quote {
	font-size: var(--cc-type-h4);
	font-weight: var(--cc-fw-medium);
	line-height: var(--cc-lh-snug);
	color: var(--cc-color-text-heading);
	margin-bottom: var(--cc-space-6);
}

.cc-testimonial__author {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-1);
	font-size: var(--cc-type-small);
}

.cc-testimonial__author strong {
	color: var(--cc-color-text-heading);
	font-weight: var(--cc-fw-semibold);
}

.cc-testimonial__author span {
	color: var(--cc-color-text-muted);
}

/* === Pattern: Pricing tiers ===
 *
 * Per prototype pricing-preview.html: 3 cards in a 1100px max-width row,
 * cards ~351px wide, ~493px tall. Default WP `is-layout-constrained > *`
 * clips the grid to the theme's 820px content-size, squeezing each card to
 * ~257px wide, which forces content to wrap and inflates card height by
 * ~270px. The override below puts the grid at 1100px so cards breathe to
 * the prototype's intended size.
 */

.cc-pricing.is-layout-constrained > .cc-pricing__grid,
.cc-pricing__grid {
	max-width: 1100px;
	width: 100%;
	margin-inline: auto;
	gap: var(--cc-space-5);
	margin-top: var(--cc-space-8);
}

/* Each tier card. Per-tier color stripe at top, native flex column layout.
 * Padding + gap tightened from 40/32 + 24px to 32/28 + 16px to match the
 * prototype's tighter card spacing. */
.cc-pricing__card {
	position: relative;
	background: var(--cc-color-bg-section);
	border: 1px solid var(--cc-color-border-subtle);
	border-radius: var(--cc-radius-lg);
	padding: var(--cc-space-8) var(--cc-space-7) var(--cc-space-6);
	gap: var(--cc-space-3);
	scroll-margin-top: 96px;
	display: flex !important;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* 4px color stripe at top of each card. */
.cc-pricing__card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: #A1A1AA; /* free tier default */
}

.cc-pricing__card--pro::before {
	background: linear-gradient(90deg, var(--cc-color-brand-primary), var(--cc-color-brand-primary-deep));
}

.cc-pricing__card--ent::before {
	background: linear-gradient(90deg, var(--cc-color-action), #0891B2);
}

.cc-pricing__card .wp-block-buttons {
	margin-top: auto;
}

.cc-pricing__card--featured {
	border: 2px solid var(--cc-color-brand-primary);
	box-shadow: var(--cc-shadow-lg);
}

/* Pro tier head: name + badge inline. */
.cc-pricing__head {
	margin-bottom: var(--cc-space-4);
	gap: var(--cc-space-3);
}

.cc-pricing__head .cc-pricing__name {
	margin: 0;
}

.cc-pricing__badge {
	background: var(--cc-color-brand-primary-fade);
	color: var(--cc-color-brand-primary);
	font-weight: var(--cc-fw-bold);
	letter-spacing: var(--cc-ls-eyebrow);
	text-transform: uppercase;
	padding: var(--cc-space-1) var(--cc-space-3);
	border-radius: var(--cc-radius-pill);
	margin: 0;
	width: max-content;
	white-space: nowrap;
}

.cc-pricing__name {
	font-size: var(--cc-type-h4);
	font-weight: var(--cc-fw-black);
	letter-spacing: -0.02em;
	margin: 0 0 var(--cc-space-4);
}

.cc-pricing__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
	font-size: var(--cc-type-small);
	line-height: 1;
}

.cc-pricing__amt {
	font-size: clamp(2.5rem, 5vw, 3rem);
	font-weight: var(--cc-fw-black);
	color: var(--cc-color-text-heading);
	letter-spacing: -0.03em;
	line-height: 1;
}

.cc-pricing__card--pro .cc-pricing__amt {
	color: var(--cc-color-brand-primary);
}

.cc-pricing__per {
	font-size: var(--cc-type-small);
	color: var(--cc-color-text-muted);
	line-height: 1.4;
}

.cc-pricing__lead,
.cc-pricing__caption {
	font-size: var(--cc-type-small);
	color: var(--cc-color-text-muted);
	margin: 0 0 var(--cc-space-6);
}

.cc-pricing__card--ent .cc-pricing__caption {
	color: var(--cc-color-action);
	font-weight: var(--cc-fw-bold);
	font-size: 1.125rem;
}

.cc-pricing__features-intro {
	font-size: var(--cc-type-small);
	font-weight: var(--cc-fw-bold);
	color: var(--cc-color-text-heading);
	margin: 0 0 var(--cc-space-4);
	padding-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border-subtle);
}

.cc-pricing__features {
	list-style: none !important;
	margin: 0 0 var(--cc-space-8);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
}

/* Free tier features sit directly under the lead — add a top divider too. */
.cc-pricing__card--free .cc-pricing__features {
	padding-top: var(--cc-space-5);
	border-top: 1px solid var(--cc-color-border-subtle);
}

.cc-pricing__features li {
	font-size: var(--cc-type-small);
	color: var(--cc-color-text-primary);
	padding-left: var(--cc-space-6);
	position: relative;
}

.cc-pricing__features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

.cc-pricing__card--pro .cc-pricing__features li::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.cc-pricing__card--ent .cc-pricing__features li::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072BA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* === Pattern: How it works === */

.cc-how__h {
	max-width: 820px;
	margin-inline: auto;
	margin-bottom: var(--cc-space-12);
}

.cc-how__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cc-space-10);
}

@media (min-width: 900px) {
	.cc-how__cols {
		grid-template-columns: 1fr 1fr;
		gap: var(--cc-space-12);
	}
}

.cc-how__col {
	background: var(--cc-color-bg-section);
	border: 1px solid var(--cc-color-border-subtle);
	border-radius: var(--cc-radius-lg);
	padding: var(--cc-space-8);
}

.cc-how__col-eyebrow {
	display: block;
	font-size: var(--cc-type-eyebrow);
	font-weight: var(--cc-fw-semibold);
	letter-spacing: var(--cc-ls-eyebrow);
	text-transform: uppercase;
	color: var(--cc-color-brand-primary);
	margin-bottom: var(--cc-space-2);
}

.cc-how__col-h {
	font-size: var(--cc-type-h4);
	font-weight: var(--cc-fw-bold);
	margin: 0 0 var(--cc-space-6);
	color: var(--cc-color-text-heading);
}

.cc-how__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: how-step;
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-5);
}

.cc-how__steps li {
	counter-increment: how-step;
	padding-left: var(--cc-space-10);
	position: relative;
}

.cc-how__steps li::before {
	content: counter(how-step);
	position: absolute;
	left: 0;
	top: 0;
	width: var(--cc-space-8);
	height: var(--cc-space-8);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cc-color-brand-primary-tint);
	color: var(--cc-color-brand-primary);
	border-radius: var(--cc-radius-pill);
	font-weight: var(--cc-fw-bold);
	font-size: var(--cc-type-small);
}

.cc-how__steps strong {
	display: block;
	font-weight: var(--cc-fw-semibold);
	color: var(--cc-color-text-heading);
	margin-bottom: var(--cc-space-1);
}

.cc-how__steps p {
	margin: 0;
	color: var(--cc-color-text-muted);
	font-size: var(--cc-type-small);
}

/* === Pattern: FAQ accordion (core/details based) === */

.cc-faq__h {
	margin-bottom: var(--cc-space-10);
}

.cc-faq__list {
	gap: 0 !important;
}

.cc-faq__item {
	border-top: 1px solid var(--cc-color-border-subtle);
	padding-block: var(--cc-space-2);
}

.cc-faq__item:last-child {
	border-bottom: 1px solid var(--cc-color-border-subtle);
}

.cc-faq__q {
	padding: var(--cc-space-4) 0;
	font-weight: var(--cc-fw-semibold);
	color: var(--cc-color-text-heading);
	font-size: var(--cc-type-h5);
	cursor: pointer;
	list-style: none;
}

.cc-faq__q::-webkit-details-marker {
	display: none;
}

/* Custom chevron via ::after — replaces the previous inline SVG */
.cc-faq__q::after {
	content: '';
	float: right;
	width: 12px;
	height: 12px;
	margin-top: 0.45em;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform var(--cc-duration-base) var(--cc-easing-standard);
}

.cc-faq__item[open] .cc-faq__q::after {
	transform: rotate(180deg);
}

.cc-faq__a {
	padding: 0 0 var(--cc-space-4);
	color: var(--cc-color-text-muted);
	max-width: 60ch;
	margin: 0;
}