/*
Theme Name: Blockbase
Theme URI: https://wordpress.com/theme/blockbase
Author: Automattic
Author URI: https://automattic.com/
Description: Blockbase is a simple theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles. Use it to build something beautiful.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.7
Version: 3.1.21
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blockbase
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks, style-variations

Blockbase WordPress Theme, (C) 2021 Automattic, Inc.
Blockbase is distributed under the terms of the GNU GPL.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 @font-face {
  font-family: bsg-iconfont;
  src: url(/wp-content/uploads/fonts/bsg-iconfont.woff2);
}

html, body {
  font-size:16px;
}

:root {
	--toggle-details-force-closed: 768px;
    --dominant-color: #4CAF50;
    --dominant-alt-color: #EBEDA0;
    --dominant-alt-light-color: #B9DFB5;
    --dominant-light-color: #ECF6EB;
    --dominant-dark-color: #004D40;
    --dominant-svg-filter: brightness(0) saturate(100%) invert(69%) sepia(0%) saturate(2445%) hue-rotate(29deg) brightness(120%) contrast(110%);
    --dominant-svg-filter-light: brightness(0) saturate(100%) invert(97%) sepia(3%) saturate(649%) hue-rotate(64deg) brightness(102%) contrast(93%);
    --dominant-svg-filter-dark: brightness(0) saturate(100%) invert(21%) sepia(95%) saturate(459%) hue-rotate(121deg) brightness(93%) contrast(102%);
    --dominant-hue-rotate-color: 47deg;
    --font-color-normal-text:   #6a6e71;
    --font-color-bold-text: #454e52;
    --font-red-color: #e96100;
    --font-standard-text-color: #64686a;
    --light-red-color: #FFF0EA;
}

main {
	margin-top:0;
}

.OLD-wp-block-post-content{
		max-width:1440px;
	margin:0 auto;
	padding:24px;
}

.wp-container-core-post-content-is-layout-1 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1312px;
  margin-left: auto !important;
  margin-right: auto !important;
}


h3 {
	    color:var(--font-red-color);
    font-size:2.125rem;
			font-weight:600;
  font-family:"Lato";
}


figure.wp-block-post-featured-image img {
	max-height: 600px;
}

.single-storia .wp-block-post-content {

	background-color:var(--light-red-color);
}

/* STORY */
.story {
	display:flex;
	flex-flow:row;
	padding: 0 4rem;
	padding-top: 6rem;
	.left_col, .right_col {
		width:304px;
	position:relative;
	}
	
	.central_col {
		width:640px;
		padding: 0 50px;
	}
	
	
	img {
		width:100%;
		height:100%;
	}
        figcaption {
                display:none;
        }	
	.story_img_caption {
	padding-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.01em;
  font-weight: 400;
	}
	.story_images {
		margin: 3rem 0;
	}

	.sources_title {
		font-size:1rem;
		color:var(--font-red-color);
	}
	.link_block a {
		font-family: "Lato";
		font-size:1rem;
		line-height:1.5rem;
		font-weight:400;
		
	}

		.link {
			margin-bottom:1rem;
		}
}


	.reading_time{
		position:sticky;
		top:100px;

	}
	#scroll-progress {
		width: 0%;
		height: 4px;
  		background: #7983ff;
  		z-index: 10000;
		position: relative;
	}	




.story_links {
	display:flex;
	flex-flow:column;


a[href^="http"]::before, a[href^="/"]::before {
        font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "*";
    font-size:.4rem;
    margin-right:.9rem;
	}
	
}

/* END STORY BLOCK */

header {
	backdrop-filter: blur(20px);
	background-color: #0000000a;
  border-top: 1px solid #ffffff36;
	border-bottom: 1px solid #ffffff36;
	width: 100vw;
	position: fixed;
	z-index: 30;
	display: flex;
	justify-content: center;
	top:0;
}

.blurred-header {
	filter:blur(20px);
}

