/* v2 overrides — loaded after gerdes.css by indexV2.php only.
   Everything mootools used to animate inline is done here in CSS. */

/* ------------------------------------------------------------- accordion */
#accordion {
	opacity: 0;
	transition: opacity 1.2s ease;
}
#accordion.ready { opacity: 1; }

#accordion .element {
	max-height: 0;
	overflow: hidden;
	padding: 0 4px;
	transition: max-height .5s ease, padding .5s ease;
}
#accordion .element.open {
	padding: 4px;
	overflow: visible;      /* so the tab panels are not clipped once open */
}
.toggler { position: relative; }
.toggler:after {
	content: '+';
	position: absolute;
	right: 8px;
	top: 1px;
	color: #746555;
	font-family: monospace;
}
.toggler[aria-expanded="true"]:after { content: '\2013'; }
.toggler:focus { outline: 1px dotted #746555; }

/* ------------------------------------------------------------------ tabs */
.mootabs_panel { display: none; height: auto !important; overflow: visible; }
.mootabs_panel.active { display: block; }
.mootabs_title { height: auto; overflow: hidden; }
.mootabs_title li { position: relative; }
.mootabs_title li:focus { outline: 1px dotted #444; }

/* --------------------------------------------------- publication search */
.pubSearch { margin: 4px 3px 8px 3px; }
.pubSearch input {
	width: 60%;
	max-width: 380px;
	height: 20px;
	padding: 1px 6px;
	font-size: 12px;
	font-family: sans-serif;
	border: 1px solid #746555;
	background: #fff;
	color: #444;
}
.pubSearch input:focus { outline: none; border-color: #10489C; }
.pubCount { font-size: 11px; color: #746555; margin-left: 8px; }
.pubSearch { display: flex; align-items: center; gap: 4px; }
.pubClear {
	border: 1px solid #746555;
	background: #EFEBE0;
	color: #746555;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	padding: 3px 6px;
	margin-left: 4px;
}
.pubClear:hover { background: #DCD8C4; }

/* the Results tab only exists while the search box has content */
.resultsTab { background-color: #10489C !important; color: #fff; font-weight: bold; }
.resultsTab.active { background-color: #fff !important; color: #10489C; }
#Results .fromTab {
	float: right;
	margin: 0 0 0 8px;
	padding: 0 5px;
	background: #DCD8C4;
	color: #5C5142;
	font-size: 9.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
#Results p.ref { border-color: #10489C; }
p.noHit { font-size: 12px; color: #746555; padding: 10px 4px; font-style: italic; }

/* ------------------------------------------------------ year separators */
.yearSep {
	clear: both;
	margin: 12px 3px 3px 3px;
	padding: 1px 0 2px 0;
	border-bottom: 1px solid #DCD8C4;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .12em;
	color: #746555;
}
.mootabs_panel .yearSep:first-of-type { margin-top: 4px; }

/* ----------------------------------------------- software tiles (kwicks) */
/* was: mootools Fx.Elements animating pixel widths. Now flex does it. */
#kwicks_container { height: auto; background: #fff; }
#kwicks {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}
#kwicks .kwick {
	float: none;
	width: auto;
	height: 250px;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	padding: 4px 6px;
	transition: flex-grow .35s ease;
	box-sizing: border-box;
}
#kwicks:hover .kwick { flex-grow: .75; }
#kwicks .kwick:hover, #kwicks .kwick:focus-within { flex-grow: 2.6; }
#kwicks .info {
	visibility: hidden;
	opacity: 0;
	transition: opacity .35s ease;
	font-size: 11px;
}
#kwicks .kwick:hover .info, #kwicks .kwick:focus-within .info {
	visibility: visible;
	opacity: 1;
}
#kwicks .kwick > span { display: block; font-size: 12px; }

/* --------------------------------------------------------------- extras */
.note {
	font-size: 11px;
	color: #746555;
	font-style: italic;
	margin: 6px 3px 0 3px;
}
#accordion .element .texte p:first-child { margin-top: 4px; }

@media (max-width: 700px) {
	#kwicks { display: block; }
	#kwicks .kwick { height: auto; margin-bottom: 6px; }
	#kwicks .info { visibility: visible; opacity: 1; }
	.pubSearch input { width: 100%; max-width: none; }
}

/* the "just out" block lives inside the Kim Gerdes section, which opens first */
#accordion .element .apparu { margin-top: 12px; }
#accordion .element .recents { font-family: sans-serif; }

/* Elizia's head: native size, painted over the whole frame, with her chin on
   the bottom edge of the collapsed "contact" bar. Rule 1: her section gets NO
   extra height for her — only padding-right so the text does not run under
   her. The vertical offset is not a constant (it depends on the panel padding,
   the trailing <br> and the bar's font metrics), so site.js measures it once
   the panel is open; the value here is only a fallback. */
/* keep the whole section's content clear of her, not just the chat box:
   the intro note lives in its own .texte div outside #analyzebox */
.eliziaSec .texte,
.eliziaSec #analyzebox {
	padding-right: 210px;
	box-sizing: border-box;
}
#analyzebox { position: relative; }
#tetebox {
	width: 200px;
	height: 180px;
	left: auto;
	right: 4px;
	top: auto;
	bottom: -30px;
	background-size: auto;
	z-index: 20;                       /* over the togglers and every panel */
}
/* the +/- markers made the togglers positioned; keep them in a lower layer */
.toggler { z-index: 1; }

@media (max-width: 700px) {
	.eliziaSec .texte, .eliziaSec #analyzebox { padding-right: 0; }
	#tetebox {
		position: relative;
		right: auto; bottom: auto; top: 0;
		margin: 8px auto 0 auto;
	}
}