/**
 * VCourse Base Styles
 *
 * Reset, document defaults, typography, layout primitives and accessibility
 * affordances. Component styles live in components.css — keep this file free
 * of anything that is specific to a single UI block.
 */

/* ===============================================================
 * 1. Modern reset
 * ============================================================= */

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

* {
	margin: 0;
	padding: 0;
}

/*
 * The `hidden` attribute's UA-stylesheet default (`display: none`) has the
 * same specificity as a class selector, so any component class that sets
 * its own `display` (`.vc-notice { display: flex }`, etc.) silently wins
 * the cascade and the element stays visible despite `hidden` being set.
 * `!important` here is what actually guarantees `hidden` hides — this is
 * the one global override in the whole stylesheet, and deliberately so.
 */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Offset anchor jumps so the sticky header never covers the target heading. */
	scroll-padding-top: 120px;
	/*
	 * Off-canvas elements (mobile nav drawer, sticky mobile CTA, WhatsApp
	 * widget) are `position: fixed` and slide in via `transform`, which
	 * positions them relative to the viewport rather than `<body>`. Because
	 * fixed elements are not clipped by a body-level `overflow-x`, their
	 * off-screen box still widens the document's scrollable area — on real
	 * mobile browsers this lets the whole page pan/zoom sideways, throwing
	 * off tap coordinates for fixed header controls like the nav toggle.
	 * Clipping on `<html>` (the actual scrolling element) closes that gap.
	 */
	overflow-x: hidden;
}

body {
	font-family: var(--vc-font-body);
	font-size: var(--vc-text-base);
	line-height: var(--vc-leading-normal);
	color: var(--vc-text);
	background-color: var(--vc-white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/*
	 * Inter typographic niceties: let the variable optical-size axis adjust to
	 * the rendered size, enable contextual alternates and slashed-zero/tabular
	 * figures where relevant. These small touches are what separate "the font
	 * loaded" from "the type looks designed".
	 */
	font-optical-sizing: auto;
	font-feature-settings: "cv11", "ss01", "calt";
}

/* Media defaults — `height: auto` with width/height attributes in markup
 * reserves layout space and keeps CLS at zero. */
img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/*
 * Safety net for inline SVG icons. `:where()` gives this ZERO specificity, so
 * every component-specific icon rule overrides it — but any icon that is ever
 * rendered without a specific size falls back to a sane inline size instead of
 * ballooning to its intrinsic dimensions. This prevents the "giant icon" bug
 * when an icon appears in a context whose stylesheet has not loaded.
 */
:where(svg.vc-icon) {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	vertical-align: middle;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul,
ol {
	list-style: none;
}

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

/* ===============================================================
 * 2. Typography
 * ============================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--vc-font-heading);
	line-height: var(--vc-leading-tight);
	color: var(--vc-heading);
	font-weight: 700;
	/* Negative tracking is the single biggest lever for crisp, premium
	 * headings — without it, geometric sans headings read loose and generic. */
	letter-spacing: var(--vc-tracking-snug);
	font-feature-settings: "ss01", "calt";
}

/* The largest display sizes want tighter tracking and leading still. */
h1 {
	font-size: var(--vc-text-5xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: var(--vc-tracking-tight);
}

h2 {
	font-size: var(--vc-text-4xl);
	line-height: 1.15;
	letter-spacing: var(--vc-tracking-tight);
}

h3 { font-size: var(--vc-text-3xl); }
h4 { font-size: var(--vc-text-2xl); font-weight: 600; }
h5 { font-size: var(--vc-text-xl); font-weight: 600; letter-spacing: var(--vc-tracking-normal); }
h6 { font-size: var(--vc-text-lg); font-weight: 600; letter-spacing: var(--vc-tracking-normal); }

a {
	color: var(--vc-primary);
	text-decoration: none;
	transition: color var(--vc-duration) var(--vc-ease);
}

a:hover {
	color: var(--vc-primary-dark);
}

/* Content links stay underlined for WCAG 1.4.1 — colour is never the only cue. */
.vc-prose a:not(.vc-btn) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

strong,
b {
	font-weight: 700;
	color: var(--vc-heading);
}

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

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

code {
	background: var(--vc-surface-alt);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}

pre {
	background: var(--vc-dark-alt);
	color: var(--vc-light);
	padding: var(--vc-space-5);
	border-radius: var(--vc-radius-md);
	overflow-x: auto;
}

blockquote {
	border-left: 4px solid var(--vc-primary);
	padding-left: var(--vc-space-5);
	font-style: italic;
	color: var(--vc-text-muted);
}

hr {
	border: none;
	border-top: 1px solid var(--vc-border);
	margin: var(--vc-space-7) 0;
}

/* Long-form content rhythm — applied to post/page editor output.
 * A slightly looser line-height and a bounded measure make body copy
 * comfortable to read over long stretches. */
.vc-prose {
	line-height: var(--vc-leading-relaxed);
	color: var(--vc-text);
}

.vc-prose p {
	max-width: 68ch;
}

.vc-prose > * + * {
	margin-top: var(--vc-space-4);
}

.vc-prose > h2,
.vc-prose > h3,
.vc-prose > h4 {
	margin-top: var(--vc-space-7);
	margin-bottom: var(--vc-space-3);
}

.vc-prose ul,
.vc-prose ol {
	padding-left: var(--vc-space-5);
}

.vc-prose ul { list-style: disc; }
.vc-prose ol { list-style: decimal; }
.vc-prose li + li { margin-top: var(--vc-space-2); }

.vc-prose img {
	border-radius: var(--vc-radius-lg);
}

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

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

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

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

.vc-section--tight { padding-block: calc(var(--vc-section-y) * 0.6); }
.vc-section--light { background: var(--vc-light); }
.vc-section--dark {
	background: var(--vc-gradient-dark);
	color: var(--vc-light);
}

.vc-section--dark h1,
.vc-section--dark h2,
.vc-section--dark h3,
.vc-section--dark h4 {
	color: var(--vc-white);
}

/*
 * Auto-fit grid — the `--min` custom property sets the breakpoint at which
 * columns wrap, so a single class covers every card layout in the theme.
 *
 * Tracks are capped at `--max` (not `1fr`) and the row is centred: with a
 * full row this is invisible, but with just one or two cards — e.g. a
 * course grid that currently has a single course — the card(s) sit at a
 * natural width in the middle instead of a lone card stretching to fill
 * the entire row.
 */
.vc-grid {
	display: grid;
	justify-content: center;
	gap: var(--vc-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 320px), 100%), var(--max, 380px)));
}

