/**
 * Theme Name: Publiku kaasamise käsiraamat
 * Description: Teema sisaldab eraldi malli, mis aktiveerub kui luuakse on leht, mille slug on activity. Teema kasutab alusena ACF Free pluginat, mille abil luuakse eraldi sisu tüüp Teema ja millele lisatakse eraldi ACF väljadena sisukastid.
 * Template:   twentytwentyfive
 * Author: Kait Krull
 * Version: 1.5
 */

.interactive-body body {
	line-height: 1.4 !important;
	color: #33322D;
	font-family: "Inter", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
}
.interactive-body h2,
.interactive-body h3 {
	font-family: "Chlorite-Regular", Helvetica, Arial, Sans-Serif;
	border-top: 2px solid;
	border-bottom: 2px solid;
	padding-bottom: 8px;
	font-weight: inherit;
}
.interactive-body h2 {
    font-size: 2rem !important;
    padding-bottom: 9px;
    padding-top: 0px !important;
    margin-top: 28px;
    line-height: 1;
}
.interactive-body h3 {
	font-size: 1.75rem;
	margin-bottom: 38px;
}
.interactive-body p:first-of-type, .interactive-body .viewer_says {
	margin-top: -20px;
}
.interactive-body span, .interactive-body li {
	font-weight: inherit !important;
}
.interactive-body .main_description {
	font-family: "Chlorite-Thin", Helvetica, Arial, Sans-Serif;
	font-size: 1.6667rem;
	border-bottom: 2px solid;
	margin-top: 30px;
	line-height: 1.1;
}
.interactive-body .plusses li:before {
	content: url(./assets/images/plus.svg);
}
.interactive-body .minuses li:before {
	content: url(./assets/images/minus.svg);
}
.interactive-body .examples li:before {
	content: url(./assets/images/example.svg);
}
.interactive-body .try_also_this li:before {
	content: url(./assets/images/try.svg);
}
.interactive-body .custom-li li:before {
    width: 20px;
    position: relative;
    display: block;
    left: -30px;
    top: -18px;
    margin-bottom: -42px;
}
.interactive-body .custom-li ul,
.interactive-body .viewer_says ul {
	list-style: none;
	margin-left: -16px;
}
.interactive-body .custom-li li {
	margin-left: 6px;
	margin-bottom: 20px;
	line-height: normal;
	
}
.interactive-body .viewer_says ul li {
	margin-left: -20px;
	margin-bottom: 20px;
}
.interactive-body .col {
	width: calc(33% - 20px);
	float: left;
	margin-right: 20px;
	transition: 0.25s ease-in-out all;
}
.interactive-body .col-1 {
	margin-left: 15px !important;
}
.interactive-body .col-3 {
	margin-right: 0 !important;
}
@media (max-width: 768px) {
	.interactive-body .col {
		float: none !important;
		clear: both !important;
		width: calc(100% - 100px) !important;
		margin: auto !important;
		padding: 0px 15px;
	}
	.interactive-body #templateContainer .col {
	        padding: 0px 40px;
	}
	.interactive-body svg {
		clip-path: none;
		margin-bottom: 20px;
	}
	.interactive-body .col svg:not(.active) {
		clip-path: inset(0 0 86% 0); /* Adjust the values to hide the desired part */
		height: auto;
	}
	.interactive-body .col:has(svg:not(.active)) {
		overflow: hidden;
		height: 0px;
		padding-bottom: 20%;
	}
	.interactive-body .main_description {
		border-bottom: none;
	}
	
	body .wp-block-template-part .alignfull .is-layout-grid {
		grid-template-columns: repeat(1, minmax(0,1fr));
		gap: 10px;
		justify-items: center;
	}
	
	nav.is-responsive.wp-block-navigation.is-layout-flex {
		margin-bottom: 24px;
	}
}
@media (min-width: 768px) {
	#teemadContainer {
		max-height:1600px;
	}
}
.interactive-body svg {
	transition: 0.25s ease-in-out all;
}
.interactive-body g.close-btn,
.interactive-body g.close-btn g line {
	transition: 0.25s ease-in-out all;
	transform: rotate(45deg);
	transform-box: fill-box;
	transform-origin: center;
}
.interactive-body g.close-btn:hover, .interactive-body .closed g.close-btn {
	cursor: pointer;
	transform: rotate(0deg);
	transform-box: fill-box;
	transform-origin: center;
}
.interactive-body g.close-btn:hover g line, .interactive-body .active g.close-btn g line {
	stroke: #fff !important;
	fill: #fff !important;
}
.interactive-body g.close-btn:hover circle, .interactive-body .active g.close-btn circle {
	fill: #33322c !important;
}
.interactive-body .active g.dots circle {
	fill: #33322c !important;
}
.interactive-body svg:not(.active) .container {
	opacity: 0.75;
}
.interactive-body g:focus {
	outline: none;
}

