/* SPDX-FileCopyrightText: 2021 Ilmari Lauhakangas <ilmari.lauhakangas@libreoffice.org>
   SPDX-License-Identifier: CC0-1.0 */

.languages-packs-fallback {
    display: none;
}
.no-js .languages-langpack, .no-js .languages-helppack {
    display: none;
}
.no-js .card_container .button, .no-js .languages-packs-fallback {
    display: inline-block;
}
.has_selector_fallback {
    display: none;
}
#for_business {
    padding: var(--scale-5) var(--scale-7);
    margin: var(--scale-2) 0 var(--scale-2) 0;
}
#for_business h4 {
    font-size: var(--scale-9);
    margin: 0 0 var(--scale-2) 0;
}
.business_text, .choose_text, .version_desc {
    font-size: var(--scale-7);
}
#for_business .button, #other_versions .button {
    padding: var(--scale-3) var(--scale-7);
}
#for_business .button {
    margin: var(--scale-5) 0;
}
#download_libreoffice {
    background: var(--lightest-gray);
}
#download_libreoffice > div {
    margin: var(--scale-10) 0 var(--scale-15) 0;
}
#download_libreoffice img {
    width: 170px;
}
.download_buttons .button {
    text-decoration: none;
    color: #fff;
}
.download_buttons {
    text-align: center;
}
.fresh {
    border: 4px solid var(--main-brand);
    margin-bottom: var(--scale-5);
}
p.version_heading {
    font-size: var(--scale-9);
    font-weight: bold;
    margin-bottom: var(--scale-2);
}
#download_libreoffice .button {
    margin: var(--scale-2) 0 var(--scale-2) 0;
    box-sizing: border-box;
    width: 100%;
}
#download_libreoffice .button:first-child {
    margin-top: var(--scale-7);
}
#download_libreoffice .button:last-child {
    margin-bottom: var(--scale-5);
}
.choice_container p:nth-child(n + 3) {
    font-size: var(--scale-5);
}
#download_libreoffice .version_details {
    margin-top: var(--scale-0);
}
#other_versions {
    text-align: center;
}
#other_versions .section-title {
    text-align: initial;
}
.chooser {
    display: grid;
    grid-gap: 20px 10px;
    grid-template-columns: auto;
    justify-content: center;
}
.chooser label {
    align-self: center;
    grid-column: 1/-1;
    max-width: var(--max-w-sm);
    text-align: initial;
    font-size: var(--scale-6);
}
.chooser select {
    align-self: center;
    grid-column: 1/-1;
    max-width: var(--max-w-xxs);
    margin-bottom: var(--scale-0);
    font-size: var(--scale-6);
    color: var(--darkest-gray);
}
#cpu, label[for="cpu"], option[value="x86"], #package, label[for="package"] {
    display: none;
}
#os:has(option[value="win"]:checked, option[value="mac"]:checked) ~ :is(#cpu, label[for="cpu"]) {
    display: block;
}
#os:has(option[value="win"]:checked) ~ #cpu option[value="x86"] {
    display: block;
}
#os:has(option[value="linux"]:checked) ~ :is(#package, label[for="package"]) {
    display: block;
}
.choice_container {
    grid-column: 1 / span 2;
}
.choice, .winx86note {
    display: none;
}
#version:has(option[value="fresh"]:checked) ~ #os:has(option[value="win"]:checked) ~ #cpu:has(option[value="x86_64"]:checked) ~ .choice_container .choice.choice_fresh.choice_win.choice_x86_64,
#version:has(option[value="fresh"]:checked) ~ #os:has(option[value="win"]:checked) ~ #cpu:has(option[value="x86"]:checked) ~ .choice_container .choice.choice_fresh.choice_win.choice_x86,
#version:has(option[value="fresh"]:checked) ~ #os:has(option[value="win"]:checked) ~ #cpu:has(option[value="aarch64"]:checked) ~ .choice_container .choice.choice_fresh.choice_win.choice_aarch64,
#version:has(option[value="fresh"]:checked) ~ #os:has(option[value="mac"]:checked) ~ #cpu:has(option[value="x86_64"]:checked) ~ .choice_container .choice.choice_fresh.choice_mac.choice_x86_64,
#version:has(option[value="fresh"]:checked) ~ #os:has(option[value="mac"]:checked) ~ #cpu:has(option[value="aarch64"]:checked) ~ .choice_container .choice.choice_fresh.choice_mac.choice_aarch64,
#version:has(option[value="fresh"]:checked) ~ #os:has(option[value="linux"]:checked) ~ #package:has(option[value="rpm"]:checked) ~ .choice_container .choice.choice_fresh.choice_linux.choice_rpm,
#version:has(option[value="fresh"]:checked) ~ #os:has(option[value="linux"]:checked) ~ #package:has(option[value="deb"]:checked) ~ .choice_container .choice.choice_fresh.choice_linux.choice_deb,
#version:has(option[value="still"]:checked) ~ #os:has(option[value="win"]:checked) ~ #cpu:has(option[value="x86_64"]:checked) ~ .choice_container .choice.choice_still.choice_win.choice_x86_64,
#version:has(option[value="still"]:checked) ~ #os:has(option[value="win"]:checked) ~ #cpu:has(option[value="x86"]:checked) ~ .choice_container .choice.choice_still.choice_win.choice_x86,
#version:has(option[value="still"]:checked) ~ #os:has(option[value="win"]:checked) ~ #cpu:has(option[value="aarch64"]:checked) ~ .choice_container .choice.choice_still.choice_win.choice_aarch64,
#version:has(option[value="still"]:checked) ~ #os:has(option[value="mac"]:checked) ~ #cpu:has(option[value="x86_64"]:checked) ~ .choice_container .choice.choice_still.choice_mac.choice_x86_64,
#version:has(option[value="still"]:checked) ~ #os:has(option[value="mac"]:checked) ~ #cpu:has(option[value="aarch64"]:checked) ~ .choice_container .choice.choice_still.choice_mac.choice_aarch64,
#version:has(option[value="still"]:checked) ~ #os:has(option[value="linux"]:checked) ~ #package:has(option[value="rpm"]:checked) ~ .choice_container .choice.choice_still.choice_linux.choice_rpm,
#version:has(option[value="still"]:checked) ~ #os:has(option[value="linux"]:checked) ~ #package:has(option[value="deb"]:checked) ~ .choice_container .choice.choice_still.choice_linux.choice_deb,
#os:has(option[value="win"]:checked) ~ #cpu:has(option[value="x86"]:checked) ~ .choice_container .winx86note {
    display: inline-block;
}
label[for=languages-packs-input] {
    margin-inline-end: var(--scale-1);
}
#visit_the_wiki {
    background: var(--lightest-gray);
    border-radius: 10px;
    border: 1px solid var(--darker-gray);
    font-size: var(--scale-7);
    margin: var(--scale-10) 0;
    padding: var(--scale-5) var(--scale-10);
}
#visit_the_wiki .notes-icon {
    display: none;
}
.notes-icon img {
    width: 78px;
}
.chooser input {
    padding: var(--scale-00) var(--scale-0);
    font-size: var(--scale-6);
    color: var(--darkest-gray);
}
@supports not selector(:has(a, b)) {
    #other_versions {
        display: none;
    }
    .card_container .button {
        display: inline-block;
    }
    .need_language {
        display: none;
    }
    .has_selector_fallback {
        display: block;
    }
}
@media (min-width:768px) {
    .chooser {
        grid-template-columns: var(--max-w-sm) var(--max-w-xxs);
    }
    .chooser label {
        grid-column: auto;
    }
    .chooser select {
        grid-column: auto;
        margin-bottom: 0;
    }
    #for_business {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        grid-gap: 0 60px;
        padding: var(--scale-10) var(--scale-15);
        margin: var(--scale-7) 0 var(--scale-7) 0;
    }
    #for_business .button {
        justify-self: right;
        align-self: center;
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0;
    }
    #download_libreoffice .button {
        max-width: 436px;
    }
    #visit_the_wiki {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        grid-gap: 20px 40px;
        align-items: center;
    }
    #visit_the_wiki .notes-icon {
        display: block;
        grid-row: 1;
        grid-column: 1;
        justify-self: center;
        align-self: center;
    }
    #visit_the_wiki p {
        margin: 0;
    }
    #visit_the_wiki p:last-child {
        grid-column: 1 / span 2;
    }
}

@media (min-width:1024px) {
    .card_container {
        display: grid;
        grid-template-columns: minmax(auto, 550px) minmax(auto, 550px);
        grid-auto-rows: auto auto auto auto auto;
        column-gap: 64px;
    }
    #download_libreoffice .card {
        grid-template-rows: subgrid;
        grid-row: auto / span 5;
        display: grid;
    }
    .fresh {
        margin: 0;
    }
    #visit_the_wiki {
        grid-gap: 20px 80px;
        margin: var(--scale-25) 0;
        padding: var(--scale-10) var(--scale-31);
    }
    #visit_the_wiki .notes-icon {
        grid-row: 1 / span 3;
        justify-self: center;
        align-self: center;
        margin: 0;
    }
    .notes-icon img {
        width: 156px;
    }
    #visit_the_wiki p:last-child {
        grid-column: 2;
    }
    @supports not (grid-template-columns: subgrid) {
        #download_libreoffice .button {
            align-self: center;
        }
    }
}