/* ==========================================================================
   SUDAIR PHARMA — HARVESTED SECTIONS
   Refinements applied to sections cloned from the template kit.

   Colour and typography already come across correctly, because the kit is
   token-driven and those tokens were remapped to Sudair. What this file does is
   the remaining work: neutralise the kit's rounder, softer, consumer-facing
   detailing and bring it in line with the restraint of a pharmaceutical
   corporate site. That is what stops the source being recognisable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared corrections across every harvested section
   -------------------------------------------------------------------------- */

/* The kit leans on very large pill radii. Corporate pharma reads squarer. */
.sud-harvest .elementor-widget-image img,
.sud-harvest .e-con-inner > .e-con,
.sud-harvest .elementor-image-carousel img {
	border-radius: var(--sud-radius) !important;
}

/* Kit buttons are wide and heavy — match the design-system pill button */
.sud-harvest .elementor-button {
	font-family: var(--sud-font-body) !important;
	font-size: var(--sud-text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: .01em !important;
	border-radius: 100px !important;
	padding: 0.95rem 1.75rem !important;
	transition: background var(--sud-dur) var(--sud-ease),
	            transform var(--sud-dur) var(--sud-ease),
	            box-shadow var(--sud-dur) var(--sud-ease) !important;
}

.sud-harvest .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 98, 65, .22);
}

/* Heading SIZES are deliberately not overridden here.
   They come from the kit's H1–H6 typography tokens, which have been remapped to
   Sudair's typeface and scale — that keeps the template's size hierarchy, which
   is the thing worth reusing. Only family, rhythm and wrapping are enforced. */
/* Family needs the same specificity treatment as size — Elementor's widget rules
   otherwise let headings fall back to the body face. */
.sud-harvest h1, .sud-harvest h2, .sud-harvest h3, .sud-harvest h4,
.sud-harvest .elementor-widget-heading .elementor-heading-title,
.sud-harvest .elementor-icon-box-title,
.sud-harvest .elementor-counter-number-wrapper {
	font-family: var(--sud-font-display) !important;
	text-wrap: balance;
}

/* Every heading in a harvested section must be legible on a light surface.
   The kit assigns some of them its "Light Text" colour because those sections
   were designed dark; on Sudair's white ground that renders near-invisible —
   one hero line measured 1.08:1.

   `!important` is used deliberately and narrowly. Elementor writes per-element
   colour rules into the page's own stylesheet at a specificity a theme cannot
   reach (`.elementor-86 .elementor-element-abc123 .elementor-heading-title`).
   This is the override of last resort, scoped to harvested sections on light
   ground; sections that are genuinely dark are excluded by class. */
.sud-harvest:not(.sud-h-cta):not(.sud-h-dark) h1,
.sud-harvest:not(.sud-h-cta):not(.sud-h-dark) h2,
.sud-harvest:not(.sud-h-cta):not(.sud-h-dark) h3,
.sud-harvest:not(.sud-h-cta):not(.sud-h-dark) h4,
.sud-harvest:not(.sud-h-cta):not(.sud-h-dark) .elementor-widget-heading .elementor-heading-title {
	color: var(--sud-ink) !important;
}

.sud-harvest:not(.sud-h-cta):not(.sud-h-dark) .elementor-icon-box-description,
.sud-harvest:not(.sud-h-cta):not(.sud-h-dark) .elementor-widget-text-editor {
	color: var(--sud-body);
}

/* Restore a real heading hierarchy.
   The kit points many H2s at the same display token as the H1, so both land at
   60px and the page reads flat. */
.sud-harvest .elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--sud-h2) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.14 !important;
}

.sud-harvest .elementor-widget-heading h3.elementor-heading-title {
	font-size: var(--sud-h3) !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.22 !important;
}

.sud-harvest p {
	font-family: var(--sud-font-body);
	line-height: 1.7;
	text-wrap: pretty;
}

/* The kit's eyebrow icon-boxes become Sudair eyebrows */
.sud-harvest .elementor-icon-box-title {
	font-family: var(--sud-font-display);
}

