/* Reset + base element styles */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--ink);
}

h1 { font-size: var(--wp--preset--font-size--h-1); text-wrap: balance; }
h2 { font-size: var(--wp--preset--font-size--h-2); text-wrap: balance; }
h3 { font-size: var(--wp--preset--font-size--h-3); }
h4 { font-size: var(--wp--preset--font-size--h-4); font-family: var(--wp--preset--font-family--sans); }

p { margin: 0 0 var(--wp--preset--spacing--4); }

a {
	color: var(--wp--preset--color--bronze);
	text-decoration: none;
}
a:hover { color: var(--wp--preset--color--crimson); text-decoration: underline; }

/* Inline content links need a non-color cue. Buttons and navigation keep
   their component-specific treatments. */
.ip-container--prose a:not(.ip-btn),
.ip-page-content a:not(.ip-btn),
.ip-doc-panel-copy p a {
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

/* Visible, consistent focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--ip-focus-width) solid var(--ip-focus-color);
	outline-offset: var(--ip-focus-offset);
}

/* Skip link */
.ip-skip-link {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: var(--ip-z-skip-link);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 10px 16px;
	border-radius: var(--ip-radius-sm);
	transition: top var(--ip-transition-base);
}
.ip-skip-link:focus {
	top: 8px;
	text-decoration: none;
}

/* Forms */
label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--ink);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	padding: 10px 12px;
	border: 1px solid var(--ip-border-color);
	border-radius: var(--ip-radius-sm);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	min-height: 44px;
}

textarea { min-height: 120px; }

/* Native checkbox/radio controls otherwise render in the browser's default
   blue (Chromium/Safari), clashing with the ink/crimson/amber palette. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--ink);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--wp--preset--color--ink);
}

fieldset { border: none; padding: 0; margin: 0 0 var(--wp--preset--spacing--5); }

.ip-field { margin-bottom: var(--wp--preset--spacing--4); }

.ip-field-error {
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--1);
	display: flex;
	align-items: center;
	gap: 6px;
}
.ip-field-error .ip-icon { flex-shrink: 0; }

input.ip-invalid, textarea.ip-invalid, select.ip-invalid {
	border-color: var(--wp--preset--color--error);
}

/* Buttons (also applies to WooCommerce's .button output) */
.button,
button:not(.ip-icon-button),
input[type="submit"],
.ip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 13px 26px;
	min-height: 44px;
	border-radius: var(--ip-radius-md);
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	transition: background var(--ip-transition-fast), border-color var(--ip-transition-fast), color var(--ip-transition-fast);
}
.button:hover, button:not(.ip-icon-button):hover, input[type="submit"]:hover, .ip-btn:hover {
	background: var(--wp--preset--color--crimson-deep);
	border-color: var(--wp--preset--color--crimson-deep);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
	.button, button:not(.ip-icon-button), input[type="submit"], .ip-btn {
		transition: background var(--ip-transition-fast), border-color var(--ip-transition-fast), color var(--ip-transition-fast), transform var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
	}
	.button:hover, button:not(.ip-icon-button):hover, input[type="submit"]:hover, .ip-btn:hover {
		transform: translateY(-1px);
		box-shadow: var(--ip-shadow-soft);
	}
	.button:active, button:not(.ip-icon-button):active, input[type="submit"]:active, .ip-btn:active {
		transform: none;
	}
}

.ip-btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.ip-btn--secondary:hover {
	background: var(--wp--preset--color--neutral-100);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.ip-btn:disabled, .button:disabled, .button.disabled {
	background: var(--wp--preset--color--neutral-100);
	border-color: var(--wp--preset--color--neutral);
	color: var(--wp--preset--color--neutral);
	cursor: not-allowed;
}

.ip-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	border-radius: var(--ip-radius-sm);
}
.ip-icon-button:hover { background: var(--wp--preset--color--neutral-100); }

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