/**
 * "Tips from the Expert" — styles Elementor containers tagged by
 * includes/expert-tips.php (.faddom-expert / __author / __tips).
 */

.faddom-expert {
	/* --faddom-expert-noise is injected from PHP (assets/img/faddom-noise.svg). */
	box-sizing: border-box;
	position: relative;
	margin: 64px 0 !important;
	padding: 12px !important;
	background: var(--faddom-color-aqua-50, #e6f4f4) !important;
	border-radius: 4px;
	overflow: hidden;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 12px !important;
	--padding-top: 12px;
	--padding-right: 12px;
	--padding-bottom: 12px;
	--padding-left: 12px;
	--border-style: none!important;
	border: 0 !important;
}

.faddom-expert::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image: var(--faddom-expert-noise);
	background-repeat: repeat;
	background-size: 256px 256px;
	opacity: 0.6;
	z-index: 0;
}

.faddom-expert.e-con,
.faddom-expert.e-con > .e-con-inner {
	flex-direction: column !important;
}

.faddom-expert > .e-con,
.faddom-expert > .elementor-element,
.faddom-expert > .e-con-inner,
.faddom-expert > .e-con-inner > .e-con,
.faddom-expert > .e-con-inner > .elementor-element {
	position: relative;
	z-index: 1;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
}

/* ------------------------------------------------------------------ */
/* Author column                                                      */
/* ------------------------------------------------------------------ */
.faddom-expert__author {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 0;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	flex-direction: unset !important;
}

.faddom-expert__author.e-con,
.faddom-expert__author.e-con > .e-con-inner {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto auto;
	align-items: center;
	column-gap: 12px;
	width: 100% !important;
}

/* Prefer targeting widgets; e-con-inner children use same rules via nesting */
.faddom-expert__author .elementor-widget-image,
.faddom-expert__author > .elementor-widget-image {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

.faddom-expert__author .elementor-widget-image img,
.faddom-expert__author .elementor-widget-image .elementor-widget-container {
	margin: 0 !important;
}

.faddom-expert__author .elementor-widget-image,
.faddom-expert__author .elementor-widget-image img {
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask-size: unset !important;
	mask-size: unset !important;
	-webkit-mask-position: unset !important;
	mask-position: unset !important;
	-webkit-mask-repeat: unset !important;
	mask-repeat: unset !important;
}

.faddom-expert__author .elementor-widget-image img {
	display: block;
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	border-radius: 4px !important;
	object-fit: cover;
}

.faddom-expert__author .elementor-widget-image + .elementor-widget-heading {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	text-align: left!important;
}

.faddom-expert__author .elementor-widget-image + .elementor-widget-heading + .elementor-widget-heading {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	text-align: left!important;
}

.faddom-expert__author .elementor-widget-image + .elementor-widget-heading .elementor-heading-title {
	margin: 0;
	font-family: var(--faddom-type-title-medium-family) !important;
	font-size: var(--faddom-type-title-medium-size) !important;
	font-weight: var(--faddom-type-title-medium-weight) !important;
	line-height: var(--faddom-type-title-medium-line) !important;
	letter-spacing: var(--faddom-type-title-medium-tracking) !important;
	color: var(--faddom-color-aqua-800) !important;
}

.faddom-expert__author .elementor-widget-image + .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
	margin: 2px 0 0;
	font-family: var(--faddom-type-body-medium-family) !important;
	font-size: var(--faddom-type-body-medium-size) !important;
	font-weight: var(--faddom-type-body-medium-weight) !important;
	line-height: var(--faddom-type-body-medium-line) !important;
	letter-spacing: var(--faddom-type-body-medium-tracking) !important;
	color: var(--faddom-color-granite-500) !important;
}

