/*
Theme Name: Mondo Redux: Please Talk Peacefully
Theme URI: https://maailmakool.ee/talkpeacefully/
Description: Please Talk Peacefully e-course (maailmakool.ee/talkpeacefully/), a child of Mondo Redux. WPBakery pages in four languages.
Template: mondo-redux
Version: 2026
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Author: MTÜ Mondo
Text Domain: ptp
*/

/* The course's own rules only: the parent's style.css loads before this file (functions.php).

   A page's colour is its template (Page attributes → Template): body.ptp-welcome (front pages), ptp-blue (Part I),
   ptp-lilac (Part II), ptp-green (Part III).

   A chapter page is WPBakery rows:
     row  Extra class "ptp-title"   the white band with the h1 and the "PTP sisukord" block
     row  Ikoon (PTP): read / video / quiz
                                    a section: the coloured square beside its h2/h3, white column; quiz = yellow band
     row  no icon                   more of the section above it (no gap)
     row  Extra class "ptp-end"     the last row, with the next part's button (a link with class "button ptp-next")
   A front page is one row with Extra class "ptp-intro": the white box on the pattern.
   A video element with Extra class "ptp-texttrack-en" shows English subtitles whatever the page's language. */

:root {
	--ptp-blue: #2B71B7;
	--ptp-lilac: #7F4399;
	--ptp-green: #049548;
	--ptp-yellow: #F2AF1D;
	--ptp-grey: #EEE;
	--ptp-red: #EB1C24;
	--ptp-right: #049548;
	--ptp-wrong: #EB1C24;
	--ptp-link: var(--ptp-blue);
	--ptp-intro-link: #97386D;
	--ptp-text: #000;

	--ptp-heading-font: 'Bebas Neue Regular', 'Bebas Neue Fallback', 'Arial Narrow', sans-serif;
	--ptp-body-font: "Raleway Mondo Regular", Helvetica, Roboto, Arial, sans-serif;

	/* the chapters' white column, the icon gutter at its left and the square in it */
	--ptp-column: 962px;
	--ptp-gutter: 131px;
	/* right of the text: the text is 730px wide in the 962px column */
	--ptp-column-right: 101px;
	--ptp-icon-width: 100px;
	--ptp-icon-height: 79px;
	/* the title band's text column */
	--ptp-title-column: 845px;
	/* above a section's heading, and below the last row */
	--ptp-section-top: 50px;
	/* the pattern between the title and the first section, and around a front page's box; the white column reaches as
	   far below the next part's button */
	--ptp-pattern-gap: 40px;
	--ptp-end-bottom: var(--ptp-pattern-gap);

	/* the page's colour (body class), its pattern and icons */
	--ptp-accent: var(--ptp-blue);
	--ptp-pattern: none;
	--ptp-icon-read: url(assets/icons/read-blue.png);
	--ptp-icon-video: url(assets/icons/video-blue.png);
	--ptp-icon-quiz: url(assets/icons/quiz.png);
}
body.ptp-blue {
	--ptp-accent: var(--ptp-blue);
	--ptp-pattern: url(assets/bg-part1.png);
}
body.ptp-lilac {
	--ptp-accent: var(--ptp-lilac);
	--ptp-pattern: url(assets/bg-part2.png);
	--ptp-icon-read: url(assets/icons/read-lilac.png);
	--ptp-icon-video: url(assets/icons/video-lilac.png);
}
body.ptp-green {
	--ptp-accent: var(--ptp-green);
	--ptp-pattern: url(assets/bg-part3.png);
	--ptp-icon-read: url(assets/icons/read-green.png);
	--ptp-icon-video: url(assets/icons/video-green.png);
}
body.ptp-welcome {
	--ptp-accent: #FFF;
	--ptp-pattern: url(assets/bg-welcome.png);
}

body.ptp {
	background: var(--ptp-accent) var(--ptp-pattern) repeat;
	color: var(--ptp-text);
	font-family: var(--ptp-body-font);
}
/* search results and other pages without a colour: plain white */
body.ptp:not(.ptp-blue):not(.ptp-lilac):not(.ptp-green):not(.ptp-welcome) {
	background: #FFF;
}
/* anchors land below the sticky header */
html {
	scroll-behavior: smooth;
}
.ptp .entry-content :is(h2, h3)[id] {
	scroll-margin-top: 100px;
}

