/* ========================================
   MAIN STYLES
   
   Note: CSS modules are now loaded directly via <link> tags in HTML
   for better performance (parallel loading instead of waterfall).
   
   Load order in HTML:
   1. colors.css - CSS variables and color system
   2. typography.css - Font styles and text formatting
   3. spacing.css - Margins, padding, and gaps
   4. layout.css - Grid, flexbox, and positioning
   5. components.css - Reusable component styles
   6. main.css - Additional global styles (this file)
   ======================================== */

/* ========================================
   ADDITIONAL GLOBAL STYLES
   ======================================== */

/* Ensure smooth transitions */
* {
    transition-property: color, background-color, border-color, opacity, transform, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* Remove transitions from specific elements */
.no-transition,
.no-transition *,
video,
img {
    transition: none !important;
}

/* ========================================
   CONTENT ARTICLE STYLES
   ======================================== */

.content-article {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}

.content-article p {
    margin-bottom: 24px;
    font-family: var(--font-body);
    line-height: var(--leading-relaxed);
}

.content-article h2 {
    margin-top: 48px;
    margin-bottom: 24px;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
}

.content-article h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.content-article h4 {
    margin-top: 32px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.content-article h5 {
    margin-top: 32px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.content-article ul,
.content-article ol {
    margin-bottom: 24px;
    padding-left: 24px;
}

.content-article li {
    margin-bottom: 12px;
    line-height: var(--leading-relaxed);
}

.content-article blockquote {
    margin: 32px 0;
    padding: 24px;
    border-left: 4px solid var(--primary-blue);
    background: rgba(147, 197, 253, 0.1);
    border-radius: 8px;
    font-style: italic;
}

.content-article a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-blue);
    transition: all 0.2s ease;
}

.content-article a:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
}

.content-article strong {
    font-weight: 700;
    color: var(--text-primary);
}

.content-article em {
    font-style: italic;
}