/*
 * Capital Pulse Content — front-end styles.
 *
 * Deliberately small. The purchased template supplies the cards, buttons,
 * alerts, forms, spacing and every colour. What is left here is only the
 * handful of pieces the template has no equivalent for: the FAQ accordion,
 * the ticker bar, the WhatsApp bubble, and reading measure on pages that
 * run to a thousand words.
 *
 * No colour is fixed. Every value below either comes from a template
 * variable or is a fallback used only when that variable is missing.
 */

/* ------------------------------------------------------------------
   1. Reading measure

   Long prose inside a full-width card runs to 140 characters a line,
   which is hard to read. This caps it without changing the card.
   ------------------------------------------------------------------ */

.cpc-article > p,
.cpc-article > ul,
.cpc-article > ol,
.cpc-article > .cpc-lead {
	max-width: 72ch;
}

.cpc-article p {
	line-height: 1.75;
}

.cpc-article h2,
.cpc-article .cpc-h2 {
	margin: 2rem 0 .75rem;
	scroll-margin-top: 1.5rem;
}

.cpc-article h2:first-child,
.cpc-article .cpc-h2:first-child {
	margin-top: 0;
}

.cpc-article > .cpc-lead {
	color: var(--bs-secondary);
}

/* Run-in bold at the start of a paragraph, used through the policies */
.cpc-article p > strong:first-child {
	color: var(--bs-body-color);
}

/* ------------------------------------------------------------------
   2. Contents list

   Lives in a normal theme card; only the sticky behaviour and the
   current-item marker are added.
   ------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.cpc-toc-wrap {
		position: sticky;
		top: 5.5rem;
	}
}

.cpc-toc-card .nav-link {
	padding: .3rem 0 .3rem .75rem;
	border-left: 2px solid transparent;
	font-size: .84rem;
	line-height: 1.45;
	color: var(--bs-secondary);
}

.cpc-toc-card .nav-link:hover {
	color: var(--adminuiux-theme-1);
}

.cpc-toc-card .nav-link.is-current {
	color: var(--adminuiux-theme-1);
	border-left-color: var(--adminuiux-theme-1);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   3. Numbered steps
   ------------------------------------------------------------------ */

.cpc-step-row {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--bs-border-color);
}

.cpc-step-row:last-child {
	border-bottom: 0;
}

.cpc-step-badge {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .85rem;
	background: rgba(var(--adminuiux-theme-1-rgb), .12);
	color: var(--adminuiux-theme-1);
}

.cpc-step-row p {
	max-width: 64ch;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   4. Tick list
   ------------------------------------------------------------------ */

.cpc-checklist {
	list-style: none;
	padding: 0;
	max-width: 72ch;
}

.cpc-checklist li {
	position: relative;
	padding: .3rem 0 .3rem 1.6rem;
	line-height: 1.7;
}

.cpc-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: .3rem;
	color: var(--adminuiux-theme-1);
	font-weight: 700;
}

/* ------------------------------------------------------------------
   5. Grids of theme cards
   ------------------------------------------------------------------ */

.cpc-grid {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 2rem;
}

.cpc-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cpc-grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

a.cpc-card-link {
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease;
}

a.cpc-card-link:hover {
	border-color: var(--adminuiux-theme-1);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------
   6. FAQ accordion
   ------------------------------------------------------------------ */

.cpc-faq-group {
	margin: 1.75rem 0 .75rem;
	font-size: 1rem;
	font-weight: 600;
}

details.cpc-faq {
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius, .5rem);
	padding: .8rem 1rem;
	margin-bottom: .5rem;
}

details.cpc-faq summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 1.75rem;
}

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

details.cpc-faq summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--adminuiux-theme-1);
}

details.cpc-faq[open] summary::after {
	content: "\2212";
}

details.cpc-faq[open] {
	border-color: var(--adminuiux-theme-1);
}

.cpc-faq-answer {
	padding-top: .6rem;
	color: var(--bs-secondary);
}

