/**
Theme Name: Jag_Ager
Theme URI:
Author: Axess Lab
Author URI: https://axesslab.com/
Description: Jag äger WordPress-tema.
Version: 2.0
License:
License URI:
Tags: 
Text Domain: samhallsportalen_2024
*/
/**
Theme Name: jag_ager
Theme URI:
Author: Axess Lab
Author URI: https://axesslab.com/
Description: Jag Äger WordPress-tema.
Version: 1.0
License:
License URI:
Tags:
Text Domain: jag_ager
*/

:root {
    color-scheme: light dark;
    /* Colors */
    --color-base-light: #fff;
    --color-base-dark: #000;
    --color-link: #0713E3;
    --color-link-hover-bg: #0713E3;
    --color-top-links: #383838;

    /* Default */
    --color-default-light: #FEE0E2;
    --color-default-light-even: #FEEfEd;
    --color-default-dark: #000;
    --color-default-accent: #fff;
    --color-default-accent-dark: #383838;
    --color-default-cta-bg: #E30612;
    /*#E80A17 works on both black and white */
    --color-default-cta-text: #fff;
    --color-default-divider: #E30612;

    --color-footer: #383838;

    /* Option 1 */
    --color-option-1-light: #FFF;
    --color-option-1-dark: #000665;
    --color-option-1-accent: #E6E7FC;
    --color-option-1-cta: #0713E3;
    --color-option-1-cta-hover: #000665;
    --color-option-1-info-bg: var(--color-option-1-dark);
    --color-option-1-info-text: #FFF;


    /* Option 2 */
    --color-option-2-light: #FFF;
    --color-option-2-dark: #5F395F;
    --color-option-2-accent: #F6EFF6;
    --color-option-2-cta: #704270;
    --color-option-2-cta-hover: #5F395F;
    --color-option-2-info-bg: var(--color-option-2-dark);
    --color-option-2-info-text: #FFF;

    /* Option 3 */
    --color-option-3-light: #FFF;
    --color-option-3-dark: #033B01;
    --color-option-3-accent: #E5F7E5;
    --color-option-3-cta: #044D00;
    --color-option-3-cta-hover: #033B01;
    --color-option-3-info-bg: var(--color-option-3-dark);
    --color-option-3-info-text: #FFF;

    /* Sizes */
    --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
    --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
    --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
    --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
    --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);

    /* Space */
    --space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
    --space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem);
    --space-2xs: clamp(0.5625rem, 0.49rem + 0.34vw, 0.75rem);
    --space-xs: clamp(0.875rem, 0.78rem + 0.46vw, 1.125rem);
    --space-s: clamp(1.125rem, 0.98rem + 0.69vw, 1.5rem);
    --space-m: clamp(1.6875rem, 1.47rem + 1.03vw, 2.25rem);
    --space-l: clamp(2.25rem, 1.97rem + 1.38vw, 3rem);
    --space-xl: clamp(3.375rem, 2.95rem + 2.07vw, 4.5rem);
    --space-2xl: clamp(4.5rem, 3.93rem + 2.76vw, 6rem);
    --space-3xl: clamp(6.75rem, 5.90rem + 4.14vw, 9rem);
    --space-4xl: clamp(9rem, 7.86rem + 5.52vw, 12rem);
    --space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.80vw, 0.75rem);
    --space-2xs-xs: clamp(0.5625rem, 0.35rem + 1.03vw, 1.125rem);
    --space-xs-s: clamp(0.875rem, 0.64rem + 1.15vw, 1.5rem);
    --space-s-m: clamp(1.125rem, 0.70rem + 2.07vw, 2.25rem);
    --space-m-l: clamp(1.6875rem, 1.19rem + 2.41vw, 3rem);
    --space-l-xl: clamp(2.25rem, 1.40rem + 4.14vw, 4.5rem);
    --space-xl-2xl: clamp(3.375rem, 2.38rem + 4.83vw, 6rem);
    --space-2xl-3xl: clamp(4.5rem, 2.79rem + 8.28vw, 9rem);
    --space-3xl-4xl: clamp(6.75rem, 4.76rem + 9.66vw, 12rem);
    --space-s-l: clamp(1.125rem, 0.41rem + 3.45vw, 3rem);
    --space-s-xl: clamp(1.125rem, -0.16rem + 6.21vw, 4.5rem);

    /* Max width */
    --width-inner: clamp(16rem, 100vw, 85rem);
    --width-article: 75ch;

    --gutter: var(--space-s-l);

    --transition-base: 250ms ease;
    --transition-movement: 200ms linear;
    --transition-fade: 300ms ease;
    --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);

    --box-shadow-primary: 0 1px 1px rgba(0, 0, 0, .075), 0 2px 2px rgba(0, 0, 0, .075), 0 4px 4px rgba(0, 0, 0, .075), 0 8px 8px rgba(0, 0, 0, .075), 0 16px 16px rgba(0, 0, 0, .075);

    /* set to 0 for no radius, remove to add */
    --border-radius: .75rem;
    /*var(calc(var(--gutter)*0.25));*/
    --border-radius--pill: 100vh;
}

