/*
 * Karaoke Kubo Design System components, as opt-in WordPress block styles.
 * Pick them in a block's Styles panel; nothing here applies to a block until you do.
 * Source: "Karaoke Kubo Design System" (claude.ai design system, Oct 2026): hard ink borders,
 * hard offset shadows (no blur), square-ish corners (no pills), hover lifts -1px / press +1px.
 */

/* ---------- Buttons: Primary (blue) / Warm (yellow) / Soft (pink) / Dark ---------- */
.wp-block-button[class*="is-style-kkb-"] .wp-block-button__link {
	border: var(--wp--custom--border--thick) solid var(--wp--preset--color--custom-color-5);
	border-radius: var(--wp--custom--radius--button);
	box-shadow: 5px 5px 0 0 var(--wp--preset--color--custom-color-5);
	font-family: var(--wp--preset--font-family--eastman-condensed-alt);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	padding: 13px 24px;
	text-transform: uppercase;
	transition:
		transform var(--wp--custom--duration--fast) var(--wp--custom--ease--pop),
		box-shadow var(--wp--custom--duration--med) var(--wp--custom--ease--smooth);
}
.wp-block-button[class*="is-style-kkb-"] .wp-block-button__link:hover,
.wp-block-button[class*="is-style-kkb-"] .wp-block-button__link:focus-visible {
	transform: translate(-1px, -1px);
}
.wp-block-button[class*="is-style-kkb-"] .wp-block-button__link:active {
	transform: translate(1px, 1px);
}
.wp-block-button.is-style-kkb-primary .wp-block-button__link,
.wp-block-button.is-style-kkb-primary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--custom-color-3);
	/* White, not cream: cream on blue is 4.49:1 (just under the 4.5:1 minimum); white is 5.26:1. */
	color: var(--wp--preset--color--ti-bg);
}
.wp-block-button.is-style-kkb-warm .wp-block-button__link,
.wp-block-button.is-style-kkb-warm .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--custom-color-4);
	color: var(--wp--preset--color--custom-color-5);
}
.wp-block-button.is-style-kkb-soft .wp-block-button__link,
.wp-block-button.is-style-kkb-soft .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--custom-color-2);
	color: var(--wp--preset--color--custom-color-5);
}
.wp-block-button.is-style-kkb-dark .wp-block-button__link,
.wp-block-button.is-style-kkb-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--custom-color-5);
	box-shadow: 5px 5px 0 0 var(--wp--preset--color--custom-color-3);
	color: var(--wp--preset--color--custom-color-4);
}

/* ---------- Card (room cards, info panels): white by default; pick Pink soft / Yellow soft in Color ---------- */
:where(.wp-block-group.is-style-kkb-card) {
	background-color: var(--wp--preset--color--ti-bg);
}
/* Padding needs real specificity: core zeroes side padding on nested .has-global-padding groups.
   Padding set in the block's Dimensions panel is inline, so it still wins. */
.wp-block-group.is-style-kkb-card {
	padding: 20px 24px;
	border: var(--wp--custom--border--card) solid var(--wp--preset--color--custom-color-5);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 6px 6px 0 0 var(--wp--preset--color--custom-color-5);
}

/* Cards and FAQ cards keep their own colours inside a coloured section (Section: Blue / Dark / …),
   unless a text colour was picked for the card itself. */
.wp-block-group.is-style-kkb-card:not(.has-text-color),
.wp-block-details.is-style-kkb-faq:not(.has-text-color) {
	color: var(--wp--preset--color--custom-color-5);
}
.wp-block-group.is-style-kkb-card:not(.has-text-color) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--custom-color-3);
}
.wp-block-group.is-style-kkb-card:not(.has-link-color) a:where(:not(.wp-element-button)),
.wp-block-details.is-style-kkb-faq:not(.has-link-color) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--kkb-blue-deep);
}

/* ---------- Headings: the logo's signature display treatment (use sparingly: heroes, section starters) ---------- */
.is-style-kkb-display-shadow {
	color: var(--wp--preset--color--custom-color-4);
	text-shadow:
		0.04em 0.04em 0 var(--wp--preset--color--custom-color-5),
		0.08em 0.08em 0 var(--wp--preset--color--custom-color-5);
	text-transform: uppercase;
}
.is-style-kkb-display-shadow-blue {
	color: var(--wp--preset--color--custom-color-2);
	text-shadow:
		0.04em 0.04em 0 var(--wp--preset--color--custom-color-3),
		0.08em 0.08em 0 var(--wp--preset--color--custom-color-3);
	text-transform: uppercase;
}

/* ---------- Paragraphs: Eyebrow label, Accent (Skia, a few words only) ---------- */
p.is-style-kkb-eyebrow {
	color: var(--wp--preset--color--custom-color-3);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.is-style-kkb-accent,
.has-skia-font-family {
	font-variation-settings: 'wght' 1, 'wdth' 1;
}
.is-style-kkb-accent {
	font-family: var(--wp--preset--font-family--skia);
	letter-spacing: 0.01em;
}

/* ---------- FAQ card (Details block): ink-bordered card, + turns to ×, blue offset when open ---------- */
.wp-block-details.is-style-kkb-faq {
	background: var(--wp--preset--color--kkb-paper);
	border: var(--wp--custom--border--card) solid var(--wp--preset--color--custom-color-5);
	border-radius: 14px;
	padding: 16px 20px;
	transition: box-shadow var(--wp--custom--duration--med) var(--wp--custom--ease--smooth);
}
.wp-block-details.is-style-kkb-faq[open] {
	box-shadow: 6px 6px 0 0 var(--wp--preset--color--custom-color-3);
}
.wp-block-details.is-style-kkb-faq > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: 16px;
	justify-content: space-between;
	list-style: none;
}
.wp-block-details.is-style-kkb-faq > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.is-style-kkb-faq > summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--eastman-condensed-alt);
	font-size: 28px;
	line-height: 1;
	transition: transform var(--wp--custom--duration--med) var(--wp--custom--ease--pop);
}
.wp-block-details.is-style-kkb-faq[open] > summary::after {
	transform: rotate(45deg);
}
.wp-block-details.is-style-kkb-faq[open] > summary {
	margin-bottom: 12px;
}

/* ---------- Image: offset frame ---------- */
.wp-block-image.is-style-kkb-frame img {
	border: var(--wp--custom--border--card) solid var(--wp--preset--color--custom-color-5);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 6px 6px 0 0 var(--wp--preset--color--custom-color-5);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button[class*="is-style-kkb-"] .wp-block-button__link,
	.wp-block-details.is-style-kkb-faq,
	.wp-block-details.is-style-kkb-faq > summary::after {
		transition: none;
	}
}