/*
Theme Name: Capital Pulse
Theme URI: https://capitalpulse.pk
Author: Capital Pulse
Description: A light, fast theme for Capital Pulse. Carries the brand colours used by the member dashboard so the public site and the app look like one thing. Works on its own; the Capital Pulse plugins add the member area and the company pages.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: capital-pulse-theme
Tags: business, finance, one-column, custom-colors, custom-logo, custom-menu, dark-mode-support, accessibility-ready
*/

/* ==================================================================
   1. The colour system

   One source of truth. Every colour below is either taken straight
   from the dashboard palette or derived from it, so a page rendered
   by the theme and a page rendered by the plugin cannot drift apart.

   Named by role rather than by hue: --brand, --surface, --ink. A
   variable called --purple would be a lie the first time the client
   rebrands.
   ================================================================== */

:root {
	/* Brand — the two logo colours and the gradient they make */
	--cp-brand:            #3a1fd6;
	--cp-brand-rgb:        58, 31, 214;
	--cp-brand-hover:      #3319bd;
	--cp-brand-active:     #2b14a3;
	--cp-brand-subtle:     #eeebfd;
	--cp-brand-2:          #7d2ae8;
	--cp-brand-2-rgb:      125, 42, 232;
	--cp-accent:           #0050f0;
	--cp-accent-2:         #b23ce0;
	--cp-gradient:         linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);

	/* Ink — text, in descending strength. Four steps is enough; more
	   and nobody can tell them apart or remember which to use. */
	--cp-ink:              #141034;
	--cp-ink-2:            #474168;
	--cp-ink-3:            #6f6a8c;
	--cp-ink-inverse:      #ffffff;

	/* Surfaces */
	--cp-bg:               #ffffff;
	--cp-bg-2:             #f7f6fd;
	--cp-bg-3:             #efedfa;
	--cp-border:           #e3e0f5;
	--cp-border-strong:    #cdc8ea;

	/* Status. Deliberately not the brand colour: money going down
	   should never be rendered in the same purple as a button. */
	--cp-up:               #0a7a43;
	--cp-up-subtle:        #e6f6ed;
	--cp-down:             #d93025;
	--cp-down-subtle:      #fdecea;
	--cp-warn:             #b26a00;
	--cp-warn-subtle:      #fdf3e2;

	/* Shape and depth */
	--cp-radius:           14px;
	--cp-radius-sm:        9px;
	--cp-shadow:           0 1px 2px rgba(20, 16, 52, .05), 0 8px 24px rgba(20, 16, 52, .06);
	--cp-shadow-lift:      0 2px 4px rgba(20, 16, 52, .06), 0 14px 38px rgba(20, 16, 52, .10);

	/* Rhythm */
	--cp-measure:          68ch;
	--cp-gutter:           clamp(1rem, 4vw, 2.5rem);
	--cp-section:          clamp(3rem, 8vw, 6rem);

	--cp-font: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cp-font-body: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Dark.
   Not the light palette inverted — that produces grey mud and glaring
   white text. The surfaces come from the dashboard's own dark values,
   the brand lifts slightly so it still reads against them, and the
   text tops out below pure white to cut the glare. */
:root[data-bs-theme="dark"],
:root[data-cp-mode="dark"] {
	--cp-brand:            #8c7aff;
	--cp-brand-rgb:        140, 122, 255;
	--cp-brand-hover:      #9e90ff;
	--cp-brand-active:     #b0a5ff;
	--cp-brand-subtle:     #1d1547;
	--cp-brand-2:          #a05cff;

	--cp-ink:              #ece9ff;
	--cp-ink-2:            #b3aed4;
	--cp-ink-3:            #8079a6;
	--cp-ink-inverse:      #0a0620;

	--cp-bg:               #0a0620;
	--cp-bg-2:             #140c33;
	--cp-bg-3:             #1d1547;
	--cp-border:           #2a2057;
	--cp-border-strong:    #3b2f73;

	--cp-up:               #3ddc84;
	--cp-up-subtle:        #10301f;
	--cp-down:             #ff6b5e;
	--cp-down-subtle:      #3a1512;
	--cp-warn:             #ffc14d;
	--cp-warn-subtle:      #3a2c0d;

	--cp-shadow:           0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--cp-shadow-lift:      0 2px 4px rgba(0, 0, 0, .45), 0 14px 38px rgba(0, 0, 0, .45);
}

/* Follow the device when nobody has chosen. Guarded so an explicit
   light choice is never overridden by the operating system. */
@media (prefers-color-scheme: dark) {
	:root:not([data-bs-theme="light"]):not([data-cp-mode="light"]) {
		--cp-brand:         #8c7aff;
		--cp-brand-rgb:     140, 122, 255;
		--cp-brand-hover:   #9e90ff;
		--cp-brand-active:  #b0a5ff;
		--cp-brand-subtle:  #1d1547;
		--cp-brand-2:       #a05cff;

		--cp-ink:           #ece9ff;
		--cp-ink-2:         #b3aed4;
		--cp-ink-3:         #8079a6;
		--cp-ink-inverse:   #0a0620;

		--cp-bg:            #0a0620;
		--cp-bg-2:          #140c33;
		--cp-bg-3:          #1d1547;
		--cp-border:        #2a2057;
		--cp-border-strong: #3b2f73;

		--cp-up:            #3ddc84;
		--cp-up-subtle:     #10301f;
		--cp-down:          #ff6b5e;
		--cp-down-subtle:   #3a1512;
		--cp-warn:          #ffc14d;
		--cp-warn-subtle:   #3a2c0d;
	}
}

