/* =========================================================================
   IRANCEMENT legacy layer — advertising rails, folder tree, bottom loop.
   Ported from the old (pre-WordPress) site look & behaviour.
   ========================================================================= */

:root {
	--ir-top: 40px;       /* top offset of the side columns (rails + tree)  */
	--ir-gap: 6px;        /* distance from the viewport edge */
	--ir-rail-w: 136px;   /* ad rail width (old: 130px image + padding)   */
	--ir-tree-w: 162px;   /* folder tree width (old: 150px + padding)     */
}

/* ------------------------------------------------------------------ rails */
.ir-rail {
	position: fixed;
	top: var(--ir-top);
	z-index: 9000;
	box-sizing: border-box;
	width: var(--ir-rail-w);
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 3px;
	background: #a1a2a2;
}

.ir-rail--left { left: var(--ir-gap); }
.ir-rail--right { right: var(--ir-gap); }

.ir-rail__ad {
	display: block;
	background: #ffffff;
	padding: 2px;
	line-height: 0;
}

.ir-rail__ad img {
	display: block;
	width: 100%;
	height: auto;
}

body.admin-bar .ir-rail { top: calc(var(--ir-top) + 32px); }

/* ------------------------------------------------------------- folder tree */
.ir-tree {
	position: fixed;
	top: var(--ir-top);
	left: calc(var(--ir-gap) + var(--ir-rail-w) + 6px);
	z-index: 9001;
	box-sizing: border-box;
	width: var(--ir-tree-w);
	max-height: calc(100vh - var(--ir-top) - 140px); /* keep clear of the bottom-left loop */
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: #8a8b8c;
	padding: 3px 2px 0;
	display: none;
	/* Old site drew the icons on the left and text after them (LTR rows). */
	direction: ltr;
	text-align: left;
	font: 11px/1.5 Tahoma, Arial, sans-serif;
	scrollbar-width: thin;
}

body.admin-bar .ir-tree {
	top: calc(var(--ir-top) + 32px);
	max-height: calc(100vh - var(--ir-top) - 172px);
}

.ir-tree ul { list-style: none; margin: 0; padding: 0; }
.ir-tree__ul--sub { margin-left: 14px; }

