/* LNTA Newsletter Style — the "Subscribe to our mailing list" block.

   As shipped, this was two slabs butted together: a hard-edged dark green
   rectangle starting 120px from the left, and the tribal-mask artwork on
   bare white running to the right edge of the screen. Nothing aligned to
   the site's container, and the sign-up field set dark grey text on a
   translucent white panel over dark green — typing in it was close to
   unreadable.

   Everything below is cosmetic. The form markup, its action and its
   submission are untouched; selectors use the theme's own classes, so
   every page carrying this block gets the same treatment.

   Two-class selectors throughout, because of the site-wide
   `.elementor * { color:#fff }` rule in so-css-tourm.css, which beats any
   single-class rule and loads after plugin stylesheets. */

/* ---------- The card ---------- */

.e-con .newsletter-sec,
.elementor .newsletter-sec {
	/* The artwork's background is transparent and its masks are drawn in
	   dark ink, so the card's base stays light — the green is painted by
	   the text panel alone. */
	max-width: 1240px;
	/* The section this sits in has no vertical padding of its own, and the
	   block above it has no bottom margin, so the card was landing flush
	   against the content above (0px) and 4px clear of the footer's brand
	   ticker below. The breathing room has to come from the card itself. */
	margin: 80px auto !important;
	padding: 0 !important;
	align-items: stretch !important;
	background: #ffffff;
	border: 1px solid #e6e8de;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 18px 44px rgba(3, 41, 2, 0.12);
}

/* A green-gold-green hairline across the top, the same accent the
   Unforgettable Liberia band on the homepage carries, so this reads as
   part of the site rather than a component dropped in from the theme. */
.e-con .newsletter-sec::before,
.elementor .newsletter-sec::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	z-index: 3;
	background: linear-gradient(90deg, #032902 0%, #f0a818 50%, #032902 100%);
}

/* The green text panel: first child of the row on every page that
   carries this block.

   Elementor sets its background-COLOR inline, so only background-image is
   touched here: a pale highlight falling from the top left and a faint gold
   glow in the opposite corner. A flat fill this large reads as a slab, and
   these give the light somewhere to land.

   Both are kept near-invisible on purpose — an earlier pass used a gold wash
   at 0.14 and it tinted the whole panel olive, which looked worse than the
   flat colour it replaced. The brand green has to stay clean. */
