/* Styles for the shared event header - templates/element/event_header.php.
   The CakePHP pages load Bootstrap 4 and the raw-PHP result/ pages load
   Bootstrap 3 + AdminLTE, so nothing here may lean on a Bootstrap class or the
   two stacks would drift apart again: the bar builds its own centred row.
   'Montserrat' is named but loaded by neither page - the sans-serif fallback is
   what actually renders, and it has to stay that way on both sides.

   The numbers below are the ones the Bootstrap 4 header this replaces computed
   at 1366px, and they have to be kept together to survive: a 1170px row that
   holds the 450px logo and a 68% text column on ONE line, which only adds up
   because both are flex items that shrink (the logo lands at ~419px). Let the
   row wrap instead and the logo drops onto a line of its own and the bar grows
   from 112px to 126px. */
.event-topbar { background: #000; font-family: 'Montserrat', sans-serif; }
.event-topbar-inner {
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
}
.event-topbar-logo { display: block; padding: 10px 0; margin: 0; }
.event-topbar-logo img { display: block; max-width: 100%; }
/* font-size and line-height are pinned because the venue below is an inline
   span: its line box is sized by this block's strut, not by the span, and the
   two stacks hand down a different one (17px/1.5 against AdminLTE's 14px/1.43).
   Left to inherit, the whole text block sits 3px higher on the result pages. */
.event-topbar-details { width: 68%; text-align: center; font-size: 17px; line-height: 1.5; }
/* font-family has to be restated on the headings: AdminLTE pins every h1-h6 to
   Source Sans Pro, and a rule that matches the element beats the family the
   headings would otherwise inherit from .event-topbar. */
.event-topbar-details h2 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.2; color: #fff; }
.event-topbar-details h4 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 500; line-height: 1.2; color: #ffe400; }
/* line-height is spelled out because the two stacks inherit a different one
   from their body (1.5 against Bootstrap 3's 1.43), which resizes the pill. */
.event-topbar-venue {
	padding: 3px 10px;
	border-radius: 10px;
	background: #fff;
	color: #000;
	font-size: 11px;
	line-height: 1.5;
	font-weight: bold;
}
/* Under 992px the original stopped forcing a single row, so let the two halves
   wrap and centre rather than squeezing the title into a sliver. */
@media (max-width: 991px) {
	.event-topbar-inner { flex-wrap: wrap; justify-content: center; }
	.event-topbar-details { width: 100%; padding-bottom: 10px; }
}