/* The tax savings calculator on /de/steuern-sparen-luxemburg and its English
   and French pages. It wears the salary calculator's controls and result
   (salary-calculator.css). This file adds only what the deductions need: the
   four countries of residence, the fields that follow an entry, the table's
   two columns and the facts under it. Linked globally like the salary
   calculator, so a page swap finds it loaded. */

/* Fields that follow an entry: the age question under a home savings
   contract, the years since moving in under the home loan interest. */
.tax-calc:not([data-savings="on"]) [data-savings-show],
.tax-calc:not([data-mortgage="on"]) [data-mortgage-show] {
    display: none !important;
}

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

/* Four country names stand two by two, so each keeps its full name. */
.tax-homes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    border-radius: 1.5rem;
}

.tax-homes .salary-segment-option span {
    border-radius: calc(1.5rem - 4px);
}

/* The household and the expenses follow the tax class straight away: the
   form is taller than the result, so nothing pushes them down. */
.tax-more {
    margin-top: 0;
}

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

/* The form stands taller than the result, so the result keeps its own
   height at the top of its column. The card clips its glass, which stops a
   sticky result from following the page. */
@media (min-width: 1001px) {
    .tax-calc .salary-result {
        align-self: start;
    }

    .tax-calc .salary-result-detail,
    .tax-calc .salary-table {
        flex: 0 0 auto;
    }
}

/* What counts and what comes back, side by side under a head row. */
.tax-table thead {
    display: table-header-group;
}

.tax-table thead th {
    padding-top: 0;
    padding-left: var(--spacing-sm);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    text-align: right;
    color: var(--color-text-primary);
}

.tax-table tr[hidden] {
    display: none;
}

/* The narrowest phones stack the table's rows (salary-calculator.css). Each
   row then keeps only what comes back, so the figures stay in one column
   under their head. */
@media (max-width: 400px) {
    .tax-table thead {
        display: block;
    }

    .tax-table :is(th, td):nth-child(2) {
        display: none;
    }

    .tax-table thead th:last-child {
        margin-left: auto;
    }
}

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

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

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