/*
 * Front-end styles for unlisted share detail pages and the listing grid.
 *
 * Colours come from the Elementor global kit where available, so the pages
 * follow the site palette automatically if the kit is ever re-themed.
 */

.vss-share,
.vss-cards {
	--vss-header-offset: 135px;
	--vss-primary: var(--e-global-color-primary, #6728ff);
	--vss-heading: var(--e-global-color-secondary, #002a41);
	/* The page banners on this site use the kit's custom heading colour #001F4F. */
	--vss-banner-heading: #001f4f;
	--vss-text: var(--e-global-color-text, #6f6c90);
	--vss-accent: var(--e-global-color-accent, #e37405);
	--vss-surface: #ffffff;
	--vss-muted: #f4f5fc;
	--vss-line: #e4e7f2;
	--vss-radius: 14px;
	color: var(--vss-text);
}

/* ---------------------------------------------------------------- banner */

/*
 * Mirrors the page banner every other page on the site builds in Elementor:
 * background photo, shape overlay, title and breadcrumb on the left, artwork on
 * the right. The measurements match the Unlisted Shares banner — 1520px inner
 * width, 60px row padding, 48px/56px Barlow title.
 *
 * The theme header is absolutely positioned over the page, so the banner
 * reserves that space in its own top padding, exactly as the Elementor banners
 * do. vs-shares.js measures the real header height at runtime; the values here
 * are the no-JS fallbacks.
 */
.vss-banner {
	background-color: var(--vss-muted);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.vss-banner__shape {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.vss-banner__inner {
	max-width: 1520px;
	margin: 0 auto;
	padding: calc(var(--vss-header-offset, 135px) + 22px) 20px 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	box-sizing: border-box;
}

.vss-banner__text {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Scoped with .vss-share as well as the block class so it outranks the
 * Elementor kit's own ".elementor-kit-13275 h1" rule, which would otherwise
 * push this to 72px in a colour the other page banners do not use.
 */
.vss-share .vss-banner__title {
	font-family: Barlow, var(--e-global-typography-primary-font-family), sans-serif;
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1.17;
	font-weight: 700;
	color: var(--vss-banner-heading);
	margin: 0 0 10px;
}

/*
 * The breadcrumb markup is the theme's own, so the site stylesheet styles it.
 *
 * Breadcrumb NavXT prints a literal ">" between crumbs and the theme then draws
 * its own icon separator with span::after. On the Elementor-built banners the
 * widget's generated CSS zeroes the container font-size, which hides the plain
 * text ">" and leaves only the icon. That CSS is per-widget and does not exist
 * here, so without this the two separators stack up and you see "» >".
 */
.vss-banner .breadcrumbs-inner {
	font-size: 0;
}

.vss-banner .breadcrumbs-inner span,
.vss-banner .breadcrumbs-inner a {
	font-size: 16px;
}

.vss-banner__media {
	position: relative;
	flex: 0 0 auto;
	width: 350px;
	height: 350px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * The ring turns slowly on the other page banners. The theme's own animation is
 * scoped to ".rs-image .spin_style", i.e. it needs the Elementor image widget's
 * wrapper and its stylesheet, neither of which is guaranteed on this template —
 * so the rotation is defined here instead. Same 30s linear turn.
 */
.vss-banner__circle {
	position: absolute;
	inset: 0;
	width: 350px;
	height: 350px;
	max-width: 100%;
	object-fit: contain;
	animation: vss-spin 30s linear infinite;
}

@keyframes vss-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.vss-banner__circle {
		animation: none;
	}
}

.vss-banner__art {
	position: relative;
	width: 356px;
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- summary */

.vss-summary {
	padding: 40px 0 8px;
}

.vss-summary__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

/* ---------------------------------------------------------------- price bar */

/*
 * Full width rather than a side card. The summary above is only a few lines
 * tall, so a tall card beside it left most of that row empty.
 */
.vss-pricebar {
	background: var(--vss-surface);
	border: 1px solid var(--vss-line);
	border-radius: var(--vss-radius);
	box-shadow: 0 10px 30px rgba(0, 42, 65, 0.07);
	padding: 22px 26px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.vss-pricebar__price {
	flex: 0 0 auto;
	min-width: 190px;
	padding-right: 28px;
	border-right: 1px solid var(--vss-line);
}

.vss-pricebar__price .vss-pricecard__meta {
	margin-bottom: 0;
}

.vss-pricebar__stats {
	flex: 1 1 auto;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.vss-pricebar__stat dt {
	margin: 0 0 2px;
	font-size: 12.5px;
	color: var(--vss-text);
}

.vss-pricebar__stat dd {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--vss-heading);
	white-space: nowrap;
}

.vss-pricebar__cta {
	flex: 0 0 auto;
}

.vss-summary__title {
	font-size: clamp(22px, 2.4vw, 30px);
	margin: 0 0 12px;
}

.vss-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.vss-share h1,
.vss-share h2,
.vss-share h3 {
	color: var(--vss-heading);
	margin: 0 0 12px;
	line-height: 1.25;
}

/* ------------------------------------------------------------- breadcrumb */

.vss-breadcrumb {
	border-bottom: 1px solid var(--vss-line);
	padding: 14px 0;
	font-size: 14px;
}

.vss-breadcrumb a {
	color: var(--vss-text);
	text-decoration: none;
}

.vss-breadcrumb a:hover {
	color: var(--vss-primary);
	text-decoration: underline;
}

.vss-breadcrumb span[aria-hidden] {
	margin: 0 8px;
	opacity: 0.5;
}

.vss-breadcrumb [aria-current] {
	color: var(--vss-heading);
	font-weight: 600;
}

.vss-hero__logo {
	width: 124px;
	height: 124px;
	background: #fff;
	border: 1px solid var(--vss-line);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin-bottom: 16px;
	box-sizing: border-box;
}

.vss-hero__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.vss-hero__title {
	font-size: clamp(26px, 3.4vw, 40px);
	margin-bottom: 14px;
}

.vss-hero__lede {
	font-size: 17px;
	line-height: 1.6;
	margin: 14px 0 0;
}

.vss-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vss-chip {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--vss-line);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vss-heading);
}

/* -------------------------------------------------------------- price card */

.vss-pricecard {
	background: var(--vss-surface);
	border: 1px solid var(--vss-line);
	border-radius: var(--vss-radius);
	padding: 24px;
	box-shadow: 0 10px 30px rgba(0, 42, 65, 0.07);
}

.vss-pricecard__label {
	margin: 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--vss-text);
}

.vss-pricecard__value {
	margin: 6px 0 2px;
	font-size: 36px;
	font-weight: 700;
	color: var(--vss-heading);
	line-height: 1.1;
}

.vss-pricecard__meta {
	margin: 0 0 16px;
	font-size: 13px;
}

.vss-pricecard__rows {
	margin: 16px 0 20px;
	border-top: 1px solid var(--vss-line);
}

.vss-pricecard__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--vss-line);
	font-size: 14px;
}

.vss-pricecard__row dt {
	margin: 0;
	color: var(--vss-text);
}

.vss-pricecard__row dd {
	margin: 0;
	font-weight: 700;
	color: var(--vss-heading);
	text-align: right;
}

/* ---------------------------------------------------------------- buttons */

.vss-btn {
	display: inline-block;
	background: var(--vss-primary);
	color: #fff !important;
	border-radius: 8px;
	padding: 13px 22px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	text-align: center;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.vss-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	color: #fff !important;
}

.vss-btn--block {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.vss-btn--sm {
	padding: 9px 16px;
	font-size: 14px;
}

/* --------------------------------------------------------------- sections */

.vss-body {
	padding: 44px 20px 60px;
}

.vss-section {
	margin-bottom: 46px;
}

.vss-section > h2 {
	font-size: clamp(22px, 2.4vw, 30px);
	margin-bottom: 20px;
}

.vss-prose {
	font-size: 16.5px;
	line-height: 1.75;
}

.vss-prose p {
	margin: 0 0 16px;
}

.vss-note {
	font-size: 13.5px;
	margin: 12px 0 0;
	opacity: 0.85;
}

/* ---------------------------------------------------------------- metrics */

.vss-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}

.vss-metric {
	background: var(--vss-muted);
	border-radius: 12px;
	padding: 16px 18px;
}

.vss-metric__label {
	display: block;
	font-size: 13px;
	margin-bottom: 6px;
}

.vss-metric__value {
	display: block;
	font-size: 21px;
	font-weight: 700;
	color: var(--vss-heading);
}

/* ------------------------------------------------- company write-up block */

.vss-company__block {
	margin-top: 34px;
}

/* Company details as a tile row, matching the key-metrics tiles. */
.vss-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin: 26px 0 0;
}

.vss-facts-grid .vss-metric {
	margin: 0;
}

.vss-facts-grid dt,
.vss-facts-grid dd {
	margin: 0;
}

.vss-metric__value--text {
	font-size: 17px;
	word-break: break-word;
}

.vss-metric__value--text a {
	color: var(--vss-primary);
	text-decoration: none;
}

/* ------------------------------------------------------------------ facts */

.vss-facts {
	margin: 0;
	border-top: 1px solid var(--vss-line);
}

.vss-facts__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--vss-line);
	font-size: 15px;
}

.vss-facts__row dt {
	margin: 0;
	font-weight: 600;
	color: var(--vss-heading);
}

.vss-facts__row dd {
	margin: 0;
	text-align: right;
}

/* ------------------------------------------------------------------ table */

.vss-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--vss-line);
	border-radius: var(--vss-radius);
}

