@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/source-sans-3-800.woff2') format('woff2');
}

:root {
    /* Color palette */
    ---hue: 81;
    ---saturation: 10%;
    --bakar-primary: hsl(var(---hue) var(---saturation)  70%);
    --bakar-light:   hsl(var(---hue) var(---saturation)  90%);
    --bakar-mid:     hsl(var(---hue) var(---saturation)  80%);
    --bakar-dark:    hsl(var(---hue) var(---saturation)  30%);
    --bakar-darker:  hsl(var(---hue) var(---saturation)  20%);
    --bakar-darkest: hsl(var(---hue) var(---saturation)  10%);
    --bakar-secondary: #ded9d4;

    --link-color: var(--bakar-dark);
    --link-hover-color: var(--bakar-darker);


    --cassiopeia-color-primary: var(--bakar-dark);
    --cassiopeia-color-hover: var(--bakar-darker);
    --cassiopeia-color-link: var(--bakar-primary);

    --navbar-color: var(--bakar-light);

    --cassiopeia-font-family-body: 'Source Sans 3', sans-serif;
    --cassiopeia-font-family-headings: 'Source Sans 3', sans-serif;
    --cassiopeia-font-weight-normal: 400;
    --cassiopeia-font-weight-headings: 700;

    --page-max-width: 1000px;
    --navbar-min-height: 85px;
}
a, a:not([class]) {
    text-decoration: none;
    font-weight: 700;
}
.has-dark-background {
    color: var(--bakar-light);
}
.has-dark-background a {
    color: var(--bakar-mid);
}
.has-dark-background a:hover {
    color: #FFFFFF;
}
.navbar-toggler {
    color: var(--bakar-mid);
    border: none;
    transition: color 0.2s ease-in-out;
}
.navbar-toggler:hover {
    color: var(--bakar-dark);
}
.navbar-toggler:focus {
    box-shadow: none;
}
.header {
    background-image: none;
    font-weight: 700;
    text-transform: uppercase;
}
.logo {
    height: 40px;
}
.site-grid {
    grid-gap: 0 1rem;
    grid-template-columns:
        [full-start] minmax(0, 1fr)
        [main-start] repeat(4, minmax(0, calc((var(--page-max-width) - 3rem) / 4)))
        [main-end] minmax(0, 1fr)
        [full-end];
}
.footer {
    background-color: var(--bakar-dark); /* Replace with your Bäkar brand color */
    background-image: none;
    overflow: hidden;
    position: relative;
    min-height: 500px;
    display: flex;
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bakar-darker); /* NOW YOU CONTROL THE PATTERN COLOR! */
    mask-image: url("../images/background.svg");
    mask-size: 200px;
    mask-repeat: repeat;
    opacity: 0.2;
    z-index: 0;
}
header {
    background-color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.header-container {
    max-width: calc(var(--page-max-width) + 2rem);
    padding: 0 1rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--navbar-min-height);
}
button.navbar-toggler {
    min-height: var(--navbar-min-height);
}
.navbar-collapse ul.mod-menu {
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 1rem;
}
.navbar {
    display: flex;
    justify-content: flex-end;
    padding: 0;
}
ul.mod-menu a {
    text-decoration: none;
    color: var(--bakar-primary);
    transition: 0.2s ease-in-out;
}
ul.mod-menu a:hover, ul.mod-menu li.active > a {
    text-decoration: none;
    color: var(--bakar-dark);
}
@media (min-width: 768px) {
    .navbar-collapse ul.mod-menu {
        flex-direction: row;
        gap: 1rem;
        padding: 0;
    }
    a.menu-item-special {
        padding: 10px;
        background-color: var(--bakar-darker);
    }
    a.menu-item-special:hover {
        color: #FFFFFF;
        background-color: var(--bakar-darkest);
    }
}
.hero {
    height: calc(100vh - var(--navbar-min-height));
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: white;
}
.hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hero-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.hero-content {
    position: relative;
    z-index: 2; /* Sits above the media and overlay */
    text-align: center;
    max-width: 700px;
    padding: 0 1rem;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
.hero-map {
    height: calc(75vh - var(--navbar-min-height));
}
.footer .grid-child {
    align-items: start;
    justify-content: start;
    padding: 2rem 1rem;
    gap: 1rem;
    z-index: 1;
    max-width: calc(var(--page-max-width) + 2rem);
}
.footer .grid-child > div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0px;
}
.closing {
    width: 100%;
    padding: 8px 0;
    text-align: center;
    font-size: 0.8rem;
    /* color: var(--bakar-light); */
    background-color: var(--bakar-darker);
}

.maplibregl-popup a:focus {
  outline: none;
  box-shadow: none;
}