/* Utseende för rekryteringen, i samma stil som startsidan. Hämtas efter sidornas egna stilar och ersätter dem. */
:root {
    --antik: #FBF6EF;
    --plommon: #5E2A63;
    --ljung: #B184B5;
    --lila-ljus: #F2E4EC;
    --sol: #F2C9B0;
    --text: #2A2230;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    padding: 0 1rem 3rem;
    background: var(--antik);
    color: var(--text);
    font-family: "Century Gothic", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
}
.hemlank {
    display: flex; align-items: center; gap: .6rem;
    max-width: 48rem; margin: 1rem auto 1.25rem;
    color: var(--plommon); text-decoration: none; font-weight: 700;
}
.hemlank span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(78,29,105,.15); }
.hemlank img { width: 1.6rem; height: auto; }
center {
    display: block;
    max-width: 48rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 2rem;
    padding: 2rem 1.75rem 2.5rem;
    box-shadow: 0 2px 0 rgba(78,29,105,.06);
    text-align: left;
}
h1, H1 {
    color: var(--plommon);
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 .75rem;
}
#stegInfo {
    display: inline-block;
    background: var(--lila-ljus);
    color: var(--plommon) !important;
    border-radius: 999px;
    padding: .25rem .9rem;
    font-size: .95rem;
}
input[type=text], select, textarea, .personligt_brev {
    width: 100%;
    max-width: 100%;
    border: 2px solid #D8C6DE !important;
    border-radius: .9rem;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    padding: .7rem .85rem;
    color: var(--text);
    margin: .25rem 0 .9rem;
}
.personligt_brev { min-height: 14rem; height: auto; margin: .25rem 0 .9rem; }
input[type=text]:focus, select:focus, textarea:focus {
    border-color: var(--plommon) !important;
    box-shadow: 0 0 0 4px rgba(242,193,78,.55);
    outline: none;
}
button {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: .8rem 1.5rem;
    margin: .5rem .8rem .5rem 0;
    border-radius: 14px;
    border: 2px solid var(--plommon);
    background: var(--plommon);
    color: #fff;
    box-shadow: 5px 5px 0 var(--sol);
    transition: transform .15s, box-shadow .15s;
}
button:hover { background: var(--plommon); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sol); }
button:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
button:disabled { opacity: .6; cursor: default; transform: none; }
button[name=tillbaka] { background: #fff; color: var(--plommon); }
.box_small, .box_small2 { display: block; width: 100% !important; margin: 0; }
.box_small2 input[type=text] { width: 100% !important; }
.rullist, .scroll_div { border: 2px solid var(--lila-ljus); border-radius: 1rem; width: 100%; margin: .5rem 0; }
.varning { color: #A3123A; background: #FCE8EC; border-radius: 1rem; padding: .8rem 1rem; margin: 1rem auto; max-width: 48rem; }
#fel_format, #tillbaka2, #tillbaka, #nasta { max-width: 48rem; }
input[type=checkbox] { transform: scale(1.3); margin-right: .5rem; accent-color: var(--plommon); }
@media (max-width: 500px) {
    body { font-size: 1rem; padding: 0 .6rem 2rem; }
    center { padding: 1.4rem 1.1rem 2rem; border-radius: 1.5rem; }
}