/* The pension calculator on /de/rente-luxemburg-deutschland and its English
   and French pages. It wears the salary calculator's controls, result and
   comparison (salary-calculator.css). This file adds only what the pension
   needs: the fields that follow the chosen country, the dot that ties each
   country row to its part of the bar, and the facts under the rows. Linked
   globally like the salary calculator, so a page swap finds it loaded. */

/* Fields of one country only: the German pension statement, the Belgian
   household rate. */
.pension-calc:not([data-home="de"]) [data-home-show="de"],
.pension-calc:not([data-home="fr"]) [data-home-show="fr"],
.pension-calc:not([data-home="be"]) [data-home-show="be"] {
    display: none !important;
}

.pension-home-field .salary-head {
    margin-bottom: 0.6rem;
}

/* The fields follow the salary straight away: the left column has no
   middle group to push them down to the result's last row. */
.pension-more {
    margin-top: 0;
}

.pension-more .salary-check {
    margin-top: 0;
}

/* Each country row carries the colour of its part of the bar above. */
.pension-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-right: 0.6rem;
    border-radius: 50%;
    corner-shape: round;
    vertical-align: 0.05em;
}

.pension-dot-lu {
    background: var(--gradient-brand);
}

.pension-dot-home {
    background: rgba(149, 1, 253, 0.32);
}

.pension-facts {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pension-facts:not(:has(.pension-fact:not([hidden]))) {
    display: none;
}

.pension-fact {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: 1.55;
    color: var(--color-text-black);
}

/* The comparison's sub line names the age from which each total is paid. */
.pension-compare .salary-compare-row {
    grid-template-columns: 11rem minmax(0, 1fr) 8rem;
}

@media (max-width: 640px) {
    .pension-compare .salary-compare-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}