/* =====================================================
   Wygard — main stylesheet
   Structure:
     1. Tokens (custom properties)
     2. Reset / base
     3. Layout (container)
     4. Typography
     5. Components (buttons, icons, lists, cards)
     6. Site header + footer
     7. Homepage sections
     8. Responsive
   ===================================================== */


/* 1. TOKENS ============================================= */
:root {
	/* Brand */
	--color-black:          #101010;
	--color-white:          #FFFFFF;
	--color-green:          #44D373;
	--color-green-soft:     rgba(68, 211, 115, 0.15);
	--color-green-tint:     rgba(68, 211, 115, 0.08);

	/* Text */
	--color-text:           #101010;
	--color-text-secondary: #5B5757;
	--color-text-muted:     #5F6368;
	--color-text-subtle:    #747272;

	/* Surfaces */
	--color-bg:             #FFFFFF;
	--color-bg-alt:         #F5F4F7;
	--color-bg-alt-2:       #ECEBF1;
	--color-border:         #D9D9D9;

	/* Effects */
	--shadow-card:          0 4px 32px rgba(69, 69, 69, 0.12);

	/* Radii */
	--radius-md:    16px;
	--radius-lg:    24px;
	--radius-xl:    32px;
	--radius-2xl:   40px;
	--radius-3xl:   60px;
	--radius-full:  999px;

	/* Typography */
	--font-family:  "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Font sizes */
	--fs-xs:   12px;
	--fs-sm:   14px;
	--fs-base: 16px;
	--fs-lg:   18px;
	--fs-xl:   20px;
	--fs-2xl:  24px;
	--fs-3xl:  32px;
	--fs-4xl:  48px;
	--fs-5xl:  56px;
	--fs-6xl:  72px;

	/* Spacing */
	--space-4:   4px;
	--space-8:   8px;
	--space-12:  12px;
	--space-16:  16px;
	--space-24:  24px;
	--space-32:  32px;
	--space-40:  40px;
	--space-48:  48px;
	--space-56:  56px;
	--space-64:  64px;
	--space-80:  80px;
	--space-96:  96px;
	--space-120: 120px;

	/* Layout */
	--container-max: 1360px;
	--container-pad: 40px;

	/* Transitions */
	--trans-fast: 150ms ease;
	--trans-med:  200ms ease;
}


/* 2. RESET / BASE ====================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-family);
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--trans-fast); }
a:hover { color: var(--color-green); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: 0; }

.skip-link,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	padding: 12px 16px;
	background: var(--color-black); color: var(--color-white);
	border-radius: var(--radius-md);
	z-index: 1000;
}


/* 3. LAYOUT ============================================= */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + var(--container-pad) * 2);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}


/* 4. TYPOGRAPHY ======================================== */
.accent-green { color: var(--color-green); }


/* 5. COMPONENTS ======================================== */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-family: var(--font-family);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.26;
	border: 2px solid transparent;
	border-radius: var(--radius-2xl);
	cursor: pointer;
	transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
	white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--color-green);
	color: var(--color-black);
	border-color: var(--color-green);
}
.btn--primary:hover {
	background: #3BC266;
	border-color: #3BC266;
	color: var(--color-black);
}

.btn--outlined {
	background: transparent;
	color: var(--color-black);
	border-color: var(--color-black);
}
.btn--outlined:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.btn--lg { padding: 18px 40px; font-size: var(--fs-lg); }
.btn--full { width: 100%; }


/* Icons */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
svg { display: inline-block; vertical-align: middle; }


/* Check list */
.check-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.check-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-text);
	font-size: var(--fs-base);
}
.check-list__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	flex-shrink: 0;
	background: var(--color-green);
	color: var(--color-white);
	border-radius: var(--radius-full);
}
.check-list__mark svg { width: 16px; height: 16px; }


