/**
 * Additional styles for static colorblind test
 */

/* Shared "reading area" width — the centered content column used on large
   desktop screens by all three views (homepage, test, results). Single source
   of truth so they stay consistent; see the `min-width: 992px` block below. */
:root {
    --reading-width: 600px;
}

/* Homepage spacing fixes */

.title-img {
    background-image: url('../images/front/title_img.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 183px;
    width: 273px;
    margin: 0 auto 20px auto;
    display: block;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .title-img {
        background-image: url('../images/front/title_img@2x.png');
        background-size: 273px 183px;
    }
}

/* Ensure icon classes work when toggled from JS */
.ico-logo {
    background-image: url('../images/front/dalton_icon.png') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ico-logo {
        background-image: url('../images/front/dalton_icon@2x.png') !important;
    }
}

.ico-pause {
    background-image: url('../images/front/pause_icon.png') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ico-pause {
        background-image: url('../images/front/pause_icon@2x.png') !important;
    }
}

.ico-time {
    background-image: url('../images/front/time_icon.png') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ico-time {
        background-image: url('../images/front/time_icon@2x.png') !important;
    }
}

/* Test Content Styles - Original Design */
.my-slide {
    text-align: center;
}

.img-wrapper {
    /* Every plate PNG has a baked-in white background, so the image area reads
       as a white "card". On large screens it's capped to the same reading-width
       as the answer buttons and centered (see the min-width: 992px block), so
       its edges line up with the buttons; the grey-blue page shows on the sides. */
    background: #ffffff;
    display: block;
    height: 40vh;
    height: calc(100vh - 370px);
}

.test-img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

/* Original answer buttons styling */
.answers {
    padding: 0.625rem 0.625rem 0 0.625rem;
    list-style: none;
    margin: 0;
}

.answers li {
    margin-bottom: 0.625rem;
    padding-left: 4.375rem;
    list-style-type: none;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(18, 44, 79, 0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(18, 44, 79, 0.2);
    box-shadow: 0px 1px 2px 0px rgba(18, 44, 79, 0.2);
}

.test-btn {
    position: relative;
    padding-left: 1.5rem;
    text-align: left;
    display: inline-block;
    width: 100%;
    height: 4.375rem;
    line-height: 4.375rem;
    font-size: 1.25rem;
    background: #ffffff;
    color: #262b3c;
    font-weight: bold;
    text-decoration: none;
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border: none;
    cursor: pointer;
}

/* Letter badges (A, B, C) */
.test-btn:before {
    content: '';
    position: absolute;
    display: inline-block;
    height: 4.375rem;
    width: 4.375rem;
    margin-left: -5.875rem;
    top: 0;
    line-height: 4.375rem;
    font-size: 1.25rem;
    background: #7b77c9;
    text-align: center;
    color: #ffffff;
    border-right: 2px solid #7b77c9;
    border-bottom-left-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

/* Letter content */
.answers li:nth-child(1) .test-btn:before {
    content: 'A';
}

.answers li:nth-child(2) .test-btn:before {
    content: 'B';
}

.answers li:nth-child(3) .test-btn:before {
    content: 'C';
}

.answers li:nth-child(4) .test-btn:before {
    content: 'D';
}

/* Hover effects */
.test-btn:hover,
.test-btn:active,
.test-btn:focus {
    text-decoration: none;
    background: #7b77c9;
    color: #ffffff;
}

.test-btn:hover:before,
.test-btn:active:before,
.test-btn:focus:before {
    border-right: 2px solid #8d8ad5;
}

/* Progress bar animation */
#test-preloader .test-preloader-bg {
    background-color: #42d999 !important;
    transition: width 0.1s ease-out;
}

/* Flash animation for auto-answer */
@keyframes flash {
    0% { background-color: #ffffff; }
    50% { background-color: #ffeaa7; }
    100% { background-color: #ffffff; }
}

.animated.flash {
    animation: flash 0.5s infinite;
}

/* Fun Fact Slides Styling - Purple background with white text like original */
.fun-and-fact-content {
    background: transparent;
    padding: 0 30px;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    text-align: center;
}

.fun-and-fact-content .main-title {}

.fun-and-fact-content .main-title strong {}

.fun-and-fact-content .perex {}

.fun-and-fact-content .btn {}

.fun-and-fact-content .btn:hover {}

/* Responsive adjustments */
@media (max-width: 768px) {
    .answers {
        padding: 0.5rem;
    }
    
    .answers li {
        padding-left: 3.5rem;
        margin-bottom: 0.5rem;
    }
    
    .test-btn {
        font-size: 1.1rem;
        height: 3.75rem;
        line-height: 3.75rem;
        padding-left: 1rem;
    }
    
    .test-btn:before {
        width: 3.5rem;
        height: 3.75rem;
        line-height: 3.75rem;
        margin-left: -4.5rem;
        font-size: 1.1rem;
    }
    
    .img-wrapper {
        height: 30vh;
        height: calc(100vh - 320px);
    }
    
    .fun-and-fact-content {
        margin: 0;
        padding: 0 30px;
    }
    
    .fun-and-fact-content .main-title {
        font-size: 1.5rem;
    }
    
    .fun-and-fact-content .main-title strong {
        font-size: 1.875rem;
    }
}

.question-slide {
    max-width: 600px;
    margin: 0 auto;
}

.question-image {
    margin-bottom: 30px;
}

.question-image img {
    max-width: 300px;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.question-title {
    font-size: 1.8em;
    margin-bottom: 30px;
    color: #333;
    font-weight: 300;
}

.answers {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
    margin: 0 auto;
}

.answer-btn {
    padding: 15px 20px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #495057;
}

.answer-btn:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: translateY(-2px);
}

/* Fun Fact Styles */
.funfact-slide {
    max-width: 700px;
    margin: 0 auto;
}

.funfact-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.funfact-title {
    font-size: 1.6em;
    margin-bottom: 20px;
    line-height: 1.3;
}

.funfact-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
}

.funfact-text strong {
    color: #ffd700;
}

/* Result Styles */
.result-message {
    margin: 8px 0 0;
}

.result-type {
    font-size: 2.75rem;
    line-height: 3rem;
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    color: #313646;
    font-weight: 700;
}

.result-description {
    font-size: 1.3em;
    color: #666;
    margin-bottom: 30px;
}

.result-correct-line {
    font-size: 1.125rem;
    color: #666;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.result-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

.result-actions .btn {
    min-width: 200px;
}

/* Mobile Styles */
@media (max-width: 768px) {
    
    .question-image img {
        max-width: 250px;
        max-height: 250px;
    }
    
    .question-title {
        font-size: 1.4em;
    }
    
    .funfact-content {
        padding: 30px 20px;
    }
    
    .funfact-title {
        font-size: 1.3em;
    }
    
    .result-type {
        font-size: 2em;
    }
    
    .result-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .result-actions .btn {
        min-width: auto;
        width: 100%;
        max-width: 300px;
    }
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-content {
    animation: slideInUp 0.5s ease-out;
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Results page (match original) */
.line-behind {
    position: relative;
    z-index: 1;
    margin: 10px 0;
}
.line-behind:before {
    border-top: 2px solid #d4d9df;
    content: "";
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}
.line-behind span {
    font-size: 18px;
    color: #848ba3;
    background: #eef1f4;
    padding: 0 25px;
}

.result-img {
    background-image: url('../images/front/final_img.png');
    -webkit-background-size: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* front.css sets this absolute with min-height:444px — override both so the
       image sits in normal flow and its height matches the artwork (no offset/clip) */
    position: static;
    height: 344px;
    min-height: 0;
    width: 100%;
    margin: 32px 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .result-img {
        background-image: url('../images/front/final_img@2x.png');
    }
}

.result-row h1 {
    margin-bottom: 10px;
}

.store-btns {
    text-align: center;
}
.store-btns a { display: inline-block; }
.store-btns a img { width: 240px; height: auto; }
.store-btns a.apple-btn img { width: 215px; }

/* Center the result block vertically within the viewport, even spacing throughout */
#result-content {
    position: relative;
}

#result-content .container-fluid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 3.75rem);
    padding-top: 40px;
    padding-bottom: 40px;
    height: auto;
}

#result-content .line-behind {
    /* keep position:relative (from front.css) so the decorative rule centers on
       the line itself; just drop the old left/right shift that pushed it off-center */
    margin-top: 0;
}

#result-content .store-btns {
    position: relative;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .result-img {
        height: 220px;
        margin: 24px 0;
    }
    #result-content .container-fluid { padding-top: 24px; padding-bottom: 24px; }
    #result-content .store-btns { margin-top: 16px; }
}

/* Layout alignment to match original full-width answers */
#test-content .answers {
    display: block;
    max-width: none;
    margin: 0;
}

#test-content .answers li {
    width: auto;
}

/* On large desktop screens, full-width content looks stretched, so keep every
   view in the same centered reading-width column. Mobile/tablet (< 992px, the
   grid's `lg` breakpoint) keep the original full-width layout, where it's fine. */
@media (min-width: 992px) {
    /* Test: answer buttons */
    #test-content .answers {
        max-width: var(--reading-width);
        margin: 0 auto;
    }

    /* Test: the plate's white card, matched to the answer-button width so its
       edges line up with the buttons below (page background shows on the sides) */
    #test-content .img-wrapper {
        max-width: var(--reading-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* Homepage: title, intro text and the Get started button.
       `float: none` defeats the float-based grid so the auto margins can
       actually center the narrowed column (the row keeps text-align: center,
       so the contents stay centered too). `display: flow-root` re-establishes
       the block-formatting context the float used to provide, so the title's
       top margin is contained and the gap below the header is preserved
       (without it the margin collapses and the title hugs the top bar). */
    #homepage-content .col {
        float: none;
        display: flow-root;
        max-width: var(--reading-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* Results: heading, score, "can help you" divider and the store badges.
       The result illustration keeps its full width and centers itself, just
       like the test plate. */
    #result-content .col {
        float: none;
        display: flow-root;
        max-width: var(--reading-width);
        margin-left: auto;
        margin-right: auto;
    }
}