/* =========================================================
   KEYPLO — Base styles + reusable primitives
   (no page sections here: those come in later steps)
   ========================================================= */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--kp-bg);
}

body {
	margin: 0;
	background: var(--kp-bg);
	color: var(--kp-text);
	font-family: var(--kp-font-body);
	font-size: var(--kp-text-base);
	line-height: var(--kp-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--kp-orange); text-decoration: none; transition: color var(--kp-dur) var(--kp-ease); }
a:hover { color: var(--kp-orange-hover); }

::selection { background: var(--kp-orange); color: var(--kp-on-orange); }

:focus-visible {
	outline: 2px solid var(--kp-orange);
	outline-offset: 2px;
}

hr { border: 0; border-top: 1px solid var(--kp-border); margin: var(--kp-space-8) 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--kp-space-4);
	color: var(--kp-text);
	font-family: var(--kp-font-display);
	line-height: var(--kp-leading-snug);
	text-wrap: balance;
}

h1, .kp-h1 {
	font-size: var(--kp-h1);
	font-weight: var(--kp-weight-black);
	line-height: var(--kp-leading-tight);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
h2, .kp-h2 { font-size: var(--kp-h2); font-weight: var(--kp-weight-heavy); letter-spacing: -0.01em; }
h3, .kp-h3 { font-size: var(--kp-h3); font-weight: var(--kp-weight-bold); }
h4, .kp-h4 { font-size: var(--kp-text-lg); font-weight: var(--kp-weight-bold); font-family: var(--kp-font-body); }

p { margin: 0 0 var(--kp-space-4); }

.kp-accent      { color: var(--kp-orange); }
.kp-accent-glow { color: var(--kp-orange); text-shadow: var(--kp-glow-text); }
.kp-lead        { font-size: var(--kp-text-lg); color: var(--kp-text-2); }
.kp-text-secondary { color: var(--kp-text-2); }
.kp-text-muted  { color: var(--kp-text-muted); }
.kp-small       { font-size: var(--kp-text-sm); }

.kp-label {
	display: inline-block;
	font-size: var(--kp-text-xs);
	font-weight: var(--kp-weight-bold);
	letter-spacing: var(--kp-tracking-label);
	text-transform: uppercase;
	color: var(--kp-text-muted);
}
.kp-eyebrow {
	font-family: var(--kp-font-display);
	font-size: var(--kp-text-sm);
	font-weight: var(--kp-weight-bold);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--kp-orange);
}

.kp-prose { color: var(--kp-text-2); max-width: 72ch; }
.kp-prose h2, .kp-prose h3 { margin-top: var(--kp-space-8); }
.kp-prose a { text-decoration: underline; text-underline-offset: 3px; }
.kp-prose ul, .kp-prose ol { padding-left: 1.25rem; }
.kp-prose li { margin-bottom: var(--kp-space-2); }

/* ---------- Layout ---------- */
.kp-container {
	width: 100%;
	max-width: var(--kp-container);
	margin-inline: auto;
	padding-inline: var(--kp-gutter);
}
.kp-container--narrow { max-width: calc(var(--kp-container-narrow) + 2 * var(--kp-gutter)); }

.kp-main { padding-block: var(--kp-space-8) var(--kp-space-16); min-height: 60vh; }
.kp-page-title { margin-bottom: var(--kp-space-8); }
.kp-entry + .kp-entry { margin-top: var(--kp-space-10); }

.kp-stack > * + * { margin-top: var(--kp-space-4); }
.kp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kp-space-3); }