/* Prose lists (article body) — re-enable list markers that the global reset on line 105 strips, scoped to WP/Kadence content wrapper */
.entry-content ol,
.entry-content ul {
	margin: 0 0 var(--space-16);
	padding-left: 28px;
	color: var(--color-text);
	font-size: var(--fs-base);
	line-height: 1.5;
}
.entry-content ol { list-style: decimal outside; }
.entry-content ul { list-style: disc outside; }
.entry-content li { margin: 0 0 var(--space-8); padding-left: 4px; }
.entry-content li:last-child { margin-bottom: 0; }
.entry-content li::marker { color: var(--color-green); font-weight: 600; }
.entry-content ol ol,
.entry-content ul ul,
.entry-content ol ul,
.entry-content ul ol { margin: var(--space-8) 0 0; }
.entry-content ol ol { list-style-type: lower-alpha; }
.entry-content ol ol ol { list-style-type: lower-roman; }


/* Callouts (floating on hero screenshot) */
.callout {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px 16px 20px;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	max-width: 280px;
}
.callout p {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-text);
}
.callout__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	flex-shrink: 0;
	background: var(--color-green);
	color: var(--color-white);
	border-radius: var(--radius-full);
}
.callout__check svg { width: 16px; height: 16px; }


/* Feature cards */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}
.feature-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 32px 24px;
	transition: transform var(--trans-med), box-shadow var(--trans-med);
}
.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}
.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	background: var(--color-green);
	color: var(--color-white);
	border-radius: var(--radius-full);
	margin-bottom: 20px;
}
.feature-card__icon svg { width: 24px; height: 24px; }
.feature-card__title {
	font-size: var(--fs-xl);
	font-weight: 600;
	margin-bottom: 8px;
}
.feature-card__text {
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: 16px;
}
.feature-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--color-black);
}
.feature-card__link svg { width: 16px; height: 16px; transition: transform var(--trans-fast); }
.feature-card__link:hover svg { transform: translateX(4px); }


/* Blobs (legacy soft blur — kept for We spot + bottom CTA sections) */
.blob {
	position: absolute;
	background: var(--color-green-soft);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(40px);
}
.blob--left        { left: -120px; top: 50%;   width: 320px; height: 320px; transform: translateY(-50%); }
.blob--bottom-left { left: -80px;  bottom: 0;  width: 260px; height: 260px; }

/* Decor: hard-edged brand SVG decorations from Figma */
.decor {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

/* Logo-shape — right side of hero, below the screenshot */
.decor--hero-logo {
	right: -40px;
	top: 55%;
	width: 480px;
	height: auto;
	max-width: 42%;
	transform: rotate(8deg);
}

/* Green check — left side of Case studies, diagonal */
.decor--check {
	left: 40px;
	top: 10%;
	width: 116px;
	height: auto;
	transform: rotate(35deg);
	filter: drop-shadow(0 8px 24px rgba(68, 211, 115, 0.25));
}


/* 6. SITE HEADER + FOOTER ============================== */

/* Header */
.site-header {
	position: sticky;
	top: 0;
	background: var(--color-white);
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: border-color var(--trans-fast);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.site-header__logo svg { height: 32px; width: auto; }
.site-header__nav { flex: 1; }
.site-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
}
.site-nav a {
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--color-text);
	padding: 8px 0;
}
.site-nav a:hover { color: var(--color-green); }
.site-header__cta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.site-header__cta .btn { padding: 10px 20px; font-size: var(--fs-base); }

/* Mobile menu button (hidden on desktop; overrides Kadence button defaults with !important) */
.site-header__menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	margin-left: auto; /* push to right edge on mobile */
	padding: 8px 14px !important;
	background: transparent !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: none !important;
	color: var(--color-black) !important;
	font-family: var(--font-family);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background var(--trans-fast), border-color var(--trans-fast);
}
.site-header__menu-toggle:hover {
	background: var(--color-bg-alt) !important;
	border-color: var(--color-black) !important;
}
.site-header__menu-toggle .icon { width: 20px; height: 20px; }
.site-header__menu-toggle .icon--close { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
.site-header__menu-toggle[aria-expanded="true"] .icon--close { display: inline-block; }
.site-header__menu-label { letter-spacing: 0.01em; }

.site-header__mobile {
	padding: 20px var(--container-pad) 32px;
	border-top: 1px solid var(--color-border);
	background: var(--color-white);
}
.site-nav--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin-bottom: 24px;
}
.site-nav--mobile a {
	display: block;
	padding: 14px 0;
	font-size: var(--fs-lg);
	font-weight: 500;
	border-bottom: 1px solid var(--color-border);
}
.site-header__mobile-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}


