/* ============================================
   WINGBOOKS - BASE RESPONSIVE STYLES
   For header, footer, and global mobile fixes
   ============================================ */

/* ============================================
   MOBILE FIRST BREAKPOINTS
   ============================================ */
/* Base: 320px-639px (mobile) */
/* sm: 640px-767px (large mobile) */
/* md: 768px-1023px (tablet) */
/* lg: 1024px+ (desktop) */

/* ============================================
   GLOBAL MINIMUM SIDE PADDING
   ============================================ */

/* Ensure content never touches screen edges on mobile */
@media (max-width: 767px) {
  section,
  main > section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Very small screens - reduce to 24px */
  @media (max-width: 360px) {
    section,
    main > section {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
  }
}

/* ============================================
   HEADER FIXES
   ============================================ */

/* Fix header overlapping content */
#main-content {
  padding-top: 64px;
}

/* Mobile menu button visibility fix */
@media (max-width: 1023px) {
  #mobile-menu-btn {
    color: #000 !important; /* Override inline white color */
  }
}

/* Header spacing on small screens */
@media (max-width: 480px) {
  #main-header > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Touch targets for header */
@media (max-width: 1023px) {
  #mobile-menu-btn {
    padding: 10px !important; /* 10px × 2 + 24px icon = 44px minimum */
    min-width: 44px;
    min-height: 44px;
  }

  #mobile-menu a {
    padding: 12px 24px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Mobile solutions submenu */
@media (max-width: 1023px) {
  #mobile-solutions-toggle {
    min-height: 44px;
  }

  #mobile-solutions-submenu a {
    padding: 10px 0 !important;
    min-height: 40px;
    display: flex;
    align-items: center;
  }
}

/* Desktop solutions dropdown - hide on mobile */
@media (max-width: 1023px) {
  #solutions-dropdown {
    display: none !important;
  }
}

/* ============================================
   FOOTER FIXES
   ============================================ */

/* Footer grid - stack on mobile */
@media (max-width: 1024px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 640px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Footer padding */
@media (max-width: 768px) {
  footer {
    padding: 48px 20px 32px !important;
  }
}

@media (max-width: 480px) {
  footer {
    padding: 40px 16px 24px !important;
  }
}

/* Footer links - increase touch targets */
@media (max-width: 768px) {
  footer li {
    margin-bottom: 16px !important;
  }

  footer li a {
    padding: 8px 0 !important;
    display: inline-block !important;
    min-height: 40px;
    line-height: 24px;
  }
}

/* Footer headings */
@media (max-width: 768px) {
  footer h4 {
    font-size: 15px !important;
    margin-bottom: 16px !important;
  }
}

/* Language dropdown */
@media (max-width: 640px) {
  #language-dropdown {
    max-width: 100% !important;
  }

  #language-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 60vh !important;
  }
}

/* Footer logo */
@media (max-width: 640px) {
  footer img[alt*="Wingbooks"],
  footer img[alt*="brandName"] {
    height: 22px !important;
  }
}

/* ============================================
   GLOBAL TYPOGRAPHY SCALING
   ============================================ */

/* Hero titles (h1) */
@media (max-width: 767px) {
  .hero-section h1,
  section:first-of-type h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section h1,
  section:first-of-type h1 {
    font-size: 48px !important;
    line-height: 1.15 !important;
  }
}

/* Section headings (h2) */
@media (max-width: 767px) {
  h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  h2 {
    font-size: 40px !important;
    line-height: 1.2 !important;
  }
}

/* Subsection headings (h3) */
@media (max-width: 767px) {
  h3 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  h3 {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
}

/* Body text scaling */
@media (max-width: 767px) {
  section p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ============================================
   GLOBAL SPACING ADJUSTMENTS
   ============================================ */

/* Hero section padding */
@media (max-width: 767px) {
  .hero-section,
  section:first-of-type {
    padding: 80px 16px 60px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section,
  section:first-of-type {
    padding: 120px 24px 80px !important;
  }
}

/* General section padding */
@media (max-width: 767px) {
  section {
    padding: 60px 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  section {
    padding: 80px 24px !important;
  }
}

/* ============================================
   TOUCH TARGETS & BUTTONS
   ============================================ */

@media (max-width: 767px) {
  /* Primary CTA buttons */
  button,
  a[style*="background-color: #000"],
  a[style*="background: #000"] {
    padding: 16px 40px !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Secondary buttons */
  button[style*="border"],
  a[style*="border: 1px"] {
    padding: 16px 40px !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

/* Button containers */
@media (max-width: 640px) {
  div[style*="display: flex"][style*="gap"] > button,
  div[style*="display: flex"][style*="gap"] > a {
    width: 100%;
    max-width: 320px;
  }
}

/* ============================================
   GRID LAYOUTS
   ============================================ */

/* Benefits/features grids */
@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  div[style*="display: grid"][style*="gap: 48px"] {
    gap: 32px !important;
  }

  div[style*="display: grid"][style*="gap: 60px"] {
    gap: 40px !important;
  }

  div[style*="display: grid"][style*="gap: 80px"] {
    gap: 32px !important;
  }
}

/* Flex layouts */
@media (max-width: 767px) {
  div[style*="display: flex"][style*="gap: 80px"] {
    gap: 32px !important;
  }

  div[style*="display: flex"][style*="gap: 60px"] {
    gap: 32px !important;
  }
}

/* ============================================
   IMAGES
   ============================================ */

@media (max-width: 767px) {
  img[style*="max-height"] {
    max-height: none !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Responsive visibility */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }
}

/* Stack on mobile */
@media (max-width: 767px) {
  .stack-mobile {
    flex-direction: column !important;
  }
}