/* ------------------------------------------------------------------
   7. Contact block
   ------------------------------------------------------------------ */

.cpc-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
}

.cpc-contact-list li {
	display: flex;
	gap: 1rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--bs-border-color);
}

.cpc-contact-label {
	flex: 0 0 90px;
	color: var(--bs-secondary);
	font-size: .85rem;
}

.cpc-socials {
	display: flex;
	gap: .5rem;
}

.cpc-socials a {
	width: 36px;
	height: 36px;
	border: 1px solid var(--bs-border-color);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}

.cpc-socials a:hover {
	border-color: var(--adminuiux-theme-1);
	color: var(--adminuiux-theme-1);
}

.cpc-map iframe {
	width: 100%;
	border: 0;
	border-radius: var(--bs-border-radius, .5rem);
	min-height: 240px;
}

/* Honeypot: reachable by a bot, invisible to a person */
.cpc-hp {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   8. Events
   ------------------------------------------------------------------ */

.cpc-event {
	display: flex;
	flex-direction: column;
}

.cpc-event-image {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: var(--bs-border-radius, .5rem);
	margin-bottom: .8rem;
}

.cpc-event-when {
	color: var(--adminuiux-theme-1);
	font-weight: 600;
	font-size: .82rem;
	margin: 0 0 .2rem;
}

.cpc-event-where {
	color: var(--bs-secondary);
	font-size: .82rem;
	margin: 0 0 .5rem;
}

.cpc-event .btn {
	margin-top: auto;
	align-self: flex-start;
}

/* ------------------------------------------------------------------
   9. Ticker

   Colour is the active theme; the bar has no palette of its own.
   ------------------------------------------------------------------ */

.cpc-ticker {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: var(--adminuiux-theme-1);
	color: var(--adminuiux-theme-1-text, #fff);
	padding: .45rem .75rem;
	font-size: .85rem;
	position: relative;
	z-index: 1040;
}

.cpc-ticker-label {
	flex: 0 0 auto;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .72rem;
	background: rgba(0, 0, 0, .18);
	padding: .2rem .6rem;
	border-radius: 999px;
}

.cpc-ticker-viewport {
	flex: 1 1 auto;
	overflow: hidden;
}

.cpc-ticker-track {
	display: inline-flex;
	gap: 2.5rem;
	white-space: nowrap;
	animation-name: cpc-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

.cpc-ticker:hover .cpc-ticker-track,
.cpc-ticker-track:focus-within {
	animation-play-state: paused;
}

.cpc-ticker-item a {
	color: inherit;
	text-decoration: underline;
}

.cpc-ticker-item::before { content: "\2022"; margin-right: .6rem; opacity: .6; }
.cpc-tone-warning::before { content: "\26A0"; }
.cpc-tone-success::before { content: "\2713"; }
.cpc-tone-promo::before { content: "\2605"; }

@keyframes cpc-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cpc-ticker-track { animation: none; }
	.cpc-ticker-viewport { overflow-x: auto; }
}

/* ------------------------------------------------------------------
   10. WhatsApp bubble

   Brand green is fixed here on purpose — it is WhatsApp's own colour,
   not part of the site palette.
   ------------------------------------------------------------------ */

.cpc-whatsapp-float {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
	z-index: 1035;
	text-decoration: none;
}

.cpc-whatsapp-float:hover {
	color: #fff;
	transform: scale(1.05);
}

@media (max-width: 991.98px) {
	.cpc-whatsapp-float { bottom: 5.5rem; }
}

/* ------------------------------------------------------------------
   11. Mobile
   ------------------------------------------------------------------ */

@media (max-width: 575.98px) {
	.cpc-ticker-label { display: none; }

	.cpc-contact-list li {
		flex-direction: column;
		gap: .1rem;
	}

	.cpc-contact-label { flex: none; }

	.cpc-article h2,
	.cpc-article .cpc-h2 { margin-top: 1.6rem; }

	.cpc-step-row { gap: .75rem; }
}

/* ------------------------------------------------------------------
   12. Public pages using the dashboard shell

   The header is the member-area one, which is fixed. These pages have no
   sidebar, so the content needs the header's height rather than the
   sidebar offset the member pages use.
   ------------------------------------------------------------------ */

.cpc-public .adminuiux-content {
	padding-left: 0;
	padding-bottom: 2rem;
}

.cpc-public .adminuiux-footer {
	margin-left: 0;
}

/* The hero card carries white text on the theme colour */
.cpc-public .bg-theme-1 .breadcrumb-item.active,
.cpc-public .bg-theme-1 .breadcrumb-item a {
	color: rgba(255, 255, 255, .85);
}

.cpc-public .bg-theme-1 .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, .5);
}