.kp-skip-link {
	position: absolute; left: var(--kp-space-4); top: -100px; z-index: var(--kp-z-modal);
	padding: var(--kp-space-3) var(--kp-space-4);
	background: var(--kp-orange); color: var(--kp-on-orange);
	border-radius: var(--kp-radius-sm); font-weight: var(--kp-weight-bold);
}
.kp-skip-link:focus { top: var(--kp-space-4); color: var(--kp-on-orange); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.kp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--kp-space-2);
	min-height: var(--kp-control-h);
	padding: 0 var(--kp-space-5);
	border: 1px solid var(--kp-border-strong);
	border-radius: var(--kp-radius-sm);
	background: var(--kp-surface-2);
	color: var(--kp-text);
	font-family: var(--kp-font-body);
	font-size: var(--kp-text-sm);
	font-weight: var(--kp-weight-bold);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--kp-dur) var(--kp-ease), border-color var(--kp-dur) var(--kp-ease),
	            box-shadow var(--kp-dur) var(--kp-ease), color var(--kp-dur) var(--kp-ease);
}
.kp-btn:hover { border-color: var(--kp-text-muted); color: var(--kp-text); }
.kp-btn:focus-visible { outline: none; box-shadow: var(--kp-focus-ring); }
.kp-btn svg { width: 18px; height: 18px; flex: none; }

.kp-btn--primary {
	background: var(--kp-orange);
	border-color: var(--kp-orange);
	color: var(--kp-on-orange);
}
.kp-btn--primary:hover {
	background: var(--kp-orange-hover);
	border-color: var(--kp-orange-hover);
	color: var(--kp-on-orange);
	box-shadow: var(--kp-glow-sm);
}
.kp-btn--primary:active { background: var(--kp-orange-active); border-color: var(--kp-orange-active); }

.kp-btn--outline { background: transparent; border-color: var(--kp-orange-line); color: var(--kp-orange); }
.kp-btn--outline:hover { background: var(--kp-orange-soft); border-color: var(--kp-orange); color: var(--kp-orange-hover); }

.kp-btn--ghost { background: transparent; border-color: transparent; color: var(--kp-text-2); }
.kp-btn--ghost:hover { background: var(--kp-surface-2); border-color: transparent; color: var(--kp-text); }

.kp-btn--sm { min-height: var(--kp-control-h-sm); padding: 0 var(--kp-space-4); font-size: var(--kp-text-xs); }
.kp-btn--lg { min-height: var(--kp-control-h-lg); padding: 0 var(--kp-space-8); font-size: var(--kp-text-base); }
.kp-btn--block { width: 100%; }
.kp-btn--icon { width: var(--kp-control-h); padding: 0; }

.kp-btn[disabled], .kp-btn.is-disabled {
	opacity: 0.5; cursor: not-allowed; box-shadow: none; pointer-events: none;
}

/* ---------- Inputs ---------- */
.kp-input,
.kp-select,
.kp-textarea {
	width: 100%;
	min-height: var(--kp-control-h);
	padding: 0 var(--kp-space-4);
	background: var(--kp-surface-2);
	border: 1px solid var(--kp-border-strong);
	border-radius: var(--kp-radius-sm);
	color: var(--kp-text);
	font-size: var(--kp-text-base); /* 16px prevents iOS zoom */
	transition: border-color var(--kp-dur) var(--kp-ease), box-shadow var(--kp-dur) var(--kp-ease);
}
.kp-textarea { min-height: 120px; padding: var(--kp-space-3) var(--kp-space-4); resize: vertical; }
.kp-input::placeholder, .kp-textarea::placeholder { color: var(--kp-text-muted); opacity: 1; }
.kp-input:hover, .kp-select:hover, .kp-textarea:hover { border-color: var(--kp-text-disabled); }
.kp-input:focus, .kp-select:focus, .kp-textarea:focus {
	outline: none; border-color: var(--kp-orange); box-shadow: var(--kp-focus-ring);
}
.kp-input.is-invalid { border-color: var(--kp-error); }
.kp-field-label { display: block; margin-bottom: var(--kp-space-2); font-size: var(--kp-text-sm); font-weight: var(--kp-weight-semi); color: var(--kp-text); }
.kp-field-hint  { margin-top: var(--kp-space-1); font-size: var(--kp-text-xs); color: var(--kp-text-muted); }
.kp-field-error { margin-top: var(--kp-space-1); font-size: var(--kp-text-xs); color: var(--kp-error); }