@media (prefers-color-scheme: dark) {

    :root {
        /* Colors */
        --color-base-light: #121212;
        --color-base-dark: #fff;
        --color-link: #6673FF;
        /*#7989FF;*/
        /*#6071FF;*/
        --color-link-hover-bg: #0713E3;
        --color-top-links: #dedede;

        /* Default */
        --color-default-light: #021F1B; /* #001F1C*/
        --color-default-light-even: #000F0C;
        --color-default-dark: #fff;
        --color-default-accent: #001F1C;
        /* #3D2729; */
        --color-default-accent-dark: #dedede;
        --color-default-cta-bg: #E30612;
        /*#E80A17 works on both black and white */
        --color-default-cta-text: #fff;
        --color-default-divider: #E30612;

        --color-footer: #232323;

        /* Option 1 */
        --color-option-1-light: #FFF;
        --color-option-1-dark: #000665;
        --color-option-1-accent: #292B3B;
        --color-option-1-cta: #0713E3;
        --color-option-1-cta-hover: #000665;
        --color-option-1-info-bg: var(--color-option-1-accent);
        --color-option-1-info-text: #FFF;

        /* Option 2 */
        --color-option-2-light: #FFF;
        --color-option-2-dark: #5F395F;
        --color-option-2-accent: #292429;
        --color-option-2-cta: #704270;
        --color-option-2-cta-hover: #5F395F;
        --color-option-2-info-bg: var(--color-option-2-accent);
        --color-option-2-info-text: #FFF;

        /* Option 3 */
        --color-option-3-light: #FFF;
        --color-option-3-dark: #033B01;
        --color-option-3-accent: #1B281B;
        --color-option-3-cta: #044D00;
        --color-option-3-cta-hover: #033B01;
        --color-option-3-info-bg: var(--color-option-3-accent);
        --color-option-3-info-text: #FFF;

        /* Custom dark mode adjustments */
        --color-focus-ring-custom: #fff;

    }
}

html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
}

*,
:before,
:after {
    box-sizing: border-box;
    outline-offset: 7px;
}


img,
svg,
video,
picture {
    max-inline-size: 100%;
    block-size: auto;
}

address {
    font-style: normal;
    display: inline;
}

:focus-visible {
    outline: 2px solid var(--color-focus-ring, currentColor);
    outline-offset: var(--focus-ring-offset, .25rem);
    transition: outline-offset .2s ease-in;
}

[id] {
    scroll-margin-top: 6ex;
}

::selection {
    background-color: lightblue;
    color: #000;
}

@supports (-webkit-overflow-scrolling: touch) {
    html {
        font: -apple-system-body;
    }
}

body {
    background: var(--color-base-light);
    color: var(--color-base-dark);
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: var(--size-step-0);
    line-height: 1.5;
    margin: 0;
    min-block-size: 100vh;
    overflow-wrap: break-word;
}

.hidden {
    display: none;
}

.visually-hidden.site-skip:focus {
    all: unset;
    clip: revert;
    clip-path: revert;
    inline-size: revert;
    block-size: revert;
    overflow: revert;
    position: relative;
    white-space: revert;
    margin-inline: auto;
    display: block;
    text-align: center;
    padding: var(--size-step-0);
    inline-size: 100%;
    z-index: 1500;
    background: var(--color-link);
    color: var(--color-base-light);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
}

[dir="rtl"] .flip-rtl,
.flip {
    transform: scaleX(-1);
}

.area-hr {
    display: block;
    forced-color-adjust: none;
    block-size: .25rem;
    inline-size: 95%;
    border-radius: var(--border-radius--pill);
    background: canvasText;
    margin-block: var(--gutter);
    margin-inline: auto;
}

@media (forced-colors: none) {

    .area-hr {
        display: none;
    }

    .area-bg {
        position: absolute;
        overflow: hidden;
        block-size: 100%;
        inset-block-end: 0;
        pointer-events: none;
        user-select: none;
        display: block;
    }

    .area-bg--start {
        inset-inline-start: 0;
    }

    .area-bg--end {
        inset-inline-end: 0;
    }

    .area-bg>* {
        position: relative;
        fill: #fff;
        opacity: .05;
        block-size: calc(100% + 2rem);
        inline-size: 100%;
        user-select: none;
        pointer-events: none;
    }
}


.inner {
    max-inline-size: var(--width-inner);
    margin-inline: auto;
}

.section {
    padding: var(--gutter);
}

.option--1 {
    --color-option-light: var(--color-option-1-accent);
    --color-button-bg: var(--color-option-1-cta);
    --color-option-button-hover-bg: var(--color-option-1-cta-hover);
    --color-option-info-bg: var(--color-option-1-info-bg);
    --color-option-info-text: var(--color-option-1-info-text);
    --color-option-info-link: currentColor;
}

.option--2 {
    --color-option-light: var(--color-option-2-accent);
    --color-button-bg: var(--color-option-2-cta);
    --color-option-button-hover-bg: var(--color-option-2-cta-hover);
    --color-option-info-bg: var(--color-option-2-info-bg);
    --color-option-info-text: var(--color-option-2-info-text);
    --color-option-info-link: currentColor;
}

.option--3 {
    --color-option-light: var(--color-option-3-accent);
    --color-button-bg: var(--color-option-3-cta);
    --color-option-button-hover-bg: var(--color-option-3-cta-hover);
    --color-option-info-bg: var(--color-option-3-info-bg);
    --color-option-info-text: var(--color-option-3-info-text);
    --color-option-info-link: currentColor;
}

