/*
 * BOLESER GLOBAL CSS
 * Design system: container, typography, utilities, section spacing
 * All CSS variables defined in style.css (loaded first)
 */

/* =====================================================================
   CONTAINER
   ===================================================================== */
.boleser-container,
.bl-container {
    width: 100%;
    max-width: var(--bl-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* =====================================================================
   SECTION SPACING SYSTEM
   Apply these classes to Elementor sections via Advanced > CSS Classes
   bl-section-light  — white bg
   bl-section-gray   — light gray bg
   bl-section-dark   — dark navy bg
   ===================================================================== */
.bl-section-light  { background-color: var(--bl-white); }
.bl-section-gray   { background-color: var(--bl-bg); }
.bl-section-dark   { background-color: var(--bl-dark); color: var(--bl-white); }
.bl-section-dark-2 { background-color: var(--bl-dark-2); color: var(--bl-white); }

/* Standard section vertical padding applied via Elementor padding field:
   Desktop:  80px top + 80px bottom
   Tablet:   60px top + 60px bottom
   Mobile:   40px top + 40px bottom
*/

/* =====================================================================
   SECTION HEADER (reusable heading block above any section grid)
   ===================================================================== */
.boleser-section-header {
    text-align: center;
    margin-bottom: 48px;
}
.boleser-section-header h2 {
    font-size: var(--bl-text-4xl);
    font-weight: 700;
    color: var(--bl-text-primary);
    margin-bottom: 12px;
}
.boleser-section-header p {
    font-size: var(--bl-text-lg);
    color: var(--bl-text-secondary);
    max-width: 560px;
    margin: 0 auto;
}
.bl-section-dark .boleser-section-header h2,
.bl-section-dark .boleser-section-header p { color: var(--bl-white); }

.boleser-section-link {
    font-size: var(--bl-text-sm);
    font-weight: 600;
    color: var(--bl-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--bl-transition-fast);
}
.boleser-section-link:hover { gap: 8px; }

/* =====================================================================
   TYPOGRAPHY UTILITIES
   ===================================================================== */
.bl-text-primary   { color: var(--bl-text-primary) !important; }
.bl-text-secondary { color: var(--bl-text-secondary) !important; }
.bl-text-muted     { color: var(--bl-text-muted) !important; }
.bl-text-white     { color: var(--bl-white) !important; }
.bl-text-orange    { color: var(--bl-primary) !important; }

.bl-fw-400 { font-weight: 400 !important; }
.bl-fw-500 { font-weight: 500 !important; }
.bl-fw-600 { font-weight: 600 !important; }
.bl-fw-700 { font-weight: 700 !important; }
.bl-fw-800 { font-weight: 800 !important; }

/* =====================================================================
   HIGHLIGHT SPAN (for orange text in headings, like design)
   ===================================================================== */
.bl-highlight { color: var(--bl-primary); }

/* =====================================================================
   BADGE / TAG
   ===================================================================== */
.bl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--bl-radius-full);
    font-size: var(--bl-text-xs);
    font-weight: 600;
    line-height: 1;
}
.bl-badge-primary     { background: var(--bl-primary-light); color: var(--bl-primary); }
.bl-badge-green       { background: var(--bl-green-light); color: var(--bl-green); }
.bl-badge-blue        { background: var(--bl-blue-light); color: var(--bl-blue); }
.bl-badge-purple      { background: var(--bl-purple-light); color: var(--bl-purple); }
.bl-badge-ai          { background: linear-gradient(135deg, var(--bl-purple-light), #EDE9FE); color: var(--bl-purple); border: 1px solid #DDD6FE; }

/* =====================================================================
   DIVIDER
   ===================================================================== */
.bl-divider {
    height: 1px;
    background: var(--bl-border);
    border: none;
    margin: 0;
}

/* =====================================================================
   SKELETON LOADER (for async content)
   ===================================================================== */
.bl-skeleton {
    background: linear-gradient(90deg, var(--bl-bg-2) 25%, #eee 50%, var(--bl-bg-2) 75%);
    background-size: 200% 100%;
    animation: blSkeleton 1.5s infinite;
    border-radius: var(--bl-radius);
}
@keyframes blSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================================
   SCROLL REVEAL ANIMATION CLASSES
   JS adds .bl-revealed when element enters viewport
   ===================================================================== */
.bl-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.bl-fade-up.bl-revealed {
    opacity: 1;
    transform: translateY(0);
}
.bl-fade-up:nth-child(2) { transition-delay: 0.1s; }
.bl-fade-up:nth-child(3) { transition-delay: 0.2s; }
.bl-fade-up:nth-child(4) { transition-delay: 0.3s; }
.bl-fade-up:nth-child(5) { transition-delay: 0.4s; }

/* =====================================================================
   RESPONSIVE UTILITIES
   ===================================================================== */
@media (max-width: 1024px) {
    .boleser-section-header h2 { font-size: var(--bl-text-3xl); }
}
@media (max-width: 768px) {
    .boleser-section-header { margin-bottom: 32px; }
    .boleser-section-header h2 { font-size: var(--bl-text-2xl); }
    .boleser-section-header p { font-size: var(--bl-text-base); }
    .boleser-container, .bl-container { padding-left: 16px; padding-right: 16px; }
}