/* Google-compliant Video Watch Page Styles */
body.video-watch-page {
  background: #000;
}

body.video-watch-page .site-main {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

body.video-watch-page .entry-header,
body.video-watch-page .generate-columns,
body.video-watch-page .post-meta,
body.video-watch-page .comments-area {
  display: none !important;
}

body.video-watch-page .entry-content {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.wvp-outer {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  background: #000;
  position: relative;
}

.wvp-wrap {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: #000;
}

.wvp-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  margin: 0 auto;
}

.wvp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.video-title {
  text-align: center;
  margin: 20px auto;
  max-width: 800px;
  padding: 0 20px;
  font-size: 2.2em;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .wvp-wrap {
    max-width: 100%;
  }
  
  .video-title {
    font-size: 1.6em;
    padding: 0 15px;
    margin: 15px auto;
  }
  
  .wvp-aspect {
    aspect-ratio: 9/16;
  }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .wvp-wrap {
    max-width: 100%;
  }
  
  .video-title {
    font-size: 1.8em;
  }
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16/9) {
  .wvp-aspect {
    height: 0;
    padding-bottom: 56.25%;
  }
  
  .wvp-video {
    position: absolute;
  }
}

/* Focus styles for accessibility */
.wvp-video:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Loading state */
.wvp-video[poster] {
  background: #1a1a1a url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>') no-repeat center;
  background-size: 48px 48px;
}