/*
Theme Name:   ISG
Theme URI:    https://www.isgmn.com/
Description:  Child theme of Hello Elementor for ISG — Full Service Market Research. Header, footer and page templates are built with Elementor Pro's Theme Builder; this theme holds brand tokens and the few style rules Elementor cannot express cleanly.
Author:       Augusta Ash
Template:     hello-elementor
Version:      1.0.0
Text Domain:  isg
Tags:         elementor
*/

/* -----------------------------------------------------------------------------
 * Brand tokens
 * Sampled from the approved ISG design. Keep these in sync with Elementor's
 * Site Settings > Global Colors so the two never drift apart.
 * -------------------------------------------------------------------------- */
:root {
	--isg-teal: #489db2;
	--isg-teal-dark: #3a8497;
	--isg-ink: #414142;
	--isg-grey: #808184;
	--isg-rule: #dfe0e0;
	--isg-white: #fff;

	/* Logo mark accents, for use in graphics and accents elsewhere on the site. */
	--isg-accent-magenta: #d63289;
	--isg-accent-purple: #94427f;
	--isg-accent-red: #b63331;
	--isg-accent-orange: #dd803c;
	--isg-accent-yellow: #eadd50;
	--isg-accent-green: #b5d057;

	/* Tints of the brand teal, used for hero headings and subheads. */
	--isg-sky: #acdbe5;
	--isg-mist: #82bfcc;
	--isg-lime: #b5d057;
	--isg-lime-dark: #a3bd4a;
	--isg-overlay: #1a343b;

	/* Header geometry, shared by the Elementor template and the rules below. */
	--isg-header-height: 119px;
	--isg-header-height-compact: 84px;

	/* One place to change the display face site-wide. Swap this value and the
	   matching family in Elementor > Site Settings > Global Fonts together.
	   Raleway is the brand face, loaded from Google Fonts by Elementor. */
	--isg-font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
 * Site header
 *
 * Structure and content live in the Elementor template "ISG Header"
 * (Templates > Theme Builder). Only what Elementor cannot express is kept here:
 * the 2px keyline above each top-level nav item, and the full-height CTA.
 *
 * Everything that shapes the desktop bar is scoped to >=1025px. Below that
 * Elementor swaps the inline menu for its hamburger, and unscoped rules here
 * (particularly `display`) would out-specify that and leave the desktop menu
 * on screen, overflowing the viewport.
 *
 * DOM: #isg-header > .e-con-inner > [ #isg-header-brand, #isg-header-nav, a#isg-header-cta ]
 * -------------------------------------------------------------------------- */
#isg-header {
	border-bottom: 1px solid var(--isg-rule);
}

#isg-header-cta {
	align-self: stretch;
	text-decoration: none;
}

#isg-header-cta .elementor-heading-title {
	white-space: nowrap;
}

/* ---- desktop bar --------------------------------------------------------- */
@media (min-width: 1025px) {
	#isg-header > .e-con-inner {
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
	}

	/* Elementor gives every `e-con-full` child `width: 100%`, which makes the
	   first region swallow the row. Each region is sized by its own content. */
	#isg-header-brand {
		align-items: center;
		flex: 0 0 auto;
		width: auto;
	}

	#isg-header-nav {
		align-items: stretch;
		flex: 1 1 auto;
		justify-content: flex-end;
		width: auto;
	}

	#isg-header-cta {
		flex: 0 0 210px;
		width: 210px;
	}

	/* The nav runs the full height of the header so its keylines sit on the top
	   edge. Each level has to be told explicitly. */
	#isg-header-nav > .elementor-widget-nav-menu {
		align-self: stretch;
		display: flex;
	}

	#isg-header-nav .elementor-nav-menu--main {
		display: flex;
		height: 100%;
	}

	#isg-header-nav ul.elementor-nav-menu,
	#isg-header-nav ul.elementor-nav-menu > li {
		align-items: stretch;
		height: 100%;
	}

	#isg-header-nav ul.elementor-nav-menu > li > a.elementor-item {
		height: 100%;
	}

	#isg-header .elementor-nav-menu--main > .elementor-nav-menu {
		flex-wrap: nowrap;
	}

	/* Keyline at the top of the header, label dropped to the logo's baseline. */
	#isg-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		align-items: flex-start;
		border-top: 2px solid var(--isg-ink);
		line-height: 1.2;
		padding: 39px 33px 0;
		transition: color 160ms ease, border-color 160ms ease;
		white-space: nowrap;
	}

	#isg-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:hover,
	#isg-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:focus-visible,
	#isg-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item.elementor-item-active {
		border-top-color: var(--isg-teal);
	}

	/* 12px between keylines, split either side of each item. */
	#isg-header .elementor-nav-menu--main {
		--e-nav-menu-horizontal-menu-item-margin: 6px;
	}
}

