@import url("../shared/css/modern-normalize.min.css");
@import url("../shared/css/montserrat.css");
@import url("../shared/css/fontawesome-all.min.css");
@import url("../shared/css/theme.css");
@import url("../shared/css/nav.css");
@import url("../shared/css/wrapper.css");
@import url("../shared/css/banner.css");
@import url("../shared/css/components.css");
@import url("../shared/css/quote.css");
@import url("../shared/css/form.css");

/* The custom rules below are duplicated in static/admin/preview.css for the
 * Decap CMS preview pane. Keep both copies in sync when editing. */

/* The shared theme.css sets a text colour on body but never a background, and
   nothing declares a colour scheme. A visitor whose OS is in dark mode therefore
   got a browser-painted dark canvas behind dark grey text: the whole site, not
   just the embedded form. This site is designed light-only, so say so.
   theme.css is shared with openvalue-eu-website and openvalue-blog, which have
   the same problem; fixing it there is a separate change in those repos. */
:root {
	color-scheme: light;
}

html,
body {
	background-color: var(--theme-white);
}

input, select, textarea {
	appearance: none;
}

br.clear {
	clear: both;
}

#schedule {
	margin-top: var(--spacing-md);
}

footer {
	margin: 2em 0 0 0;
}

footer > p {
	font-size: 1.25em;
}


#certified-training {
	margin-top: var(--spacing-xl);
}

#certificates {
	display: flex;
	max-height: 200px;
	align-content: center;
	justify-items: center;
	gap: var(--spacing-md);

	img {
		margin: 0 auto;
		object-fit: scale-down;
		max-height: 100%;
	}
}

@media (max-width: 1200px) {
	#certificates {
		flex-direction: column;
		max-height: none;

		img {
			max-width: 100%;
		}
	}

}

/* List */
ul {
	padding-left: 1em;
}

ul li {
	padding-left: 0.5em;
}

ol {
	padding-left: 1.25em;
}

ol li {
	padding-left: 0.25em;
}

:where(article) p:not(blockquote p) {
	font-size: 1.25em;
}

body > article {
	margin-bottom: 0;
}

/* Copyright */

/* Large */
@media screen and (max-width: 1280px) {
	header {
		margin: 0 0 4em 0;
	}

	/* Wrappers */

	.wrapper {
		padding: 5em 0 5em 0;
	}
}

/* Medium */
@media screen and (max-width: 980px) {
}

/* Small */
@media screen and (max-width: 736px) {
	input, textarea, select {
		letter-spacing: 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-size: 1.25em;
		margin: 0 0 0.4em 0;
	}

	h1 {
		font-size: 2.25em;
		line-height: 1.25em;
	}

	header {
		margin: 0 0 2em 0;
	}

	header > p {
		font-size: 1.25em;
	}

	footer {
		margin: 2.5em 0 0 0;
	}

	footer > p {
		font-size: 1.25em;
	}

	hr {
		margin: 1.5em 0 2em 0;
	}

	/* Section/Article */
	section, article {
		clear: both;
	}

	/* Button */
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		text-align: center;
		font-size: 1.2em;
		padding: 1em 0 1em 0;
	}

	/* Wrappers */
	.wrapper {
		padding: 3em 0;
	}

}

/* custom styles */
h3 {
	font-size: 1.8em;
	line-height: 1.5em
}

article h1, h2 {
	font-size: 2.2em;
	line-height: 1em
}

article.wrapper {
	padding-top: 3em;
}

p.video-caption {
	margin-top: -0.5em;
	padding: 0;
	font-size: 0.9em !important;
}

article.wrapper ul {
	margin-bottom: 0;
	padding-bottom: 0;

}

@media screen and (max-width: 736px) {
	div.tech-col {
		padding: 0 0 1em;
		margin: 0 0 0 12%;
	}

	div.cert-col {
		margin-top: 2em;
	}
}

@media screen and (min-width: 736px) {
	.contact-form {
		margin-left: 20%;
		margin-right: 20%;
	}
}

p img {
	width: 90%;
	margin: 0 auto;
	display: block;
}

#training,
#training-details {
	margin: 0;
	justify-content: center;
	align-content: center;
}

#training :is(h1, h2, h3, h4, h5, h6){
	text-align: center;
}

