#header .container {
    width: 100%;
    min-height: 30vh;
    justify-self: center;
    justify-content: center;
    align-content: center;
    border-bottom: 4px var(--background-color) solid;
}

#header .text {
    width: 60%;
    justify-self: center;
    justify-content: center;
    text-align: center;
    align-content: center;
    color: var(--text-color-dark);
    text-wrap: balance;
    line-height: 1.5;
}

#header .text h1 {
    font-size: 3rem;
}

/* Telefoner: teksten får hele bredden (60% var for smalt til overskriften) */
@media (max-width: 768px) {
    #header .text {
        width: auto;
        padding: 2rem 1rem;
    }

    #header .text h1 {
        font-size: 2.25rem;
    }
}


#applications .container {
    /* background-color: blueviolet; */
    width: 100%;
    height: 100%;
    margin-top: 4rem;
}


/* 2 kort pr. række, alle lige brede */
#applications .apply-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem;
}

/* 1 kort pr. række på mobil */
@media (max-width: 640px) {
    #applications .apply-cards {
        grid-template-columns: 1fr;
    }
}

/* ---------- Ikke logget ind ---------- */

/* Én boks i midten. grid-column: 1 / -1 = fylder hele rækken i stedet for kun den første kolonne */
.apply-login {
    grid-column: 1 / -1;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 28rem;
    padding: 2.5rem 2rem;
    text-align: center;
    color: var(--text-color-dark);
    background-color: var(--surface);
    border: 2px solid var(--border-soft);
    border-radius: 8px;
}

.apply-login-icon {
    font-size: 2rem;
    color: var(--primary-color);
}

.apply-login p {
    margin-bottom: 0.5rem;
    color: var(--text-color-dark-tp);
}

/* ---------- Kort ---------- */

#applications .card {
    /* Ansøgningens egen farve (sat af apply.js), ellers sidens røde. Status-klasserne længere nede vinder */
    --accent: var(--type-color, var(--primary-color));

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;

    color: var(--text-color-dark);
    border: 2px solid var(--accent);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#applications .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--shadow);
}

/* ">" betyder kun direkte børn, så ikonerne inde i status-knapperne ikke rammes */
#applications .card > i {
    font-size: 3rem;
    color: var(--accent);
}

#applications .card h2 {
    font-size: 1.5rem;
}

/* margin-top: auto skubber knappen helt ned i bunden af kortet */
#applications .card > .btn,
#applications .card > .status {
    margin-top: auto;
    width: 100%;
}

/* Kortet skifter farve efter status */
#applications .card.is-applied  { --accent: var(--warning); }
#applications .card.is-accepted { --accent: var(--success); }
#applications .card.is-denied   { --accent: #9a9a9a; }

/* Låst (fx ikke whitelisted endnu): gråt kort, der ikke løfter sig, når musen er over det,
   fordi der ikke er noget at klikke på */
#applications .card.is-locked {
    --accent: var(--muted-icon);
    border-color: var(--border-soft);
}

#applications .card.is-locked:hover {
    transform: none;
    box-shadow: none;
}

#applications .card.is-locked h2 {
    color: var(--text-color-dark-tp);
}

/* "Låst" nederst i kortet: stille grå tekst i stedet for en rød knap, der lignede en fejl */
.status-locked {
    color: var(--text-color-dark-tp);
    background: none;
    border-color: transparent;
    cursor: default;
}

/* Én besked over kortene, når flere jobs er låst af samme grund */
.apply-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    text-align: center;
    color: var(--text-color-dark);
    background-color: var(--surface-soft);
    border-radius: 8px;
}

.apply-notice i {
    color: var(--muted-icon);
}

@media (max-width: 640px) {
    .apply-notice {
        margin-inline: 2rem;
    }
}