/* Daily Keys Collective landing page + commitment screen.
   Loaded only on templates/daily-keys-collective.php.

   Colours come from BuddyBoss's own custom properties so the page cannot drift
   from the rest of the site when the theme palette changes. Fallbacks are the
   values read off production on 2026-08-23.

   Fonts are deliberately NOT set: headings already inherit Neulis Sans and body
   text Gilory from the site-wide rules. See includes/additional-css.php.

   HEADING RULES ARE SCOPED WITH .dkc-page ON PURPOSE. Elementor's global kit
   styles every heading on the site as `.elementor-kit-296 h1` etc, which has
   the SAME specificity as a bare `.dkc-card h2` and loads after this file - so
   the plain selector loses and the card headings render at 48px. The extra
   `.dkc-page` wins it without needing !important anywhere.

   The site-wide Title Case on headings also comes from that kit, and is left
   alone deliberately: every other page reads that way, and one page quietly
   breaking the convention looks like a mistake rather than a choice. */

/* CENTRED, ALL OF IT - Jeremy, 2026-09-06. The hero used to sit left while the
   action block below it was centred, so the page had two different spines. One
   declaration here rather than one per element, because every future block on
   this page should inherit the same choice. The commitment checkboxes keep
   their own `text-align: left` further down: a list of promises to read and
   tick is not display copy. */

.dkc-page {
	max-width: 46rem;
	margin: 0 auto;
	padding: 3.5rem 1.25rem 5rem;
	color: var(--bb-body-text-color, #000);
	text-align: center;
}

/* ---- hero ---- */

.dkc-page .dkc-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-primary-color, #50c450);
}

.dkc-page .dkc-title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 6vw, 3rem);
	line-height: 1.1;
	color: var(--bb-headings-color, #000);
}

.dkc-page .dkc-lede {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--bb-alternate-text-color, #696a6d);
}

/* ---- the three cards ---- */

.dkc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1rem;
	margin: 2.75rem 0 0;
}

.dkc-card {
	padding: 1.375rem 1.25rem;
	background: var(--bb-content-background-color, #fff);
	border: 1px solid var(--bb-content-border-color, #d6d9dd);
	border-radius: 10px;
}

.dkc-page .dkc-card h2 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--bb-headings-color, #000);
}

.dkc-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--bb-alternate-text-color, #696a6d);
}

/* ---- the private-room note ---- */

.dkc-private {
	margin: 1rem 0 0;
	padding: 1.125rem 1.25rem;
	background: var(--bb-content-alternate-background-color, #fcfcfc);
	border: 1px solid var(--bb-content-border-color, #d6d9dd);
	border-radius: 10px;
}

.dkc-private p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--bb-alternate-text-color, #696a6d);
}

/* ---- the action block ---- */

.dkc-action {
	margin: 2.5rem 0 0;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--bb-content-background-color, #fff);
	border: 1px solid var(--bb-content-border-color, #d6d9dd);
	border-radius: 10px;
	text-align: center;
}

.dkc-action--calm {
	background: var(--bb-content-alternate-background-color, #fcfcfc);
}

.dkc-price {
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
	color: var(--bb-alternate-text-color, #696a6d);
}

.dkc-price strong {
	font-size: 1.5rem;
	color: var(--bb-body-text-color, #000);
}

.dkc-included {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bb-primary-color, #50c450);
}

.dkc-page .dkc-action-title {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
	color: var(--bb-headings-color, #000);
}

.dkc-action-body {
	margin: 0 auto 1.5rem;
	max-width: 34rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--bb-alternate-text-color, #696a6d);
}

.dkc-action-note {
	margin: 1rem auto 0;
	max-width: 34rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--bb-alternate-text-color, #696a6d);
}

/* ---- the commitment checkbox ---- */

.dkc-check {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	max-width: 32rem;
	margin: 0 auto 1.25rem;
	padding: 0.9375rem 1rem;
	text-align: left;
	background: var(--bb-content-alternate-background-color, #fcfcfc);
	border: 1px solid var(--bb-content-border-color, #d6d9dd);
	border-radius: 8px;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.dkc-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0 0;
	accent-color: var(--bb-primary-color, #50c450);
	cursor: pointer;
}

/* Ticking it is the decision, so let the box say so. :has() is only an
   enhancement - the `required` attribute is what actually enforces it, with no
   JavaScript involved. */
.dkc-check:has(input:checked) {
	border-color: var(--bb-primary-color, #50c450);
	background: var(--bb-content-background-color, #fff);
}

/* ---- the button ----
   BuddyBoss styles every <button> with a green fill, padding, a min-width AND a
   box-shadow, and `all: unset` does not beat the shadow once later rules apply.
   So this states everything it wants explicitly rather than resetting. Same
   lesson as the Momentum calendar - see CLAUDE.md section 16.

   font-family is one of them, and it is not obvious: the theme sets buttons in
   "Basic Sans Regular Italic", so the <button> rendered in italics while the
   <a> beside it did not. Inheriting makes the two identical. */

.dkc-page .dkc-button {
	display: inline-block;
	font-family: inherit !important;
	font-style: normal !important;
	min-width: 0 !important;
	padding: 0.8125rem 1.75rem !important;
	border: 0 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	background: var(--bb-primary-color, #50c450) !important;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
}

.dkc-page .dkc-button:hover,
.dkc-page .dkc-button:focus {
	filter: brightness(0.94);
	color: #fff !important;
}

.dkc-commit {
	margin: 0;
}

@media (max-width: 480px) {

	.dkc-page {
		padding-top: 2.25rem;
	}

	.dkc-page .dkc-button {
		display: block;
		width: 100%;
	}
}

/* ---- THE LETTER AND THE DESCRIPTION ---- 2026-09-03

   Jeremy asked for this page to be "very minimalist", in the voice of the
   personal invitation he sent the first members. So the three-card grid that
   used to sit here is gone: cards chop a letter into boxes and make it read
   like a brochure, which is the one thing this page must not sound like.

   It is one column of prose at a reading measure instead, with the same type
   scale as the rest of the page. */

.dkc-what {
	max-width: 34rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.dkc-what {
	margin-bottom: 3rem;
}

.dkc-page .dkc-what p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* The one line the whole page turns on. */
.dkc-page .dkc-what-lead {
	font-size: 1.1875rem;
	font-weight: 600;
}

.dkc-page .dkc-what h2 {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The live sessions line is a list of three things in a page with no lists.
   Set apart quietly rather than bulleted. */
.dkc-page .dkc-what-extra {
	padding-top: 0.4rem;
	color: var(--bb-alternate-text-color, #5a6370);
}

/* ---- TWO THINGS THE FIRST DRAFT GOT WRONG ---- 2026-09-03

   SENTENCE CASE. The theme sets `text-transform: capitalize` on headings, so
   "One musical thing, every day." rendered as "One Musical Thing, Every Day."
   Title Case is a brochure voice, and this page is a letter - the whole point
   of the rewrite was that it sounds like Jeremy talking, not marketing.

   AIR UNDER THE HERO. Measured: zero gap between the lede and "Hey - I'm
   Jeremy", so the introduction ran straight out of the strapline and the two
   read as one paragraph. */

.dkc-page .dkc-title {
	text-transform: none !important;
}

.dkc-hero {
	margin-bottom: 2.75rem;
}