.e-con .newsletter-sec > :first-child,
.elementor .newsletter-sec > :first-child {
	flex: 1 1 54% !important;
	justify-content: center !important;
	padding: 56px 52px !important;
	border-radius: 0 !important;
	background-image:
		radial-gradient(110% 85% at 6% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
		radial-gradient(80% 60% at 100% 100%, rgba(240, 168, 24, 0.07), rgba(240, 168, 24, 0) 60%) !important;
	background-repeat: no-repeat, no-repeat !important;
}

/* The artwork panel. */
.e-con .newsletter-sec > :last-child,
.elementor .newsletter-sec > :last-child {
	flex: 1 1 46% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 36px !important;
	background:
		linear-gradient(180deg, rgba(247, 248, 243, 0.9), rgba(241, 245, 239, 0.9)),
		url('https://lnta.gov.lr/wp-content/uploads/2025/12/about_bg_9-1.jpg') center/420px repeat;
	/* A thin warm seam instead of the hard colour change where the two
	   panels meet. */
	box-shadow: inset 1px 0 0 rgba(240, 168, 24, 0.45);
}

.e-con .newsletter-sec .newsletter-image img,
.elementor .newsletter-sec .newsletter-image img {
	width: auto !important;
	max-width: 100%;
	max-height: 460px;
	height: auto !important;
	object-fit: contain;
	/* The artwork is a transparent PNG, so a drop-shadow follows the masks
	   themselves and lifts them off the pattern — a plate behind them would
	   just add another rectangle to a card that already has enough. */
	filter: drop-shadow(0 14px 26px rgba(3, 41, 2, 0.18));
}

/* ---------- Copy ---------- */

.newsletter-sec .newsletter-wrapper {
	padding-left: 0 !important;
}

.newsletter-sec .sec-title {
	color: #f0a818 !important;
	margin-bottom: 16px !important;
}

.newsletter-sec .sec-text,
.newsletter-sec .newsletter-wrapper p {
	color: rgba(255, 255, 255, 0.84) !important;
	font-size: 1rem;
	line-height: 1.75;
	max-width: 44ch;
	margin-bottom: 0 !important;
}

/* ---------- The form ---------- */

.newsletter-sec .newsletter-form-wrapper {
	margin-top: 32px;
}

.newsletter-sec .newsletter-form.style4 {
	display: flex !important;
	align-items: center;
	gap: 12px;
	max-width: 520px;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* A solid white field: the original set #333 text on a 20%-white panel
   over dark green, so what you typed was barely visible against it. */
.newsletter-sec .newsletter-form .form-control {
	flex: 1 1 auto;
	width: auto !important;
	height: 56px !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 0 22px !important;
	background: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 999px !important;
	color: #14181f !important;
	font-size: 1rem !important;
	box-shadow: none !important;
}

.newsletter-sec .newsletter-form .form-control::placeholder {
	color: #6b7280 !important;
	opacity: 1;
}

.newsletter-sec .newsletter-form .form-control:focus {
	outline: 3px solid rgba(240, 168, 24, 0.55);
	outline-offset: 2px;
	border-color: #f0a818 !important;
}

/* Brand gold, matching every other call to action on the site — the
   theme's own style3 button was the dark slate blue (#113D48) left over
   from the demo palette, which read as a disabled control against the
   green panel. */
.newsletter-sec .newsletter-form .th-btn.style3,
.newsletter-sec .newsletter-form .th-btn {
	position: static !important;
	flex: 0 0 auto;
	height: 56px !important;
	min-width: 140px;
	margin: 0 !important;
	padding: 0 28px !important;
	background: #f0a818 !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #032902 !important;
	font-size: 0.98rem !important;
	font-weight: 700 !important;
	box-shadow: 0 8px 18px rgba(240, 168, 24, 0.28) !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-sec .newsletter-form .th-btn.style3:hover,
.newsletter-sec .newsletter-form .th-btn:hover {
	background: #ffbe33 !important;
	color: #032902 !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(240, 168, 24, 0.38) !important;
}

/* The theme paints its button hover as an expanding pseudo-element, which
   would slide a slate-blue panel back over the gold. */
.newsletter-sec .newsletter-form .th-btn::before,
.newsletter-sec .newsletter-form .th-btn::after {
	display: none !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
	.e-con .newsletter-sec,
	.elementor .newsletter-sec {
		/* Elementor sets width:100% on the container; below the 1240px
		   max-width that wins, and the side margins then push the card
		   off the right edge instead of insetting it. */
		width: auto !important;
		margin: 56px 24px !important;
	}

	.e-con .newsletter-sec > :first-child,
	.elementor .newsletter-sec > :first-child {
		padding: 44px 36px !important;
	}
}

@media (max-width: 991px) {
	/* Side by side, the two panels get too narrow to hold either the
	   headline or the artwork, so the card stacks. */
	.e-con .newsletter-sec,
	.elementor .newsletter-sec {
		flex-direction: column !important;
	}

	.e-con .newsletter-sec > :first-child,
	.e-con .newsletter-sec > :last-child,
	.elementor .newsletter-sec > :first-child,
	.elementor .newsletter-sec > :last-child {
		flex: 1 1 auto !important;
		width: 100% !important;
	}

	.e-con .newsletter-sec .newsletter-image img,
	.elementor .newsletter-sec .newsletter-image img {
		max-height: 320px;
	}
}

@media (max-width: 575px) {
	.e-con .newsletter-sec,
	.elementor .newsletter-sec {
		width: auto !important;
		margin: 44px 16px !important;
		border-radius: 18px;
	}

	.e-con .newsletter-sec > :first-child,
	.elementor .newsletter-sec > :first-child {
		padding: 32px 20px !important;
	}

	.e-con .newsletter-sec > :last-child,
	.elementor .newsletter-sec > :last-child {
		padding: 24px !important;
	}

	/* Field and button stack, each full width — a 140px button beside a
	   shrinking field leaves neither usable on a phone. */
	.newsletter-sec .newsletter-form.style4 {
		flex-direction: column;
		align-items: stretch;
		max-width: none;
	}

	.newsletter-sec .newsletter-form .th-btn.style3,
	.newsletter-sec .newsletter-form .th-btn {
		width: 100%;
	}

	.e-con .newsletter-sec .newsletter-image img,
	.elementor .newsletter-sec .newsletter-image img {
		max-height: 260px;
	}
}