/**
 * Skin Care shortcode layout
 *
 * Styles featured-topic buttons, expandable area cards and article
 * chrome. Appearance (colours, type, outer chrome) is driven by
 * `--sc-*` custom properties on `.sc-care`. Defaults fall back to the
 * theme Zen palette (`--cc-*`) when present, then to the hex values
 * below. Grids, gaps, radii, details/summary behaviour and breakpoints
 * stay as layout — override tokens, not those rules.
 *
 * Per-page restyle (Additional CSS, or a wrapping Gutenberg Group class):
 *
 *   .page-id-42 .sc-care {
 *     --sc-bg: transparent;
 *     --sc-padding: 0;
 *     --sc-max-width: none;
 *     --sc-color: #1a1a1a;
 *     --sc-font-size: 16px;
 *   }
 *
 * Tokens: --sc-bg, --sc-bg-alt, --sc-bg-surface, --sc-bg-hover,
 * --sc-bg-content, --sc-color, --sc-color-accent, --sc-border,
 * --sc-divider, --sc-font-family, --sc-font-size, --sc-font-size-title,
 * --sc-font-size-area, --sc-font-size-group, --sc-font-size-intro,
 * --sc-font-size-body, --sc-font-size-heading, --sc-font-size-article-title,
 * --sc-font-size-label, --sc-font-size-approval, --sc-font-size-approval-heading,
 * --sc-padding, --sc-max-width, --sc-max-width-article.
 *
 * Enqueued only on the list page and /skin-care/{slug}/ — see
 * skin_care_enqueue() in skin-care.php.
 *
 * Maintainer guide: dev/doc/guides/theming.md
 */

.sc-care {
	--sc-bg: var(--cc-bg, #f5f1e8);
	--sc-bg-alt: var(--cc-stone, #e8dfd0);
	--sc-bg-surface: #ffffff;
	--sc-bg-hover: #f7f3eb;
	--sc-bg-content: #faf8f3;
	--sc-color: var(--cc-secondary, #2f3e3a);
	--sc-color-accent: var(--cc-primary, #6b8e7f);
	--sc-border: #d8cfc0;
	--sc-divider: #eee7dc;
	--sc-font-family: var(--cc-font-family, inherit);
	--sc-font-size: 15px;
	--sc-font-size-title: clamp(23px, 3vw, 30px);
	--sc-font-size-area: clamp(22px, 2.6vw, 28px);
	--sc-font-size-group: 18px;
	--sc-font-size-intro: 16px;
	--sc-font-size-body: 17px;
	--sc-font-size-heading: clamp(20px, 2.4vw, 26px);
	--sc-font-size-article-title: clamp(28px, 4vw, 40px);
	--sc-font-size-label: 12px;
	--sc-font-size-approval: 14px;
	--sc-font-size-approval-heading: 16px;
	--sc-padding: 56px 24px 72px;
	--sc-max-width: 1080px;
	--sc-max-width-article: 760px;

	font-family: var(--sc-font-family);
	font-size: var(--sc-font-size);
	color: var(--sc-color);
	background: var(--sc-bg);
	padding: var(--sc-padding);
}

.sc-care__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
}

.sc-care__featured {
	margin-bottom: 40px;
	padding: clamp(24px, 4vw, 36px);
	background: var(--sc-bg-alt);
	border: 1px solid var(--sc-border);
	border-radius: 16px;
}

.sc-care__featured-title {
	font-size: var(--sc-font-size-title);
	line-height: 1.2;
	/* Beat child-theme `h1, h2 { color: … !important }` so --sc-color wins. */
	color: var(--sc-color) !important;
	font-weight: 600;
	margin: 0 0 24px;
}

.sc-care__featured-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}

.sc-care__area {
	margin: 0 0 48px;
	overflow: hidden;
	background: var(--sc-bg-surface);
	border: 1px solid var(--sc-border);
	border-radius: 18px;
	box-shadow: 0 8px 28px rgba(47, 62, 58, .08);
	scroll-margin-top: 96px;
}

.sc-care__area:last-child {
	margin-bottom: 0;
}

.sc-care__area-summary {
	display: block;
	cursor: pointer;
	list-style: none;
	background: var(--sc-bg-surface);
}

.sc-care__area-summary::-webkit-details-marker {
	display: none;
}

.sc-care__area-summary::marker {
	display: none;
	content: "";
}

.sc-care__area-summary:focus {
	outline: none;
}

.sc-care__area-summary:focus-visible {
	outline: 3px solid var(--sc-color-accent);
	outline-offset: -3px;
}

.sc-care__area-hero {
	display: block;
}

.sc-care__area-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 7;
	background: var(--sc-bg-alt);
}

.sc-care__area-ai-label {
	display: block;
	box-sizing: border-box;
	padding: 8px clamp(22px, 4vw, 34px) 0;
	color: var(--sc-color-accent);
	font-size: var(--sc-font-size-label);
	font-weight: 400;
	line-height: 1.4;
	text-align: right;
}

.sc-care__area-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.sc-care__area-summary:hover .sc-care__area-image {
	transform: scale(1.02);
}

.sc-care__area-copy {
	display: block;
	padding: clamp(22px, 4vw, 34px);
}

.sc-care__area-title {
	display: block;
	font-size: var(--sc-font-size-area);
	line-height: 1.2;
	color: var(--sc-color);
	font-weight: 600;
	margin: 0 0 10px;
}

.sc-care__area-title::first-letter,
.sc-care__area-title :first-child::first-letter {
	text-transform: uppercase;
}

.sc-care__area-intro {
	display: block;
	max-width: var(--sc-max-width-article);
	margin: 0;
	color: var(--sc-color);
	font-size: var(--sc-font-size-intro);
	line-height: 1.6;
}

.sc-care__area-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	color: var(--sc-color-accent);
	font-size: var(--sc-font-size);
	font-weight: 600;
}

