/**
 * Sociend — Base
 * Design tokens, reset, typography and utilities.
 *
 * Loaded first. Everything else builds on the custom properties declared here,
 * so an admin colour or radius change cascades through the whole theme.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* -- Brand ------------------------------------------------------- */
	/* Electric blue carries every interactive element; cyan is reserved for
	   gradients and small accents so it never sits as text on white. */
	--sociend-primary: #126bff;
	--sociend-primary-dark: #0a52cc;
	--sociend-primary-soft: #f3f7ff;
	--sociend-rgb-primary: 18, 107, 255;
	--sociend-accent: #00c8ff;
	--sociend-rgb-accent: 0, 200, 255;

	/* -- Neutral palette --------------------------------------------- */
	--sociend-navy: #020b24;
	--sociend-navy-deep: #010714;
	--sociend-rgb-navy: 2, 11, 36;
	--sociend-rgb-navy-deep: 1, 7, 20;

	--sociend-white: #ffffff;
	--sociend-black: #000000;

	/* -- Semantic surfaces & text ------------------------------------ */
	--sociend-canvas: #ffffff;
	--sociend-surface: #ffffff;
	--sociend-surface-alt: #f3f7ff;
	--sociend-surface-sunken: #e8f0fc;
	--sociend-surface-inverse: #020b24;

	--sociend-text: #102347;
	--sociend-text-strong: #020b24;
	--sociend-text-muted: #53647f;
	--sociend-text-subtle: #6b7a90;
	--sociend-text-inverse: #ffffff;
	--sociend-text-inverse-muted: rgba(255, 255, 255, 0.7);

	/* -- Lines ------------------------------------------------------- */
	--sociend-border: #e2eaf5;
	--sociend-border-soft: #edf3fb;
	--sociend-border-strong: #c9d8ec;
	--sociend-border-inverse: rgba(255, 255, 255, 0.14);
	--sociend-border-brand: rgba(18, 107, 255, 0.32);

	/* -- Status ------------------------------------------------------ */
	--sociend-success: #10b981;
	--sociend-warning: #f59e0b;
	--sociend-danger: #ef4444;
	--sociend-info: #0ea5e9;
	--sociend-rgb-success: 16, 185, 129;
	--sociend-rgb-warning: 245, 158, 11;
	--sociend-rgb-danger: 239, 68, 68;
	--sociend-rgb-info: 14, 165, 233;

	/* -- Typography -------------------------------------------------- */
	--sociend-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sociend-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sociend-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Fluid type scale. Every step is clamped so it never needs a
	   breakpoint-specific override. */
	--sociend-text-2xs: 0.6875rem;   /* 11px */
	--sociend-text-xs: 0.75rem;      /* 12px */
	--sociend-text-sm: 0.8125rem;    /* 13px */
	--sociend-text-base: 0.9375rem;  /* 15px */
	--sociend-text-md: 1rem;         /* 16px */
	--sociend-text-lg: 1.125rem;     /* 18px */
	--sociend-text-xl: clamp(1.25rem, 0.2vw + 1.15rem, 1.375rem);
	--sociend-text-2xl: clamp(1.5rem, 0.6vw + 1.3rem, 1.875rem);
	--sociend-text-3xl: clamp(1.875rem, 1.4vw + 1.45rem, 2.5rem);
	--sociend-text-4xl: clamp(2.25rem, 2.6vw + 1.5rem, 3.25rem);
	--sociend-text-5xl: clamp(2.75rem, 4.4vw + 1.5rem, 4.5rem);
	--sociend-text-6xl: clamp(3.25rem, 6.2vw + 1.4rem, 6rem);

	--sociend-leading-tight: 1.04;
	--sociend-leading-snug: 1.18;
	--sociend-leading-normal: 1.5;
	--sociend-leading-relaxed: 1.7;

	--sociend-tracking-tight: -0.035em;
	--sociend-tracking-snug: -0.02em;
	--sociend-tracking-normal: -0.011em;
	--sociend-tracking-wide: 0.02em;
	--sociend-tracking-wider: 0.08em;

	/* -- Space (4px base) -------------------------------------------- */
	--sociend-space-3xs: 0.25rem;
	--sociend-space-2xs: 0.5rem;
	--sociend-space-xs: 0.75rem;
	--sociend-space-sm: 1rem;
	--sociend-space-md: 1.5rem;
	--sociend-space-lg: 2rem;
	--sociend-space-xl: 3rem;
	--sociend-space-2xl: 4rem;
	--sociend-space-3xl: 6rem;
	--sociend-section-space: 7.5rem;

	/* -- Radii ------------------------------------------------------- */
	--sociend-radius-card: 14px;
	--sociend-radius-btn: 8px;
	--sociend-radius-input: 8px;
	--sociend-radius-xs: 4px;
	--sociend-radius-sm: 8px;
	--sociend-radius-md: 12px;
	--sociend-radius-lg: 18px;
	--sociend-radius-xl: 26px;
	--sociend-radius-pill: 999px;
	/* Legacy alias retained so existing rules keep working. */
	--sociend-radius: var(--sociend-radius-card);

	/* -- Elevation --------------------------------------------------- */
	--sociend-shadow-xs: 0 1px 2px rgba(2, 11, 36, 0.05);
	--sociend-shadow-sm: 0 1px 3px rgba(2, 11, 36, 0.07), 0 1px 2px rgba(2, 11, 36, 0.04);
	--sociend-shadow-md: 0 4px 12px -2px rgba(2, 11, 36, 0.08), 0 2px 6px -2px rgba(2, 11, 36, 0.05);
	--sociend-shadow-lg: 0 12px 28px -6px rgba(2, 11, 36, 0.12), 0 6px 14px -8px rgba(2, 11, 36, 0.08);
	--sociend-shadow-xl: 0 28px 60px -12px rgba(2, 11, 36, 0.18), 0 12px 28px -16px rgba(2, 11, 36, 0.12);
	--sociend-shadow-brand: 0 8px 24px -8px rgba(var(--sociend-rgb-primary), 0.45);
	--sociend-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

	/* -- Gradients & effects ----------------------------------------- */
	--sociend-grad-brand: linear-gradient(135deg, var(--sociend-primary) 0%, var(--sociend-accent) 100%);
	--sociend-grad-surface: linear-gradient(180deg, var(--sociend-white) 0%, var(--sociend-surface-alt) 100%);
	--sociend-grad-dark: linear-gradient(165deg, var(--sociend-navy) 0%, var(--sociend-navy-deep) 100%);
	--sociend-grad-ring: linear-gradient(var(--sociend-primary), var(--sociend-accent));

	/* -- Layout ------------------------------------------------------ */
	--sociend-container: 1280px;
	--sociend-container-narrow: 760px;
	--sociend-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--sociend-header-height: 72px;
	--sociend-scroll-offset: 90px;

	/* -- Motion ------------------------------------------------------ */
	--sociend-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--sociend-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--sociend-dur-fast: 140ms;
	--sociend-dur: 240ms;
	--sociend-dur-slow: 460ms;

	color-scheme: light;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--sociend-scroll-offset);
}

