/*
 * Wild Society — companion stylesheet.
 *
 * Implements rules that the compiled Tailwind v4 build can't generate by itself:
 *   - Article body typography (the `prose-*` modifier classes from
 *     @tailwindcss/typography, which is not installed in the source project).
 *   - The .line-clamp-N utilities, which the design uses on card excerpts.
 *   - A handful of GeneratePress hook-output styles that would otherwise
 *     look unstyled (comments, pagination).
 *
 * All variables come from main.css's @theme block (--primary, --muted, …).
 */

/* -----------------------------------------------------------------
 * Article body — `.prose`
 * --------------------------------------------------------------- */

.prose            { color: var(--foreground); }
.prose p          { color: color-mix(in oklab, var(--foreground) 80%, transparent); line-height: 1.625; }
.prose h2         { font-size: 1.875rem; line-height: 1.25; font-weight: 500; color: var(--foreground); }
.prose h3         { font-size: 1.5rem;   line-height: 1.3;  font-weight: 500; color: var(--foreground); }
.prose h4         { font-size: 1.25rem;  font-weight: 500; color: var(--foreground); }
.prose strong     { color: var(--foreground); font-weight: 500; }
.prose em         { font-style: italic; }
.prose a          { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.prose a:hover    { text-decoration-color: var(--primary); }

.prose ul         { list-style: disc;    padding-left: 1.5rem; }
.prose ol         { list-style: decimal; padding-left: 1.5rem; }
.prose li         { color: color-mix(in oklab, var(--foreground) 80%, transparent); line-height: 1.625; padding-left: 0.5rem; }

.prose blockquote {
	border-left: 4px solid var(--primary);
	padding: 1rem 1.5rem;
	margin: 2.5rem 0;
	font-style: italic;
	color: color-mix(in oklab, var(--foreground) 70%, transparent);
	background: color-mix(in oklab, var(--muted) 30%, transparent);
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.prose img        { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 2rem 0; }
.prose hr         { border-color: var(--border); margin: 3rem 0; }
.prose code       { background: var(--muted); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.9em; }
.prose pre        { background: var(--muted); padding: 1rem 1.25rem; border-radius: 0.5rem; overflow-x: auto; }
.prose pre code   { background: transparent; padding: 0; }
.prose table      { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
.prose th         { background: var(--muted); font-weight: 500; }

/* -----------------------------------------------------------------
 * .line-clamp-{n} (used on article excerpts)
 * --------------------------------------------------------------- */

.line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
.line-clamp-4 { -webkit-line-clamp: 4; }

/* -----------------------------------------------------------------
 * WP pagination + comments — keep them visually consistent
 * --------------------------------------------------------------- */

.navigation.pagination {
	margin-top: 3rem;
}
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.navigation.pagination a,
.navigation.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	color: var(--foreground);
	text-decoration: none;
	font-size: 0.875rem;
	transition: border-color 150ms, background-color 150ms;
}
.navigation.pagination a:hover {
	border-color: var(--primary);
	color: var(--primary);
}
.navigation.pagination span.current {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}

/* -----------------------------------------------------------------
 * Contact Form 7 — restyle inputs to match the design's form
 * --------------------------------------------------------------- */

.ws-cf7-wrap .wpcf7 form > p,
.ws-cf7-wrap .wpcf7-form > p {
	margin: 0 0 1.5rem;
}
.ws-cf7-wrap label {
	display: block;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}
.ws-cf7-wrap input[type="text"],
.ws-cf7-wrap input[type="email"],
.ws-cf7-wrap input[type="tel"],
.ws-cf7-wrap input[type="url"],
.ws-cf7-wrap input[type="number"],
.ws-cf7-wrap input[type="date"],
.ws-cf7-wrap select,
.ws-cf7-wrap textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--input-background);
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	color: var(--foreground);
	font-size: 1rem;
	transition: box-shadow 150ms, border-color 150ms;
}
.ws-cf7-wrap input:focus,
.ws-cf7-wrap select:focus,
.ws-cf7-wrap textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 50%, transparent);
	border-color: var(--primary);
}
.ws-cf7-wrap textarea {
	resize: vertical;
	min-height: 8rem;
}
.ws-cf7-wrap input[type="submit"],
.ws-cf7-wrap button[type="submit"] {
	width: auto;
	padding: 0.75rem 2rem;
	background: var(--primary);
	color: var(--primary-foreground);
	border: 0;
	border-radius: 0.5rem;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 150ms;
}
.ws-cf7-wrap input[type="submit"]:hover,
.ws-cf7-wrap button[type="submit"]:hover {
	background: color-mix(in oklab, var(--primary) 90%, black);
}
.ws-cf7-wrap .wpcf7-not-valid-tip {
	color: var(--destructive);
	font-size: 0.8125rem;
	margin-top: 0.25rem;
}
.ws-cf7-wrap .wpcf7-response-output {
	margin-top: 1.5rem;
	padding: 0.875rem 1rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border);
	font-size: 0.9rem;
}

/* -----------------------------------------------------------------
 * Accessibility helpers
 * --------------------------------------------------------------- */

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.focus\:not-sr-only:focus {
	position: static !important;
	width: auto; height: auto;
	padding: 0.5rem 1rem; margin: 0.5rem;
	overflow: visible; clip: auto;
	white-space: normal;
	background: var(--primary); color: var(--primary-foreground);
	border-radius: 0.5rem;
	z-index: 100;
}