/**
 * Main theme styles - heefin-style dark video design.
 *
 * Custom rules adapted from the reference theme's style.css, layered on top of
 * Bulma 1.x (dark scheme). Bulma + Font Awesome are loaded via CDN in
 * functions.php; the Kanit font is loaded from Google Fonts.
 *
 * @package Blank_Theme
 */

/* =========================================================
   Dark scheme (Bulma 1.x) + base
   ========================================================= */
:root {
	--bulma-scheme-h: 0;
	--bulma-scheme-s: 0%;
	--bulma-scheme-main-l: 10%;
	--bulma-family-primary: "Kanit", system-ui, sans-serif;
	/* Accent (maroon) used for the category badge / primary tags. */
	--bulma-primary-h: 344deg;
	--bulma-primary-s: 57%;
	--bulma-primary-l: 40%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	background: #121212;
	font-family: "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
	overflow-x: hidden;
	max-width: 100%;
}

/* Menu items are output as bare <li> (items_wrap strips the <ul>), so remove
   default list markers that would otherwise show as dots over the text. */
.navbar-start,
.navbar-end {
	list-style: none;
}

.navbar-start li,
.navbar-end li {
	list-style: none;
	display: block;
}

footer {
	padding: 3rem 1.5rem 3.5rem !important;
}

/* WordPress adds class="tag" to <body> on tag archives, which collides with
   Bulma's .tag component. Reset every property Bulma applies to .tag. */
body.tag {
	align-items: initial;
	background-color: initial;
	border-radius: initial;
	color: var(--bulma-body-color);
	display: block;
	font-size: initial;
	height: initial;
	justify-content: initial;
	line-height: initial;
	padding: initial;
	white-space: initial;
}

/* =========================================================
   Loop video cards
   ========================================================= */
.loop-video .post-header {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.post-thumbnail {
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #000;
}

.post-thumbnail img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.post-category {
	text-transform: uppercase;
	padding: 1px 9px;
	font-size: 16px;
	line-height: 19px;
	color: #fff;
	background: #a02c47;
	top: 5px;
	right: 0;
	position: absolute;
}

.post-duration {
	border-radius: 5px;
	padding: 3px 6px;
	font-size: 14px;
	line-height: 1rem;
	color: #ccc;
	background: rgba(0, 0, 0, 0.7);
	bottom: 5px;
	right: 5px;
	position: absolute;
}

.post-views {
	border-radius: 5px;
	padding: 3px 6px;
	font-size: 14px;
	line-height: 1rem;
	color: #ccc;
	background: rgba(0, 0, 0, 0.7);
	bottom: 5px;
	left: 5px;
	position: absolute;
}

.post-views i {
	font-size: 12px;
	margin-right: 2px;
}

.thumb-block .post-header h3 {
	color: hsl(0, 0%, 71%);
	font-size: 0.95rem;
	transition: color 0.2s ease;
}

.thumb-block a:hover .post-header h3 {
	color: var(--bulma-link-text);
}

/* =========================================================
   Hot videos / player
   ========================================================= */
.hot-video-loop.is-skeleton {
	max-width: 255px;
	margin-right: 10px;
}

.swiper-container {
	width: 100%;
	overflow: hidden;
}

.responsive-player {
	position: relative;
	width: 100%;
	border-radius: 5px;
	overflow: hidden;
	background: #000;
}

/* iframe embeds (and the no-JS fallback) get a fixed 16:9 box. */
.responsive-player:not(:has(.video-js)) {
	aspect-ratio: 16 / 9;
}

/* Force iframe players to fill the 16:9 box, overriding inline width/height
   attributes that importer plugins add. */
.responsive-player:not(:has(.video-js)) .video-box,
.responsive-player > iframe,
.responsive-player .video-box > iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	display: block;
	border: 0;
}

/* Video.js (vjs-fluid) manages its own aspect ratio, so a vertical 9:16
   video displays correctly without zooming. Just let it flow full-width. */
.responsive-player .video-box {
	width: 100%;
	margin: 0 auto;
}

.responsive-player .video-js {
	width: 100% !important;
	height: auto;
}

.video-player .no-video {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 5px;
	overflow: hidden;
	color: #888;
}

.video-player .no-video img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.video-categories .tag.is-primary {
	background-color: #a02c47;
	color: #fff;
}

.video-tags .tag {
	margin: 0 0.3rem 0.4rem 0;
}

