/**
 * YouthConnectHub design tokens.
 */

:root {
	/* Core dark surfaces. */
	--ych-bg-primary: #091322;
	--ych-bg-secondary: #0d1929;
	--ych-bg-card: #102033;
	--ych-bg-card-hover: #14263a;

	/* Light editorial surfaces. */
	--ych-surface-white: #ffffff;
	--ych-surface-soft: #f7f9fc;
	--ych-text-on-light: #0a1220;
	--ych-copy-on-light: #4b5565;
	--ych-border-on-light: #dfe5ee;

	/* Dark-surface text. */
	--ych-text-primary: #f4f6fb;
	--ych-text-secondary: #a8b8cd;
	--ych-text-muted: #7f92ad;
	--ych-border: rgba(155, 180, 215, 0.14);
	--ych-border-strong: rgba(155, 180, 215, 0.24);

	/* Brand accents. */
	--ych-accent-blue: #78a9e4;
	--ych-accent-purple: #9a72d0;
	--ych-accent-soft: #eee9f6;
	--ych-accent-ink: #5f3e8c;
	--ych-accent-border: rgba(154, 114, 208, 0.42);
	--ych-accent-gradient: linear-gradient(135deg, #78a9e4, #9a72d0);

	/* Spacing: 4, 8, 16, 24, 32, 48, 64, 96 and 128 pixels. */
	--ych-space-0: 0.25rem;
	--ych-space-1: 0.5rem;
	--ych-space-2: 1rem;
	--ych-space-3: 1.5rem;
	--ych-space-4: 2rem;
	--ych-space-5: 3rem;
	--ych-space-6: 4rem;
	--ych-space-7: 6rem;
	--ych-space-8: 8rem;
	--ych-section-space: clamp(4rem, 7vw, 6rem);
	--ych-section-space-compact: clamp(3rem, 5vw, 4.5rem);

	/* Shape and depth. */
	--ych-radius-button: 0.875rem;
	--ych-radius-image: 1.125rem;
	--ych-radius-card: 1.25rem;
	--ych-radius-panel: 1.5rem;
	--ych-control-height: 3rem;
	--ych-control-padding-inline: 1.4rem;
	--ych-card-padding: clamp(1.5rem, 3vw, 2rem);
	--ych-shadow-small: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
	--ych-shadow-medium: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
	--ych-shadow-large: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.22);
	--ych-shadow: var(--ych-shadow-medium);
	--ych-transition: 240ms ease;
	--ych-focus: #9fc5f4;

	/* Typography. */
	--ych-font-body: "Roboto", Arial, sans-serif;
	--ych-font-heading: "Roboto Condensed", "Roboto", Arial, sans-serif;
	--ych-font-display: "Roboto Slab", Georgia, serif;
	--ych-type-display: clamp(2.75rem, 2.05rem + 3.5vw, 4.5rem);
	--ych-type-h1: clamp(2.125rem, 1.625rem + 2.5vw, 4rem);
	--ych-type-h2: clamp(1.75rem, 1.333rem + 2.083vw, 3rem);
	--ych-type-h3: clamp(1.4375rem, 1.25rem + 0.9375vw, 2rem);
	--ych-type-h4: clamp(1.25rem, 1.167rem + 0.4167vw, 1.5rem);
	--ych-type-h5: clamp(1.125rem, 1.083rem + 0.2083vw, 1.25rem);
	--ych-type-h6: clamp(1rem, 0.958rem + 0.2083vw, 1.125rem);
	--ych-type-body: clamp(1rem, 0.958rem + 0.2083vw, 1.125rem);
	--ych-type-body-large: clamp(1.0625rem, 0.9875rem + 0.375vw, 1.25rem);
	--ych-type-label: 0.75rem;
	--ych-leading-heading: 1.05;
	--ych-leading-body: 1.65;

	/* Width and alignment. */
	--page-gutter: 1.25rem;
	--content-max-width: 90rem;
	--ych-container: var(--content-max-width);
	--ych-container-standard: 75rem;
	--ych-measure-reading: 46rem;
}

