/* =========================================================
   Codecraft Technologies — Design System
   assets/css/main.css
   Reset, tokens, typography, layout primitives, accessibility.
   ========================================================= */

/* -- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -- Design tokens ------------------------------------------ */
:root {
	--cc-orange: #ff8119;
	--cc-orange-dark: #d95f00;
	--cc-orange-light: #fff0e3;

	--cc-black: #000000;
	--cc-heading: #101418;
	--cc-charcoal: #20272e;
	--cc-body: #4d5964;

	--cc-white: #ffffff;
	--cc-background: #f6fbfd;
	--cc-background-alt: #eef5f7;
	--cc-surface: #ffffff;
	--cc-border: #dce5e8;

	--cc-dark: #10171d;
	--cc-dark-alt: #182128;
	--cc-dark-text: #edf4f6;

	--cc-success: #16784b;
	--cc-warning: #a75d00;
	--cc-error: #b42318;

	--cc-font-heading: 'Sora', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--cc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--cc-hero-size: clamp(3rem, 7vw, 6.5rem);
	--cc-h1-size: clamp(2.6rem, 5vw, 4.8rem);
	--cc-h2-size: clamp(2rem, 4vw, 3.5rem);
	--cc-h3-size: clamp(1.4rem, 2.4vw, 2rem);
	--cc-body-large: 1.125rem;
	--cc-body-size: 1rem;
	--cc-small-size: 0.875rem;

	--cc-radius-sm: 6px;
	--cc-radius-md: 12px;
	--cc-radius-lg: 20px;

	--cc-shadow-sm: 0 1px 2px rgba(16, 20, 24, 0.06);
	--cc-shadow-md: 0 8px 24px rgba(16, 20, 24, 0.08);
	--cc-shadow-lg: 0 24px 64px rgba(16, 20, 24, 0.14);

	--cc-container: 1280px;
	--cc-container-narrow: 760px;
	--cc-gutter: clamp(1.25rem, 4vw, 3rem);
	--cc-section-space: clamp(4rem, 9vw, 8rem);

	--cc-header-height: 84px;
	--cc-focus-ring: 0 0 0 3px rgba(255, 129, 25, 0.45);
}

/* -- Base ----------------------------------------------------- */
body {
	background: var(--cc-background);
	color: var(--cc-body);
	font-family: var(--cc-font-body);
	font-size: var(--cc-body-size);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--cc-font-heading);
	color: var(--cc-heading);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1 { font-size: var(--cc-h1-size); }
h2 { font-size: var(--cc-h2-size); }
h3 { font-size: var(--cc-h3-size); }
h4 { font-size: 1.25rem; }

p { max-width: 62ch; }
p.cc-no-measure { max-width: none; }

a {
	transition: color 0.15s ease;
}

.cc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--cc-font-mono);
	font-size: var(--cc-small-size);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--cc-orange-dark);
	font-weight: 500;
}

.cc-eyebrow--muted { color: var(--cc-body); }
.cc-eyebrow--muted::before { background: var(--cc-border); }

.cc-eyebrow::before {
	content: '';
	width: 20px;
	height: 2px;
	background: var(--cc-orange);
	display: inline-block;
}

/* -- Skip link / focus ------------------------------------- */
.cc-skip-link {
	position: absolute;
	left: 1rem;
	top: -60px;
	z-index: 10000;
	background: var(--cc-heading);
	color: var(--cc-white);
	padding: 0.85rem 1.25rem;
	border-radius: var(--cc-radius-sm);
	font-weight: 600;
	transition: top 0.2s ease;
}
.cc-skip-link:focus {
	top: 1rem;
}

:focus-visible {
	outline: none;
	box-shadow: var(--cc-focus-ring);
	border-radius: var(--cc-radius-sm);
}
a:focus-visible, button:focus-visible {
	outline: 2px solid transparent;
}

/* -- Layout primitives --------------------------------------- */
.cc-container {
	width: 100%;
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

.cc-container--narrow {
	max-width: var(--cc-container-narrow);
}

.cc-section {
	padding-block: var(--cc-section-space);
}

.cc-section--tight {
	padding-block: calc(var(--cc-section-space) * 0.6);
}

.cc-section--alt {
	background: var(--cc-background-alt);
}

.cc-section--dark {
	background: var(--cc-dark);
	color: var(--cc-dark-text);
}
.cc-section--dark h1,
.cc-section--dark h2,
.cc-section--dark h3,
.cc-section--dark h4 {
	color: var(--cc-white);
}
.cc-section--dark .cc-eyebrow {
	color: var(--cc-orange);
}

.cc-section-head {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cc-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.cc-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.cc-section-cta { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

.cc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cc-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
	.cc-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.cc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.cc-grid--2, .cc-grid--3, .cc-grid--4 { grid-template-columns: 1fr; }
	:root { --cc-header-height: 72px; }
}

.cc-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cc-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.cc-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.cc-reveal { opacity: 1; transform: none; }
}

/* -- Generic content page ------------------------------------ */
.cc-page-header { margin-bottom: 2rem; }
.cc-page-thumbnail { margin-block: 2rem; border-radius: var(--cc-radius-lg); overflow: hidden; }
.cc-page-thumbnail img { width: 100%; }
.cc-content { max-width: var(--cc-container-narrow); }
.cc-content > * + * { margin-top: 1.25rem; }
.cc-content h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.cc-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.cc-content ul, .cc-content ol { padding-left: 1.4rem; list-style: disc; }
.cc-content ol { list-style: decimal; }
.cc-content a { color: var(--cc-orange-dark); text-decoration: underline; }
.cc-faq-item { padding-block: 1.5rem; border-top: 1px solid var(--cc-border); }
.cc-faq-item h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.cc-contact-form-wrap { margin-top: 3rem; max-width: 640px; }
.cc-testimonial { border-left: 3px solid var(--cc-orange); padding-left: 1.5rem; font-size: 1.2rem; font-family: var(--cc-font-heading); color: var(--cc-heading); }
.cc-testimonial cite { display: block; margin-top: 0.75rem; font-family: var(--cc-font-body); font-style: normal; font-size: 0.9rem; color: var(--cc-body); }

.cc-search-form { display: flex; gap: 0.75rem; margin-block: 1.5rem 2.5rem; max-width: 480px; }
.cc-404 { text-align: center; }
.cc-404 .cc-search-form { margin-inline: auto; }
.cc-404 .cc-feature-row__ctas { justify-content: center; }

.cc-comments { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--cc-border); max-width: var(--cc-container-narrow); }
.cc-comments__title { margin-bottom: 1.5rem; }
.cc-comments__list { display: grid; gap: 1.5rem; }
.cc-comments .comment-form input[type="text"],
.cc-comments .comment-form input[type="email"],
.cc-comments .comment-form input[type="url"],
.cc-comments .comment-form textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm); margin-bottom: 1rem; }

/* -- Body scroll lock (mobile drawer open) ------------------ */
body.cc-scroll-locked {
	overflow: hidden;
}