/* ChugCheck Age 1.0.0
 *
 * The card carries its own colours rather than reading --cc-* from the body.
 * Every other ChugCheck component borrows the dark plugin's variables, and
 * that is right for a component inside a page. This one is laid over the WHOLE
 * site including pages the dark plugin has no opinion about, and a question
 * nobody can read because its ink matched a theme it was never over is a site
 * that appears to have gone down.
 */

.cc-age {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(8, 7, 5, .88);
	-webkit-backdrop-filter: saturate(140%) blur(7px);
	backdrop-filter: saturate(140%) blur(7px);
	font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cc-age[hidden] { display: none !important; }

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

.cc-age__card {
	width: 100%;
	max-width: 480px;
	padding: 44px 40px 32px;
	border-radius: 20px;
	background: #1A1713;
	box-shadow: inset 0 0 0 1px rgba(233, 231, 227, .13), 0 30px 70px rgba(0, 0, 0, .55);
	text-align: center;
	color: #F2EDE4;
}

.cc-age__kicker {
	margin: 0 0 18px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #C9A96A;
}

.cc-age__q {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.18;
	color: #F2EDE4;
}

.cc-age__sub {
	margin: 13px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #A79C8D;
}

.cc-age__buttons { display: flex; gap: 12px; margin: 28px 0 0; }
.cc-age__buttons[hidden] { display: none; }

/* The element as well as the class. A theme rule as ordinary as
   `.site button { background: … }` is one class and one element, which beats
   one class of ours -- and the way that loses here is the site's own colour
   on a card laid over every page of the site. */
.cc-age button.cc-age__yes,
.cc-age button.cc-age__no {
	flex: 1 1 0;
	padding: 15px 20px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.cc-age button.cc-age__yes { background: #C9A96A; color: #17130C; }
.cc-age button.cc-age__yes:hover { filter: brightness(1.07); }

.cc-age button.cc-age__no {
	background: transparent;
	color: #A79C8D;
	box-shadow: inset 0 0 0 1px rgba(233, 231, 227, .18);
}
.cc-age button.cc-age__no:hover { color: #F2EDE4; }

.cc-age button:focus-visible { outline: 2px solid #C9A96A; outline-offset: 3px; }

.cc-age__sorry { margin: 24px 0 0; }
.cc-age__sorry[hidden] { display: none; }
.cc-age__sorry p { margin: 0; font-size: 15px; line-height: 1.5; color: #F2EDE4; }
.cc-age__sorry:focus { outline: 0; }

.cc-age__fine {
	margin: 20px 0 0;
	font-size: 12.5px;
	color: #6F675C;
}

/* The card is 480 wide and a phone is 390. The breakpoint is 540 rather than
   420 so the step down happens while there is still room for it, instead of
   at the width where the card has already run out of gutter. */
@media (max-width: 540px) {
	.cc-age__card { padding: 32px 24px 24px; border-radius: 18px; }
	.cc-age__q { font-size: 23px; }
	.cc-age__sub { font-size: 14px; }
	.cc-age__buttons { flex-direction: column; gap: 10px; }
}

/* Somebody who prefers less movement gets no blur to resolve. */
@media (prefers-reduced-motion: reduce) {
	.cc-age { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 7, 5, .95); }
}