/* ---- tablet and below ---------------------------------------------------- */
@media (max-width: 1024px) {
	#isg-header > .e-con-inner {
		align-items: center;
		flex-wrap: nowrap;
		gap: 12px;
	}

	#isg-header-brand,
	#isg-header-nav {
		align-items: center;
		flex: 0 1 auto;
		min-width: 0;
		width: auto;
	}

	#isg-header-nav {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	#isg-header-cta {
		flex: 0 0 auto;
		width: auto;
	}

	/* The dropdown panel spans the header rather than hugging the toggle. */
	#isg-header .elementor-nav-menu--dropdown {
		margin-top: 0;
	}

	#isg-header .elementor-nav-menu--dropdown a.elementor-item,
	#isg-header .elementor-nav-menu--dropdown a.elementor-sub-item {
		border-top: 0;
		padding: 14px 24px;
		white-space: normal;
	}
}

/* -----------------------------------------------------------------------------
 * Site footer
 *
 * A single dark bar: copyright, the CCPA "Your Privacy Choices" opt-out, and the
 * privacy policy, centred on one line. Content lives in the Elementor template
 * "ISG Footer"; the standardised opt-out icon is drawn from the theme so it
 * cannot be swapped or deleted by accident.
 * -------------------------------------------------------------------------- */
#isg-footer,
#isg-footer .elementor-heading-title,
#isg-footer .elementor-widget-text-editor {
	color: var(--isg-white);
}

/* The copyright is a Text Editor widget so its [isg_year] shortcode resolves. */
#isg-footer-copyright p {
	margin: 0;
}

#isg-footer .elementor-heading-title a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 160ms ease;
}

#isg-footer .elementor-heading-title a:hover,
#isg-footer .elementor-heading-title a:focus-visible {
	opacity: 0.75;
}

/* The opt-out link carries the standardised icon ahead of its label. */
#isg-footer-choices .elementor-heading-title a {
	align-items: center;
	display: inline-flex;
	gap: 9px;
}

#isg-footer-choices .elementor-heading-title a::before {
	background: url("assets/privacy-choices.svg") no-repeat center / contain;
	content: "";
	flex: 0 0 auto;
	height: 24px;
	width: 50px;
}

@media (max-width: 767px) {
	#isg-footer {
		text-align: center;
	}

	#isg-footer-choices .elementor-heading-title a::before {
		height: 20px;
		width: 42px;
	}
}

/* -----------------------------------------------------------------------------
 * Callout / hero sections
 *
 * One section used at the top of most pages, over either a photo or a video.
 * The Elementor template "ISG Hero" carries the structure; these rules carry
 * the type scale and the parts Elementor has no control for (the tilde rule).
 *
 * Colour is deliberately NOT fixed here. Every text element keeps its own
 * Elementor colour control so any line — or any word, via the Text Editor —
 * can be set from the brand palette without touching CSS.
 * -------------------------------------------------------------------------- */
.isg-hero {
	position: relative;
}

.isg-hero__inner {
	/* Elementor sizes containers from --width, so set that as well as max-width
	   or the measure runs the full width of the section. */
	--width: min(920px, 100%);
	margin-inline: auto;
	max-width: 920px;
	text-align: center;
}

/* Type scale, measured from the approved designs and allowed to shrink on
   narrow screens rather than wrap into an unreadable stack. */
