/* JG Prestige – motion & hover layer (paired with assets/js/jg-motion.js) */

:root {
	--jg-ease-out: cubic-bezier(.2, .7, .2, 1);
	--jg-ease-in-out: cubic-bezier(.77, 0, .18, 1);
	--jg-gold: #FEAF38;
	--jg-gold-dark: #C08125;
	--jg-navy: #02021E;
}

/* ---------- Entrance reveals (only when html.jg-motion is set by JS) ---------- */

/* Heading: character reveal */
html.jg-motion .jg-split .elementor-heading-title { opacity: 0; transition: opacity .6s ease; }
html.jg-motion .jg-split.jg-ready .elementor-heading-title { opacity: 1; }
.jg-split .jg-w { display: inline-block; white-space: nowrap; }
.jg-split .jg-c {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, .45em, 0);
	transition: opacity .5s ease, transform .7s var(--jg-ease-out);
	will-change: transform, opacity;
}
.jg-split.jg-in .jg-c { opacity: 1; transform: none; }
/* carousels clone slides for looping; their headings stay static */
html.jg-motion .e-n-carousel .jg-split .elementor-heading-title,
html.jg-motion .swiper .jg-split .elementor-heading-title,
html.jg-motion .e-n-carousel .jg-fade-text:not(.jg-in),
html.jg-motion .e-n-carousel .jg-fade-up:not(.jg-in) { opacity: 1; transform: none; }

/* Image: clip reveal with a soft settle */
html.jg-motion .jg-reveal-img img {
	clip-path: inset(0 0 100% 0);
	transform: scale(1.08);
	transition: clip-path 1.1s var(--jg-ease-in-out), transform 1.4s var(--jg-ease-out);
}
html.jg-motion .jg-reveal-img.jg-in img { clip-path: inset(0 0 0 0); transform: none; }

/* Sections, cards, copy */
html.jg-motion .jg-fade-up:not(.jg-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
html.jg-motion .jg-fade-up { transition: opacity .8s ease, transform .9s var(--jg-ease-out); }
html.jg-motion .jg-fade-text:not(.jg-in) { opacity: 0; transform: translate3d(0, 12px, 0); }
html.jg-motion .jg-fade-text { transition: opacity .8s ease, transform .8s var(--jg-ease-out); }

/* Icon lists: items stagger in */
html.jg-motion .jg-list .elementor-icon-list-item { opacity: 0; transform: translate3d(-10px, 0, 0); transition: opacity .5s ease, transform .6s var(--jg-ease-out); }
html.jg-motion .jg-list.jg-in .elementor-icon-list-item { opacity: 1; transform: none; }

/* ---------- Hover effects ---------- */

.jg-btn .elementor-button {
	transition: transform .3s var(--jg-ease-out), box-shadow .3s ease, filter .3s ease;
}
.jg-btn .elementor-button:hover,
.jg-btn .elementor-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -8px rgba(192, 129, 37, .55);
	filter: brightness(1.04);
}

.e-con.jg-hover-card {
	transition: opacity .8s ease, transform .45s var(--jg-ease-out), box-shadow .45s ease, background .3s ease;
}
.e-con.jg-hover-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -18px rgba(2, 2, 30, .28) !important;
}

.jg-reveal-img,
.jg-reveal-img .elementor-widget-container { overflow: hidden; border-radius: 20px; }
.jg-reveal-img img { transition: transform .9s var(--jg-ease-out); }
.jg-reveal-img:hover img { transform: scale(1.035); }

.jg-list .elementor-icon-list-item > a,
.jg-list .elementor-icon-list-item > .elementor-icon-list-text { transition: transform .3s var(--jg-ease-out), color .3s ease; }
.jg-list .elementor-icon-list-item:hover .elementor-icon-list-text { transform: translateX(4px); }

/* Links inside body text: keep the paragraph colour, gold underline, gold on hover.
   Works on both light sections and navy (.jg-dark) sections. */
.elementor-widget-text-editor a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--jg-gold);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color .25s ease, text-decoration-color .25s ease;
}
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus-visible { color: var(--jg-gold-dark); text-decoration-color: currentColor; }
.jg-dark .elementor-widget-text-editor a:hover,
.jg-dark .elementor-widget-text-editor a:focus-visible { color: var(--jg-gold); }
/* the gold credit link in the footer keeps its brand colour */
.jg-dark .elementor-widget-text-editor a[href*="americanwebdevelopers"],
.jg-dark .elementor-widget-text-editor a[href*="american"] { color: var(--jg-gold); text-decoration: none; }
/* skip link from the parent theme */
.skip-link { color: var(--jg-navy); }

