/**
 * Mobile Optimization CSS for Compliance Hubs
 * Mobile-first responsive design with touch-friendly interfaces
 */

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile First Approach */

/* Extra Small: 320px - 479px (older phones) */
@media (max-width: 479px) {
  :root {
    --mobile-padding: 1rem;
    --mobile-font-base: 14px;
    --touch-target-size: 44px;
  }

  body {
    font-size: var(--mobile-font-base);
  }

  .hero-title {
    font-size: 2rem !important;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem !important;
  }

  .section {
    padding: 2rem var(--mobile-padding) !important;
  }
}

/* Small: 480px - 767px (phones) */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --mobile-padding: 1.25rem;
    --mobile-font-base: 15px;
    --touch-target-size: 44px;
  }

  body {
    font-size: var(--mobile-font-base);
  }

  .hero-title {
    font-size: 2.25rem !important;
  }

  .hero-subtitle {
    font-size: 1.1rem !important;
  }
}

/* Medium: 768px - 1023px (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --mobile-padding: 1.5rem;
    --touch-target-size: 40px;
  }

  .nav-content {
    padding: 1rem 1.5rem;
  }

  .section {
    padding: 4rem 1.5rem !important;
  }
}

/* Large: 1024px - 1439px (laptops) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container {
    max-width: 960px;
  }
}

/* Extra Large: 1440px+ (desktops) */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

/* ========================================
   HAMBURGER MENU (<768px)
   ======================================== */

@media (max-width: 767px) {
  /* Hide desktop navigation */
  .nav-links {
    display: none !important;
  }

  /* Hamburger button */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    transition: all 0.3s ease;
  }

  .hamburger-menu:focus {
    outline: 2px solid var(--corporate-blue);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .hamburger-line {
    width: 28px;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
  }

  .hamburger-line:not(:last-child) {
    margin-bottom: 5px;
  }

  /* Animated hamburger states */
  .hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
  }

  .hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Mobile navigation drawer */
  .mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-drawer.open {
    right: 0;
  }

  .mobile-nav-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-nav-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--corporate-blue);
  }

  .mobile-nav-close {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:focus {
    background: rgba(52, 148, 186, 0.1);
    color: var(--corporate-blue);
  }

  .mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-nav-item {
    border-bottom: 1px solid #f0f0f0;
  }

  .mobile-nav-link {
    display: block;
    padding: 1.25rem 1.5rem;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .mobile-nav-link:active {
    background: rgba(52, 148, 186, 0.1);
    color: var(--corporate-blue);
  }

  .mobile-nav-link.active {
    background: rgba(52, 148, 186, 0.15);
    color: var(--corporate-blue);
    font-weight: 600;
    border-left: 4px solid var(--corporate-blue);
    padding-left: calc(1.5rem - 4px);
  }

  /* Backdrop overlay */
  .mobile-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .mobile-nav-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Adjust nav layout */
  .nav-content {
    padding: 1rem;
  }

  .nav-logo {
    font-size: 1.25rem;
  }
}

/* ========================================
   TOUCH-FRIENDLY TARGETS (Minimum 44x44px)
   ======================================== */

@media (max-width: 1023px) {
  /* Ensure all interactive elements are touch-friendly */
  .btn,
  .nav-link,
  .jump-link,
  .framework-tag,
  .experience-card,
  .mobile-nav-link,
  .toc-link,
  button,
  a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Buttons */
  .btn {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
  }

  /* Experience cards */
  .experience-card {
    padding: 2rem 1.5rem;
    min-height: 200px;
  }

  .experience-card:active {
    transform: scale(0.98);
    background: rgba(52, 148, 186, 0.05);
  }

  /* Resource cards */
  .resource-card {
    padding: 2rem 1.5rem;
  }

  /* Jump links */
  .jump-link {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }

  /* Framework tags */
  .framework-tag {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
  }
}

/* ========================================
   COLLAPSIBLE ACCORDION SECTIONS
   ======================================== */

@media (max-width: 767px) {
  /* Collapsible section wrapper */
  .collapsible-section {
    position: relative;
  }

  .collapsible-content {
    max-height: 300px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .collapsible-content.expanded {
    max-height: none;
  }

  .collapsible-content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
  }

  .collapsible-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
    background: rgba(52, 148, 186, 0.1);
    color: var(--corporate-blue);
    border: 2px solid var(--corporate-blue);
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
  }

  .collapsible-toggle:hover,
  .collapsible-toggle:focus {
    background: var(--corporate-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 148, 186, 0.3);
  }

  .collapsible-toggle:active {
    transform: translateY(0);
  }

  .collapsible-icon {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
    font-size: 1.2rem;
  }

  .collapsible-toggle.expanded .collapsible-icon {
    transform: rotate(180deg);
  }
}

/* ========================================
   OPTIMIZED CARD LAYOUTS
   ======================================== */

