/**** RESET ****/
*,
*::before,
*::after {
    box-sizing: border-box;
    border: none;
}
html {
    -webkit-text-size-adjust: none; /* for iOS Safari */
    text-size-adjust: none; /* for other mobile browsers */
   /* font-size: 62.5%; /* (62.5/100) * 16px = 10px */
   scroll-padding-top: 17rem;
}
a {
    text-underline-position: under;
    text-decoration-thickness: 8;
}
a[href*="//"]:not([href*="testikirjasto.bahai.fi"]):not([href*="kirjasto.bahai.fi"]):not([href*="testitapahtumat.bahai.fi"]):not([href*="tapahtumat.bahai.fi"]):not(.btn):not(.ccm-block-social-links a)::after {
    content: " " url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjYuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzAwMDk1Rjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMjAsMGMtMTcuNywwLTMyLDE0LjMtMzIsMzJzMTQuMywzMiwzMiwzMmg4Mi43TDIwMS40LDI2NS40Yy0xMi41LDEyLjUtMTIuNSwzMi44LDAsNDUuM3MzMi44LDEyLjUsNDUuMywwCglMNDQ4LDEwOS4zVjE5MmMwLDE3LjcsMTQuMywzMiwzMiwzMnMzMi0xNC4zLDMyLTMyVjMyYzAtMTcuNy0xNC4zLTMyLTMyLTMySDMyMHogTTgwLDMyQzM1LjgsMzIsMCw2Ny44LDAsMTEydjMyMAoJYzAsNDQuMiwzNS44LDgwLDgwLDgwaDMyMGM0NC4yLDAsODAtMzUuOCw4MC04MFYzMjBjMC0xNy43LTE0LjMtMzItMzItMzJzLTMyLDE0LjMtMzIsMzJ2MTEyYzAsOC44LTcuMiwxNi0xNiwxNkg4MAoJYy04LjgsMC0xNi03LjItMTYtMTZWMTEyYzAtOC44LDcuMi0xNiwxNi0xNmgxMTJjMTcuNywwLDMyLTE0LjMsMzItMzJzLTE0LjMtMzItMzItMzJIODB6Ii8+Cjwvc3ZnPgo=);
    width: 0.6em;
    position: absolute;
    margin: -0.3em 0 0 0.2em;
}
img {
    display: block;
    max-width: 100%;
}
label,
button,
select,
summary,
[type=radio],
[type=submit],
[type=checkbox] {
    cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
    html {
          scroll-behavior: smooth;
    }
}
/**** brand colors ****/
:root {
    --taivaansini: rgb(9,19,171);
    --pakkasyo: rgb(0,9,95);
    --kulta: rgb(205, 185, 145);
    --kulta80: rgb(220, 206, 178);
        --kulta70: rgb(225, 213, 189);
        --kulta60: rgb(235, 227, 211);
        --kulta50: rgb(238, 231, 217);
        --kulta30: rgb(240, 234, 222);
        --kulta10: rgb(250, 248, 244);
    --muistio: rgb(242, 237, 231);
    --havu: rgb(24, 114, 99);
    --koivu: rgb(166, 229, 128);
    --jakala: rgb(206, 219, 218);
    --jakala80: rgb(228, 235, 235);
        --jakala60: rgb(235, 241, 240);
        --jakala40: rgb(240, 244, 244);
    --puolukka: rgb(219,83,85);
    --rosa: rgb(246,200,198);
    --voikukka: rgb(245,228,122);
    --highlightcolor:rgb(248, 235, 152);
}