.sc-care__area-chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.sc-care__area[open] .sc-care__area-chevron {
	transform: rotate(225deg);
}

.sc-care__area-content {
	padding: clamp(22px, 4vw, 34px);
	border-top: 1px solid var(--sc-divider);
	background: var(--sc-bg-content);
}

.entry-content a.sc-care__featured-btn,
.sc-care a.sc-care__featured-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	width: 100%;
	padding: 11px 14px;
	background: var(--sc-bg-surface);
	border: 1px solid var(--sc-border);
	border-radius: 10px;
	color: var(--sc-color);
	text-decoration: none;
	-webkit-text-decoration: none;
	font-size: var(--sc-font-size);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.entry-content a.sc-care__featured-btn:visited,
.sc-care a.sc-care__featured-btn:visited {
	color: var(--sc-color);
	text-decoration: none;
}

.entry-content a.sc-care__featured-btn:hover,
.entry-content a.sc-care__featured-btn:focus,
.entry-content a.sc-care__featured-btn:focus-visible,
.sc-care a.sc-care__featured-btn:hover,
.sc-care a.sc-care__featured-btn:focus,
.sc-care a.sc-care__featured-btn:focus-visible {
	background: var(--sc-bg-hover);
	border-color: var(--sc-color-accent);
	color: var(--sc-color);
	text-decoration: none;
}

.sc-care__groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 20px;
}

.sc-care__group {
	overflow: hidden;
	background: var(--sc-bg-surface);
	border: 1px solid var(--sc-border);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(47, 62, 58, .05);
}

.sc-care__group-title {
	margin: 0;
	padding: 12px 18px;
	background: var(--sc-bg-alt);
	/* Beat child-theme `h3 { color: … !important }` so --sc-color wins. */
	color: var(--sc-color) !important;
	font-size: var(--sc-font-size-group);
	font-weight: 600;
	line-height: 1.25;
}

.sc-care__group-title::first-letter,
.sc-care__group-title :first-child::first-letter {
	text-transform: uppercase;
}

.sc-care__group-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-care__group-list li {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sc-divider);
}

.sc-care__group-list li:first-child {
	border-top: 0;
}

.entry-content a.sc-care__list-link,
.sc-care a.sc-care__list-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 44px;
	padding: 10px 16px;
	color: var(--sc-color);
	text-decoration: none;
	-webkit-text-decoration: none;
	font-size: var(--sc-font-size);
	line-height: 1.35;
	transition: background .15s ease, color .15s ease;
}

.entry-content a.sc-care__list-link:visited,
.sc-care a.sc-care__list-link:visited {
	color: var(--sc-color);
	text-decoration: none;
}

.entry-content a.sc-care__list-link:hover,
.entry-content a.sc-care__list-link:focus,
.entry-content a.sc-care__list-link:focus-visible,
.sc-care a.sc-care__list-link:hover,
.sc-care a.sc-care__list-link:focus,
.sc-care a.sc-care__list-link:focus-visible {
	background: var(--sc-bg-hover);
	color: var(--sc-color);
	text-decoration: none;
}

