/**
 * IranDesigner corner-accent surface system.
 *
 * Decorative content surfaces keep their existing fill and elevation, but the
 * old full-spectrum contour is replaced by two short, directional corner
 * marks. Functional borders (fields, controls, focus rings and tables) are
 * intentionally outside this system.
 */

body.irandesigner-wp {
	--id-corner-accent-start: 65 151 165;
	--id-corner-accent-end: 189 87 63;
	--id-corner-accent-length: clamp(1.8rem, 4vw, 2.65rem);
	--id-corner-accent-stroke: 1.5px;
	--id-corner-accent-opacity: 0.86;
}

/* Existing card tones now colour the corner marks instead of the full edge. */
body.irandesigner-wp .public-color-card--lavender {
	--id-corner-accent-start: 111 92 178;
	--id-corner-accent-end: 65 151 165;
}

body.irandesigner-wp .public-color-card--cyan {
	--id-corner-accent-start: 65 151 165;
	--id-corner-accent-end: 209 154 88;
}

body.irandesigner-wp .public-color-card--mint {
	--id-corner-accent-start: 77 150 118;
	--id-corner-accent-end: 209 154 88;
}

body.irandesigner-wp .public-color-card--violet {
	--id-corner-accent-start: 138 58 77;
	--id-corner-accent-end: 111 92 178;
}

body.irandesigner-wp .public-color-card--cream {
	--id-corner-accent-start: 209 154 88;
	--id-corner-accent-end: 190 100 76;
}

body.irandesigner-wp.is-irandesigner-home .home-service-card {
	--id-corner-accent-start: var(--service-rgb, 65 151 165);
	--id-corner-accent-end: 209 154 88;
}

/* Remove legacy edge treatments before drawing the shared corner signature.
   Otherwise their long top rail and border-box gradient read as a second,
   unrelated border beside the two short corner marks. */