.cpc-public .bg-theme-1 h2,
.cpc-public .bg-theme-1 h5 {
	color: #fff;
}

/* ------------------------------------------------------------------
   13. Content blocks

   Cards, comparisons, timelines and stat rows used inside the page
   copy. All of it sits on template classes; only spacing, the timeline
   spine and the list markers are added. No colour is fixed.
   ------------------------------------------------------------------ */

.cpc-blocks {
	margin: 1.5rem 0 .5rem;
}

/* Tick and cross lists inside the comparison cards */
.cpc-tick-list,
.cpc-cross-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cpc-tick-list li,
.cpc-cross-list li {
	position: relative;
	padding: .3rem 0 .3rem 1.5rem;
	font-size: .86rem;
	line-height: 1.6;
}

.cpc-tick-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: .3rem;
	color: var(--bs-success);
	font-weight: 700;
}

.cpc-cross-list li::before {
	content: "\2715";
	position: absolute;
	left: 0;
	top: .3rem;
	color: var(--bs-danger);
	font-weight: 700;
}

/* Timeline with a connecting spine */
.cpc-timeline {
	position: relative;
	margin: 1.5rem 0 2rem;
	padding-left: .25rem;
}

.cpc-tl-item {
	position: relative;
	padding: 0 0 1.35rem 2.75rem;
}

.cpc-tl-item:last-child {
	padding-bottom: 0;
}

/* The line runs between dots, stopping at the last one */
.cpc-tl-item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 30px;
	bottom: 0;
	width: 2px;
	background: var(--bs-border-color);
}

.cpc-tl-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	background: var(--adminuiux-theme-1);
	color: var(--adminuiux-theme-1-text, #fff);
}

.cpc-tl-body p {
	font-size: .88rem;
	color: var(--bs-secondary);
	max-width: 62ch;
}

/* Stat row */
.cpc-stat-card {
	margin-top: 1.5rem;
}

.cpc-stat-card h4 {
	font-size: 1.15rem;
	font-weight: 600;
}

/* Highlighted point */
.cpc-callout {
	margin-top: 1.5rem;
}

.cpc-callout p {
	color: var(--bs-body-color);
	max-width: none;
}

@media (max-width: 575.98px) {
	.cpc-tl-item {
		padding-left: 2.4rem;
	}

	.cpc-stat-card h4 {
		font-size: 1rem;
	}
}

/* ------------------------------------------------------------------
   14. Ticker placement

   The bar sits directly below the header and stays there while the page
   scrolls. Where the template's navbar is fixed, the bar is fixed too and
   a script offsets the content by its height; where the navbar scrolls
   with the page, plain sticky is enough.

   It cannot be dismissed — no close control is rendered.
   ------------------------------------------------------------------ */

