/* Signature script faces — self-hosted, SIL OFL. See assets/fonts/LICENSE.txt */

@font-face {
	font-family: "KWLW Great Vibes";
	src: url( "fonts/great-vibes-400.woff2" ) format( "woff2" );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "KWLW Dancing Script";
	src: url( "fonts/dancing-script-400.woff2" ) format( "woff2" );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "KWLW Caveat";
	src: url( "fonts/caveat-400.woff2" ) format( "woff2" );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/**
 * Group Liability Waiver — front-end styles.
 * Inherits the theme's typography. Override the custom properties on .kwlw
 * in your own stylesheet to match your brand.
 */

.kwlw {
	--kwlw-ink: #16181a;
	--kwlw-muted: #5a6066;
	--kwlw-line: #d6dade;
	--kwlw-surface: #ffffff;
	--kwlw-subtle: #f5f7f8;
	--kwlw-accent: #1f5f4f;
	--kwlw-accent-ink: #ffffff;
	--kwlw-error: #a3282f;
	--kwlw-success: #1f5f4f;
	--kwlw-radius: 6px;
	--kwlw-gap: 1.25rem;

	color: var( --kwlw-ink );
	max-width: 46rem;
	margin: 0 auto;
}

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

/* Headings and lead text ------------------------------------------------ */

.kwlw-heading {
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.kwlw-lede {
	margin: 0 0 1rem;
}

.kwlw-help {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85em;
	color: var( --kwlw-muted );
}

.kwlw-req {
	color: var( --kwlw-error );
}

/* Notices ---------------------------------------------------------------- */

.kwlw-notice {
	margin: 0 0 var( --kwlw-gap );
	padding: 0.85rem 1rem;
	border-left: 3px solid currentColor;
	border-radius: 0 var( --kwlw-radius ) var( --kwlw-radius ) 0;
	background: var( --kwlw-subtle );
	font-size: 0.95em;
}

.kwlw-notice--error {
	color: var( --kwlw-error );
}

.kwlw-notice--success {
	color: var( --kwlw-success );
}

/* Forms ------------------------------------------------------------------ */

.kwlw-fieldset {
	margin: 0 0 var( --kwlw-gap );
	padding: 1.25rem;
	border: 1px solid var( --kwlw-line );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-surface );
}

.kwlw-fieldset > legend {
	padding: 0 0.5rem;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --kwlw-muted );
}

.kwlw-field {
	margin: 0 0 1rem;
}

.kwlw-field > label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95em;
}

.kwlw-field input[ type="text" ],
.kwlw-field input[ type="email" ],
.kwlw-field input[ type="date" ],
.kwlw-field select {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var( --kwlw-line );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-surface );
	color: inherit;
	font: inherit;
}

.kwlw-field input:focus-visible,
.kwlw-field select:focus-visible,
.kwlw button:focus-visible,
.kwlw a:focus-visible {
	outline: 2px solid var( --kwlw-accent );
	outline-offset: 2px;
}

.kwlw-field input[ readonly ] {
	background: var( --kwlw-subtle );
	color: var( --kwlw-muted );
}

.kwlw-field--narrow select,
.kwlw-field--narrow input {
	max-width: 14rem;
}

.kwlw-field--check > label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.95em;
	line-height: 1.5;
}

.kwlw-field--check input[ type="checkbox" ] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
}

.kwlw-grid {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr;
}

@media ( min-width: 40rem ) {
	.kwlw-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Honeypot — hidden from people, visible to bots */
.kwlw-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Guest blocks ----------------------------------------------------------- */

.kwlw-guest {
	padding: 1rem 0 0.25rem;
	border-top: 1px solid var( --kwlw-line );
}

.kwlw-guest:first-child {
	border-top: 0;
	padding-top: 0.5rem;
}

.kwlw-guest__title {
	margin: 0 0 0.75rem;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --kwlw-muted );
}

/* Buttons ---------------------------------------------------------------- */

.kwlw-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 1px solid var( --kwlw-accent );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-accent );
	color: var( --kwlw-accent-ink );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.kwlw-button:hover {
	filter: brightness( 1.1 );
}

.kwlw-button--ghost {
	background: transparent;
	color: var( --kwlw-accent );
	font-weight: 500;
}

.kwlw-actions {
	margin: var( --kwlw-gap ) 0 0;
}

.kwlw-link {
	color: var( --kwlw-accent );
}

/* Waiver document -------------------------------------------------------- */

.kwlw-doc__head {
	margin-bottom: 1rem;
}

.kwlw-doc__meta {
	margin: 0;
	font-size: 0.8em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --kwlw-muted );
}

.kwlw-doc__body {
	max-height: 26rem;
	overflow-y: auto;
	margin-bottom: var( --kwlw-gap );
	padding: 1.25rem;
	border: 1px solid var( --kwlw-line );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-subtle );
	font-size: 0.95em;
	line-height: 1.7;
}

.kwlw-doc__body--static {
	max-height: none;
}

.kwlw-doc__body > *:first-child {
	margin-top: 0;
}

.kwlw-doc__body > *:last-child {
	margin-bottom: 0;
}

/* Signature pad ---------------------------------------------------------- */