.ir-tree__toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	background: none;
	border: 0;
	margin: 0;
	padding: 2px 3px;
	cursor: pointer;
	font: bold 11px/1.5 Tahoma, Arial, sans-serif;
	color: #FDD342;
	text-align: left;
}
.ir-tree__toggle:hover { color: #ffe27a; }

.ir-tree__toggle--sub {
	font-weight: normal;
	color: #ffffff;
}
.ir-tree__toggle--sub:hover { color: #ffff00; }

.ir-tree__folder { width: 34px; height: 18px; flex: none; }
.ir-tree__arrow  { width: 19px; height: 17px; flex: none; }

.ir-tree__toggle--sub .ir-tree__arrow { transition: transform 0.15s ease; }
.ir-tree__group.is-open > .ir-tree__toggle--sub .ir-tree__arrow { transform: rotate(90deg); }

.ir-tree__item > a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 1px 3px;
	color: #ffffff;
	text-decoration: none;
	font: 11px/1.7 Tahoma, Arial, sans-serif;
}
.ir-tree__item > a:hover { color: #ffff00; }

/* Folder row whose label opens a page: [icon toggle][label link]. */
.ir-tree__row { display: flex; align-items: center; gap: 4px; }
.ir-tree__row .ir-tree__toggle { width: auto; flex: none; padding: 2px 0 2px 3px; } /* 3px left = matches leaf rows' arrow indent */
.ir-tree__label-link {
	display: inline-block;
	padding: 2px 0;
	color: #ffffff;
	text-decoration: none;
	font: 11px/1.5 Tahoma, Arial, sans-serif;
}
.ir-tree__label-link:hover { color: #ffff00; }
.ir-tree__row--top .ir-tree__label-link { font-weight: bold; color: #FDD342; }
.ir-tree__row--top .ir-tree__label-link:hover { color: #ffe27a; }

.ir-tree__group:not(.is-open) > .ir-tree__ul { display: none; }

.ir-tree__footer {
	margin: 6px -2px 0;
	background: #666666;
	text-align: center;
}
.ir-tree__footer a {
	display: block;
	padding: 4px 0;
	color: #FDD342;
	font: bold 11px/1.5 Tahoma, Arial, sans-serif;
	text-decoration: none;
}
.ir-tree__footer a:hover { color: #ffffff; }

/* -------------------------------------------------------------- ad loop */
.ir-loop {
	position: fixed;
	left: 22px;
	bottom: 12px;
	z-index: 9400;
	background: #F7F7F7;
	border: 1px solid #cccccc;
	display: none;
	line-height: 0;
}

.ir-loop__loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ir-loop__loading-bg {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: #000000; opacity: 0.7; filter: alpha(opacity=70);
}
.ir-loop__loading-gif {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: url(../img/ui/loading.gif) no-repeat center center;
}

/* Jssor bullet navigator skin (same sprite as the old site). */
.jssorb03 { position: absolute; }
.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
	position: absolute;
	width: 21px; height: 21px;
	text-align: center;
	line-height: 21px;
	color: #ffffff;
	font-size: 12px;
	background: url(../img/ui/b03.png) no-repeat;
	overflow: hidden;
	cursor: pointer;
}
.jssorb03 div { background-position: -5px -4px; }
.jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
.jssorb03 .av { background-position: -65px -4px; }
.jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }

/* Jssor arrow navigator skin (same sprite as the old site). */
.jssora03l, .jssora03r {
	display: block;
	position: absolute;
	width: 55px; height: 55px;
	cursor: pointer;
	background: url(../img/ui/a07.png) no-repeat;
	overflow: hidden;
}
.jssora03l { background-position: -3px -33px; }
.jssora03r { background-position: -63px -33px; }
.jssora03l:hover { background-position: -123px -33px; }
.jssora03r:hover { background-position: -183px -33px; }
.jssora03l.jssora03ldn { background-position: -243px -33px; }
.jssora03r.jssora03rdn { background-position: -303px -33px; }

/* -------------------------------------------------------------------------
   Elementor visibility fix.
   The atomic base stylesheet prints after frontend.min.css, so its rules
   (e.g. .e-flexbox-base{display:flex}) override the .elementor-hidden-*
   utilities and elements marked "hidden on all devices" show up anyway —
   this is why the abandoned header sidebars / footer carousel were visible.
   Re-assert the utilities with their proper media queries.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	body.ir-legacy .elementor .elementor-hidden-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	body.ir-legacy .elementor .elementor-hidden-tablet { display: none !important; }
}
@media (max-width: 767px) {
	body.ir-legacy .elementor .elementor-hidden-mobile { display: none !important; }
}

/* Optional: hide the footer “looping gallery” HTML widget from the earlier
   rebuild attempt (element f640046) — it duplicates the floating bottom-left
   loop provided by this theme. Controlled by inc/features-config.php →
   'hide_footer_gallery' (set false to show that Elementor widget again). */
body.ir-legacy.ir-hide-footer-gallery .elementor-element-f640046 { display: none !important; }

/* ------------------------------------------------------- reveal by width
   The rails and the tree reserve their own gutters: body padding keeps ALL
   page elements clear of them, so nothing ever sits underneath.           */
@media (min-width: 1440px) {
	body.ir-legacy .ir-rail { display: flex; }
	body.ir-legacy .ir-tree { display: block; }
	body.ir-legacy { padding-left: 318px; padding-right: 150px; } /* rail + tree gutters */
}

@media (min-width: 768px) {
	body.ir-legacy .ir-loop { display: block; }
}