/*
Theme Name: Mondo Redux: Mondo rändekool
Theme URI: https://maailmakool.ee/randekool/
Description: Mondo rändekool's course pages (WPBakery) on Mondo Redux. Answers, Profiil, the certificate and the accounts: the mk_iae plugin.
Author: MTÜ Mondo
Template: mondo-redux
Version: 1.0
Text Domain: mondo
*/

/*
 * Only the course's own rules: the parent's style.css and css/app.css load before this file unchanged (functions.php),
 * and the headings' Raleway 900 is the parent's css/webfonts-lms.css.
 *
 * Building a chapter (template "Rändekool: peatükk"), see inc/blocks.php:
 *   - the first row has the Extra class name rk-title: the chapter's h1 and the block "Rändekooli ikoonirida";
 *   - then the bands: rows with "Taust (Rändekool)" blue / yellow / cyan, the pattern as the row's background image
 *     (Design Options); a band is as wide as the screen, with the white column in the middle;
 *   - in a band, a section per inner row with "Ikoon (Rändekool)": its square at the column's left, its h3 beside it;
 *   - the last band (cyan, no pattern): the PDF buttons (a.button.rk-pdf, the next chapter's a.button.rk-next) and
 *     the sources (a text block with the class rk-sources).
 */

:root {
	--rk-blue: rgb(43, 113, 183);
	--rk-yellow: rgb(242, 175, 29);
	--rk-cyan: #00ABBA;
	--rk-grey: rgb(238, 238, 238);
	--rk-green: rgb(4, 149, 72);
	--rk-red: rgb(235, 28, 36);
	--rk-link: var(--rk-blue);
	--rk-heading-font: 'Raleway', sans-serif;

	/* the white column: the icon gutter at its left, the text, the space at its right (the old course's 962px) */
	--rk-column: 962px;
	--rk-gutter: 131px;
	--rk-column-right: 101px;
	--rk-icon-width: 100px;
	--rk-icon-height: 79px;
	--rk-section-top: 40px;
	/* the title's column (the old 975px box less its 5% padding) */
	--rk-title-column: 845px;
}

/* a block's top margin (the text pages' white column, Profiil's) stays inside the page instead of pushing the whole
   content area, and with it its pattern, down from the header */
.rk .site-content {
	display: flow-root;
}

/* tables without the parent's grey even rows (the course never had them) */
.rk tbody tr:nth-child(even) {
	background-color: transparent;
}

/* Õppematerjalid's list (a table, its first column the icons) as the old theme drew it */
.rk table.lms_table_materials td {
	padding-top: 1%;
	padding-bottom: 1%;
	vertical-align: top;
}
.rk table.lms_table_materials td:first-child {
	width: 140px;
}
.rk table.lms_table_materials img {
	width: 110px;
	padding-right: 10px;
}

/* links in the course's text: the parent's line (a 1px border under the text, no text-decoration; it gives one to links
   in paragraphs and lists only, in black), here under every text link, in the link's own colour. Not on buttons, the
   icon row or an image's link. */
.rk :is(.entry-content, .lms_content, .rk-intro-box) a:not(.button, .rk-toc-icon, .rk-start):not(:has(img)),
.rk :is(.entry-content, .lms_content, .rk-intro-box) a:not(.button, .rk-toc-icon, .rk-start):not(:has(img)):hover {
	text-decoration: none;
	padding-bottom: 0;
	border-bottom: 1px solid currentColor !important;
}

/* anchors land below the sticky header; a link within the page glides there. A page opened at an exercise (after
   saving its answer, or from Profiil) is there at once: a glide would start before the page has its final height
   and need a second one */
html {
	scroll-behavior: smooth;
}
html:has(.iae-exercise:target) {
	scroll-behavior: auto;
}
.rk :is(.rk-section, h2, h3)[id],
.rk a[name] {
	scroll-margin-top: 100px;
}

/* the parent's css/app.css gives the mk body maailmakool's blue; the course is white (the front page blue again below) */
body.rk {
	background: #FFF;
}

.rk :is(h1, h2, h3, h4),
.rk :is(b, strong) {
	font-family: var(--rk-heading-font);
	font-weight: 900;
}

/* =========================================================================
   Header: logo | menu, to the right | search
   ========================================================================= */
