/*
 * Layout och komponenter. Ersätter Bulma.
 *
 * Bulma fanns aldrig i den grafiska profilen — den kom från en CDN-länk i den
 * ursprungliga layout.ejs och låg kvar som beroende. Den här filen implementerar
 * de 43 klasser sajten faktiskt använde, byggda på GrafiskDesignWeb.md.
 *
 * GEOMETRIN ÄR MEDVETET IDENTISK MED BULMAS för kolumnsystemet och
 * avståndsklasserna. Vyerna är skrivna mot dem: 0.75rem rännor, flex från 769px
 * och nedåt stapling, samt avstånden 4/8/12/16/24/48px. Att "förbättra" dem här
 * hade flyttat layouten på varje sida utan att någon bett om det. Värdena är
 * dessutom multiplar av 4 eller 8, vilket är profilens basgrid.
 *
 * Där Bulma avvek från profilen är det däremot rättat, och det gäller tre saker:
 *
 *   1. `.button.is-primary` var Bulmas turkosa #00d1b2 — en färg som inte finns
 *      någonstans i profilen. Sajtens främsta call-to-action har alltså renderats
 *      i fel färg. Nu temafärgen.
 *   2. `.is-size-6` satte 16px med !important på navigationslänkarna, så
 *      profilens 14px gick inte igenom. Klassen implementeras inte; den är
 *      borttagen ur markupen i stället.
 *   3. `.navbar` hade min-height 3.25rem (52px). Profilen anger 64px.
 */

/* ── Reset ──────────────────────────────────────────────────────────────── */

/*
 * Den här delen kom tidigare från Bulma (minireset) och föll bort när ramverket
 * avvecklades. Två synliga fel följde direkt av det:
 *
 *   1. Utan `box-sizing: border-box` räknas padding UTANFÖR den angivna bredden.
 *      `.container` är 100 % bred med 24px padding på varje sida, vilket blev
 *      100 % + 48px — alltså vågrätt överflöd och en rullningslist på varje sida.
 *      Bulma hade dessutom `overflow-x: hidden` på html, som döljde samma sak;
 *      den återinförs inte, eftersom den maskerar fel i stället för att visa dem.
 *
 *   2. Utan `body { margin: 0 }` fick sidan webbläsarens standardmarginal på
 *      8px. Toppmenyn låg då indragen 8px runt om, och när den fastnade vid
 *      `top: 0` försvann de 8px uppåt medan de horisontella blev kvar — vilket
 *      är precis den halva padding som såg oavsiktlig ut.
 *
 * Vyerna är skrivna mot den här resetten, så den är återställd som den var i
 * stället för ersatt med något eget.
 */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html, body,
p, ol, ul, li, dl, dt, dd,
blockquote, figure, fieldset, legend,
textarea, pre, iframe, hr,
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* Rubrikernas storlek och vikt sätts i typography.css. */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

ul {
    list-style: none;
}

button, input, select, textarea {
    margin: 0;
}

/* Långa sammansatta ord och URL:er bryts hellre än att de sticker ut ur sin
   ruta på en smal skärm. Påverkar bara ord som inte ryms på en egen rad. */
body {
    overflow-wrap: break-word;
}

/* Utan detta kan en bild som är bredare än sin behållare skjuta ut sidan. */
img, video {
    height: auto;
    max-width: 100%;
}

iframe {
    border: 0;
}

/*
 * Bulma satte `a { text-decoration: none }`. Utan den understryker webbläsaren
 * varje länk, alltså även navigationen och knapparna — vilket är fel enligt
 * profilen, där bara länkar i brödtext skall vara understrukna.
 *
 * Understrykningen läggs därför tillbaka explicit på brödtextens länkar längre
 * ned, i stället för att gälla allt.
 */
a {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
}

td:not([align]), th:not([align]) {
    text-align: inherit;
}

/* ── Innehållsbredd ─────────────────────────────────────────────────────── */

/*
 * Profilen: maxbredd 1200px, centrerad, 24px sidmarginal och 16px under 768px.
 *
 * Bulma kapade `.container` vid 960px och satte ingen sidmarginal, vilket
 * krävde tre överstyrande mediefrågor i theme.css för att komma runt. De är
 * borta nu — en regel räcker.
 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 767px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── Kolumnsystem ───────────────────────────────────────────────────────── */

/*
 * Rännan görs med padding på kolumnerna, inte med `gap`.
 *
 * Det spelar roll, och jag hade fel först. Bredderna är procent — 33,3333 % för
 * `is-one-third` — och eftersom box-sizing är border-box ligger paddingen INNANFÖR
 * den bredden. Tre tredjedelar blir då exakt 100 %.
 *
 * Med `gap` läggs rännan UTANFÖR bredderna: 3 × 33,3333 % + 2 × 24px blir mer än
 * 100 %, raden svämmar över och `is-multiline` bryter ned sista kolumnen. Det
 * syntes som att Epix-sidans tre skärmbilder lade sig 2 + 1 i stället för 3 i
 * bredd, och gällde varje rad med fasta kolumnbredder.
 *
 * Bulma löste ytterkanterna med negativ marginal på raden, vilket kräver en
 * förälder med minst lika stor padding — 22 kolumnrader saknar det, och det var
 * den vågräta rullningslisten. Den negativa marginalen är därför borta, vilket
 * innebär att raden är indragen 12px från sin behållare i stället för att linjera
 * exakt. Det är den enda avvikelsen från Bulmas geometri, och den syns knappt.
 *
 * Paddingen är bara vågrät. Lodrätt avstånd mellan staplade kolumner kommer från
 * row-gap, så det behövs ingen negativ marginal där heller.
 */
