/**
 * jacket-onepage.css
 * Jacket Software — Enhanced One Page Pattern styles
 *
 * Notes:
 * - This file is intentionally “block-theme friendly”: no layout hacks, no editor-breaking CSS.
 * - Styles are scoped to the pattern wrapper class: .jacket-onepage
 * - Add `{"className":"jacket-onepage"}` to the OUTERMOST core/group in your pattern markup.
 */

/* -----------------------------
   1) Base scope + type rhythm
-------------------------------- */
.jacket-onepage {
	/* Soft tech-professional “ink” defaults (works with Twenty Twenty-Five) */
	color: var(--wp--preset--color--contrast, #2c3e50);
}

.jacket-onepage p,
.jacket-onepage li {
	line-height: 1.7;
}

.jacket-onepage h1,
.jacket-onepage h2,
.jacket-onepage h3,
.jacket-onepage h4 {
	letter-spacing: -0.01em;
}

/* Slightly nicer max-width reading measure inside constrained layouts */
.jacket-onepage .is-layout-constrained > :where(p, ul, ol) {
	max-width: 68ch;
}

/* Links: calm, trustworthy */
.jacket-onepage a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* -----------------------------
   2) “Website feel” additions
      - section dividers
      - subtle surfaces
-------------------------------- */
.jacket-onepage .wp-block-separator {
	opacity: 0.25;
}

/* Subtle section spacing polish (works even if user tweaks preset spacing) */
.jacket-onepage .wp-block-group {
	scroll-margin-top: 80px; /* nicer anchor jumps */
}

/* -----------------------------
   3) Hero / top section
      Add this class to the hero columns block:
      {"className":"jacket-hero"}
-------------------------------- */
.jacket-onepage .jacket-hero {
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	border-radius: 18px;
	padding: clamp(20px, 2.8vw, 36px);
	background:
		radial-gradient(1200px 500px at 10% 0%,
			color-mix(in srgb, currentColor 10%, transparent),
			transparent 60%),
		radial-gradient(900px 500px at 90% 30%,
			color-mix(in srgb, currentColor 6%, transparent),
			transparent 55%);
}

/* Make the hero tagline feel “product-like” */
.jacket-onepage .jacket-hero .has-large-font-size {
	font-weight: 600;
	opacity: 0.95;
}

/* Buttons: subtle tech styling */
.jacket-onepage .wp-block-button__link {
	border-radius: 999px;
	padding: 0.75em 1.1em;
}

/* Outline button: nicer hover */
.jacket-onepage .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: color-mix(in srgb, currentColor 6%, transparent);
}

/* -----------------------------
   4) Card surface utility
      Use on any core/group that should feel like a “card”:
      {"className":"jacket-card"}
-------------------------------- */
.jacket-onepage .jacket-card {
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, currentColor 3%, transparent);
	padding: clamp(18px, 2.2vw, 28px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Tighten card heading spacing */
.jacket-onepage .jacket-card h3,
.jacket-onepage .jacket-card h4 {
	margin-top: 0;
}

/* -----------------------------
   5) “Icon” list for capabilities
      - Use a normal core/list but add: {"className":"jacket-icon-list"}
      - Each <li> gets an icon via ::before (no HTML changes required)
-------------------------------- */
.jacket-onepage .jacket-icon-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.jacket-onepage .jacket-icon-list li {
	position: relative;
	padding-left: 36px;
	margin: 0.6em 0;
}

.jacket-onepage .jacket-icon-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	background:
		radial-gradient(circle at 30% 30%,
			color-mix(in srgb, currentColor 16%, transparent),
			color-mix(in srgb, currentColor 6%, transparent));
}

/* -----------------------------
   6) “Feature grid” cards
      If you convert the “How we’re different” items into a single Columns block,
      add {"className":"jacket-feature-grid"} to that columns block.
-------------------------------- */
.jacket-onepage .jacket-feature-grid .wp-block-column {
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, currentColor 2.5%, transparent);
	padding: clamp(16px, 2vw, 22px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.035);
}

.jacket-onepage .jacket-feature-grid h4 {
	margin-top: 0;
}

/* -----------------------------
   7) Contact panel polish
      Add {"className":"jacket-contact"} to the contact group.
-------------------------------- */
.jacket-onepage .jacket-contact {
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, currentColor 3%, transparent),
			transparent 75%
		);
}

.jacket-onepage .jacket-contact a[href^="mailto:"] {
	font-weight: 600;
}

/* -----------------------------
   8) Responsive tweaks
-------------------------------- */
@media (max-width: 781px) {
	.jacket-onepage .jacket-hero {
		padding: 20px;
	}
	.jacket-onepage .jacket-icon-list li {
		padding-left: 32px;
	}
}