.rk .site-header .logo img {
	width: 77px;
	height: auto;
}
/* KURSUS: the chapters' menu on a blue tab, its dropdown a wide numbered list */
.rk .site-header nav ul > li.lms_bg_menu_blue {
	background-color: var(--rk-blue);
}
.rk .site-header nav ul > li.lms_bg_menu_blue > a {
	color: #FFF;
	/* KURSUS alone in the headings' Raleway 900, as the old course had it */
	font-family: var(--rk-heading-font);
	font-weight: 900;
}
/* the chapters in its dropdown (and in the phone menu) in upper case, as the old course listed them */
.rk .site-header nav ul > li.lms_bg_menu_blue > ul a {
	text-transform: uppercase;
}
.rk .site-header nav ul > li.lms_bg_menu_blue:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) {
	background-color: var(--rk-grey);
}
.rk .site-header nav ul > li.lms_bg_menu_blue:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent) > a {
	color: #000;
}
@media screen and (min-width: 64em) {
	/* the items grouped at the right of the bar, shoulder to shoulder */
	.rk .site-header nav > ul.main.menu {
		justify-content: flex-end;
	}
	.rk .site-header nav > ul.main.menu > li > a {
		padding: 0 22px;
	}
	/* the rightmost dropdown anchored to the right edge, so it cannot overflow the screen */
	.rk .site-header nav > ul.main.menu > li:last-child ul {
		left: auto;
		right: 0;
		margin-left: 0;
	}
	/* the page you are on, or the section it is in: a grey tab, as in the old course (its text as it is) */
	.rk .site-header nav > ul.main.menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item, .current_page_ancestor, .current_page_parent) {
		background-color: var(--rk-grey);
	}
	.rk .site-header nav ul > li.lms_bg_menu_blue > ul {
		width: 500px !important;
	}
	.rk .site-header nav ul > li.lms_bg_menu_blue > ul > li {
		padding-left: 50px !important;
		text-align: left !important;
	}
	/* the search icon as far from the right edge as the logo is from the left */
	.rk #header_icons {
		margin-right: 6px;
	}
}

/* =========================================================================
   Chapter pages
   ========================================================================= */
.rk-chapter .entry-content {
	padding: 0;
}
/* the parent gives WPBakery rows 30px above and below, and a first column 35px of padding */
.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row {
	margin: 0 !important;
}
/* a line break typed between two rows (wpautop makes it a <br>) shows no gap */
.rk-chapter :is(.entry-content, .wpb-content-wrapper, .rk-band .wpb_wrapper) > br,
.rk-chapter :is(.entry-content, .wpb-content-wrapper, .rk-band .wpb_wrapper) > p:empty {
	display: none;
}
.rk-chapter .vc_column_container > .vc_column-inner {
	padding: 0 !important;
}
.rk-chapter .wpb_content_element {
	margin-bottom: 0;
}
.rk-chapter .wpb_content_element + .wpb_content_element {
	margin-top: 1em;
}

/* the title: white from edge to edge, the h1 and the icon row in a narrower column */
.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-title {
	/* the icon row 60px above the first band, as much as the band's colour above the white column */
	padding: 45px calc((100% - var(--rk-title-column)) / 2) 60px;
	background: #FFF;
	box-shadow: 0 0 0 100vmax #FFF;
	clip-path: inset(0 -100vmax);
}
.rk .rk-title h1 {
	font-size: 64px;
	line-height: 82px;
	margin: 0 0 32px;
	text-transform: uppercase;
}

/* the icon row: one square per kind of section, each to the first of them */
.rk .rk-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
}
.rk .rk-toc li {
	margin: 0;
	padding: 0;
}
.rk .entry-content .rk-toc-icon {
	display: block;
	width: var(--rk-icon-width);
	height: var(--rk-icon-height);
	background: var(--rk-icon) center / cover no-repeat;
	border: 0 !important;
}

/* the squares */
.rk .rk-icon-read,
.rk .rk-toc-read { --rk-icon: url(assets/icons/read.png); }
.rk .rk-icon-video,
.rk .rk-toc-video { --rk-icon: url(assets/icons/video.png); }
.rk .rk-icon-graph,
.rk .rk-toc-graph { --rk-icon: url(assets/icons/graph.png); }
.rk .rk-icon-exercise,
.rk .rk-toc-exercise { --rk-icon: url(assets/icons/exercise.png); }