.over-header {
	position:absolute;
	    left: 50%;
    top: 0%;
    transform: translate(-50%,-0%);
            width: 100vw;
        max-width: 1920px;
	margin:0;
}

.story-header {
max-height: 560px;
  overflow: hidden;
	position:relative;
  }

.story-header-image {
	position:relative;
}

.story-header-image::after {
	content:'';


background-image: linear-gradient(to top, rgba(0, 0, 0, 0), #000 );
	background-color: rgb(51 57 60 / 0.8);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 1000ms;
   width:100%;
   height:100%;
   display:block;
   position: absolute;
  top: 0;
  left: 0;
}

.wp-block-post-title {
position: absolute;
  top: 63%;
  margin: 0 0;
  max-width: 1112px;
  color: white;
  left: 50%;
  transform: translateX(-50%);
font-size: 3rem;
    line-height: 4.25rem;
    letter-spacing: 0.01em;
    font-weight: 600;
    width:100%;
   font-family:"Poppins";
}


body .wp-site-blocks {
	padding:0px;
}

.wp-site-blocks .n2_clear {
	margin-top: 0px;
}

.main-menu {
	max-width: 1440px;
	width: 100%;
}

.site-header {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	color:white;
}
ul .wp-block-navigation	{
	font-size: 1.2rem;
  font-weight: 600;
}

/**
.wp-block-post-title::before {
	content: "";
    pointer-events: none;
    position: absolute;
    right: -435px;
    top: -209px;
    z-index: 0;
    display: block;
    height: 686px;
    width: 686px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    filter: var(--dominant-svg-filter-light);
    background-image: url(/wp-content/uploads/2025/01/bg-primary.svg);
	z-index: -1;
}
**/

.OLD-four_pics_opener::before {
	content: "";
    pointer-events: none;
    position: absolute;
    z-index: 0;
    display: block;
    height: 686px;
    width: 686px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    filter: var(--dominant-svg-filter-light);
    background-image: url(/wp-content/uploads/2025/01/bg-primary.svg);
	z-index: -1;
}

.four_pics_opener::before {
content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  height: 26rem;
  width: 26rem;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  filter: var(--dominant-svg-filter-light);
  background-image: url(/sites/default/files/2025-01/bg-primary.svg);
  background-color: var(--dominant-light-color);
  z-index: 0;
  border-radius: 999px;
  top: 148px;
  left: 48px;
}

figure {
	margin: 0;
	padding: 0;
}

.four_pics_text {
	align-content: center;
}

.four_pics {
	  display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.four_pics_img img {
	width:120px;
}

.four_pics_gallery>div{
		 display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, auto));
	width: 416px;
	gap: 1rem;
}


/** four_pics_gallery_block */

.four_pics_gallery {
	z-index:1;
	figcaption {
		display:none;
	}

	.gallery-icon img{
		border-radius:10px;
		object-fit: cover;
  		width: 100%;
  		height: 100%;
	}

}
/** experimental bloxk has:
 *
 * change the layout of the pictures depending on the number of them
 * at moment set only for 1 and 4 pics
 *
 *better move the has() condition at the upper level four_pics_gallery in order to change the grid size
 *
 * * */




.four_pics_gallery:has(.gallery *:nth-child(1)) {



.gallery-item:first-child {
                grid-column: 1 / 13;
                grid-row: 1 / 3;
  div { 
        height: 100%;
 }
}
}

.four_pics_gallery:has(.gallery *:nth-child(4)) {


.gallery-item:first-child {
	        grid-column: 2 / 9;
		grid-row: 1 / 2;
  div {
        height: 236px;
 }   
}

.gallery-item:nth-child(2) {
	grid-column: 9 / 13;
  grid-row: 1 / 2;
	align-self: end;
  div {
        height: 128px;
 }   
}

.gallery-item:nth-child(3) {
grid-column: 1 / 5;
  grid-row: 2 / 3;
    div {
        height: 128px;
 }
}

.gallery-item:last-child {
grid-column: 5 / 13;
  grid-row: 2 / 3;
 
  div {
 	height: 272px;
 }
}

}