/* Boxed description panel under the player on single posts. */
.entry-content.entry-content {
	background: #101010;
	border: 1px solid hsl(0, 0%, 24%);
	border-left: 4px solid #a02c47;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-top: 1.25rem;
	color: hsl(0, 0%, 82%);
	line-height: 1.8;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.entry-content.entry-content p:last-child {
	margin-bottom: 0;
}

.entry-content a {
	color: var(--bulma-primary);
}

/* Tame the H2 size users add inside post content. */
.entry-content.entry-content h2 {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 1rem 0 0.5rem;
	color: hsl(0, 0%, 92%);
}

/* Topic label block: <div class="x-topic"><span class="sx">...</span></div> */
.x-topic {
	margin: 1.25rem 0 0.75rem;
}

.x-topic .sx {
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	padding: 0.4rem 0.9rem;
	border-left: 4px solid #a02c47;
	background: rgba(160, 44, 71, 0.18);
	border-radius: 0 6px 6px 0;
}

/* =========================================================
   Search
   ========================================================= */
.search-container {
	position: relative;
}

#results,
#mobile-search-results {
	padding: 0.5em;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	overflow: hidden;
}

.search-results {
	background-color: var(--bulma-scheme-main);
}

.result-item {
	font-size: 14px;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
}

.search-result-cate {
	color: var(--bulma-primary);
}

#mobile-search-toggle {
	text-decoration: none;
}

@media screen and (max-width: 999px) {
	#burger-button {
		order: -1;
		margin-inline-end: auto;
		margin-inline-start: 0.375rem;
	}

	#mobile-search-toggle {
		margin-inline-end: 0.375rem;
		margin-inline-start: auto;
	}

	.main-logo {
		margin-inline-end: auto;
		margin-inline-start: auto;
	}
}

#primaryNavbar .navbar-end #searchform input {
	width: 450px;
	max-width: 100%;
}

/* =========================================================
   Tags scroller
   ========================================================= */
.tags-container {
	position: relative;
	padding: 0 40px;
	border-radius: 6px;
	max-width: 100%;
}

.tags-wrapper {
	overflow: hidden;
	padding: 0.5rem 0;
	position: relative;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.tags-wrapper::-webkit-scrollbar {
	display: none;
}

.tags-scroll {
	display: flex;
	gap: 0.4rem;
	white-space: nowrap;
	transition: transform 0.3s ease;
	padding: 0 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.tags-scroll::-webkit-scrollbar {
	display: none;
}

.tags-scroll .button,
.tags-scroll .tag {
	background: #2c2c2c;
	color: #e0e0e0;
	border: 1px solid #3a3a3a;
	flex-shrink: 0;
	white-space: nowrap;
}

.tags-scroll .button:hover,
.tags-scroll .tag:hover {
	background: #363636;
	border-color: #4a4a4a;
	color: #fff;
}

.tag-nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	background: #2c2c2c;
	border: 1px solid #3a3a3a;
	color: #e0e0e0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: all 0.2s ease;
}

.tag-nav-button:hover {
	background: #363636;
	border-color: #4a4a4a;
	color: #fff;
}

.tag-nav-button.prev {
	left: 8px;
}

.tag-nav-button.next {
	right: 8px;
}

.tag-nav-button.hidden {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 768px) {
	.tags-container {
		padding: 0;
		background: transparent;
	}

	.tag-nav-button {
		display: none;
	}

	.tags-wrapper {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.tags-scroll a.button {
		scroll-snap-align: start;
	}

	.hot-video-loop.is-skeleton {
		max-width: 170px;
		margin-right: 10px;
	}
}

/* =========================================================
   Action / share buttons (CDN build helpers)
   ========================================================= */
.button.is-telegram {
	background-color: #229ed9;
	color: #fff;
	border: 0;
}

.button.is-line {
	background-color: #06c755;
	color: #fff;
	border: 0;
}

.button.is-twitter {
	background-color: #1da1f2;
	color: #fff;
	border: 0;
}

.button.is-facebook {
	background-color: #1877f2;
	color: #fff;
	border: 0;
}

.button.is-vk {
	background-color: #45668e;
	color: #fff;
	border: 0;
}

/* =========================================================
   Layout width + headings + footer
   ========================================================= */
.site-header.container,
.site-content.container {
	max-width: 1280px;
}

.site-branding.box,
.site-main.box {
	box-shadow: none;
}

.block-title {
	border-left: 4px solid #a02c47;
	padding-left: 0.6rem;
}

.category-subtitle {
	background: #a02c47;
	color: #fff;
	padding: 0.15rem 0.6rem;
	border-radius: 6px;
	font-size: 0.8rem;
}

/* Archive sort dropdown (category/tag pages). */
.filter-dropdown .dropdown-item.is-active,
.filter-dropdown .dropdown-item.is-active:hover {
	background-color: #a02c47;
	color: #fff;
}

/* Dim the archive grid while an AJAX sort/pagination request is in flight. */
#archive-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.pagination-link[data-page],
.pagination-previous[data-page],
.pagination-next[data-page] {
	cursor: pointer;
}

@media (max-width: 768px) {
	.mt-2-mobile {
		margin-top: 0.5rem;
	}
}

.footer-description {
	max-width: 1280px;
	margin: 0 auto;
}

.footer-description a {
	color: var(--bulma-primary);
}

#footer-menu a:hover {
	color: var(--bulma-primary);
}

/* =========================================================
   Accessibility: visually-hidden helper used by the skip link.
   ========================================================= */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}