/* a band: the colour and its pattern (the row's background image, Design Options) from screen edge to screen edge;
   .site-content clips the scroll bar's width that 100vw includes */
.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-band {
	width: 100vw;
	max-width: none;
	margin: 0 0 0 calc(50% - 50vw) !important;
	padding: 0;
	background-position: center top !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
}
.rk .rk-band-blue { background-color: var(--rk-blue); }
.rk .rk-band-yellow { background-color: var(--rk-yellow); }
.rk .rk-band-cyan { background-color: var(--rk-cyan); }
.rk-chapter .site-content {
	overflow-x: clip;
}
/* the first band shows its colour above the white column */
.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-title + .vc_row.rk-band,
.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-title ~ br + .vc_row.rk-band {
	padding-top: 60px;
}

/* the white column behind a band's sections too: their edges fall on fractions of a pixel (a player's 16:9 height),
   where the band's pattern would show through as a faint line */
.rk-chapter .rk-band > .wpb_column > .vc_column-inner > .wpb_wrapper {
	max-width: var(--rk-column);
	margin: 0 auto;
	background: #FFF;
}

/* a section: a stretch of the white column, its square at the left, the heading beside it */
.rk-chapter .vc_row.vc_inner {
	position: relative;
	max-width: var(--rk-column);
	margin: 0 auto;
	padding: 20px var(--rk-column-right) 10px var(--rk-gutter);
	background: #FFF;
}
.rk-chapter .wpb_wrapper > .vc_row.vc_inner:first-child {
	padding-top: var(--rk-section-top);
}
.rk-chapter .wpb_wrapper > .vc_row.vc_inner:last-child {
	padding-bottom: 40px;
}
.rk .vc_row.rk-section::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: var(--rk-section-top);
	width: var(--rk-icon-width);
	height: var(--rk-icon-height);
	background: var(--rk-icon) center / cover no-repeat;
}
.rk-chapter .wpb_wrapper > .vc_row.rk-section:not(:first-child)::before {
	top: 20px;
}
.rk-chapter .vc_inner .wpb_text_column:first-child > .wpb_wrapper > :is(h2, h3):first-child {
	display: flex;
	align-items: center;
	min-height: var(--rk-icon-height);
	margin: 0 0 15px;
}
.rk-chapter .entry-content h3 {
	font-size: 35px;
	line-height: 1.3;
}
/* a sub-heading in the text belongs to the paragraphs after it: more space above than below */
.rk-chapter .entry-content h4 {
	margin: 30px 0 10px;
}
.rk-chapter .entry-content :is(h4:first-child, :is(h2, h3) + h4) {
	margin-top: 0;
}
.rk-chapter .entry-content :is(p, li) {
	font-size: 16px;
	line-height: 1.6;
}
.rk-chapter .entry-content p {
	margin: 0 0 16px;
}
.rk-chapter .entry-content :is(p, li, td) a:not(.button) {
	color: var(--rk-link);
}
.rk-chapter .entry-content .wpb_video_widget {
	margin-top: 25px;
}
/* a section that is a player: the player level with its square, and 40px between players, as much as above the
   first one (the previous section's 10px below + 30px here) */
.rk-chapter .vc_inner .wpb_wrapper > .wpb_video_widget:first-child {
	margin-top: 0;
}
.rk-chapter .wpb_wrapper > .vc_row.vc_inner:not(:first-child):has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_video_widget:first-child) {
	padding-top: 30px;
}
.rk-chapter .wpb_wrapper > .vc_row.rk-section:not(:first-child):has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_video_widget:first-child)::before {
	top: 30px;
}
.rk-chapter .entry-content iframe {
	max-width: 100%;
}
/* an infographic: opens in the parent's lightbox (lib/js.js: a link to an upload around an image) */
.rk-chapter .rk-icon-graph .wpb_single_image img {
	width: 100%;
	border: 1px solid var(--rk-grey);
}
.rk-chapter .rk-icon-graph .wpb_single_image .vc_single_image-wrapper,
.rk-chapter .rk-icon-graph .wpb_single_image .vc_figure {
	display: block;
}
/* tables in an exercise's text */
.rk-chapter .vc_inner table {
	margin: 0 0 30px;
}
.rk-chapter .vc_inner :is(th, td) {
	border: 1px solid var(--rk-yellow);
	padding: 10px;
	text-align: left;
	vertical-align: top;
}

