/* ===================================
   Utility Classes
   Purpose: Reusable utilities for common inline style patterns
   Migration: Part of inline CSS elimination project (Feb 2026)
   =================================== */

/* ===================================
   Display Utilities
   =================================== */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

/* ===================================
   Text Color Utilities
   =================================== */
.text-cyan {
    color: var(--cyan) !important;
}

.text-purple {
    color: var(--purple) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-red {
    color: #ef4444 !important;
}

.text-green {
    color: #22c55e !important;
}

.text-orange {
    color: #f97316 !important;
}

.text-orange-soft {
    color: rgba(249, 115, 22, 0.7) !important;
}

/* ===================================
   Text Alignment Utilities
   =================================== */
.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* ===================================
   Font Family Utilities
   =================================== */
.font-mono {
    font-family: var(--font-mono) !important;
}

.font-display {
    font-family: var(--font-display) !important;
}

/* ===================================
   Font Size Utilities
   =================================== */
.fs-xs {
    font-size: 0.7rem !important;
}

.fs-sm {
    font-size: 0.8rem !important;
}

.fs-md {
    font-size: 0.85rem !important;
}

.fs-base {
    font-size: 0.9rem !important;
}

.fs-lg {
    font-size: 0.95rem !important;
}

.fs-xl {
    font-size: 1.15rem !important;
}

.fs-2xl {
    font-size: 1.25rem !important;
}

/* ===================================
   Font Weight Utilities
   =================================== */
.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

/* ===================================
   Letter Spacing Utilities
   =================================== */
.letter-spacing-2 {
    letter-spacing: 2px !important;
}

.letter-spacing-1 {
    letter-spacing: 1px !important;
}

/* ===================================
   Spacing - Margin Utilities
   =================================== */
.m-0 {
    margin: 0 !important;
}

.m-auto {
    margin: 0 auto !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-1-5 {
    margin-top: 1.5rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mb-0-25 {
    margin-bottom: 0.25rem !important;
}

.mb-0-5 {
    margin-bottom: 0.5rem !important;
}

.mb-0-75 {
    margin-bottom: 0.75rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mb-1-5 {
    margin-bottom: 1.5rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.my-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

/* ===================================
   Spacing - Padding Utilities
   =================================== */
.p-0 {
    padding: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.p-0-1-0-4 {
    padding: 0.1rem 0.4rem !important;
}

/* ===================================
   Layout Utilities
   =================================== */
.cursor-pointer {
    cursor: pointer !important;
}

.max-w-600 {
    max-width: 600px !important;
}

.max-w-800 {
    max-width: 800px !important;
}

.position-absolute {
    position: absolute !important;
}

.position-relative {
    position: relative !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* ===================================
   Link Utilities
   =================================== */
.link-cyan {
    color: var(--cyan) !important;
    text-decoration: underline !important;
}

.link-cyan:hover {
    color: var(--cyan-light) !important;
}

/* ===================================
   Text Transform Utilities
   =================================== */
.text-uppercase {
    text-transform: uppercase !important;
}

/* ===================================
   Background Utilities
   =================================== */
.bg-transparent {
    background: transparent !important;
}

/* ===================================
   Border Utilities
   =================================== */
.border-radius-3 {
    border-radius: 3px !important;
}

/* ===================================
   Animation Utilities
   =================================== */
.anim-pulse {
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===================================
   YouTube Facade & Video Utilities
   =================================== */
.yt-facade-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

.yt-facade-picture {
    position: absolute;
    inset: 0;
}

.yt-facade-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yt-facade-play-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-facade-play-svg {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.yt-facade-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 30%);
    pointer-events: none;
}

/* ===================================
   Syllabus Utilities (SCH Lite page)
   =================================== */
.part-label-gradient-pink-purple {
    background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
}

.part-title-gradient-text {
    background-image: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.syllabus-item-border-pink {
    border-left-color: var(--pink);
}

/* ===================================
   Highlight Glow — Animated underline accent
   Usage: <span class="hl">important phrase</span>
   Variants: .hl--purple (purple-cyan gradient)
   Pairs with: body copy paragraphs, subtitles, section descriptions
   =================================== */
.hl {
    position: relative;
    display: inline;
    color: inherit;
    white-space: normal;
}

.hl::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--accent-secondary) 0%,
        var(--accent-secondary-strong) 50%,
        var(--accent-secondary) 100%
    );
    background-size: 200% 100%;
    border-radius: 50% 50% 0 0 / 3px 3px 0 0;
    animation: hlSlide 3s linear infinite, hlGlow 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hlSlide {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes hlGlow {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; }
}

/* Purple-to-cyan variant */
.hl--purple::after {
    background: linear-gradient(
        90deg,
        var(--accent-primary) 0%,
        var(--accent-secondary) 50%,
        var(--accent-primary) 100%
    );
    background-size: 200% 100%;
}

@keyframes hlGlowPurple {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; }
}

.hl--purple {
    animation: none;
}

.hl--purple::after {
    animation: hlSlide 3s linear infinite, hlGlowPurple 2.5s ease-in-out infinite;
}