/**
 * Global typography.
 *
 * Roboto provides body and interface copy, Roboto Condensed provides the
 * heading hierarchy, and Roboto Slab is reserved for deliberate editorial
 * statements. These rules cover standard WordPress, Kadence, Elementor and
 * child-theme content without overriding logo or icon-font implementations.
 */
body,
button,
input,
optgroup,
select,
textarea {
	font-family: var(--ych-font-body) !important;
	font-weight: 400;
}

body {
	font-size: var(--ych-type-body);
	line-height: var(--ych-leading-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.site-title,
.widget-title,
.wp-block-heading,
.elementor-heading-title {
	font-family: var(--ych-font-heading) !important;
	font-weight: 700 !important;
	line-height: var(--ych-leading-heading);
}

.main-navigation,
.main-navigation a,
.sub-menu,
.mobile-navigation,
.mobile-navigation a,
.site-footer,
.site-footer a,
.site-header,
.wp-block-button__link,
.elementor-button,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.breadcrumbs,
.entry-meta,
figcaption,
caption {
	font-family: var(--ych-font-body) !important;
}

button,
.wp-block-button__link,
.elementor-button,
.ych-button,
strong,
b {
	font-weight: 700;
}

blockquote,
.ych-editorial-statement {
	font-family: var(--ych-font-display);
	font-weight: 400;
}

/**
 * Shared horizontal alignment primitive.
 *
 * Legacy page-template container classes are included so existing templates use
 * the same guide lines without changing their component-level layout.
 */
.site-container,
.ych-page__container,
.ych-about__container,
.ych-beyond__container,
.ych-programmes__container {
	width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max-width));
	max-width: none;
	margin-inline: auto;
}

.ych-container--standard {
	width: min(calc(100% - (var(--page-gutter) * 2)), var(--ych-container-standard));
	margin-inline: auto;
}

.ych-reading-width {
	width: min(100%, var(--ych-measure-reading));
}

/* Keep component backgrounds full-width; only their inner containers align. */
body.home #primary > .content-container.site-container,
body[class*="page-template-page-templates"] #primary > .content-container.site-container,
body.page-id-376 #primary > .content-container.site-container,
body.post-type-archive-ych_programme #primary > .content-container.site-container,
body.post-type-archive-ych_event #primary > .content-container.site-container,
body.single-ych_programme #primary > .content-container.site-container,
body.single-ych_event #primary > .content-container.site-container {
	width: 100%;
	max-width: none;
	margin: 0;
}

@media (min-width: 48rem) {
	:root { --page-gutter: 2.5rem; }
}

@media (min-width: 75rem) {
	:root { --page-gutter: 4rem; }
}

@media (min-width: 100rem) {
	:root { --page-gutter: 5.5rem; }
}

/**
 * Site-wide consistency and accessibility layer.
 *
 * Component colours remain contextual, while dimensions, typography roles,
 * focus treatment and card depth reuse the shared design tokens.
 */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 0.1875rem solid var(--ych-focus) !important;
	outline-offset: 0.25rem !important;
}

.ych-live-content h2,
.entry-content h2 { font-size: var(--ych-type-h2) !important; }
.ych-live-content h3,
.entry-content h3 { font-size: var(--ych-type-h3) !important; }
.ych-live-content h4,
.entry-content h4 { font-size: var(--ych-type-h4) !important; }
.ych-live-content h5,
.entry-content h5 { font-size: var(--ych-type-h5) !important; }
.ych-live-content h6,
.entry-content h6 { font-size: var(--ych-type-h6) !important; }

.ych-live-content :where(p, li),
.entry-content :where(p, li) {
	font-size: var(--ych-type-body);
	line-height: var(--ych-leading-body);
}