#training-details h4 {
	font-size: 1.3rem;
}

/* skipped h4 on purpose */
#training-details :is(h1, h2, h3, h5, h6){
	text-align: center;
}
#training article > p,
#training blockquote > p,
#training > p,
#training-details p:not(.instructor) {
	text-align: justify;
	line-height: 1.5em;
}

#training.single-training ul,
#training.single-training ol,
#training-details.single-training ul,
#training-details.single-training ol {
	text-align: left;
	list-style-position: outside;
	font-size: 1em;
	line-height: 1.65em;
}


.table-wrapper {
	overflow: scroll;
}

#training .instructor,
#training-details .instructor {
	text-align: center;
	font-size: 1.2em;
}

#training .quotes,
#training-details .quotes {
	margin: var(--spacing-lg) 0;
}

.training-header-image {
	display: block;
	height: 10em;
	width: auto;
	margin: 2em auto;
}

header#header nav#nav a {
	text-decoration: underline;
	text-decoration-style: dotted;
}

.youtube-video {
	width: 50%;
	margin: 0 auto 1em;
}

#training p.video-caption,
#training-details p.video-caption {
	text-align: center;
	font-style: italic;
	font-size: 0.8em;


}

.openvalue-register-btn {
	box-shadow: none !important;
	box-sizing: border-box;
	margin: 0;
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	position: relative;
	text-align: center;
	transition: all .15s linear;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	padding: 12px 24px;
	-webkit-appearance: none;
	background: #2b343c;
	border-color: #2b343c;
	color: #ffffff !important;
	font-size: 19px;
}

#trainingTable tr.group,
#trainingTable tr.group:hover {
	background-color: rgba(0, 0, 0, 0.1) !important;
}

#trainingTable :root.dark tr.group,
#trainingTable :root.dark tr.group:hover {
	background-color: rgba(0, 0, 0, 0.75) !important;
}

#practical-details {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

#back-button {
	font-size: 13px;
	text-decoration: none;
	display: flex;
	gap: var(--spacing-md);
	width: fit-content;
	margin-right: auto;
}

.contact-cta {
	margin: var(--spacing-md) 0;
}

.contact-cta .contact-cta-p {
	line-height: 1.5em;
	font-size: 15px;
	font-weight: 300;
	text-align: center;
}
/* Session panel: the planned dates on a training page. */
.session-panel {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-md);
	border: 1px solid var(--theme-steel-gray);
	border-radius: 6px;
	background: var(--theme-light-steel-gray);
	text-align: left;
}

.session-panel--compact {
	margin-top: var(--spacing-xl);
	background: none;
}

#training-details .session-panel-title {
	margin: 0 0 var(--spacing-sm);
	font-size: 1.3em;
	line-height: 1.3em;
	text-align: left;
}

.session-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.session {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm) 0;
	border-top: 1px solid var(--theme-steel-gray);
}

.session:first-child {
	border-top: none;
}

.session-when {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.session-date {
	font-weight: 700;
	font-size: 1.05em;
}

.session-meta {
	font-size: 0.85em;
	color: var(--theme-light-midnight);
}

.session-sep {
	padding: 0 0.15em;
}

.session-tag {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.5em;
	border-radius: 3px;
	background: var(--theme-steel-gray);
	color: var(--theme-secondary);
	font-size: 0.9em;
}

.session-tag--seats {
	background: var(--theme-primary);
	color: var(--theme-white);
}

.session-action {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-shrink: 0;
}

.session-status {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--theme-light-midnight);
}

.session--full .session-date {
	color: var(--theme-light-midnight);
}

.session-none-title {
	margin: 0 0 var(--spacing-xs);
	font-weight: 700;
	font-size: 1.05em;
}

#training-details .session-none-text {
	margin: 0 0 var(--spacing-sm);
	font-size: 0.9em;
}

/* A real link styled as a button, so it works without JavaScript. */
a.openvalue-register-btn,
a.openvalue-register-btn:hover {
	text-decoration: none;
}

.openvalue-register-btn--secondary {
	background: transparent !important;
	border-color: var(--theme-secondary) !important;
	color: var(--theme-secondary) !important;
}

@media screen and (max-width: 736px) {
	.session {
		flex-direction: column;
		align-items: flex-start;
	}

	.session-action {
		width: 100%;
	}

	.session-action .openvalue-register-btn {
		width: 100%;
	}
}