/* the buttons at the chapter's end: the texts as PDF (turquoise), the next chapter (yellow) */
.rk .entry-content .button:is(.rk-pdf, .rk-next) {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 15px 30px;
	background: var(--rk-cyan);
	color: #000;
	font-size: 16px;
	line-height: 24px;
	text-transform: none;
	border: 0;
}
.rk .entry-content .button.rk-next {
	background: var(--rk-yellow);
}
.rk .entry-content .button.rk-pdf:is(:hover, :focus) {
	background: #00919E;
	color: #000;
}
.rk .entry-content .button.rk-next:is(:hover, :focus) {
	background: #DA9A0E;
	color: #000;
}
/* the sources, under a line */
.rk .rk-sources {
	/* under the line, the first source as far down as the old page's (which had an empty title paragraph there) */
	padding-top: 20px;
	border-top: 1px solid #000;
}
.rk .rk-sources :is(p, li) {
	font-size: smaller;
}
/* below the last source as much white as between the buttons and the line (35px, with the text's own leading) */
.rk-chapter .wpb_wrapper > .vc_row.vc_inner:last-child:has(.rk-sources) {
	padding-bottom: 32px;
}

/* the arrow back to the top (js/rk.js) */
.rk-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: 14%;
	max-width: 202px;
	aspect-ratio: 351 / 108;
	padding: 0;
	border: 0;
	background: url(assets/top.png) center / contain no-repeat;
	cursor: pointer;
}
.rk-top[hidden] {
	display: none;
}
/* the plugin's views (Profiil) still print the old theme's arrow image; this theme's own arrow is the one shown */
.rk #lms_scroll_to_top {
	display: none;
}
@media (max-width: 1000px) {
	.rk-top {
		left: 69%;
		bottom: 30px;
		width: 28%;
	}
}

/* =========================================================================
   Front page (lms-home.php): the welcome picture, the text on a white box over it
   ========================================================================= */
body.rk-home {
	background-color: var(--rk-blue);
}
.rk .rk-intro {
	max-width: 1920px;
	margin: 0 auto;
	padding: 34.2% 0 0;
	background: url(assets/bg-welcome.png) center top / 100% auto no-repeat;
}
@media (min-width: 1920px) {
	.rk .rk-intro {
		padding-top: 655px;
	}
}
.rk .rk-intro-box {
	max-width: 1040px;
	margin: 0 auto 60px;
	padding: 90px 100px 35px;
	background: #FFF;
}
.rk .rk-intro-box h4 {
	padding-top: 30px;
	line-height: 1.3;
}
.rk .rk-intro-box h4:first-child {
	padding-top: 0;
}
.rk .rk-intro-box .rk-start {
	display: inline-block;
	margin: 30px 0 50px;
	padding: 15px 30px;
	background: var(--rk-yellow);
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	border: 0;
}
/* the parent's a:hover draws a black line under every link */
.rk .rk-intro-box .rk-start:is(:hover, :focus) {
	background: #DA9A0E;
	border: 0;
}
.rk .rk-disclaimer {
	font-size: smaller;
	font-style: italic;
	text-align: center;
}

/* =========================================================================
   Text pages (lms-text.php): Mõisted, Õppematerjalid, Allikad
   ========================================================================= */
.rk .lms_bg_pattern_green { background: url(assets/bg-pattern-green.png) repeat; }
.rk .lms_bg_pattern_yellow { background: url(assets/bg-pattern-yellow.png) repeat; }
.rk .lms_bg_pattern_blue { background: url(assets/bg-pattern-blue.png) repeat; }
.rk .rk-text-column,
.rk .lms_content {
	max-width: 975px;
	margin: 60px auto 0;
	padding: 30px 5% 50px;
	background: #FFF;
}
.rk .rk-text-column h1,
.rk .lms_content h1 {
	margin: 15px 0 32px;
	font-size: 64px;
	line-height: 82px;
	text-transform: uppercase;
}
/* the search results (the parent's searchpage.php): "Otsingutulemused:" as large as the account pages' titles, and
   a result's title turning the course's blue under the pointer instead of the parent's green (.news a:hover) */
