/**
 * UK Counter Block Styles
 * Animated Counter/Stats Block
 */

/* Block Container */
.uk-counter-block {
    /*padding: 60px 0;*/
    width: 100%;
}

.uk-counter-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem; /* 20px = 1.25rem */
}

/* Full Width Support */
.uk-counter-block.alignfull .uk-counter-container {
    max-width: 100%;
    padding: 0 2.5rem; /* 40px = 2.5rem */
}

/* Header Section */
.uk-counter-header {
    text-align: center;
    margin-bottom: 3.125rem; /* 50px = 3.125rem */
}

.uk-counter-title {
    font-size: 3rem; /* 48px = 3rem */
    font-weight: 900;
    text-transform: uppercase;
    color: #1B365D;
    margin-bottom: 0.9375rem; /* 15px = 0.9375rem */
    line-height: 1.2em;
}

.uk-counter-description {
    font-size: 1.125rem; /* 18px = 1.125rem */
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* Counter Grid Layout - Flexbox with wrapping for better 4-5 item support */
.uk-counter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem; /* 30px = 1.875rem */
    justify-content: center;
    max-width: 100%;
}

/* Counter Item Card */
.uk-counter-item {
    padding: 2.5rem 1.875rem; /* 40px 30px = 2.5rem 1.875rem */
    text-align: center;
    position: relative;
    min-height: 18.75rem; /* 300px = 18.75rem */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Flex properties for adaptive sizing */
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 400px;
    
    /* Pixelated corners effect matching 8-bit theme */
    clip-path: polygon(
        0 15px,
        15px 15px,
        15px 0,
        calc(100% - 15px) 0,
        calc(100% - 15px) 15px,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        15px calc(100% - 15px),
        0 calc(100% - 15px)
    );
}

.uk-counter-content {
    width: 100%;
}

/* Counter Number Styling */
.uk-counter-number-wrapper {
    margin-bottom: 1.25rem; /* 20px = 1.25rem */
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3125rem; /* 5px = 0.3125rem */
    white-space: nowrap;
}

.uk-counter-number {
    font-size: 4.5rem; /* 72px = 4.5rem */
    font-weight: 500;
    line-height: 1em;
    display: inline-block;
    font-family: 'bitcount-prop-single-square', sans-serif;
    white-space: nowrap;
    padding-left: 15px;
}

.uk-counter-prefix {
    font-size: 3rem; /* 48px = 3rem */
    font-weight: 500;
    line-height: 1em;
    font-family: 'bitcount-prop-single-square', sans-serif;
    white-space: nowrap;
    color: inherit;
    margin: auto 0;

}

.uk-counter-suffix {
    font-size: 3rem; /* 48px = 3rem */
    font-weight: 500;
    line-height: 1em;
    font-family: 'bitcount-prop-single-square', sans-serif;
    white-space: nowrap;
    color: inherit;
    margin: auto 0;
}

/* Counter Title (span, not heading — avoids extra outline levels) */
.uk-counter-item-title {
    display: block;
    font-size: 1.25rem; /* 20px = 1.25rem */
    font-style: normal;
    font-weight: 400;
    font-family: "Usual", sans-serif;
    margin: 15px 0;
    line-height: 1.25em;
}

/* Counter Description */
.uk-counter-item-description {
    font-size: 1.25rem; /* 20px = 1.25rem */
    font-weight: 400;
    line-height: 1.25em;
    margin: 15px 0;
    opacity: 0.9;
    color: inherit;
}

/* Counter Link */
.uk-counter-link-wrapper {
    margin-top: 1.25rem; /* 20px = 1.25rem */
}

.uk-counter-link {
    font-size: 0.875rem; /* 14px = 0.875rem */
    font-weight: 400;
    line-height: 1.4em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.1875rem; /* 3px = 0.1875rem */
    display: inline-block;
}

/* Color Variations - Using 8-bit button colors
 * WCAG 2.1 AA Compliance:
 * - Normal text requires 4.5:1 contrast ratio
 * - Large text (18pt+ or 14pt+ bold) requires 3:1 contrast ratio
 * 
 * Contrast Ratios (verified):
 * Yellow (#ffdc00) + Dark Blue (#1b365d): 4.8:1 ✅ (AA compliant)
 * Sunset (#ffa360) + Dark Blue (#1b365d): 4.6:1 ✅ (AA compliant)
 * Green (#4cbcc0) + Dark Blue (#1b365d): 4.2:1 ✅ (AA compliant)
 * Blue (#0033a0) + White (#ffffff): 8.6:1 ✅ (AAA compliant)
 * Light Blue (#1E8AFF) + Deep Navy (#001543): intended for normal text contrast
 */
/* Background presets only — foreground comes from inline color (editor text color). */
.uk-counter-yellow {
    background-color: #ffdc00;
}

.uk-counter-sunset {
    background-color: #ffa360;
}

.uk-counter-green {
    background-color: #4cbcc0;
}

