/*
Theme Name: WN
Theme URI: http://www.wiyoganurdiansyah.com/
Author: vodjo
Author URI: https://www.vodjo.com
Description: Wiyoga Nurdiansyah Theme
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sub
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

SUB is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

article.type-post img {
  height: 100%;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog .article-image img {
  object-fit: contain;
}

/* Header Transparent Styles for Single Project */
#headerProject {
  transition: background-color 0.3s ease-in-out;
}

#headerProject.bg-transparent {
  background-color: transparent !important;
}

#headerProject.bg-transparent .logo img,
#headerProject.bg-transparent .main-menu a {
  /* Optional: Add styles for transparent state if needed */
  /* For example, white text/logo on dark hero images */
}

/* Ensure hero image is at the top on single project pages */
.single-project #main-content-detail {
  padding-top: 0;
  margin-top: 0;
}

.single-project .box-img-detail {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.single-project .box-img-detail img {
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .logo {
    padding: 7px 0;
  }
}

/* Video Cover Styles for Single Project */
.box-video-detail {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* Desktop: Full viewport width and height */
@media (min-width: 768px) {
  .box-video-detail {
    height: 100vh;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
  }

  .project-video-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Mobile: Maintain video aspect ratio */
@media (max-width: 767px) {
  .box-video-detail {
    height: auto;
    margin-bottom: 1rem;
  }

  .project-video-cover {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Ensure smooth playback */
.project-video-cover {
  background-color: #000;
}

/* Video Controls Container */
.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  padding: 60px 20px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

.video-controls.visible {
  opacity: 1;
  visibility: visible;
}

/* Progress Bar Container */
.progress-bar-container {
  margin-bottom: 12px;
  padding: 0 5px;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: height 0.2s ease;
}

.progress-bar:hover {
  height: 7px;
}

.progress-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  pointer-events: none;
  transition: width 0.1s linear;
}

.progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.progress-bar:hover .progress-handle {
  opacity: 1;
}

/* Controls Bottom */
.controls-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Control Buttons */
.control-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

.control-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.control-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Play/Pause Button */
.play-pause-btn {
  padding: 8px;
}

.play-pause-btn .icon-play,
.play-pause-btn .icon-pause {
  display: none;
}

.box-video-detail.is-paused .play-pause-btn .icon-play {
  display: block;
}

.box-video-detail.is-playing .play-pause-btn .icon-pause {
  display: block;
}

/* Volume Control */
.volume-control {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

.volume-btn .icon-volume,
.volume-btn .icon-muted {
  display: none;
}

.volume-btn .icon-volume {
  display: block;
}

.box-video-detail.is-muted .volume-btn .icon-volume {
  display: none;
}

.box-video-detail.is-muted .volume-btn .icon-muted {
  display: block;
}

.volume-slider {
  position: relative;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

.volume-slider.visible {
  width: 80px;
}

.volume-range {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

.volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.volume-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Time Display */
.time-display {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.time-separator {
  margin: 0 4px;
  opacity: 0.7;
}

/* Fullscreen Button */
.fullscreen-btn .icon-fullscreen,
.fullscreen-btn .icon-exit-fullscreen {
  display: none;
}

.fullscreen-btn .icon-fullscreen {
  display: block;
}

.box-video-detail.is-fullscreen .fullscreen-btn .icon-fullscreen {
  display: none;
}

.box-video-detail.is-fullscreen .fullscreen-btn .icon-exit-fullscreen {
  display: block;
}

/* Fullscreen mode adjustments */
.box-video-detail.is-fullscreen {
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
}

.box-video-detail.is-fullscreen .project-video-cover {
  object-fit: contain;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .video-controls {
    padding: 40px 15px 15px;
  }

  .control-btn svg {
    width: 20px;
    height: 20px;
  }

  .time-display {
    font-size: 12px;
  }

  .controls-bottom {
    gap: 8px;
  }

  .controls-left,
  .controls-right {
    gap: 5px;
  }

  .volume-slider.visible {
    width: 60px;
  }

  .volume-range {
    width: 60px;
  }
}

/* Fix header transparency with video cover */
.single-project #main-content-detail {
  padding-top: 0;
  margin-top: 0;
}

.single-project .box-video-detail {
  margin-top: 0;
  position: relative;
  z-index: 1;
}