:root {
  --border-radius: 0.5rem;
  --border-radius-button: 0.4rem;
  --padding: 1rem;
  --font-size: 1rem;
  --margin:1rem;
}

/*Template standards */
@font-face {
    font-family: 'ZCOOLXiaoWei';
    src: url('/webfonts/ZCOOLXiaoWei-R.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'Oxygen', sans-serif !important;
	font-size:var(--font-size);
}

a { text-decoration:none; }

:focus {
	outline:none;
}

a:focus-visible, video:focus-visible, i:focus-visible {
	outline:2px solid #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7);  /* White box-shadow */
    border-radius: var(--border-radius);  /* Apply radius to box-shadow */
    transition: box-shadow 0.3s ease;  /* Smooth transition for the focus effect */
}	

.site-title, .info-title {
	font-family: 'ZCOOLXiaoWei', serif;
}

a.button, a.btn-info, span.btn-info {
	padding:0.8rem;
	border: 2px solid; 
	border-radius:var(--border-radius-button);
	text-transform:uppercase;
	text-decoration: none !important;
}

a.button:hover, a.btn-info:hover {
	border:2px solid; 
	font-weight:bold;
}

.btn-wrapper, .btn-wrapper-ext {
	display: flex;            /* allows alignment within wrapper */
	justify-content: flex-end; /* push button to the right */
	margin: 0 0 1rem 0;
	padding:0 var(--padding) 0 0;
}

.btn-wrapper-ext {
	padding:0;
}

.btn-anchor {
	margin-bottom:var(--margin);
}

span.btn-info {
	display: inline-block;    /* natural button width */
	border-radius: var(--border-radius-button);
	text-decoration: none;
	transition: background-color 0.2s, transform 0.15s;
}

span.btn-info:hover {
	transform: translateY(-1px);
}


/* CONTENT */
.info-wrapper {
	border-radius:var(--border-radius);
	margin:0;
	padding-bottom:var(--padding);
}

.info-title {
	padding:var(--padding) var(--padding) 0 var(--padding);
	font-size:1.2rem;
}

p.info-text {
	padding:0 var(--padding) 0 var(--padding);
}

.info-text-first, div.info-text {
	padding:var(--padding) var(--padding) var(--padding) var(--padding);
}

.info-text-last {
	padding-bottom:var(--padding);
}

span.info-text {
	padding-top: var(--padding);
}

.info-list, .bullet-info-list {
	padding:0 var(--padding) 0 var(--padding);
}

.bullet-info-list {
	margin-left:var(--margin);
}

.info-list li {
	list-style-type:none;
}

ul.info-list li.info-bullet {
	font-weight:bold;
}

.info-bullet i {
	cursor:pointer;
}

.info-list li.info-bullet-text {
	padding:0 0.5rem;
}

.bullet-info-list li { padding-right: 1rem; }

figcaption {
	margin-top: 0.5rem;
	text-align: left;         /* ensures text stays left-aligned */
}

.media-title {
	font-size:var(--font-size);
	font-weight:bold;
	color:chocolate;
	height:2.2rem;
}

.media-description {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px; /* Add some space below the description */
    transition: max-height 0.3s ease;
    max-height: 3rem; /* Adjust this to fit two lines */
}

.info-image, .peeks video {
	width:100%;
	border-radius:var(--border-radius) var(--border-radius) 0 0;
}

.video-figure {
    position: relative;
    margin: 0 0 var(--margin) 0; /* remove default figure spacing */
}

.promo-video {
    display: block;
    width: 100%;
	cursor:pointer;
	transition: width 0.3s ease; /* Smooth transition when resizing */
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 4rem;
    color: #eee;
    cursor: pointer;
}

.video-play-btn:hover {
	color:white;
}


.promo-video, .alert-wrapper, .peeks video {border-radius:var(--border-radius);}

.alert-wrapper { padding:var(--padding); }

.align-right { text-align:right;}

.rate-label { font-weight:bold;}

.rate-row {
	padding-left:0.3rem;
}

.last-rate-row { padding-bottom: var(--padding); }

.id-link {
	display:block;
	text-align:right;
	margin-top:0.5rem;
}

.info-text a { text-decoration:underline; }

.id-link a {
	text-transform:uppercase;
	/*text-decoration:underline;*/
}

/* Container */

.tool-tip {
  position: relative;
  font-weight: bold;
  cursor: pointer;
}

.tool-tip-label {
  border-bottom: 0.1rem dotted;
}

/* Desktop tooltip */
.tool-tip-text {
  position: absolute;
  z-index: 10;
  width: 220px;
  padding: 6px 10px;
  border-radius: 5px;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  font-weight: normal;
}

.tool-tip.is-open .tool-tip-text {
  visibility: visible;
  opacity: 1;
}


/*xxl screens*/
@media screen and (min-width: 1400px) {
	
}

/*xl screens*/
@media screen and (min-width: 1140px) {

}

/*large screens */
@media screen and (min-width: 960px) and (max-width:1200px) {
	.promo-video { width:80%; }
}

/*medium screens */
@media screen and (min-width: 768px) {

}

/*xs to small screens */
@media screen and (max-width:780px) {
	.info-wrapper { margin-top:1rem;}
	.info-footer {display:none;}
	
	/* Kill tooltip behaviour entirely */
	.tool-tip-text {
		position: static;
		width: auto;
		padding: 0;
		margin: 0;
		border-radius: 0;
		transform: none;
		visibility: visible;
		opacity: 1;
		display: none;        /* IMPORTANT */
	}

	/* Show definition inline */
	.tool-tip.is-open .tool-tip-text {
		display: inline;
	}

	/* Optional: slight visual separation */
	.tool-tip.is-open .tool-tip-text::before {
		content: " (";
	}
	
	.tool-tip.is-open .tool-tip-text::after {
		content: ") ";
	}
}

/*small screens*/
@media screen and (min-width: 576px) and (max-width:780px) {
	
}

/*xs screens*/
@media screen and (max-width: 576px) {
	
}