/* Top 10 bestsellers on the homepage. */
.bestsellers {
	margin: var(--spacing-xl) 0;
}

#training .bestsellers-title {
	margin-bottom: var(--spacing-md);
}

.bestseller-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--spacing-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bestseller-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-md);
	border: 1px solid var(--theme-steel-gray);
	border-radius: 6px;
	background: var(--theme-white);
	text-align: left;
}

.bestseller-link,
.bestseller-link:hover {
	text-decoration: none;
	border-bottom: none;
}

#training .bestseller-name {
	margin: 0;
	font-size: 1.15em;
	line-height: 1.35em;
	text-align: left;
	color: var(--theme-secondary);
}

.bestseller-link:hover .bestseller-name {
	color: var(--theme-primary);
}

#training p.bestseller-summary {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.5em;
	text-align: left;
}

#training p.bestseller-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin: 0;
	text-align: left;
}

.bestseller-fact {
	padding: 0.1em 0.5em;
	border-radius: 3px;
	background: var(--theme-light-steel-gray);
	font-size: 0.8em;
}

#training p.bestseller-date {
	margin: 0;
	font-size: 0.85em;
	font-weight: 700;
	text-align: left;
}

#training p.bestseller-date--none {
	font-weight: 300;
	color: var(--theme-light-midnight);
}

.bestseller-cta {
	margin-top: auto !important;
	align-self: flex-start;
	font-size: 15px !important;
	padding: 8px 18px !important;
}

/* Homepage hero. */
.hero {
	margin-bottom: var(--spacing-xl);
	text-align: center;
}

#training h1.hero-title {
	margin: 0 auto var(--spacing-sm);
	max-width: 20em;
	font-size: 2.2em;
	line-height: 1.2em;
}

#training p.hero-lead {
	margin: 0 auto var(--spacing-md);
	max-width: 40em;
	font-size: 1.05em;
	line-height: 1.6em;
	text-align: center;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	justify-content: center;
	margin-bottom: var(--spacing-lg);
}

.hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	align-items: center;
	justify-content: center;
}

.hero-trust img {
	height: 52px;
	width: auto;
}

#training p.hero-trust-text {
	margin: 0;
	max-width: 22em;
	font-size: 0.8em;
	line-height: 1.4em;
	text-align: left;
	color: var(--theme-light-midnight);
}

/* Next dates across the whole catalogue. */
.upcoming {
	margin: var(--spacing-xl) 0;
}

.upcoming-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--theme-steel-gray);
}

.upcoming-row {
	display: grid;
	grid-template-columns: 12em 1fr auto auto;
	gap: var(--spacing-sm);
	align-items: center;
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--theme-steel-gray);
}

.upcoming-when {
	display: flex;
	flex-direction: column;
}

.upcoming-date {
	font-weight: 700;
	font-size: 0.95em;
}

.upcoming-place {
	font-size: 0.8em;
	color: var(--theme-light-midnight);
}

.upcoming-name {
	font-size: 0.95em;
	text-align: left;
}

.upcoming-price {
	font-size: 0.85em;
	white-space: nowrap;
	color: var(--theme-light-midnight);
}

.upcoming-action .openvalue-register-btn {
	font-size: 15px !important;
	padding: 8px 18px !important;
}

#training p.upcoming-more {
	margin-top: var(--spacing-sm);
	font-size: 0.9em;
}

#training p.schedule-intro {
	margin-bottom: var(--spacing-md);
	font-size: 0.9em;
}

/* Catalogue filter bar. */
.filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: 0.85em;
	cursor: pointer;
}

.filter-toggle input {
	margin: 0;
}

@media screen and (max-width: 736px) {
	#training h1.hero-title {
		font-size: 1.7em;
	}

	.hero-actions .openvalue-register-btn {
		width: 100%;
	}

	.upcoming-row {
		grid-template-columns: 1fr;
		gap: var(--spacing-xs);
	}

	.upcoming-action .openvalue-register-btn {
		width: 100%;
	}
}

/* Testimonial carousel. slick sizes every slide to the tallest one, and a single
   468-character quote was forcing all of them to 639px while the median needs
   about 250px. That dead space read as a gap between the quotes and the
   in-company block. Clamping the quote text keeps the slides an even height.
   slider.css is shared with the other two OpenValue sites, so the rule lives
   here instead. */