.cpc-ticker-stuck {
	position: sticky;
	top: 0;
	z-index: 1035;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Under a fixed navbar the bar has to be fixed as well, or it would sit
   behind it. The offset is measured at runtime. */
.cpc-fixed-nav .cpc-ticker-stuck {
	position: fixed;
	top: var(--cpc-nav-h, 0px);
	left: 0;
	right: 0;
}

/* Room for the bar, added on top of whatever the theme already reserved */
.cpc-fixed-nav .adminuiux-content,
.cpc-fixed-nav .adminuiux-sidebar {
	margin-top: var(--cpc-ticker-h, 0px);
}

/* Last resort on themes that gave us nowhere to put it */
.cpc-ticker-pinned {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1045;
}

.cpc-ticker-pinned ~ * {
	position: relative;
}

@media (max-width: 767.98px) {
	.cpc-ticker {
		font-size: .8rem;
		padding-top: .35rem;
		padding-bottom: .35rem;
	}
}

/* ------------------------------------------------------------------
   15. Responsive pass

   Sizes and wrapping only.
   ------------------------------------------------------------------ */

/* Contact details and social links wrap rather than overflow */
.cpc-contact-list li,
.cpc-contact-list a {
	word-break: break-word;
	overflow-wrap: anywhere;
	min-width: 0;
}

.cpc-socials { flex-wrap: wrap; }

/* The grids already collapse through auto-fit; this stops a very narrow
   phone from leaving a card wider than the screen */
@media (max-width: 400px) {
	.cpc-grid-2,
	.cpc-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* Long policy pages: comfortable measure on every width */
.cpc-article > p,
.cpc-article > ul,
.cpc-article > ol,
.cpc-article > .cpc-lead {
	max-width: min(72ch, 100%);
}

/* Timeline and tick lists on small screens */
@media (max-width: 480px) {
	.cpc-tl-item { padding-left: 2.3rem; }
	.cpc-tl-dot { width: 26px; height: 26px; font-size: .75rem; }
	.cpc-tl-item:not(:last-child)::before { left: 12px; top: 26px; }
}

/* Ticker on a phone: shorter, and the label is already hidden */
@media (max-width: 480px) {
	.cpc-ticker { padding-left: .6rem; padding-right: .6rem; }
	.cpc-ticker-track { gap: 1.6rem; }
}

/* Nothing scrolls sideways */
.cpc-wrap,
.cpc-article {
	max-width: 100%;
}

/* ------------------------------------------------------------------
   16. News, events and announcements
   ------------------------------------------------------------------ */

.cpc-event-hero-img {
	width: 100%;
	height: 100%;
	max-height: 240px;
	object-fit: cover;
	border-radius: .75rem;
}

.cpc-event .cpc-event-image {
	width: 100%;
	height: 170px;
	object-fit: cover;
	border-radius: .75rem .75rem 0 0;
}

.cpc-event {
	transition: transform .15s ease;
}

.cpc-event:hover {
	transform: translateY(-2px);
}

/* The hero is a coloured panel, so its badge needs a light chip */
.cpc-event-hero .badge {
	background: rgba(255, 255, 255, .18);
}

@media (max-width: 575.98px) {
	.cpc-event .cpc-event-image { height: 150px; }
	.cpc-event-hero-img { max-height: 180px; }
}

/* Dashboard block: long titles must not push the button off screen */
.cp-announcement .min-width-0 { min-width: 0; }

/* ------------------------------------------------------------------
   17. The news / event / winner card

   One card, three behaviours. The kind changes what leads, not the
   whole shape, so a page of mixed items still reads as one set.
   ------------------------------------------------------------------ */

.cpc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--adminuiux-card-bg, #fff);
	border: 1px solid var(--adminuiux-border, #e3e0f5);
	border-radius: 14px;
	transition: transform .15s ease, box-shadow .15s ease;
}

.cpc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(20, 16, 52, .10);
}

.cpc-card-media img {
	width: 100%;
	height: 168px;
	object-fit: cover;
	display: block;
}

.cpc-card-body {
	flex: 1;
	padding: 1.1rem 1.15rem;
}

.cpc-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .7rem;
}

.cpc-tag {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .22rem .6rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .01em;
	white-space: nowrap;
}

