/* ================================================================
   viksra.com — global styles
   ================================================================ */

/* ---------- Reset & base ---------- */
* { margin: 0; padding: 0; }
a { color: #8FC2FF; text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: none; }
body { overflow: hidden; background: #000; }

/* Visible keyboard-focus indicator (the old blanket outline removal was dropped).
   :focus-visible shows only for keyboard / assistive-tech navigation, not mouse clicks. */
:focus-visible { outline: 2px solid #29B6F6; outline-offset: 2px; border-radius: 2px; }

/* ---------- Content overlay bar (pinned to bottom of viewport) ---------- */
#content {
	margin: 0 auto;
	height: 270px;
	width: 100%;
	bottom: 0;
	background: rgba(38, 38, 38, 0.7) no-repeat 90%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #4F4F4F;
	position: absolute;
	z-index: 1002;
}
#contentframe {
	border-top: solid 1px #4F4F4F;
	border-bottom: 1px solid #000;
	height: 100%;
	text-align: left;
}
#contentPanels {
	width: 1300px;
	height: 92%;
	margin: 10px auto 0 auto;
	display: flex;
	align-items: flex-start;
}

/* ---------- Panels (shared) ---------- */
.contentPanel {
	height: 100%;
	width: 233px;
	margin-right: 5px;
	border-left: 1px solid #444;
	text-align: center;
	color: #fff;
	font-family: arial;
	flex-shrink: 0;
}
/* Dim non-video panels; video panel stays at 1.0 so #videoPlayerBox can
   control its own opacity on hover / while playing. */
.panel-bio, .panel-tagcloud, .panel-news, .panel-directory { opacity: 0.7; }
.contentPanel h4 {
	color: #fff;
	font-weight: bold;
	text-align: left;
	margin-left: 10px;
	font-family: arial;
	font-size: 14px;
}
.contentPanel p {
	color: #BFC5D7;
	text-align: left;
	padding: 12px 3px 0 8px;
	font-size: 13px;
}
.contentPanel > p > img {
	text-align: left;
	float: left;
	padding: 0 10px 5px 0;
}

/* "read more >>" on its own line, right-aligned */
.contentPanel > p > span { display: block; clear: left; text-align: right; margin-top: 2px; }
.contentPanel > p > span > a { color: #90AFDB; font-size: 11px; }

/* ---------- Panel: tag cloud ---------- */
.panel-tagcloud { width: 200px; }
#tag {
	color: #BFC5D7;
	text-align: left;
	padding: 18px 0 0 11px;
	font-size: 13px;
	font-family: times;
	line-height: 2em;
}
#tag h1 { font-size: 23px; }
#tag h2 { font-size: 18px; }
#tag h3 { font-size: 11px; }
#myCanvasContainer { left: 285px; top: -30px; margin-top: -35px; }
#myCanvas { display: block; margin: 0 auto; }
#tags { display: none; }

/* ---------- Panel: news ---------- */
.panel-news { width: 210px; }
#news-container { color: #BFC5D7; text-align: left; margin: 12px 0 0 0; padding: 0 3px 0 10px; font-size: 11px; }
#news-container ul { list-style: none; }
#news-container li { min-height: 60px; display: block; }
#news-container p { font-size: 11px; text-align: left; margin-left: 0; width: 200px; color: #6F8199; }
#news-container a { font-size: 11px; text-align: left; color: #90AFDB; margin-left: 0; }
#news-container span { font-size: 11px; text-align: left; color: #6F8199; }
#news-container div { border: 0; height: 30px; }
#news-container .links { margin-top: 1px; }

/* ---------- Panel: directory (AMIR GLOBAL DIRECTORY) ---------- */
.panel-directory { position: relative; z-index: 7000; }
.panel-directory p { padding-left: 10px; width: auto; float: none; }
.panel-directory .links { padding: 0; text-align: left; margin-top: 1px; }
.panel-directory .links a {
	float: none;
	padding-left: 10px;
	margin-left: 0;
	display: inline-block;
	color: #90AFDB;
	font-size: 11px;
}

/* ---------- Panel: video player ---------- */
.panel-video {
	overflow: visible;
	width: 380px;
	margin-top: -273px;
	margin-right: 5px;
	border-left: 1px solid #444;
	text-align: center;
	color: #fff;
	font-family: arial;
	z-index: 6000;
	position: relative;
}
/* Inner video box: dim by default, fully opaque on hover / while playing */
#videoPlayerBox { opacity: 0.7; transition: opacity 0.15s ease; }
#videoPlayerBox:hover,
#videoPlayerBox.playing { opacity: 1; }