/* Footer */
.site-footer {
	margin-top: 80px;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	padding-top: 64px;
	padding-bottom: 0;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
}
.site-footer__logo svg { height: 36px; width: auto; margin-bottom: 16px; }
.site-footer__tagline {
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	max-width: 320px;
	line-height: 1.5;
}
.site-footer__heading {
	font-size: var(--fs-base);
	font-weight: 500;
	margin-bottom: 20px;
	color: var(--color-black);
}
.site-footer__list { display: flex; flex-direction: column; gap: 12px; }
.site-footer__list a {
	color: var(--color-text-secondary);
	font-size: var(--fs-base);
}
.site-footer__list a:hover { color: var(--color-green); }

.site-footer__bottom {
	border-top: 1px solid var(--color-border);
	padding: 24px 0;
}
.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.site-footer__copyright {
	font-size: var(--fs-sm);
	color: var(--color-text-subtle);
}
.site-footer__legal {
	display: flex;
	gap: 24px;
}
.site-footer__legal a {
	font-size: var(--fs-sm);
	color: var(--color-text-subtle);
}


/* 7. HOMEPAGE SECTIONS ================================= */

.site-main { overflow: hidden; /* prevent blob overflow */ }

/* Hero */
.hero {
	position: relative;
	padding-top: 80px;
	padding-bottom: 120px;
}
.hero__inner {
	position: relative;
	text-align: center;
	z-index: 1;
}
.hero__title {
	font-size: var(--fs-6xl);
	line-height: 1.26;
	font-weight: 600;
	max-width: 900px;
	margin: 0 auto 24px;
}
.hero__lead {
	font-size: var(--fs-xl);
	line-height: 1.5;
	color: var(--color-text-secondary);
	max-width: 640px;
	margin: 0 auto 40px;
}
.hero__visual {
	position: relative;
	margin-top: 64px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.hero__screenshot {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}
.callout--top-right    { right: -40px;  top: 10%;  }
.callout--middle-right { right: -20px;  top: 40%; }
.callout--bottom-right { right: -40px;  top: 70%; }


/* Generic split section (text + image) */
.section { position: relative; padding: 80px 0; }
.section--split .section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.section--reverse .section__grid > .section__visual { order: 1; }
.section--reverse .section__grid > .section__text   { order: 2; }
.section__title {
	font-size: var(--fs-4xl);
	font-weight: 600;
	line-height: 1.26;
	margin-bottom: 16px;
}
.section__title--xl {
	font-size: var(--fs-5xl);
}
.section__lead {
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--color-text-secondary);
	max-width: 560px;
}
.section__lead--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__header { margin-bottom: 40px; }
.section__header--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section__footer { margin-top: 40px; }
.section__footer--center { display: flex; justify-content: center; }
.section__visual img {
	width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}
.section__visual--center {
	max-width: 1000px;
	margin: 48px auto 0;
}


/* Features section */
.section--features {
	background: var(--color-bg-alt);
	padding: 96px 0;
}


/* Why Wygard */
.section--why {
	padding: 96px 0;
}
.section__grid--why {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: start;
}
.why__tagline {
	font-size: var(--fs-2xl);
	line-height: 1.5;
	color: var(--color-text);
	margin-top: 24px;
	font-weight: 400;
}
.why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
.why-item__title {
	font-size: var(--fs-2xl);
	font-weight: 600;
	margin-bottom: 8px;
}
.why-item p {
	color: var(--color-text-secondary);
	font-size: var(--fs-base);
	line-height: 1.5;
}


/* Portfolio section */
.section--portfolio {
	background: var(--color-bg-alt);
	padding: 96px 0;
}


