﻿/**
 * Spider Theme — Gutenberg block pattern styles (front end + editor).
 */

:root {
	--st-pattern-primary: var(--st-primary, #22c55e);
	--st-pattern-primary-hover: var(--st-primary-hover, #16a34a);
	--st-pattern-primary-soft: var(--st-primary-soft, rgba(34, 197, 94, 0.12));
	--st-pattern-heading: var(--st-heading, #0f172a);
	--st-pattern-text: var(--st-text, #334155);
	--st-pattern-muted: var(--st-muted, #64748b);
	--st-pattern-border: var(--st-border, #e5e7eb);
	--st-pattern-surface: #ffffff;
	--st-pattern-bg: var(--st-bg, #f8fafc);
	--st-pattern-radius: 14px;
	--st-pattern-radius-sm: 10px;
	--st-pattern-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
	--st-pattern-max: min(var(--st-container-width, 1280px), 100%);
}

/* Landing template canvas */
.site-main--landing {
	padding: 0;
	background: var(--st-pattern-bg);
}

.site-main--landing .st-landing-article,
.site-main--landing .st-pattern-root {
	margin: 0;
	padding: 0;
	max-width: none;
}

.site-main--landing .st-content-card,
.site-main--landing .entry-header {
	display: none;
}

.st-pattern-root > .st-pattern:first-child {
	margin-top: 0;
}

/* Shared pattern shell */
.st-pattern {
	color: var(--st-pattern-text);
}

.st-pattern__inner {
	max-width: var(--st-pattern-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.st-pattern-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--st-pattern-primary-soft);
	color: var(--st-pattern-primary-hover);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.st-pattern-badge--light {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* Hero */
.st-pattern-hero {
	padding: 48px 0 32px;
}

.st-pattern-hero--hire,
.st-pattern-hero--contact {
	text-align: center;
}

.st-pattern-hero--hire .st-pattern-badge,
.st-pattern-hero--contact .st-pattern-badge {
	margin-left: auto;
	margin-right: auto;
}

.st-pattern-hero__title,
.st-pattern-hero h1 {
	margin: 0 0 12px;
	color: var(--st-pattern-heading);
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.st-pattern-hero--hire h1,
.st-pattern-hero--contact h1 {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.st-pattern-hero__subtitle {
	margin: 0;
	max-width: 640px;
	color: var(--st-pattern-muted);
	font-size: clamp(16px, 2vw, 18px);
	line-height: 1.6;
}

.st-pattern-hero--hire .st-pattern-hero__subtitle,
.st-pattern-hero--contact .st-pattern-hero__subtitle {
	margin-left: auto;
	margin-right: auto;
}

.st-pattern-hero__cta-text {
	margin: 16px 0 0;
	color: var(--st-pattern-text);
	font-size: 15px;
}

/* Cards */
.st-card {
	margin: 0 0 16px;
	padding: 22px 24px;
	border: 1px solid var(--st-pattern-border);
	border-radius: var(--st-pattern-radius);
	background: var(--st-pattern-surface);
	box-shadow: var(--st-pattern-shadow);
}

.st-card h3,
.st-card h4 {
	margin: 0 0 12px;
	color: var(--st-pattern-heading);
}

.st-card p:last-child {
	margin-bottom: 0;
}

.st-card--form {
	padding: 28px;
}

.st-card--form .spider-theme-core-form {
	margin: 0;
}

.st-card--muted {
	background: var(--st-pattern-bg);
	box-shadow: none;
}

.st-card--budget {
	background: var(--st-pattern-primary-soft);
	border-color: rgba(34, 197, 94, 0.25);
}

.st-card--response {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.st-card__icon {
	margin: 0;
	font-size: 28px;
	line-height: 1;
}

.st-card__label {
	margin: 0 0 4px;
	color: var(--st-pattern-muted);
	font-size: 13px;
	font-weight: 600;
}

/* Trust / checklist */
.st-pattern-trust-stack {
	width: 100%;
	max-width: none;
}

.st-hire-layout__sidebar .st-pattern-trust-stack,
.st-contact-layout__sidebar {
	width: 100%;
	min-width: 0;
}

.st-card--trust {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 14px;
}

.st-card--trust__body {
	flex: 1 1 200px;
	min-width: 0;
}

.st-card--trust .st-elite-badge {
	margin-left: auto;
}

.st-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-checklist li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 26px;
	color: var(--st-pattern-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.st-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--st-pattern-primary);
	font-weight: 800;
}

.st-elite-badge {
	flex-shrink: 0;
	min-width: 88px;
	padding: 12px 10px;
	border-radius: 12px;
	background: linear-gradient(145deg, #22c55e, #16a34a);
	color: #fff;
	text-align: center;
	font-size: 12px;
	line-height: 1.35;
	box-shadow: 0 10px 24px rgba(34, 197, 94, 0.35);
}

.st-elite-badge p {
	margin: 0;
	color: #fff;
}

/* Services — 2-column grid (never use 6 WP columns in sidebar) */
.st-services-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

.st-services-list > .wp-block-paragraph,
.st-services-list p {
	margin: 0 !important;
	padding: 11px 12px !important;
	border: 1px solid var(--st-pattern-border);
	border-radius: var(--st-pattern-radius-sm);
	background: var(--st-pattern-bg);
	color: var(--st-pattern-text);
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.35 !important;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* Hire / contact layout (CSS grid — reliable in editor + front end) */
.st-pattern-main {
	padding: 8px 0 48px;
}

.st-hire-layout,
.st-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	gap: 32px;
	align-items: start;
	width: 100%;
}

.st-hire-layout__main,
.st-hire-layout__sidebar,
.st-contact-layout__main,
.st-contact-layout__sidebar {
	min-width: 0;
}

/* Legacy columns markup (older saved pages) */
.st-hire-grid.wp-block-columns,
.st-contact-grid.wp-block-columns {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
	gap: 32px !important;
	align-items: start !important;
}

.st-hire-grid > .wp-block-column,
.st-contact-grid > .wp-block-column {
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex-basis: auto !important;
}

.st-hire-grid__sidebar .wp-block-columns:not(.st-hire-grid):not(.st-contact-grid),
.st-card--services .wp-block-columns,
.st-hire-grid__sidebar .st-services-grid.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

.st-hire-grid__sidebar .wp-block-columns:not(.st-hire-grid):not(.st-contact-grid) > .wp-block-column,
.st-card--services .wp-block-columns > .wp-block-column,
.st-hire-grid__sidebar .st-services-grid > .wp-block-column {
	width: auto !important;
	max-width: none !important;
	flex-basis: auto !important;
}

.st-hire-grid__sidebar .st-services-grid p,
.st-card--services .wp-block-columns p {
	margin: 0 !important;
	padding: 11px 12px !important;
	border: 1px solid var(--st-pattern-border);
	border-radius: var(--st-pattern-radius-sm);
	background: var(--st-pattern-bg);
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.35 !important;
}

/* Process steps */
.st-pattern-process {
	padding: 56px 0;
	background: var(--st-pattern-surface);
}

.st-pattern-process h2 {
	margin: 0 0 28px;
}

.st-process-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.st-process-steps.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 20px !important;
}

.st-process-steps > .wp-block-column {
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex-basis: auto !important;
}

.st-process-step {
	padding: 22px 18px;
	border: 1px solid var(--st-pattern-border);
	border-radius: var(--st-pattern-radius);
	background: var(--st-pattern-bg);
	text-align: center;
	height: 100%;
	box-sizing: border-box;
}

.st-process-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 auto 12px !important;
	border-radius: 50%;
	background: var(--st-pattern-primary);
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 800;
	line-height: 1;
}

.st-process-step h4 {
	margin: 0 0 8px;
	font-size: 16px;
}

.st-process-step p {
	margin: 0;
	color: var(--st-pattern-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* FAQ */
.st-pattern-faq {
	padding: 40px 0 16px;
}

.st-pattern-faq h2 {
	margin: 0 0 18px;
}

.st-faq-item {
	margin: 0 0 10px;
	padding: 14px 18px;
	border: 1px solid var(--st-pattern-border);
	border-radius: var(--st-pattern-radius-sm);
	background: var(--st-pattern-surface);
}

.st-faq-item summary {
	cursor: pointer;
	color: var(--st-pattern-heading);
	font-weight: 700;
	font-size: 15px;
}

.st-faq-item[open] summary {
	margin-bottom: 10px;
	color: var(--st-pattern-primary-hover);
}

.st-faq-item p {
	margin: 0;
	color: var(--st-pattern-muted);
	font-size: 14px;
	line-height: 1.6;
}

.st-faq-link {
	margin: 14px 0 0;
}

.st-faq-link a {
	color: var(--st-pattern-primary);
	font-weight: 700;
	text-decoration: none;
}

/* CTA */
.st-pattern-cta {
	padding: 48px 0 64px;
}

.st-pattern-cta__box {
	padding: 40px 32px;
	border-radius: calc(var(--st-pattern-radius) + 4px);
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #e2e8f0;
	text-align: center;
	box-shadow: var(--st-pattern-shadow);
}

.st-pattern-cta__box h2 {
	margin: 0 0 10px;
	color: #fff;
}

.st-pattern-cta__box p {
	margin: 0 0 20px;
	color: rgba(226, 232, 240, 0.88);
}

.st-pattern-cta .wp-block-button__link {
	padding: 12px 28px;
	border-radius: 10px;
	background: var(--st-pattern-primary);
	color: #fff;
	font-weight: 700;
}

.st-pattern-cta .wp-block-button__link:hover {
	background: var(--st-pattern-primary-hover);
	color: #fff;
}

/* Free files banner */
.st-pattern-free-files {
	padding: 28px 0;
	background: var(--st-pattern-primary-soft);
}

.st-free-files__inner {
	max-width: var(--st-pattern-max);
	margin: 0 auto;
	padding: 24px;
	border: 1px solid rgba(34, 197, 94, 0.22);
	border-radius: var(--st-pattern-radius);
	background: var(--st-pattern-surface);
	align-items: center;
	gap: 20px;
}

/* Spider Theme Core plugin forms inside patterns */
.st-card--form .spider-theme-core-form label {
	display: block;
	margin: 0 0 14px;
	color: var(--st-pattern-heading);
	font-size: 14px;
	font-weight: 600;
}

.st-card--form .spider-theme-core-form input[type="text"],
.st-card--form .spider-theme-core-form input[type="email"],
.st-card--form .spider-theme-core-form input[type="url"],
.st-card--form .spider-theme-core-form input[type="file"],
.st-card--form .spider-theme-core-form select,
.st-card--form .spider-theme-core-form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 11px 14px;
	border: 1px solid var(--st-pattern-border);
	border-radius: var(--st-pattern-radius-sm);
	background: #fff;
	color: var(--st-pattern-text);
	font-size: 14px;
}

.st-card--form .spider-theme-core-form textarea {
	min-height: 140px;
}

.st-card--form .spider-theme-core-form button[type="submit"] {
	width: 100%;
	margin-top: 8px;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--st-pattern-radius-sm);
	background: var(--st-pattern-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.st-card--form .spider-theme-core-form button[type="submit"]:hover {
	background: var(--st-pattern-primary-hover);
}

/* Editor parity */
.editor-styles-wrapper .st-pattern-page,
.editor-styles-wrapper .st-pattern-root {
	max-width: none;
}

.editor-styles-wrapper .st-pattern__inner {
	max-width: var(--st-pattern-max);
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper .st-hire-layout,
.editor-styles-wrapper .st-contact-layout {
	grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}

.editor-styles-wrapper .st-checklist li {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.editor-styles-wrapper .st-card--form .spider-theme-core-form {
	pointer-events: none;
}

@media (max-width: 1024px) {
	.st-hire-layout,
	.st-contact-layout,
	.st-hire-grid.wp-block-columns,
	.st-contact-grid.wp-block-columns {
		grid-template-columns: 1fr !important;
	}

	.st-process-grid,
	.st-process-steps.wp-block-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.st-card--trust .st-elite-badge {
		margin-left: 0;
	}

	.st-services-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.st-free-files__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.st-process-grid,
	.st-process-steps.wp-block-columns {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 560px) {
	.st-services-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.st-pattern-hero {
		padding-top: 32px;
	}

	.st-card--form {
		padding: 20px;
	}

	.st-pattern-cta__box {
		padding: 28px 20px;
	}
}