/* Search field: icon + input + optional button */
.kp-search-field {
	display: flex; align-items: center; gap: var(--kp-space-2);
	min-height: var(--kp-control-h-lg);
	padding: var(--kp-space-1) var(--kp-space-1) var(--kp-space-1) var(--kp-space-4);
	background: var(--kp-surface-2);
	border: 1px solid var(--kp-border-strong);
	border-radius: var(--kp-radius-md);
	transition: border-color var(--kp-dur) var(--kp-ease), box-shadow var(--kp-dur) var(--kp-ease);
}
.kp-search-field:focus-within { border-color: var(--kp-orange); box-shadow: var(--kp-focus-ring); }
.kp-search-field > svg { width: 20px; height: 20px; color: var(--kp-text-muted); flex: none; }
.kp-search-field input {
	flex: 1; min-width: 0; height: 42px; padding: 0;
	background: transparent; border: 0; outline: 0; color: var(--kp-text); font-size: var(--kp-text-base);
}
.kp-search-field input::placeholder { color: var(--kp-text-muted); opacity: 1; }

/* ---------- Cards ---------- */
.kp-card {
	background: var(--kp-surface);
	border: 1px solid var(--kp-border);
	border-radius: var(--kp-radius-md);
	padding: var(--kp-space-5);
}
.kp-card--panel { border-radius: var(--kp-radius-lg); padding: var(--kp-space-6); }
.kp-card--flush { padding: 0; overflow: hidden; }
.kp-card--interactive {
	transition: border-color var(--kp-dur) var(--kp-ease), box-shadow var(--kp-dur) var(--kp-ease), transform var(--kp-dur) var(--kp-ease);
}
.kp-card--interactive:hover {
	border-color: var(--kp-orange-line);
	box-shadow: var(--kp-shadow-md);
	transform: translateY(-2px);
}
.kp-card--accent { border-color: var(--kp-orange-line); box-shadow: var(--kp-glow-sm); }

/* ---------- Badges ---------- */
.kp-badge {
	display: inline-flex; align-items: center; gap: var(--kp-space-1);
	min-height: 22px; padding: 0 var(--kp-space-2);
	border-radius: var(--kp-radius-pill);
	font-size: var(--kp-text-xs);
	font-weight: var(--kp-weight-bold);
	line-height: 1;
	white-space: nowrap;
	background: var(--kp-surface-3);
	color: var(--kp-text-2);
}
.kp-badge--hot      { background: var(--kp-orange); color: var(--kp-on-orange); }
.kp-badge--discount { background: var(--kp-success); color: #04130A; }
.kp-badge--new      { background: var(--kp-info); color: #FFFFFF; }
.kp-badge--success  { background: var(--kp-success-soft); color: var(--kp-success); }
.kp-badge--warning  { background: var(--kp-warning-soft); color: var(--kp-warning); }
.kp-badge--error    { background: var(--kp-error-soft); color: var(--kp-error); }
.kp-badge--outline  { background: transparent; border: 1px solid var(--kp-orange-line); color: var(--kp-orange); }

/* ---------- Price ---------- */
.kp-price     { font-family: var(--kp-font-display); font-weight: var(--kp-weight-heavy); color: var(--kp-orange); }
.kp-price-old { color: var(--kp-text-muted); text-decoration: line-through; font-weight: var(--kp-weight-medium); }

/* ---------- Notices ---------- */
.kp-notice {
	padding: var(--kp-space-3) var(--kp-space-4);
	border: 1px solid var(--kp-border);
	border-left: 3px solid var(--kp-info);
	border-radius: var(--kp-radius-sm);
	background: var(--kp-surface);
	color: var(--kp-text-2);
}
.kp-notice--success { border-left-color: var(--kp-success); }
.kp-notice--warning { border-left-color: var(--kp-warning); }
.kp-notice--error   { border-left-color: var(--kp-error); }

/* ---------- Gutenberg alignment helpers ---------- */
.alignwide { max-width: var(--kp-container); margin-inline: auto; }
.alignfull { width: 100%; }
.wp-block-button__link {
	background: var(--kp-orange); color: var(--kp-on-orange);
	border-radius: var(--kp-radius-sm); font-weight: var(--kp-weight-bold);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.kp-card--interactive:hover { transform: none; }
}