body.is-irandesigner-home.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.home-service-card__rail,
body.page-template-page-portfolio.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.id-portfolio-showcase-card::before {
	display: none;
	content: none;
}

	body.is-irandesigner-home.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.home-service-card.public-color-card {
	background: linear-gradient(
		145deg,
		color-mix(in srgb, rgb(var(--service-rgb)) 7%, #fff 93%),
		color-mix(in srgb, rgb(var(--service-rgb)) 3%, #fff 97%)
	);
	box-shadow:
		0 0 42px -32px rgb(45 39 51 / 46%),
		0 0 28px -23px rgb(var(--service-rgb) / 46%);
}

body.is-irandesigner-home.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.home-service-card.public-color-card:hover {
	box-shadow:
		0 0 52px -32px rgb(45 39 51 / 56%),
		0 0 34px -21px rgb(var(--service-rgb) / 54%);
}

body.is-irandesigner-home.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.home-portfolio-card.public-color-card,
body.page-template-page-portfolio.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.id-portfolio-showcase-card {
	background: linear-gradient(
		145deg,
		rgb(255 253 249 / 98%),
		rgb(249 245 240 / 96%)
	);
	box-shadow:
		0 0 42px -32px rgb(45 39 51 / 44%),
		0 0 30px -25px rgb(209 154 88 / 32%);
}

body.page-template-page-portfolio.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.id-portfolio-showcase-card:hover {
	box-shadow:
		0 0 50px -31px rgb(45 39 51 / 54%),
		0 0 34px -22px rgb(190 100 76 / 40%);
}

/* The editorial footer is nested inside the project card and carried its own
   panel radius. Keep its physical bottom-left corner square so it meets the
   shared bottom-left L accent instead of drawing a second rounded corner. */
body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.id-portfolio-showcase-card
	.id-portfolio-showcase-card__body {
	border-bottom-left-radius: 0;
	box-shadow: none;
}

body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.id-portfolio-showcase-card
	.id-portfolio-showcase-card__media {
	border-top-right-radius: 0;
	box-shadow: none;
}

/* FAQ rows are full-width disclosure rails rather than floating cards. Their
   four corners stay square; the circular summary control remains untouched. */
body.is-irandesigner-home.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	details.public-color-card,
body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	details.service-surface-card,
body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	:is(
	.id-expansion-faq,
	.id-modern-service-faq,
	.id-expansion-child-faq,
	.id-consulting-faq,
	.id-services-hub__faq,
	.id-service-faq
	)
	details {
	border-radius: 0;
}

/* Stable surface targets. The explicit utility is available for future cards;
   the component selectors migrate today's design without rewriting markup. */
body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	:is(
	.id-corner-surface,
	.home-service-card.public-color-card,
	.home-portfolio-card.public-color-card,
	.services-page-service-card.public-color-card,
	main article.public-color-card,
	main section.public-color-card,
	main div.public-color-card,
	main li.public-color-card,
	main details.public-color-card,
	.id-portfolio-showcase-card,
	.portfolio-approach-panel
	),
body.single-post.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.blog-article-content
	[data-blog-article-content]
	> :is(
	ul,
	ol,
	blockquote,
	details
	),
body.single-post.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.blog-article-content
	[data-blog-article-content]
	:is(
	.wp-block-image,
	figure:has(> img)
	),
body.single-post.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.id-article-toolbox {
	position: relative;
	isolation: isolate;
	border-width: 0;
	border-start-start-radius: 0;
	border-end-end-radius: 0;
}

/* Two diagonal corner brackets: start/top in the surface tone and end/bottom
   in its supporting tone. No pseudo-element participates in layout or input. */
body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	:is(
	.id-corner-surface,
	.home-service-card.public-color-card,
	.home-portfolio-card.public-color-card,
	.services-page-service-card.public-color-card,
	main article.public-color-card,
	main section.public-color-card,
	main div.public-color-card,
	main li.public-color-card,
	main details.public-color-card,
	.id-portfolio-showcase-card
	)::after,
body.single-post.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.blog-article-content
	[data-blog-article-content]
	> :is(
	ul,
	ol,
	blockquote,
	details
	)::after,
body.single-post.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.blog-article-content
	[data-blog-article-content]
	:is(
	.wp-block-image,
	figure:has(> img)
	)::after,
body.single-post.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.id-article-toolbox::after,
body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.portfolio-approach-panel::before {
	position: absolute;
	z-index: 12;
	inset: 0;
	width: auto;
	height: auto;
	display: block;
	pointer-events: none;
	border: 0;
	border-radius: inherit;
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgb(var(--id-corner-accent-start) / 94%) 64%,
			rgb(var(--id-corner-accent-start) / 94%) 100%
		) top right / var(--id-corner-accent-length) var(--id-corner-accent-stroke) no-repeat,
		linear-gradient(
			180deg,
			rgb(var(--id-corner-accent-start) / 94%) 0%,
			rgb(var(--id-corner-accent-start) / 94%) 36%,
			transparent 100%
		) top right / var(--id-corner-accent-stroke) var(--id-corner-accent-length) no-repeat,
		linear-gradient(
			90deg,
			rgb(var(--id-corner-accent-end) / 90%) 0%,
			rgb(var(--id-corner-accent-end) / 90%) 36%,
			transparent 100%
		) bottom left / var(--id-corner-accent-length) var(--id-corner-accent-stroke) no-repeat,
		linear-gradient(
			180deg,
			transparent 0%,
			rgb(var(--id-corner-accent-end) / 90%) 64%,
			rgb(var(--id-corner-accent-end) / 90%) 100%
		) bottom left / var(--id-corner-accent-stroke) var(--id-corner-accent-length) no-repeat;
	box-shadow: none;
	content: "";
	opacity: var(--id-corner-accent-opacity);
	transform: none;
	transition: opacity 180ms ease, filter 180ms ease;
}

/* Homepage service cards use a single signature corner. Keep the top-right
   corner square, restore the original lower-left curve, and remove the lower
   bracket so the rounded edge stays visually clean. */
body.is-irandesigner-home.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.home-service-card.public-color-card {
	border-end-end-radius: 1.75rem;
	border-bottom-left-radius: 1.75rem;
}

body.is-irandesigner-home.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	.home-service-card.public-color-card::after {
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgb(var(--id-corner-accent-start) / 94%) 64%,
			rgb(var(--id-corner-accent-start) / 94%) 100%
		) top right / var(--id-corner-accent-length) var(--id-corner-accent-stroke) no-repeat,
		linear-gradient(
			180deg,
			rgb(var(--id-corner-accent-start) / 94%) 0%,
			rgb(var(--id-corner-accent-start) / 94%) 36%,
			transparent 100%
		) top right / var(--id-corner-accent-stroke) var(--id-corner-accent-length) no-repeat;
}