/**** TYPOGRAPHY ****/
@font-face {
    font-family: 'apris-light';
    src: url('fonts/Apris-Light.woff2') format('woff2'),
         url('fonts/Apris-Light.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'Work Sans', sans-serif;
    line-height: 1.5;
    color: #333;
    font-weight: 400;
    font-size: 1.1rem;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans', sans-serif;
    /* font-family: 'apris-light', 'Noto Serif',serif; */
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    color:var(--pakkasyo);
}
h1 {
    /* font-size: clamp(2.4rem, 3vw + 1rem, 3.2rem); */
        font-size: clamp(1.68rem, 3vw + 1rem, 2.24rem);
        line-height: 1.1;
}
h2 {
    font-size: clamp(1.3rem, 2vw + 1rem, 1.6rem);
}
main h1, main h2, main h3 {
    margin-bottom:0.5em;
    margin-top: 1.5em;    
}
main .ccm-layout-column h1, main .ccm-layout-column h2, main .ccm-layout-column h3 {
    margin-top: 0.8em;
}
.highlight {
    background: var(--highlightcolor);
}
a {
    color:var(--taivaansini);
}
a:hover, a:visited {
    color:var(--pakkasyo);
}
button, input, optgroup, select, textarea {
    font-family: 'Work Sans', sans-serif;
}
button.btn, a.btn, span.btn {
    border-radius: 10rem;
    transition: .1s opacity linear;
    color: #fff;
    background-color: var(--taivaansini);
    border-color: var(--pakkasyo);
    text-transform: uppercase;
    font-weight: 500;
    /* letter-spacing: 0.06em; */
    /* font-size: calc((var(--header-button-font-font-size-value) - 1) * 1.2vw + 1rem); */
    padding: .6em 1em;
    border-width: 0px;
    line-height: normal;
    border-style: solid;
    margin: 0.2rem 0 0 0.2rem;
}
button.btn-primary, a.btn-primary {
    background-color: var(--taivaansini);
    border-color: var(--pakkasyo);
}
button.btn-secondary, a.btn-secondary, span.btn-secondary {
    background-color: var(--taivaansini);
    border-color: var(--pakkasyo);
    padding: 0.2em 0.5em;
    text-transform: inherit;
    border-width: 1px;
    /* background-color: transparent;
    border-color: var(--pakkasyo);
    color: var(--pakkasyo);
    border: 2px solid; */
}
button.btn-secondary:hover, a.btn-secondary:hover, span.btn-secondary:hover {
    color: var(--taivaansini);
    background: #fff;
}
button.btn-outline-, a.btn-outline-, span.btn-outline- {
    background-color: #fff;
    color:var(--pakkasyo);
    border: 2px solid var(--pakkasyo);
    margin-top:0;
}
button.btn-outline-:hover, a.btn-outline-:hover, span.btn-outline-:hover, div:hover > span.btn-outline- {
    background-color: var(--pakkasyo);
    color: #fff;
}
footer button.btn-outline-, footer a.btn-outline- {
    background-color: var(--pakkasyo);
    border-color: #fff;
    color: #fff;
}
footer button.btn-outline-:hover, footer a.btn-outline-:hover {
    background-color: #fff;
    color: var(--pakkasyo);
}
.mt-4 {
    margin-top: 1.2rem !important;
}
footer a.btn-outline-, .intro-container a.btn-outline- {
    text-transform: inherit;
}
strong, b {
    font-weight: 600;
}
footer {
    background-color: var(--pakkasyo);
    padding:2rem 0;
    margin-top:6rem;
    color:#fff;
}
footer a, footer a:visited {
    color: #fff;
    text-decoration: underline;
}
footer a:hover {
    color:var(--kulta);
}
footer h1{
    color:#fff;
    font-family: 'Apris-Light', sans-serif;
    font-weight: 100;
    font-size: clamp(2rem, 3vw + 1rem, 2.4rem);
}
footer h2 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2vw + 1rem, 1.6rem);
    margin-bottom:0.5em;
}
footer .ccm-block-social-links {
    margin-top:2rem;
    font-size:2em;
}
body {
    background-color: var(--muistio);
}
.notification-banner {
    position: fixed;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    width: 60vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--pakkasyo);
    background-color: var(--muistio);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    z-index: 1001;
    transition: all 0.5s ease-in-out;
}
.notification-banner.open {
    grid-template-rows: 1fr;
    visibility: visible;
    padding:1rem 2rem;
}
header {
    /* background-color: var(--muistio); */
    /* border-bottom:2px solid var(--kulta); */
    background-color: #fff;
    /* border-bottom:2px solid var(--muistio); */
    /* box-shadow: 0px 20px 20px #fff; */
    /* margin-bottom: 2rem; */
    position: sticky;
    top:0;
    z-index: 1000;
    transition: top 0.5s ease-in-out;
}
.ccm-toolbar-visible header {
    /* padding-top:48px; */
        top: 48px;
}
header > .div-container {
	display: grid;
    /* grid-template-columns: minmax(150px, 1.2fr) 4fr 1.5fr; */
    grid-template-columns: minmax(150px, 11em) minmax(25em, 40em) minmax(12em, 15em);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 0px;
	grid-template-areas:
		"logo nav search";
    justify-items: right;
    justify-content: space-between;
        padding: 2rem 3rem 0;
}