main :where(
	.ych-button,
	.ych-mv-button,
	.ych-forum-button,
	.ych-opportunity-button,
	.ych-job-button,
	.ych-involved-button,
	.ych-contact__button,
	.ych-resources__button,
	.ych-tpm-button,
	.ych-events__button,
	.wp-block-button__link,
	.wp-element-button,
	button[type="submit"],
	input[type="submit"]
) {
	min-height: var(--ych-control-height) !important;
	padding: 0.7rem var(--ych-control-padding-inline) !important;
	border-radius: var(--ych-radius-button) !important;
	font-family: var(--ych-font-body) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	transition: background-color var(--ych-transition), border-color var(--ych-transition), box-shadow var(--ych-transition), color var(--ych-transition), transform var(--ych-transition) !important;
}

main :where(
	.ych-button:not(.ych-button--secondary, .ych-button--light, .ych-button--tertiary),
	.ych-mv-button--primary,
	.ych-forum-button,
	.ych-opportunity-button:not(.ych-opportunity-button--secondary),
	.ych-job-button:not(.ych-job-button--secondary),
	.ych-involved-button,
	.ych-contact__button--primary,
	.ych-resources__button--primary
) {
	border-color: transparent !important;
	background: var(--ych-accent-gradient) !important;
	box-shadow: var(--ych-shadow-small) !important;
	color: var(--ych-bg-primary) !important;
}

main :where(
	.ych-button--secondary,
	.ych-button--light,
	.ych-mv-button--secondary,
	.ych-opportunity-button--secondary,
	.ych-job-button--secondary,
	.ych-contact__button--light,
	.ych-resources__button--secondary
) {
	border-color: var(--ych-border-on-light) !important;
	background: var(--ych-surface-white) !important;
	box-shadow: none !important;
	color: var(--ych-text-on-light) !important;
}

main :where(
	.ych-button,
	.ych-mv-button,
	.ych-forum-button,
	.ych-opportunity-button,
	.ych-job-button,
	.ych-involved-button,
	.ych-contact__button,
	.ych-resources__button,
	.ych-tpm-button,
	.ych-events__button,
	.wp-block-button__link,
	.wp-element-button,
	button[type="submit"],
	input[type="submit"]
):hover:not(:disabled, [aria-disabled="true"]) {
	box-shadow: var(--ych-shadow-medium) !important;
	transform: translateY(-0.125rem);
}

main :where(
	.ych-card,
	.ych-about-join__card,
	.ych-about-community__card,
	.ych-team-overview__card,
	.ych-mv-purpose__card,
	.ych-mv-value-card,
	.ych-profile-card,
	.ych-beyond-card,
	.ych-directory-card,
	.ych-featured-resource-card,
	.ych-resource-card,
	.ych-partner-card,
	.ych-involved-card,
	.ych-job-card,
	.ych-contact-option,
	.ych-contact-detail-card,
	.ych-tpm-highlight-card
) {
	border-radius: var(--ych-radius-card) !important;
	box-shadow: var(--ych-shadow-small) !important;
	transition: border-color var(--ych-transition), box-shadow var(--ych-transition), transform var(--ych-transition) !important;
}

main :where(
	.ych-card,
	.ych-about-join__card,
	.ych-about-community__card,
	.ych-team-overview__card,
	.ych-mv-purpose__card,
	.ych-mv-value-card,
	.ych-profile-card,
	.ych-beyond-card,
	.ych-directory-card,
	.ych-featured-resource-card,
	.ych-resource-card,
	.ych-partner-card,
	.ych-involved-card,
	.ych-job-card,
	.ych-contact-option,
	.ych-contact-detail-card,
	.ych-tpm-highlight-card
):is(:hover, :focus-within) {
	box-shadow: var(--ych-shadow-medium) !important;
	transform: translateY(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {
	main :where(a, button, article, [class*="card"]):is(:hover, :focus-within) {
		transform: none !important;
	}
}