/* Stiler for rolleoversikten (rolle-fylker.aspx), poststedene i ett fylke
 * (rolle-poststeder.aspx) og personene på ett poststed (rolle-personer.aspx), pluss
 * brødsmulestien på rollesiden (enkeltRolle.aspx). Klassene har prefikset rolle-.
 * Utseendet følger bransjesidene (css/bransjer.css). */

.rolle-side {
    width: 100%;
    padding: 40px 20px 80px;
    box-sizing: border-box;
}

.rolle-innhold {
    max-width: 1080px;
    margin: 0 auto;
    background: white;
    border-radius: 5px;
    padding: 40px;
    box-sizing: border-box;
}

.rolle-tittel {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.rolle-ingress {
    font-size: 16px;
    margin-top: 12px;
}

/* Ingress i flere avsnitt (poststed- og personsiden) */
.rolle-ingress p {
    margin: 0 0 12px;
    /* Den globale p-regelen setter egen størrelse; avsnittene skal følge .rolle-ingress */
    font-size: inherit;
}

.rolle-ingress p:last-child {
    margin-bottom: 0;
}

/* Brødsmulestien over tittelen (Rolleoversikt.lagBrodsmuler): Hjem › Rolleoversikt › fylket
   › poststedet › personen. Brytes over flere linjer på smale skjermer */

.rolle-smuler {
    margin-bottom: 18px;
    font-size: 14px;
}

.rolle-smuler ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rolle-smuler li {
    display: flex;
    gap: 8px;
    color: #5c5c5c;
    line-height: 150%;
}

/* Skilletegnet står foran hvert ledd unntatt det første, så en linje aldri slutter med det */
.rolle-smuler li + li::before {
    content: "\203A";
}

.rolle-smuler a {
    font-weight: 600;
    color: #026565;
}

/* Toppen av poststedsiden: brødsmuler og tittel til venstre, søkefeltet øverst til høyre.
   Ingressen ligger under, i full bredde */

.rolle-topp {
    display: flex;
    align-items: flex-start;
    gap: 16px 24px;
}

.rolle-topp-tekst {
    flex: 1 1 auto;
    min-width: 0;
}

/* Søkefelt som filtrerer poststedene (js/rolleoversikt.js) */

.rolle-sok {
    position: relative;
    flex: 0 0 338px;
    margin-left: auto;
}

/* Forstørrelsesglasset. Tegnes som maske, så fargen styres herfra og ikke av SVG-filen */
.rolle-sok::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-color: #5c5c5c;
    -webkit-mask: url('../images/assets/icons/search.svg') center / contain no-repeat;
    mask: url('../images/assets/icons/search.svg') center / contain no-repeat;
    pointer-events: none;
}

.rolle-sok-felt {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 14px 0 38px;
    box-sizing: border-box;
    border: 1px solid #959292;
    border-radius: 18px;
    background: white;
    font-size: 16px;
    color: #00243a;
    -webkit-appearance: none;
    appearance: none;
}

.rolle-sok-felt:focus {
    border-color: #026565;
}

/* Rader og grupper skjules med hidden-attributtet under søk. Reglene under
   setter display selv, så nettleserens standardregel for [hidden] slipper ikke til uten denne. */
.rolle-innhold [hidden] {
    display: none;
}

/* Én gruppe per kommune på poststedsiden */

.rolle-gruppe {
    margin-top: 36px;
}

.rolle-gruppe h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

.rolle-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 40px;
    margin-top: 25px;
}

.rolle-liste li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #ececec;
    break-inside: avoid;
}

.rolle-liste a {
    color: #00243a;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.rolle-liste a:hover {
    text-decoration: underline;
}

.rolle-ant {
    flex-shrink: 0;
    color: #5c5c5c;
    font-variant-numeric: tabular-nums;
}

.rolle-tom {
    margin-top: 28px;
}

/* Personlisten (rolle-personer.aspx): 80 personer per side i to kolonner */

/* «Viser 81–160 av 3 511 personer.» rett over listen */
.rolle-antall {
    margin: 28px 0 0;
    color: #5c5c5c;
}

/* To kolonner som leses bortover, annenhver person til venstre og høyre, så sorteringen
   (flest roller først, deretter postnummer) følger radene. Personene i samme rad står på linje. */
.rolle-personer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
}

/* Tettere når antallslinjen står over (lister på flere sider) */
.rolle-antall + .rolle-personer {
    margin-top: 12px;
}

/* Hver person: navnet øverst, postnummer og antall roller på hver sin linje under */
.rolle-personer li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 0;
}

.rolle-personer a {
    font-weight: 600;
}

.rolle-person-info {
    font-size: 14px;
    color: #5c5c5c;
    overflow-wrap: anywhere;
}

/* Sidetallene under personlisten */

.rolle-sider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 36px;
}

.rolle-sider a,
.rolle-sider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #ececec;
    border-radius: 18px;
    color: #00243a;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.rolle-sider a:hover {
    border-color: #026565;
    color: #026565;
}

.rolle-sider .rolle-sider-aktiv {
    border-color: #026565;
    background: #026565;
    color: white;
    font-weight: 600;
}

.rolle-sider .rolle-sider-hull {
    min-width: 0;
    padding: 0 2px;
    border-color: transparent;
}

@media (max-width: 991px) {
    .rolle-liste {
        columns: 2;
    }
}

@media (max-width: 767px) {
    .rolle-side {
        padding: 0;
    }

    .rolle-innhold {
        border-radius: 0;
        padding: 24px 16px 48px;
    }

    /* Søkefeltet i full bredde mellom tittel og ingress */
    .rolle-topp {
        flex-direction: column;
        align-items: stretch;
    }

    .rolle-sok {
        flex-basis: auto;
        margin-left: 0;
    }

    /* Helt runde ender uansett høyde */
    .rolle-sok-felt {
        border-radius: 999px;
    }

    .rolle-liste {
        columns: 1;
    }

    .rolle-personer {
        grid-template-columns: minmax(0, 1fr);
    }

    .rolle-liste li {
        padding: 12px 0;
    }
}