.button {
    max-inline-size: 100%;
    padding: calc(var(--gutter)/ 4) calc(var(--gutter) / 2);
    background: var(--color-button-bg, var(--color-default-cta-bg));
    color: var(--color-button-text, var(--color-default-cta-text));
    border-radius: var(--border-radius);
    border: 2px solid var(--color-button-border, transparent);
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    text-decoration-color: transparent;
    cursor: pointer;
}

.button:is(:focus-visible, :hover) {
    text-decoration: var(--button-hover-decoration, revert);
    text-decoration-color: currentColor;
    background: var(--color-button-hover-bg, var(--color-option-button-hover-bg, var(--color-link-hover-bg)));
    color: var(--color-button-hover-text, var(--color-default-cta-text));
}

.button:active {
    transform: scale(0.98);
}

.button.button--full {
    width: 100%;
}

.icon-button {
    --color-focus-ring: var(--color-base-dark);
    --color-button-bg: none;
    --color-button-text: currentColor;
    --color-button-hover-bg: none;
    --button-hover-decoration: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
    gap: .5rem;
    padding: .125rem;
    border: none;
}

.icon-button .button__icon-wrapper {
    border: 2px solid var(--color-button-icon-border, var(--color-base-dark));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    padding: .25rem;
}

.icon-button:is(:focus-visible, :hover) .button__icon-wrapper {
    background-color: var(--color-link-hover-bg);
    color: var(--color-button-hover-text, var(--color-default-cta-text));
    border-color: var(--color-button-hover-border, transparent);
}

.icon-button:is(:focus-visible, :hover) .button__text {
    text-decoration: underline;
    text-decoration-color: var(--color-link-underline, currentColor);
    text-decoration-thickness: var(--link-underline-thickness, 0.3ex);
    text-underline-offset: 0.3ex;
    color: var(--color-button-icon-text, var(--color-base-dark));
}

.arrow-up {
    transform: rotate(-90deg);
}

:where(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
}

a {
    --color-focus-ring: var(--color-focus-ring-custom, var(--color-link-hover-bg));

    color: var(--color-link);
    text-decoration-color: var(--color-link-underline, currentColor);
    text-decoration-thickness: var(--link-underline-thickness, 0.3ex);
    text-underline-offset: 0.3ex;
    border-radius: var(--border-radius);
    padding: .2rem;
    transition: text-underline-offset .35s ease-in-out,
        text-decoration-thickness .15s ease-in-out,
        text-decoration-color .15s ease-in-out,
        outline-offset .25s ease-in;
}

a:not([target="_blank"]) .new-tab {
    display: none;
}

a[target="_blank"]:not(.button) svg {
    font-size: .8em;
    margin-inline-start: 0.2em;
    vertical-align: text-top;
}

a:is(:focus-visible, :hover) {
    color: var(--color-link-hover-text, var(--color-default-cta-text));
    background-color: var(--color-link-hover-bg);
    text-underline-offset: .15rem;
    text-decoration-color: var(--color-link-underline-hover, transparent);
    text-decoration-thickness: var(--link-underline-thickness-hover, 0.1ex);
}

h1,
h2,
h3 {
    font-family: Inter, sans-serif;
    font-weight: 800;
    line-height: 1.1;
    text-wrap: balance;
    letter-spacing: .01em;
}

h1 {
    font-size: var(--size-step-4);
}

h2 {
    font-size: var(--size-step-3);
}

h3 {
    font-size: var(--size-step-2);
}

ul,
ol {
    padding-inline-start: 1em;
}

blockquote {
    margin-inline: 0;
    padding-inline-start: 1em;
    border-inline-start: 0.3em solid var(--color-default-cta-bg, currentColor);
    font-style: normal;
    font-weight: bold;
    font-size: var(--size-step-1);
}

blockquote p {
    max-inline-size: 45ch;
    text-wrap: balance;
}

figure {
    margin-inline: 0;
}

figcaption,
blockquote cite {
    font-style: italic;
    font-size: var(--size-step-0);
    color: #5E5E5E;
    max-inline-size: 50ch;
    text-wrap: balance;
}

.content li::marker {
    color: var(--color-default-divider);
    font-weight: bold;
}

.content li + li {
    margin-block-start: .5em;
}

/* Layout */
.flexbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, var(--gutter));
    justify-content: var(--justify);
    align-items: var(--align);
}

.flexbox-grid>* {
    flex: 1 1 var(--min, 25ch);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 25ch), var(--max, 100%)), 1fr));
    gap: var(--gap, var(--gutter));
    justify-content: var(--justify);
    align-items: var(--align);
}

/* sections */
.header {
    --logo-bg: var(--color-default-cta-bg);
    --logo-text-inner: var(--color-default-cta-text);
    --logo-text-under: var(--color-base-dark);

    background: var(--color-base-light);
    color: var(--color-base-dark);
    padding: calc(var(--gutter)/2) var(--gutter);
}

.top-navigation {
    --align: center;
    --justify: center;
    --min: 20rem;
    --gap: 0;
}


.logo-wrapper {
    --align: center;
    --justify: end;
    max-inline-size: 8rem;
    display: flex;
}

.logo {
    display: flex;
    flex: 1;
}

.logo__link {
    --color-focus-ring: var(--color-focus-ring-custom, var(--color-default-cta-bg));
    --color-link-hover-bg: none;
    --color-link: inherit;
    --color-link-hover: inherit;
    text-decoration: none;
    display: inline-block;
    /* flex: 1; */
    border-radius: var(--border-radius);
}