/* Generous section rhythm — the brief asks for white space, the kit is tighter */
.sud-harvest { padding-block: clamp(3.5rem, 6vw, 6.5rem); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sud-h-hero {
	background:
		radial-gradient(1100px 560px at 88% -18%, rgba(60, 180, 229, .20), transparent 62%),
		radial-gradient(900px 480px at -6% 8%, rgba(61, 174, 43, .16), transparent 60%),
		var(--sud-surface-2);
	padding-block: clamp(4rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem);
}

/* Hero heading size comes from the remapped "Heading / Display" token (60px). */

/* Hero buttons.
   The kit wires these to the "Light Text" global colour for BOTH background and
   label, so on a light surface the text is invisible. Both are set explicitly
   here rather than relying on a token the kit uses inconsistently. */
.sud-h-hero .elementor-button {
	background-color: var(--sud-green-700) !important;
	border-color: var(--sud-green-700) !important;
	color: #fff !important;
}

.sud-h-hero .elementor-button:hover {
	background-color: var(--sud-green-800) !important;
	border-color: var(--sud-green-800) !important;
	color: #fff !important;
}

/* Second button reads as the quieter, outlined option */
.sud-h-hero .e-con > .elementor-widget-button:nth-child(2) .elementor-button,
.sud-h-hero .elementor-widget-button + .elementor-widget-button .elementor-button {
	background-color: transparent !important;
	border-color: var(--sud-line) !important;
	color: var(--sud-green-700) !important;
}

.sud-h-hero .e-con > .elementor-widget-button:nth-child(2) .elementor-button:hover,
.sud-h-hero .elementor-widget-button + .elementor-widget-button .elementor-button:hover {
	background-color: var(--sud-green-700) !important;
	border-color: var(--sud-green-700) !important;
	color: #fff !important;
}

/* Floating stat card — squarer, quieter shadow than the kit's */
.sud-h-hero .e-con-inner > .e-con,
.sud-h-hero .elementor-widget-image img {
	box-shadow: var(--sud-shadow);
}

/* --------------------------------------------------------------------------
   About + statistics
   -------------------------------------------------------------------------- */

.sud-h-about .elementor-counter-number-wrapper {
	font-family: var(--sud-font-display) !important;
	font-weight: 800 !important;
	color: var(--sud-green-700) !important;
	letter-spacing: -0.03em;
}

/* --sud-muted lands at 4.41:1 here — just under AA for 16px text.
   Stepped to the body ink, which measures ~7:1. */
.sud-h-about .elementor-counter-title {
	font-family: var(--sud-font-body) !important;
	font-weight: 500 !important;
	color: var(--sud-body) !important;
	letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Why choose us
   -------------------------------------------------------------------------- */

.sud-h-why { background: var(--sud-surface); }

/* The kit numbers each row in a heavy display face; make them a quiet index */
.sud-h-why h3:first-child,
.sud-h-why .elementor-heading-title {
	letter-spacing: -0.01em;
}

.sud-h-why .elementor-divider-separator {
	border-top-color: var(--sud-line) !important;
}

/* --------------------------------------------------------------------------
   Therapeutic-area cards
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Dark bands
   Sections the kit designed on a dark ground. Kept dark deliberately — a
   full-bleed brand band between white sections is exactly the rhythm the
   reference sites use. Text is forced light for contrast.
   -------------------------------------------------------------------------- */

.sud-h-dark h1,
.sud-h-dark h2,
.sud-h-dark h3,
.sud-h-dark h4,
.sud-h-dark .elementor-widget-heading .elementor-heading-title {
	color: #fff !important;
}

.sud-h-dark p,
.sud-h-dark .elementor-widget-text-editor,
.sud-h-dark .elementor-icon-box-description {
	color: rgba(255, 255, 255, .82) !important;
}

.sud-h-dark .elementor-icon { color: var(--sud-green-400) !important; }

/* Eyebrow chips.
   The kit gives these a pale pill background. On a dark band that leaves light
   text sitting on a light pill — both flagged eyebrows measured under 1.4:1.
   Re-cast as a translucent white pill so the label reads against the brand. */
.sud-h-dark .elementor-widget-icon-box,
.sud-h-cta .elementor-widget-icon-box,
.sud-h-dark .elementor-widget-icon-box .elementor-icon-box-wrapper,
.sud-h-cta .elementor-widget-icon-box .elementor-icon-box-wrapper,
.sud-h-dark .elementor-widget-icon-box .elementor-icon-box-content,
.sud-h-cta .elementor-widget-icon-box .elementor-icon-box-content {
	background-color: transparent !important;
}

/* The eyebrow itself keeps a pill, just an on-brand one */
.sud-h-dark > .e-con-inner .elementor-widget-icon-box:first-child,
.sud-h-cta > .e-con-inner .elementor-widget-icon-box:first-child {
	background-color: rgba(255, 255, 255, .12) !important;
	border-radius: 100px;
}

.sud-h-dark .elementor-button {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--sud-green-700) !important;
}

.sud-h-dark .elementor-button:hover {
	background-color: var(--sud-green-400) !important;
	border-color: var(--sud-green-400) !important;
	color: var(--sud-green-900) !important;
}

.sud-h-areas .elementor-widget-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	inline-size: 100%;
	transition: transform .7s var(--sud-ease);
}

.sud-h-areas .e-con:hover .elementor-widget-image img { transform: scale(1.04); }

/* Green-400 on the dark band measures 3.34:1 — fine for large text, short of AA
   at 13px. White clears it comfortably. */
.sud-h-areas .elementor-icon-box-title {
	font-family: var(--sud-font-body) !important;
	font-size: var(--sud-text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff !important;
}

/* Buttons inside the "why" section inherit the same broken light-on-light token
   pairing as the hero. */
.sud-h-why .elementor-button {
	background-color: var(--sud-green-700) !important;
	border-color: var(--sud-green-700) !important;
	color: #fff !important;
}

.sud-h-why .elementor-button:hover {
	background-color: var(--sud-green-800) !important;
	border-color: var(--sud-green-800) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.sud-h-cta {
	background: var(--sud-green-700);
	position: relative;
	overflow: hidden;
}

.sud-h-cta::before {
	content: '';
	position: absolute;
	inset-inline-end: -8%;
	top: -45%;
	inline-size: 52%;
	aspect-ratio: 1;
	background: radial-gradient(circle at center,
		rgba(61, 174, 43, .32), rgba(0, 130, 202, .16) 45%, transparent 70%);
	pointer-events: none;
}

.sud-h-cta h2,
.sud-h-cta .elementor-heading-title { color: #fff !important; }
.sud-h-cta p { color: rgba(255, 255, 255, .82) !important; }
.sud-h-cta .elementor-icon-box-title { color: #fff !important; }
.sud-h-cta .elementor-icon { color: var(--sud-green-400) !important; }

.sud-h-cta .elementor-button {
	background: #fff !important;
	color: var(--sud-green-700) !important;
	border-color: #fff !important;
}

.sud-h-cta .elementor-button:hover {
	background: var(--sud-green-400) !important;
	color: var(--sud-green-900) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-harvest .elementor-button:hover { transform: none; box-shadow: none; }
	.sud-h-areas .elementor-widget-image img,
	.sud-h-areas .e-con:hover .elementor-widget-image img { transition: none; transform: none; }
}