/* =====================================================================
   THE STANDARD GLOBAL - Subscribe form
   Scope : #subscribeForm only (does not touch the rest of the page)
   Layout: Desktop (default)  |  Mobile (max-width: 768px)
   ===================================================================== */


/* =====================================================================
   DESIGN TOKENS
   Change these to match the site template.
   ===================================================================== */
#subscribeForm {
	--sf-font: inherit;
	--sf-text: #111111;
	--sf-muted: #8a8a8a;
	--sf-label: #333333;
	--sf-bg: #ffffff;
	--sf-bg-hover: #f5f5f5;
	--sf-border: #d0d0d0;
	--sf-border-focus: #111111;
	--sf-accent: #000000;
	--sf-accent-hover: #E31E24;
	--sf-disabled-bg: #e4e4e4;
	--sf-disabled-text: #9a9a9a;
	--sf-success: #1e8e3e;
	--sf-error: #d93025;
	--sf-info: #1a73e8;

	--sf-radius: 6px;
	--sf-field-height: 52px;
	--sf-field-font: 16px;
	--sf-label-font: 14px;
	--sf-gap: 24px;
	--sf-dropdown-max: 300px;
	--sf-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}


/* =====================================================================
   DESKTOP (default)
   ===================================================================== */

/* ---------- Form ---------- */
#subscribeForm {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--sf-font);
	color: var(--sf-text);
}

#subscribeForm *,
#subscribeForm *::before,
#subscribeForm *::after {
	box-sizing: border-box;
}

#subscribeForm [hidden] {
	display: none !important;
}

span.required {color: red;}

/* ---------- Field group ---------- */
#subscribeForm .form-group {
	position: relative;
	margin: 0 0 var(--sf-gap);
}

#subscribeForm .form-group > label {
	display: block;
	margin: 0 0 8px;
	font-size: var(--sf-label-font);
	font-weight: 600;
	line-height: 1.4;
	color: var(--sf-label);
	text-transform: uppercase;
}


/* ---------- First / Last name (2 columns) ---------- */
#subscribeForm .name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
}


/* ---------- Text inputs ---------- */
#subscribeForm input[type="email"],
#subscribeForm input[type="text"] {
	display: block;
	width: 100%;
	height: var(--sf-field-height);
	margin: 0;
	padding: 0 16px;
	font: inherit;
	font-size: var(--sf-field-font);
	color: var(--sf-text);
	background: var(--sf-bg);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

#subscribeForm input::placeholder {
	color: var(--sf-muted);
	opacity: 1;
}

#subscribeForm input[type="email"]:focus,
#subscribeForm input[type="text"]:focus {
	border-color: var(--sf-border-focus);
	box-shadow: 0 0 0 1px var(--sf-border-focus);
}


/* ---------- Honeypot (hidden from people, still in the DOM for bots) ---------- */
#subscribeForm #website {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}


/* =====================================================================
   SINGLE SELECT  (Country, Nationality, Job level, Industry, Income)
   ===================================================================== */
#subscribeForm .industry-select {
	position: relative;
	width: 100%;
}

#subscribeForm .industry-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: var(--sf-field-height);
	padding: 0 12px 0 16px;
	font-size: var(--sf-field-font);
	background: var(--sf-bg);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	cursor: pointer;
	user-select: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

#subscribeForm .industry-trigger:hover {
	border-color: #a8a8a8;
}

#subscribeForm .industry-trigger:focus-visible,
#subscribeForm .industry-trigger.open {
	outline: none;
	border-color: var(--sf-border-focus);
	box-shadow: 0 0 0 1px var(--sf-border-focus);
}

/* Placeholder vs selected value */
#subscribeForm .industry-trigger .select-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: inherit;
	color: var(--sf-muted);
}

#subscribeForm .industry-trigger.active .select-text {
	color: var(--sf-text);
}

/* Arrow */
#subscribeForm .industry-arrow,
#subscribeForm .multi-select-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--sf-text);
	transition: transform .2s ease;
}