.vss-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	min-width: 620px;
	/*
	 * The theme gives every table a bottom margin. This one sits inside a
	 * bordered wrapper, where that margin showed up as an empty strip below the
	 * last row, inside the border — as if the table had a blank final row.
	 */
	margin: 0;
}

/*
 * The theme styles every table header cell as "table th { background:#001F4F;
 * color:#fff }". This table uses a row header for the financial year, so
 * without an explicit background that cell rendered dark-on-dark and the year
 * was invisible. Reset both, then re-apply the header row's own tint below.
 */
.vss-table th,
.vss-table td {
	padding: 13px 16px;
	text-align: right;
	border-bottom: 1px solid var(--vss-line);
	background: transparent;
	color: inherit;
}

.vss-table thead th {
	background: var(--vss-muted);
	color: var(--vss-heading);
	font-weight: 700;
	white-space: nowrap;
}

.vss-table thead th:first-child,
.vss-table tbody th {
	text-align: left;
}

.vss-table tbody th {
	font-weight: 700;
	color: var(--vss-heading);
}

.vss-table tbody tr:last-child th,
.vss-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ------------------------------------------------------------------ steps */

.vss-steps {
	list-style: none;
	counter-reset: vss-step;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.vss-steps li {
	counter-increment: vss-step;
	background: var(--vss-muted);
	border-radius: 12px;
	padding: 20px;
}

.vss-steps li::before {
	content: counter(vss-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vss-primary);
	color: #fff;
	font-weight: 700;
	margin-bottom: 12px;
}

.vss-steps h3 {
	font-size: 17px;
	margin-bottom: 6px;
}

.vss-steps p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------- faqs */

.vss-faqs {
	border-top: 1px solid var(--vss-line);
}

.vss-faq {
	border-bottom: 1px solid var(--vss-line);
}

.vss-faq summary {
	cursor: pointer;
	padding: 16px 40px 16px 0;
	position: relative;
	list-style: none;
}

.vss-faq summary::-webkit-details-marker {
	display: none;
}

.vss-faq summary h3 {
	display: inline;
	font-size: 17px;
	margin: 0;
}

.vss-faq summary::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	line-height: 1;
	color: var(--vss-primary);
}