@media (max-width: 767px) {
  /* Single column layout for mobile */
  .resource-grid,
  .feature-grid,
  .experience-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  /* Card spacing */
  .resource-card,
  .feature-item {
    margin-bottom: 0;
  }

  /* Hero badges wrap better */
  .hero-badges {
    gap: 0.75rem;
  }

  .badge {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
  }

  /* Related frameworks */
  .related-frameworks {
    gap: 0.75rem;
  }
}

/* ========================================
   MOBILE SPACING & TYPOGRAPHY
   ======================================== */

@media (max-width: 767px) {
  /* Improved spacing for thumbs */
  .section-title {
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  .section-subtitle {
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    font-size: 1rem;
  }

  /* Form inputs */
  input,
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  /* Footer */
  .footer {
    padding: 2rem 1rem;
  }

  .footer-links {
    flex-direction: column;
    gap: 1rem;
  }

  /* CTA Section */
  .cta-section {
    padding: 3rem 1rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
}

/* ========================================
   MOBILE NAVIGATION DRAWER ANIMATIONS
   ======================================== */

@media (max-width: 767px) {
  /* Slide-in animation */
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes slideOutRight {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }

  .mobile-nav-drawer.open {
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-nav-drawer.closing {
    animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Fade animations for backdrop */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  .mobile-nav-backdrop.visible {
    animation: fadeIn 0.3s ease;
  }

  .mobile-nav-backdrop.hiding {
    animation: fadeOut 0.3s ease;
  }
}

/* ========================================
   SWIPE GESTURE VISUAL FEEDBACK
   ======================================== */

@media (max-width: 767px) {
  /* Ripple effect container */
  .ripple-container {
    position: relative;
    overflow: hidden;
  }

  .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(52, 148, 186, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
  }

  @keyframes ripple-animation {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }

  /* Swipe indicator */
  .swipe-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    z-index: 1002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .swipe-indicator.visible {
    opacity: 1;
  }
}

/* ========================================
   NO HORIZONTAL SCROLL
   ======================================== */

@media (max-width: 1023px) {
  body {
    overflow-x: hidden;
  }

  .nav-content,
  .hero-content,
  .container,
  .section {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Prevent images from overflowing */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Prevent tables from overflowing */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Code blocks */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   TABLET-SPECIFIC OPTIMIZATIONS
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Two-column layout for tablets */
  .resource-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero adjustments */
  .hero-section {
    padding: 6rem 2rem 3rem;
  }

  /* Navigation adjustments */
  .nav-links {
    gap: 1.5rem;
    font-size: 0.95rem;
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 767px) {
  /* Reduce animation complexity on mobile */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }

  /* Disable parallax and complex transforms on mobile */
  .hero-section {
    transform: none !important;
  }

  /* GPU acceleration for smooth animations */
  .mobile-nav-drawer,
  .mobile-nav-backdrop,
  .hamburger-menu,
  .collapsible-content {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

@media (max-width: 1023px) {
  /* Focus visible styles for touch devices */
  *:focus-visible {
    outline: 3px solid var(--corporate-blue);
    outline-offset: 3px;
  }

  /* Larger tap targets for accessibility */
  .btn,
  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: rgba(52, 148, 186, 0.2);
  }

  /* Screen reader only text */
  .sr-only-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .mobile-nav-drawer,
  .mobile-nav-backdrop,
  .collapsible-content {
    transition: none !important;
    animation: none !important;
  }
}

/* ========================================
   PRINT STYLES FOR MOBILE
   ======================================== */

@media print {
  .hamburger-menu,
  .mobile-nav-drawer,
  .mobile-nav-backdrop,
  .collapsible-toggle {
    display: none !important;
  }

  .collapsible-content {
    max-height: none !important;
  }

  .collapsible-content::after {
    display: none !important;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
  .hero-section {
    min-height: 50vh;
    padding: 4rem 1rem 2rem;
  }

  .mobile-nav-drawer {
    width: 60%;
    max-width: 320px;
  }

  .experience-selector {
    padding: 2rem 1rem;
  }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
  .mobile-nav-drawer,
  .hamburger-menu,
  .btn,
  .jump-link {
    border: 2px solid currentColor;
  }

  .mobile-nav-backdrop {
    background: rgba(0, 0, 0, 0.8);
  }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
  .mobile-nav-drawer {
    background: #1a1a1a;
    color: white;
  }

  .mobile-nav-header {
    border-bottom-color: #333;
  }

  .mobile-nav-item {
    border-bottom-color: #2a2a2a;
  }

  .mobile-nav-link {
    color: #e5e5e5;
  }

  .hamburger-line {
    background-color: #e5e5e5;
  }

  .collapsible-content.collapsed::after {
    background: linear-gradient(to bottom, transparent, #1a1a1a);
  }
}