/**
 * Cookie consent banner — fixed bottom-right card with two action buttons.
 *
 * Block:     .cookie-consent
 * Elements:  __text, __info, __link, __actions, __button
 * Modifiers: --primary, --secondary, --hidden
 *
 * Ported from the kodansha.us sister theme. Focus-visible outline uses
 * `--color-text` (black) rather than the sister's `--color-blue` so the
 * grayscale-only chrome rule (DESIGN.md) stays intact.
 */

.cookie-consent {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9999;
	max-width: 25rem;
	padding: 1.25rem;
	background: var(--color-white);
	border: 2px solid var(--color-black);
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
	font-family: var(--font-family-sans-serif);
	font-size: var(--font-size-03);
	line-height: var(--line-height);
}

.cookie-consent--hidden {
	display: none;
}

.cookie-consent__text {
	margin: 0 0 0.75rem;
	color: var(--color-text);
}

.cookie-consent__info {
	margin: 0 0 1rem;
	color: var(--color-text-2);
	font-size: var(--font-size-02);
}

.cookie-consent__link {
	color: var(--color-text);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.cookie-consent__link:hover,
.cookie-consent__link:focus {
	color: var(--color-text-2);
}

.cookie-consent__actions {
	display: flex;
	gap: 0.625rem;
	flex-wrap: wrap;
}

/* Button base — mirrors the global .button styles but scoped so the
   consent banner stays self-contained. */
.cookie-consent__button {
	display: inline-block;
	flex: 1;
	min-width: 8rem;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 0;
	text-align: center;
	text-decoration: none;
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.2s;
}

/* Primary CTA — black bg by default, inverts on hover/focus to mirror
   .button--primary in css/components/button.css. The 2px border matches
   the secondary button so layout doesn't shift on hover and the border
   stays visible against the inverted background. */
.cookie-consent__button--primary {
	background: var(--color-black);
	color: var(--color-white);
	border: 2px solid var(--color-black);
}

.cookie-consent__button--primary:hover,
.cookie-consent__button--primary:focus {
	background: var(--color-white);
	color: var(--color-black);
	text-decoration: none;
}

.cookie-consent__button--secondary {
	background: var(--color-white);
	color: var(--color-black);
	border: 2px solid var(--color-black);
}

.cookie-consent__button--secondary:hover,
.cookie-consent__button--secondary:focus {
	background: var(--color-gray-light);
	text-decoration: none;
}

.cookie-consent__button:focus-visible,
.cookie-consent__link:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

@media (max-width: 480px) {

	.cookie-consent {
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		max-width: none;
	}

	.cookie-consent__actions {
		flex-direction: column;
	}

	.cookie-consent__button {
		min-width: 100%;
	}
}