.columns {
    --column-gap: 0.75rem;
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--column-gap) * 2);
}

.columns:not(:last-child) {
    margin-bottom: 1.5rem;
}

.column {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    /* Innehåll som inte kan krympa — en lång URL, en bred bild — spränger annars
       kolumnen och därmed raden. */
    min-width: 0;
    /* Reservvärdet behövs: `.column` används på några ställen utan `.columns`
       runt omkring, och då är --column-gap odefinierad. Utan reserv blir hela
       deklarationen ogiltig vid beräkningen, paddingen faller till 0 — och
       eftersom regeln ligger efter `.container` slår den ut även dess
       sidmarginal. Startsidans "Våra lösningar" låg därför kant i kant med
       skärmen i mobil- och surfplattevy. */
    padding-inline: var(--column-gap, 0.75rem);
}

/* Samma element bär ibland båda klasserna. Då är det containerns sidmarginal
   som gäller — den är profilens, kolumnens ränna är en inre detalj. */
.column.container {
    padding-inline: 24px;
}

@media (max-width: 767px) {
    .column.container {
        padding-inline: 16px;
    }
}

@media screen and (min-width: 769px), print {
    .columns {
        flex-direction: row;
        row-gap: 0;
    }

    /*
     * Undantag: en rad som bryter ned sig behöver avstånd mellan de rader den
     * bryts till. Nollan ovan gäller kolumner sida vid sida, där lodrätt
     * avstånd vore fel — men i `is-multiline` låg fälten i kontaktformuläret
     * kant i kant, etikett direkt under föregående fält.
     */
    .columns.is-multiline {
        row-gap: calc(var(--column-gap) * 2);
    }

    /*
     * Basbredd 0 ger kolumner som delar bredden lika oavsett innehållets längd,
     * vilket är Bulmas beteende. Med `auto` hade en kolumn med mycket text blivit
     * bredare än sina grannar.
     */
    .column {
        flex-basis: 0;
    }

    /*
     * Bara meningsfulla i vågrät riktning. `is-vcentered` sätter align-items,
     * som i lodrät riktning är den vågräta axeln — då hade staplade kolumner
     * krympt till innehållets bredd i stället för att fylla raden.
     */
    .columns.is-centered { justify-content: center; }
    .columns.is-vcentered { align-items: center; }
    .columns.is-multiline { flex-wrap: wrap; }
}

/* Bredare ränna: 1.25rem padding per sida, alltså 2.5rem mellan kolumnerna. */
.columns.is-variable.is-5 { --column-gap: 1.25rem; }

/*
 * Mobil: en sidmarginal.
 *
 * Under 768px ligger kolumnerna staplade, och rännan mellan dem har inget att
 * skilja åt — den blev bara ett extra indrag ovanpå containerns 16px. Beroende
 * på hur vyn var nästlad hamnade texten därför 16, 28 eller 44px från kanten,
 * och i ett kort (container + kortets padding + kolumnens ränna) på 53px, så
 * att en 360px-skärm fick drygt 250px text.
 *
 * Här nollas det vågräta indraget för allt som ligger inuti en container:
 * kolumner och nästlade containrar. Då linjerar all löptext med sidmarginalen,
 * och text i kort med kortets egen padding. En .column eller .container som
 * inte ligger i någon container behåller sin padding — den ÄR sidmarginalen
 * där (startsidans "Våra lösningar").
 */
@media (max-width: 767px) {
    .container .column,
    .container .container {
        padding-inline: 0;
    }

    /* Raden på startsidans "Om oss" ligger utanför container och har bara
       ml-1/mr-1 (4px) plus rännan som sidmarginal. Med 1.25rem ränna blev det
       24px; med standardrännan blir det 16px, som överallt annars. */
    .columns.is-variable.is-5 { --column-gap: 0.75rem; }
}

/*
 * Breddmodifierare. Utan brytpunktssuffix gäller de från 769px och uppåt, precis
 * som i Bulma — under det tar stapling över.
 */
@media screen and (min-width: 769px), print {
    .column.is-full { flex: none; width: 100%; }
    .column.is-two-thirds { flex: none; width: 66.6666%; }
    .column.is-half { flex: none; width: 50%; }
    .column.is-one-third { flex: none; width: 33.3333%; }
    .column.is-one-quarter,
    .column.is-one-quarter-tablet { flex: none; width: 25%; }
}

@media screen and (max-width: 768px) {
    .column.is-full-mobile { flex: none; width: 100%; }
    .column.is-half-mobile { flex: none; width: 50%; }
}