.rk .site-content.archive h1 {
	font-size: 64px;
	line-height: 82px;
}
/* the title 45px under the header, as the account pages' (the parent's 30px row margin + 35px column padding) */
.rk .site-content.archive > .entry-content > .vc_row:first-child {
	margin-top: 10px;
}
.rk .news .search-result-item > a:not(.button):is(:hover, :focus) {
	color: var(--rk-blue);
}
/* no label under a result's title: the parent shows a page's parent there ("Kursus" for every chapter), and the
   course's other pages have none (an empty line) */
.rk .news .search-result-item > p.date {
	display: none;
}

/* Profiil (mk_iae's view in .lms_content): its title where the account pages have theirs, right under the header */
.rk .lms_content {
	margin-top: 0;
	padding-top: 45px;
}
.rk .lms_content h1 {
	margin-top: 0;
}
.rk :is(.rk-text-column, .lms_content) a {
	color: var(--rk-link);
}
.rk-text .site-content {
	padding-bottom: 60px;
}

/* =========================================================================
   An exercise's answer field (mk_iae's [iae_exercise]) and the way to register for one. The block is a text block
   (wpb_text_column) holding the exercise's text and then the field, so the text block's rules above apply to its text.
   ========================================================================= */
/* the field, or the way to register for it, set apart from the exercise's text (the enrol link is a <p>: more specific
   than the chapter's p margins) */
.rk-chapter .entry-content .iae-answer {
	margin: 30px 0 0;
}
.rk .iae-answer textarea {
	display: block;
	width: 100%;
	min-height: 12em;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid var(--rk-yellow);
	background: #FFF;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
}
.rk .iae-answer textarea:focus {
	outline: 2px solid var(--rk-yellow);
	outline-offset: -2px;
}
.rk .entry-content p.iae-answer-submit {
	margin: 20px 0 0;
}
.rk .entry-content :is(.button.iae-save, .button.iae-enrol, .button.iae-btn, .button.iae-btn-grey) {
	display: inline-block;
	margin: 0;
	padding: 15px 30px;
	border: 0;
	background: var(--rk-yellow);
	color: #000;
	font-size: 16px;
	line-height: 24px;
	text-transform: none;
}
.rk .entry-content :is(.button.iae-save, .button.iae-enrol, .button.iae-btn):is(:hover, :focus) {
	background: #DA9A0E;
	color: #000;
}
.rk .entry-content .button.iae-btn-grey {
	background: var(--rk-grey);
}
.rk .entry-content .button.iae-btn-grey:is(:hover, :focus) {
	background: #DDD;
	color: #000;
}
.rk .iae-answer-message,
.rk .iae-account-message {
	font-family: var(--rk-heading-font);
	font-weight: 900;
}
.rk :is(.iae-answer-message, .iae-account-message)[data-kind="error"] {
	color: var(--rk-red);
}
.rk :is(.iae-answer-message, .iae-account-message)[data-kind="ok"] {
	color: var(--rk-green);
}

/* =========================================================================
   Account pages (mk_iae's [iae_registration], [iae_login], [iae_password], on lms-text.php; body class rk-account):
   the old course's forms, measured from them. A plain white page with the column right under the header; the
   fields 413px wide (half the column), 51px tall, 85px apart, the field names as placeholders; 16px text; the
   login's "Unustasid parooli?" and the button side by side; the buttons yellow and upper case, "« Tagasi" grey.
   ========================================================================= */
.rk-account .site-content {
	padding-bottom: 0;
	background: none !important;
}
.rk-account .rk-text-column {
	margin-top: 0;
	padding: 45px 65px 40px;
}
.rk-account .rk-text-column h1 {
	margin-top: 0;
}
.rk .iae-account,
.rk .entry-content .iae-account p,
.rk .iae-account :is(legend, label) {
	font-size: 16px;
}
.rk .entry-content .iae-account p {
	margin: 0;
}
.rk .entry-content .iae-account p.iae-account-intro,
.rk .entry-content .iae-account p.iae-account-switch {
	margin: 9px 0 32px;
}
/* "Sul on juba Maailmakool.ee konto? Logi sisse »" and the links beside the buttons: black, no line until hovered
   (more specific than the text links' line) */
.rk .entry-content .iae-account p:is(.iae-account-switch, .iae-account-link) a {
	color: #000;
	border-bottom: 0 !important;
}
.rk .entry-content .iae-account p:is(.iae-account-switch, .iae-account-link) a {
	/* the old page had them in <b>: the headings' Raleway 900, not the body font made bold */
	font-family: var(--rk-heading-font);
	font-weight: 900;
}
.rk .entry-content .iae-account p:is(.iae-account-switch, .iae-account-link) a:is(:hover, :focus) {
	border-bottom: 1px solid currentColor !important;
}