/* Home "Flexible Support" cards: list text turns white on the dark hover overlay */
.jg-support-card ul { padding-left: 18px; margin: 0; }
.jg-support-card li { margin-bottom: 6px; }
.jg-support-card:hover li,
.jg-support-card:hover strong { color: #fff; }

/* FAQ accordions: the open item reads as one card (title + answer) */
.jg-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.jg-faq .e-n-accordion-item-title { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.jg-faq .e-n-accordion-item:not([open]) > .e-n-accordion-item-title:hover { box-shadow: 0 10px 24px -16px rgba(192, 129, 37, .6); }
.jg-faq .e-n-accordion-item > .e-con { overflow: hidden; }
.jg-faq .e-n-accordion-item > .e-con p:last-child { margin-bottom: 0; }

/* Pricing cards: buttons line up at the bottom of each card */
.jg-price-card { display: flex; flex-direction: column; }
.jg-price-card > .elementor-widget-button,
.jg-price-card .jg-card-bottom { margin-top: auto !important; }

/* Gold icons above card headings */
.jg-icon .elementor-icon { transition: transform .4s var(--jg-ease-out); }
.jg-hover-card:hover .jg-icon .elementor-icon,
.jg-card:hover .jg-icon .elementor-icon { transform: translateY(-3px) rotate(-4deg); }

/* Text lists inside content boxes */
.jg-card ul { padding-left: 20px; margin: 0 0 12px; }
.jg-card li { margin-bottom: 6px; }

/* ---------- Language switcher (GTranslate "dropdown with flags") ---------- */
.jg-lang-switcher .gt_switcher { width: auto !important; overflow: visible !important; position: relative; font-family: "Plus Jakarta Sans", sans-serif; }
.jg-lang-switcher .gt_switcher a { font-size: 14px !important; font-family: inherit; }
.jg-lang-switcher .gt_switcher a img { border-radius: 50%; object-fit: cover; opacity: 1 !important; }
.jg-lang-switcher .gt_switcher .gt_selected { background: #fff !important; border-radius: 999px; }
.jg-lang-switcher .gt_switcher .gt_selected a {
	width: auto !important;
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 6px 34px 6px 7px !important;
	line-height: 24px;
	border-radius: 999px;
	font-weight: 500;
	transition: background .25s ease, box-shadow .25s ease;
}
.jg-lang-switcher .gt_switcher .gt_selected a:after { top: 50%; transform: translateY(-50%); }
.jg-lang-switcher .gt_switcher .gt_selected a.open:after { transform: translateY(-50%) rotate(-180deg); }
.jg-lang-switcher .gt_switcher .gt_selected a:hover { box-shadow: 0 8px 18px -10px rgba(192, 129, 37, .7); }
.jg-lang-switcher .gt_switcher .gt_option {
	position: absolute !important;
	top: calc(100% + 6px);
	right: 0;
	width: auto !important;
	min-width: 150px;
	height: auto !important;
	max-height: none !important;
	border: 1px solid #E8DCCB !important;
	border-radius: 12px;
	box-shadow: 0 14px 30px -12px rgba(2, 2, 30, .25);
}
.jg-lang-switcher .gt_switcher .gt_option a:not(.gt_current) { display: flex !important; align-items: center; gap: 8px; padding: 8px 12px !important; line-height: 24px; }

/* compact toggle: flag + arrow (language names appear in the dropdown) */
.jg-lang-switcher .gt_switcher .gt_selected a { font-size: 0 !important; gap: 0; padding: 4px 26px 4px 4px !important; }
.jg-lang-switcher .gt_switcher .gt_selected a:after { right: 8px; }

/* Header call-to-action stays on one line next to the language switcher */
.jg-nowrap .elementor-button { white-space: nowrap; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	/* text-style buttons ("Read More", "Request Service") get a comfortable tap area */
	.jg-btn .elementor-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
	.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	.jg-btn .elementor-button, .jg-hover-card, .jg-reveal-img img { transition: none !important; }
	.jg-hover-card:hover, .jg-btn .elementor-button:hover, .jg-reveal-img:hover img { transform: none !important; }
}