/*
 * What the investor sections share: the band, the box its content is capped
 * in, and the head — a heading with its coloured word, and a line of copy.
 *
 * Read from cp-all-designer css/app.css:189-192 (.container), 230-252 (.h-sec),
 * 291-294 (.lead), 350-352 (.sec), 385-408 (.sec--rhythm, .sec--flow,
 * .sec__head), and the steps down at 2889-2900 and 3015-3017.
 *
 * Each part carries an attribute this file reads and the widget's own class,
 * which its Style controls write to: every measure a control states is stated
 * there, for each tier, and not here.
 */

/* app.css:350-352, 395 — .sec.sec--flow: no height of its own. */
[data-custom-investor-band] {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
}

[data-custom-investor-band] [data-custom-investor-inner] {
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;                     /* the content cap, every band */
	margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* The head                                                            */
/* ------------------------------------------------------------------ */

/* app.css:404 */
[data-custom-investor-band] [data-custom-investor-head] {
	box-sizing: border-box;
	margin-top: 0;
	padding: 0;
}

/* app.css:202-210 — the small line over a heading */
[data-custom-investor-band] [data-custom-investor-eyebrow] {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.6;                      /* app.css:174 body, which the design leaves it to */
	letter-spacing: 2px;                   /* app.css:204 measures 1.15px */
	text-transform: uppercase;
}

/* app.css:230-233 */
[data-custom-investor-band] [data-custom-investor-title] {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

[data-custom-investor-band] [data-custom-investor-title] strong,
[data-custom-investor-band] [data-custom-investor-title] b {
	font-weight: 700;                      /* app.css:239 */
	color: inherit;
}

/* app.css:244-247 — the word set apart; its colour is written into the heading. */
[data-custom-investor-band] [data-custom-investor-title] em {
	position: relative;
	display: inline-block;
	font-style: normal;                    /* app.css:255-260: upright, a step larger than its line */
	font-weight: 700;
	font-size: 108%;  
}

/* app.css:248-251 — .06em and .16em of a 56px heading. */
[data-custom-investor-band] [data-custom-investor-title] em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 10px;
	border-radius: 4px;                    /* app.css:250 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

/* app.css:291-294 */
[data-custom-investor-band] [data-custom-investor-intro] {
	/* a head set to the centre or the right carries its line of copy with it */
	margin-right: var(--custom-investor-head-right, 0);
	margin-bottom: 0;
	margin-left: var(--custom-investor-head-left, 0);
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
	text-transform: none;
}

/* The ringed arrow a link ends in — investor.css:225-239, 320-333. */
[data-custom-investor-band] [data-custom-investor-go] {
	flex: none;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border-width: 2px;                     /* investor.css:228 measures 1.5px */
	border-style: solid;
	border-radius: 50%;
	transition: color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-custom-investor-band] [data-custom-investor-go] svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* .06em and .16em of a 36px heading */
	[data-custom-investor-band] [data-custom-investor-title] em::after {
		bottom: 2px;
		height: 6px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* app.css:3016 */
	[data-custom-investor-band] [data-custom-investor-intro] {
		line-height: 1.5;
	}
	/* .06em and .16em of a 28px heading */
	[data-custom-investor-band] [data-custom-investor-title] em::after {
		bottom: 2px;
		height: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-custom-investor-band] [data-custom-investor-go] {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* A list that folds — investor.css:762-789                            */
/* ------------------------------------------------------------------ */

/* Chrome moves the page when what is above the screen changes height; the
   script settles where the head stands, so the two are kept from fighting. */
[data-custom-investor-band] [data-custom-investor-fold] {
	overflow-anchor: none;
}

/* Opened on its row rather than a height: the travel is the panel's own depth. */
[data-custom-investor-band] [data-custom-investor-fold-panel] {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 400ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 400ms;
}

[data-custom-investor-band] [data-custom-investor-fold-item].is-open > [data-custom-investor-fold-panel] {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 400ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

/* The row that collapses needs both, or the grid refuses to go under. */
[data-custom-investor-band] [data-custom-investor-fold-panel] > * {
	min-height: 0;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	[data-custom-investor-band] [data-custom-investor-fold-panel],
	[data-custom-investor-band] [data-custom-investor-fold-item].is-open > [data-custom-investor-fold-panel] {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* A page of a list                                                    */
/* ------------------------------------------------------------------ */

/*
 * Numbers, a step either way and a field that names a page. Its controls take
 * a shape of their own; the discs and their colours are the design's pager —
 * investor.css:1101-1136.
 */
[data-custom-investor-band] {
	--custom-pager-ink: #16418C;
	--custom-pager-on-ink: #FFFFFF;
	--custom-pager-lit: #50A3D5;
	--custom-pager-dim-ink: #CBD5E1;
	--custom-pager-edge: #EEF2F7;
}

[data-custom-investor-band] [data-custom-investor-pager] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

[data-custom-investor-band] [data-custom-investor-pager][hidden] {
	display: none;
}

[data-custom-investor-band] [data-custom-investor-pager-numbers] {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* A step, and a number: one disc. */
[data-custom-investor-band] [data-custom-investor-pager] button {
	--custom-press-ink: var(--custom-pager-ink);
	--custom-press-ground: transparent;
	--custom-press-edge: transparent;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border-width: 2px;                     /* investor.css:1109 measures 1px */
	border-style: solid;
	border-radius: 50%;
	font: inherit;
	cursor: pointer;
	transition: background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The steps, and the page being read, are filled. */
[data-custom-investor-band] [data-custom-investor-pager] button[data-custom-investor-pager-step],
[data-custom-investor-band] [data-custom-investor-pager] button[aria-current="page"] {
	--custom-press-ink: var(--custom-pager-on-ink);
	--custom-press-ground: var(--custom-pager-ink);
	--custom-press-edge: var(--custom-pager-ink);
}

[data-custom-investor-band] [data-custom-investor-pager] button[aria-current="page"] {
	cursor: default;
}

[data-custom-investor-band] [data-custom-investor-pager] button svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

[data-custom-investor-band] [data-custom-investor-pager] button:focus-visible {
	outline: 4px solid #50A3D5;            /* investor.css:1123 measures 3px */
	outline-offset: 2px;
}

@media (hover: hover) {
	[data-custom-investor-band] [data-custom-investor-pager] button:hover:not(:disabled):not([aria-current="page"]) {
		--custom-press-ink: var(--custom-pager-on-ink);
		--custom-press-ground: var(--custom-pager-lit);
		--custom-press-edge: var(--custom-pager-lit);
	}
}

/* The end of the run: the disc keeps its place, emptied rather than removed. */
[data-custom-investor-band] [data-custom-investor-pager] button:disabled {
	--custom-press-ink: var(--custom-pager-dim-ink);
	--custom-press-ground: #FFFFFF;
	--custom-press-edge: var(--custom-pager-edge);
	cursor: default;
}

[data-custom-investor-band] [data-custom-investor-pager-break] {
	color: var(--custom-pager-ink);
}

[data-custom-investor-band] [data-custom-investor-pager-field] {
	--custom-field-ink: var(--custom-pager-ink);
	box-sizing: border-box;
	width: 86px;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 2px solid var(--custom-pager-edge);
	border-radius: 1000px;
	background-color: #FFFFFF;
	color: var(--custom-pager-ink);
	font: inherit;
	text-align: center;
	box-shadow: none;
}

[data-custom-investor-band] [data-custom-investor-pager-field]:focus {
	border-color: var(--custom-pager-ink);
	outline: 0;
	box-shadow: none;
}

@media (max-width: 767px) {
	/* a step, four numbers, a break and the field stand on one line of a 390px phone */
	[data-custom-investor-band] [data-custom-investor-pager],
	[data-custom-investor-band] [data-custom-investor-pager-numbers] {
		gap: 4px;
	}
	[data-custom-investor-band] [data-custom-investor-pager] button {
		width: 36px;
		height: 36px;
	}
	[data-custom-investor-band] [data-custom-investor-pager] button svg {
		width: 18px;
		height: 18px;
	}
	[data-custom-investor-band] [data-custom-investor-pager-field] {
		width: 60px;
		height: 36px;
		padding: 0 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-custom-investor-band] [data-custom-investor-pager] button {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* A nested section's slot — includes/trait-nested-parent.php          */
/* ------------------------------------------------------------------ */

/*
 * The container an item stands in is a plain box here: no padding, no gap,
 * no flex or width of its own, so the widget in it lies where the rows lay
 * before, and their margins meet the section's as they did.
 */
[data-custom-investor-band] [data-custom-slot] > .e-con.e-con,
[data-custom-investor-band] [data-custom-slot] > .e-con.e-con > .e-con-inner {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	gap: 0;
}