#subscribeForm .industry-arrow svg,
#subscribeForm .multi-select-arrow svg {
	width: 22px;
	height: 22px;
}

#subscribeForm .industry-trigger.open .industry-arrow {
	transform: rotate(180deg);
}

/* Dropdown panel */
#subscribeForm .industry-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 50;
	max-height: var(--sf-dropdown-max);
	overflow-y: auto;
	background: var(--sf-bg);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

#subscribeForm .industry-dropdown.show {
	display: block;
}

/* Searchable: search box stays fixed, only the list scrolls */
#subscribeForm .industry-select.is-searchable .industry-dropdown {
	max-height: none;
	overflow: hidden;
}

#subscribeForm .industry-select.is-searchable .select-options {
	max-height: calc(var(--sf-dropdown-max) - 60px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

#subscribeForm .select-search {
	padding: 8px;
	background: var(--sf-bg);
	border-bottom: 1px solid #ececec;
}

#subscribeForm .select-search .select-search-input {
	height: 40px;
	padding: 0 12px;
	font-size: 15px;
	border-radius: 4px;
}

/* Options */
#subscribeForm .industry-option {
	padding: 11px 16px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--sf-text);
	cursor: pointer;
	transition: background-color .15s ease;
}

#subscribeForm .industry-option:hover {
	background: var(--sf-bg-hover);
}

#subscribeForm .industry-option.selected {
	font-weight: 600;
	color: var(--sf-accent);
	background: rgba(255, 81, 38, .06);
}

#subscribeForm .select-empty {
	padding: 14px 16px;
	font-size: 14px;
	color: var(--sf-muted);
}


/* =====================================================================
   MULTI SELECT  (Topics of interest)
   ===================================================================== */
#subscribeForm .multi-select {
	position: relative;
	width: 100%;
}

#subscribeForm .multi-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: var(--sf-field-height);
	padding: 0 12px 0 16px;
	font-size: var(--sf-field-font);
	background: var(--sf-bg);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	cursor: pointer;
	user-select: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

#subscribeForm .multi-select-trigger:hover {
	border-color: #a8a8a8;
}

#subscribeForm .multi-select-trigger:focus-visible,
#subscribeForm .multi-select.active .multi-select-trigger {
	outline: none;
	border-color: var(--sf-border-focus);
	box-shadow: 0 0 0 1px var(--sf-border-focus);
}

#subscribeForm .multi-select-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: inherit;
	color: var(--sf-muted);
}

#subscribeForm .multi-select:has(input:checked) .multi-select-text {
	color: var(--sf-text);
}

#subscribeForm .multi-select.active .multi-select-arrow {
	transform: rotate(180deg);
}

#subscribeForm .multi-select-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 50;
	max-height: var(--sf-dropdown-max);
	overflow-y: auto;
	padding: 6px 0;
	background: var(--sf-bg);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

#subscribeForm .multi-select.active .multi-select-dropdown {
	display: block;
}

#subscribeForm .multi-option {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sf-text);
	cursor: pointer;
	transition: background-color .15s ease;
}

#subscribeForm .multi-option:hover {
	background: var(--sf-bg-hover);
}


/* =====================================================================
   CHECKBOXES  (Topics + Privacy consent)
   ===================================================================== */
#subscribeForm input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sf-accent);
	cursor: pointer;
}

#subscribeForm .subscribe-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 8px 0 var(--sf-gap);
}

#subscribeForm .subscribe-checkbox input[type="checkbox"] {
	margin-top: 2px;
}

#subscribeForm .subscribe-checkbox label {
	font-size: 14px;
	line-height: 1.5;
	color: var(--sf-label);
	cursor: pointer;
}

#subscribeForm .subscribe-checkbox a {
	color: var(--sf-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#subscribeForm .subscribe-checkbox a:hover {
	color: var(--sf-accent);
}


/* =====================================================================
   SUBMIT
   ===================================================================== */
