/* Responsive sizing: prevent horizontal scroll at narrow viewports (WCAG 1.4.10 Reflow) */
video[data-able-player],
.able-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Compact AblePlayer controls: 28×28px click targets (above WCAG 2.5.8 minimum), 20px visual icons */
.able-wrapper {
  --able-base-control-size: 28px;
}

.able-wrapper .able-controller .able-control-row {
  padding: 4px 9px !important;
  gap: 4px !important;
}

.able-wrapper .able-controller .able-control-row div[role=button],
.able-wrapper .able-controller .able-control-row button:not([class*="big-play"]) {
  width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  max-height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}

.able-wrapper .able-controller .able-control-row div[role=button] svg,
.able-wrapper .able-controller .able-control-row button:not([class*="big-play"]) svg {
  width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0;
}

/* Override AblePlayer's <480px responsive enlargement */
@media (width < 480px) {
  .able-wrapper .able-controller .able-control-row { gap: 4px !important; }
  .able-wrapper .able-controller .able-control-row div[role=button] {
    min-width: 28px !important; max-width: 28px !important;
    width: 28px !important; height: 28px !important;
    max-height: 28px !important; min-height: 28px !important;
    padding: 4px !important;
  }
  .able-wrapper .able-controller .able-control-row div[role=button] svg {
    width: 20px !important; max-width: 20px !important;
    height: 20px !important; max-height: 20px !important;
  }
}

@media screen and (max-width: 480px) {
  .able-wrapper .able-controller .able-control-row { gap: 4px !important; }
  .able-wrapper .able-controller .able-control-row div[role=button] {
    min-width: 28px !important; max-width: 28px !important;
    width: 28px !important; height: 28px !important;
    max-height: 28px !important; min-height: 28px !important;
    padding: 4px !important;
  }
  .able-wrapper .able-controller .able-control-row div[role=button] svg {
    width: 20px !important; max-width: 20px !important;
    height: 20px !important; max-height: 20px !important;
  }
}

/* Seek bar thumb: override the min-width/min-height that --able-base-control-size forces */
.able-wrapper .able-seekbar-head {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

/* Status bar and tooltip: Bootstrap 3 sets html{font-size:10px}, shrinking AblePlayer's
   0.875rem values to ~8.75px. Pin to 14px (the intended 0.875 × 16px browser default). */
.able-wrapper .able-status-bar {
  font-size: 14px !important;
}
.able-wrapper .able-tooltip {
  font-size: 14px !important;
}

/* Skip navigation link — revealed on keyboard focus (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: #0066cc;
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  font-weight: 700;
}
.skip-link:focus {
  left: 50%;
  transform: translateX(-50%);
}

/* Focus indicator safety net (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}