/* =========================================================================
   Header: logo | menu with the parts' coloured tabs, to the right | language, search
   ========================================================================= */
.ptp .site-header .logo img {
	width: 60px;
	height: auto;
}
.ptp .site-header nav ul > li.lms_blue { background-color: var(--ptp-blue); }
.ptp .site-header nav ul > li.lms_lilac { background-color: var(--ptp-lilac); }
.ptp .site-header nav ul > li.lms_bg_green { background-color: var(--ptp-green); }
.ptp .site-header nav ul > li:is(.lms_blue, .lms_lilac, .lms_bg_green) > a {
	color: #000;
}
/* the part you are in: grey tab, bold */
.ptp .site-header nav ul > li:is(.current-menu-item, .current_page_item) {
	background-color: var(--ptp-grey);
}
.ptp .site-header nav ul > li:is(.current-menu-item, .current_page_item) > a {
	font-weight: 700;
}
@media screen and (min-width: 64em) {
	/* the items grouped at the right of the bar, shoulder to shoulder */
	.ptp .site-header nav > ul.main.menu {
		justify-content: flex-end;
	}
	.ptp .site-header nav > ul.main.menu > li > a {
		padding: 0 22px;
	}
	.ptp .site-header nav > ul.main.menu > li:hover {
		filter: brightness(1.08);
	}
	.ptp #lang_switch {
		margin-left: 15px;
	}
	/* the search icon as far from the right edge as the logo's dove is from the left (its PNG has 15/140 of
	   transparent margin: 20px + 6px) */
	.ptp #header_icons {
		margin-right: 6px;
	}
}

/* =========================================================================
   Chapter pages
   ========================================================================= */
.ptp .entry-content {
	padding: 0;
}
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row {
	position: relative;
	max-width: var(--ptp-column);
	margin: 0 auto;
	padding: 0 var(--ptp-column-right) 10px var(--ptp-gutter);
	background: #FFF;
}
/* a row after a section overlaps it by a pixel: their edges fall on fractions of a pixel (a player's 16:9 height),
   where the blue behind would show through as a thin line (the first section keeps the gap under the title) */
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-section ~ .vc_row {
	margin-top: -1px;
}
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row > .vc_column_container > .vc_column-inner {
	padding: 0;
}
/* the rows follow each other without a gap: a line break typed between two rows (wpautop makes it a <br>) shows none */
.ptp :is(.entry-content, .wpb-content-wrapper) > br,
.ptp :is(.entry-content, .wpb-content-wrapper) > p:empty {
	display: none;
}
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row .wpb_content_element {
	margin-bottom: 0;
}
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row .wpb_content_element + .wpb_content_element {
	margin-top: 1em;
}

/* the title band: white from edge to edge, the h1 and the table of contents in a narrower column */
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-title {
	max-width: none;
	margin-bottom: var(--ptp-pattern-gap);
	padding: 45px calc((100% - var(--ptp-title-column)) / 2) 20px;
	/* white to both screen edges (the content area has the parent's side margins) */
	box-shadow: 0 0 0 100vmax #FFF;
	clip-path: inset(0 -100vmax);
}
.ptp .ptp-title h1 {
	font-family: var(--ptp-heading-font);
	font-size: 64px;
	line-height: 82px;
	font-weight: 400;
	margin: 0 0 32px;
}

/* the table of contents: three icon places (read, video, quiz), then the title */
.ptp .ptp-toc ul {
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
}
.ptp .ptp-toc li {
	display: flex;
	align-items: center;
	margin: 0 0 24px;
	padding: 0;
	font-size: inherit;
}
.ptp .ptp-toc-icon {
	flex: 0 0 auto;
	display: block;
	width: var(--ptp-icon-width);
	height: var(--ptp-icon-height);
	margin-right: 30px;
	background: center / cover no-repeat;
	border: 0 !important;
}
.ptp .ptp-toc-read { background-image: var(--ptp-icon-read); }
.ptp .ptp-toc-video { background-image: var(--ptp-icon-video); }
.ptp .ptp-toc-quiz { background-image: var(--ptp-icon-quiz); }
.ptp .entry-content .ptp-toc a.ptp-toc-text {
	font-size: 26px;
	line-height: 1.5;
	color: #000;
	text-decoration: none;
	border: 0 !important;
}
.ptp .entry-content .ptp-toc a.ptp-toc-text:hover {
	text-decoration: underline;
}