header .div-container,
main,
.theme-events .grid-container,
#pageToolbar .div-container {
    max-width: 70em;
    margin:auto;
}
/* header, #pageToolbar {
    padding: 2rem 3rem 0;
}
*/
.grid-container {
    padding:0 3rem 0;
    /* padding: 0 0rem 0 3rem; */
}
.grid-container main {
    max-width:inherit;
    padding:0;
    width: 100%;
}
.full .grid-container main .col-narrow {
    max-width: 60ch;
    margin: auto;
}
#logo {
	grid-area: logo;
    /* background-color: aqua; */
    margin-bottom: 1rem;
}
nav {
    /* background-color: blueviolet; */
    margin-left: 1rem;
    grid-area:nav;
    display:flex;
}
#search {
    /* background-color: chocolate; */
    grid-area: search;
    display: flex;
    justify-content: end;
    align-items: center;
}
#search form {
    display: flex;
    align-items: center;
}
.grid-container {
    display: grid;
    /* grid-template-columns: 1fr 0;
    grid-template-rows: auto; */
    /* grid-template-areas: 
    "article panel"; */
    /* grid-template-columns: 1fr minmax(0, 1fr); */
    /*grid-template-rows: auto; */
    /* grid-gap: 20px; */
}
.library_item .grid-container {
    grid-template-columns: minmax(0, 1fr) min-content;
}
.left_sidebar .grid-container {
    grid-template-columns: 1fr 3fr;
}

footer .grid-container, .full footer .grid-container, .left_sidebar footer .grid-container, .library_item footer .grid-container {
    grid-template-areas:
        "footer-top  footer-top" 
        "footer-left footer-right";
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}
.footer-top {
    grid-area: footer-top;
}
.footer-top img {
    margin-left: -12px;
        height: 50px;
}
.footer-left {
    grid-area: footer-left;
}
.footer-right {
    grid-area: footer-right;
}
.footer-nav {
    display: flex;
    margin: 2rem 0;
    gap: 2rem;
}
.footer-nav div {
    padding-left:0;
}
article {
    /* grid-area:article; */
    grid-column: 1 / 2;
    max-width: 32em;
    margin:auto;
    padding-top:5rem;
}
/*
article {
    flex: 1;
    margin-right: 20px;
    transition: margin-right 0.3s ease-in-out;
} */