.kwlw-signature {
	position: relative;
	border: 1px solid var( --kwlw-line );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-surface );
}

.kwlw-signature.is-invalid {
	border-color: var( --kwlw-error );
	box-shadow: 0 0 0 2px rgba( 163, 40, 47, 0.15 );
}

.kwlw-signature__pad {
	display: block;
	width: 100%;
	height: 180px;
	color: var( --kwlw-ink );
	touch-action: none;
	cursor: crosshair;
}

.kwlw-signature__baseline {
	position: absolute;
	right: 1.5rem;
	bottom: 2.75rem;
	left: 1.5rem;
	border-bottom: 1px dashed var( --kwlw-line );
	pointer-events: none;
}

.kwlw-signature__hint {
	position: absolute;
	bottom: 1.25rem;
	left: 1.5rem;
	font-size: 0.85em;
	color: var( --kwlw-muted );
	pointer-events: none;
}

.kwlw-signature__tools {
	margin: 0.5rem 0 1rem;
}

.kwlw-signature-proof img {
	display: block;
	max-width: 320px;
	height: auto;
	border-bottom: 1px solid var( --kwlw-ink );
}

.kwlw-signature-proof figcaption {
	margin-top: 0.4rem;
	font-size: 0.85em;
	color: var( --kwlw-muted );
}


/* Signature mode picker ---------------------------------------------------- */

.kwlw-sig {
	border: 1px solid var( --kwlw-line );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-surface );
}

.kwlw-sig.is-invalid {
	border-color: var( --kwlw-error );
	box-shadow: 0 0 0 2px rgba( 163, 40, 47, 0.15 );
}

.kwlw-sig__tabs {
	display: flex;
	border-bottom: 1px solid var( --kwlw-line );
}

.kwlw-sig__tab {
	flex: 1 1 0;
	min-height: 46px;
	padding: 0.7rem 1rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var( --kwlw-muted );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.kwlw-sig__tab[ aria-selected="true" ] {
	border-bottom-color: var( --kwlw-accent );
	color: var( --kwlw-accent );
}

.kwlw-sig__panel {
	padding: 1.25rem;
}

.kwlw-sig__panel[ hidden ] {
	display: none;
}

.kwlw-sig__panel .kwlw-field:last-child,
.kwlw-sig__panel .kwlw-signature__tools:last-child {
	margin-bottom: 0;
}

/* Typed style choices */

.kwlw-sig__styles {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr;
}

@media ( min-width: 34rem ) {
	.kwlw-sig__styles {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.kwlw-sig__style {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var( --kwlw-line );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-surface );
	cursor: pointer;
	overflow: hidden;
}

.kwlw-sig__style[ aria-checked="true" ] {
	border-color: var( --kwlw-accent );
	box-shadow: inset 0 0 0 1px var( --kwlw-accent );
}

.kwlw-sig__sample {
	display: block;
	max-width: 100%;
	color: var( --kwlw-ink );
	font-size: 1.9rem;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The drawn pad sits inside a panel now, so it drops its own outer frame. */

.kwlw-sig__panel .kwlw-signature {
	border-style: dashed;
}

.kwlw-sig__panel .kwlw-signature.is-invalid {
	box-shadow: none;
}

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

/* Confirmation list ------------------------------------------------------ */

.kwlw-signers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kwlw-signer {
	padding: 1rem 0;
	border-bottom: 1px solid var( --kwlw-line );
}

.kwlw-signer__head {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
}

.kwlw-signer__name {
	font-weight: 600;
}

.kwlw-badge {
	flex: 0 0 auto;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var( --kwlw-subtle );
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --kwlw-muted );
}

.kwlw-badge--signed {
	background: var( --kwlw-success );
	color: #fff;
}

.kwlw-signer__link {
	display: flex;
	gap: 0.5rem;
	margin: 0.75rem 0 0.5rem;
	flex-wrap: wrap;
}

.kwlw-copy-input {
	flex: 1 1 16rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var( --kwlw-line );
	border-radius: var( --kwlw-radius );
	background: var( --kwlw-subtle );
	font-size: 0.85em;
	color: var( --kwlw-muted );
}

.kwlw-signer__actions {
	display: flex;
	gap: 1rem;
	margin: 0;
	font-size: 0.9em;
	flex-wrap: wrap;
}

.kwlw-signer__meta {
	margin: 0.4rem 0 0;
	font-size: 0.9em;
	color: var( --kwlw-muted );
}

/* Receipt ---------------------------------------------------------------- */

.kwlw-summary {
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: max-content 1fr;
	margin: 0 0 var( --kwlw-gap );
	font-size: 0.95em;
}

.kwlw-summary dt {
	font-weight: 600;
	color: var( --kwlw-muted );
}

.kwlw-summary dd {
	margin: 0;
}

.kwlw-details {
	margin: var( --kwlw-gap ) 0;
}

.kwlw-details > summary {
	cursor: pointer;
	font-weight: 600;
	color: var( --kwlw-accent );
}

@media print {
	.kwlw-actions,
	.kwlw-signature__tools {
		display: none;
	}

	.kwlw-doc__body {
		max-height: none;
		overflow: visible;
	}
}