/*
Theme Name: Demokraattinen Sivistysliitto (Twenty Twenty-One Child)
Template: twentytwentyone
*/

@font-face {
  font-family: 'Lexend Deca';
  src:
    local('Lexend Deca'),
    url('assets/fonts/LexendDeca-VariableFont_wght.ttf') format('truetype');
}

html:root {
    --max-default-width: 1200px;
    --max-wide-width: 1500px;

	/* Font Family */
	--font-headings: 'Lexend Deca', 'Segoe UI'!important;
	--font-base: 'Source Sans Pro'!important;

	/* Font Sizes */
	--global--font-size-xs: clamp(0.8rem, 1.5vw, 1rem)!important; /* h6 */
	--global--font-size-sm: clamp(0.9rem, 2.5vw, 1.125rem)!important; /* h5 */
	--global--font-size-md: 1.25rem!important;
	--global--font-size-lg: clamp(1rem, 3.25vw, 1.5rem)!important; /* h4 */
	--global--font-size-xl: 2.25rem!important;
	--global--font-size-xxl: 4rem!important;
	--global--font-size-xxxl: 5rem!important;
	--global--font-size-base: var(--global--font-size-md)!important;
	
	--global--font-size-page-title: clamp(1.8rem, 6.4vw, 3.85rem)!important;
	--heading--font-size-h1: clamp(1.75rem, 6.2vw, 3.8rem)!important;
    --heading--font-size-h2: clamp(1.25rem, 4.7vw, 2.9rem)!important;
    --heading--font-size-h3: clamp(1.1rem, 3.9vw, 2.1rem) !important;

	--heading--font-weight: 500!important;
	--heading--font-weight-strong: 700!important;
	
    --dsl-color-red: #C22B1B;
	--dsl-color-green: #6FB544;
	--dsl-color-lightred: #F2837A;
	--dsl-color-lightgreen: #A7D28D;
	--dsl-color-bg: #FEEBDA;
	
	--global--color-background: var(--dsl-color-bg)!important;
}

/* Header & Menus
----------------*/

#masthead {
    display: -ms-grid;
    display: grid;
    padding: 0;
    gap: 0;
    -ms-grid-rows: 0% 0 auto;
    -ms-grid-columns: 38%;
        grid-template:
        ". kielet" 0%
        "logo menu" / 38%;
}

.site-header .site-logo {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: logo;
    -ms-grid-column-align: center;
        justify-self: center;
    border: none!important;
    padding: 0!important;
}

.site-logo > .custom-logo-link > img {
    display: block;
}

/* Nav Menu */
nav.primary-navigation {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: menu;
}

/* Language Menu */
nav.language-navigation {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    position: relative;
    top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    grid-area: kielet;
    -ms-grid-column-align: end;
        justify-self: end;
    font-size: small;
}

/* Add a slash between menu items */
.language-navigation .menu-item:not(:first-child)::before {
    padding: 0 15px;
    content: '/';
}

/* Tik-tok logo for Social Menu */
ul.footer-navigation-wrapper li.menu-item-8203 a::before {
  background: url(assets/images/tik-tok.svg) no-repeat 6px 6px;
}

/*

/* Main Content
--------------*/

.entry-content {
	max-width: var(--responsive--aligndefault-width);
}

.site-main > * {
    margin-bottom: var(--global--spacing-vertical)!important;
}

.site-main > article > hr:last-child {
    margin-top: calc(2 * var(--global--spacing-vertical));
}

.entry-content :not(hr) + .wp-block-heading {
	margin-top: 50px;
}
@media only screen and (max-width: 481px) {
    .entry-content :not(hr) + .wp-block-heading {
	margin-top: 30px;
    }
}

/* Query Loops & Posts
---------------------*/
/* Remove "Kirjoittanut"-line from posts */
/*span.byline {
    display: none!important;
}*/

/* Custom classes:
-----------------*/