/* ==================================================================
   2. Base
   ================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cp-bg);
	color: var(--cp-ink);
	font-family: var(--cp-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-family: var(--cp-font);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--cp-ink);
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.2rem; }

p, ul, ol { margin: 0 0 1.1em; }

a {
	color: var(--cp-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover { color: var(--cp-brand-hover); }

/* Visible for keyboard users and invisible for mouse users, which is
   the only combination that helps both. */
:focus-visible {
	outline: 2px solid var(--cp-brand);
	outline-offset: 2px;
	border-radius: 3px;
}

img, svg, video {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--cp-border);
	margin: 2rem 0;
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
}

pre {
	background: var(--cp-bg-2);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-sm);
	padding: 1rem;
	overflow-x: auto;
}

blockquote {
	margin: 1.6rem 0;
	padding: .25rem 0 .25rem 1.2rem;
	border-left: 3px solid var(--cp-brand);
	color: var(--cp-ink-2);
}

::selection {
	background: rgba(var(--cp-brand-rgb), .18);
	color: var(--cp-ink);
}

/* ==================================================================
   3. Layout
   ================================================================== */

.cp-wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-narrow { max-width: 760px; }

.cp-section { padding-block: var(--cp-section); }

.cp-section-tint { background: var(--cp-bg-2); }

.cp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .7rem 1.1rem;
	background: var(--cp-brand);
	color: #fff;
	border-radius: 0 0 var(--cp-radius-sm) 0;
}

.cp-skip:focus { left: 0; }

/* ==================================================================
   4. Header
   ================================================================== */

.cp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--cp-bg) 88%, transparent);
	border-bottom: 1px solid var(--cp-border);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.cp-header { background: var(--cp-bg); }
}

@media (min-width: 768px) {
	.cp-header {
		backdrop-filter: saturate(150%) blur(12px);
		-webkit-backdrop-filter: saturate(150%) blur(12px);
	}
}

.cp-header-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 66px;
}

.cp-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--cp-font);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--cp-ink);
	text-decoration: none;
	margin-right: auto;
}

.cp-brand img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.cp-nav ul {
	display: flex;
	align-items: center;
	gap: .3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-nav a {
	display: block;
	padding: .5rem .8rem;
	border-radius: var(--cp-radius-sm);
	color: var(--cp-ink-2);
	font-size: .95rem;
	text-decoration: none;
}

.cp-nav a:hover {
	background: var(--cp-bg-2);
	color: var(--cp-ink);
}

.cp-nav .current-menu-item > a {
	color: var(--cp-brand);
	background: var(--cp-brand-subtle);
}

.cp-header-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.cp-mode-toggle,
.cp-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-bg);
	color: var(--cp-ink-2);
	cursor: pointer;
}

.cp-mode-toggle:hover,
.cp-nav-toggle:hover {
	border-color: var(--cp-border-strong);
	color: var(--cp-ink);
}

.cp-nav-toggle { display: none; }

/* The sun and the moon swap, so the button always shows what you
   would get rather than what you already have. */
.cp-mode-toggle .cp-moon { display: none; }

:root[data-bs-theme="dark"] .cp-mode-toggle .cp-moon,
:root[data-cp-mode="dark"] .cp-mode-toggle .cp-moon { display: block; }

:root[data-bs-theme="dark"] .cp-mode-toggle .cp-sun,
:root[data-cp-mode="dark"] .cp-mode-toggle .cp-sun { display: none; }

@media (max-width: 860px) {
	.cp-nav-toggle { display: inline-flex; }

	.cp-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: .6rem var(--cp-gutter) 1rem;
		background: var(--cp-bg);
		border-bottom: 1px solid var(--cp-border);
		box-shadow: var(--cp-shadow);
	}

	.cp-nav.is-open { display: block; }

	.cp-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: .1rem;
	}

	.cp-nav a { padding: .7rem .8rem; }
}

/* ==================================================================
   5. Buttons
   ================================================================== */

.cp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--cp-font);
	font-size: .97rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.cp-btn-primary {
	background: var(--cp-gradient);
	color: #fff;
	box-shadow: 0 6px 18px rgba(var(--cp-brand-rgb), .28);
}

.cp-btn-primary:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(var(--cp-brand-rgb), .36);
}

.cp-btn-ghost {
	background: transparent;
	border-color: var(--cp-border-strong);
	color: var(--cp-ink);
}

.cp-btn-ghost:hover {
	background: var(--cp-bg-2);
	color: var(--cp-ink);
}

.cp-btn-light {
	background: #fff;
	color: var(--cp-brand);
}

.cp-btn-light:hover { color: var(--cp-brand-hover); }