#subscribeForm .subscribe-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: var(--sf-field-height);
	margin: auto;
	padding: 0 32px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #ffffff;
	background: var(--sf-accent);
	border: 0;
	border-radius: var(--sf-radius);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease, opacity .2s ease;
}

#subscribeForm .subscribe-submit:hover:not(:disabled) {
	background: var(--sf-accent-hover);
}

#subscribeForm .subscribe-submit:focus-visible {
	outline: 2px solid var(--sf-border-focus);
	outline-offset: 2px;
}

#subscribeForm .subscribe-submit:disabled {
	color: var(--sf-disabled-text);
	background: var(--sf-disabled-bg);
	cursor: not-allowed;
}


/* =====================================================================
   STATUS MESSAGE
   ===================================================================== */
#subscribeForm #formMsg {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.5;
}

#subscribeForm #formMsg:empty {
	display: none;
}

#subscribeForm #formMsg.loading { color: var(--sf-accent); }
#subscribeForm #formMsg.success { color: var(--sf-success); }
#subscribeForm #formMsg.info    { color: var(--sf-info); }
#subscribeForm #formMsg.error   { color: var(--sf-error); }

.subscribe-grid{
  max-width:85%;
  display:grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  gap:40px;
  margin-left:auto;
  margin-right:auto;
  justify-items: end;
}

.subscribe-image{text-align:center;}
.subscribe-image img{
  width:100%;
  max-width:380px;
  display:block;
  margin:0 auto;
}

.global-subscribe {
  position: relative;
  padding: 40px 0;
}
.global-subscribe .subscribe-left .headline,
.global-subscribe .subscribe-left .headline h2 {
	font-family: var(--fontHeadline);
	text-transform: uppercase;
	text-align: center;
	font-size: 36px;
	letter-spacing: 0.75px;
	line-height: 1.15;
	font-weight: 400;
}

.global-subscribe-form {background: #EFEDE6; padding: 60px 0;}


/* =====================================================================
   MOBILE  (max-width: 768px)
   ===================================================================== */
@media (max-width: 768px) {

	#subscribeForm {
		--sf-field-height: 48px;
		--sf-field-font: 16px;   /* keep 16px: prevents iOS zoom on focus */
		--sf-label-font: 12px;
		--sf-gap: 20px;
		--sf-dropdown-max: 260px;

		max-width: 100%;
	}

	/* First / Last name stack */
	#subscribeForm .name-row {
		grid-template-columns: 1fr;
	}

	#subscribeForm input[type="email"],
	#subscribeForm input[type="text"] {
		padding: 0 14px;
	}

	#subscribeForm .industry-trigger,
	#subscribeForm .multi-select-trigger {
		padding: 0 10px 0 14px;
		font-size: 14px;
	}

	/* Bigger tap targets in lists */
	#subscribeForm .industry-option,
	#subscribeForm .multi-option {
		padding: 13px 14px;
		font-size: 15px;
	}

	#subscribeForm .select-search .select-search-input {
		height: 44px;
		font-size: 16px;  /* prevents iOS zoom */
	}

	#subscribeForm input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}

	#subscribeForm .subscribe-checkbox label {
		font-size: 13px;
	}

	/* Full-width button */
	#subscribeForm .subscribe-submit {
		width: 50%;
		min-width: 0;
		margin: auto;
	}

	#subscribeForm #formMsg {
		font-size: 14px;
		text-align: center;
	}


	.subscribe-grid{
	  width:100%;
	  grid-template-columns:1fr;
	  gap:10px;
	  max-width: 100%;
	  justify-items: center;
	}

	.subscribe-left h2{
	  text-align:center;
	  line-height:1;
	}

	.subscribe-image img{max-width:245px;}

	.global-subscribe-form {padding: 30px 0;}
	
	.global-subscribe .subscribe-left .headline,
	.global-subscribe .subscribe-left .headline h2 {
		font-size: 24px;
	}

	#subscribeForm input[type="email"], #subscribeForm input[type="text"] {
		font-size: 14px;
	}


}