@media screen and (min-width: 1024px) {
    .column.is-three-fifths-desktop { flex: none; width: 60%; }
    .column.is-two-fifths-desktop { flex: none; width: 40%; }
}

@media screen and (min-width: 1408px) {
    .column.is-two-fifths-fullhd { flex: none; width: 40%; }
}

/* ── Hjälpklasser ───────────────────────────────────────────────────────── */

/*
 * !important är avsiktligt och behållet från Bulma. En hjälpklass sätts i
 * markupen för att vinna över komponentens egen regel; utan !important förlorar
 * den mot varje selektor med högre specificitet, och då fungerar den inte som
 * hjälpklass.
 */
.is-flex { display: flex !important; }
.is-justify-content-center { justify-content: center !important; }
.is-justify-content-space-between { justify-content: space-between !important; }
.is-align-items-center { align-items: center !important; }
.has-text-left { text-align: left !important; }
.has-text-centered { text-align: center !important; }

/* Avståndsskalan: 4, 8, 12, 16, 24 och 48px, som i Bulma. */
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 0.75rem !important; }
.m-4 { margin: 1rem !important; }
.m-5 { margin: 1.5rem !important; }
.m-6 { margin: 3rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }
.mt-6 { margin-top: 3rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }
.mb-6 { margin-bottom: 3rem !important; }

.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ml-5 { margin-left: 1.5rem !important; }
.ml-6 { margin-left: 3rem !important; }

.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mr-5 { margin-right: 1.5rem !important; }
.mr-6 { margin-right: 3rem !important; }

.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.5rem !important; }
.p-6 { padding: 3rem !important; }

.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.5rem !important; }
.pt-6 { padding-top: 3rem !important; }

.pb-2 { padding-bottom: 0.5rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.5rem !important; }
.pb-6 { padding-bottom: 3rem !important; }

/* ── Knappar ────────────────────────────────────────────────────────────── */

/*
 * Profilen: tre varianter, alla med r-sm, 13px Roboto 500 och 100 ms ease-out
 * hover. Höjd 40px, horisontell padding 16px. Teckenstorleken sätts i
 * typography.css.
 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms ease-out, border-color 100ms ease-out,
                color 100ms ease-out;
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .button { transition: none; }
}

/*
 * Primärknapp: temafärg som bakgrund, vit text, hover #006a9e.
 *
 * Bulma satte #00d1b2 här — turkos, och inte en färg som förekommer i profilen.
 * Eftersom ingen egen regel överstyrde den har sajtens främsta call-to-action
 * renderats turkos i stället för i varumärkesfärgen.
 */
.button.is-primary {
    background-color: var(--theme-fill);
    border-color: var(--theme-fill);
    color: var(--text-on-fill);
}

.button.is-primary:hover,
.button.is-primary:focus-visible {
    background-color: var(--theme-fill-hover);
    border-color: var(--theme-fill-hover);
}

/*
 * Profilens sekundära variant: 1px kantlinje och text i temafärgens textvariant,
 * transparent bakgrund, hover fyller med tintfärgen. Klassen heter is-light
 * eftersom det är den markupen redan använder.
 */
.button.is-light {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--theme-text);
}

.button.is-light:hover,
.button.is-light:focus-visible {
    background-color: var(--theme-tint);
    border-color: var(--theme-text);
}

/* ── Formulär ───────────────────────────────────────────────────────────── */

/*
 * Fältens FÄRGER ligger i theme.css. All storlekssättning kom från Bulma och
 * föll bort med ramverket: bredd, höjd, padding och kantlinjens tjocklek. Följden
 * var fält som var någon centimeter breda med webbläsarens standardkant, och en
 * textarea där platshållaren radbröts på två rader.
 *
 * Måtten är profilens: r-sm, 1px kantlinje, 40px höjd.
 */
.field:not(:last-child) {
    margin-bottom: 1rem;
}

.control {
    box-sizing: border-box;
    clear: both;
    position: relative;
    text-align: inherit;
}

.input,
.textarea,
.select select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.5;
    appearance: none;
}

/*
 * Textarean behöver lodrät padding och plats för flera rader; 40px höjd gäller
 * enradiga fält.
 */
.textarea {
    min-height: 8rem;
    padding: 10px 12px;
    resize: vertical;
}

/* fieldset har kantlinje och padding som standard; grupperna skall se ut som
   vilket fält som helst. */
fieldset.field {
    border: 0;
    min-inline-size: 0;
}

/*
 * Profilen: "Etiketter ovanför fältet, 12px Roboto 400 i sekundär textfärg."
 * Etiketterna låg på brödtextens 16px i primär färg.
 */
.field label,
label.label,
legend.label {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: var(--weight-regular);
    line-height: var(--leading-label);
    color: var(--text-secondary);
}

/*
 * Radio- och kryssrutealternativ är inte fältetiketter utan valbara alternativ,
 * och skall vara läsbara i brödtextstorlek.
 */
.field label.radio,
.field label.checkbox,
.field .radio label,
.field .checkbox label {
    display: inline;
    margin-bottom: 0;
    font-size: var(--text-body);
    color: var(--text-primary);
}