.vc-grid--2 { --min: 460px; --max: 460px; }
.vc-grid--3 { --min: 320px; }
.vc-grid--4 { --min: 240px; --max: 280px; }
.vc-grid--tight { gap: var(--vc-space-4); }

.vc-flex {
	display: flex;
	gap: var(--vc-space-4);
	align-items: center;
}

.vc-flex--between { justify-content: space-between; }
.vc-flex--center { justify-content: center; }
.vc-flex--wrap { flex-wrap: wrap; }
.vc-flex--column { flex-direction: column; align-items: stretch; }

.vc-stack > * + * { margin-top: var(--vc-space-4); }
.vc-stack--lg > * + * { margin-top: var(--vc-space-6); }

/* ===============================================================
 * 4. Utilities
 * ============================================================= */

.vc-text-center { text-align: center; }
.vc-text-left { text-align: left; }
.vc-text-muted { color: var(--vc-text-muted); }
.vc-text-sm { font-size: var(--vc-text-sm); }
.vc-text-lg { font-size: var(--vc-text-lg); }

.vc-mt-0 { margin-top: 0; }
.vc-mb-0 { margin-bottom: 0; }
.vc-mt-4 { margin-top: var(--vc-space-4); }
.vc-mt-6 { margin-top: var(--vc-space-6); }
.vc-mb-6 { margin-bottom: var(--vc-space-6); }

.vc-w-full { width: 100%; }
.vc-hidden { display: none !important; }

/* Gradient text — used for section titles and stat numbers.
 * `background-clip: text` needs a colour fallback for browsers that
 * fail the -webkit-text-fill-color trick. */
.vc-gradient-text {
	color: var(--vc-navy);
	background: var(--vc-gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.vc-gradient-text {
		-webkit-text-fill-color: currentColor;
		background: none;
	}
}

/* ===============================================================
 * 5. Accessibility
 * ============================================================= */

/* Visually hidden but exposed to assistive tech. */
.screen-reader-text,
.vc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link — becomes visible on keyboard focus. */
.vc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--vc-space-4);
	z-index: var(--vc-z-toast);
	padding: var(--vc-space-3) var(--vc-space-5);
	background: var(--vc-primary);
	color: var(--vc-white);
	border-radius: 0 0 var(--vc-radius-md) var(--vc-radius-md);
	font-weight: 600;
	transition: top var(--vc-duration-fast) var(--vc-ease);
}

.vc-skip-link:focus {
	top: 0;
	color: var(--vc-white);
}

/* Visible focus ring for keyboard users only — `:focus-visible` keeps the
 * ring off mouse clicks without disabling it for keyboard navigation. */
:focus-visible {
	outline: 3px solid var(--vc-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Never remove focus styles outright; only swap the technique. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Honour the OS-level reduced-motion preference. Animations are neutralised
 * rather than removed so JS that waits on transitionend still fires. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* Respect forced-colors / Windows High Contrast mode. */
@media (forced-colors: active) {
	.vc-btn {
		border: 1px solid ButtonText;
	}
}

/* ===============================================================
 * 6. Scroll-reveal animation
 *
 * Replaces the AOS library from the static build (~15KB) with ~10 lines.
 * Elements start hidden only when JS is available, so content remains
 * visible if the script fails — progressive enhancement, not a dependency.
 * ============================================================= */

.js .vc-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--vc-duration-slow) var(--vc-ease-out),
		transform var(--vc-duration-slow) var(--vc-ease-out);
	will-change: opacity, transform;
}

.js .vc-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Staggered children, driven by --vc-delay set inline in templates. */
.js .vc-reveal[style*="--vc-delay"] {
	transition-delay: var(--vc-delay, 0ms);
}

/* ===============================================================
 * 7. Print
 * ============================================================= */

@media print {
	.vc-header,
	.vc-footer,
	.vc-mobile-cta,
	.vc-skip-link,
	.vc-breadcrumbs,
	video,
	iframe {
		display: none !important;
	}

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

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}
}