/* =====================================================================
   Argen Verlag — components.css
   Buttons, navigation + mobile menu, cards, forms, badges/labels.
   ===================================================================== */

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	padding: .7rem 1.5rem;
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition),
		border-color var(--transition);
}

.btn:hover,
.btn:focus {
	text-decoration: none;
}

.btn--primary {
	background-color: var(--color-accent);
	color: var(--color-white);
	border-color: var(--color-accent);
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-white);
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.btn--secondary:hover,
.btn--secondary:focus {
	background-color: var(--color-ink);
	color: var(--color-paper);
}

/* ---------- Primary navigation ---------- */
.primary-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.primary-nav__menu a {
	display: inline-block;
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: 500;
	color: var(--color-ink);
	text-decoration: none;
	padding-block: var(--space-1);
	border-bottom: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}

.primary-nav__menu a:hover,
.primary-nav__menu a:focus,
.primary-nav__menu .current-menu-item > a,
.primary-nav__menu .current_page_item > a {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
	text-decoration: none;
}

/* ---------- Nav toggle (hamburger) ---------- */
.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--radius);
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 24px;
	height: 2px;
	background-color: var(--color-ink);
	transform: translateX(-50%);
	transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bar {
	top: 50%;
	transform: translate(-50%, -50%);
}

.nav-toggle__bar::before {
	top: -7px;
}

.nav-toggle__bar::after {
	top: 7px;
}

/* Animated hamburger -> X when open. */
.nav-open .nav-toggle__bar {
	background-color: transparent;
}

.nav-open .nav-toggle__bar::before {
	top: 0;
	transform: translateX(-50%) rotate(45deg);
}

.nav-open .nav-toggle__bar::after {
	top: 0;
	transform: translateX(-50%) rotate(-45deg);
}

/* ---------- Cards (book-card) ---------- */
.book-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition), box-shadow var(--transition);
}

.book-card:hover,
.book-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}

.book-card__cover {
	aspect-ratio: 2 / 3;
	width: 100%;
	background-color: var(--color-border);
	background-image: linear-gradient(135deg, #ece8df 0%, #ddd8cc 100%);
}

.book-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.book-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
}

.book-card__title {
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
}

.book-card__title a {
	color: var(--color-ink);
	text-decoration: none;
}

.book-card__title a:hover,
.book-card__title a:focus {
	color: var(--color-accent);
	text-decoration: none;
}

.book-card__author {
	font-size: .95rem;
	color: var(--color-muted);
}

.book-card__meta {
	margin-top: var(--space-1);
	font-size: .8125rem;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* Filtered-out cards. */
.book-card.is-hidden,
.book-card[hidden] {
	display: none;
}

/* ---------- Badges / labels ---------- */
.badge {
	display: inline-block;
	padding: .15rem .6rem;
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--color-accent);
	background-color: rgba(42, 82, 152, .08);
	border-radius: 999px;
}

.badge--ink {
	color: var(--color-paper);
	background-color: var(--color-ink);
}

/* ---------- Forms ---------- */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 640px;
}

.contact-form label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: .9rem;
	font-weight: 600;
	color: var(--color-ink);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
	width: 100%;
	padding: .75rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-ink);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(42, 82, 152, .15);
}

.contact-form textarea {
	min-height: 180px;
	resize: vertical;
}

/* Honeypot — accessibly hidden. */
.hp-field {
	position: absolute;
	left: -9999px;
}

/* Form status messages. */
.form-message {
	padding: var(--space-2);
	border-radius: var(--radius);
	font-size: .95rem;
}

.form-message.is-success {
	color: #1d5d2c;
	background-color: #e7f4ea;
	border: 1px solid #b6e0c0;
}

.form-message.is-error {
	color: #8a1f1f;
	background-color: #fbeaea;
	border: 1px solid #f0c2c2;
}

/* =====================================================================
   Mobile navigation (mobile-first: collapsed below 900px)
   ===================================================================== */
@media (max-width: 899.98px) {
	.nav-toggle {
		display: inline-block;
	}

	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-paper);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 12px 24px rgba(26, 26, 46, .08);

		/* Hidden by default; revealed by .nav-open on <body>. */
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: max-height var(--transition), visibility var(--transition);
	}

	.primary-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--space-3);
	}

	.primary-nav__menu li {
		border-bottom: 1px solid var(--color-border);
	}

	.primary-nav__menu li:last-child {
		border-bottom: none;
	}

	.primary-nav__menu a {
		display: block;
		padding: var(--space-2) 0;
		border-bottom: none;
	}

	/* Open state (toggled by navigation.js via aria-expanded / .nav-open). */
	.nav-open .primary-nav {
		max-height: 80vh;
		overflow-y: auto;
		visibility: visible;
	}
}