body {
	min-height: 100vh;
	background-color: var(--sociend-canvas);
	color: var(--sociend-text);
	font-family: var(--sociend-font-body);
	font-size: var(--sociend-text-md);
	font-weight: 400;
	line-height: var(--sociend-leading-normal);
	letter-spacing: var(--sociend-tracking-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
	overflow-x: hidden;
}

body.is-locked {
	overflow: hidden;
}

img,
picture,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

svg {
	fill: currentColor;
	flex-shrink: 0;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

ul[ class ],
ol[ class ] {
	list-style: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--sociend-border);
	margin: var(--sociend-space-lg) 0;
}

::selection {
	background: rgba(var(--sociend-rgb-primary), 0.18);
	color: var(--sociend-text-strong);
}

:focus-visible {
	outline: 2px solid var(--sociend-primary);
	outline-offset: 3px;
	border-radius: var(--sociend-radius-xs);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sociend-font-heading);
	color: var(--sociend-text-strong);
	font-weight: 600;
	line-height: var(--sociend-leading-snug);
	letter-spacing: var(--sociend-tracking-snug);
	text-wrap: balance;
}

h1 {
	font-size: var(--sociend-text-5xl);
	font-weight: 640;
	line-height: var(--sociend-leading-tight);
	letter-spacing: var(--sociend-tracking-tight);
}

h2 {
	font-size: var(--sociend-text-4xl);
	font-weight: 620;
	line-height: var(--sociend-leading-tight);
	letter-spacing: var(--sociend-tracking-tight);
}

h3 {
	font-size: var(--sociend-text-2xl);
	font-weight: 600;
	letter-spacing: var(--sociend-tracking-snug);
}

h4 {
	font-size: var(--sociend-text-xl);
}

h5 {
	font-size: var(--sociend-text-lg);
}

h6 {
	font-size: var(--sociend-text-md);
}

p {
	text-wrap: pretty;
}

strong,
b {
	font-weight: 640;
	color: var(--sociend-text-strong);
}

small {
	font-size: var(--sociend-text-sm);
}

code,
kbd,
samp,
pre {
	font-family: var(--sociend-font-mono);
	font-size: 0.9em;
}

