@charset "utf-8";

/** Custom classes and rules as well as overrides of the framework (base.css) **/
/** Bootstrap, rte.css and base.css is loaded before this file. **/
/** Guidelines:
    1. Customize Bootstrap first using assets/scss/bootstrap-custom-variables.scss
    2. Customize any styles typically used by TinyMCE in assets/css/rte.css
    3. Do further customization in this file (assets/css/custom.css)
**/

:root {
    --cm-narrow: none;
    --cm-header-height: 90px; //Placeholder! Will be set based on #header using JS //
    --cm-height-1: 20vh;
    --cm-height-2: 40vh;
    --cm-height-3: 60vh;
    --highcharts-color-0: var(--bs-primary);
    --highcharts-color-1: var(--bs-secondary);
    --highcharts-color-2: var(--bs-success);
    --highcharts-color-3: var(--bs-danger);
    --highcharts-color-4: var(--bs-warning);
    --highcharts-color-5: var(--bs-info);
    --highcharts-color-6: var(--bs-orange);
    --highcharts-color-7: var(--bs-pink);
    --highcharts-color-8: var(--bs-teal);
    --highcharts-color-9: var(--bs-cyan);
    --default-transistion: all 500ms ease 0s;
}

/* Set standard rounding of objects here (if applicable) */
.cb-header-section>.container>[class*="bg-"],
.cb-layout-section>.container>[class*="bg-"],
.cb-field-image-picture,
.cb-field-video-figure,
.cb-field-inner-layout-wrapper,
.cb-field-gallery picture,
.gallery-slides-item-figure picture,
.list-item-wrapper,
.container .layout-container,
.rte-wrapper img,
.rte-wrapper iframe,
.resource-slides-item-picture {
    border-radius: var(--bs-border-radius-xl);
}

/* Special rules to make sure you don't end up with a button with the same color as the background (which of course would make it invisible) */
.text-bg-dark .btn-dark,
.text-bg-dark .btn-outline-dark {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-body-bg)c;
    --bs-btn-hover-border-color: var(--bs-body-bg);
}

[class^="text-bg"] a {
    color: rgba(var(--cm-content-color-rgb), 1);
}
[class^="text-bg"] a:hover {
    color: rgba(var(--cm-content-color-rgb), .8);
    text-decoration: none;
}

/** ################################################## HEADER ################################################## **/

#header {
    background-color: rgba(255, 255, 255, 0);
}

#header.position-absolute {
    z-index: 1030;
}

body.scrolled #header {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}

#header.navbar-collapse-open {
    background-color: var(--bs-body-bg);
}

#header .navbar {
    --bs-navbar-color: rgba(var(--bs-body-color-rgb), 1);
}

#header .navbar-collapse.collapse.show {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

#header .navbar-collapse.collapse.show .navbar-nav {
    padding-bottom: 1rem;
}

#header .navbar-brand img {
    height: 3rem;
    width: auto;
}

#header .nav-link {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding-right: 2.5rem;
}

#header .dropdown-menu {
    --bs-dropdown-min-width: 13rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
}

#header .dropdown-menu .nav-link {
    padding-left: 1.5rem;
}

#navbarCollapse {
    padding-top: .75rem;
    padding-bottom: 1.5rem;
}

#navbarCollapse .navbar-nav {
    margin-bottom: 1rem;
}

/* There is a JS-function that checks the background color of the first header in main. If it is dark, the class .header-light is placed on the header so that we can style it differently. */
/* The first rule shows the correct logo according to the background of the first header in main and if the page has been scrolled or not. */
/* If this gets too complex, make your own logic. */

/* Show the correct logo (dark on light background, light on dark background */
body:not(.scrolled) #header.light-header:not(.navbar-collapse-open) .navbar-brand-img,
body.scrolled #header:not(.navbar-collapse-open) .navbar-brand-img-light,
#header:not(.light-header):not(.navbar-collapse-open) .navbar-brand-img-light,
#header.navbar-collapse-open .navbar-brand-img-light {
    display: none;
}

/* Choose suitable link color for the menu if the user has not scrolled and the burger menu is not open */
body:not(.scrolled) #header.light-header:not(.navbar-collapse-open) .navbar {
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 1);
}

/* Choose a suitable background color for the dropdown if the user has not scrolled and the burger menu is not open */
body:not(.scrolled) #header.light-header:not(.navbar-collapse-open) .dropdown-menu {
    --bs-dropdown-bg: var(--bs-dark);
}

/** ################################################## FOOTER ################################################## **/

#footer .brand-symbol {
    height: 3rem;
    width: auto;
}



/** ######################################################################################### MEDIA QUERIES ######################################################################################### **/


/** Small devices (landscape phones, 576px and up) **/
/** Bootstrap: -sm **/
@media (min-width: 576px) {
}

/** Medium devices (tablets, 768px and up) **/
/** Bootstrap: -md **/
@media (min-width: 768px) {
}

/** Large devices (desktops, 992px and up) **/
/** Bootstrap: -lg **/
@media (min-width: 992px) {
}

/** Extra large devices (large desktops, 1200px and up) **/
/** Bootstrap: -xl **/
@media (min-width: 1200px) {
}

/** Extra Extra large devices (HD desktops, 1400px and up) **/
@media (min-width: 1400px) {
}

@media (orientation: landscape) {}

@media (orientation: portrait) {}