/* the form: half the column, its buttons and links wrapped in a row at the end */
.rk .iae-account-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 413px;
}
.rk .iae-account-form > * {
	flex: 0 0 100%;
}
.rk .iae-account fieldset {
	margin: 0 0 34px;
	padding: 0;
	border: 0;
}
.rk .iae-account legend {
	margin: 0 0 20px;
	padding: 0;
	line-height: 1.5;
}
/* the login and the password link's form had no heading over their fields */
.rk .iae-account-form:is([data-action="iae_login"], [data-action="iae_lostpassword"]) legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.rk .iae-account-form:is([data-action="iae_login"], [data-action="iae_lostpassword"]) fieldset {
	margin-bottom: 18px;
}
.rk .entry-content .iae-account fieldset p {
	margin: 0 0 34px;
}
.rk .entry-content .iae-account fieldset p:last-child {
	margin-bottom: 0;
}
.rk .iae-account :is(input[type="text"], input[type="email"], input[type="password"]) {
	display: block;
	width: 100%;
	height: 51px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 0;
	box-shadow: none;
	background: #FFF;
	font-family: inherit;
	font-size: 16px;
}
.rk .iae-account :is(input[type="text"], input[type="email"], input[type="password"]):focus {
	outline: 2px solid var(--rk-blue);
	outline-offset: -2px;
}
.rk .iae-account ::placeholder {
	color: #000;
	opacity: 1;
}
/* the choices one per line, as the old form had them */
.rk .iae-account-choices label,
.rk .iae-account-check label {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	line-height: 1.5;
	cursor: pointer;
}
.rk .iae-account-choices input[type="radio"],
.rk .iae-account-check input {
	margin: 0;
	accent-color: var(--rk-blue);
}
.rk .entry-content .iae-account-choices p {
	margin: 20px 0 0;
}
.rk .entry-content .iae-account p.iae-account-check {
	margin: -16px 0 0;
}
.rk .iae-account legend label {
	display: inline;
	margin: 0;
}
.rk .iae-account [hidden] {
	display: none;
}

