/* Stiler for bransjeoversikten (bransjeoversikt.aspx), kommunelisten for én bransje
 * (bransje-kommuner.aspx) og bedriftslisten for én bransje i én kommune
 * (bransje-bedrifter.aspx). Klassene har prefikset bransjer-. Lenkes fra alle tre sidene. */

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

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

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

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

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

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

/* Brødsmulestien over tittelen på kommune- og bedriftssiden (Bransjeoversikt.lagBrodsmuler):
   Hjem › Bransjeoversikt › bransjen › kommunen. Brytes over flere linjer på smale skjermer */

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

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

.bransjer-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 */
.bransjer-smuler li + li::before {
    content: "\203A";
}

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

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

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

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

/* Linjen over listen i bransjeoversikten: bokstavene til venstre, søkefeltet helt til høyre */

.bransjer-verktoy {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    margin-top: 28px;
}

/* Søkefelt som filtrerer listen (js/bransjer.js) */

.bransjer-sok {
    position: relative;
    flex: 0 0 338px;
    /* Holder feltet inntil høyre kant uansett hvor mye plass det til venstre tar */
    margin-left: auto;
}

/* Forstørrelsesglasset. Tegnes som maske, så fargen styres herfra og ikke av SVG-filen */
.bransjer-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;
}

.bransjer-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;
}

.bransjer-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. */
.bransjer-innhold [hidden] {
    display: none;
}

/* Hoppnavigasjon: bokstavene i bransjeoversikten */

.bransjer-bokstaver {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.bransjer-bokstaver a {
    font-size: 16px;
    font-weight: 600;
    color: #00243a;
    text-decoration: none;
}

.bransjer-bokstaver a:hover {
    color: #026565;
    text-decoration: underline;
}

/* Mens det søkes (js/bransjer.js setter inert): grå og ikke klikkbare */
.bransjer-bokstaver[inert] {
    pointer-events: none;
}

.bransjer-bokstaver[inert] a {
    color: #b5b5b5;
}

/* Én gruppe per forbokstav eller fylke */

.bransjer-gruppe {
    margin-top: 36px;
    /* Holder overskriften synlig under den faste menyen når man hopper til #bokstav-X */
    scroll-margin-top: 90px;
}

.bransjer-gruppe h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
  /*  border-bottom: 2px solid #026565;*/
    font-size: 20px;
    font-weight: 600;
}

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

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

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

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

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

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

/* Bedriftslisten (bransje-bedrifter.aspx): 80 bedrifter per side i to kolonner */

/* «Viser 81–160 av 1 020 bedrifter.» rett over listen */
.bransjer-antall {
    margin: 28px 0 0;
    color: #5c5c5c;
}

/* Rutenett i stedet for columns, lest nedover kolonnene som de andre listene. Radene deler
   høyden likt (1fr), så alle bedriftene blir like høye som den høyeste og står på linje på
   tvers av kolonnene. --rader settes av bransje-bedrifter.aspx.cs: halvparten av bedriftene
   på siden, rundet opp. */
.bransjer-bedrifter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rader, 1), 1fr);
    grid-auto-flow: column;
    margin-top: 28px;
}

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

/* Hver bedrift: navnet øverst, org.nr. og adresse på hver sin linje under */
.bransjer-bedrifter li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 0;
}

.bransjer-bedrifter a {
    font-weight: 600;
}

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

/* Sidetallene under bedriftslisten */

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

.bransjer-sider a,
.bransjer-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;
}

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

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

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

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

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

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

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

    /* Søkefeltet i full bredde over hoppnavigasjonen */
    .bransjer-verktoy {
        flex-direction: column-reverse;
        align-items: stretch;
    }

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

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

    .bransjer-liste {
        columns: 1;
    }

    /* Én kolonne har ingenting å stå på linje med, så hver bedrift får sin egen høyde */
    .bransjer-bedrifter {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

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