/* ==========================================================================
   Repair CTA — site stylesheet for nationalappliancerepairs.com.au
   Paste into Divi > Theme Options > General > Custom CSS
   (or Appearance > Customize > Additional CSS).

   Why this exists: the CTAs already in the blog posts are saved as static
   markup with the old orange/navy colours inline, and no CTA stylesheet is
   loaded on the site. This file styles that markup in the site's palette:
     red   #dd1a23  (Divi primary colour: top bar, buttons, icons)
     navy  #024472  (post header band, hero, location panel)
   ========================================================================== */

/* Site palette. !important is required to beat the inline style="--rcta-*"
   that is saved in every post. */
.rcta {
	--rcta-accent: #dd1a23 !important;
	--rcta-accent-dark: #b3141c !important;
	--rcta-ink: #024472 !important;
}

.rcta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin: 2.5rem 0;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, .09);
	color: #fff;
	font-family: inherit;
	line-height: 1.5;
}

.rcta--dark {
	/* Shaded with a brighter blue rather than white so the navy stays saturated
	   like the site's post header band; no red wash, which tinted it purple. */
	background: linear-gradient(160deg, color-mix(in srgb, var(--rcta-ink) 80%, #1f7ad1) 0%, var(--rcta-ink) 55%, color-mix(in srgb, var(--rcta-ink) 85%, #000000) 100%);
	box-shadow: 0 24px 60px -28px rgba(2, 40, 68, .55);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.rcta--dark { background: linear-gradient(160deg, #084f85 0%, #024472 55%, #023a61 100%); }
}

.rcta--light {
	background: linear-gradient(160deg, #ffffff 0%, #f5f5f5 100%);
	border-color: rgba(19, 20, 20, .1);
	box-shadow: 0 18px 44px -26px rgba(19, 20, 20, .35);
	color: var(--rcta-ink);
}

.rcta .rcta__glow {
	position: absolute;
	inset: auto -10% -60% auto;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--rcta-accent) 28%, transparent) 0%, transparent 70%);
	z-index: -1;
	pointer-events: none;
	/* Hidden: the red glow muddied the navy. The site uses flat brand colours. */
	display: none;
}

.rcta .rcta__body { max-width: 44rem; }

.rcta .rcta__badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .85rem;
	margin: 0 0 1.1rem;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #f1f1f1;
}

.rcta--light .rcta__badge {
	border-color: rgba(19, 20, 20, .12);
	background: rgba(19, 20, 20, .04);
	color: #595959;
}

.rcta .rcta__dot {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: #37d67a;
	box-shadow: 0 0 0 4px rgba(55, 214, 122, .18);
}

/* Beats Divi's ".et_pb_post_content_0_tb_body h2" (black, 36-48px) and the
   global h2 padding. The site's Blinker heading font still applies. */
.rcta .rcta__title {
	margin: 0 0 .6rem;
	padding: 0;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.01em;
	color: inherit;
}

/* Divi adds padding-bottom:1em to every <p>. */
.rcta .rcta__text {
	margin: 0 0 1.6rem;
	padding: 0;
	font-size: clamp(1rem, 1.6vw, 1.115rem);
	line-height: 1.6;
	color: rgba(241, 241, 241, .85);
}

.rcta--light .rcta__text { color: rgba(19, 20, 20, .72); }

.rcta .rcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
}

.rcta .rcta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 52px;
	padding: .9rem 1.6rem;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.rcta .rcta__btn svg { flex: 0 0 auto; }

.rcta .rcta__btn--primary {
	background: var(--rcta-accent);
	color: #fff;
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--rcta-accent) 60%, transparent);
}

.rcta .rcta__btn--primary:hover,
.rcta .rcta__btn--primary:focus-visible {
	background: var(--rcta-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--rcta-accent) 65%, transparent);
}

.rcta .rcta__btn--ghost {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .22);
	color: #fff;
}

.rcta .rcta__btn--ghost:hover,
.rcta .rcta__btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	transform: translateY(-2px);
}

.rcta--light .rcta__btn--ghost {
	background: rgba(19, 20, 20, .04);
	border-color: rgba(19, 20, 20, .16);
	color: var(--rcta-ink);
}

.rcta--light .rcta__btn--ghost:hover,
.rcta--light .rcta__btn--ghost:focus-visible {
	background: rgba(19, 20, 20, .08);
	color: var(--rcta-ink);
}

.rcta .rcta__btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--rcta-accent) 40%, #fff);
	outline-offset: 3px;
}

/* Beats Divi's ".et-l--body ul" (disc bullets, 1em indent, 23px bottom padding). */
.rcta .rcta__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	line-height: 1.4;
	color: rgba(241, 241, 241, .75);
}

.rcta--light .rcta__trust { color: rgba(19, 20, 20, .65); }

.rcta .rcta__trust li {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rcta .rcta__trust li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd1a23' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* White checks on the dark card: brand red is too low-contrast on navy. */
.rcta--dark .rcta__trust li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (max-width: 560px) {
	.rcta .rcta__actions { flex-direction: column; align-items: stretch; }
	.rcta .rcta__btn { width: 100%; }
	.rcta .rcta__trust { gap: .55rem 1.1rem; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
	.rcta .rcta__btn { transition: none; }
	.rcta .rcta__btn:hover { transform: none; }
}