.vss-faq[open] summary::after {
	content: "\2013";
}

.vss-faq__answer {
	padding: 0 0 18px;
	font-size: 15.5px;
	line-height: 1.7;
}

.vss-faq__answer p {
	margin: 0 0 12px;
}

/* -------------------------------------------------------------------- cta */

.vss-cta {
	background: var(--vss-heading);
	border-radius: var(--vss-radius);
	padding: 36px;
	text-align: center;
	margin-bottom: 46px;
}

.vss-cta h2 {
	color: #fff;
	margin-bottom: 10px;
}

.vss-cta p {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 auto 22px;
	line-height: 1.65;
}

/* ------------------------------------------------------------------ cards */

.vss-cards {
	display: grid;
	gap: 22px;
}

.vss-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vss-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vss-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vss-card {
	background: var(--vss-surface);
	border: 1px solid var(--vss-line);
	border-radius: var(--vss-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.vss-card:hover {
	box-shadow: 0 14px 34px rgba(0, 42, 65, 0.1);
	transform: translateY(-2px);
}

.vss-card__link {
	text-decoration: none !important;
	color: inherit;
	flex: 1;
	display: block;
}

/*
 * Company logos are square (600x600), so give them a square box rather than a
 * short strip — that is what makes them read at the same size as the homepage
 * slider rather than as a small icon.
 */
.vss-card__logo {
	height: 110px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}

.vss-card__logo img {
	max-height: 110px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.vss-card__sector {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--vss-primary);
	margin-bottom: 6px;
}

.vss-card__title {
	font-size: 20px;
	margin: 0 0 8px;
	color: var(--vss-heading);
}

.vss-card__desc {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}

.vss-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--vss-line);
}

