/*!
Theme Name: SkillPulse LMS Theme
Description: A modern WordPress block theme designed specifically for SkillPulse LMS. Features full site editing support, custom learning management blocks, and optimized layouts for courses, lessons, and quizzes. Perfect for educational websites, online academies, and training platforms.
Version: 1.0.0
Author: SkillPulse Team
Author URI: https://skillpulselms.com
Theme URI: https://skillpulselms.com/theme
Text Domain: skillpulse-theme
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: block-theme, full-site-editing, wide-blocks, accessibility-ready, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, three-columns

SkillPulse LMS Theme is a modern WordPress block theme specifically designed for learning management systems.
It provides seamless integration with SkillPulse LMS plugin and offers beautiful, responsive layouts for
educational content including courses, lessons, quizzes, and student dashboards.

Copyright (C) 2024 SkillPulse Team
This theme is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
*/

:root {
	/* SkillPulse LMS Plugin Color Mappings */
	--splms-primary: var(--wp--preset--color--primary);
	--splms-primary-dark: var(--wp--preset--color--primary-dark);
	--splms-primary-light: var(--wp--preset--color--primary-light);
	--splms-secondary: var(--wp--preset--color--secondary);
	--splms-secondary-dark: var(--wp--preset--color--secondary-dark);
	--splms-secondary-light: var(--wp--preset--color--secondary-light);

	/* Blue Branding Scale */
	--splms-blue-50: var(--wp--preset--color--blue-50);
	--splms-blue-100: var(--wp--preset--color--blue-100);
	--splms-blue-200: var(--wp--preset--color--blue-200);
	--splms-blue-300: var(--wp--preset--color--blue-300);
	--splms-blue-400: var(--wp--preset--color--blue-400);
	--splms-blue-500: var(--wp--preset--color--blue-500);
	--splms-blue-600: var(--wp--preset--color--blue-600);
	--splms-blue-700: var(--wp--preset--color--blue-700);
	--splms-blue-800: var(--wp--preset--color--blue-800);
	--splms-blue-900: var(--wp--preset--color--blue-900);
	--splms-success: var(--wp--preset--color--success);
	--splms-success-dark: var(--wp--preset--color--success-dark);
	--splms-success-light: var(--wp--preset--color--success-light);
	--splms-warning: var(--wp--preset--color--warning);
	--splms-warning-dark: var(--wp--preset--color--warning-dark);
	--splms-warning-light: var(--wp--preset--color--warning-light);
	--splms-danger: var(--wp--preset--color--danger);
	--splms-danger-dark: var(--wp--preset--color--danger-dark);
	--splms-danger-light: var(--wp--preset--color--danger-light);

	/* Gray Scale Mappings */
	--splms-gray-900: var(--wp--preset--color--gray-900);
	--splms-gray-800: var(--wp--preset--color--gray-800);
	--splms-gray-700: var(--wp--preset--color--gray-700);
	--splms-gray-600: var(--wp--preset--color--gray-600);
	--splms-gray-500: var(--wp--preset--color--gray-500);
	--splms-gray-400: var(--wp--preset--color--gray-400);
	--splms-gray-300: var(--wp--preset--color--gray-300);
	--splms-gray-200: var(--wp--preset--color--gray-200);
	--splms-gray-100: var(--wp--preset--color--gray-100);
	--splms-gray-50: var(--wp--preset--color--gray-50);

	/* Spacing Mappings */
	--splms-spacing-1: 0.25rem;
	--splms-spacing-2: 0.5rem;
	--splms-spacing-3: 0.75rem;
	--splms-spacing-4: 1rem;
	--splms-spacing-5: 1.25rem;
	--splms-spacing-6: 1.5rem;
	--splms-spacing-7: 1.75rem;
	--splms-spacing-8: 2rem;
	--splms-spacing-10: 2.5rem;
	--splms-spacing-12: 3rem;
	--splms-spacing-16: 4rem;
	--splms-spacing-20: 5rem;
	--splms-spacing-24: 6rem;

	/* Typography Mappings */
	--splms-font-sm: var(--wp--preset--font-size--small);
	--splms-font-base: var(--wp--preset--font-size--base);
	--splms-font-lg: var(--wp--preset--font-size--large);
	--splms-font-xl: var(--wp--preset--font-size--xl);
	--splms-font-2xl: var(--wp--preset--font-size--2xl);
	--splms-font-3xl: var(--wp--preset--font-size--3xl);
	--splms-font-4xl: var(--wp--preset--font-size--4xl);

	/* Font Weight Mappings */
	--splms-font-weight-normal: 400;
	--splms-font-weight-medium: 500;
	--splms-font-weight-semibold: 600;
	--splms-font-weight-bold: 700;

	/* Border Radius Mappings */
	--splms-border-radius-sm: 0.125rem;
	--splms-border-radius: 0.25rem;
	--splms-border-radius-md: 0.375rem;
	--splms-border-radius-lg: 0.5rem;
	--splms-border-radius-xl: 0.75rem;
	--splms-border-radius-2xl: 1rem;
	--splms-border-radius-full: 9999px;

	/* Shadow Mappings */
	--splms-shadow-sm: var(--wp--preset--shadow--sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
	--splms-shadow: var(--wp--preset--shadow--base, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));
	--splms-shadow-md: var(--wp--preset--shadow--md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
	--splms-shadow-lg: var(--wp--preset--shadow--lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
	--splms-shadow-xl: var(--wp--preset--shadow--xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));

	/* Z-index Scale */
	--splms-z-index-dropdown: 1000;
	--splms-z-index-sticky: 1020;
	--splms-z-index-fixed: 1030;
	--splms-z-index-modal-backdrop: 1040;
	--splms-z-index-modal: 1050;
	--splms-z-index-popover: 1060;
	--splms-z-index-tooltip: 1070;
}

/* Skip Link */
.skip-link-container {
	position: absolute;
	top: -100vh;
	left: 0;
	z-index: 999999;
}

.skip-link:focus {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--white, #ffffff);
	padding: 0.75rem 1rem;
	border-radius: 0.25rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	z-index: 999999;
}

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

.skip-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--white, #ffffff);
	outline-offset: 2px;
}

