@import url(../fonts/fonts.css);

:root {
    --bs-body-font-family: "DM Sans Regular", sans-serif;

    --bs-link-color: #6d7873;
    --bs-link-color-rgb: 109, 120, 115;
    --bs-link-hover-color: #a6b9b0;
    --bs-link-hover-color-rgb: 166, 185, 176;

    --muru-color-light-green: #aebfb7;  /* 174, 191, 183 */
    --muru-color-dark-green: #243532;  /* 36, 53, 50 */

    --muru-color-light-green-1: #eaefec;  /* 234, 239, 236; hyvin vaalea */
    --muru-color-light-green-2: #d5ddda;  /* 213 221 218; keski */
    --muru-color-dark-green-1: #444f4c;  /* 68, 79, 76 */

    --muru-footer-color: var(--muru-color-dark-green);
    --muru-footer-link-hover-color: black;
    --muru-footer-bg-color: var(--muru-color-light-green);
}

.navbar {
    --bs-navbar-color: var(--muru-color-dark-green);
    --bs-navbar-hover-color: black;
}

html {
    position: relative;
    background-color: var(--muru-footer-bg-color);
    color: var(--muru-footer-color);
}

.btn-primary {
    --bs-btn-color: white;
    --bs-btn-bg: #aebfb7;
    --bs-btn-border-color: #aebfb7;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #bac9c2;
    --bs-btn-hover-border-color: #b6c5be;
    --bs-btn-focus-shadow-rgb: 148, 162, 156;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #beccc5;
    --bs-btn-active-border-color: #b6c5be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #aebfb7;
    --bs-btn-disabled-border-color: #aebfb7;
}

/* Common */

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

.muru-align-middle .row {
    align-items: center;
}

.muru-align-middle h1,
.muru-align-middle h2,
.muru-align-middle h3,
.muru-align-middle h4,
.muru-align-middle h5,
.muru-align-middle h6 {
    margin-bottom: 30px;
}

.ccm-custom-style-main > .container {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Navigation */

div.ccm-page div.ccm-block-top-navigation-bar .navbar {
    --bs-navbar-nav-link-padding-x: 2.5rem;
    background-color: var(--muru-color-light-green);
}

div.ccm-page div.ccm-block-top-navigation-bar .navbar .nav-link:hover {
    color: var(--bs-navbar-hover-color);
}

.ccm-block-top-navigation-bar .container-fluid {

    @media(min-width: 576px) {
        max-width: 540px;
    }

    @media(min-width: 768px) {
        max-width: 720px;
    }

    @media(min-width: 992px) {
        max-width: 960px;
    }

    @media(min-width: 1200px) {
        max-width: 1140px;
    }
}

.ccm-block-top-navigation-bar .navbar-collapse {
    justify-content: flex-end;
}

@media (max-width: 991.98px) {
    div.ccm-page div.ccm-block-top-navigation-bar .nav-link {
        text-align: left;
    }
}

/* Content */

/* Override Atomik theme default skin */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,div.theme-atomik .ccm-block-testimonial .ccm-block-testimonial-text .ccm-block-testimonial-name,div.theme-atomik .ccm-image-slider .ccm-image-slider-text .ccm-image-slider-title,h5,.h5,h6,.h6,div.theme-atomik div.ccm-block-next-previous .ccm-block-next-previous-previous-link,div.theme-atomik div.ccm-block-next-previous .ccm-block-next-previous-next-link,div.theme-atomik .ccm-block-testimonial-circle .ccm-block-testimonial-position {
    font-family: var(--bs-body-font-family);
}

/* Banner images */
.ccm-block-top-navigation-bar + img,
.ccm-block-top-navigation-bar + picture img,
.ccm-block-top-navigation-bar + .ccm-custom-style-container img,
.container + img,
.container + picture img,
.container + .ccm-custom-style-container img {
    width: 100%;
}

/* Hero-kuva */
div.theme-atomik div.ccm-block-hero-image div.ccm-block-hero-image-cover {
    background-color: transparent !important;
}

div.ccm-block-hero-image div.ccm-block-hero-image-image {
    background-position: 11% center;
}

/* Breadcrumbs */
.breadcrumb-item.active {
    color: #aaaaaa;
}

.ccm-block-content {
    @media(max-width: 767.98px) {
        margin: 30px 0;
    }
}

/* Some-linkit */
div.theme-atomik footer .ccm-block-social-links ul {
    justify-content: flex-end;
    margin-right: -10px;
}

div.theme-atomik footer .ccm-block-social-links a {
    color: var(--muru-footer-color);
}

div.theme-atomik footer .ccm-block-social-links i {
    font-size: 40px;
}

/* Kategoriat-navigointi */

nav.ccm-responsive-navigation ul {
    float: left;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin: -4px;
}

nav.ccm-responsive-navigation ul li a {
    display: block;
    background-color: #eaeaea;
    color: black;

    margin: 4px;
    padding: 8px;
    font-size: 14px;
    line-height: 1;
    height: 32px;
}

nav.ccm-responsive-navigation ul li a.nav-path-selected {
    background-color: #cccccc;
}

nav.ccm-responsive-navigation ul li a.nav-selected {
    background-color: black;
    color: white;
}

/* Tuotekortti */

.ccm-block-page-list-page-entry-horizontal {
    margin-bottom: 60px;
}

.ccm-block-page-list-page-entry-horizontal a {
    color: var(--bs-body-color);
}

/** Make image square **/

.ccm-block-page-list-page-entry-thumbnail {
    position: relative;
    overflow: hidden;
}

.ccm-block-page-list-page-entry-thumbnail::before {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
}

.ccm-block-page-list-page-entry-thumbnail picture {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    /* Center the img */
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;

    background: white;
}

.ccm-block-page-list-page-entry-thumbnail picture::after {
    /* grey shade on top of content */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    /* z-index: 1; */
    background: black;
    opacity: .04;
}

a:hover .ccm-block-page-list-page-entry-thumbnail picture::after {
    opacity: .08;
}

.ccm-block-page-list-page-entry-thumbnail picture img {
    max-width: 100%;
    max-height: 100%;
}

.muru-product-image-thumbnails {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    padding-top: var(--bs-gutter-y);
    padding-bottom: var(--bs-gutter-y);
}

/** Tekstit **/

.ccm-block-page-list-title {
    margin: 10px 0;
    font-weight: bold;
}

a:hover .ccm-block-page-list-title {
    text-decoration: underline;
}

.ccm-block-page-list-description {
    margin: 10px 0;
    font-size: .85em;
}

/* Tuotesivu */

dl {
    margin-top: 40px !important;
    width: 80%;
    font-size: .85em;
}

dt {
    margin-bottom: .5rem;
}

/* Footer */

div.theme-atomik footer {
    padding-bottom: 40px;
    background-color: var(--muru-footer-bg-color);
    color: var(--muru-footer-color);
    font-size: .85em;

    /* Muoto */
    background-image: radial-gradient(var(--muru-color-light-green-2) 90%, var(--muru-color-light-green) 0);
    background-size: 215px 100%;
    background-position: center;
}

div.theme-atomik footer a {
    color: var(--muru-footer-color);
}

div.theme-atomik footer a:hover {
    color: var(--muru-footer-link-hover-color);
    text-decoration: underline;
}

footer img {
    width: 250px;
}

/* Cookie-Script */
#cookiescript_badge {
    position: absolute !important;
    background: var(--muru-color-dark-green) !important;
    color: var(--muru-color-light-green) !important;
    border-radius: 0 !important;
}

#cookiescript_badgetext {
    color: var(--muru-color-light-green-1) !important;
}