.sc-care__list-arrow {
	flex: 0 0 auto;
	color: var(--sc-color-accent);
	font-size: 22px;
	line-height: 1;
	transition: transform .15s ease;
}

.sc-care__list-link:hover .sc-care__list-arrow,
.sc-care__list-link:focus-visible .sc-care__list-arrow {
	transform: translateX(3px);
}

.sc-care--article .sc-care__inner {
	max-width: var(--sc-max-width-article);
}

.sc-care__back {
	margin: 0 0 20px;
}

.entry-content .sc-care__back a,
.sc-care__back a {
	color: var(--sc-color-accent);
	font-weight: 500;
	text-decoration: none;
}

.entry-content .sc-care__back a:hover,
.entry-content .sc-care__back a:focus-visible,
.sc-care__back a:hover,
.sc-care__back a:focus-visible {
	text-decoration: underline;
}

.sc-care__title {
	margin: 0 0 8px;
	color: var(--sc-color) !important;
	font-size: var(--sc-font-size-article-title);
	font-weight: 600;
	line-height: 1.2;
}

.sc-care__meta {
	margin: 0 0 24px;
	color: var(--sc-color-accent);
	font-size: var(--sc-font-size);
	font-weight: 500;
}

.sc-care__body {
	color: var(--sc-color);
	font-size: var(--sc-font-size-body);
	line-height: 1.7;
}

.sc-care__body p,
.sc-care__summary p {
	margin: 0 0 16px;
	color: var(--sc-color);
	font-size: var(--sc-font-size-body);
	line-height: 1.7;
}

.sc-care__body h2 {
	margin: 28px 0 12px;
	color: var(--sc-color) !important;
	font-size: var(--sc-font-size-heading);
	font-weight: 600;
	line-height: 1.3;
}

.sc-care__body h3 {
	margin: 22px 0 10px;
	color: var(--sc-color) !important;
	font-size: var(--sc-font-size-group);
	font-weight: 600;
	line-height: 1.35;
}

.sc-care__body ul,
.sc-care__body ol {
	margin: 0 0 16px;
	padding-left: 1.3em;
}

.sc-care__body li {
	margin: 0 0 8px;
}

.sc-care__body a {
	color: var(--sc-color-accent);
}

.sc-care__approval {
	margin-top: 28px;
	color: var(--sc-color-accent);
	font-size: var(--sc-font-size-approval);
	line-height: 1.6;
}

.sc-care__body .sc-care__approval h2 {
	margin: 0 0 8px;
	color: var(--sc-color-accent) !important;
	font-size: var(--sc-font-size-approval-heading);
	font-weight: 600;
	line-height: 1.35;
}

.sc-care__body .sc-care__approval p,
.sc-care__body .sc-care__approval li {
	margin: 0 0 4px;
	color: var(--sc-color-accent);
	font-size: var(--sc-font-size-approval);
	line-height: 1.6;
}

.sc-care__body hr {
	margin: 28px 0;
	border: 0;
	border-top: 1px solid var(--sc-border);
}

.sc-care__disclaimer {
	margin: 24px 0 0;
	color: var(--sc-color-accent);
	font-size: var(--sc-font-size);
	font-style: italic;
	line-height: 1.7;
}

.sc-care__next {
	margin: 16px 0 0;
	color: var(--sc-color);
	font-size: var(--sc-font-size-intro);
	line-height: 1.7;
}

.entry-content .sc-care__next a,
.sc-care__next a {
	color: var(--sc-color-accent);
}

@media (max-width: 900px) {
	.sc-care__featured-buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-care__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sc-care__related {
	margin: 32px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--sc-divider, #e0d6c8);
}

.sc-care__related-title {
	margin: 0 0 12px;
	font-size: var(--sc-font-size-heading);
	font-weight: 600;
}

.sc-care__related-list {
	margin: 0;
	padding-left: 1.3em;
}

.sc-care__related-list a {
	color: var(--sc-color-accent);
}

@media (max-width: 768px) {
	.sc-care {
		--sc-padding: 40px 18px 56px;
	}

	.sc-care__area {
		margin-bottom: 32px;
	}

	.sc-care__area-media {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 560px) {
	.sc-care__featured-buttons,
	.sc-care__groups {
		grid-template-columns: 1fr;
	}
}