/* a section: its square at the left of the column, the heading beside it */
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-section {
	padding-top: var(--ptp-section-top);
}
.ptp .vc_row.ptp-section::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: var(--ptp-section-top);
	width: var(--ptp-icon-width);
	height: var(--ptp-icon-height);
	background: var(--ptp-icon) center / cover no-repeat;
}
.ptp .vc_row.ptp-icon-read { --ptp-icon: var(--ptp-icon-read); }
.ptp .vc_row.ptp-icon-video { --ptp-icon: var(--ptp-icon-video); }
.ptp .vc_row.ptp-icon-quiz { --ptp-icon: var(--ptp-icon-quiz); }
.ptp .ptp-section .wpb_text_column:first-child > .wpb_wrapper > :is(h2, h3):first-child {
	display: flex;
	align-items: center;
	min-height: var(--ptp-icon-height);
	margin: 0 0 15px;
}
/* a quiz: the yellow band beside the white column (the spread shadow paints it to both screen edges, the clip-path
   keeps it out of the rows above and below; .site-content's overflow-x:clip stops it from widening the page) */
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-icon-quiz {
	padding-bottom: 40px;
	box-shadow: 0 0 0 100vmax var(--ptp-yellow);
	clip-path: inset(0 -100vmax);
}
/* the last row: the next part's button */
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-end {
	padding-top: 40px;
	padding-bottom: var(--ptp-end-bottom);
}

.ptp .entry-content :is(h1, h2, h3) {
	/* the course was set in the all-caps Bebas Neue; the parent's Bebas Neue Pro has lower case too */
	text-transform: uppercase;
}
.ptp .entry-content h2 {
	font-family: var(--ptp-heading-font);
	font-size: 45px;
	line-height: 45px;
	font-weight: 400;
}
.ptp .entry-content h3 {
	font-family: var(--ptp-heading-font);
	font-size: 35px;
	line-height: 1.3;
	font-weight: 400;
}
.ptp .entry-content p,
.ptp .entry-content li {
	font-size: 16px;
	line-height: 1.6;
}
.ptp .entry-content p {
	margin: 0 0 16px;
}
.ptp .entry-content :is(p, li) a:not(.button) {
	color: var(--ptp-link);
	text-decoration: underline;
	border-bottom: 0 !important;
}
.ptp .entry-content .wpb_video_widget {
	margin-top: 25px;
}
.ptp .entry-content iframe {
	max-width: 100%;
}

/* the next part's button */
.ptp .entry-content .button.ptp-next {
	display: inline-block;
	margin: 0;
	padding: 15px 30px;
	background: var(--ptp-yellow);
	color: #000;
	font-size: 16px;
	line-height: 24px;
	text-transform: none;
	border: 0;
}
.ptp .entry-content .button.ptp-next:hover,
.ptp .entry-content .button.ptp-next:focus {
	background: #DA9A0E;
	color: #000;
}

/* the arrow back to the top (js/ptp.js) */
.ptp-top {
	position: fixed;
	/* above the parent's .site-content (z 100), under the sticky header (1000) and its menus */
	z-index: 500;
	left: 85%;
	bottom: 70px;
	width: 131px;
	height: 103px;
	padding: 0;
	border: 0;
	background: url(assets/top.png) center / contain no-repeat;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.ptp-top {
		left: auto;
		right: 0;
		bottom: 30px;
		width: 69px;
		height: 54px;
		background-color: var(--ptp-yellow);
	}
}

/* =========================================================================
   Quiz ([ptp_quiz], js/ptp.js)
   ========================================================================= */