.interactive-body g:focus path, .interactive-body g:focus circle {
	/*stroke: #c7d554;
	stroke-width: 0.75rem;
	stroke-linejoin: round;
	paint-order: stroke;*/
}

.interactive-body g path[id*=-active],
.interactive-body g path[id*=-initial] {
	visibility: hidden;
}

.interactive-body g[id=teatriklubi] text {
	transform: translate(218.62px, 290px)!important;
	transition: all .5s;
}

.interactive-body g[id=teatriklubi]:hover text, .interactive-body g[id=teatriklubi]:focus text{
	transform: translate(241.41px, 290.23px)!important;
}
/*.interactive-body g[id]:hover text, */
.interactive-body g[id].active text {
	fill: white !important;
}
.interactive-body g[id].active text {
	//text-decoration: underline;
}
.interactive-body g[id] path.activated,
.interactive-body  g[id] line,
.interactive-body g.active[id] path[id=teatriklubi-default]
{
	visibility: hidden;
	opacity:0;
	transition: all .2s;
}
.interactive-body g.active[id] path.activated,
.interactive-body g.active[id] line {
	visibility: visible!important;
	opacity: 1;
}
.interactive-body .inter-link {
	font-family: "Inter", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 1rem;
}
.interactive-body .inter-link span {
	font-weight: 500 !important;
}
.interactive-body .inter-link a {
	text-decoration: none;
}
.interactive-body .inter-text {
	font-family: "Inter", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 1rem;
}
.interactive-body .inter-text span {
	font-weight: 300 !important;
}
.interactive-body .inter-text b, .interactive-body .inter-text strong {
	font-family: "Inter", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.interactive-body a {
	color: #33322D;
}

.interactive-body g[id].active text {
	fill: white!important;
}
.interactive-body g[id].active line {
	stroke: white!important;
}

.interactive-body.not-yet-clicked path[id] {
	fill: #33322d!important;
}
.max-container {
	max-width: calc(1170px + 44px);
	margin: auto!important;
}

.interactive-body g[id]:hover line {
	visibility: visible;
	opacity: 1;
}

.interactive-body svg.closed g[id] path,
.interactive-body svg.closed g[id] line,
.interactive-body svg.closed g[id] circle,
.interactive-body svg.closed g[id] text,
.interactive-body svg.closed g[id] line,
.interactive-body svg.closed .dots circle {
	fill: #c8d554 !important;
}

.interactive-body .closed g[id].active line {
	stroke: #c8d554 !important;
}

.interactive-body .custom-li.minuses.inter-text {
    margin-top: 36px !important;
}

.interactive-body svg rect,
.interactive-body svg .svg-title {
	cursor: pointer;
}

footer p {
	font-family: 'Inter';
	font-weight: 300;
}

footer strong {
	font-weight: 500;
}

footer .wp-block-column {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
@media (max-width:992px) {
	:where(.wp-block-columns.has-background) {
		padding: 0;
	}
}
footer .wp-block-column h3.wp-block-heading {
	font-family: "Chlorite-Regular"!important;
	margin-top: -10px !important;
}

.intro-text, .wp-block-navigation .wp-block-navigation-item a {
	font-family: "Chlorite-Thin"!important
}


@media (max-width: 425px) {
	.interactive-body .col {
		width: calc(100% - 40px) !important;
        padding: 0px 0px;
	}
	.interactive-body #templateContainer .col {
        padding: 0px 0px;
    }
	
	/* In mobile there is a huge area in front of text - needs removed */
	main#wp--skip-link--target {
		margin-top: 0px !important;
	}
}