/* 
 * CORE FUNCTIONALITY PROTECTION
 * This file ensures critical functionality remains intact
 * DO NOT MODIFY - Load this file LAST in your CSS stack
 */

/* ===== MODAL SYSTEM PROTECTION ===== */
/* These rules ensure modals always work regardless of other CSS changes */

/* 1. Navigation and trigger buttons MUST be clickable */
.hero-nav {
  z-index: 100 !important;
}

.nav-contact-btn,
.policies-btn,
[data-modal-trigger] {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 101 !important;
  isolation: isolate !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Modal system MUST appear above all content */
.modal-overlay {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.modal-overlay.active {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal-content {
  z-index: 10000 !important;
  pointer-events: auto !important;
  position: relative !important;
}

.modal-close {
  z-index: 10001 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: absolute !important;
}

/* 3. Form elements MUST be interactive */
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form select {
  pointer-events: auto !important;
  position: relative !important;
  z-index: auto !important;
}

.contact-form textarea {
  cursor: text !important;
}

.contact-form button,
.form-submit {
  cursor: pointer !important;
}

/* 4. Prevent accidental blocking */
.background-container,
.background-overlay,
.decoration,
.aesthetic-element,
[class*="bg-"],
[class*="background-"] {
  pointer-events: none !important;
}

/* ===== CRITICAL POSITIONING FIXES ===== */
/* ULTRA HIGH SPECIFICITY - Force action-area to bottom */
html body .landing-container .action-area,
html body div.landing-container div.action-area,
.landing-container > .action-area,
div.action-area {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 1000 !important;
  
  /* Force flexbox centering */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  
  /* Enhanced spacing */
  gap: calc(1.5rem + 0.5rem) !important; /* 32px */
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0)) !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  
  /* Ensure visibility */
  width: 100% !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: translateY(0) !important;
  margin: 0 !important;
}

/* Ensure children are clickable with ultra-high specificity */
html body .landing-container .action-area > *,
html body div.landing-container div.action-area > *,
.landing-container > .action-area > *,
div.action-area > * {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1001 !important;
}

/* 5. Debug mode - Add to body class to see click areas */
body.debug-modals .nav-contact-btn,
body.debug-modals .policies-btn,
body.debug-modals [data-modal-trigger] {
  outline: 3px solid red !important;
  outline-offset: 2px !important;
}

body.debug-modals .modal-overlay {
  outline: 3px solid blue !important;
}

body.debug-modals .modal-content {
  outline: 3px solid green !important;
}

/* 6. Minimum touch targets for mobile */
@media (max-width: 768px) {
  .nav-contact-btn,
  .policies-btn,
  [data-modal-trigger],
  .modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  /* Mobile action-area adjustments */
  html body .landing-container .action-area,
  html body div.landing-container div.action-area,
  .landing-container > .action-area,
  div.action-area {
    gap: 1rem !important; /* 16px on mobile */
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0)) !important;
    padding-left: 2rem !important; /* Increased from 1rem to prevent clipping */
    padding-right: 2rem !important; /* Increased from 1rem to prevent clipping */
    /* Remove horizontal scrolling - icons should fit */
    overflow-x: visible !important;
    /* Ensure icons stay in one row */
    flex-wrap: nowrap !important;
  }
  
  /* Ensure minimum width for social icons on mobile */
  .social-link,
  .game-btn,
  .policies-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }
}

/* Very small screens (< 380px) */
@media (max-width: 380px) {
  html body .landing-container .action-area,
  html body div.landing-container div.action-area,
  .landing-container > .action-area,
  div.action-area {
    gap: 0.5rem !important; /* 8px on very small screens */
    padding-left: 1rem !important; /* Keep some padding to prevent clipping */
    padding-right: 1rem !important; /* Keep some padding to prevent clipping */
  }
  
  /* Smaller icons on very small screens */
  .social-link,
  .game-btn,
  .policies-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
  }
}

/* 7. Force visibility when active */
.modal-overlay:not(.active) {
  pointer-events: none !important;
  /* Allow opacity/visibility transitions instead of display:none */
}

/* 8. Prevent CSS conflicts */
.nav-contact-btn:hover,
.policies-btn:hover,
[data-modal-trigger]:hover {
  cursor: pointer !important;
}

/* 9. Animation safety */
.modal-overlay,
.modal-content {
  animation-fill-mode: forwards !important;
}

/* 10. Focus management */
.modal-overlay.active *:focus {
  outline: 2px solid var(--primary-color, #594461) !important;
  outline-offset: 2px !important;
}

/* ===== END CORE FUNCTIONALITY PROTECTION ===== */