/**
 * Hero V2 Enhancements (Game V2)
 * 2-button layout and additional styling for multi-version hero
 * 
 * @package GeneratePress_Child
 * @version 2.0.0
 * 
 * This file extends components.hero.css with V2-specific enhancements
 */

/* ==========================================================================
   Hero V2 Container
   ========================================================================== */

/* V2 modifier - allows for additional customization if needed */
.gpcc-skin .gpcc-hero--v2 {
  /* Inherits all base hero styles from components.hero.css */
  /* Additional V2-specific styles can be added here */
}

/* ==========================================================================
   2-Button Actions Layout
   ========================================================================== */

/* V2 actions container with 2 buttons */
.gpcc-skin .gpcc-hero__actions--v2 {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  width: 100%;
}

/* Desktop: Side-by-side buttons */
@media (min-width: 768px) {
  .gpcc-skin .gpcc-hero__actions--v2 {
    flex-direction: row;
    gap: var(--gap-sm);
  }
}

/* ==========================================================================
   Hero Buttons (V2 specific styling)
   ========================================================================== */

/* Base button for V2 hero */
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn {
  /* Override V1 width for 2-button layout */
  flex: 1;
  min-width: 0; /* Allow flex shrink */
  
  /* Base styling inherited from components.hero.css */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  
  padding: var(--gap-sm) var(--gap);
  border-radius: var(--radius-lg);
  border: 2px solid;
  cursor: pointer;
  transition: all var(--transition-fast);
  
  height: 48px;
  
  /* Prevent text selection */
  user-select: none;
}

/* Primary Button (Direct Download) */
.gpcc-skin .gpcc-hero__btn--primary {
  background: var(--action-download);
  border-color: var(--action-download);
  color: white;
}

.gpcc-skin .gpcc-hero__btn--primary:hover {
  background: var(--action-download-hover);
  border-color: var(--action-download-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.gpcc-skin .gpcc-hero__btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
}

/* Secondary Button (Drive Download) */
.gpcc-skin .gpcc-hero__btn--secondary {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text);
}

.gpcc-skin .gpcc-hero__btn--secondary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.gpcc-skin .gpcc-hero__btn--secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Focus states */
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Disabled/Busy states */
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn:disabled,
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn[aria-busy="true"] {
  cursor: wait;
  background: var(--text-muted);
  border-color: var(--text-muted);
}

/* Hidden state (when no URL available) */
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn[hidden] {
  display: none;
}

/* ==========================================================================
   Countdown Display for V2
   ========================================================================== */

/* Countdown text below buttons */
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__countdown {
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-medium);
  min-height: 1.5em;
  margin-top: var(--gap-xs);
  line-height: 1.4;
}

/* ==========================================================================
   Button Text Dynamic Update Support
   ========================================================================== */

/* For JS dynamic text updates (version switching) */
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn [data-v2-btn-text] {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Tablet: Adjust button sizes */
@media (max-width: 1023px) {
  .gpcc-skin .gpcc-hero__actions--v2 {
    flex-direction: column;
    gap: var(--gap-xs);
  }
  
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn {
    width: 100%;
    min-width: 200px;
  }
}

/* Mobile: Stack vertically with full width */
@media (max-width: 767px) {
  .gpcc-skin .gpcc-hero__actions--v2 {
    gap: calc(var(--gap-xs) * 0.75);
  }
  
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn {
    font-size: var(--text-xs);
    padding: calc(var(--gap-xs) * 0.75) var(--gap-sm);
    height: 44px;
    min-width: 0;
  }
  
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__countdown {
    font-size: var(--text-xs);
    margin-top: calc(var(--gap-xs) * 0.5);
  }
}

/* ==========================================================================
   Integration with Version Selector
   ========================================================================== */

/* Spacing between version selector and actions */
.gpcc-skin .gpcc-hero--v2 .gpcc-hero__version-selector + .gpcc-hero__facts {
  margin-top: var(--gap-xs);
}

.gpcc-skin .gpcc-hero--v2 .gpcc-hero__facts + .gpcc-hero__actions {
  /* Spacing already defined in base hero */
}

/* ==========================================================================
   Button Icons/Emojis Support
   ========================================================================== */

.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn-icon {
  display: inline-flex;
  font-size: 1.1em;
  line-height: 1;
}

/* ==========================================================================
   Special States
   ========================================================================== */

/* When only one button is visible (other hidden) */
.gpcc-skin .gpcc-hero__actions--v2:has(.gpcc-hero__btn[hidden]:only-of-type) .gpcc-hero__btn:not([hidden]) {
  /* Single button takes more space */
  flex: 1;
  max-width: none;
}

/* Loading state for actions container */
.gpcc-skin .gpcc-hero__actions--v2[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn {
    border-width: 3px;
  }
  
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn:focus-visible {
    outline-width: 4px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn {
    transition: none;
  }
  
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .gpcc-skin .gpcc-hero__actions--v2 {
    display: none; /* Hide download buttons in print */
  }
}

/* ==========================================================================
   Animation on Load (Optional)
   ========================================================================== */

/* Subtle fade-in for buttons */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn {
  animation: fadeInUp 0.3s ease-out;
  animation-fill-mode: both;
}

.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn:nth-child(1) {
  animation-delay: 0.05s;
}

.gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn:nth-child(2) {
  animation-delay: 0.1s;
}

/* Disable animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gpcc-skin .gpcc-hero--v2 .gpcc-hero__btn {
    animation: none;
  }
}

/* ==========================================================================
   Version Selection Notice (in Hero)
   ========================================================================== */

.gpcc-skin .gpcc-hero__notice {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #EF4444;
  border-left: 4px solid #EF4444;
  color: #FCA5A5;
  padding: var(--gap-sm) var(--gap);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--gap-sm);
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  animation: noticeSlideIn 0.3s ease-out;
}

.gpcc-skin .gpcc-hero__notice-icon {
  font-size: 16px;
  flex: 0 0 auto;
}

.gpcc-skin .gpcc-hero__notice-text {
  flex: 1;
}

@keyframes noticeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Single Download Button + Report Link (Refinement)
   ========================================================================== */

/* CTA Wrapper */
.gpcc-skin .gpcc-hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  align-items: stretch;
}

/* Status Display (V1 compatibility) */
.gpcc-skin .gpcc-cta__status {
  min-height: 24px;
  font-size: var(--text-sm);
  color: var(--primary);
  text-align: center;
  padding: 4px 0;
}

/* Secondary Actions (Report link) */
.gpcc-skin .gpcc-hero__secondary {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-xs);
}

/* Report Link */
.gpcc-skin .gpcc-hero__report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  transition: all 0.2s ease;
}

.gpcc-skin .gpcc-hero__report-link::before {
  content: '⚠️';
  font-size: 14px;
}

.gpcc-skin .gpcc-hero__report-link:hover {
  color: #EF4444;
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
}

.gpcc-skin .gpcc-hero__report-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .gpcc-skin .gpcc-hero__report-link {
    font-size: var(--text-xs);
    padding: 6px 12px;
  }
}