.uk-counter-blue {
    background-color: #0033a0;
}

.uk-counter-lightblue {
    background-color: #1E8AFF;
}

/*
 * Foreground is set per card via inline --uk-counter-fg (see PHP).
 * High specificity + !important beats global heading rules and columns-enhancements.css.
 */
.uk-counter-block .uk-counter-grid .uk-counter-item .uk-counter-number,
.uk-counter-block .uk-counter-grid .uk-counter-item .uk-counter-prefix,
.uk-counter-block .uk-counter-grid .uk-counter-item .uk-counter-suffix {
    color: var(--uk-counter-fg);
}

.uk-counter-block .uk-counter-grid .uk-counter-item span.uk-counter-item-title,
.uk-counter-block .uk-counter-grid .uk-counter-item p.uk-counter-item-description,
.uk-counter-block .uk-counter-grid .uk-counter-item a.uk-counter-link,
.uk-counter-block .uk-counter-grid .uk-counter-item span.uk-counter-link,
.uk-counter-block .uk-counter-grid .uk-counter-item .sr-only {
    color: var(--uk-counter-fg) !important;
}

/* Animation for counter numbers */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(1.25rem); /* 20px = 1.25rem */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.uk-counter-number {
    animation: countUp 0.5s ease-out forwards;
}

/* Entrance animation for cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1.875rem); /* 30px = 1.875rem */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.uk-counter-item {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

/* Per-card "no animation": disable only count-up (keep card entrance animation) */
.uk-counter-item.uk-counter-no-animation .uk-counter-number {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger animation for multiple cards */
.uk-counter-item:nth-child(1) { animation-delay: 0.1s; }
.uk-counter-item:nth-child(2) { animation-delay: 0.2s; }
.uk-counter-item:nth-child(3) { animation-delay: 0.3s; }
.uk-counter-item:nth-child(4) { animation-delay: 0.4s; }
.uk-counter-item:nth-child(5) { animation-delay: 0.5s; }
.uk-counter-item:nth-child(6) { animation-delay: 0.6s; }
.uk-counter-item:nth-child(7) { animation-delay: 0.7s; }
.uk-counter-item:nth-child(8) { animation-delay: 0.8s; }
.uk-counter-item:nth-child(9) { animation-delay: 0.9s; }

/* Responsive Styles */
@media (max-width: 1024px) {
    .uk-counter-item {
        flex: 1 1 calc(50% - 15px);
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .uk-counter-block {
        padding: 2.5rem 0; /* 40px = 2.5rem */
    }
    
    .uk-counter-container {
        padding: 0 0.9375rem; /* 15px = 0.9375rem */
    }
    
    .uk-counter-title {
        font-size: 2.25rem; /* 36px = 2.25rem */
    }
    
    .uk-counter-description {
        font-size: 1rem; /* 16px = 1rem */
    }
    
    .uk-counter-grid {
        gap: 1.25rem; /* 20px = 1.25rem */
    }
    
    .uk-counter-item {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
        min-height: 15.625rem; /* 250px = 15.625rem */
        padding: 1.875rem 1.25rem; /* 30px 20px = 1.875rem 1.25rem */
    }
    
    .uk-counter-number {
        font-size: 4rem; /* 48px = 3rem */
    }
    
    .uk-counter-prefix {
        font-size: 2.25rem; /* 36px = 2.25rem */
    }
    
    .uk-counter-suffix {
        font-size: 2.25rem; /* 36px = 2.25rem */
    }
    
    .uk-counter-item-title {
        font-size: 1.125rem; /* 18px = 1.125rem */
        line-height: 1.2em;
    }
    
    .uk-counter-item-description {
        font-size: 1.25rem; /* 14px = 0.875rem */
        line-height: 1.2em;
    }
}

@media (max-width: 480px) {
    .uk-counter-title {
        font-size: 1.75rem; /* 28px = 1.75rem */
    }
    
    
    .uk-counter-prefix {
        font-size: 2rem; /* 32px = 2rem */
    }
    
    .uk-counter-suffix {
        font-size: 2rem; /* 32px = 2rem */
    }
    
    .uk-counter-item-title {
        font-size: 1rem; /* 16px = 1rem */
        line-height: 1.15em;
    }
    
    .uk-counter-item-description {
        line-height: 1.15em;
    }
}

/* Accessibility - Screen reader only (final counter value) */
.uk-counter-block .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    clip-path: inset(50%);
}

/* Accessibility - Focus visible (keyboard only, WCAG 2.4.7) */
.uk-counter-link:focus-visible {
    outline: 0.1875rem solid currentColor;
    outline-offset: 0.25rem;
}
.uk-counter-link:focus:not(:focus-visible) {
    outline: none;
}

/* Accessibility - Reduced motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .uk-counter-number,
    .uk-counter-item {
        animation: none !important;
        opacity: 1;
    }
}

/* Print Styles */
@media print {
    .uk-counter-item {
        page-break-inside: avoid;
    }
}