/* Testimonial */
.section--testimonial { padding: 96px 0; }
.testimonial-wrap {
	display: flex;
	align-items: center;
	gap: 32px;
	justify-content: center;
}
.testimonial-nav {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.testimonial-nav:hover:not(:disabled) {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}
.testimonial-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.testimonial-nav svg { width: 20px; height: 20px; }
.testimonial {
	max-width: 720px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 48px;
	text-align: center;
	box-shadow: var(--shadow-card);
	margin: 0;
}
.testimonial__logo {
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-bottom: 24px;
	letter-spacing: 0.02em;
}
.testimonial__quote {
	font-size: var(--fs-2xl);
	font-weight: 500;
	line-height: 1.42;
	margin: 0 0 24px;
	color: var(--color-text);
}
.testimonial__author { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.testimonial__name {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--color-text);
}
.testimonial__role {
	font-size: var(--fs-xs);
	color: var(--color-text-subtle);
}


/* Case studies */
.section--case-studies { padding: 96px 0; }
.case-studies {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.case-studies__visual img {
	width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}
.case-studies__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	background: var(--color-green);
	color: var(--color-white);
	border-radius: var(--radius-full);
	margin-bottom: 20px;
}
.case-studies__icon svg { width: 24px; height: 24px; }
.case-studies__text .btn { margin-top: 24px; }


/* Bottom CTA */
.section--bottom-cta {
	padding: 96px 0 120px;
	position: relative;
}
.bottom-cta {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}
.bottom-cta__visual img {
	width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	margin-bottom: 48px;
}
.bottom-cta__title {
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: 1.26;
	max-width: 800px;
	margin: 0 auto;
}


/* 8. RESPONSIVE ======================================== */

/* Tablet — <= 1024px */
@media (max-width: 1024px) {
	.decor--hero-logo { max-width: 32%; right: -20px; top: 60%; }
	.decor--check { width: 88px; top: 5%; left: 24px; }
	:root { --container-pad: 24px; }

	.hero { padding-top: 48px; padding-bottom: 64px; }
	.hero__title { font-size: 56px; }
	.hero__lead { font-size: var(--fs-lg); }

	.section { padding: 64px 0; }
	.section--features,
	.section--why,
	.section--portfolio,
	.section--testimonial,
	.section--case-studies,
	.section--bottom-cta { padding: 64px 0; }

	.section--split .section__grid,
	.section__grid--why,
	.case-studies {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.section--reverse .section__grid > .section__visual { order: 2; }
	.section--reverse .section__grid > .section__text   { order: 1; }

	.section__title { font-size: var(--fs-3xl); }
	.section__title--xl { font-size: var(--fs-4xl); }

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

	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.callout { max-width: 220px; }
	.callout p { font-size: var(--fs-xs); }
}


/* Mobile — <= 640px */
@media (max-width: 640px) {
	/* Decor: hide hero logo (too tight), shrink check */
	.decor--hero-logo { display: none; }
	.decor--check { width: 64px; top: 2%; left: 12px; }
	:root { --container-pad: 20px; }

	body { font-size: var(--fs-base); }

	.hero { padding-top: 32px; padding-bottom: 48px; }
	.hero__title { font-size: 36px; line-height: 1.2; }
	.hero__lead { font-size: var(--fs-base); margin-bottom: 32px; }
	.hero__visual { margin-top: 40px; }

	/* Hide floating callouts on mobile (they can't fit nicely) */
	.callout { display: none; }

	.section { padding: 48px 0; }
	.section__title { font-size: var(--fs-3xl); line-height: 1.2; }
	.section__title--xl { font-size: var(--fs-3xl); }
	.section__lead { font-size: var(--fs-base); }

	.feature-grid { grid-template-columns: 1fr; }
	.feature-card { padding: 24px 20px; }

	.why__tagline { font-size: var(--fs-lg); }
	.why-item__title { font-size: var(--fs-xl); }

	.testimonial { padding: 32px 24px; }
	.testimonial__quote { font-size: var(--fs-lg); }
	.testimonial-nav { width: 44px; height: 44px; }
	.testimonial-wrap { gap: 8px; }

	.bottom-cta__title { font-size: var(--fs-2xl); }

	/* Header: hide desktop nav + CTA; show menu toggle */
	.site-header__inner { gap: 16px; }
	.site-header__nav,
	.site-header__cta { display: none; }
	.site-header__menu-toggle { display: inline-flex; }
	.site-header__logo svg { height: 28px; }
	.site-header__nav { flex: 0; }

	/* When mobile menu open, show the panel */
	.site-header__mobile[hidden] { display: none; }
	.site-header__mobile:not([hidden]) { display: block; }

	/* Footer: stack */
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}