/* CDN Variables - Defined first for use in @font-face and other rules */
:root {
    --cdn-link: https://cdn.mobino.no/prod/static;
    --cdn-font-regular: url(https://cdn.mobino.no/prod/static/css/montserrat-regular.woff2);
    --cdn-font-medium: url(https://cdn.mobino.no/prod/static/css/montserrat-medium.woff2);
    --cdn-font-semibold: url(https://cdn.mobino.no/prod/static/css/montserrat-semibold.woff2);
    --cdn-gradient: url(https://cdn.mobino.no/prod/static/img/gradient.webp);
    --cdn-image-text-vector: url(https://cdn.mobino.no/prod/static/img/image_text_block_vector.svg);
}

/* Montserrat Font Faces */
@font-face {
    font-family: 'Montserrat';
    src: var(--cdn-font-regular) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: var(--cdn-font-medium) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: var(--cdn-font-semibold) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Default roots */
:root {
    font-size: 10px; /* for rem */
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    --main-font: "Montserrat", sans-serif;
    --secondary-font: "Montserrat", sans-serif;
    --default-padding: 0 4rem 0 4rem;
    --default-padding-one: 4rem;
    --statcats-primary: #000000;
    --statcats-secondary: #FFFFFF;
    --page-max-width: 1440px;
    --content-max-width: 1260px;
    --text-max-width: 600px;
    --special-effect-color: rgb(164, 26, 174);

    --scrollbar-height: 0.65rem;
    --scrollbar-track-color: transparent;
    --scrollbar-thumb-color: #6b6b6b;
    --scrollbar-thumb-border-radius: 10px;
    --scrollbar-thumb-color-hover: var(--statcats-primary);

    --scrollbar-thumb-color-secondary: #d3d3d3;
    --scrollbar-thumb-color-secondary-hover: var(--statcats-secondary);

    --color-pink: #F366FF;
    --color-yellow: #F9B400;
    --color-green: #CCD200;

    --main-gradient: linear-gradient(90deg, #000066 0%, #0000FF 50%, #8E51FF 100%);

    --color-primary-dark: #c1dbd2;
    --color-primary-medium: #d4e6df;
    --color-primary-light: #e8f1ed;
    --color-primary-light-rgb: 232, 241, 237;
    --color-primary-lighest: #f5f9f7;

    --color-secondary-dark: #e6a461;
    --color-secondary-medium: #e3bf90;
    --color-secondary-light: #efdcc2;
    --color-secondary-lighest: #f8f0e7;

    --color-slate-700: #314158;
    --color-slate-600: #45556C;
    --color-slate-500: #62748E;
    --color-slate-400: #90A1B9;
    --color-slate-200: #E2E8F0;
    --color-slate-100: #F1F5F9;
    --color-secondary: #ffffff;
    --color-primary: #000033; /* 900 */
    --color-primary-900: #000033;
    --color-primary-800: #000066;
    --color-primary-700: #000099;
    --color-primary-600: #0000cc;
    --color-primary-500: #0000FF;
    --color-primary-400: #3d5cf5;
    --color-primary-300: #8195f8;
    --color-primary-200: #b1befb;
    --color-primary-100: #D8DEFD;
    --color-primary-50: #f0f3fe;
    --color-tertiary: #2F0D68;

    --main-font-size: 1.8rem;

    --make-white: hue-rotate(0deg) saturate(0%) brightness(0%) invert(1);

    --hover-effect : brightness(0.95) saturate(150%);

    --small-arrow-down : url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMSAxLjUxNTYyTDUuNSA2LjA4NTk0TDEwIDEuNTE1NjIiIHN0cm9rZT0iIzBEMzA1MCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo=");
    --phone-icon : url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYwIDYwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMEQzMDUwOwogICAgICAgIHN0cm9rZS13aWR0aDogMHB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01NS40LDQxLjNsLTcuMS03LjFjLTIuNy0yLjgtNy4yLTIuOC0xMCwwaDBjLS40LjQtLjkuNC0xLjMsMGwtMTEuMy0xMS4zYy0uNC0uNC0uNC0xLDAtMS4zLDIuOC0yLjcsMi44LTcuMiwwLTEwbC03LjEtNy4xYy0yLjgtMi44LTcuMi0yLjgtMTAsMGwtMS43LDEuN0MyLDExLjMsMS4xLDE5LjEsNC45LDI1aDBjNy45LDExLjksMTguMSwyMiwyOS45LDMwaDBzMCwwLDAsMGMyLjQsMS41LDUuMiwyLjQsOC4xLDIuNCw0LDAsNy44LTEuNiwxMC42LTQuNGwxLjctMS43aDBjMi44LTIuOCwyLjgtNy4yLDAtMTBaTTIxLjQsMTcuM2MtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTEuMywxMS4zYzIuNywyLjcsNy4yLDIuOCw5LjksMGgwYzAsMCwwLDAsMCwwLC40LS40LDEtLjQsMS4zLDBsNy4xLDcuMXMwLDAsMCwwYy40LjQuNCwxLDAsMS4zbC0xLjcsMS43Yy0yLjksMy03LjUsMy41LTExLjEsMS4yaDBjLTExLjEtNy41LTIwLjctMTcuMS0yOC4yLTI4LjJoMGMtMi4zLTMuNS0xLjgtOC4yLDEuMi0xMS4xbDEuNy0xLjdjLjQtLjQsMS0uNCwxLjMsMGw3LDdoMHMwLDAsMCwwYy40LjQuNCwxLDAsMS4zWiIvPgo8L3N2Zz4=');
    --email-icon : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA8VJREFUeJztmkuPFGUUht/DgMwEtpgYlq74B7pW3Lga2RoX+gck7jFoiJAMjCB4wbsEEOUmF9EeEgP8Al3Ixo0LNTHeNiQYMjws6rTpbs9Xl+6aqm6m3qQX0/Wdt877dGfq61MlderUqVOnTp06rVPZ4B/Ao5KekbS9nXbWXL9I6pnZ7/03TJKAOUmvSXpF0uZ2emtM/0pakvSqma0aYJI+k/R8u301rhNm9oIBuySdbbublrRowHVJTwUHb0vaLWm12Z5q15ykZUk7gmM9Af+Q1hfAxoYbrk3AHHAiJ99fGnnjfrDo81mEAGz03kc1lHEUwE3gk6DoS2BT26HKyj/5k0GO08CtPADfAQa8ExSfnQUIOeE/AjZ4xjQAN5lJCB7+VCq8rykG4AsNeDswuwJM3WYJ2AScC/r9sB/e15UD4IsNODbtEDz8+aLwvrY8AC+Yagg54T8YDe/rqwHwohSEq21CAB4BLpQN7zXVAXihAUeDk30NzK9dzGQ/qfDvp8J73XgAvNiAt9qG4OEvBn0czwvvteMDcIMUhGtNQPDwX40T3usnA+AmBhxpGkJBeCt2qAmAGxlwOGjmm7WA4OEvBed7r2x496kHgJs1AiEn/LtVwrtXfQDc0IA3g+a+BRaq+gX+m4HLdYR3v3oBDBi/UTeEnPDL44R3z7UB4OYRhN44EDz8lSj8hD0OASi8bFRUND7bKekasKWsiQO7LOnZkucYX3V9A4B9wac1qBvA1hI+C8BKgdfBCfoc+gbUAgBYCpr8OXjveh4EYKuvKeO1NBUAgENBcz2yT/JAcOx74InA50ngh2D9AffqBccOtQaA7PK3HDQ19J8f2B+sAfiRbEZ3GridWLN/wGfBvUdV6YpQCwDSG6BwKwzsIZ44p3Qf2BP4zPs5RnW4LISJAZD+HZD7ixDYBfxWIvyvwHM5PvN+rlEdKQNhIgCkZwKlBiPAFmA32Wj63kD9PbKR/MuUuFyS7RGuBn0cLYIwNgBqHo2Rjagf81fl/QjpjdKxPAhjAWDKpkEDfaUGI8mpUGUAOeFbnQcO9FdpNFYJAFM+Ee6LCpPh0gBmJXxfORCq3xghfVfoHLN5a+w/CIUAmNH7gn0x4c3Rm8DHQfHDcnv8FAW3x1eDojPM7gMSZ4I8QxkF/B0s6uthf0TmTwNWJD0d1K+Lh6QMWJR0vtmepkaLG8zsgrIHJdebPjWzi/0NwouSXpd0t8WGmtJdSXslvST9/2HpbcqmuI9LKj3FnRHdkfSTpBUz+6PtZjp16tSpU6dOnVrXA3NHZmXGCMaKAAAAAElFTkSuQmCC');

    --svg-gradient: var(--cdn-gradient);
} 

@media only screen and (max-width: 900px) {
    :root {
        --default-padding: 0 2rem 0 2rem;
        --default-padding-one: 2rem;

        --scrollbar-height: 0.2rem;
    }
}

@media only screen and (min-width: 1340px) {
    :root {
        --default-padding: 0;
        --default-padding-one: 0;
    }
}

.default_padding {
    padding-left: var(--default-padding-one);
    padding-right: var(--default-padding-one);
}

@media only screen and (min-width: 1340px) {
    .default_width {
        max-width: var(--content-max-width);
        margin-left: auto;
        margin-right: auto;
    }
}

.text-max-width {
    max-width: var(--text-max-width);
}

.default_button {
    text-align: left;
    height: 5.6rem;
    width: 32rem;
    padding-left: 1.2rem;
    background-color: var(--color-primary-light);
    border: var(--color-primary-medium) 0 0 .4rem 0 solid;
    color: var(--color-primary);
    cursor: pointer;
}

.default_button.arrow_down {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.default_button.arrow_down::after {
    display: block;
    content: '';
    width: 15px;
    height: 15px;
    background-image: var(--small-arrow-down);
    background-repeat: no-repeat;
}

/* Default section spacing (exclude .stream_block – they use .vert-m-full/half/none) */
section:not(.no_vert_margin):not(.stream_block) {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
}

section:has(.reduced_margin) {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

section:first-of-type {
    margin-top: 0rem;
}

body:not(:has(.index_top)) section:first-of-type {
    margin-top: 0;
}

*, *::before, *::after, *:focus {
    box-sizing: border-box;
}

p {
    margin-top: 0;
}

a {
    color: var(--color-primary);
    text-decoration: underline;
}

p, ul li, ol li, span {
    font-size: 18px;
    line-height: 1.4;
}

ul li, ol li {
    margin-bottom: 1rem;
}

img.richtext-image {
    max-width: 100%!important;
    height: auto!important;
}

/* Tables inside rich text content (e.g. subscription/APN/feature-code
   tables on "Kom i gang") had no styling at all before this — editors can
   insert a <table> from the Wagtail rich text toolbar, but nothing in the
   CSS ever targeted bare table/th/td, so they rendered with the browser's
   unstyled default (no borders, no padding, cramped). display:block +
   overflow-x:auto lets a wide table scroll on its own on narrow screens
   without needing a wrapper div around content that comes straight out of
   the rich text field. */
table {
    border-collapse: collapse;
    margin: 2.4rem 0;
    border: 1px solid var(--mobino-line, rgba(11,3,76,0.1));
    border-radius: 12px;
    overflow: hidden;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table th, table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
    color: var(--mobino-text-body, #1A1B2E);
    border-bottom: 1px solid var(--mobino-line, rgba(11,3,76,0.1));
    white-space: normal;
}

table th {
    background: var(--mobino-surface-raised, #F6F7FC);
    font-weight: 700;
    border-bottom: 2px solid var(--mobino-line, rgba(11,3,76,0.1));
}

table tr:last-child td {
    border-bottom: none;
}

button {
    font-family: var(--main-font);
}

.no-scroll {
    overflow-y: hidden;
}

@media only screen and (max-width: 900px) {
    .no-scroll-mobile {
        overflow-y: hidden;
    }
}

body {
    margin: 0;
    background-color: var(--color-secondary);
    font-family: var(--main-font);
    color: var(--color-slate-700);
    font-weight: 400;
    font-style:normal;
    overflow-x: hidden;
}

.main_content {
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--secondary-font);
    color: var(--color-primary-800);
    font-weight: bold;
    font-style: normal;
    line-height: 1.1;
}

h1 {
    font-size: 4rem;
    line-height: 1.4;
}

h2 {
    font-size: 2.85rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

h2.small {
    font-size: 2rem;
}

h3 {
    font-size: 2.5rem;
    line-height: 1.4;
}

h4 {
    font-size: 2.25rem;
    line-height: 1.4;
}

h5 {
    font-size: 2rem;
    line-height: 1.4;
}

.hidden {
    display: none!important;
}

@media only screen and (max-width: 900px) {
    h2 {
        font-size: 2.4rem;
    }
    section:not(.no_vert_margin):not(.stream_block) {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    section:has(.reduced_margin) {
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
    }
}

section:last-child {
    margin-bottom: 0;
}

/* statics */
@media only screen and (max-width: 900px) {
    .desktop {
        display: none;
    }
}

@media only screen and (min-width: 900.1px) {
    .mobile, span.mobile {
        display: none!important;
    }
}

.arrow_parent:hover .arrow {
    transform: scale(1.2);
}

.pointer {
    cursor: pointer;
}

.arrow {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSIxMSIgdmlld0JveD0iMCAwIDUgMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjUgMC41TDQuNSA1LjE2NjY3TDAuNSA5LjgzMzMzIiBzdHJva2U9IiNDQUQ1RTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
    transition: transform .2s;
    transform-origin: left center; /* Transform origin set to the left */
    will-change: transform;
    background-position: center;
    background-repeat: no-repeat;
}

.hover_effect:hover {
    filter: var(--hover-effect);
}

/* end of statics */

.top_section_wrapper {
    position: relative;
    background: var(--svg-gradient);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* No z-index - let children control their own z-index independently */
    padding-top: 8.7rem; /* Compensate for fixed header */
    color: white;
}

@media only screen and (max-width: 900px) {
    .top_section_wrapper {
        padding-top: 7rem; /* Compensate for fixed header on mobile */
    }
}

.content_wrapper {
    background-color: #FFFFFF;
    margin: 0 auto;
    padding-bottom: 6rem;
}

@media only screen and (max-width: 900px) {
    .content_wrapper {
        padding-bottom: 4rem;
    }
}

.header_nav_container_container {
    z-index: 4;
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0;

}

.header_nav_container_container.scrolled {
    background: var(--svg-gradient);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.header_nav_container_container:has(#nav-container.active) {
    padding-right: var(--scrollbar-width);
    height: 100vh;
    background: var(--svg-gradient);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Prevent body scroll when menu is open */
body:has(#nav-container.active) {
    overflow: hidden;
}

.header_nav_container_container.header-hidden {
    transform: translateY(-100%);
}

.header_nav_container {
    min-height: 8.7rem;
    padding: var(--default-padding); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

@media screen and (max-width: 1480px) {
    .header_nav_container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.header_nav_container_container .second_col, .header_nav_container_container .first_col {
    display: flex;
    align-items: center;
}

/* Header buttons - Login and Signup */
.header-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.header-btn {
    height: 40px;
    padding: 0 26px;
    border: none;
    border-radius: 4px;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
}

.btn-login {
    color: var(--color-secondary);
    padding-right: 16px;
}

.btn-login:hover {
    text-decoration: underline;
}

.btn-signup,
.btn-about {
    border-radius: 999px;
    color: var(--color-tertiary);
    border: none;
    outline: none;
    box-shadow: none;
    background: linear-gradient(90deg, #000066 0%, #0000FF 25%, #8E51FF 50%, white 50%, white 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.25s ease, color 0.3s ease;
}

.btn-signup:hover,
.btn-about:hover {
    color: var(--color-secondary);
    background-position: 0 0;
}

/* Desktop nav hidden - using mobile menu everywhere */
#nav-container {
    display: none;
}

.header_nav_logo img {
    height: 2.5rem;
}

/* MOBILE MENU - now used everywhere */
#hamburger-btn {
    color: var(--color-secondary);
    display: block;
    font-size: 3rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn-container {
    position: relative;
    order: 2;
}

.header-buttons {
    order: 1;
    margin-right: 10px;
}

#hamburger-btn:focus {
    outline: none;
}

#hamburger-btn.opacity {
    opacity: 0;
}

#hamburger-btn.active {
    font-size: 4.2rem;
    transform: rotate(0deg);
    opacity: 1;
}

#hamburger-btn.active.rotate {
    transform: rotate(180deg);
}

#nav-container.active {
    z-index: 50;
    position: absolute;
    width: 100%;
    display: block;
    margin-top: 8.7rem;
    height: calc(100vh - 8.7rem);
    top: 0;
    left: 0;
    background: transparent;
    overflow-y: auto;
}

/* Mobile adjustments */
@media only screen and (max-width: 900px) {
    .header_nav_logo img {
        height: 2rem;
    }

    .hamburger-btn-container {
        order: 2;
    }

    #hamburger-btn {
        width: 3rem;
        height: 7rem;
        padding: 0;
    }

    .header_nav_container {
        min-height: 7rem;
    }

    .header-buttons {
        order: 1;
        margin-right: 10px;
    }

    .header-btn {
        font-size: 1.2rem;
        padding: 0 16px;
    }

    #nav-container.active {
        margin-top: 7rem;
        height: calc(100vh - 7rem);
    }
}
/* END OF MOBILE MENU */

/* START OF TOP INFO BAR */
.top_info_bar {
    background-color: rgba(0,0,0,0.2);
}

.top_info_bar_container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.top_info_bar p {
    margin: 0;
}

@media screen and (max-width: 1480px) {
    .top_info_bar_container {
        padding-left: 2rem;
    }
}
@media screen and (min-width: 1450px) {
    .top_info_bar_container {
        max-width: var(--page-max-width);
        margin: 0 auto;
        padding-left: 0;
    }
}
/* END OF TOP INFO BAR*/

/* START OF SUPER MENU */
/* Sub-menus container - hidden by default */
#nav-container .sub-menus {
    display: none;
}

#nav-container.active .sub-menus {
    display: block;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* Show all categories */
.super_menu_single {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 2rem;
}

.super_menu_single a {
    color: var(--mobino-text-body, #1A1B2E);
}

/* Hide back button - not needed anymore */
.super_menu_single span.super_menu_back_btn {
    display: none;
}

/* Category title styling with border */
.super_menu_single .menu-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mobino-line, rgba(11,3,76,0.1));
    color: var(--mobino-text-body, #1A1B2E);
}
/* Sub menu items styling */
.sub-menus .parent_and_sub {
    margin-bottom: 0;
}

.sub-menus .parent_and_sub .parent a {
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 0;
}

.sub-menus .parent_and_sub .parent a:hover {
    text-decoration: underline;
}

/* Show arrows on clickable sub-items */
.sub-menus .parent_and_sub .parent a .menu-arrow {
    display: block;
    height: 12px;
    width: 16px;
    background-size: 16px 12px;
}

#nav-container.active {
    padding: 2rem;
    padding-top: 3rem;
}

/* DESKTOP MENU LAYOUT - Grid with categories */
@media only screen and (min-width: 900.1px) {
    /* Show sub-menus as grid on desktop */
    #nav-container.active .sub-menus {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem clamp(2rem, 15%, 20rem);
    }
    
    /* Remove border from menu items on desktop */
    .sub-menus .parent_and_sub .parent a {
        border-bottom: none;
        padding: 1rem 0;
    }
    
    /* Hide arrows on desktop menu items */
    .sub-menus .parent_and_sub .parent a .menu-arrow {
        display: none;
    }
}

@media only screen and (max-width: 900px) {
    .super_menu_single .menu-title {
        font-size: 1.8rem;
        border-bottom: none;
        padding-bottom: 0;
    }
    .sub-menus .parent_and_sub .parent a {
        font-size: 1.6rem;
    }
    .super_menu_single {
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid var(--mobino-line, rgba(11,3,76,0.1));
    }
    .super_menu_single:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

/* END OF SUPER MENU */

/* Start of breadcrumbs */
.breadcrumb_wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding-left: var(--default-padding-one);
    padding-right: var(--default-padding-one);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 1rem 0;
    margin: 0;
}

@media screen and (max-width: 1480px) {
    .breadcrumb_wrapper {
        padding-left: 2rem;
    }
}

@media only screen and (min-width: 1450px) {
    .breadcrumb_wrapper {
        padding-left: 0;
    }
}

@media screen and (max-width: 900px) {
    .breadcrumb {
        padding-top: 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .breadcrumb li {
        white-space: nowrap;
    }
}

body.frontpage .breadcrumb {
    display: none;
}

.breadcrumb li {
    list-style: none;
    margin: 0;
    font-size: 15px;
}

.breadcrumb li.active {
    font-weight: 700;
}

.breadcrumb li a {
    text-decoration: none;
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

.breadcrumb_seperator {
    display: block;
    background-image: var(--small-arrow-down);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    min-width: 7.5px;
    width: 7.5px;
    min-height: 21px;
    height: 21px;
    transform: rotate(270deg);
    margin: 0 5px;
}
/* End of breadcrumbs */

/* FOOTER */
    .footer_content_wrapper {
        padding: var(--default-padding);
    }

    footer.footer {
        padding-top: 0;
        padding-bottom: 6.5rem;
        background: var(--svg-gradient);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    
    .footer_curve {
        position: relative;
        height: 6rem;
        background-color: var(--color-secondary);
        border-radius: 0 0 48px 48px;
        margin-bottom: 6.5rem;
    }

    footer.footer .footer_content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4rem;
    }

    footer.footer .footer_content.top {
        margin-bottom: 2.5rem;
        border-bottom: 1px solid var(--color-primary-300);
        padding-bottom: 2.5rem;
    }

    footer.footer .footer_content.bottom {
        margin-top: 2.5rem;
        padding-top: 2.5rem;
        border-top: 1px solid var(--color-primary-300);
    }

    footer.footer .footer_content.top img {
        width: 250px;
    }

    .footer_col p {
        color: var(--color-secondary);
        font-size: 1.8rem;
    }

    .footer_col a,
    .footer_col span.child {
        color: var(--color-secondary);
        font-size: 1.6rem;
    }

    footer.footer .menu a {
        text-decoration: none;
        display: block;
        font-size: 1.6rem;
        margin-bottom: 1.4rem;
        line-height: 1.25;
    }

    footer.footer .menu a:hover {
        text-decoration: underline;
    }

    footer.footer .footer_col .parent {
        font-weight: 700;
        margin: 0 0 1.6rem 0;
        line-height: 1.25;
    }

    footer.footer .footer_col span.child {
        cursor: default;
        display: block;
        margin-bottom: 1.4rem;
        line-height: 1.25;
    }

    footer.footer .menu a.parent {
        text-decoration: underline;
    }

    footer.footer .footer_col .parent {
        margin-top: 0;
    }

    footer .call span, footer .email span {
        display: block;
        background-image: var(--phone-icon);
        filter: var(--make-white);
        background-size: 15px;
        height: 15px;
        width: 15px;
        margin-right: 7.5px;
    }

    footer .email span {
        background-image: var(--email-icon);
    }

    .footer_col .book .arrow {
        display: block;
        height: 17.5px;
        width: 17.5px;
        background-size: contain;
        filter: var(--make-white);
        margin-left: 0.75rem;
    }

    .footer_col .book p, footer .call a {
        margin: 0.5rem 0;
    }

    .footer_col .book:hover p {
        text-decoration: underline;
    }
    .footer_col .book:hover .arrow {
        transform: scale(1.2);
    }
    
    @media only screen and (max-width: 1050px) {
        footer.footer .footer_content {
            grid-template-columns: repeat(2, 1fr) 
        }
    }

    /* Mobile */
    @media only screen and (max-width: 900px) {
        footer.footer {
            padding-top: 0;
            padding-bottom: 4.8rem;
        }
        
        .footer_curve {
            height: 4rem;
            
            margin-bottom: 4.8rem;
        }
        
        footer.footer .footer_content {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    footer .menu .call a, footer .menu .email a {
        display: flex;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
    }

    /* Footer buttons - same style as header buttons */
    .footer-buttons {
        display: flex;
        gap: 1rem;
    }
    
/* END OF FOOTER */

/*
background: linear-gradient(to right, rgb(164, 26, 174), rgb(248, 229, 75));
*/

@media only screen and (min-width: 1450px) {
    .header_nav_container {
        max-width: var(--content-max-width);
        margin: 0 auto;
        padding: 0;
    }
}

/* form status overlay */
.overlay_form_status_wrapper {
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-size: cover;
}
.overlay_form_status {
    position: relative;
    width: calc(100vw - 5rem);
    max-width: 50rem;
    /* max-height: 50rem; */
    background-color: var(--statcats-primary);
    padding: 4rem;
    color: var(--statcats-secondary);
}

.overlay_form_status::after {
    content: '';
    display: block;
    height: 6.5rem;
    width: 6.5rem;
    position: absolute;
    background-color: var(--statcats-secondary);
    opacity: 0.7;
    top: 0;
    right: 0;
    z-index: 6;
}

.overlay_form_status h2 {
    margin-top: 0;
    font-size: 3.5rem;
}

#close_overlay_form_status {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--statcats-primary);
    background-color: var(--statcats-secondary);
    background-image: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    width: 6rem;
    font-family: var(--secondary-font);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 7;
}

#close_overlay_form_status:hover {
    opacity: 0.7;
}

/* Start of form */
form input, form select {
    padding: 0 12px;
    height: 54px;
    outline: none;
    appearance: none;
    margin-bottom: 2.5rem;
    color: var(--color-primary);
    background-color: transparent;
    border: 1px solid var(--color-primary-100);
    border-radius: 8px;
    font-size: 1.6rem;
}

form input.error, form select.error {
    border-bottom: 4px solid #f28f68;
}
form select {
    background-image: var(--small-arrow-down);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) 50%;
}
form button, span.button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54px;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    font-weight: 700;
    font-size: 1.8rem;
    cursor: pointer;
}
form button:hover, span.button:hover {
    text-decoration: underline;
}

form .frc-icon {
    margin: 0 8px;
}

form .frc-captcha {
    padding-bottom: 0;
    border: none;
}

form .frc-content {
    margin: 0;
    overflow: hidden;
}

form .frc-button {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}


/* Pop-up takkeside */
.pop-up-thank-you {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.pop-up-thank-you-content {
    position: relative;
    padding: 4rem;
    background-color: var(--color-slate-200);
    filter: drop-shadow(0 0 15px hsla(0, 0%, 0%, 0.800));
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 400px;
    max-width: 600px;
}

.pop-up-thank-you.active .pop-up-thank-you-content {
    opacity: 1;
}

.pop-up-thank-you-content h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-primary-800);
}

.pop-up-thank-you-content p {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 3rem;
    color: var(--color-primary-800);
    max-width: 500px;
}

.pop-up-thank-you-close {
    font-size: 2.4rem;
    font-weight: 700;
    padding: 1rem 2rem;
    background-color: var(--color-primary-700);
    color: var(--color-secondary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    margin-top: 2rem;
}

.pop-up-thank-you-close:hover {
    background-color: var(--color-primary-800);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.pop-up-thank-you-close:active {
    transform: translateY(0);
}


form .frc-captcha {
    display: flex;
    width: 100%!important;
    height: 54px!important;
    margin-bottom: 0;
    max-width: none;
}

/* .frc-captch iframe {
    width: 100%!important;
    height: 54px!important;
} */



/* End of form */
/* START OF POP-UP */
.pop-up-box {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

.pop-up-box.show {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0s;
}

.pop-up-box.hidden {
    display: none;
}

/* Animate only the pop-up-box-content */
.pop-up-box-content {
    position: relative;
    padding: 4rem;
    background-color: var(--color-slate-200);
    filter: drop-shadow(0 0 15px hsla(0, 0%, 0%, 0.800));
    transform: translate(calc(15px - 50vw), calc(15px - 50vh)) scale(0.1); /* Start from the open button position */
    transition: transform 1s ease-in-out, opacity 0.5s ease;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    border-radius: 12px;
}

.pop-up-box.show .pop-up-box-content {
    transform: translate(0, 0) scale(1); /* Move to center and full size */
}

.pop-up-box:not(.show) .pop-up-box-content {
    transform: translate(calc(15px - 50vw), calc(15px - -50vh)) scale(0.1); /* Shrink back to the button position */
}

#pop-up-box-close {
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.8rem;
    color: var(--color-primary-800);
    transition: opacity 0.3s ease;
}

#pop-up-box-close:hover {
    opacity: 0.7;
}

.pop-up-box-open-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: fixed;
    bottom: 15px;
    left: 15px;
    filter: drop-shadow(0 0 7.55px hsla(0, 0%, 0%, 0.800));
    z-index: 3;
}

.pop-up-box-open-container button {
    cursor: pointer;
    padding: 1.2rem 2rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.6rem;
    border: none;
    background: var(--main-gradient, linear-gradient(120deg, #2543F2, #7256FF));
    border-radius: 8px;
    transition: filter 0.15s ease;
}

.pop-up-box-open-container button:hover {
    filter: brightness(1.08);
}

.pop-up-box-open-container:has(#pop-up-box-open.hidden) {
    display: none;
}

.pop-up-box-open-container.hidden {
    display: none;
}

.pop-up-box-content-top {
    max-width: 340px;
    margin: 0 auto;
}

.pop-up-box-form {
    margin-top: 20px;
}

.pop-up-box-form form {
    width: 100%;
    max-width: 340px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Override for compact form - remove margin-bottom since we use gap */
.pop_up_form.compact input,
.pop_up_form.compact select,
.pop_up_form.compact button:not(.frc-button) {
    margin-bottom: 0 !important;
}

.pop_up_form.compact .frc-captcha {
    margin-bottom: 0 !important;
}

.pop-up-box-content h2 {
    font-weight: 700;
    font-size: 2.2rem;
    /* Not --color-primary-800: redesign_2026.css repoints that token to a
       near-white "ink" color for the site's dark-background sections. This
       popup keeps its own light background (--color-slate-200 above), so
       it needs the dark-on-light text token directly, not the shared one. */
    color: var(--mobino-text-body, var(--color-primary-800));
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.pop-up-box form.wpcf7-form p {
    margin-bottom: 1.5rem;
}

.pop-up-box .pop-up-box-content p {
    color: var(--mobino-text-body, var(--color-primary-800));
}

.pop-up-box .pop-up-box-content p.info {
    font-size: 1.6rem;
    margin: 1rem 0;
    line-height: 1.4;
    color: var(--mobino-text-body, var(--color-primary-800));
}

/* Compact form styling for popup */
.pop_up_form.compact {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.pop_up_form.compact input,
.pop_up_form.compact select {
    width: 100%;
    padding: 1.2rem 1.5rem;
    border: 1px solid var(--color-primary-100);
    border-radius: 8px;
    font-size: 1.6rem;
    font-family: inherit;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: inherit;
}

.pop_up_form.compact input::placeholder,
.pop_up_form.compact select::placeholder {
    color: var(--color-slate-500);
    opacity: 1;
}

.pop_up_form.compact input:focus,
.pop_up_form.compact select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.pop_up_form.compact select {
    color: inherit;
    background-color: #fff;
}

.pop_up_form.compact select option {
    background-color: #fff;
    color: inherit;
}

.pop_up_form.compact button[type="submit"] {
    padding: 1.4rem 3rem;
    background: var(--main-gradient);
    background-size: 200% 100%;
    background-position: 0 0;
    color: var(--color-secondary);
    border: none;
    border-radius: 8px;
    font-size: 1.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 1rem;
}

.pop_up_form.compact button[type="submit"]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pop_up_form.compact button[type="submit"]:active {
    transform: translateY(1px);
}

@media screen and (max-width: 600px) {
    .pop-up-box-content-top {
        max-width: none;
    }
    /* Was width:100% with no max-height override — on a phone that reads
       as the popup swallowing the entire screen (edge-to-edge, and tall
       enough to reach the top/bottom safe areas). Cap width and height so
       page content stays visible around it, confirming it's a dismissable
       overlay rather than a full-screen takeover. */
    .pop-up-box-content {
        padding: 2.5rem 1.75rem;
        width: calc(100% - 32px);
        max-width: 420px;
        max-height: 85dvh;
    }
    .pop-up-box-form {
        max-width: none;
    }
    .pop-up-box-form form {
        max-width: none;
    }
}

/* END OF POP-UP */

/* CENTER CONTENT */
.richtext_content, .faq_block {
    margin: 0 auto;
}

.multi-column-block .richtext_content, .multi-column-block .faq_block {
    margin: auto;
}
/* END OF CENTER CONTENT */

/* Hide cookiebot button */
#CookiebotWidget .CookiebotWidget-logo {
    display: none!important;
}

/* Block margin (stream blocks): full 6.5rem, halv 3.25rem, ingen 0 */
.stream_block.vert-m-full {
    margin-top: 6.5rem;
    margin-bottom: 6.5rem;
}

.stream_block.vert-m-half {
    margin-top: 3.25rem;
    margin-bottom: 3.25rem;
}

.stream_block.vert-m-none {
    margin-top: 0;
    margin-bottom: 0;
}

/* Block-avstanden over var ikke tilpasset mobil. På en smal skjerm, med de
   kortere sliding-boxes-seksjonene, gir 6.5rem/3.25rem topp+bunn (=13rem/
   6.5rem mellom to blokker) et unaturlig stort tomrom mellom seksjoner. */
@media only screen and (max-width: 900px) {
    .stream_block.vert-m-full {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    .stream_block.vert-m-half {
        margin-top: 2.4rem;
        margin-bottom: 2.4rem;
    }
}