.isg-hero__title .elementor-heading-title {
	font-family: var(--isg-font-display);
	font-size: clamp(2.25rem, 3.6vw, 3.75rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;
}

.isg-hero__lede {
	font-family: var(--isg-font-display);
	font-size: clamp(1.35rem, 2.8vw, 2.875rem);
	font-weight: 600;
	line-height: 1.22;
}

.isg-hero__heading .elementor-heading-title {
	font-family: var(--isg-font-display);
	font-size: clamp(1.85rem, 2.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
}

.isg-hero__subhead .elementor-heading-title {
	font-family: var(--isg-font-display);
	font-size: clamp(1.125rem, 1.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.3;
}

.isg-hero__body {
	font-size: clamp(1rem, 1.2vw, 1.25rem);
	line-height: 1.6;
}

.isg-hero__body p:last-child {
	margin-bottom: 0;
}

/* The tilde rule that sits between heading and subhead. Drawn rather than typed
   so it keeps its weight and spacing whatever the heading font is. */
.isg-hero__rule .elementor-heading-title {
	color: var(--isg-mist);
	font-family: var(--isg-font-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
}

/* ---- call-to-action button ------------------------------------------------ */
/* Colour, padding and type come from Elementor's Global Button settings so the
   client's own controls stay authoritative. Only the width the design calls for
   is enforced here. */
.isg-hero__cta .elementor-button {
	letter-spacing: 0.01em;
	min-width: 203px;
	transition: background-color 160ms ease;
}

/* ---- utility text colours -------------------------------------------------
 * For colouring individual words inside a heading, where Elementor's colour
 * control applies to the whole widget. Wrap the word in a span with one of
 * these classes; they match the Global Colours shown in the colour picker.
 * -------------------------------------------------------------------------- */
.isg-t-white { color: var(--isg-white) !important; }
.isg-t-sky   { color: var(--isg-sky) !important; }
.isg-t-mist  { color: var(--isg-mist) !important; }
.isg-t-lime  { color: var(--isg-lime) !important; }
.isg-t-teal  { color: var(--isg-teal) !important; }
.isg-t-ink   { color: var(--isg-ink) !important; }

/* -----------------------------------------------------------------------------
 * Entrance animations
 *
 * The old site used four Wix effects — floatIn, slideIn, fadeIn and revealIn —
 * all at 1200ms on an ease-in-out-cubic curve, and all suppressed for visitors
 * who ask for reduced motion.
 *
 * Three of the four map onto Elementor's own entrance animations, so the client
 * keeps picking them from the Motion Effects dropdown; the rules below retune
 * Elementor's defaults to the old site's timing and travel. The fourth, the
 * clip-path wipe, has no Elementor equivalent and is provided as a class.
 * -------------------------------------------------------------------------- */

/* Elementor ships Animate.css timing (1s, ease). Match the old site instead. */
.elementor .animated {
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.elementor .animated.animated-slow {
	animation-duration: 1.6s;
}

.elementor .animated.animated-fast {
	animation-duration: 0.8s;
}

/* Animate.css travels a full 100%, which reads as a lurch next to Wix's 60px.
   Redefining the four fade keyframes gives the dropdown the old site's feel. */
@keyframes fadeInUp {
	from { opacity: 0; transform: translate3d(0, 60px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes fadeInDown {
	from { opacity: 0; transform: translate3d(0, -60px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
	from { opacity: 0; transform: translate3d(-60px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
	from { opacity: 0; transform: translate3d(60px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

/* ---- the wipe (Wix "revealIn"), which Elementor does not offer ------------ */
.isg-reveal {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	will-change: clip-path;
}

.isg-reveal.is-revealed {
	clip-path: inset(0 0 0 0);
}

.isg-reveal--down { clip-path: inset(100% 0 0 0); }
.isg-reveal--left { clip-path: inset(0 100% 0 0); }
.isg-reveal--right { clip-path: inset(0 0 0 100%); }

.isg-reveal--down.is-revealed,
.isg-reveal--left.is-revealed,
.isg-reveal--right.is-revealed {
	clip-path: inset(0 0 0 0);
}

/* ---- accessibility --------------------------------------------------------
 * Elementor does not honour prefers-reduced-motion on entrance animations, so
 * the old site was actually better behaved here. Restore that: show everything
 * immediately rather than animating it.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.elementor .animated,
	.elementor .elementor-invisible {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	.isg-reveal {
		clip-path: none !important;
		transition: none !important;
	}
}

/* -----------------------------------------------------------------------------
 * Off-canvas mobile menu
 *
 * The panel, its trigger and its contents are Elementor elements. It uses a
 * separate, flat "Mobile Menu" rather than the Primary menu: "Industries" is a
 * real page, so it must read as a link and not double as an accordion toggle,
 * and its pages must always be on screen. Elementor's nav widget renders
 * parent/child through SmartMenus, which keeps the parent collapsed no matter
 * what is overridden, so the submenu is sidestepped entirely.
 *
 * Trade-off: two menus in Appearance > Menus. Primary drives the desktop bar,
 * Mobile Menu drives this panel. Adding a page means adding it to both.
 *
 * The indent below is the only styling needed: the eight industry items carry
 * an "isg-sub" CSS class, set per item in the menu screen.
 * -------------------------------------------------------------------------- */
.isg-oc-nav .isg-sub > a.elementor-item {
	/* Elementor's own generated rule for the widget's menu items is more
	   specific than anything reasonable here, hence !important. */
	font-size: 17px !important;
	padding-left: 48px !important;
}