.faddom-expert__author .elementor-widget-social-icons {
	grid-column: 3;
	grid-row: 1 / 3;
	justify-self: end;
	align-self: start;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

.faddom-expert__author .elementor-widget-text-editor {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 16px 0 0 !important;
	padding: 16px 0 0 !important;
	border-top: 1px solid var(--faddom-color-border, rgba(6, 35, 35, 0.2));
	width: 100% !important;
	font-family: var(--faddom-type-body-medium-family) !important;
	font-size: var(--faddom-type-body-medium-size) !important;
	font-weight: var(--faddom-type-body-medium-weight) !important;
	line-height: var(--faddom-type-body-medium-line) !important;
	letter-spacing: var(--faddom-type-body-medium-tracking) !important;
	color: var(--faddom-color-granite-500) !important;
	text-align: left!important;
}

.faddom-expert__author .elementor-widget-text-editor p {
	margin: 0 0 12px;
	color: inherit;
}

.faddom-expert__author .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.faddom-expert__author .elementor-social-icon {
	background: transparent !important;
	color: var(--faddom-color-aqua-900, #062323) !important;
	font-size: 20px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 6px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.faddom-expert__author .elementor-social-icon:hover,
.faddom-expert__author .elementor-social-icon:focus-visible {
	background: var(--faddom-color-white, #ffffff) !important;
	color: var(--faddom-color-aqua-600, #085858) !important;
}

.faddom-expert__author .elementor-social-icon svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

.faddom-expert__author .elementor-widget-container {
	padding: 0 !important;
}

/* Fallback when widgets sit under .e-con-inner */
.faddom-expert__author > .e-con-inner {
	display: contents !important;
}

/* ------------------------------------------------------------------ */
/* Tips card                                                          */
/* ------------------------------------------------------------------ */
.faddom-expert__tips {
	position: relative;
	margin: 0 !important;
	padding: 12px !important;
	background: var(--faddom-color-white, #ffffff) !important;
	border-radius: 4px;
	overflow: hidden;
	width: 100% !important;
	max-width: 100% !important;
	flex-direction: column !important;
	gap: 0 !important;
	--padding-top: 12px;
	--padding-right: 12px;
	--padding-bottom: 12px;
	--padding-left: 12px;
	border: none !important;
	--border-style: none !important;
}

.faddom-expert__tips::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image: var(--faddom-expert-noise);
	background-repeat: repeat;
	background-size: 256px 256px;
	opacity: 0.6;
	z-index: 0;
}

.faddom-expert__tips > .e-con-inner,
.faddom-expert__tips > .elementor-element,
.faddom-expert__tips > .elementor-widget {
	position: relative;
	z-index: 1;
}

.faddom-expert.faddom-expert__tips {
	background: var(--faddom-color-aqua-50, #e6f4f4) !important;
}

.faddom-expert.faddom-expert__tips > .e-con-inner {
	background: var(--faddom-color-white, #ffffff);
	border-radius: 8px;
	padding: 24px !important;
}

.faddom-expert__tips .elementor-widget-heading {
	padding: 0 !important;
}

.faddom-expert__tips .elementor-heading-title {
	margin: 0;
	font-family: var(--faddom-type-title-medium-family) !important;
	font-size: var(--faddom-type-title-medium-size) !important;
	font-weight: var(--faddom-type-title-medium-weight) !important;
	line-height: var(--faddom-type-title-medium-line) !important;
	letter-spacing: var(--faddom-type-title-medium-tracking) !important;
	color: var(--faddom-color-aqua-800) !important;
}

.faddom-expert__tips .elementor-widget-text-editor {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--faddom-type-body-medium-family) !important;
	font-size: var(--faddom-type-body-medium-size) !important;
	font-weight: var(--faddom-type-body-medium-weight) !important;
	line-height: var(--faddom-type-body-medium-line) !important;
	letter-spacing: var(--faddom-type-body-medium-tracking) !important;
	color: var(--faddom-color-granite-500) !important;
}

.faddom-expert__tips .elementor-widget-text-editor > .elementor-widget-container > p:first-child {
	margin: 0 0 16px;
}

.faddom-expert__tips .elementor-widget-text-editor ol,
.faddom-expert__tips .elementor-widget-text-editor ul {
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--faddom-color-border, rgba(6, 35, 35, 0.2));
}

.faddom-expert__tips .elementor-widget-text-editor ol {
	list-style: none;
	counter-reset: faddom-expert-tip;
}

.faddom-expert__tips .elementor-widget-text-editor ol > li {
	--faddom-expert-tip-indent: 34px;
	position: relative;
	counter-increment: faddom-expert-tip;
	margin: 0 0 24px;
	padding-left: 0;
}

.faddom-expert__tips .elementor-widget-text-editor ol > li:last-child {
	margin-bottom: 0;
}

.faddom-expert__tips .elementor-widget-text-editor ol > li::before {
	content: counter(faddom-expert-tip) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--faddom-type-title-small-family);
	font-size: var(--faddom-type-title-small-size);
	font-weight: var(--faddom-type-title-small-weight);
	line-height: var(--faddom-type-title-small-line);
	letter-spacing: var(--faddom-type-title-small-tracking);
	color: var(--faddom-color-aqua-800);
}

.faddom-expert__tips .elementor-widget-text-editor li > p {
	margin: 0 0 8px;
}

.faddom-expert__tips .elementor-widget-text-editor li > p:last-child {
	margin-bottom: 0;
}

.faddom-expert__tips .elementor-widget-text-editor ol > li > :first-child {
	padding-left: var(--faddom-expert-tip-indent);
	box-sizing: border-box;
}

.faddom-expert__tips .elementor-widget-text-editor li > p:first-child {
	margin-bottom: 6px;
	font-family: var(--faddom-type-title-small-family) !important;
	font-size: var(--faddom-type-title-small-size) !important;
	line-height: var(--faddom-type-title-small-line) !important;
	letter-spacing: var(--faddom-type-title-small-tracking) !important;
	color: var(--faddom-color-aqua-800) !important;
}

.faddom-expert__tips .elementor-widget-text-editor ol > li > *:not(:first-child) {
	display: block;
	padding-left: 0;
	margin-left: 0;
	width: 100%;
	box-sizing: border-box;
}

.faddom-expert__tips .elementor-widget-text-editor li > p:first-child b,
.faddom-expert__tips .elementor-widget-text-editor li > p:first-child strong,
.faddom-expert__tips .elementor-widget-text-editor li > p:first-child span {
	font-weight: var(--faddom-type-title-small-weight) !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.faddom-expert__tips .elementor-widget-text-editor li > p:first-child br {
	display: none;
}

.faddom-expert__tips .elementor-widget-container {
	padding: 0 !important;
}

.faddom-expert__tips > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	width: 100% !important;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.faddom-expert {
		margin: 32px 0 !important;
	}
}

@media (max-width: 767px) {
	.faddom-expert__tips .elementor-widget-text-editor ol > li {
		--faddom-expert-tip-indent: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faddom-expert__author .elementor-social-icon {
		transition: none;
	}
}