/* end experimentla blcok */


}

/** end four_pics_gallery block */

.story_subhead {
	font-size: 2rem;
	color: var(--font-red-color); 
	background-color: #ffeeee;
	line-height: 2.8rem;
    letter-spacing: 0.01em;
	font-family: "Lora";
	font-weight:600;
	margin-bottom: 3rem;
}

.story_subhead2  > p::first-letter {
font-size: 2rem;
  line-height: 2.8rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  text-transform: uppercase
}
.author_block {
	background-color:lightgray;
	padding: 1rem;
	margin-bottom: 1rem;
}

.author_name {
	font-weight:600;
}

.author_bio {
	font-size: 0.8rem;
}

.featured_multi_block {
	display: flex;
  gap: 10rem;
  justify-content: center;
}

.featured_multi_block.image_pos_sinistra {
	flex-direction:row-reverse;
}

.featured_multi_block.image_pos_destra {
	flex-direction:row;
}

.featured_multi_title{
	font-family: "Poppins";
}

.featured_multi_title.color_red{
	color:red;
}
.featured_multi_title.color_green{
	color:green;
}


.four_pics_opener {
	display: flex;
  	flex-direction: column;
  	align-items: end;
	position:relative;
}
.gallery_opener a:nth-child(n+2) {
	display:none;
}

.hidden_text {
	display:none;
}

.icon::before {
  font-family: "bsg-iconfont" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  content: attr(icon);
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 0px;
	left:35px;
  background-color: var(--dominant-light-color);
  padding: 5px 11px;
  border-radius: 24px;
}

.story {
  & p {
    font-family: "Lato";
    font-size: 1.25rem;
    line-height: 1.8;
    letter-spacing: 0.013rem;
    font-weight: 400;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    color: var(--font-color-normal-text);
  }

  strong {
  color: var(--font-color-bold-text);
  }

  a {
    text-decoration:underline;
    color: var(--font-color-normal-text);
    font-weight:600; 
  }
}

.featured_multi_title.size_small{
    font-size: 2rem;
    line-height: 2.8rem;
    letter-spacing: 0.01em;
    font-weight: 600;
  }


.featured_multi_title.size_medium{
        font-size: 3rem;
        line-height: 4.25rem;
        letter-spacing: 0.01em;
        font-weight: 600;
  }

.featured_multi_title.size_big{
        font-size: 4rem;
        line-height: 5.8rem;
        letter-spacing: 0.01em;
        font-weight: 600;
  }

 /** PILLOLA **/ 


  .single-pillola {
  	.wp-block-post-content {
		width:1312px;
		margin: 0 auto;
		margin-top:8rem;
	}
	.wp-block-post-title {
		display:none;
	}
  }

  .pillola {

	  width:1440px;
	.gallery figcaption {
		display:none;
	}
  	.pill_cover_block {
		display: grid;
		grid-template-columns: repeat(82, 16px);
		grid-template-rows: repeat(41, 22px);
		margin-bottom:10rem;
    		margin-left: 50%;
    		transform: translateX(-50%);
     		overflow:hidden;
		width: 1312px;
	.pill_text {
		grid-column: 42 / 83;
  		grid-row: 8 / 33;	
		z-index: 30;
		background-color:darkgreen;
		border-radius:5px;
	}
	.pill_cover {
		grid-row: 1 / 38;
  		grid-column: 1 / 69;
		z-index: 20;
		.gallery-icon, .gallery, .gallery-item {
			width:100%;
			height:100%;
		}
		img {
			object-fit:cover;
			width: 100%;
        		height: 100%;

		}
	    }
	}
 
	.pill_gallery {
	.gallery-icon.landscape img {
		height:810px;
		width: 1440px;
		object-fit:cover;
	}

	.gallery-icon.portrait {img 
                height:800px;
                width: 600px;
                object-fit:cover;
		margin:0 auto;;
        }
}
 
 }