.ptp .ptp-quiz {
	margin-top: 1em;
}
.ptp .ptp-quiz + .ptp-quiz {
	margin-top: 40px;
}
.ptp .ptp-quiz label {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	cursor: pointer;
}
.ptp .ptp-quiz input[type="radio"],
.ptp .ptp-quiz input[type="checkbox"] {
	margin: 0 0.4em 0 0;
	vertical-align: baseline;
}
.ptp .ptp-choices label + label {
	margin-left: 1.5em;
}
.ptp .entry-content .ptp-quiz .ptp-option {
	margin-bottom: 4px;
}
.ptp .ptp-quiz .ptp-right {
	color: var(--ptp-right);
}
.ptp .ptp-quiz .ptp-wrong {
	color: var(--ptp-wrong);
}
.ptp .ptp-buttons {
	margin: 0;
}
.ptp .ptp-quiz :is(.ptp-check, .ptp-retry) {
	margin: 0;
	padding: 15px 30px;
	border: 0;
	background: var(--ptp-grey);
	color: #000;
	font-family: var(--ptp-body-font);
	font-size: 16px;
	line-height: 16px;
	cursor: pointer;
}
.ptp .ptp-quiz :is(.ptp-check, .ptp-retry).ptp-ready {
	background: var(--ptp-yellow);
}