/* WordPress Flexbox Layout Classes - Missing Core Support */
.is-layout-flex {
	display: flex;
}

.is-content-justification-space-between {
	justify-content: space-between;
}

.is-content-justification-center {
	justify-content: center;
}

.is-content-justification-left {
	justify-content: flex-start;
}

.is-content-justification-right {
	justify-content: flex-end;
}

.is-vertical-alignment-center {
	align-items: center;
}

.is-vertical-alignment-top {
	align-items: flex-start;
}

.is-vertical-alignment-bottom {
	align-items: flex-end;
}

.wp-block-group.is-layout-flex,
.wp-block-buttons.is-layout-flex,
.site-footer .wp-block-navigation__container.wp-block-navigation {
	gap: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------
   Typography — Lists
------------------------------------------------------- */

/* Unordered Lists */
.entry-content ul,
.wp-block-post-content ul,
.wp-site-blocks ul:not([class]) {
	margin-left: 1.5rem;
	padding-left: 0.5rem;
	list-style-type: disc;
}

.entry-content ul ul,
.wp-block-post-content ul ul {
	list-style-type: circle;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.entry-content ul ul ul,
.wp-block-post-content ul ul ul {
	list-style-type: square;
}

/* Ordered Lists */
.entry-content ol,
.wp-block-post-content ol,
.wp-site-blocks ol:not([class]) {
	margin-left: 1.5rem;
	padding-left: 0.5rem;
	list-style-type: decimal;
}

.entry-content ol ol,
.wp-block-post-content ol ol {
	list-style-type: lower-alpha;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.entry-content ol ol ol,
.wp-block-post-content ol ol ol {
	list-style-type: lower-roman;
}

/* Shared li spacing */
.entry-content li,
.wp-block-post-content li {
	margin-bottom: 0.375rem;
	line-height: 1.7;
}

/* -------------------------------------------------------
   Typography — Blockquote
------------------------------------------------------- */

.entry-content blockquote,
.wp-block-post-content blockquote,
.wp-block-quote {
	border-left: 4px solid var(--wp--preset--color--primary, #1e3a8a);
	margin-left: 0;
	padding: 1rem 1.5rem;
	background-color: var(--wp--preset--color--gray-50, #f9fafb);
	border-radius: 0 6px 6px 0;
	font-style: italic;
	color: var(--wp--preset--color--gray-700, #374151);
}

.wp-block-quote cite,
.entry-content blockquote cite {
	display: block;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--gray-500, #6b7280);
	margin-top: 0.5rem;
}

/* -------------------------------------------------------
   Typography — Code & Pre
------------------------------------------------------- */

code,
.entry-content code {
	background-color: var(--wp--preset--color--gray-100, #f3f4f6);
	color: var(--wp--preset--color--danger, #dc2626);
	padding: 0.15em 0.45em;
	border-radius: 4px;
	font-size: 0.875em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

pre,
.wp-block-code {
	background-color: var(--wp--preset--color--gray-900, #111827);
	color: var(--wp--preset--color--gray-100, #f3f4f6);
	padding: 1.25rem 1.5rem;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.7;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
}

/* -------------------------------------------------------
   Typography — Table
------------------------------------------------------- */

.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
}

.entry-content th,
.wp-block-table th {
	background-color: var(--wp--preset--color--gray-100, #f3f4f6);
	font-weight: 600;
	text-align: left;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--gray-200, #e5e7eb);
}

.entry-content td,
.wp-block-table td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--gray-200, #e5e7eb);
	vertical-align: top;
}

.entry-content tr:nth-child(even),
.wp-block-table tr:nth-child(even) {
	background-color: var(--wp--preset--color--gray-50, #f9fafb);
}

/* -------------------------------------------------------
   Typography — Horizontal Rule
------------------------------------------------------- */

hr,
.wp-block-separator {
	border: none;
	border-top: 2px solid var(--wp--preset--color--gray-200, #e5e7eb);
	margin: 2rem 0;
}