/* AiGenics Website Enhancements — front-end styles. */

/* ---------- Issue 3: the top menu stays at the top of the screen while scrolling ---------- */
#masthead .ag-nav-row {
	position: fixed !important;
	top: calc(15px + var(--wp-admin--admin-bar--height, 0px)) !important;
	left: 0 !important; right: 0 !important;
	z-index: 9990 !important;
	transition: top .25s ease, background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
/* once the page moves: a frosted-glass bar flush with the top of the screen (no gap above it). The page shows through
   softly blurred; the tint is dark enough that the white logo text and menu stay readable on white pages. */
#masthead .ag-nav-row.agsf-scrolled {
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	padding-top: 10px !important; padding-bottom: 10px !important;
	background: linear-gradient(180deg, rgba(30, 30, 34, 0.90) 0%, rgba(22, 22, 26, 0.84) 100%) !important;   /* dark enough for the beige menu text on white pages (QA R-02) */
	-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.18);
}
@media (max-width: 782px) {
	/* the WordPress toolbar scrolls away on phones */
	body.admin-bar #masthead .ag-nav-row.agsf-scrolled { top: 0 !important; }
}
/* the rounded menu panel becomes a lighter glass panel with a fine light edge (its own blur would turn muddy inside the bar's) */
@media (min-width: 1025px) {
	#masthead .ag-nav-row.agsf-scrolled .elementor-element-313796f {
		-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
		background: rgba(255, 255, 255, 0.08) !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
	}
}
/* tablets and phones: the menu panel is a full-width layer that only holds the menu button — no panel outline, and it
   fills the bar's height so the button sits level with the logo */
@media (max-width: 1024px) {
	#masthead .ag-nav-row.agsf-scrolled .elementor-element-313796f {
		-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
		background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
		top: 0 !important; bottom: 0 !important; height: auto !important;
		display: flex !important; align-items: center !important;
	}
}
/* menu link colours: normal = the site's beige, current page = brand red, under the pointer = white */
#masthead .ag-nav-row .hfe-nav-menu > li a.hfe-menu-item {
	color: #edcdb8e6 !important;
}
#masthead .ag-nav-row .hfe-nav-menu > li.current-menu-item a.hfe-menu-item,
#masthead .ag-nav-row .hfe-nav-menu > li.current-menu-ancestor a.hfe-menu-item,
#masthead .ag-nav-row .hfe-nav-menu > li.agsf-current a.hfe-menu-item {
	color: #a2262d !important;
}
#masthead .ag-nav-row .hfe-nav-menu > li a.hfe-menu-item:hover,
#masthead .ag-nav-row .hfe-nav-menu > li a.hfe-menu-item:focus-visible {
	color: #ffffff !important;
}
#masthead .ag-nav-row .hfe-nav-menu > li a.hfe-menu-item .ag-sub-ico,
#masthead .ag-nav-row .hfe-nav-menu > li a.hfe-menu-item .sub-arrow {
	color: inherit !important;
}

/* ---------- Issue 6: dropdown keeps its rounded corners and shows which option is under the pointer ---------- */
#masthead .sub-menu {
	overflow: hidden !important;
	padding: 6px !important;
}
#masthead .sub-menu > li,
#masthead .sub-menu > li:first-child,
#masthead .sub-menu > li:last-child {
	border-radius: 10px !important;
	background-color: transparent !important;
}
#masthead .sub-menu a.hfe-sub-menu-item {
	border-radius: 10px !important;
	transition: background-color .15s ease, color .15s ease;
}
#masthead .sub-menu a.hfe-sub-menu-item:hover,
#masthead .sub-menu a.hfe-sub-menu-item:focus-visible,
#masthead .sub-menu li.current-menu-item > a.hfe-sub-menu-item {
	background-color: rgba(237, 205, 184, 0.16) !important;
	color: #edcdb8 !important;
}

/* ---------- Issue 29 (and every link): a clear outline when moving with the Tab key ---------- */
#colophon a:focus-visible,
#colophon button:focus-visible,
#masthead a:focus-visible,
#masthead [tabindex]:focus-visible,
.elementor a:focus-visible {
	outline: 2px solid #edcdb8 !important;
	outline-offset: 3px !important;
	border-radius: 4px;
}

