/**
 * @file cookieConsent
 * @description The consent banner in the site's look: white ground, hairline edge, DM Sans,
 *   outline pill buttons. Accept and Reject are the same button, so neither is easier to
 *   press. Sets the CookieConsent library's own variables; no rule of the library is rewritten
 *   beyond the few below.
 *
 * @status In use (build stage 08)
 * @issues None
 * @todo None
 */

#cc-main {
	--cc-font-family: var(--font-sans);
	--cc-bg: var(--ground);
	--cc-primary-color: var(--text-heading);
	--cc-secondary-color: var(--text-body);
	--cc-link-color: var(--accent-text);
	--cc-modal-border-radius: 0;
	--cc-btn-border-radius: var(--radius-pill);
	--cc-pm-toggle-border-radius: var(--radius-pill);

	--cc-btn-primary-bg: transparent;
	--cc-btn-primary-color: var(--text-heading);
	--cc-btn-primary-border-color: var(--btn-edge);
	--cc-btn-primary-hover-bg: var(--btn-fill);
	--cc-btn-primary-hover-color: var(--text-heading);
	--cc-btn-primary-hover-border-color: var(--text-heading);
	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-color: var(--text-heading);
	--cc-btn-secondary-border-color: var(--btn-edge);
	--cc-btn-secondary-hover-bg: var(--btn-fill);
	--cc-btn-secondary-hover-color: var(--text-heading);
	--cc-btn-secondary-hover-border-color: var(--text-heading);

	--cc-separator-border-color: var(--hairline);
	--cc-cookie-category-block-bg: var(--panel);
	--cc-cookie-category-block-border: var(--panel);
	--cc-cookie-category-block-hover-bg: var(--panel);
	--cc-cookie-category-block-hover-border: var(--hairline);
	--cc-cookie-category-expanded-block-bg: transparent;
	--cc-cookie-category-expanded-block-hover-bg: var(--panel);
	--cc-toggle-on-bg: var(--nl-orange-deep);
	--cc-toggle-off-bg: var(--text-body);
	--cc-toggle-readonly-bg: var(--hairline);
	--cc-footer-bg: var(--ground);
	--cc-footer-border-color: var(--hairline);
	--cc-overlay-bg: rgba(74, 74, 82, 0.35);
}

#cc-main .cm,
#cc-main .pm {
	border: 1px solid var(--hairline);
	box-shadow: 0 12px 40px rgba(74, 74, 82, 0.10);
}

#cc-main .cm__title,
#cc-main .pm__title {
	font-weight: var(--fw-regular);
	letter-spacing: var(--tracking-tight);
}

#cc-main .cm__btn,
#cc-main .pm__btn {
	font-weight: var(--fw-regular);
}

#cc-main .cm__desc a,
#cc-main .pm__section-desc a {
	color: var(--accent-text);
}

/* Accept and Reject the same width, so neither looks like the main button. */
#cc-main .cm.cm--box.cm--wide .cm__btn,
#cc-main .pm .pm__btn {
	min-width: 128px;
}

/* The settings rows square, as the site's cards are. */
#cc-main .pm__section--toggle,
#cc-main .pm__section--toggle .pm__section-title,
#cc-main .pm__section-desc-wrapper {
	border-radius: 0;
}

/* The library spaces the pair with a margin, which makes the second button narrower. */
@media (min-width: 641px) {
	#cc-main .cm--wide .cm__btn-group { gap: .375rem; }
	#cc-main .cm--wide .cm__btn-group .cm__btn + .cm__btn { margin-left: 0; }
}