@charset "UTF-8";

/* Specific style sheet for the IMI Learning Portal page, ed. 2025
 * by Sascha Leib for GROW.E.4
 * File name: local/learning.css
 */
 
/* full-size text in the intro: */
#sec_intro p {
	max-width: initial;
}

/* no entries found in italics: */
p.no-entries {
	font-style: italic;
}

/* override the banner style of the main IMI site: */
#headline-breadcrumb-layout {
	background: #CA79B2 url('./img/banner-bg.svg') right center no-repeat;
	background-size: 450px;
	min-height: initial;
}
#headline-breadcrumbs {
	display: grid;
	min-height: 120px;
	align-items: end;
}
#headline-breadcrumbs::before {
	display: block;
	content: 'Connecting authorities across borders and languages';
	font-size: 1.25rem;
	color: #FFF;
	padding: 0 0 0 5.6pt;
	text-wrap: balance;
	margin-top: 30px;
	margin-right: 0;
	font-style: italic;
	text-shadow: #CA79B2 -1px 0 0, #CA79B2 0 1px 0, #CA79B2 1px 0 0, #CA79B2 0 -1px 0;
}

/* re-activate the breadcrumbs navigation: */
#breadcrumbs-nav {
	display: block !important;
	font-size: smaller;
	margin-left: .5rem;
	/*border-bottom: #CA79B2 solid 1px;*/
}

#breadcrumbs-nav ol {
	background-color: #FFF;
}
#breadcrumbs-nav ol li {
	margin-bottom: 0;
}

/* BUTTONS LIST */
#button-list {
	display: flex;
	flex-flow: row wrap;
	list-style: none inside;
	gap: 1rem .5rem;
}
#button-list li {
	display: block;
	text-align: center;
}
#button-list li button {
	appearance: none;
	width: 12rem;
	display: grid;
	grid-template-rows: calc(8rem + 4pt) 2.5rem;
	row-gap: .75rem;
	align-items: flex-start;
	border: 0 none;
	border-radius: .5rem;
	background-color: transparent;
	padding: .5rem;
	cursor: pointer;
	font-size: 1rem;
	margin: 0 auto;
}
#button-list li button span.icon {
	width: 8rem; height: 8rem;
	border: #4755a0 solid 2pt;
	border-radius: 50%;
	margin: 0 auto;
	
	/* loading animation: */
	background: transparent none no-repeat center;
	background-size: 7rem;
}
#button-list li button span.title {
	color: #4755a0;
	hyphens: manual;
}
#button-list li button:hover span.icon,
#button-list li button:focus span.icon {
	filter: drop-shadow(2px 2px 2px #00000066);
}
#button-list li button:hover span.title,
#button-list li button:focus span.title {
	color: #26324B;
	text-decoration: underline;
}

/* The category icons are defined here: */
#button-list li button[data-id="null"] span.icon { background-image: url('img/default.svg'); }
#button-list li button[data-id="ejn"] span.icon { background-image: url('img/ejn.svg'); }
#button-list li button[data-id="firearms"] span.icon { background-image: url('img/firearms.svg'); }
#button-list li button[data-id="rtpd"] span.icon { background-image: url('img/rtpd.svg'); }
#button-list li button[data-id="regprof"] span.icon { background-image: url('img/regprof.svg'); }

#button-list li button[data-id="sdg"] span.icon { background-image: url('img/sdg.svg'); }
#button-list li button[data-id="pq"] span.icon { background-image: url('img/pq.svg'); }
#button-list li button[data-id="authuser"] span.icon { background-image: url('img/authorities.svg'); }
#button-list li button[data-id="solvit"] span.icon { background-image: url('img/solvit.svg'); }

/* category popover styling */
#sec_menu > div[popover] {
	position: fixed;
	top: 50%; left: 50%;
	translate: -50% -50%;
	width: 100%;
	max-width: 1140px;
	height: fit-content;
	max-height: 100vh;
	border: #4755a0 solid 2pt;
	border-radius: .5rem;
	padding: .5rem;
	z-index: 101;
	box-shadow: 1pt 1pt 2pt 1pt #0006;
	box-sizing: border-box;
}
#sec_menu > div[popover] h4 {
	display: grid;
	grid-template-columns: auto 1.5rem;
	column-gap: .5rem;
	margin: .25rem 0 1rem 0;
	color: #4755a0;
	font-weight: bold;
	font-size: 1.25rem;
	line-height: 1.5rem;
}
#sec_menu > div[popover] button.close-popover {
	appearance: none;
	background-color: transparent;
	width: 1.5rem; height: 1.5rem;
	border: transparent none 0;
	border-radius: 50%;
	cursor: pointer;
}
#sec_menu > div[popover] button.close-popover::before {
	content: '\2716';
	color: #26324B;
}

#sec_menu > div[popover] dl {
	display: grid;
	grid-template-columns: 142px auto;
	gap: .125rem .5rem;
	margin-bottom: 1rem;
}
#sec_menu > div[popover] dl dt {
	grid-column: 1;
	grid-row: 1 / 4;
}
#sec_menu > div[popover] dl dt a {
	display: block;
}
#sec_menu > div[popover] dl dd {
	font-size: 1rem;
	max-width: initial;
	grid-column: 2;
}
#sec_menu > div[popover] dl dd.title {
	font-size: 1.1rem;
	font-weight: bold;
}
#sec_menu > div[popover] dl dd a {
	text-decoration: none;
}
#sec_menu > div[popover] dl dd a:hover {
	text-decoration: underline;
}

#sec_menu a.title-link::after,
#sec_menu a.video-link::after {
	content: none !important;
}

/* jMini Overlay */
#overlay {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: transparent;
  z-index: 99;
}

/* Popover backdrop */
#sec_menu > div[popover]::backdrop {	
}

/* change popup design on smaller screens: */
@media (max-width: 1170px) {

	#sec_menu > div[popover] {
		max-width: calc(100vw - 6px);
		left: 0;
		translate: 0 -50%;
	}
}
@media (max-width: 580px) {

	#sec_menu > div[popover] {
	}
	#sec_menu > div[popover] dl {
		grid-template-columns: auto;
	}
	#sec_menu > div[popover] dl dt {
		grid-row: 1;
	}
	#sec_menu > div[popover] dl dd {
		grid-column: 1;
	}
}

/* The Popup Video Player: */
#video-player {
	width: 100%;
	max-width: 660px;
	position: relative;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	background-color: #404040;
	color: #FFF;
	border: #666 solid 2pt;
	border-radius: .5em;	
	box-shadow: 1pt 1pt .5rem 0 #000;
	z-index: 201;
}
#video-player button {
	float: right;
	background-color: transparent;
	border: none;
	border-radius: 50%;
	padding: 0 1pt 2pt 1pt;
	margin: 3pt;
	cursor: pointer;
}
#video-player button::before {
	content: '\2a09';
	display: block;
	width: 1rem; height: 1rem;
	font-size: 1rem;
	line-height: 1rem;
	color: #FFF;
}

#video-player video {
	clear: both;
	margin: 0 10px 5px 10px;
}

/* modify player on smaller screens: */
@media (max-width: 666px) {
	#video-player video {
		width: calc(100vw - 20px);
		height: fit-content;
	}
}