.pageHeader {
    margin: 0 auto 2rem;
    text-align: center;
}
/* main {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
*/
.left_sidebar aside {
    /* background-color: var(--kulta); */
    /* margin: 1rem 1rem 0 0;
    padding: 1rem; */
    border: 0.4rem solid var(--kulta);
    border-width: 0 0.4rem 0 0;
    margin-right: 1rem;
}
main .ccm-custom-style-container.full-width {
    width: 100vw;
    left: 50%;
    right: 50%;
    position: relative;
    margin-left: -50vw;
    margin-right: -50vw;
}
main .full-width .ccm-layout-column-wrapper {
    max-width: 70em;
    
    margin-left: auto;
    position: relative;
    margin-right: auto;
    padding: 2rem 3rem;
}
.form-group {
    position: relative;
}
@media (max-width: 1000px) {
    #search form {
        flex-direction: column;
    }
    #search button {
        width: 50%;
        margin-top: 0.5rem;
    }

}
@media (max-width: 900px) {
    .notification-banner {
        width: 90vw;
    }
    header,
    header > .div-container,
    main,
    .theme-events .grid-container {
        padding: 0;
        width: inherit;
    }
    .theme-events:not(.library_item) .grid-container {
        grid-template-columns: inherit;
    }

    #pageToolbar > .div-container {
        padding: 0.5rem 1rem;
    } 
    
    .grid-container main {
        width: 100vw;
        padding: 0 1rem;
    }
    .left_sidebar aside {
        display:none;
    }
    .left_sidebar main {
        padding: 0 2rem;
    }
    main div.ccm-layout-column {
        width:100% !important;
    }
    main div.ccm-layout-column .ccm-layout-column-inner {
        margin-left:0 !important;
        margin-right:0 !important;
    }
    footer .grid-container, .full footer .grid-container, .left_sidebar footer .grid-container, .library_item footer .grid-container {
        grid-template-areas:
                "footer-top " 
                "footer-left"
                "footer-right";
        grid-template-columns: auto;
        gap: 4rem;
        padding:0 1rem;
    }
    .footer-top img {
        margin-left:0;
    }
    .footer-nav {
        flex-direction: column;
    }
    .footer-nav div:not(:first-child) {
        margin-top:2rem;
    }
    footer .ccm-block-social-links {
        text-align: center;
    }
                header > .div-container {
        grid-template-columns: inherit;
        grid-template-areas: inherit;
        grid-template-rows: auto auto 1fr;
        height: 100%;
        justify-items: initial;
        justify-content: inherit;
    }

    header.expanded {
        position: fixed;
        height: 100vh;
        width: 100vw;
    }
    #logo, nav, #search, #pageToolbar {
        grid-area: auto;
        max-width: 98vw;
    }
    #pageToolbar {
        top: 100%;
        left: 0;
        max-width: inherit;
    }
    #logo {
        width: clamp(130px, 60vw, 320px);
        padding: 1rem 1rem 0.6rem;
            margin: 0 auto 0;
    }
    nav {
        display: block;
        overflow-y:auto;
        margin-left: auto;
            margin-right: auto;
    }
    #search {
        display:none;
        /* width: 95vw; */
        margin: 1rem 0 1rem;
        justify-content: center;
        grid-row: 2;
        border-bottom: 1px solid var(--kulta);
        padding-bottom: 2rem;
    }
    /* #search form {
        flex-direction: row;
        align-items: end;
    }*/
    #search input {
        width:80vw;
    }
    #search button {
        width: 50vw;
    }
    #pageToolbar h1 {
        font-size:1.1rem;
    }
    .grid-container {
        grid-template-columns: 1fr;
    }

    article {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        /* top: 9rem; */
        position: relative;
        padding-top: 2.5rem;
    }

    #sidePanel {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        height: 0;
        top: 9rem;
        box-shadow: #888 0px 3px 12px;
        transition: height 0.3s ease-in-out;
    }
    
    #sidePanel.open {
        /* bottom:50%; */
        min-height: 10rem;
        max-height: 30vh;
        margin: 0 auto;
        width: 98vw;
        transition: height 0.3s ease-in-out;
    }

    #sidePanel.open + main article {
        margin-top: 30vh;
        transition: margin-top 0.3s ease-in-out;
    }
}
@media print {
    header, footer, #pageToolbar {
        display: none;
    }
    .grid-container {
        grid-template-columns: 1fr;
    }
    article {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        top: 0;
        position: relative;
    }
    .left_sidebar aside {
        display:none;
    }
    .left_sidebar main {
        padding: 0 2rem;
    }
    main div.ccm-layout-column {
        width:100% !important;
    }
    main div.ccm-layout-column .ccm-layout-column-inner {
        margin-left:0 !important;
        margin-right:0 !important;
    }
    footer .grid-container, .full footer .grid-container, .left_sidebar footer .grid-container, .library_item footer .grid-container {
        grid-template-areas:
                "footer-top " 
                "footer-left"
                "footer-right";
        grid-template-columns: auto;
        gap: 4rem;
        padding:0 1rem;
    }
    .footer-top img {
        margin-left:0;
    }
    .footer-nav {
        flex-direction: column;
    }
    .footer-nav div:not(:first-child) {
        margin-top:2rem;
    }
    footer .ccm-block-social-links {
        text-align: center;
    }
}