/* ---------- Issue 7: back-to-top button ---------- */
.agsf-top {
	position: fixed; right: 24px; bottom: 24px; z-index: 9980;
	width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #a3232a; color: #fff; cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s;
}
.agsf-top.agsf-show { opacity: 1; visibility: visible; transform: none; }
.agsf-top:hover { background: #c22d35; }
.agsf-top:focus-visible { outline: 2px solid #edcdb8; outline-offset: 3px; }
.agsf-top svg { width: 20px; height: 20px; }
@media (max-width: 767px) { .agsf-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }
body.agsf-cookie-open .agsf-top { bottom: 96px; }
@media (max-width: 767px) { body.agsf-cookie-open .agsf-top { bottom: 170px; } }

/* ---------- Issue 22: cookie notice ---------- */
.agsf-cookie {
	position: fixed; left: 24px; bottom: 24px; z-index: 9985; max-width: 520px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
	padding: 16px 18px; border-radius: 14px;
	background: #282e4d; color: #f3f4f8; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	font: 400 14px/1.45 "DM Sans", "Bai Jamjuree", sans-serif;
}
.agsf-cookie p { margin: 0; flex: 1 1 260px; color: inherit; }
.agsf-cookie a { color: #edcdb8; text-decoration: underline; }
.agsf-cookie .agsf-cookie-btns { display: flex; gap: 8px; }
.agsf-cookie button {
	padding: 9px 16px; border-radius: 999px; border: 1px solid #edcdb8; cursor: pointer;
	font: 600 13px/1 "Bai Jamjuree", sans-serif; letter-spacing: .02em; text-transform: uppercase;
	background: transparent; color: #edcdb8;
}
.agsf-cookie button.agsf-accept { background: #a3232a; border-color: #a3232a; color: #fff; }
.agsf-cookie button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) { .agsf-cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* ---------- Issue 30: TradeComply wordmark keeps its proportions ---------- */
.elementor img[src*="tradecomply-wordmark"] {
	/* The logo fills the box Elementor gives it (only the empty margin around the wordmark is trimmed). The box size itself
	   is left alone: setting the height to "auto" made a lazy-loaded logo use WordPress's 1500 px placeholder height. */
	object-fit: cover !important;
}

/* ---------- Home "Services" slider: exactly three whole cards across the screen on desktop (the third was cut off) ---------- */
@media (min-width: 1025px) {
	/* side margin = gap between cards, so the neighbouring cards sit exactly outside the visible area */
	.elementor-element-7821a595 { --agsf-g: max(20px, 1.302vw); margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; padding-left: var(--agsf-g) !important; padding-right: var(--agsf-g) !important; box-sizing: border-box !important; }
	.elementor-element-426d96e3 { gap: var(--agsf-g) !important; }
	.elementor-element-426d96e3 > .ag-service-card { width: calc((100% - 2 * var(--agsf-g)) / 3) !important; min-width: 0 !important; flex: 0 0 auto !important; }
}
/* tablet: two whole cards; phone: one whole card (no half card at the edge) */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-426d96e3 { gap: 40px !important; }
	.elementor-element-426d96e3 > .ag-service-card { width: calc((100vw - 120px) / 2) !important; min-width: 0 !important; flex: 0 0 auto !important; }
}
@media (max-width: 767px) {
	.elementor-element-426d96e3 { gap: 40px !important; }
	.elementor-element-426d96e3 > .ag-service-card { width: calc(100vw - 40px) !important; min-width: 0 !important; flex: 0 0 auto !important; }
}

/* ---------- Issue 25: no light band behind the Request a Demo (and Company) heading video ---------- */
.elementor-element-4fd7278e,
.e-background-video.agsf-dark-bg {
	background-color: #2a0d13 !important;
}
.elementor-element-4fd7278e > video.e-background-video__media { height: calc(100% + 2px) !important; }
/* The form box overlaps the heading section; when error messages make it taller, the footer moves down and the page's
   white background showed in the gap. The gap now has the footer's own top colour, so it blends in. */
body.agsf-demo-page .elementor[data-elementor-type="wp-page"],
body.agsf-demo-page #content {
	background-color: #781f26;
}

/* ---------- Issue 13: the privacy link under the demo / contact form stays clickable after an error ---------- */
.agsf-privacy-bar { position: relative !important; z-index: 5 !important; }
/* The privacy line is pinned to the bottom of the form panel, one layer below the (transparent) form box. When error
   messages make the form box taller, the box covered the line and caught the clicks. The line's layer now sits on top. */
.agsf-privacy-layer,
.elementor-element-e55348c { z-index: 5 !important; }

/* ---------- Issue 5: TradeComply demo video controls ---------- */
.agsf-video { position: relative; }
.agsf-vbtns { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; gap: 8px; pointer-events: auto; }
.agsf-vbtn {
	width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: rgba(20, 22, 40, 0.78); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	transition: background-color .2s;
}
.agsf-vbtn:hover { background: #a3232a; }
.agsf-vbtn:focus-visible { outline: 2px solid #edcdb8; outline-offset: 2px; }
.agsf-vbtn svg { width: 18px; height: 18px; }
.agsf-vlabel {
	position: absolute; left: 12px; bottom: 12px; z-index: 6; padding: 5px 10px; border-radius: 999px;
	background: rgba(20, 22, 40, 0.78); color: #fff; font: 600 12px/1 "Bai Jamjuree", sans-serif; letter-spacing: .04em; text-transform: uppercase;
	pointer-events: none;
}
.agsf-vmodal {
	position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
	background: rgba(8, 10, 20, 0.88); padding: 24px;
}
.agsf-vmodal video { width: min(1400px, 96vw); max-height: 88vh; border-radius: 10px; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.agsf-vmodal .agsf-vclose {
	position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: #fff; color: #1b1f33; font: 700 22px/1 sans-serif; cursor: pointer;
}

/* ---------- Issue 23: job posts in normal sentence case, real sub-headings ---------- */
.ag-modal p,
.ag-modal li,
.ag-modal .ag-careers-scroll,
.ag-careers-accent {
	text-transform: none !important;
}
.ag-careers-scroll > strong {
	display: block; margin: 18px 0 8px;
	color: #a3232a; font-family: "Bai Jamjuree", sans-serif; font-weight: 600; font-size: 1.25em; line-height: 1.3;
	text-transform: none;
}

/* ---------- Issues 1 and 28: resume box — message under the box, hint with the allowed files ---------- */
.ag-cf7-careers-apply .ag-file .wpcf7-not-valid-tip {
	position: absolute !important; top: calc(100% + 5px) !important; left: 4px !important; right: auto !important;
	margin: 0 !important; transform: none !important; white-space: normal;
}
.ag-cf7-careers-apply .ag-file-field:has(.wpcf7-not-valid-tip) { padding-bottom: 26px; }
.ag-file-hint {
	display: block; margin: 6px 4px 0; font-size: 13px; line-height: 1.3; color: #b6d6dd; opacity: .9;
	text-transform: none;
}
.ag-file-field:has(.wpcf7-not-valid-tip) .ag-file-hint { display: none; }

/* ---------- Issue 20: a short note when a field reaches its maximum length ---------- */
.agsf-max-note {
	display: block; margin: 4px 4px 0; font-size: 12px; line-height: 1.3; color: #edcdb8;
}

/* ---------- Issue 21: Request a Demo shows the form straight away (the "Request a Demo" card is not needed) ---------- */
body.agsf-demo-page .ag-id-demo-intro { display: none !important; }

/* ---------- Footer menu columns: on tablets and phones the four columns (Company, Services, Resources, Get Started) sit in
   an even two-column grid, so every heading and its links start on the same line (layout only, footer content unchanged) ---------- */
@media (max-width: 1024px) {
	.elementor-element-6a3af161,
	.elementor-element-6ad650ed,
	.elementor-element-773d11b8,
	.elementor-element-7b4d0ba9,
	.elementor-element-41a58f22 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		align-items: start !important;
		justify-items: start !important;
	}
	.elementor-element-6a3af161 > .e-con,
	.elementor-element-6ad650ed > .e-con,
	.elementor-element-773d11b8 > .e-con,
	.elementor-element-7b4d0ba9 > .e-con,
	.elementor-element-41a58f22 > .e-con {
		width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; align-self: start !important;
	}
}

/* ---------- Issue 19: Careers "Hiring & Career Growth" section fits its content (set by the script when the illustration
   sits beside the questions): no fixed height, so closed questions leave no blank area ---------- */
.elementor-element-170a0272.agsf-fit {
	min-height: 0 !important; height: auto !important;
	padding-bottom: 60px !important;
	overflow: hidden;
}
.elementor-element-170a0272.agsf-fit > img {
	bottom: auto !important; width: auto !important; max-width: 494px; object-fit: contain; object-position: left bottom;
	transition: height .2s ease;
}

/* TradeComply hero video: clicking or tapping the video pauses / resumes it */
.agsf-vclick { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---------- Feature cards: the tinted card covers its whole illustration (set by the script, which measures each card) ---------- */
.agsf-fullcard {
	isolation: isolate;
	background: transparent !important;
}
.agsf-fullcard::before {
	content: "";
	position: absolute;
	top: var(--agsf-t, 0) !important; right: var(--agsf-r, 0) !important; bottom: var(--agsf-b, 0) !important; left: var(--agsf-l, 0) !important;
	width: auto !important; height: auto !important;                 /* Elementor sizes this layer to the card itself */
	z-index: -1;
	background: var(--agsf-bg) !important;
	border-radius: var(--agsf-rad, 36px);
	pointer-events: none;
}

/* ---------- QA N-09: cookie notice — compact on phones, and the page can scroll far enough to show everything above it ---------- */
body.agsf-cookie-open { padding-bottom: var(--agsf-cookie-h, 0px); }
@media (max-width: 767px) {
	.agsf-cookie { padding: 10px 12px; gap: 8px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
	.agsf-cookie p { flex-basis: 100%; }
	.agsf-cookie .agsf-cookie-btns { width: 100%; }
	.agsf-cookie button { flex: 1 1 0; padding: 8px 10px; font-size: 12px; }
}

/* ---------- QA N-11: one look for every form message (errors and the maximum-length note), in every form ---------- */
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .agsf-max-note {
	display: block !important;
	margin: 5px 4px 0 !important;
	font: 500 12px/1.35 "DM Sans", "Bai Jamjuree", sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #ffb3b8 !important;
	text-align: left !important;
	white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; height: auto !important;
}
.wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) .agsf-max-note { display: none !important; }   /* never two messages under one field */

/* ---------- QA N-10: article text — even spacing, bullet points like the paragraphs, no empty gaps ---------- */
.agsf-article .agsf-empty { display: none !important; }
.agsf-article > p.e-paragraph-base:not(.ag-post-title):not(.ag-post-date):not(.ag-post-author) { margin-top: 0.85em !important; margin-bottom: 0 !important; }
.agsf-article > h2, .agsf-article > h3 { margin-top: 1.6em !important; margin-bottom: 0.3em !important; }
.agsf-article > .elementor-widget-text-editor { margin-top: 0.6em !important; }
.agsf-article ul, .agsf-article ol { margin: 0 !important; padding-left: 1.3em !important; }
.agsf-article li {
	font-size: var(--agsf-p-fs) !important; line-height: var(--agsf-p-lh) !important; color: var(--agsf-p-color) !important;
	margin: 0.35em 0 0 !important;
}
.agsf-article .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }

/* ---------- QA N-03: research articles — the author and date are shown once (in the header), without the "|" ---------- */
.ag-post-author.e-78d7bc84-6b15 { display: none !important; }
.ag-post-author .ag-by-sep { display: none !important; }
.ag-post-author .ag-by-name::after { content: "\00a0\00b7\00a0"; }   /* name and date separated by a dot */

/* ---------- QA R-02: the current page in the menu is also underlined, so it stays clear on the dark bar ---------- */
#masthead .ag-nav-row .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
#masthead .ag-nav-row .hfe-nav-menu > li.current-menu-ancestor > a.hfe-menu-item,
#masthead .ag-nav-row .hfe-nav-menu > li.agsf-current > a.hfe-menu-item,
#masthead .ag-nav-row .hfe-nav-menu > li.current-menu-item > .hfe-has-submenu-container > a.hfe-menu-item,
#masthead .ag-nav-row .hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item,
#masthead .ag-nav-row .hfe-nav-menu > li.agsf-current > .hfe-has-submenu-container > a.hfe-menu-item {
	text-decoration: underline !important;
	text-decoration-color: #ffffff !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 7px !important;
}