/* words and gaps */
.ptp .ptp-pool {
	padding-bottom: 30px;
}
.ptp .ptp-quiz :is(.ptp-word, .ptp-gap) {
	display: inline-block;
	box-sizing: border-box;
	/* a long word (or the answer in its gap) wraps inside its box on a narrow screen */
	min-height: 35px;
	max-width: calc(100% - 2px);
	margin: 1px;
	padding: 3px 10px;
	border: 2px solid var(--ptp-yellow);
	background: #FFF;
	color: #000;
	font-family: var(--ptp-body-font);
	font-size: 16px;
	line-height: 25px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.ptp .ptp-quiz .ptp-word {
	cursor: grab;
}
.ptp .ptp-quiz .ptp-word[aria-pressed="true"] {
	background: var(--ptp-yellow);
}
.ptp .ptp-quiz .ptp-word[hidden] {
	display: none;
}
.ptp .ptp-quiz .ptp-gap {
	/* as wide as its answer, but never wider than the line (min-width would win over max-width) */
	min-width: min(calc(100% - 2px), calc(var(--ptp-gap-ch, 12) * 1ch));
}
.ptp .ptp-quiz.ptp-picking .ptp-gap,
.ptp .ptp-quiz .ptp-gap.ptp-over {
	background: #FFF6E0;
}
.ptp .ptp-quiz .ptp-gap.ptp-right { color: var(--ptp-right); }
.ptp .ptp-quiz .ptp-gap.ptp-wrong { color: var(--ptp-wrong); }
.ptp .ptp-quiz-words :is(p, li):has(.ptp-gap) {
	line-height: 2.5;
}
.ptp .ptp-quiz-words :is(ol, ul):has(.ptp-gap) {
	padding-bottom: 30px;
}
.ptp .ptp-quiz-words p:has(.ptp-gap):last-of-type {
	padding-bottom: 14px;
}

/* =========================================================================
   Search results (the parent's searchpage.php): the content area's width, as on Mondo rändekool, not the chapters'
   white column (whose row rules would otherwise reach its rows too); "Search results:" as the chapters' titles
   ========================================================================= */
.ptp .site-content.archive :is(.entry-content, .wpb-content-wrapper) > .vc_row {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
}
.ptp .site-content.archive :is(.entry-content, .wpb-content-wrapper) > .vc_row:first-child > .vc_column_container > .vc_column-inner {
	/* 45px under the header, the chapters' title's distance (the parent pads first columns on phones) */
	padding: 45px 35px 0 !important;
}
.ptp .site-content.archive h1 {
	margin: 0 0 32px;
	font-family: var(--ptp-heading-font);
	font-size: 64px;
	line-height: 82px;
	font-weight: 400;
	text-transform: uppercase;
}
@media (max-width: 1000px) {
	.ptp .site-content.archive h1 {
		font-size: 50px;
		line-height: 1.5;
	}
}

/* =========================================================================
   Front pages: the white box on the pattern
   ========================================================================= */
.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-intro {
	max-width: none;
	margin: 0;
	/* the box 12vw + 50px from the screen's left edge (the content area starts 20px in); the pattern 40px above and
	   below it, as under a chapter's title */
	padding: var(--ptp-pattern-gap) 0 var(--ptp-pattern-gap) calc(12vw + 30px);
	background: transparent;
}
.ptp .ptp-intro > .vc_column_container {
	width: 822px;
	max-width: 100%;
	min-height: 550px;
	float: none;
	display: flex;
	align-items: center;
}
.ptp .ptp-intro > .vc_column_container > .vc_column-inner {
	width: 100%;
	padding: 35px !important;
	background: #FFF;
}
.ptp .ptp-intro h1 {
	font-family: var(--ptp-heading-font);
	font-size: 50px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 16px;
}
.ptp .entry-content .ptp-intro :is(p, li) a:not(.button) {
	color: var(--ptp-intro-link);
}
.ptp .ptp-intro .wpb_video_widget {
	margin: 0 0 30px;
}
.ptp .ptp-intro .ptp-note {
	font-family: Tahoma, sans-serif;
}

/* =========================================================================
   Footer: the partners' logos
   ========================================================================= */
.ptp .ptp-footer {
	margin: 0;
	padding: 0 20px;
	background: #FFF;
	text-align: center;
}
.ptp .ptp-footer img {
	display: block;
	width: 100%;
	max-width: 1400px;
	height: auto;
	margin: 0 auto;
}
@media (max-width: 640px) {
	.ptp .ptp-footer {
		padding: 30px 0;
	}
}

/* =========================================================================
   Narrower screens
   ========================================================================= */
@media (max-width: 87.5rem) {
	.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row:not(.ptp-title):not(.ptp-intro) {
		padding-right: 5%;
	}
}
@media (max-width: 1000px) {
	.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row:not(.ptp-intro) {
		max-width: none;
		padding-left: 5%;
		padding-right: 5%;
	}
	.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-title {
		padding-top: 30px;
	}
	.ptp .ptp-title h1 {
		font-size: 50px;
		line-height: 1.5;
	}
	/* the square at the screen's left edge, the heading beside it, the text under both */
	.ptp .ptp-section .wpb_text_column:first-child > .wpb_wrapper > :is(h2, h3):first-child {
		margin-left: calc(var(--ptp-gutter) - 5vw);
	}
	.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row.ptp-intro {
		padding: 0;
	}
	.ptp .ptp-intro > .vc_column_container {
		width: 100%;
		min-height: 0;
	}
}
@media screen and (max-width: 767px) {
	/* the parent forces 35px above every first or full-width column here (with !important) */
	.ptp :is(.entry-content, .wpb-content-wrapper) > .vc_row > .vc_column_container > .vc_column-inner {
		padding-top: 0 !important;
	}
	.ptp .ptp-intro > .vc_column_container > .vc_column-inner {
		padding-top: 35px !important;
	}
}
@media (max-width: 650px) {
	.ptp .ptp-toc-icon {
		display: none;
	}
	.ptp .entry-content h2 {
		font-size: 35px;
		line-height: 1.1;
	}
	.ptp .entry-content h3 {
		font-size: 28px;
	}
}

/* =========================================================================
   Cookie banner: the outlined "allow all" button, and the green one dark enough for white text (~5:1)
   ========================================================================= */
.moove-gdpr-infobar-allow-all {
	background-color: rgba(0, 0, 0, 0) !important;
	border: 1px solid rgb(32, 32, 32) !important;
	color: rgb(32, 32, 32) !important;
}
.moove-gdpr-infobar-allow-all:hover {
	background-color: rgb(32, 32, 32) !important;
	color: rgb(255, 255, 255) !important;
}
.moove-gdpr-infobar-reject-btn {
	background-color: #048040 !important;
	font-weight: 700 !important;
}
.moove-gdpr-infobar-reject-btn:hover {
	background-color: #036c34 !important;
}

/* EOF */