/*
 * Phase 1.1 component differentiation.
 * Loaded after front.css so existing article classes receive the new design
 * without changing stored Gutenberg markup. Comparison table rules are not
 * overridden here.
 */

:is(.kdn-ap-article, .editor-styles-wrapper) h2.wp-block-heading:is(.is-style-kdn-section, .is-style-kdn-section-numbered) {
	margin-block: clamp(36px, 7vw, 56px) 20px;
}

:is(.kdn-ap-article, .editor-styles-wrapper) h3.wp-block-heading.is-style-kdn-subsection {
	margin-block: clamp(28px, 5vw, 42px) 14px;
}

/* Remove the shared card silhouette. Each semantic part defines its own shape. */
:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap {
	margin-block: var(--kdn-ap-space-block);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap__label {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap__label::before {
	display: none;
}

/* Answer: the strongest opening part, with an elevated label tab. */
:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--answer {
	padding: 24px clamp(16px, 3vw, 22px) 16px;
	border-left: 5px solid #dd7e83;
	border-radius: 4px 18px 18px 18px;
	background: linear-gradient(115deg, #fff0ed 0%, #fff8f5 74%, #fff 100%);
	box-shadow: 0 7px 20px rgba(181, 77, 87, 0.09);
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--answer .kdn-ap__label {
	position: absolute;
	left: 14px;
	top: -12px;
	display: inline-flex;
	gap: 0.45em;
	padding: 5px 12px 5px 8px;
	border-radius: 999px;
	background: var(--kdn-ap-pink-ink);
	box-shadow: 0 3px 9px rgba(181, 77, 87, 0.16);
	color: #fff;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--answer .kdn-ap__label::before {
	content: "✓";
	display: grid;
	width: 1.25em;
	height: 1.25em;
	place-items: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 0.78em;
	line-height: 1;
}

/* Question: a person outside a true speech bubble. */
:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--question {
	min-height: 64px;
	margin-left: 64px;
	padding: 13px 16px;
	border: 2px solid #8fc8c2;
	border-radius: 18px 18px 18px 5px;
	background: #fff;
	box-shadow: var(--kdn-ap-shadow-soft);
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--question::before {
	content: "";
	position: absolute;
	left: -64px;
	top: 2px;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #fff1ef url("../icons/mama.svg") center / cover no-repeat;
	box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(33, 68, 62, 0.1);
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--question::after {
	left: -8px;
	bottom: 14px;
	width: 14px;
	height: 14px;
	border: 0;
	border-left: 2px solid #8fc8c2;
	border-bottom: 2px solid #8fc8c2;
	background: #fff;
	transform: rotate(45deg);
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--question .kdn-ap__label {
	margin-bottom: 0.2em;
	color: var(--kdn-ap-pink-ink);
	font-size: 0.78rem;
}

/* Point: a short highlighted strip, not another body card. */
:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--point {
	padding: 11px 14px 11px 17px;
	border-left: 4px solid #e3ad43;
	border-radius: 0 10px 10px 0;
	background: linear-gradient(90deg, #fff6dd, rgba(255, 248, 232, 0.35));
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--point .kdn-ap__label {
	display: inline-flex;
	margin-bottom: 0.2em;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f3c66b;
	color: #64420f;
	font-size: 0.73rem;
	letter-spacing: 0.06em;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--point p:not(.kdn-ap__label) {
	font-weight: 600;
}

/* Family story: a small editorial note with a folded-paper corner. */
:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--family {
	overflow: hidden;
	padding: 15px 44px 15px 17px;
	border-top: 3px solid #67aeba;
	border-radius: 5px 5px 17px 5px;
	background: linear-gradient(135deg, #edf8fb, #f9fdfe 72%);
	box-shadow: var(--kdn-ap-shadow-soft);
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--family::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 28px;
	height: 28px;
	background: linear-gradient(225deg, #fff 0 48%, #c9e7ec 50% 100%);
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--family .kdn-ap__label {
	display: flex;
	gap: 0.55em;
	margin-bottom: 0.35em;
	color: var(--kdn-ap-blue-ink);
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--family .kdn-ap__label::before {
	content: "";
	display: block;
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	margin-top: -0.25rem;
	border-radius: 999px;
	background: url("../icons/family.svg") center / cover no-repeat;
}

/* Warning: urgency is expressed by a red side rail and explicit symbol. */
:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--warning {
	padding: 13px 15px 13px 17px;
	border-left: 5px solid #d76569;
	border-radius: 0 12px 12px 0;
	background: #fff2ef;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--warning .kdn-ap__label {
	display: flex;
	gap: 0.45em;
	margin-bottom: 0.25em;
	color: #9e3f47;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--warning .kdn-ap__label::before {
	content: "!";
	display: grid;
	width: 1.35em;
	height: 1.35em;
	place-items: center;
	border-radius: 3px;
	background: #d76569;
	color: #fff;
	font-size: 0.78em;
	line-height: 1;
}

/* Confirm: a calm open row, intentionally unlike the warning rail. */
:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--confirm {
	min-height: 46px;
	padding: 10px 4px 10px 46px;
	border-top: 1px dashed #9ac8b4;
	border-bottom: 1px dashed #9ac8b4;
	background: transparent;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--confirm::before {
	content: "✓";
	position: absolute;
	left: 6px;
	top: 13px;
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 2px solid #78ae95;
	border-radius: 999px;
	background: #fff;
	color: #397158;
	font-weight: 700;
	line-height: 1;
}

:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--confirm .kdn-ap__label {
	margin-bottom: 0.15em;
	color: var(--kdn-ap-mint-ink);
}

/* Lists: the items, not a large container, carry the visual structure. */
:is(.kdn-ap-article, .editor-styles-wrapper) :is(ul.is-style-kdn-checklist, ul.is-style-kdn-icon-list, ol.is-style-kdn-steps) {
	margin-block: var(--kdn-ap-space-block);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

:is(.kdn-ap-article, .editor-styles-wrapper) :is(ul.is-style-kdn-checklist, ul.is-style-kdn-icon-list) > li {
	padding-left: 1.75em;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ul.is-style-kdn-checklist > li {
	padding-block: 0.45em;
	border-bottom: 1px dotted #c4d8ce;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ul.is-style-kdn-checklist > li + li {
	margin-top: 0.15em;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ul.is-style-kdn-checklist > li::before {
	top: 0.72em;
	background: #fff;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ul.is-style-kdn-icon-list > li {
	padding-block: 0.12em;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ul.is-style-kdn-icon-list > li + li {
	margin-top: 0.35em;
}

/* Gutenberg can leave a trailing empty list item; never draw a marker for it. */
:is(.kdn-ap-article, .editor-styles-wrapper) :is(ul.is-style-kdn-checklist, ul.is-style-kdn-icon-list) > li:empty,
:is(.kdn-ap-article, .editor-styles-wrapper) :is(ul.is-style-kdn-checklist, ul.is-style-kdn-icon-list) > li:has(> br:only-child),
:is(.kdn-ap-article, .editor-styles-wrapper) :is(ul.is-style-kdn-checklist, ul.is-style-kdn-icon-list) > li:has(> p:empty:only-child) {
	display: none;
}

/* Steps: open vertical timeline with a continuous guide. */
:is(.kdn-ap-article, .editor-styles-wrapper) ol.is-style-kdn-steps {
	position: relative;
	padding: 2px 0;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ol.is-style-kdn-steps::before {
	content: "";
	position: absolute;
	left: 0.96rem;
	top: 1.85rem;
	bottom: 1.85rem;
	width: 2px;
	background: linear-gradient(#8ac7c0, #d8ebe7);
}

:is(.kdn-ap-article, .editor-styles-wrapper) ol.is-style-kdn-steps > li {
	min-height: 2rem;
	padding: 0.1em 0 0.55em 2.8em;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ol.is-style-kdn-steps > li + li {
	margin-top: 0.45em;
}

:is(.kdn-ap-article, .editor-styles-wrapper) ol.is-style-kdn-steps > li::before {
	z-index: 1;
	box-shadow: 0 0 0 4px #fff;
}

@media (max-width: 599px) {
	:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--answer {
		padding: 22px 15px 14px;
	}

	:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--question {
		margin-left: 54px;
		padding: 11px 13px;
	}

	:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--question::before {
		left: -54px;
		width: 44px;
		height: 44px;
	}

	:is(.kdn-ap-article, .editor-styles-wrapper) .kdn-ap--family {
		padding: 13px 36px 13px 14px;
	}
}