/* ==================================================================
   6. Cards
   ================================================================== */

.cp-card {
	background: var(--cp-bg);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	padding: 1.5rem;
}

.cp-card-tint { background: var(--cp-bg-2); }

.cp-grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.cp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: .9rem;
	border-radius: 12px;
	background: var(--cp-brand-subtle);
	color: var(--cp-brand);
	font-size: 1.2rem;
}

.cp-eyebrow {
	display: inline-block;
	margin-bottom: .7rem;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--cp-brand-subtle);
	color: var(--cp-brand);
	font-family: var(--cp-font);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.cp-lead {
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	color: var(--cp-ink-2);
	max-width: var(--cp-measure);
}

/* ==================================================================
   7. Hero
   ================================================================== */

.cp-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 7rem);
	background: var(--cp-bg-2);
}

/* A soft wash of the brand, kept behind the text and well below the
   contrast the words need. */
.cp-hero::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 150%;
	background:
		radial-gradient(45% 55% at 20% 20%, rgba(var(--cp-brand-rgb), .16), transparent 70%),
		radial-gradient(40% 50% at 85% 10%, rgba(var(--cp-brand-2-rgb), .14), transparent 70%);
	pointer-events: none;
}

.cp-hero > * { position: relative; }

.cp-hero h1 { max-width: 16ch; }

.cp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.6rem;
}

/* ==================================================================
   8. Entry content
   ================================================================== */

.cp-entry { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.cp-entry-header { margin-bottom: 2rem; }

.cp-meta {
	color: var(--cp-ink-3);
	font-size: .9rem;
}

.cp-content { max-width: var(--cp-measure); }

.cp-content > * + * { margin-top: 1.1em; }

.cp-content h2 { margin-top: 2.2em; }
.cp-content h3 { margin-top: 1.8em; }

.cp-content ul,
.cp-content ol { padding-left: 1.3rem; }

.cp-content li + li { margin-top: .4em; }

.cp-content img,
.cp-content .wp-caption {
	border-radius: var(--cp-radius);
}

.cp-content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.4rem;
}

.cp-content th,
.cp-content td {
	padding: .7rem .8rem;
	border-bottom: 1px solid var(--cp-border);
	text-align: left;
}

.cp-content th {
	font-family: var(--cp-font);
	font-weight: 600;
	color: var(--cp-ink);
}

/* Wide content scrolls inside itself rather than pushing the page
   sideways, which is the failure everyone notices on a phone. */
.cp-content .cp-scroll,
.cp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==================================================================
   9. Footer
   ================================================================== */

.cp-footer {
	margin-top: auto;
	padding-block: 3rem 2rem;
	background: var(--cp-bg-2);
	border-top: 1px solid var(--cp-border);
	color: var(--cp-ink-2);
	font-size: .93rem;
}

.cp-footer a {
	color: var(--cp-ink-2);
	text-decoration: none;
}

.cp-footer a:hover {
	color: var(--cp-brand);
	text-decoration: underline;
}

.cp-footer-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-bottom: 2rem;
}

.cp-footer h4 {
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cp-ink-3);
	margin-bottom: .8rem;
}

.cp-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-footer li + li { margin-top: .45rem; }

.cp-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.4rem;
	border-top: 1px solid var(--cp-border);
	color: var(--cp-ink-3);
	font-size: .86rem;
}

/* The risk line is the one piece of footer text that must not be
   skimmed past, so it gets its own block rather than joining the
   small print. */
.cp-risk-note {
	max-width: var(--cp-measure);
	margin-bottom: 1.6rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--cp-border);
	border-left: 3px solid var(--cp-warn);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-warn-subtle);
	color: var(--cp-ink-2);
	font-size: .88rem;
}

/* ==================================================================
   10. Odds and ends
   ================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cp-page-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cp-pagination {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}

.cp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: .6rem;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-sm);
	color: var(--cp-ink-2);
	text-decoration: none;
}

.cp-pagination .page-numbers:hover { background: var(--cp-bg-2); }

.cp-pagination .page-numbers.current {
	background: var(--cp-brand);
	border-color: var(--cp-brand);
	color: #fff;
}

.cp-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 0;
}

.cp-post-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.cp-post-card-body { padding: 1.3rem; }

.cp-404 {
	text-align: center;
	padding-block: clamp(4rem, 12vw, 8rem);
}

.cp-404 .cp-code {
	font-family: var(--cp-font);
	font-size: clamp(4rem, 16vw, 9rem);
	font-weight: 600;
	line-height: 1;
	background: var(--cp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cp-search {
	display: flex;
	gap: .5rem;
	max-width: 420px;
}

.cp-search input[type="search"] {
	flex: 1;
	padding: .65rem .9rem;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-sm);
	background: var(--cp-bg);
	color: var(--cp-ink);
	font: inherit;
	font-size: .95rem;
}

.cp-search input[type="search"]:focus {
	border-color: var(--cp-brand);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--cp-brand-rgb), .15);
}

/* Someone who has asked for less motion gets less motion. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.cp-header,
	.cp-footer,
	.cp-hero::before { display: none; }

	body { color: #000; background: #fff; }
}