.quotes .slider-item blockquote p {
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.quotes .slider-content {
	margin-bottom: var(--spacing-md);
}

/* In-company block on the homepage. It closes the page, so it is centred and
   given room; the button is the last thing a visitor sees before the footer. */
#in-company {
	margin-top: var(--spacing-xl);
	padding: var(--spacing-lg) var(--spacing-md);
	border-radius: 8px;
	background: var(--theme-light-steel-gray);
	text-align: center;
}

#in-company h2 {
	margin-bottom: var(--spacing-sm);
}

#training p.in-company-lead {
	max-width: 46em;
	margin: 0 auto var(--spacing-md);
	text-align: center;
}

.in-company-cta {
	display: flex;
	justify-content: center;
	margin-bottom: var(--spacing-sm);
}

#training p.in-company-contact {
	margin: 0;
	font-size: 0.9em;
	text-align: center;
	color: var(--theme-light-midnight);
}

/* Registration form. Deliberately plain and roomy: it is the last step before
   someone books, so nothing here should ask for a second look. */
.ov-form {
	max-width: 42em;
	margin: var(--spacing-md) 0 0;
	text-align: left;
}

.ov-form-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ov-field {
	margin-bottom: var(--spacing-md);
	border: 0;
	padding: 0;
}

.ov-field[hidden] {
	display: none;
}

.ov-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
}

.ov-form label,
.ov-form legend {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 700;
	font-size: 0.95em;
}

.ov-required {
	color: var(--theme-primary);
}

.ov-form input[type="text"],
.ov-form input[type="email"],
.ov-form input[type="tel"],
.ov-form select,
.ov-form textarea {
	width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var(--theme-steel-gray);
	border-radius: 4px;
	background: var(--theme-white);
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
}

.ov-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--theme-secondary) 50%),
		linear-gradient(135deg, var(--theme-secondary) 50%, transparent 50%);
	background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.5em;
}

.ov-form input:focus,
.ov-form select:focus,
.ov-form textarea:focus {
	outline: 2px solid var(--theme-primary);
	outline-offset: 1px;
	border-color: var(--theme-primary);
}

.ov-radios {
	display: grid;
	gap: 0.4em;
}

/* main.css strips the native appearance from every input, which makes radios
   and checkboxes invisible. Put it back for these two. */
.ov-form input[type="radio"],
.ov-form input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: auto;
	width: auto;
	accent-color: var(--theme-primary);
}

.ov-form label.ov-radio,
.ov-form label.ov-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-bottom: 0;
	font-weight: 300;
	cursor: pointer;
}

.ov-form label.ov-radio input,
.ov-form label.ov-checkbox input {
	margin-top: 0.3em;
	flex: 0 0 auto;
}

#training-details p.ov-hint {
	margin: 0.35em 0 0;
	font-size: 0.85em;
	color: var(--theme-light-midnight);
	text-align: left;
}

#training-details p.ov-error {
	margin: 0.35em 0 0;
	font-size: 0.85em;
	font-weight: 700;
	color: #b3261e;
	text-align: left;
}

#training-details p.ov-error:empty {
	display: none;
}

.ov-field.has-error input,
.ov-field.has-error select,
.ov-field.has-error textarea {
	border-color: #b3261e;
}

#training-details p.ov-form-status {
	margin: var(--spacing-sm) 0;
	text-align: left;
	font-weight: 700;
}

#training-details p.ov-form-status:empty {
	display: none;
}

#training-details p.ov-form-status.is-error {
	color: #b3261e;
}

#training-details p.ov-form-footnote {
	margin-top: var(--spacing-sm);
}

.ov-form #ov-submit {
	min-width: 12em;
}

.ov-form #ov-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.registration-done {
	margin: var(--spacing-md) 0;
	padding: var(--spacing-md);
	border-left: 4px solid var(--theme-primary);
	border-radius: 4px;
	background: var(--theme-light-steel-gray);
	text-align: left;
}

@media screen and (max-width: 736px) {
	.ov-form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Registration page and the embedded Notion form. */
.notion-form {
	margin: var(--spacing-md) 0;
}

#training-details .notion-form-title {
	margin: 0 0 var(--spacing-sm);
	text-align: left;
}