/* the end of the form: a link on the left, the button on the right (the registration has its button alone) */
.rk .entry-content .iae-account-form > p.iae-account-link {
	flex: 1 1 auto;
	order: 10;
	margin: 0;
}
.rk .entry-content .iae-account-form > p.iae-account-submit {
	flex: 0 0 auto;
	order: 11;
	margin: 0;
}
.rk .entry-content .iae-account :is(.button.iae-btn, .button.iae-btn-grey) {
	padding: 15px 30px;
	line-height: 16px;
}
.rk .entry-content .iae-account .button.iae-btn {
	text-transform: uppercase;
}
.rk .entry-content .iae-account p.iae-account-back-row {
	margin: 40px 0 0;
}
.rk .iae-account button:disabled {
	opacity: 0.6;
	cursor: wait;
}
.rk .iae-account-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.rk .entry-content .iae-account-message {
	margin: 0 0 30px;
}
.rk .entry-content .iae-account-message p + p {
	margin-top: 8px;
}
.rk .entry-content .iae-account-message a {
	color: inherit;
}
/* the field for bots: out of sight and out of the way, not display:none (some bots skip hidden fields) */
.rk .iae-account-contact {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
   Profiil and the old account forms (mk_iae's views)
   ========================================================================= */
.rk .lms_table_progress td {
	height: 90px;
	padding: 0;
	color: #000;
	font-size: large;
	vertical-align: middle;
}
.rk .lms_table_progress a {
	display: block;
	color: #000;
}
/* Profiil's exercise list: whole rows to click, no line (more specific than the text links' rule above) */
.rk .lms_content table.lms_table_progress td a:not(.button) {
	border-bottom: 0 !important;
}
.rk .lms_table_progress td:nth-child(2) a {
	padding-left: 10px;
}
.rk .lms_table_progress img {
	padding-top: 7px;
}
.rk .lms_form {
	width: 100%;
}
/* Profiil's rating and feedback form: the old look. The parent makes labels small blocks (each rating on its own
   line) and pads table cells; here the labels are body text, the ratings in one row, the column flush left. */
.rk .lms_complete .lms_form td {
	padding: 0 0 20px;
}
.rk .lms_complete label {
	display: inline;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.rk .lms_complete input[type="radio"] {
	margin: 0 4px 0 0;
	vertical-align: -1px;
}
.rk .lms_complete textarea {
	margin: 0;
	padding: 10px 20px;
	border: 1px solid #000;
	box-shadow: none;
}
.rk .lms_form :is(input[type="text"], input[type="email"], input[type="password"], textarea) {
	height: 51px;
	padding-left: 20px;
	background: #FFF;
	border-color: #000;
}
.rk :is(.lms_button, .lms_chapter_button) {
	display: inline-block;
	padding: 15px 30px;
	background: var(--rk-yellow);
	color: #000;
}
.rk .lms_back_button {
	padding: 15px 30px;
	background: var(--rk-grey);
}
.rk .lms_msg_error {
	color: var(--rk-red);
	font-weight: 900;
}
.rk .lms_msg_success {
	color: var(--rk-green);
	font-weight: 900;
}

/* =========================================================================
   Footer: the partners' logos
   ========================================================================= */
.rk .rk-footer {
	margin: 0;
	padding: 0 20px;
	background: #FFF;
	text-align: center;
}
.rk .rk-footer img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.rk .rk-footer-own {
	padding: 20px;
}
.rk .rk-footer-own img {
	width: 50%;
	max-width: 525px;
}

/* =========================================================================
   Narrower screens
   ========================================================================= */
@media (max-width: 87.5rem) {
	.rk .rk-intro-box {
		max-width: 80%;
	}
}
@media (max-width: 1000px) {
	.rk-chapter .rk-band > .wpb_column > .vc_column-inner > .wpb_wrapper {
		max-width: none;
	}
	.rk-chapter .vc_row.vc_inner {
		max-width: none;
		padding-left: 5%;
		padding-right: 5%;
	}
	.rk .vc_row.rk-section::before {
		left: 5%;
	}
	/* the square at the left, the heading beside it, the text under both */
	.rk-chapter .rk-section .wpb_text_column:first-child > .wpb_wrapper > :is(h2, h3):first-child {
		margin-left: var(--rk-gutter);
	}
	/* a section without a heading starts under its square: its first block, or the text of a text block (an exercise
	   too) that does not open with a heading */
	.rk-chapter .rk-section > .wpb_column > .vc_column-inner > .wpb_wrapper > :first-child:not(.wpb_text_column),
	.rk-chapter .rk-section > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child > .wpb_wrapper > :first-child:not(h2, h3) {
		margin-top: calc(var(--rk-icon-height) + 20px);
	}
	.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-title {
		padding: 30px 5% 50px;
	}
	.rk .rk-title h1,
	.rk :is(.rk-text-column, .lms_content) h1,
	.rk .site-content.archive h1 {
		font-size: 50px;
		line-height: 1.5;
	}
	.rk .rk-intro-box {
		max-width: none;
		padding: 5% 5% 35px;
	}
	.rk .rk-text-column,
	.rk .lms_content {
		max-width: none;
		margin-top: 0;
	}
	.rk-account .rk-text-column {
		padding: 30px 5% 40px;
	}
}
@media screen and (max-width: 767px) {
	/* the parent forces 35px above every first or full-width column here (with !important) */
	.rk-chapter .vc_column_container > .vc_column-inner {
		padding-top: 0 !important;
	}
	.rk .rk-footer-own img {
		width: 100%;
	}
}
@media (max-width: 650px) {
	.rk .rk-title h1,
	.rk :is(.rk-text-column, .lms_content) h1,
	.rk .site-content.archive h1 {
		font-size: 36px;
	}
	.rk .rk-toc {
		display: none;
	}
	/* without the icon row: as much white under the title as above it, and the first band's colour as high as the
	   parent's gap between blocks */
	.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-title {
		padding-bottom: 30px;
	}
	.rk-chapter .rk-title h1 {
		margin-bottom: 0;
	}
	.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-title + .vc_row.rk-band,
	.rk-chapter :is(.entry-content, .wpb-content-wrapper) > .vc_row.rk-title ~ br + .vc_row.rk-band {
		padding-top: 30px;
	}
	.rk-chapter .entry-content h3 {
		font-size: 26px;
	}
}

/* =========================================================================
   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 */