/*
	Theme Name: Kasa Academy
	Theme URI: https://academy.kasa-foundation.org
	Description: The learning home of the Kasa Foundation. A child theme of Hello Elementor, carrying the Kasa palette, typography and focus mode styling for the Kasa Learning Academy. Built for learners across Africa in English, French and Spanish.
	Author: Kasa Foundation
	Author URI: https://www.kasa-foundation.org
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: kasa-academy
	Tags: accessibility-ready, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, translation-ready, education
*/


/* ==========================================================================
   1. BRAND TOKENS
   Change these and everything below follows. Course pages override
   --kasa-p and --kasa-s per course, so those two are only the defaults.
   ========================================================================== */

:root{
	/* academy palette */
	--kasa-p:#6366F1;              /* indigo, default course primary   */
	--kasa-s:#22D3EE;              /* cyan, default course secondary   */
	--kasa-p-rgb:99,102,241;

	/* Kasa foundation greens */
	--kasa-sage:#8CA57C;
	--kasa-sage-deep:#4E6B44;
	--kasa-cream:#F6F3E9;

	/* neutrals */
	--kasa-ink:#1b1f2a;
	--kasa-muted:rgba(27,31,42,.62);
	--kasa-line:rgba(27,31,42,.12);
	--kasa-canvas:#eef2ff;

	/* accents used sparingly in hero decoration */
	--kasa-amber:#F59E0B;
	--kasa-pink:#EC4899;

	/* shape */
	--kasa-radius-lg:2.5rem;
	--kasa-radius-md:1.5rem;
	--kasa-radius-sm:1rem;
}


/* ==========================================================================
   2. LINKS AND BUTTONS
   Hello Elementor and the Elementor kit set their own hover colour, which
   buttons then inherit. These rules keep each element on its own colour.
   ========================================================================== */

a:hover,
a:focus{
	color:var(--kasa-p);
}

/* buttons keep whatever colour they were given */
a.button:hover,
a.wp-block-button__link:hover,
a.elementor-button:hover,
a.ld-button:hover,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus{
	color:inherit;
}


/* ==========================================================================
   3. KEYBOARD FOCUS
   Visible for keyboard users, invisible for mouse users. Important on a
   platform used by children and on low-cost devices.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
	outline:2px solid var(--kasa-p);
	outline-offset:2px;
	border-radius:.35rem;
}

::selection{
	background:rgba(var(--kasa-p-rgb),.22);
}


/* ==========================================================================
   4. READABILITY
   Slightly larger body text and looser lines than the Hello default,
   because the primary audience is ten to fourteen years old.
   ========================================================================== */

body{
	color:var(--kasa-ink);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

.site-main p,
.entry-content p{
	line-height:1.75;
}

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


/* ==========================================================================
   5. SKIP LINK
   Hello Elementor ships one. This keeps it hidden until focused.
   ========================================================================== */

.skip-link,
.screen-reader-shortcut{
	position:absolute;
	left:-9999px;
	top:0;
	z-index:100000;
}
.skip-link:focus,
.screen-reader-shortcut:focus{
	left:1rem;
	top:1rem;
	width:auto;
	height:auto;
	padding:.75rem 1.25rem;
	border-radius:9999px;
	background:var(--kasa-p);
	color:#fff;
	font-weight:700;
	text-decoration:none;
}


/* ==========================================================================
   6. MOTION
   Respect the system setting.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
	*,
	*::before,
	*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}


/* ==========================================================================
   7. PRINT
   Learners and mentors sometimes print a lesson to work offline.
   ========================================================================== */

@media print{
	.ld-focus-sidebar,
	.ld-focus-header,
	.kasa-audio,
	.kasa-discuss,
	.ld-content-actions,
	.site-header,
	.site-footer{
		display:none !important;
	}
	.ld-focus,
	.ld-focus-content{
		background:#fff !important;
	}
	a[href]::after{
		content:" (" attr(href) ")";
		font-size:.8em;
		word-break:break-all;
	}
}


/* ==========================================================================
   8. YOUR ADDITIONS
   Anything site-wide goes below this line.
   Focus mode and course page styling live in the Kasa Academy mu-plugin,
   not here, so that they travel with the functionality.
   ========================================================================== */