.logo-icon {
    min-inline-size: min(100%, 8rem);
    block-size: auto;
    /* 6.25rem */
}

.logo-bg {
    fill: var(--logo-bg, #000);
}

.logo-text-inner {
    fill: var(--logo-text-inner, #FFF);
}

.logo-text-under {
    fill: var(--logo-text-under, #FFF);
}

.links-wrapper {
    --align: center;
    --justify: end;
    display: flex;
}

.links {
    --gap: calc(var(--gutter)/2);
    --justify: center;

    padding: 0;
    list-style: none;
    margin-inline-start: auto;
    min-inline-size: 100%;
}

.links > li{
    position: relative;
    flex: 0 0 100%;
}

.links > li:not(:last-child)::after {
    --_size: .5em;
    content: '';
    display: none;
    position: absolute;
    inline-size: var(--_size);
    block-size: var(--_size);
    border-radius: 50%;
    background-color: var(--color-default-divider);
    inset-inline-end: 0;
    inset-block-start: 50%;
    margin-inline-end: calc(((var(--gap)/2) + (var(--_size) / 2)) * -1);
    /* minus half gap */
    margin-block-start: calc((var(--_size) / 2) * -1);
    /* minus half height */
    forced-color-adjust: none;
    pointer-events: none;
}

.links a{
    color: var(--color-top-links);
    padding: calc(var(--gutter) / 4);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    gap: .75em;
    align-items: center;
}

.links a:is(:focus-visible, :hover) {
    color: var(--color-default-cta-text);
    text-decoration: revert;
    text-decoration-color: currentColor;
}

@media (min-width: 20rem) {
    .links>li {
        flex: 0 0 auto;
    }

    .links>li:not(:last-child)::after {
        display: block;
    }

}

@media (min-width: 35.9rem) {
    .links {
        --justify: end;
        min-inline-size: 0;
    }
}

.page-settings{
    flex:0;
    position: relative;
}

.settings-heading{
    display: none;
    font-size: var(--size-step-0);
    font-weight: bold;
}

.settings-heading.button{
    color: var(--color-default-dark);
    border-color: var(--color-default-dark);
    background: none;
}

.settings-inner{
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end:0;
    margin-block-start: .5rem;
    border: 1px solid var(--color-base-dark);
    background: var(--color-default-light);
    min-inline-size:100%;
    z-index: 10;
}

.settings-inner ul{
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
}
.settings-inner *{
    margin:0;
}



.settings-inner .settings__theme-button{
    display: block;
    padding: calc(var(--gutter)/2);
    inline-size:100%;
    color: var(--color-default-dark);

}





.page-breadcrumbs{
    background: var(--color-option-light);
    border-block: 2px solid transparent;
}

.scroll{
    display:flex;
    inline-size:100%;
    overflow:auto;
}

.scroll--reverse{
    flex-direction: row-reverse;
}


.breadcrumbs {
    --gap: calc(var(--gutter)/2);
    padding: .250rem;
    margin:0;
    list-style: none;
    position: relative;
    z-index: 1;
    flex-wrap: nowrap;
    min-inline-size: max-content;
    margin-inline-end: auto;
}

.breadcrumbs > li{
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.breadcrumb-current,
.breadcrumbs > li > a {
    --color-link-hover-bg: none;
    --color-focus-ring-custom: var(--color-base-dark);
    color: var(--color-base-dark);
    padding: calc(var(--gutter) / 4);
    border-radius: var(--border-radius);
    font-weight: bold;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
}
.breadcrumbs > li > a:is(:focus-visible, :hover) {
    outline-offset: -.125rem;
    text-decoration-color: currentcolor;
}

.breadcrumb-current{
    color: var(--color-default-accent-dark);
}

.breadcrumbs > li > .breadcrumb__divider{
    --_size: 1em;
    display: block;
    position: absolute;
    inline-size: var(--_size);
    block-size: var(--_size);
    inset-inline-end: 0;
    inset-block-start: 50%;
    margin-inline-end: calc(((var(--gap)/2) + (var(--_size) / 2)) * -1);
    /* minus half gap */
    margin-block-start: calc((var(--_size) / 2) * -1);
    /* minus half height */
    pointer-events: none;
}

.breadcrumbs > li > .breadcrumb__divider > svg{
    width: var(--_size);
    height: var(--_size);
}

.breadcrumbs > li:last-child > .breadcrumb__divider{
    display: none;
}




.page-info {
    --min: 40ch;
    --color-button-bg: var(--color-default-cta-bg);
    --color-link: currentColor;

    background-color: var(--color-option-info-bg, var(--color-default-light));
    color: var(--color-option-info-text, inherit);
    padding: var(--gutter);
    overflow: hidden;
    position: relative;
}

@media (forced-colors: active) {
    .page-info__content {
        position: relative;
    }

    .page-info__content::before {
        content: '';
        display: block;
        position: absolute;
        inset-inline-start: calc((var(--gutter))* -1);
        block-size: 100%;
        inline-size: calc(var(--gutter)/2);
        background-color: var(--color-option-info-bg, var(--color-default-light));
        forced-color-adjust: none;
    }
}

[class*="option"] .page-info {
    --color-focus-ring-custom: currentColor;
    --color-button-border: currentColor;
    --color-button-bg: none;
}

.page-info__media {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.page-info__media:empty {
    display: none;
}


.page-info__media > :is(.fake-image, iframe) {
    inline-size: 100%;
    block-size: auto;
    min-inline-size: min(100%, 20rem);
    min-block-size: min(100%, 20rem);
    max-block-size: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
}

.page-info__media .info-image {
    position: absolute;
    object-fit: cover;
    inset-inline-start: 0;
    inline-size: max(100%, 50vw);
    max-inline-size: min(100vw, 75rem);
}

.page-content {
    padding: var(--gutter);
}

.page-content:has(.page-content__toc details:not([open])) {
    padding-block-start: calc(var(--gutter)/2);
}

.page-content > * {
    row-gap: calc(var(--gutter)/2);
}

.section-heading {
    margin-block-end: 0;
}

.section-heading+.heading-description {
    margin-block-start: .5em;
}

.cards-wrapper {
    --min: 25ch;
    --gap: var(--gutter);

    container-type: inline-size;
    container-name: cards-wrapper;
}

.cards-wrapper > * > .card:only-child {
    flex-direction: row;
}

.card {
    display: flex;
    border: 1px solid var(--color-card-border, var(--color-button-bg, #121212));
    border-radius: var(--border-radius);
    overflow: hidden;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: var(--color-option-light, var(--color-base-light));
    position: relative;
}

@media (forced-colors: active) {
    .card {
        forced-color-adjust: none;
        background-color: canvas;
        --color-button-border: var(--color-button-bg);
    }

    .card::after {
        content: '';
        display: block;
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        block-size: .5rem;
        background-color: var(--color-option-light);
        pointer-events: none;
    }

    .card .button {
        background-color: canvas;
        color: LinkText;
    }
}


@container cards-wrapper (max-width: 90ch) {
    .grid {
        --min: 100%;
    }

    .card {
        flex-direction: row;
    }
}

.card__start,
.card__end {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    min-inline-size: min(100%, 15rem);
    inline-size: 100%;
}

.card__end {
    flex-grow: 1.5;
}

.card__image {
    position: relative;
    flex: 1;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    line-height: 1;
    display: flex;
}

/* 
.card__image::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: var(--color-option-overlay, var(--color-button-bg));
    opacity: var(--color-option-overlay-opacity, .15);
    pointer-events: none;
    forced-color-adjust: none;
} */

.card__image > img, 
.card__image > * {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.card__content {
    padding: calc(var(--gutter) / 2);
}

.card__content>:first-child {
    margin: 0;
}

.card__content,
.card__cta {
    min-inline-size: 100%;
    margin: 0;
}

.card__cta {
    margin-block-start: auto;
    padding: calc(var(--gutter) / 2);
    padding-block-start: 0;
}

/* Steps..*/
.flow > * + .step-wrapper{
    --min:40ch;
    --gap: 0;
    margin-block-start: calc(var(--gutter) * 2);
    border:.075rem solid var(--color-default-accent-dark);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.step-wrapper:last-child{
    margin-block-end: var(--gutter);
}

.step-image{
    --justify:space-around;
    --gap:1rem;
    flex-wrap: nowrap;
    align-items: center;
    padding: calc(var(--gutter)*2) var(--gutter);
    /* pointer-events: none; */
    user-select: none;
    forced-color-adjust: none;
}

.step-image__number,
.step-image__circle{
    --_background: var(--color-base-light);
    --_accent-color: var(--color-default-accent-dark);
    --_border-width: .25rem;
    background: var(--_background);
    color: var(--_accent-color);
    border: var(--_border-width) solid var(--_accent-color);
    border-radius: 50%;
    padding: .1em;
    aspect-ratio: 1/1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: var(--size-step-0);
    box-sizing: content-box;
    line-height: 1.05;
}

@media (min-width: 20rem) {
    .step-image__number,
    .step-image__circle{
        font-size: var(--size-step-1);
    }
}
@media (min-width: 30rem) {
    .step-image__number,
    .step-image__circle{
        font-size: var(--size-step-2);
    }
}

.step-image__number{
    min-inline-size: 1em;
    position: absolute;
    inset-block-start:0;
    transform: translatey(-50%);
}
.step-image__text{
    inline-size:min-content;
    position: relative;
    display: flex;
    justify-content: center;
}

.step-image__circle--current .step-image__number,
.step-image__circle--current.step-image__circle{
    --_background: var(--color-default-accent-dark);
    --_accent-color: var(--color-base-light);
}
.step-image__circle--current .step-image__number{
    --_border-width: .425rem;
}

.step-image__circle--current .step-image__text::after{
    content:'';
    display: block;
    block-size: .25rem;
    inline-size:66%;
    max-inline-size: 75%;
    border-radius: 999vh;
    background: var(--_accent-color);
    position: absolute;
    inset-block-end:0;
    transform: translatey(.5rem);
}

.step-image__next{
    position: absolute;
    color: var(--color-default-accent-dark);
    inset-inline-start:100%;
    inset-block-start:-2rem;
    /* transform: translate(-50%); */
    margin-inline-start: -1.5rem;
    inline-size: 4rem;
}

.step-content-wrapper{
    padding: var(--gutter);
    background: var(--color-option-light);
    display:flex;
    align-items: center;
}





/* Table of Content. */
.page-content__toc {
    --color-focus-ring-custom: currentColor;
    --toc-title-size: var(--size-step-3);
    --color-toc-title-text: var(--color-option-info-text, inherit);
    --color-toc-title-bg: var(--color-option-info-bg, var(--color-default-light));
    --toc-title-padding-block: calc(var(--gutter)/2);
    --toc-title-padding-inline: calc(var(--gutter)/2);
    --toc-border-color: var(--color-option-info-bg, var(--color-default-dark));
    --toc-border: 1px solid var(--toc-border-color);
    /* Alt 2 */
    --color-toc-title-text: inherit;
    --color-toc-title-bg: none;
    --toc-border: none;
    --toc-border-color: var(--color-default-dark);
    --toc-title-bottom-border: 2px solid var(--color-base-dark);
    --toc-title-padding-block: .375rem;
    --toc-title-padding-inline: calc(var(--gutter)/2);
    --toc-title-size: var(--size-step-1);
    --toc-border-radius: 0;

    /* flex: 0 0 var(--toc-width, 20rem); */
    min-inline-size: min(100%, 20rem);
    max-inline-size: min(100%, 20rem);
}

.toc {
    border: var(--toc-border, 1px solid transparent);
    border-radius: var(--toc-border-radius, var(--border-radius));
    position: sticky;
    inset-block-start: calc(var(--gutter)/2);
    padding-block-end: var(--toc-title-padding-block);
}

.page-content__toc:has(details:not([open])){
    --toc-width: 100%;
    flex: 0 0 var(--toc-width, 100%);
    max-inline-size: 100%;
}

details > summary.button{
    list-style:none;
}

details > summary.button::-webkit-details-marker{
    display:none;
}

details[open] .toc__title {
    font-size: var(--toc-title-size, var(--size-step-2));
    /* padding-inline: var(--toc-title-padding-inline); */
    padding-block: var(--toc-title-padding-block);
    border-block-end: var(--toc-title-bottom-border, 1px solid transparent);
    background-color: var(--color-toc-title-bg);
    color: var(--color-toc-title-text, inherit);
    max-inline-size: 20rem;
    inline-size: 100%;
    display: flex;
    line-height: 1.1;
    border-radius: 0;
    justify-content: start;
    position: relative;
    z-index: 1;
}

details[open] .toc__title:is(:focus-visible, :hover) .button__text {
    text-decoration: none;
}

.page-content__toc details .toc__title svg > .plus-minus {
    transform-origin: center;
    transition: transform .15s linear;
}

.page-content__toc details[open] .toc__title svg > .plus-minus{
    transform: scaley(0);
}

.toc__navigation {
    padding: 0;
    margin: 0;
    list-style: none;
    max-block-size: calc(100vh - var(--toc-title-size) - (var(--toc-title-padding-block) * 3) - var(--size-step-0) - calc(var(--gutter)*2));
    overflow: auto;
    border-block-end: 2px solid var(--toc-border-color);
    margin-bottom: calc(var(--gutter) / 2);
}

.settings__theme-button,
.toc__navigation a {
    --color-link: var(--color-base-dark);
    --color-link-hover-text: var(--color-base-dark);
    --color-link-hover-bg: var(--color-option-light, var(--color-default-light));
    display: block;
    padding: 1rem calc(var(--gutter) / 2);
    border-radius: 0;
    font-weight: bold;
    position: relative;
    outline-offset: -.75rem;
}

.settings__theme-button::before,
.toc__navigation a::before {
    content: '';
    display: block;
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: .25rem;
    inline-size: 100%;
    background-color: var(--color-toc-link-border, transparent);
    border-radius: var(--border-radius);
    opacity: var(--color-toc-link-border-opacity, 0);
    pointer-events: none;
}

/* State for WHCM */
.settings__theme-button[aria-current="true"]::after,
.toc__navigation [aria-current="true"]::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid transparent;
}
.settings__theme-button:is(:focus-visible, :hover):not([aria-current="true"]),
.toc__navigation a:is(:focus-visible, :hover):not([aria-current="true"]) {
    --color-toc-link-border: var(--color-toc-link-hover-border, var(--color-base-dark));
    --color-toc-link-border-opacity: var(--color-toc-link-hover-border-opacity, .35);
    text-decoration: none;
}

.settings__theme-button[aria-current="true"],
.toc__navigation [aria-current="true"] {
    --color-toc-link-border: var(--color-toc-link-active-border, var(--color-default-divider));
    --color-toc-link-border-opacity: var(--color-toc-link-active-border-opacity, 1);
    background-color: var(--color-option-light, var(--color-default-light));
}

.settings__theme-button:focus-visible,
.toc__navigation a:focus-visible {
    outline-offset: -.375rem;
}


.toc__navigation+.button {
    padding-inline: calc(var(--gutter)/2);
}

.page-content__content {
    padding-block-end: calc(var(--gutter)/2);
}

.page-content__post {
    min-width: min(100%, var(--min, 25ch));
    /* max-width: min(100%, var(--width-article)); */
}


/* Footer */
.about {
    --color-focus-ring-custom: var(--color-link-hover-bg);
    --min: 30ch;
    --color-link: currentColor;
    --color-link-hover-bg: #fff;
    --color-link-hover-text: #000;
    --color-link-underline-hover: transparent;
    --logo-bg: var(--color-default-cta-bg);
    --logo-text: var(--color-default-cta-text);

    background-color: var(--color-about-bg, var(--color-footer));
    color: var(--color-about-text, #FFF);
    padding: var(--gutter);
    position: relative;
}

.about__section > *:first-child {
    margin-block-end: 1rem;
    font-size: var(--size-step-2);
}

.about__section > :is(h1, h2, h3):not(:is(:first-child, .about__section__name)) {
    margin-block: 2rem 1rem;
    font-size: var(--size-step-2);
}

.about__section__name {
    margin-block: 2rem .5rem;
    font-weight: bold;
    font-size: var(--size-step-0);
}

.about__section :first-child + .about__section__name {
    margin-block-start: 0;
}

.about__section div + div {
    margin-block-start: .5rem;
}

.icon-link{
    display:inline-flex;
    align-items: center;
    gap: .5em;
}

.icon-link svg{
    inline-size:1.5em;
}

.page-partners{
    --gap: var(--gutter);
    --justify: center;
    background: var(--color-default-light);
    padding: var(--gutter);
}

.partner-wrapper{
    forced-color-adjust: none;
    background: #fff;
    border-radius: var(--border-radius);
    max-inline-size: 20rem;
    aspect-ratio: 16 / 9;
    padding: calc(var(--gutter) / 2);
    display:flex;
    align-items: center;
    justify-content: center;
}

/* Utilities */
blockquote > * + *,
.flow > * + * {
    margin-block-start: 1em;
}

blockquote>*:first-child,
.flow > *:first-child {
    margin-block-start: 0;
}

/* Line lengths */
h1 {
    max-inline-size: 25ch;
}

h2 {
    max-inline-size: 28ch;
}

:where(h3, h4, h5, h6) {
    max-inline-size: 33ch;
}

p,
li,
blockquote {
    max-inline-size: 65ch;
}

/* Center inline images */
.page-content img {
    vertical-align: middle;
}

/* Blocks */
.page-info__content {
    font-size: var(--size-step-1);
    max-inline-size: 50ch;
    text-wrap: pretty;
}

.page-info__content .title {
    font-size: var(--size-step-2);
    font-weight: bold;
    text-wrap: balance;
}

.wp-block-embed__wrapper iframe,
.embed > * {
    aspect-ratio: 16/9;
    max-inline-size: 100%;
    block-size: auto;
}

/* counter wp columns... */
html body .is-layout-flex{
    display: block;
}


figcaption{
    font-variant: normal;
    color: var(--color-base-dark);
    font-size: var(--size-step-0);
}

.table-wrapper {
    inline-size: 100%;
    overflow-x: auto;
}

.content table {
    --_table-th-count-value: 16rem; /* 9rem */
    --color-link: currentColor;
    min-inline-size: var(--_table-th-count, 25rem);
    max-inline-size: 100%;
    inline-size: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background-color: var(--color-default-light,#ededed);
    border:1px solid transparent;
}

.content table:has(tr > *:nth-child( n + 2 )),
.content table:has(thead > tr > *:nth-child( n + 2 )) {
   --_table-th-count: calc(var(--_table-th-count-value) * 2); 
}

.content table:has(tr > *:nth-child( n + 3 )),
.content table:has(thead > tr > *:nth-child( n + 3 )) {
   --_table-th-count: calc(var(--_table-th-count-value) * 3); 
}

.content table:has(tr > *:nth-child( n + 4 )),
.content table:has(thead > tr > *:nth-child( n + 4 )) {
    --_table-th-count: calc(var(--_table-th-count-value) * 4); 
 }

 .content table:has(tr > *:nth-child( n + 5 )),
 .content table:has(thead > tr > *:nth-child( n + 5 )) {
    --_table-th-count: calc(var(--_table-th-count-value) * 5); 
 }

 .content table:has(tr > *:nth-child( n + 6 )),
 .content table:has(thead > tr > *:nth-child( n + 6 )) {
    --_table-th-count: calc(var(--_table-th-count-value) * 6); 
 }

 .content table:has(tr > *:nth-child( n + 7 )),
 .content table:has(thead > tr > *:nth-child( n + 7 )) {
    --_table-th-count: calc(var(--_table-th-count-value) * 7); 
 }

 .content table:has(tr > *:nth-child( n + 8 )),
 .content table:has(thead > tr > *:nth-child( n + 8 )) {
    --_table-th-count: calc(var(--_table-th-count-value) * 8); 
 }

.content table caption{
    text-align: start;
}

.content table th,
.content table td {
    padding: calc(var(--gutter)/2) calc(var(--gutter)/4);
}

.content table thead th {
    text-align: start;
    font-weight: bold;
    border-bottom: 2px solid var(--color-default-divider, var(--color-base-dark, #000));
}

.content table tbody tr {
    border-block-end: 2px solid var(--color-base-light, #fff);
    background-color: var(--color-default-light);
}

.content table tbody th,
.content table tbody td {
    vertical-align: top;
}

/*CHeck if there are 3 or more rows and add odd/even styling */
.content table:has(tbody tr:nth-child(3)) tbody tr:nth-child(even) {
    background-color: var(--color-option-light, var(--color-default-light-even));
}

/* Counter defult wp stripe */
.page-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd){
    background-color: var(--color-default-light);
}

/* ==========================================================================
   MOBIL OCH GRUNDINSTÄLLNINGAR
   ========================================================================== */

/* --- KNAPP: "OM INDIVIDUELL PLAN" (Mobil) --- */
.page-info__content .button {
    font-size: 14px !important;
    padding: 8px 16px !important;
}

/* Underrubriken ("Börja här...") - Grundinställning */
.heading-description {
    font-size: 18px !important;
    line-height: 1.3 !important; 
}


/* ==========================================================================
   STEG 1: Extrem optimering för Desktop ("Above the fold")
   ========================================================================== */
@media (min-width: 1024px) {
	
	/* --- SIDFOT PÅ DESKTOP: TVINGA FRAM 3 KOLUMNER SIDA VID SIDA --- */
    footer .about .inner {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 40px !important; 
        align-items: start !important; 
    }

    /* --- KNAPP: "OM INDIVIDUELL PLAN" (Desktop) --- */
    .page-info__content .button {
        font-size: 16px !important;
        padding: 10px 20px !important;
    }

    /* --- 1. KRYMP HEADERN (VITA TOPPEN) --- */
    .header {
        padding-top: 15px !important; 
        padding-bottom: 15px !important;
    }
    .logo-icon {
        max-height: 85px !important; 
        width: auto !important;
    }

    /* --- 2. KRYMP DEN ROSA RUTAN --- */
    .page-info {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* --- 3. TYPOGRAFI & TEXT I ROSA RUTAN --- */
    .page-info__content .title,
    .page-info__content h1 {
        font-size: var(--size-step-1) !important; 
        line-height: 1.05 !important;
        margin-bottom: 8px !important; 
        margin-top: 0 !important;
    }
    
    .page-info__content p,
    .page-info__content ul,
    .page-info__content li {
        font-size: 18px !important; 
        line-height: 1.3 !important; 
        margin-bottom: 10px !important; 
    }
    
    .page-info__content li + li {
        margin-block-start: 0 !important; 
    }

    .page-info__content > *:last-child {
        margin-bottom: 0 !important;
    }

    /* --- 4. TVINGA TEXT OCH VIDEO ATT LIGGA SIDA VID SIDA --- */
    .page-info > .inner,
    .page-info > div {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; 
        align-items: center !important; 
        gap: 40px !important; 
    }

    .page-info__content {
        flex: 1 1 55% !important;
        max-width: 55% !important;
        min-width: 0 !important; 
    }

    .page-info__media {
        flex: 1 1 45% !important;
        max-width: 45% !important;
        min-width: 0 !important;
    }
    
    .page-info__media > iframe, 
    .page-info__media > .fake-image {
        width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
        margin: 0 auto !important;
    }

    /* --- 5. LINJERA ALLT I EN PERFEKT KOLUMN PÅ 950px --- */
    body {
        --width-inner: 950px !important;
    }

    .section-heading,
    .heading-description {
        max-width: 950px !important; 
        margin-left: auto !important; 
        margin-right: auto !important; 
        text-align: left !important; 
    }

    .section-heading {
        margin-top: 0 !important;
        margin-bottom: 5px !important; 
        font-size: var(--size-step-1) !important; 
        line-height: 1.05 !important;
    }

    .heading-description {
        margin-top: 0 !important;
        margin-bottom: 30px !important; 
        /* Storleken (16px) hämtas automatiskt från mobilregeln högst upp! */
    }

    /* --- 6. KORTEN (Smalare layout och tre kolumner) --- */
    .cards-wrapper {
        margin-top: 15px !important;
        max-width: 950px !important; 
        margin-inline: auto !important;
    }

    .cards-wrapper .grid,
    .cards-wrapper > div {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .cards-wrapper .card {
        flex-direction: column !important;
    }

    .card__image {
        aspect-ratio: 16 / 9 !important; 
        max-height: none !important; 
    }

    .card__content {
        padding: 15px 20px !important;
    }
    
    .card__cta {
        margin-block-start: auto !important;
        padding: 0 20px 15px !important; 
    }
    
    .card__content h2,
    .card__content h3 {
        font-size: var(--size-step-0) !important; 
        margin-bottom: 5px !important;
        line-height: 1.1 !important;
    }
    
    .card__content p,
    .card__content ul {
        margin-bottom: 0 !important; 
        font-size: 0.9em !important;
    }

    .card__content li + li {
        margin-block-start: 0 !important; 
    }
    
    .card__cta .button {
        padding: 8px 16px !important;
        font-size: 0.85em !important;
    }

} /* <--- HÄR ÄR DEN AVSLUTANDE MÅSVINGEN FÖR DESKTOP! */

/* ==========================================================================
   SIDFOT / FOOTER - EXAKT TRÄFFBILD
   ========================================================================== */

/* Träffar all brödtext i footern */
footer p,
footer address,
footer a,
footer li,
footer span,
footer div.about__section {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important; 
}

/* Länkarna i footern (Email, telefon, Facebook) */
footer a {
    text-decoration: underline !important; /* Gör det tydligt att det är länkar */
}

/* Rubrikerna i footern ("Kontakt", "Adress", "Sociala medier" etc) */
footer h2,
footer h3 {
    font-size: var(--size-step-1) !important; 
    line-height: 1.05 !important;
    margin-bottom: 15px !important;
}

/* De specifika namnen på personerna i listan */
footer .about__section__name {
    font-size: 18px !important; /* Lite större för att de ska sticka ut! */
    margin-bottom: 2px !important;
    margin-top: 15px !important; /* Mer luft ovanför varje ny person */
}