.cpc-tag-theme-1 { background: rgba(58, 31, 214, .10); color: #3a1fd6; }
.cpc-tag-info    { background: rgba(0, 80, 240, .10);  color: #0050f0; }
.cpc-tag-warning { background: rgba(154, 92, 0, .12); color: #9a5c00; }
.cpc-tag-success { background: rgba(10, 122, 67, .12); color: #0a7a43; }

.cpc-card-when {
	font-size: .78rem;
	color: var(--adminuiux-text-secondary, #6f6a8c);
	white-space: nowrap;
}

.cpc-card-title {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
}

.cpc-card-text,
.cpc-card-where {
	margin: 0;
	font-size: .875rem;
	color: var(--adminuiux-text-secondary, #6f6a8c);
}

.cpc-card-where { margin-top: .55rem; }

/* The winner block. Given its own panel because the name and the
   amount are the whole point of the card, and body text does not
   carry that. */
.cpc-winner {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: .2rem 0 .75rem;
	padding: .7rem .8rem;
	border-radius: 11px;
	background: linear-gradient(135deg, rgba(154, 92, 0, .10), rgba(154, 92, 0, .04));
	border: 1px solid rgba(154, 92, 0, .18);
}

.cpc-winner-medal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #9a5c00;
	color: #fff;
	font-size: 1rem;
}

.cpc-winner-who { min-width: 0; }

.cpc-winner-name {
	margin: 0;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.cpc-winner-prize {
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	color: #9a5c00;
}

/* A figure on a non-winner card — an offer, say */
.cpc-card-amount {
	margin: 0 0 .6rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: #3a1fd6;
}

.cpc-card-foot {
	padding: .85rem 1.15rem;
	border-top: 1px solid var(--adminuiux-border, #e3e0f5);
}

.cpc-card-cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	color: #3a1fd6;
}

.cpc-card-cta:hover { gap: .6rem; }

/* Dark: the card's own surface, and the gold lifted so it still reads */
[data-bs-theme="dark"] .cpc-card {
	background: #140c33;
	border-color: #2a2057;
}

[data-bs-theme="dark"] .cpc-card-title { color: #ece9ff; }

[data-bs-theme="dark"] .cpc-tag-theme-1 { background: rgba(140, 122, 255, .16); color: #8c7aff; }
[data-bs-theme="dark"] .cpc-tag-info    { background: rgba(90, 140, 255, .16);  color: #7da2ff; }
[data-bs-theme="dark"] .cpc-tag-warning { background: rgba(255, 193, 77, .16);  color: #ffc14d; }
[data-bs-theme="dark"] .cpc-tag-success { background: rgba(61, 220, 132, .16);  color: #3ddc84; }

[data-bs-theme="dark"] .cpc-winner {
	background: linear-gradient(135deg, rgba(255, 193, 77, .14), rgba(255, 193, 77, .05));
	border-color: rgba(255, 193, 77, .24);
}

[data-bs-theme="dark"] .cpc-winner-medal { background: #ffc14d; color: #2a1c00; }
[data-bs-theme="dark"] .cpc-winner-prize { color: #ffc14d; }
[data-bs-theme="dark"] .cpc-card-amount,
[data-bs-theme="dark"] .cpc-card-cta { color: #8c7aff; }

@media (max-width: 575.98px) {
	.cpc-card-media img { height: 150px; }
}

/* The whole card is a link. The overlay sits above the card and below
   anything interactive inside it, so the CTA still wins its own clicks. */
.cpc-card { position: relative; }

.cpc-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.cpc-card-link:focus-visible {
	outline: 2px solid #3a1fd6;
	outline-offset: 2px;
}

.cpc-card-foot,
.cpc-card-cta {
	position: relative;
	z-index: 2;
}

.cpc-card-reqs {
	list-style: none;
	margin: .7rem 0 0;
	padding: 0;
	font-size: .84rem;
	color: var(--adminuiux-text-secondary, #6f6a8c);
}

.cpc-card-reqs li {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	padding: .12rem 0;
}

.cpc-card-reqs i {
	flex: 0 0 auto;
	margin-top: .18rem;
	color: #0a7a43;
}

[data-bs-theme="dark"] .cpc-card-reqs i { color: #3ddc84; }
[data-bs-theme="dark"] .cpc-card-link:focus-visible { outline-color: #8c7aff; }

/* ------------------------------------------------------------------
   18. Text that was getting cut off

   Nearly every case came from the same two causes.

   One: a flex child defaults to min-width:auto, so it refuses to
   shrink below its content and pushes its neighbour out of the box.
   Inside a card with overflow:hidden, the neighbour simply vanishes.

   Two: long unbroken strings — wallet addresses, IBANs, emails — have
   no break opportunity, so they overflow rather than wrap.
   ------------------------------------------------------------------ */

.cpc-card-top,
.cpc-winner,
.cpc-card-reqs li,
.cpc-socials,
.cpc-contact-row,
.cpc-step {
	min-width: 0;
}

.cpc-card-top > *,
.cpc-winner > *,
.cpc-card-reqs li > *,
.cpc-step > * {
	min-width: 0;
}

/* The date may wrap rather than shove the badge out of the card */
.cpc-card-when {
	white-space: normal;
	text-align: right;
}

/* Titles and body text break anywhere rather than overflow */
.cpc-card-title,
.cpc-card-text,
.cpc-card-reqs li,
.cpc-winner-name,
.cpc-winner-prize,
.cpc-card-amount {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* The tag itself stays on one line, but is allowed to shrink and
   ellipsis rather than force the row wider than the card */
.cpc-tag {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Anything wide scrolls inside itself instead of being clipped */
.cpc-wrap table,
.cpc-policy table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Addresses, IBANs and emails in body copy */
.cpc-wrap code,
.cpc-wrap .cpc-mono,
.cpc-contact-value,
.cpc-socials a span {
	overflow-wrap: anywhere;
}

/* Long headings on a narrow screen */
@media (max-width: 575.98px) {
	.cpc-wrap h1,
	.cpc-wrap h2,
	.cpc-wrap h3 {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* Stacked rather than squeezed to nothing */
	.cpc-card-top {
		flex-wrap: wrap;
		gap: .35rem;
	}

	.cpc-card-when { text-align: left; }
}

/* ------------------------------------------------------------------
   19. Company page hero

   Literal colours, not variables. The previous hero depended on
   --adminuiux-theme-1 for its background and used white text on top;
   wherever that variable failed to resolve the card painted white and
   the text vanished with it, leaving a tall empty block on every
   company page.

   Nothing here can fail that way: the gradient is written out, and the
   text colour is set on the same rule that sets the background.
   ------------------------------------------------------------------ */

.cpc-hero {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);
	color: #fff;
}

.cpc-hero-body {
	position: relative;
	padding: 1.75rem 1.5rem;
}

/* A quiet wash, drawn in CSS rather than loaded as a photo */
.cpc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 90% at 88% 10%, rgba(255, 255, 255, .16), transparent 70%),
		radial-gradient(50% 80% at 10% 100%, rgba(0, 0, 0, .16), transparent 70%);
	pointer-events: none;
}

.cpc-hero h1,
.cpc-hero h2,
.cpc-hero p,
.cpc-hero a,
.cpc-hero .breadcrumb-item,
.cpc-hero .breadcrumb-item a,
.cpc-hero .breadcrumb-item.active {
	color: #fff;
}

.cpc-hero a { text-decoration: underline; }

.cpc-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .6); }

.cpc-hero h1 {
	margin: 0;
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.cpc-hero p { margin: .5rem 0 0; opacity: .85; }

/* Any image the template drops inside a cover box stays inside it.
   Without this the raw <img> renders at its natural size and pushes
   the block far taller than its text. */
.coverimg img,
.cpc-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 575.98px) {
	.cpc-hero-body { padding: 1.25rem 1.1rem; }
}

/* ------------------------------------------------------------------
   20. Palette fallback

   Every bg-theme-1 / text-theme-1 element on these pages reads its
   colour from a CSS variable that an inline <style> block defines. If
   that block is missing, cached empty, or arrives after the paint, the
   variables resolve to nothing: coloured panels render white, and the
   white text written for them disappears.

   These declarations sit on :root, so the real palette — written as
   ":root body.theme-capital" — is more specific and still wins. They
   only take effect when nothing else has answered, which is exactly
   when the page would otherwise go blank.
   ------------------------------------------------------------------ */

:root {
	--adminuiux-theme-1: #3a1fd6;
	--adminuiux-theme-1-rgb: 58, 31, 214;
	--adminuiux-theme-1-text: #ffffff;
	--adminuiux-theme-1-hover: #3319bd;
	--adminuiux-theme-1-active: #2b14a3;
	--adminuiux-theme-1-subtle: #eeebfd;
	--adminuiux-theme-2: #7d2ae8;
	--adminuiux-theme-2-rgb: 125, 42, 232;
	--adminuiux-theme-2-text: #ffffff;
	--adminuiux-border: #e3e0f5;
	--adminuiux-text: #141034;
}

/* A panel that says it is coloured must never paint white, because the
   text on it is white by design. */
.bg-theme-1 {
	background-color: var(--adminuiux-theme-1, #3a1fd6) !important;
	color: var(--adminuiux-theme-1-text, #fff);
}

.bg-theme-1-subtle {
	background-color: var(--adminuiux-theme-1-subtle, #eeebfd) !important;
}

.text-theme-1 { color: var(--adminuiux-theme-1, #3a1fd6) !important; }

.bg-theme-1 .text-white,
.bg-theme-1 h1, .bg-theme-1 h2, .bg-theme-1 h3,
.bg-theme-1 h4, .bg-theme-1 h5, .bg-theme-1 h6,
.bg-theme-1 p, .bg-theme-1 a {
	color: #fff;
}

/* Subtle panels carry dark text, so they must not inherit the white */
.bg-theme-1-subtle,
.bg-theme-1-subtle p,
.bg-theme-1-subtle h5,
.bg-theme-1-subtle h6 {
	color: var(--adminuiux-text, #141034);
}

/* ------------------------------------------------------------------
   21. Company pages: the ticker sits in the flow

   On these pages the bar was pinned with position:fixed and the space
   for it was reserved by a margin whose size JavaScript measured at
   runtime. Two numbers read from the live layout, applied back to that
   same layout — when either was measured at the wrong moment the page
   was left with a tall blank band, and because the bar was fixed the
   content scrolled underneath it and was cut off.

   None of that is needed here: these pages have one header and one
   bar, in order, down the page. Letting them stack normally removes
   the measurement and everything that depended on it.
   ------------------------------------------------------------------ */

body.cpc-public .cpc-ticker-stuck,
body.cpc-public.cpc-fixed-nav .cpc-ticker-stuck,
body.cpc-public .cpc-ticker-pinned {
	position: static;
	top: auto;
	left: auto;
	right: auto;
}

/* and nothing reserves room for a bar that is no longer floating */
body.cpc-public.cpc-fixed-nav .adminuiux-content,
body.cpc-public.cpc-fixed-nav .adminuiux-sidebar {
	margin-top: 0;
}

/* The navbar above it is fixed by the template, so the content still
   needs to clear it — a fixed number, not a measured one. */
body.cpc-public .adminuiux-content {
	padding-top: 0;
}

/* No clearance: the header on these pages is in the flow now, so the
   bar simply follows it. The 66px here was for a fixed navbar and
   would otherwise leave a gap under the header. */
body.cpc-public .cpc-ticker {
	margin-top: 0;
}

/* Nothing on these pages may clip what scrolls past it */
body.cpc-public .adminuiux-wrap,
body.cpc-public .adminuiux-content {
	overflow: visible;
}