body.irandesigner-wp :is(
	a.home-service-card,
	a.home-portfolio-card,
	a.services-page-service-card,
	a.id-corner-surface,
	article.id-portfolio-showcase-card
):is(:hover, :focus-visible)::after {
	opacity: 1;
	filter: saturate(1.08);
}

@media (max-width: 767px) {
	body.irandesigner-wp {
		--id-corner-accent-length: 1.65rem;
		--id-corner-accent-stroke: 1.25px;
		--id-corner-accent-opacity: 0.9;
	}
}

/* Shared editorial badges. The previous capsule radius made these labels feel
   like legacy filter pills. A compact, softly notched surface now carries the
   same hierarchy across hero and section labels without becoming a button. */
body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	:is(
	.home-hero-badge,
	.ui-media-1i,
	.ui-media-5r,
	.id-eyebrow,
	.id-specialist-kicker,
	.id-services-hub__kicker
	) {
	display: inline-flex;
	width: fit-content;
	min-height: 2.3rem;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.42rem 0.82rem;
	border: 1px solid rgb(65 151 165 / 18%);
	border-radius: 0.85rem;
	border-start-start-radius: 0.35rem;
	background: linear-gradient(
		145deg,
		rgb(255 255 255 / 92%),
		rgb(247 250 250 / 84%)
	);
	box-shadow:
		0 12px 28px -24px rgb(45 39 51 / 48%),
		inset 0 1px 0 rgb(255 255 255 / 84%);
	line-height: 1.45;
	backdrop-filter: blur(10px);
}

body.irandesigner-wp.irandesigner-exact-ui
	#site-top.site-shell
	main#primary-content
	:is(
	.home-hero-badge,
	.ui-media-1i,
	.ui-media-5r,
	.id-eyebrow,
	.id-specialist-kicker,
	.id-services-hub__kicker
	)
	:is(svg, .id-icon) {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 1.15rem;
}

@media (max-width: 767px) {
	body.irandesigner-wp.irandesigner-exact-ui
		#site-top.site-shell
		main#primary-content
		:is(
		.home-hero-badge,
		.ui-media-1i,
		.ui-media-5r,
		.id-eyebrow,
		.id-specialist-kicker,
		.id-services-hub__kicker
		) {
		min-height: 2.15rem;
		padding: 0.36rem 0.72rem;
		border-radius: 0.75rem;
		border-start-start-radius: 0.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.irandesigner-wp :is(
		.id-corner-surface,
		.home-service-card,
		.home-portfolio-card,
		.services-page-service-card,
		.public-color-card,
		.id-portfolio-showcase-card
	)::after,
	body.irandesigner-wp.single-post .blog-article-content [data-blog-article-content] > :is(
		ul,
		ol,
		blockquote,
		details
	)::after,
	body.irandesigner-wp.single-post .blog-article-content [data-blog-article-content] :is(
		.wp-block-image,
		figure:has(> img)
	)::after,
	body.irandesigner-wp.single-post .id-article-toolbox::after,
	body.irandesigner-wp .portfolio-approach-panel::before {
		transition: none;
	}
}