abbr[ title ] {
	text-decoration: underline dotted;
	cursor: help;
}

blockquote {
	margin: 0;
	padding-left: var(--sociend-space-md);
	border-left: 2px solid var(--sociend-border-brand);
	color: var(--sociend-text-muted);
	font-style: normal;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.sociend-container {
	width: 100%;
	max-width: var(--sociend-container);
	margin-inline: auto;
	padding-inline: var(--sociend-gutter);
}

.sociend-container--narrow {
	max-width: var(--sociend-container-narrow);
}

.sociend-container--wide {
	max-width: 1440px;
}

.sociend-section {
	position: relative;
	padding-block: var(--sociend-section-space);
}

.sociend-section--tight {
	padding-block: calc(var(--sociend-section-space) * 0.6);
}

.sociend-section--loose {
	padding-block: calc(var(--sociend-section-space) * 1.35);
}

.sociend-section--alt {
	background-color: var(--sociend-surface-alt);
}

.sociend-section--sunken {
	background-color: var(--sociend-surface-sunken);
}

/* Solid surface with hairline separators above and below. */
.sociend-section--surface {
	background-color: var(--sociend-surface);
	border-block: 1px solid var(--sociend-border-soft);
}

/* Softer wash than --alt, for sections that only need a breath of tint. */
.sociend-section--soft {
	background-color: color-mix(in srgb, var(--sociend-primary) 4%, var(--sociend-surface));
}

/* Dark band. Inverts the semantic tokens for everything inside. */
.sociend-section--dark {
	--sociend-canvas: var(--sociend-navy);
	--sociend-surface: var(--sociend-navy);
	--sociend-text: var(--sociend-text-inverse);
	--sociend-text-strong: #ffffff;
	--sociend-text-muted: var(--sociend-text-inverse-muted);
	--sociend-text-subtle: rgba(255, 255, 255, 0.5);
	--sociend-border: var(--sociend-border-inverse);
	--sociend-border-soft: rgba(255, 255, 255, 0.07);
	--sociend-border-strong: rgba(255, 255, 255, 0.2);
	background-color: var(--sociend-navy);
	color: var(--sociend-text-inverse);
}

.sociend-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sociend-space-md);
	margin-bottom: var(--sociend-space-2xl);
}

.sociend-section__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}

/* ==========================================================================
   5. Section header
   ========================================================================== */

.sociend-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var(--sociend-space-sm);
	color: var(--sociend-primary);
	font-size: var(--sociend-text-xs);
	font-weight: 600;
	letter-spacing: var(--sociend-tracking-wider);
	text-transform: uppercase;
}

.sociend-eyebrow::before {
	content: "";
	inline-size: 1.5rem;
	block-size: 1px;
	background: currentColor;
	opacity: 0.5;
}

.sociend-eyebrow--plain::before {
	display: none;
}

.sociend-eyebrow__icon {
	display: inline-flex;
}

.sociend-section__title {
	font-size: var(--sociend-text-4xl);
	color: var(--sociend-text-strong);
}

.sociend-section__text {
	max-width: 38rem;
	margin-top: var(--sociend-space-sm);
	color: var(--sociend-text-muted);
	font-size: var(--sociend-text-lg);
	line-height: var(--sociend-leading-relaxed);
}

/* ==========================================================================
   6. Utilities
   ========================================================================== */

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

.sociend-skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: var(--sociend-space-sm);
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--sociend-primary);
	color: #fff;
	border-radius: var(--sociend-radius-sm);
	font-size: var(--sociend-text-sm);
	font-weight: 600;
}

.sociend-skip-link:focus {
	inset-block-start: var(--sociend-space-sm);
}

.sociend-text-center { text-align: center; }
.sociend-text-muted { color: var(--sociend-text-muted); }

.sociend-gradient-text {
	background: var(--sociend-grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sociend-no-wrap {
	white-space: nowrap;
}

/* WordPress core classes */
.alignleft {
	float: left;
	margin: 0.35rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
	margin-top: var(--sociend-space-2xs);
	color: var(--sociend-text-subtle);
	font-size: var(--sociend-text-xs);
	text-align: center;
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* Required by the theme review guidelines. */
}

/* ==========================================================================
   7. Reveal on scroll
   Progressive enhancement: JS adds .is-revealed. Without JS nothing hides.
   ========================================================================== */

.js [ data-reveal ] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--sociend-dur-slow) var(--sociend-ease-out),
		transform var(--sociend-dur-slow) var(--sociend-ease-out);
	transition-delay: var(--sociend-delay, 0ms);
}

.js [ data-reveal ].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}