/*
Theme Name: Ites LMS - Modern E-Learning
Theme URI: https://ites.web.id
Author: Senior WP Developer & UI/UX Expert
Author URI: https://ites.web.id
Description: Tema WordPress Learning Management System (LMS) modern, modular, dan berkinerja tinggi yang dirancang khusus untuk platform ites.web.id dengan rujukan UI/UX MySkill.id. Dilengkapi palette warna ungu muda elegan, distraction-free Focus Mode, kustom dasbor siswa & instruktur, integrasi penuh Tutor LMS / LearnDash / Native CPT, dan pengaturan lengkap di WordPress Customizer.
Version: 1.0.0
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ites-lms
Tags: education, e-learning, lms, responsive-layout, custom-colors, custom-header, custom-menu, featured-images, full-width-template, theme-options

--------------------------------------------------------------
TABLE OF CONTENTS:
1. CSS Variables & Theme Color Palette (Ungu Muda Elegan)
2. Base Reset & Typography
3. Layout & Grid Utility Classes
4. Header & Top Announcement Bar
5. Buttons & Badges
6. Hero Section & Filter Pills (MySkill Style)
7. Course Cards & Grid
8. Course Details & Sticky Enroll CTA
9. Curriculum Accordion
10. Dashboard & Student Area
11. Footer Components
12. Accessibility & Responsive Utilities
--------------------------------------------------------------
*/

:root {
  /* Primary Brand Palette: Ungu Muda Elegan */
  --ites-primary: #7c3aed;          /* Elegant Violet Purple */
  --ites-primary-hover: #6d28d9;    /* Deeper Purple */
  --ites-primary-light: #f3f0ff;    /* Soft Lavender Background */
  --ites-primary-subtle: #ede9fe;   /* Light Violet Border/Pill */
  --ites-primary-dark: #4c1d95;     /* Dark Violet Header/Accent */

  /* Secondary & Accents */
  --ites-secondary: #06b6d4;        /* Cyan accent */
  --ites-accent: #f59e0b;           /* Amber rating star / badge */
  --ites-accent-hover: #d97706;
  --ites-success: #10b981;          /* Green progress / completed */
  --ites-warning: #f59e0b;
  --ites-danger: #ef4444;

  /* Neutral & Dark Palette */
  --ites-slate-900: #0f172a;        /* Deep headings */
  --ites-slate-800: #1e293b;
  --ites-slate-700: #334155;        /* Body text */
  --ites-slate-500: #64748b;        /* Muted captions */
  --ites-slate-400: #94a3b8;
  --ites-slate-200: #e2e8f0;        /* Borders */
  --ites-slate-100: #f1f5f9;        /* Card bg */
  --ites-slate-50: #f8fafc;         /* Lightest background */
  --ites-white: #ffffff;

  /* Elevation & Shadows */
  --ites-shadow-sm: 0 1px 2px 0 rgba(124, 58, 237, 0.05);
  --ites-shadow-md: 0 4px 6px -1px rgba(124, 58, 237, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --ites-shadow-lg: 0 10px 15px -3px rgba(124, 58, 237, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --ites-shadow-xl: 0 20px 25px -5px rgba(124, 58, 237, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  /* Radius */
  --ites-radius-sm: 6px;
  --ites-radius-md: 10px;
  --ites-radius-lg: 16px;
  --ites-radius-full: 9999px;

  /* Layout */
  --ites-container-width: 1240px;
  --ites-header-height: 74px;
  --ites-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset & Core Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ites-slate-700);
  background-color: var(--ites-slate-50);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

a {
  color: var(--ites-primary);
  text-decoration: none;
  transition: var(--ites-transition);
}

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

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

h1, h2, h3, h4, h5, h6 {
  color: var(--ites-slate-900);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1rem;
}

/* Container */
.ites-container {
  width: 100%;
  max-width: var(--ites-container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.ites-container-fluid {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ites-primary);
  outline-offset: 2px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--ites-white);
  border-radius: var(--ites-radius-sm);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--ites-slate-900);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}