/* Video player internals */
#videoPlayerBox { width: 383px; height: 520px; background: #0d0d0d; display: flex; flex-direction: column; box-sizing: border-box; font-family: arial, sans-serif; color: #e0e0e0; position: relative; overflow: hidden; }
#videoStage { position: relative; width: 100%; height: 225px; background: #0d0d0d; overflow: hidden; }
#htmlVideoPlayer { width: 100%; height: 100%; background: #0d0d0d; display: block; object-fit: contain; }
#videoTopIndicators { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; pointer-events: none; }
#videoTopIndicators .play-hint { width: 28px; height: 28px; background: rgba(42,42,42,0.78); display: flex; align-items: center; justify-content: center; border-radius: 3px; transition: background 0.15s; }
#videoTopIndicators .play-hint:hover { background: rgba(60,60,60,0.92); }
#videoTopIndicators .play-hint svg { fill: #29B6F6; width: 14px; height: 14px; }
.buffer-spin { width: 40px; height: 40px; opacity: 0.9; display: none; position: absolute; }
.buffer-spin.on { display: block; animation: bufSpin 1s linear infinite; }
@keyframes bufSpin { to { transform: rotate(360deg); } }
#videoWatermark { position: absolute; bottom: 8px; right: 10px; opacity: 0.6; pointer-events: none; width: 26px; image-rendering: -webkit-optimize-contrast; }
#videoControls { height: 30px; background: #0d0d0d; display: flex; align-items: center; padding: 0 8px; gap: 4px; border-top: 1px solid #000; }
.vc-btn { background: none; border: 0; padding: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vc-btn:hover svg { fill: #fff; }
.vc-btn svg { fill: #29B6F6; width: 16px; height: 16px; transition: fill 0.12s; }
#vcProgress { flex: 1; height: 6px; background: #2a2a2a; margin: 0 6px; position: relative; cursor: pointer; }
#vcProgressFill { height: 100%; background: #29B6F6; width: 0%; }
#vcVolume { display: flex; gap: 1px; align-items: flex-end; height: 14px; margin-left: 4px; cursor: pointer; }
.vol-bar { width: 2px; background: #29B6F6; }
.vol-bar.off { background: #1f3c4a; }
#videoTitle { color: #fff; font: 11px arial; padding: 7px 10px; background: #1a1a1a; border-top: 1px solid #000; border-bottom: 1px solid #000; min-height: 14px; box-sizing: content-box; text-align: center; }
#videoPlaylistList { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; background: #262626; text-align: left; }
#videoPlaylistList li { display: flex; align-items: center; gap: 8px; color: #6F8199; font: 11px arial; padding: 5px 8px; cursor: pointer; border-bottom: 1px solid #1a1a1a; transition: background 0.12s, color 0.12s; min-height: 32px; box-sizing: border-box; }
#videoPlaylistList li:hover { background: #333; }
#videoPlaylistList li.active { background: #333; color: #29B6F6; }
#videoPlaylistList li img.thumb { width: 48px; height: auto; flex-shrink: 0; background: #000; display: block; }
#videoPlaylistList li .ptitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-left: 8px; }
#videoPlaylistList::-webkit-scrollbar { width: 6px; }
#videoPlaylistList::-webkit-scrollbar-track { background: #1a1a1a; }
#videoPlaylistList::-webkit-scrollbar-thumb { background: #444; }

/* ---------- Header (top logo) ---------- */
#header {
	height: 60px;
	top: 0;
	position: absolute;
	width: 100%;
	background: #333;
	opacity: 0.6;
	z-index: 1000;
}
#header img { display: block; margin: 0 auto; }

/* ---------- Slideshow ---------- */
#supersize { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
#supersize a { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1s ease-in-out; }
#supersize a.active { opacity: 1; }
#supersize img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Social bookmarks (directory panel) ---------- */
ul.social-bookmarks {
	display: block;
	overflow: hidden;
	margin: 18px 0 0 0;
	padding: 0;
	text-align: center;
	position: relative;
	left: 20px;
}
ul.social-bookmarks li { display: inline-block; list-style-type: none; margin: 10px 4px 8px 0; }
ul.social-bookmarks li.first { margin-left: 0; }
ul.social-bookmarks li.last { margin-right: 0; }
ul.social-bookmarks li a {
	display: inline-block;
	overflow: hidden;
	width: 45px;
	height: 45px;
	padding: 0;
	text-align: center;
	text-indent: -9999px;
	border: 2px solid #5b5b5b;
	border-radius: 100%;
}
ul.social-bookmarks li a:hover { border-color: #6b7aff; }
ul.social-bookmarks li.facebook a { background: url('assets/viksra_facebook.png') no-repeat center center; }
ul.social-bookmarks li.twitter a  { background: url('assets/viksra_twitter.png')  no-repeat center center; }
ul.social-bookmarks li.youtube a  { background: url('assets/viksra_youtube.png')  no-repeat center center; }
ul.social-bookmarks li.linkedin a { background: url('assets/viksra_linkedin.png') no-repeat center center; }


/* =================================================================
   Mobile (≤1300px) — panels stack vertically
   ================================================================= */
@media (max-width: 1299px) {

	body { overflow: auto; height: auto; background: #000; display: flex; flex-direction: column; }
	#header { order: -1; }

	/* Slideshow: full-width with the slides' native 16:9 aspect; cycle with fade,
	   matching desktop behavior. */
	#supersize { position: relative; width: 100%; aspect-ratio: 16/9; height: auto; inset: auto; overflow: hidden; }
	#supersize a { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; display: block; }
	#supersize a.active { opacity: 1; }
	#supersize img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

	/* Header (top logo) inline */
	#header {
		position: relative;
		height: auto;
		padding: 12px 0;
		opacity: 1;
		z-index: 10;
	}
	#header img { max-width: 80%; height: auto; }

	/* Content overlay bar flows inline */
	#content {
		position: static;
		width: 100%;
		height: auto;
		bottom: auto;
		padding: 10px 0 20px 0;
		border-bottom: 0;
	}
	#contentframe { height: auto; border: 0; }
	#contentPanels {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 10px;
		box-sizing: border-box;
	}

	/* Panels stack vertically */
	.contentPanel {
		width: auto;
		max-width: 420px;
		height: auto;
		margin: 0 auto;
		padding: 10px 0;
		border-left: 0;
		border-top: 1px solid #444;
		box-sizing: border-box;
		text-align: left;
	}
	.contentPanel:first-child { border-top: 0; }

	/* Tag cloud, news & directory panels go full-width, h4s stay aligned with other panels */
	.panel-tagcloud,
	.panel-news,
	.panel-directory {
		max-width: 100%;
		width: 100%;
	}
	.panel-tagcloud > h4,
	.panel-news > h4,
	.panel-directory > h4 {
		max-width: 420px;
		margin: 0 auto;
		padding-left: 10px;
		box-sizing: border-box;
	}

	/* Bio panel */
	.panel-bio p {
		text-align: left;
		padding: 8px 10px;
		font-size: 13px;
		line-height: 1.4;
		color: #BFC5D7;
		overflow: hidden;
	}
	.panel-bio > p > img {
		float: left;
		display: inline;
		margin: 0;
		padding: 0 10px 5px 0;
		max-width: 100px;
		height: auto;
	}
	.panel-bio > p > span {
		display: block;
		clear: left;
		margin: 0;
		padding: 0;
		float: none;
	}
	.panel-bio > p > span > a { padding-left: 0; margin-left: 0; float: none; }

	/* Tag cloud */
	#myCanvasContainer { position: relative; left: 0; top: 0; margin: 0 auto; text-align: center; }
	#myCanvas { max-width: 100%; height: auto; display: block; margin: 0 auto; }
	#tag { padding: 8px; text-align: center; }

	/* News: align items with h4 */
	.panel-news #news-container {
		max-width: 420px;
		margin: 12px auto 0 auto;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}
	#news-container ul { margin: 0; padding: 0; list-style: none; }
	#news-container li, #news-container p { width: auto; max-width: 100%; margin-left: 0; padding-left: 0; }
	/* Clear desktop floats so date anchors don't wrap oddly on narrow viewports */
	#news-container p, #news-container a, #news-container span { float: none; }
	#news-container a { margin-left: 0; display: inline-block; }
	#news-container div { height: auto; }

	/* Directory: content aligns with h4 */
	.panel-directory > #broadcasts {
		max-width: 420px;
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}
	.panel-directory p { padding: 12px 0 0 0; margin: 0; line-height: normal; }
	.panel-directory .links { padding: 0; margin: 0; }
	.panel-directory .links a { padding-left: 0; margin-left: 0; }
	#broadcasts { padding: 0 8px; }
	#broadcasts p { float: none; width: auto; }

	/* Center social bookmarks on mobile */
	ul.social-bookmarks { left: 0; }
	.contentPanel ul.social-bookmarks li a { display: inline-block; }

	/* Video player: fluid */
	#videoPlayerBox {
		width: 100%;
		max-width: 383px;
		height: auto;
		margin: 0 auto;
	}
	#videoStage { height: auto; aspect-ratio: 383 / 225; }
	#videoPlaylistList { max-height: 220px; }
}


/* =================================================================
   Reduced motion — honor the OS "reduce motion" / "remove animations"
   setting. The preference asks for less *movement*, not for a static page,
   so content keeps cycling: site.js still advances the slideshow and the
   news ticker (cross-fading rather than sliding) and slows the tag cloud
   instead of freezing it.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
	/* Blanket rule: stop looping animations (the buffer spinner) and collapse
	   transitions, including the ticker's vertical slide. */
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Exceptions: the two opacity cross-fades. A fade is the recommended
	   substitute for movement — nothing travels across the screen — and
	   site.js relies on these to show that the slideshow and the news list
	   have advanced. Keep these durations in step with site.js
	   (SLIDE crossfade, and FADE_DURATION / 2 for the ticker). */
	#supersize a { transition-duration: 1s !important; }
	#news-container ul { transition-duration: 0.25s !important; }
}