/*
 * The lightbox that replaces lightbox2 from a CDN. Article HTML is sanitised here
 * and <style> and <script> are dropped, so these live with the theme.
 */

/* the photo galleries inside news articles: legacy-articles.css, scoped per article */

/* the lightbox */
.rc-lightbox {
	/* lightbox2's look, which rcpernik.com's galleries had: the photo in a
	   white frame over a dark page, its number and the close button under
	   it, the arrows showing on the photo's halves */
	position: fixed; inset: 0; z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.8);
}
.rc-lightbox[hidden] { display: none; }
.rc-lb-frame { position: relative; line-height: 0; }
.rc-lb-frame img {
	display: block;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 110px);
	border: 4px solid #fff;
	border-radius: 3px;
	background: #fff;
}
.rc-lb-nav { position: absolute; inset: 0; display: flex; }
.rc-lb-nav a { display: block; height: 100%; opacity: 0; transition: opacity .6s; cursor: pointer; }
.rc-lb-nav a:hover { opacity: 1; }
.rc-lb-prev { width: 34%; background: url(../images/lightbox/prev.png) left 48% no-repeat; }
.rc-lb-next { width: 66%; background: url(../images/lightbox/next.png) right 48% no-repeat; }
.rc-lb-data { display: flex; justify-content: space-between; padding: 5px 4px 0; color: #ccc; line-height: 1.1em; text-align: left; }
.rc-lb-caption { display: block; font-size: 13px; font-weight: bold; }
.rc-lb-number { display: block; font-size: 12px; color: #999; padding-bottom: 1em; }
.rc-lb-close {
	flex: 0 0 30px; width: 30px; height: 30px; border: 0; padding: 0;
	background: url(../images/lightbox/close.png) top right no-repeat;
	opacity: .7; transition: opacity .2s; cursor: pointer;
}
.rc-lb-close:hover { opacity: 1; }

/* Modular Download: the details under "Повече информация" (Phoca's tooltip,
   laid out as a box under the file instead) */
.md-more .pd-tooltip-box {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
}
.md-more .pd-colfull, .md-more .pd-fdesc { grid-column: 1 / -1; font-weight: 600; }
.md-more .pd-fdesc { font-weight: 400; }
.md-more .md-sha { font-family: monospace; font-size: 12px; word-break: break-all; }
/* Phoca floats a.btn; "Повече информация" is a <button> here (it opens the
   details instead of a tooltip), so it gets the same rule */
.pd-button-box-bt button.btn {
	float: right;
	margin: 5px;
}

/* the contact form's trap field: out of sight, out of the tab order */
.rc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The CMS gives an image the author left without a size its width and height
   (includes/responsive_images.php, with decoding="async"), only so the browser
   knows its shape; Joomla wrote none, and without this an image scaled to its
   column would keep its full height. A size the author wrote stays as Joomla
   showed it. */
#t3-mainbody img[height][decoding="async"] {
	max-width: 100%;
	height: auto;
}

/* JA Masthead's own stylesheet (modules/mod_jamasthead/asset/css/style.css),
   the parts this site uses: the title centred in a 980px column. */
.ja-masthead {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}
.ja-masthead .ja-masthead-detail {
	color: #fff;
	position: relative;
	text-align: center;
	z-index: 20;
	margin: 0 auto;
}

/* A category's intros (the news, six to a page, two to a row): cards of the
   same height, the picture cropped to one shape, "Прочети още" at the foot. */
.items-row.rc-intros {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
}
.items-row.rc-intros > [class*="col-"] {
	display: flex;
	margin-bottom: 30px;
}
.rc-intros .item {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.rc-intros article {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.rc-intros .image-wrap img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 16px;
}
.rc-intros .article-title {
	font-size: 22px;
	line-height: 1.3;
}
.rc-intros .readmore {
	margin-top: auto;
}

/* "Още статии": one title to a line (Bootstrap 5's .nav is a flex row) */
.items-more ol.nav {
	display: block;
}
.items-more ol.nav > li {
	display: list-item;
	float: none;
}

/* The header: the pencil from the old logo as the mark, and the name written
   out across the width in the site's Montserrat. The two big lines are sized
   to their box (cqw), so they end together at any width. */
.rc-brand {
	text-align: left;
}
.logo.rc-brand .rc-brand-link,
.logo.rc-brand .rc-brand-link:hover,
.logo.rc-brand .rc-brand-link:focus {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 30px);
	width: 100%;
	text-decoration: none;
}
.rc-brand-mark {
	flex: 0 0 auto;
	width: auto;
	height: clamp(64px, 9vw, 112px);
	transition: transform .4s ease;
}
.rc-brand-link:hover .rc-brand-mark {
	transform: rotate(-6deg) translateY(-2px);
}
.rc-brand-text {
	flex: 1 1 auto;
	min-width: 0;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	line-height: 1.08;
}
.rc-brand-line1 {
	font-size: 3.3cqw;     /* the line measures 29.8em: it fills the box */
	font-weight: 400;
	letter-spacing: .06em;
	color: #5f5d51;
	white-space: nowrap;
}
.rc-brand-line2 {
	font-size: 4.54cqw;    /* 21.7em */
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
	color: #00a6e0;
	background: linear-gradient(90deg, #00b8ef 0%, #37b6a4 40%, #8cc63f 75%, #f5a800 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: .06em;
}
.rc-brand-line3 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: .45em;
	font-size: clamp(11px, 1.9cqw, 16px);
	font-weight: 700;
	letter-spacing: .28em;
	color: #ff7f3a;
}
.rc-brand-line3 i {
	display: inline-block;
	width: clamp(14px, 3cqw, 30px);
	height: 4px;
	border-radius: 2px;
	background: #00c2f3;
}
.rc-brand-line3 i:nth-child(2) { background: #f5c400; }
.rc-brand-line3 i:nth-child(3) { background: #ff6a13; }
.rc-brand-line3 i:nth-child(4) { background: #8cc63f; margin-right: 8px; }

/* a phone: the mark over the name, so the name has the whole width */
@media (max-width: 575px) {
	.logo.rc-brand .rc-brand-link {
		flex-direction: column;
		gap: 10px;
	}
	.rc-brand-text { width: 100%; }
	.rc-brand-line3 { justify-content: center; }
}

/* "Документи" carried link-brown in Joomla, a class the template never
   coloured, so it came out dark like "Профил на купувача". Indigo: not black,
   not red, apart from the blue, the purple and the other items. The rules are
   the template's own for link-green, with the colour changed. */
.link-brown > a,
.link-brown > span {
  color: #5c6bc0 !important;
}
.link-brown > a:hover,
.link-brown > span:hover,
.link-brown > a:focus,
.link-brown > span:focus,
.link-brown > a:active,
.link-brown > span:active {
  color: #3f51b5 !important;
}
.link-brown > a .caret,
.link-brown > span .caret {
  border-top-color: #5c6bc0 !important;
  border-bottom-color: #5c6bc0 !important;
}
.link-brown.active > a,
.link-brown.active > span {
  color: #ffffff !important;
  background: #5c6bc0 !important;
}
.link-brown.active > a .caret,
.link-brown.active > span .caret {
  border-top-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
.link-brown .ja-masthead {
  background-color: #5c6bc0;
}