/* Abelica QA fixes - front-end overrides */

/* --------------------------------------------------------------------------
   Text alignment: no full-justified paragraphs anywhere (left aligned)
   -------------------------------------------------------------------------- */
body p[style*="justify"],
body span[style*="justify"],
body div[style*="justify"],
.abg-benefit-card__description,
.abg-work-card__description,
.abg-work-together__intro,
.elementor-widget-abelica-work-together .abg-work-together__intro,
.abelica-member-hero-description,
.abelica-glance-description,
.abelica-why-description,
.abelica-testimonial-card,
.abelica-testimonial-card p {
	text-align: left !important;
}

/* --------------------------------------------------------------------------
   Thank You page (/thank-you/) - shown after the contact form
   -------------------------------------------------------------------------- */
.abg-thankyou { padding: 90px 16px 110px; background: linear-gradient(180deg, #f1f7fa 0%, #ffffff 100%); }
.abg-thankyou__card { max-width: 680px; margin: 0 auto; padding: 48px 40px; background: #fff; border: 1px solid #e1e8ee; border-radius: 16px; box-shadow: 0 18px 48px rgba(16, 40, 63, .08); text-align: center; }
.abg-thankyou__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #00A651; color: #fff; font-size: 30px; line-height: 64px; font-weight: 700; }
.abg-thankyou__eyebrow { margin: 0 0 6px; color: #00A651; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.abg-thankyou__title { margin: 0 0 14px; color: #10283f; font-size: 38px; line-height: 1.15; }
.abg-thankyou__text { margin: 0 auto 28px; max-width: 520px; color: #47607a; font-size: 17px; line-height: 1.6; text-align: center !important; }
.abg-thankyou__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.abg-thankyou__btn { display: inline-block; padding: 13px 24px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.abg-thankyou__btn--primary { background: #00A651; color: #fff !important; border: 1px solid #00A651; }
.abg-thankyou__btn--primary:hover { background: #008a43; border-color: #008a43; }
.abg-thankyou__btn--secondary { background: #fff; color: #10283f !important; border: 1px solid #10283f; }
.abg-thankyou__btn--secondary:hover { background: #10283f; color: #fff !important; }
@media (max-width: 600px) { .abg-thankyou { padding: 48px 16px 64px; } .abg-thankyou__card { padding: 32px 20px; } .abg-thankyou__title { font-size: 30px; } }

/* --------------------------------------------------------------------------
   No yellow: the Consulting theme hard-codes a{color:#fde428}. Use brand green.
   (More specific link colours set by widgets are unaffected.)
   -------------------------------------------------------------------------- */
:root { --con_third_color: #29ABE2; }
a { color: #00A651; }
a:hover, a:focus { color: #008a43; }
.abelica-member-breadcrumb a:hover,
.abelica-member-breadcrumb a:focus { color: #00A651 !important; }

/* --------------------------------------------------------------------------
   Consistent button hovers: buttons darken on hover like the header
   "Contact Us" button (green -> darker green, white -> light grey).
   -------------------------------------------------------------------------- */
a.e-button-base,
.abg-join-hero__button--primary,
.abg-ciq-submit,
.abg-feature-highlight__button,
.abelica-archive-reset {
	transition: filter .2s ease, background-color .2s ease, color .2s ease;
}
a.e-button-base:hover,
a.e-button-base:focus-visible,
.abg-join-hero__button--primary:hover,
.abg-join-hero__button--primary:focus-visible,
.abg-ciq-submit:hover,
.abg-ciq-submit:focus-visible,
.abg-feature-highlight__button:hover,
.abg-feature-highlight__button:focus-visible {
	filter: brightness(.86);
}

/* --------------------------------------------------------------------------
   No sideways scrolling on tablet/mobile: let flex columns shrink below their
   content (the members map logo strip was forcing a 1470px wide column).
   -------------------------------------------------------------------------- */
.elementor-top-column,
.elementor-widget-wrap,
.elementor-widget-shortcode { min-width: 0; }
.elementor-widget-shortcode { max-width: 100%; }
.abelica-members-map-v2,
.abelica-members-map-v2__container { max-width: 100%; }

/* --------------------------------------------------------------------------
   Footer on tablet/mobile: keep each heading with its own links,
   remove equal-height rows that created large empty gaps.
   Grid 3e411a6 = 4 headings followed by 4 lists (DOM order).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor-7516 .elementor-element-a9a355e,
	.elementor-7516 .elementor-element-42d5bfa {
		grid-template-rows: none !important;
		grid-auto-rows: auto !important;
		height: auto !important;
		min-height: 0 !important;
	}
	.elementor-7516 .elementor-element-3e411a6 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-template-rows: none !important;
		grid-auto-rows: auto !important;
		column-gap: 24px !important;
		row-gap: 6px !important;
	}
	/* row 1: About | Resources, row 2: their lists, row 3: Global | Connect, row 4: their content */
	.elementor-7516 .elementor-element-de2de0f { order: 1; }
	.elementor-7516 .elementor-element-356243f { order: 2; }
	.elementor-7516 .elementor-element-2d178ef { order: 3; }
	.elementor-7516 .elementor-element-8ba39ee { order: 4; }
	.elementor-7516 .elementor-element-f30640e { order: 5; margin-top: 18px; }
	.elementor-7516 .elementor-element-7587184 { order: 6; margin-top: 18px; }
	.elementor-7516 .elementor-element-cb55909 { order: 7; }
	.elementor-7516 .elementor-element-c32c288 { order: 8; }
	.elementor-7516 .elementor-element-3e411a6 > .elementor-element { margin-bottom: 0 !important; }
	.elementor-7516 .elementor-element-3e411a6 .elementor-widget-text-editor p { margin-bottom: 0; }
}

@media (max-width: 600px) {
	.elementor-7516 .elementor-element-3e411a6 {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 4px !important;
	}
	/* one column: heading, its links, next heading ... */
	.elementor-7516 .elementor-element-de2de0f { order: 1; }
	.elementor-7516 .elementor-element-2d178ef { order: 2; }
	.elementor-7516 .elementor-element-356243f { order: 3; margin-top: 18px; }
	.elementor-7516 .elementor-element-8ba39ee { order: 4; }
	.elementor-7516 .elementor-element-f30640e { order: 5; margin-top: 18px; }
	.elementor-7516 .elementor-element-cb55909 { order: 6; }
	.elementor-7516 .elementor-element-7587184 { order: 7; margin-top: 18px; }
	.elementor-7516 .elementor-element-c32c288 { order: 8; }

	.elementor-7516 .elementor-element-42d5bfa { row-gap: 10px !important; padding-top: 16px !important; padding-bottom: 20px !important; }
	.elementor-7516 .elementor-element-07d1900,
	.elementor-7516 .elementor-element-25e822b { text-align: center !important; }
	.elementor-7516 .elementor-element-25e822b .elementor-widget-container,
	.elementor-7516 .elementor-element-25e822b p { text-align: center !important; padding: 0 16px; }
	.elementor-7516 .elementor-element-07d1900 ul,
	.elementor-7516 .elementor-element-07d1900 .menu { justify-content: center !important; }
}

@media (max-width: 767px) {
	/* Stack logo, links and bottom bar normally (Elementor mobile settings used a
	   367px-tall logo box with a -320px margin hack, causing overlap + overflow). */
	.elementor-7516 .elementor-element-a9a355e {
		display: flex !important;
		flex-direction: column !important;
		gap: 28px !important;
		padding: 40px 16px 0 !important;
		height: auto !important;
	}
	.elementor-7516 .elementor-element-6205e1c,
	.elementor-7516 .elementor-element-6205e1c > .elementor-widget-container {
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.elementor-7516 .elementor-element-6205e1c { text-align: left !important; }
	.elementor-7516 .elementor-element-6205e1c img { max-width: 210px; height: auto; }
	.elementor-7516 .elementor-element-3e411a6 {
		margin: 0 !important;
		width: 100% !important;
		padding: 0 !important;
	}
	.elementor-7516 .elementor-element-42d5bfa {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: center !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 12px !important;
		margin: 0 -16px !important;
		padding: 18px 16px 24px !important;
		width: auto !important;
	}
	.elementor-7516 .elementor-element-07d1900,
	.elementor-7516 .elementor-element-25e822b { width: 100% !important; margin: 0 !important; }
	.elementor-7516 .elementor-element-07d1900 > .elementor-widget-container,
	.elementor-7516 .elementor-element-25e822b > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
	.elementor-7516 .elementor-element-25e822b p { padding: 0 !important; margin: 0 !important; }
}
@media (max-width: 767px) {
	.elementor-7516 .elementor-element-a9a355e > .elementor-element { align-self: stretch !important; flex: 0 0 auto !important; height: auto !important; }
	.elementor-7516 .elementor-element-a9a355e { grid-template-rows: none !important; grid-auto-rows: auto !important; align-content: start !important; }
}
@media (max-width: 767px) {
	/* Boxed container: the grid is on .e-con-inner, driven by these variables */
	.elementor-7516 .elementor-element-a9a355e {
		--display: flex;
		--flex-direction: column;
		--e-con-grid-template-rows: none;
		--gap: 28px;
		--row-gap: 28px;
	}
	.elementor-7516 .elementor-element-a9a355e > .e-con-inner {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		gap: 28px !important;
	}
}

/* --------------------------------------------------------------------------
   Homepage hero on phones: hide the right-hand photo graphic (it is baked into
   the slide background canvas) so the text has room. Text layers sit above.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	#SR7_7_1 sr7-bg::after,
	#SR7_4_1 sr7-bg::after,
	#SR7_9_1 sr7-bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(24,112,158,0) 0%, rgba(24,112,158,0) 30%, #18709e 55%, #18709e 100%);
		pointer-events: none;
		z-index: 1;
	}
	#SR7_7_1-20-0 { width: calc(100vw - 40px) !important; max-width: 360px; }
	#SR7_7_1-20-0, #SR7_7_1-20-0 * { white-space: normal !important; }
}

/* --------------------------------------------------------------------------
   Mobile spacing ("dead space") - homepage
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Capabilities flip cards: tighter back list so cards can be shorter */
	.abg-sfv2 { padding: 44px 16px !important; }
	.abg-sfv2-grid { gap: 16px !important; margin-top: 24px !important; }
	/* Card height follows its content (fixed 390-420px clipped the back list on phones) */
	.abg-sfv2-card { height: auto !important; }
	.abg-sfv2-inner { display: grid !important; height: auto !important; }
	.abg-sfv2-front, .abg-sfv2-back { position: relative !important; inset: auto !important; grid-area: 1 / 1 !important; height: auto !important; min-height: 0 !important; }
	.abg-sfv2-front { min-height: 200px !important; }
	.abg-sfv2-front { padding: 28px 24px 26px !important; }
	.abg-sfv2-back { padding: 22px 22px 18px !important; }
	.abg-sfv2-back h4, .abg-sfv2-back h3 { margin-bottom: 10px !important; font-size: 19px !important; }
	.abg-sfv2-back li { padding: 7px 0 7px 22px !important; font-size: 14px !important; line-height: 1.4 !important; }
	.abg-sfv2-back li::before { top: 12px !important; width: 9px; height: 9px; }

	/* Find Our Members: title on its own line, the two dropdowns side by side */
	.abelica-members-map-v2 { padding: 40px 0 44px !important; }
	.abelica-members-map-v2__filters {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
	.abelica-members-map-v2__filter {
		flex: 1 1 calc(50% - 5px) !important;
		width: calc(50% - 5px) !important;
		min-width: 0 !important;
	}
	.abelica-members-map-v2__reset { flex: 1 1 100% !important; }
}

/* --------------------------------------------------------------------------
   Capabilities flip cards (all sizes): the fixed 420px height clipped the
   last services on the longest cards. Both faces now share one grid cell, so
   the card grows to fit; cards in a row keep equal heights.
   -------------------------------------------------------------------------- */
.abg-sfv2-card { height: auto !important; display: grid !important; }
.abg-sfv2-inner { display: grid !important; height: auto !important; }
.abg-sfv2-front,
.abg-sfv2-back {
	position: relative !important;
	inset: auto !important;
	grid-area: 1 / 1 !important;
	height: auto !important;
}
.abg-sfv2-front { min-height: 420px; }
@media (max-width: 1024px) { .abg-sfv2-front { min-height: 400px; } }
@media (max-width: 767px)  { .abg-sfv2-front { min-height: 200px !important; } }
@media (min-width: 768px) {
	.abg-sfv2-back { padding-top: 28px !important; padding-bottom: 24px !important; }
	.abg-sfv2-back h3, .abg-sfv2-back h4 { margin-bottom: 12px !important; font-size: 21px !important; }
	.abg-sfv2-back li { padding: 7px 0 7px 24px !important; font-size: 14px !important; line-height: 1.4 !important; }
	.abg-sfv2-back li::before { top: 12px !important; }
}

/* --------------------------------------------------------------------------
   Join page on phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* "Why Abelica Global Is Different": text column was squeezed to ~120px */
	.abg-feature-highlight__inner { display: block !important; }
	.abg-feature-highlight__left,
	.abg-feature-highlight__right { width: 100% !important; max-width: 100% !important; flex: none !important; }
	.abg-feature-highlight__right { margin-top: 24px !important; padding: 14px !important; }
	.abg-feature-highlight { padding-top: 48px !important; padding-bottom: 48px !important; }

	/* Testimonials: card height follows the quote (was a fixed 515px) */
	.abg-testimonial-slider__slide { min-height: 0 !important; padding: 12px 0 24px !important; }
	.abg-testimonial-slider__main {
		min-height: 0 !important;
		width: 88% !important;
		padding: 28px 22px 30px !important;
		gap: 22px;
	}
	.abg-testimonial-slider__back { height: 80% !important; }
}
@media (max-width: 767px) {
	.abg-benefit-cards { padding-top: 44px !important; padding-bottom: 44px !important; }
	.abg-work-together { padding-top: 48px !important; padding-bottom: 48px !important; }
	.abg-seat-stats { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* --------------------------------------------------------------------------
   Phones: Elementor grid containers use equal-height rows (repeat(n, 1fr)),
   which leaves empty bands under short rows. Let rows fit their content.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.e-con.e-grid { --e-con-grid-template-rows: none; }
	.e-con.e-grid,
	.e-con.e-grid > .e-con-inner { grid-auto-rows: auto; }
	.elementor-7858 .elementor-element-a1ff2bc { --padding-top: 48px; --padding-bottom: 44px; }
}
@media (max-width: 767px) {
	.e-con.e-grid,
	.e-con.e-grid > .e-con-inner { grid-template-rows: none !important; }
	.elementor-7858 .elementor-element.elementor-element-a1ff2bc { --padding-top: 48px !important; --padding-bottom: 44px !important; }
}

/* --------------------------------------------------------------------------
   Phones: side gutters for text that ran edge-to-edge; search box overflow
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-7755 .elementor-element-f120d74,
	.elementor-7755 .elementor-element-6405bd4,
	.elementor-7858 .elementor-element-c20f893 { padding-left: 16px !important; padding-right: 16px !important; }
	.elementor-7755 .elementor-element-6405bd4 br { display: none; }
	.abelica-archive-filters .abelica-filter-field,
	.abelica-archive-filters input[type="search"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
	.abelica-archive-filters { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Our Members: whole country card is clickable (stretched arrow link)
   -------------------------------------------------------------------------- */
.abelica-archive-member-card { position: relative; cursor: pointer; }
.abelica-archive-member-card .abelica-member-card-arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
/* no filter/transform on the arrow: it would become the overlay container */
.abelica-archive-member-card:hover .abelica-member-card-arrow { color: #00A651; border-color: #00A651; }
.abelica-archive-member-card:focus-within { outline: 2px solid #29ABE2; outline-offset: 2px; }

/* Breadcrumb links on member spotlight pages */
.abelica-member-breadcrumb a { color: inherit; text-decoration: none; }
.abelica-member-breadcrumb a:hover { text-decoration: underline; }
/* card text must not sit above the stretched link */
.abelica-archive-member-card .abelica-member-card-text,
.abelica-archive-member-card .abelica-member-card-text * { pointer-events: none; }
.abelica-archive-member-card .abelica-member-card-arrow::after { z-index: 5; }

/* --------------------------------------------------------------------------
   Join page: "How We Work Together" card text matches the "Why Join" cards
   (title 17px/750 Roboto, description 12px/400 Inter, 1.4 line height)
   -------------------------------------------------------------------------- */
.abg-work-card__title,
.abg-work-card h3 {
	font-family: Roboto, sans-serif !important;
	font-size: 17px !important;
	font-weight: 750 !important;
	line-height: 1.3 !important;
}
.abg-work-card__description {
	font-family: Inter, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Capabilities flip cards (overrides the auto-height rules above):
   every card has the same height; a long service list scrolls inside the
   back of the card (e.g. "Specialist & Emerging Services").
   -------------------------------------------------------------------------- */
.abg-sfv2-card { height: 420px !important; display: block !important; }
.abg-sfv2-inner { display: block !important; height: 100% !important; }
.abg-sfv2-front,
.abg-sfv2-back {
	position: absolute !important;
	inset: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	grid-area: auto !important;
}
.abg-sfv2-front { min-height: 0 !important; }
.abg-sfv2-back {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .45) transparent;
}
.abg-sfv2-back::-webkit-scrollbar { width: 6px; }
.abg-sfv2-back::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.abg-sfv2-back::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .45); border-radius: 3px; }
.abg-sfv2-back::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .7); }
@media (max-width: 1024px) { .abg-sfv2-card { height: 400px !important; } }
@media (max-width: 767px)  { .abg-sfv2-card { height: 360px !important; } }
/* the service list is the scrolling part (heading stays in place) */
.abg-sfv2-back ul {
	overflow-y: auto !important;
	overscroll-behavior: contain;
	padding-right: 8px !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .5) rgba(255, 255, 255, .08);
}
.abg-sfv2-back ul::-webkit-scrollbar { width: 6px; }
.abg-sfv2-back ul::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); border-radius: 3px; }
.abg-sfv2-back ul::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .5); border-radius: 3px; }
.abg-sfv2-back ul::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .75); }

/* --------------------------------------------------------------------------
   Contact page on tablet/phone: the flex container around "Prefer to reach out
   directly?" stretched to ~2000px (1,100px of empty space). It holds one
   widget only, so plain block layout gives it its real height.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor-11 .elementor-element.elementor-element-e4ac217 { display: block !important; }
}

/* Join page on phones: tighter space under the last cards of two sections */
@media (max-width: 767px) {
	.abg-work-together { padding-bottom: 28px !important; }
	.abg-feature-highlight { padding-bottom: 20px !important; }
}