/* UK Side by Side Block Styles */

/* Accessibility: Screen reader only class */
.uk-side-by-side-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%);
}

/* Button text - visible to all users */
.uk-side-by-side-block .btn .btn-text {
    position: relative;
    z-index: 2;
}

.uk-side-by-side-block {
    margin: 2rem 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.uk-side-by-side-container {
    max-width: 100%;
    padding: 0;
}

.uk-side-by-side-block .row {
    min-height: 25rem; /* 400px */
    display: flex;
    align-items: stretch; /* both columns match height (taller content sets height) */
}

.uk-side-by-side-block .col-md-6 {
    display: flex;
    flex: 1;
    padding: 0 !important;
}

/* Side Section Styles */
.uk-side-section {
    padding: 3rem 2rem;
    min-height: 25rem; /* 400px */
    display: flex;
    align-items: flex-start; /* images and content align at top in both columns */
    justify-content: center; /* horizontal center content within section */
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Background Pattern Styles */
.uk-side-section.bg-pattern-stars {
    background-image: url('./assets/pixel-overlay.png');
    background-repeat: repeat;
    background-size: cover;
    background-position: 0 0;
}

.uk-side-section.bg-pattern-dashed {
    background-image: url('./assets/dashed-bg-12percent.png');
    background-repeat: repeat;
    background-size: cover;
    background-position: 0 0;
}

.uk-side-content {
    width: 25rem; /* 400px */
    max-width: 100%;
    z-index: 2;
    position: relative;
    margin: 0; /* no auto centering so content stays at top */
}

/* Background Colors */
.uk-side-section.bg-yellow {
    background-color: #FFDC00;
    color: #333;
}

.uk-side-section.bg-green,
.uk-side-section.bg-teal {
    background-color: #4cbcc0;
    color: #fff;
}

.uk-side-section.bg-sunset,
.uk-side-section.bg-peach {
    background-color: #ffa360;
    color: #fff;
}

.uk-side-section.bg-light-blue {
    background-color: #1e8aff;
    color: #fff;
}

.uk-side-section.bg-dark-blue {
    background-color: #1b365d;
    color: #fff;
}

/* Image Styles */
.uk-side-image {
    margin-bottom: 1.5rem;
    text-align: center;
}

.uk-side-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem; /* 8px */
}

/* Title Styles */
/* Accessibility: #1B365D on light backgrounds = WCAG 2.1 AA compliant */
.uk-side-title {
    margin-bottom: 1.5rem;
    font-size: 2.5rem; /* 40px */
    font-style: normal;
    font-weight: 900;
    line-height: 1em; /* 100% = 40px */
    text-transform: uppercase;
    font-family: "alternate-gothic-atf", sans-serif;
}

.uk-side-section.bg-yellow .uk-side-title {
    color: #1B365D;
}

.uk-side-section.bg-green .uk-side-title,
.uk-side-section.bg-teal .uk-side-title,
.uk-side-section.bg-sunset .uk-side-title,
.uk-side-section.bg-peach .uk-side-title {
    color: #1B365D;
}

.uk-side-section.bg-light-blue .uk-side-title,
.uk-side-section.bg-dark-blue .uk-side-title {
    color: #ffffff;
}

/* Content Styles */
.uk-side-text {
    padding-top: 1.25rem; /* 20px */
    padding-bottom: 1.25rem; /* 20px */
    font-size: 1.0625em; /* 17px */
    font-style: normal;
    font-weight: 400;
    line-height: 1.6em; /* normal = 1.6em */
}

.uk-side-section.bg-yellow .uk-side-text {
    color: #1B365D;
}

.uk-side-section.bg-green .uk-side-text,
.uk-side-section.bg-teal .uk-side-text,
.uk-side-section.bg-sunset .uk-side-text,
.uk-side-section.bg-peach .uk-side-text {
    color: #1B365D;
}

.uk-side-section.bg-light-blue .uk-side-text,
.uk-side-section.bg-dark-blue .uk-side-text {
    color: #ffffff;
}

/* Button Styles - Using 8-bit button system from main.scss */
.uk-side-button {
    margin-top: auto;
}

/* Let the 8-bit button styles from main.scss handle all button styling */

/* Responsive Design */
@media (max-width: 767.98px) {
    .uk-side-by-side-block .row {
        min-height: auto;
        flex-direction: column;
    }
    
    .uk-side-by-side-block .col-md-6 {
        flex: none;
        width: 100%;
    }
    
    .uk-side-section {
        padding: 2rem 1.5rem;
        min-height: 18.75rem; /* 300px */
    }
    
    .uk-side-title {
        font-size: 1.5em;
    }
    
    .uk-side-text {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .uk-side-by-side-block .row {
        flex-direction: column;
    }
    
    .uk-side-by-side-block .col-md-6 {
        flex: none;
        width: 100%;
    }
    
    .uk-side-section {
        padding: 1.5rem 1rem;
        min-height: 15.625rem; /* 250px */
    }
    
    .uk-side-title {
        font-size: 2.5em;
    }
    
    /* 8-bit button responsive styles handled by main.scss */
}

/* Accessibility - 8-bit button accessibility handled by main.scss */

/* Enhanced focus states for links and buttons */
.uk-side-by-side-block a:focus {
    outline: 0.1875rem solid #FFDC00; /* 3px */
    outline-offset: 0.125rem; /* 2px */
    box-shadow: 0 0 0 0.1875rem rgba(255, 220, 0, 0.5), 0 0 0 0.3125rem rgba(0, 51, 160, 0.3); /* 3px, 5px */
}

.uk-side-by-side-block a:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.uk-side-by-side-block a:focus-visible {
    outline: 0.1875rem solid #FFDC00; /* 3px */
    outline-offset: 0.125rem; /* 2px */
    box-shadow: 0 0 0 0.1875rem rgba(255, 220, 0, 0.5), 0 0 0 0.3125rem rgba(0, 51, 160, 0.3); /* 3px, 5px */
}

/* Reduced motion support (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .uk-side-by-side-block,
    .uk-side-by-side-block * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support (WCAG 1.4.11) */
@media (prefers-contrast: high) {
    .uk-side-by-side-block a:focus-visible {
        outline: 0.1875rem solid Highlight; /* 3px */
        outline-offset: 0.1875rem;
        box-shadow: none;
    }
    
    .uk-side-by-side-block .uk-side-title {
        text-shadow: none;
    }
}