.vss-card__price-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vss-card__price strong {
	font-size: 20px;
	color: var(--vss-heading);
}

/* ------------------------------------------------------------- disclaimer */

.vss-disclaimer {
	font-size: 13px;
	line-height: 1.7;
	color: var(--vss-text);
	background: var(--vss-muted);
	border-radius: 10px;
	padding: 18px 20px;
	margin: 0;
}

/* ------------------------------------------------------------ responsive */

/*
 * Fallback clearance for the overlaying header, per breakpoint. Measured from
 * the theme's own header: 135px on desktop, ~170px from 992-1199, ~214px around
 * 768 where the nav wraps, ~115px on phones. vs-shares.js replaces these with
 * the real measurement and never writes a smaller number.
 */
@media (max-width: 1199px) {
	.vss-share { --vss-header-offset: 175px; }
}

@media (max-width: 991px) {
	.vss-share { --vss-header-offset: 215px; }
}

@media (max-width: 767px) {
	.vss-share { --vss-header-offset: 120px; }
}

@media (max-width: 1100px) {
	.vss-banner__media { width: 260px; height: 260px; }
	.vss-banner__circle { width: 260px; height: 260px; }
	.vss-banner__art { width: 265px; }
}

@media (max-width: 980px) {
	.vss-pricebar { flex-wrap: wrap; }
	.vss-pricebar__price { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--vss-line); padding-bottom: 14px; width: 100%; }
	.vss-pricebar__cta { width: 100%; }
	.vss-pricebar__cta .vss-btn { display: block; }
	.vss-banner__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 40px; }
	.vss-banner__media { align-self: center; }
	.vss-cards--cols-3,
	.vss-cards--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.vss-banner__media { display: none; }
	.vss-summary { padding: 26px 0 4px; }
	.vss-body { padding: 32px 20px 48px; }
	.vss-cards--cols-2,
	.vss-cards--cols-3,
	.vss-cards--cols-4 { grid-template-columns: 1fr; }
	.vss-cta { padding: 26px 20px; }
}