/* All masks using book shape (kirja.svg) */
:is(
    .mask-book,
	.mask-book-1,
	.mask-book-2) img {
  -webkit-mask-image: url('assets/images/kirja.svg');
  mask-image: url('assets/images/kirja.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Decorations for book shape */
/* 1. (Not in use, Red/Green "shadows" on the top/bottom of mask) */
.mask-book-1 {
  /*-webkit-filter: ;
  -moz-filter: ;
  -ms-filter: ;
  -o-filter: ;*/
	-webkit-filter: /*drop-shadow(5px 0px 10px rgba(0,0,0,0.1))
			drop-shadow(-5px 0px 10px rgba(0,0,0,0.1))*/
			/*drop-shadow(0px -0.8vw 0px #6FB544)
	        drop-shadow(0px 0.7vw 0px #E93525)*/
			drop-shadow(0px -0.8vw 0px #A7D28D)
	        drop-shadow(0px 0.7vw 0px #F2837A);
	        filter: /*drop-shadow(5px 0px 10px rgba(0,0,0,0.1))
			drop-shadow(-5px 0px 10px rgba(0,0,0,0.1))*/
			/*drop-shadow(0px -0.8vw 0px #6FB544)
	        drop-shadow(0px 0.7vw 0px #E93525)*/
			drop-shadow(0px -0.8vw 0px #A7D28D)
	        drop-shadow(0px 0.7vw 0px #F2837A);
}
/* 2. (Main page book effect, green book shape under masked img) */
.mask-book-2 {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
}
.mask-book-2 img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}
.mask-book-2::before {
  content: '';
  position: absolute;
  inset: -16% 0 16% 0;
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
          transform: scale(0.9);
  z-index: 2;
  background-image: url('assets/images/kirja-green.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

[data-wp-dark-mode-active] .mask-book-2::before {
  background-image: url('assets/images/kirja-dark.svg');
  -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
}

/* .transform-logo - change img to the black version of
    the transform! europe logo when in dark mode */

[data-wp-dark-mode-active] .transform-logo img {
  content: url('assets/images/transform-black.png');
  -o-object-fit: cover;
     object-fit: cover;
  border-radius:15px;
}

/* .never-wide-img - max-width & center on mobile
 (( NOT TESTED OUTSIDE "Media ja teksti"-block)) */
.never-wide-img img {
    max-width: 25vw!important;
}

@media only screen and (max-width: 600px) {
    .never-wide-img img {
        display: block;
        margin: auto;
    }
}

/* Misc.
--------*/
.contact-widget {
    padding: 0 10px;
}

.menu-item a {
    text-decoration: none;
}

.menu-item, .menu-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Theme's "default" breakpoints: 482 & 822 */
@media only screen and (min-width: 482px) {
    .language-navigation-mobile {
        display: none!important;
    }
}

@media only screen and (max-width: 482px) {
    .language-navigation {
        display: none!important;
    }
    
    
    .entry-content :not(hr) + .wp-block-heading {
	margin-top: 40px;
    }
    
    #primary-menu-list {
        padding-bottom: 0;
    }
    
    #masthead {
        height:80px;
    }
    
    .site-header .custom-logo {
        scale: 1.4;
        -webkit-transform: translateY(10px);
            -ms-transform: translateY(10px);
                transform: translateY(10px);
    }
    
    .home .site-header .site-logo {
        left: 30%;
    }
    
    #menu-kielet {
        gap: 20px;
        padding-left: 5px;
    }
    
    #menu-kielet a {
        font-size: 0.8rem!important;
        color: var(--accent-color-secondary)!important;
    }
}

@media only screen and (max-width: 991px) {
    .primary-menu-container {
        -webkit-transform: translateY(10px)!important;
            -ms-transform: translateY(10px)!important;
                transform: translateY(10px)!important;
    }
    .primary-menu-container a {
        font-size: 17px!important;
    }
}

@media only screen and (max-width: 540px) {
    .primary-menu-container {
        -webkit-transform: translateY(15px)!important;
            -ms-transform: translateY(15px)!important;
                transform: translateY(15px)!important;
    }
}

@media only screen and (min-width: 822px) {
    :not(.site-header) {
        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), var(--max-default-width));
        --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), var(--max-wide-width));
    }
}

@media only screen and (min-width: 782px) {
    /* Custom class .hide-on-desktop */
    .hide-on-desktop {
        display: none;
    } 
}


@media only screen and (max-width: 821px) {
    /* Center footer items with logo */
    .contact-widget,
    .privacy-policy {
        margin: auto;
        text-align: center;
    }
}