/*
Theme Name: SkillDojo
Theme URI: https://www.skilldojo.io
Author: Coolski Code
Author URI: https://coolski.co.uk
Description: The SkillDojo Explore marketing site. A child of Kwik Theme that carries the SkillDojo brand foundation, the self-hosted Plus Jakarta Sans face, and the homepage composition.
Template: kwikonect-theme
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skilldojo
Tags: block-theme, full-site-editing, education
*/

/* ---------------------------------------------------------------------------
 * Kwik Theme is a BLOCK theme, so almost everything is expressed in theme.json
 * and Global Styles. What lives here is only what theme.json cannot say.
 * ------------------------------------------------------------------------- */

/* Plus Jakarta Sans, self-hosted.
 *
 * NOT Google Fonts, deliberately. SkillDojo's audience is schools and colleges,
 * where third-party CDNs are routinely blocked by content filters -- the game
 * self-hosts the identical variable face for exactly this reason. It also
 * dodges a quieter problem: KwikBlocks' font pairing table requests Plus
 * Jakarta Sans at weights 400 and 600 only, but the brand spec sets heroes and
 * H1 at 800, so the Google path would silently synthesise the heaviest type on
 * the page. These are the same two files the game ships. */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("./assets/fonts/plusjakartasans-vf-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("./assets/fonts/plusjakartasans-vf-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Brand headings are tightly tracked (spec s5: around -0.035em). theme.json can
 * set letterSpacing per element, but not the responsive clamp() the hero needs,
 * so the two live together here. */
.skilldojo-hero__headline {
	font-size: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.skilldojo-eyebrow {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The path cards are links wrapping a whole tile. Keep the lift subtle and
 * respect a reduced-motion preference. */
.skilldojo-path-card {
	display: block;
	text-decoration: none;
	transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
		box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}
.skilldojo-path-card:hover,
.skilldojo-path-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgb(16 21 43 / 0.18);
}
@media (prefers-reduced-motion: reduce) {
	.skilldojo-path-card {
		transition: none;
	}
	.skilldojo-path-card:hover,
	.skilldojo-path-card:focus-visible {
		transform: none;
	}
}

/* A visible focus ring everywhere, in brand red. Keyboard users are a
 * meaningful share of a school audience on managed devices. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-red, #ed1c2e);
	outline-offset: 2px;
	border-radius: 4px;
}

/* The progress meter in the "Small steps" card. A real <progress> would bring
 * UA styling that differs per browser; this is a div pair with the semantics
 * supplied by role/aria in the markup. */
.skilldojo-progress {
	background: #eef0f4;
	border-radius: 999px;
	overflow: hidden;
	height: 10px;
}
.skilldojo-progress__fill {
	/* #4A74F0, not the palette's #5D85F7: the lighter blue reads 2.99:1 against
	 * this track, just under the 3:1 WCAG asks of a graphical object. Darkening
	 * the TRACK makes it worse here (the track is lighter than the fill), so the
	 * fill is what moves. Do not "restore" it to #5D85F7. */
	background: #4a74f0;
	height: 100%;
	border-radius: 999px;
}

/* Section artwork should never widen a narrow screen. */
.skilldojo-art img {
	max-width: 100%;
	height: auto;
}

/* Footer links.
 *
 * theme.json sets the global link colour to #A91020 -- the dark red that clears
 * AA on WHITE. On the navy footer that same red is unreadable (1.6:1), so the
 * footer re-states its own link colour. A global link colour always needs this
 * wherever the surface flips to dark. */
footer .wp-block-list a,
footer p a {
	color: #d7dce8;
	text-decoration: none;
	border-bottom: 1px solid rgb(215 220 232 / 0.35);
}
footer .wp-block-list a:hover,
footer .wp-block-list a:focus-visible,
footer p a:hover,
footer p a:focus-visible {
	color: #ffffff;
	border-bottom-color: #ffffff;
}
footer .skilldojo-footer-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* The nav and header actions should wrap to a sensible shape on a phone rather
 * than squeezing the logo. */
@media (max-width: 781px) {
	.skilldojo-logo img {
		height: 30px;
	}
}

/* Whole-tile click for the learning-path cards.
 *
 * The card holds exactly ONE link (its heading) and that link is stretched over
 * the tile, so the whole card is clickable while a screen reader and the
 * keyboard still see a single, properly-labelled link. Wrapping the tile in an
 * anchor instead would nest the heading inside the link and make the card
 * uneditable as blocks. */
.skilldojo-path-card {
	position: relative;
	height: 100%;
}
.skilldojo-path-card h3 a {
	color: inherit;
	text-decoration: none;
}
.skilldojo-path-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Badge tiles should sit side by side even on a narrow card: three short tiles
 * stacking would make the progress panel taller than the text beside it.
 * core/columns stacks below 782px by default. */
@media (max-width: 781px) {
	.skilldojo-badges {
		flex-wrap: nowrap !important;
		gap: 8px;
	}
	.skilldojo-badges > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

/* Word spacing.
 *
 * Plus Jakarta Sans draws an unusually narrow word space: measured against the
 * ORIGINAL TTF (not just the subset, so this is the typeface's own design) its
 * advance is 3px at 18px where Arial's is 6px. At the sizes used here that runs
 * words together -- "Track your progress" renders as "Trackyourprogress", which
 * is a legibility problem for an audience that includes weaker readers.
 *
 * A small positive word-spacing in em scales with every size and leaves letter
 * spacing (which the brand spec sets deliberately tight) alone. */
body {
	word-spacing: 0.1em;
}

/* The path cards are centred compositions in the design comp: icon above a
 * centred title, arrow centred beneath, on a tall tile. */
.skilldojo-path-card {
	text-align: center;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.skilldojo-path-card > * {
	margin-left: auto;
	margin-right: auto;
}

/* The outline button pairs an inline icon with its label. */
.skilldojo-btn-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

/* Badge tile captions.
 *
 * Something upstream applies overflow-wrap:break-word to content, which on a
 * 110px-wide tile broke "Foundations" across lines as "Foundation" + "s".
 * These titles should wrap at spaces or not at all. */
.skilldojo-badges .wp-block-column > div > div {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}
@media (max-width: 420px) {
	.skilldojo-badges .wp-block-column > div {
		padding-left: 6px;
		padding-right: 6px;
	}
	.skilldojo-badges .wp-block-column > div > div:nth-child(2) {
		font-size: 0.75rem;
	}
}