/* Navigation and Focus Management for JewbileeTV */
/* Unified D-pad navigation styles and focus states */

/* Focus Ring */
.focusable {
  position: relative;
  outline: none;
  transition: transform var(--transition-fast);
}

.focusable:focus,
.focusable.focused {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 0.208vw;      /* 4px at 1920px */
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-color);
  z-index: 100;
}

/* Focus within containers */
.focusable-container {
  position: relative;
}

.focusable-container:focus-within {
  outline: none;
}

/* Hidden layer accessibility - truly hide layers that are not visible */
[data-layer][aria-hidden="true"],
[data-layer][inert] {
  pointer-events: none;
  visibility: hidden;
  display: none !important;
}

/* Remove tabindex from hidden elements */
[data-layer][aria-hidden="true"] [tabindex] {
  tabindex: -1;
}

/* Navigation items */
.nav-item {
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-item:hover {
  opacity: 0.8;
}

.nav-item.focused {
  outline: 0.156vw solid var(--focus-ring-color); /* 3px at 1920px */
  outline-offset: 0.104vw; /* 2px at 1920px */
}

/* Thumbnail focus */
.thumbnail-card {
  position: relative;
  border-radius: var(--card-border-radius);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.thumbnail-card.focused {
  outline: none;
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color);
  z-index: 10;
}

/* Circular card focus (channels) */
.thumbnail-card.circular.focused {
  border-radius: 50%;
}

/* Carousel indicator focus */
.carousel-indicator {
  width: 0.741vh;  /* 8px at 1080p */
  height: 0.741vh; /* 8px at 1080p */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.carousel-indicator.active {
  background: rgba(255, 255, 255, 0.95);
}

.carousel-indicator.focused {
  outline: none;
  transform: scale(1.2);
  background: rgba(255, 255, 255, 1);
}

/* Component focus (search input, etc) */
/* Note: Main .component-input styles are in layer-component.css */
/* These focus styles are intentionally minimal to match legacy search box behavior */

/* Scrollable containers */
.scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.scrollable::-webkit-scrollbar {
  display: none;
}

/* Focus trap prevention */
.focus-trap-boundary {
  position: relative;
}

/* Keyboard navigation hints */
.nav-hint {
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.nav-hint.visible {
  opacity: 0.6;
}

/* D-pad navigation states */
[data-nav-direction="up"] {
  cursor: n-resize;
}

[data-nav-direction="down"] {
  cursor: s-resize;
}

[data-nav-direction="left"] {
  cursor: w-resize;
}

[data-nav-direction="right"] {
  cursor: e-resize;
}

/* Disable text selection during navigation */
.navigating {
  user-select: none;
  -webkit-user-select: none;
}

/* Loading states */
.loading {
  pointer-events: none;
  opacity: 0.5;
}

/* Disabled states */
.disabled,
[disabled] {
  pointer-events: none;
  opacity: 0.3;
}