.notion-form-frame {
	display: block;
	width: 100%;
	/* Tall enough that the form scrolls with the page instead of inside its own
	   frame, which is what made it feel bolted on. */
	min-height: 1600px;
	border: 0;
	background: var(--theme-white);
	/* The embedded document follows the visitor's own dark mode, which looks
	   wrong inside a light-only site. color-scheme on the embedding element is
	   the only lever available across origins. */
	color-scheme: light;
}

#training,
#training-details {
	& p.notion-form-fallback {
		margin: var(--spacing-xs) 0 0;
		font-size: 0.85em;
		color: var(--theme-light-midnight);
	}
}

.register-selection {
	margin: 0 0 var(--spacing-md);
	padding: var(--spacing-md);
	border-left: 4px solid var(--theme-primary);
	border-radius: 4px;
	background: var(--theme-light-steel-gray);
	text-align: left;
}

#training-details p.register-selection-label {
	margin: 0;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--theme-light-midnight);
	text-align: left;
}

#training-details p.register-selection-value {
	margin: 0.15em 0 var(--spacing-xs);
	font-size: 1.15em;
	font-weight: 700;
	text-align: left;
}

#training-details p.register-selection-hint {
	margin: 0;
	font-size: 0.85em;
	text-align: left;
}

#training-details p.register-help {
	margin-top: var(--spacing-md);
	font-size: 0.9em;
	text-align: left;
}

/* Catalogue table. The shared table.css is synced across the three OpenValue
   sites, so everything specific to this table lives here. */
#trainingTable {
	table-layout: auto;
	width: 100% !important;
}

#trainingTable th,
#trainingTable td {
	padding: 0.65em 0.8em;
	vertical-align: middle;
	line-height: 1.4;
}

#trainingTable tbody tr:nth-child(even) > td {
	background: rgba(0, 0, 0, 0.02);
}

#trainingTable tbody tr:hover > td {
	background: rgba(61, 125, 201, 0.07);
}

#trainingTable td.col-title {
	min-width: 16em;
	font-weight: 700;
}

#trainingTable td.col-title a {
	border-bottom: none;
	text-decoration: none;
}

#trainingTable td.col-title a:hover {
	color: var(--theme-primary);
	text-decoration: underline;
}

#trainingTable td.col-date {
	white-space: nowrap;
	font-weight: 700;
}

#trainingTable th.col-price,
#trainingTable td.col-price {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#trainingTable td.col-price {
	font-weight: 700;
}

/* "On request" is a real answer, but it should not shout like a date or price. */
#trainingTable td.is-on-request {
	font-weight: 300;
	color: var(--theme-light-midnight);
}

#trainingTable td.col-duration {
	white-space: nowrap;
}

#trainingTable td.col-instructor {
	font-size: 0.85em;
	color: var(--theme-light-midnight);
}

#trainingTable td.col-level,
#trainingTable td.col-area {
	white-space: nowrap;
	font-size: 0.9em;
}

/* Deliberately no overflow-x here. DataTables Responsive measures the table
   against its container to decide which columns to fold into the detail row;
   a scrolling container hides the overflow from it and it never folds. */

/* The shared table.css zeroes the horizontal padding of every cell that is not
   the first or the last, which is what made Price and Level touch. That file is
   synced across the three OpenValue sites, so instead of editing it this rule
   wins on specificity: two IDs beat one ID plus two pseudo-classes. */
#datatable-wrapper #trainingTable td:not(:first-child):not(:last-child),
#datatable-wrapper #trainingTable th:not(:first-child):not(:last-child) {
	padding-left: 0.8em;
	padding-right: 0.8em;
}

/* Dates read as text, not as figures; only the price column is right-aligned. */
#datatable-wrapper #trainingTable td.col-date,
#datatable-wrapper #trainingTable th:nth-child(4) {
	text-align: left;
}

/* A training can have seven trainers. Two lines is enough in a scanning table;
   the full list is on the training page and in the detail row. */
#trainingTable td.col-instructor span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 22em;
}

@media screen and (max-width: 736px) {
	.notion-form-frame {
		min-height: 640px;
	}

	#trainingTable th,
	#trainingTable td {
		padding: 0.5em;
	}
}