/* ==========================================================================
   Mobile-First Responsive Design (Final)
   - Includes horizontal overflow fixes and robust media queries
   - Safe fallbacks for brand tokens used elsewhere
   ========================================================================== */

/* Ensure these tokens exist even if not declared in main CSS */
:root {
  --primary: var(--royal);
  --secondary: var(--purple);
  --success: #10B981;
  --error: #EF4444;
}

/* ---------- Mobile Menu Overlay ---------- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 14, 26, 0.95);
  backdrop-filter: blur(20px);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.2s ease;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.mobile-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  font-size: var(--font-lg);
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.3);
  color: var(--white);
  transform: translateX(8px);
}

.mobile-nav-link i {
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
}

.mobile-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Bottom Navigation (Mobile) ---------- */
.bottom-nav {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-fixed);
  display: flex;
  gap: var(--space-xs);
  background: rgba(18, 22, 42, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  box-shadow: var(--shadow-2);
  /* Avoid 100vw overflow on some mobile browsers */
  width: auto;
  max-width: min(720px, calc(100dvw - 2rem));
  overflow-x: auto;
  scrollbar-width: none;
}
.bottom-nav::-webkit-scrollbar { display: none; }

.bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: #e2e8f0;
  transition: all 0.2s ease;
  min-width: 60px;
  font-size: var(--font-xs);
  text-align: center;
  white-space: nowrap;
}

.bottom-nav-link.active,
.bottom-nav-link:hover {
  background: rgba(124, 58, 237, 0.18);
  color: var(--white);
  transform: translateY(-2px);
}

.bottom-nav-link i {
  font-size: 1.125rem;
}

/* ---------- Mobile-Specific Adjustments ---------- */
@media (max-width: 767px) {
  /* Hide desktop menu; show mobile */
  .menu-wrapper { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
  .bottom-nav { display: flex !important; }

  /* Container adjustments */
  .container {
    padding: 0 var(--space-md);
    max-width: 100%;
  }

  /* Section padding adjustments */
  .section { padding: clamp(2rem, 6vw, 3rem) 0; }
  .section-header { margin-bottom: var(--space-2xl); text-align: center; }

  /* Hero adjustments */
  .hero {
    min-height: 100svh; /* use small viewport height */
    background-attachment: scroll; /* performance */
  }
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-xl); padding: var(--space-2xl) 0; }
  .hero-content { text-align: center; }
  .hero-actions { flex-direction: column; align-items: center; }
  .btn-large { width: 100%; max-width: 280px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .hero-cards { order: -1; grid-template-columns: 1fr; gap: var(--space-sm); }

  /* Card adjustments */
  .card { padding: var(--space-md); }

  /* Typography adjustments */
  .headline { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: var(--space-md); }
  .sub { font-size: var(--font-base); margin-bottom: var(--space-lg); }

  /* Grid adjustments */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--space-lg); }

  /* Solutions grid */
  .solutions-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .solution-card { padding: var(--space-lg); }

  /* Carousel adjustments */
  .scroll { grid-auto-columns: minmax(280px, 1fr); gap: var(--space-md); }
  .carousel-nav { display: none; }

  /* Course cards */
  .course { min-width: 280px; }

  /* Talent section */
  .talent-stats { grid-template-columns: 1fr; gap: var(--space-lg); }
  .stat-card { padding: var(--space-lg); }
  .list { grid-template-columns: 1fr; gap: var(--space-md); }
  .item { padding: var(--space-md); }

  /* Jobs section */
  .jobs-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .job-card { padding: var(--space-lg); }
  .job-header { flex-direction: column; gap: var(--space-md); align-items: flex-start; }
  .job-footer { flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
  .job-footer .btn { width: 100%; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .testimonial-card { padding: var(--space-lg); }

  /* Case studies */
  .case-studies-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .case-study-card { margin-bottom: var(--space-md); }
  .case-study-content { padding: var(--space-lg); }
  .case-study-metrics { grid-template-columns: 1fr; }

  /* About section */
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .stat-item { padding: var(--space-lg); }
  .mission-points { grid-template-columns: 1fr; gap: var(--space-sm); }
  .mission-point { padding: var(--space-md); }

  /* Support section */
  .support-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .support-card { padding: var(--space-lg); }

  /* Contact section */
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .contact-form { padding: var(--space-lg); }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-content { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-sm); }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: var(--space-md); }

  /* Forms & touch targets */
  .filters { flex-direction: column; gap: var(--space-sm); }
  .btn { min-height: 48px; }
  .input, select, textarea { min-height: 48px; font-size: 16px; } /* prevent iOS zoom */

  /* Background images - scroll for better performance */
  .section { background-attachment: scroll !important; }

  /* Reduce animations on mobile for better performance */
  .orb { animation-duration: 20s; }
}

/* High contrast on mobile */
@media (max-width: 767px) and (prefers-contrast: high) {
  .card, .solution-card, .job-card, .testimonial-card, .case-study-card, .support-card { border-width: 2px; }
  .btn { border: 2px solid currentColor; }
}

/* Dark mode adjustments for the mobile UI surfaces */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .mobile-menu-overlay { background: rgba(0, 0, 0, 0.95); }
  .bottom-nav { background: rgba(0, 0, 0, 0.9); }
}

/* ---------- Small mobile devices ---------- */
@media (max-width: 375px) {
  .container { padding: 0 var(--space-sm); }
  .hero-inner { padding: var(--space-lg) 0; }

  .card, .solution-card, .job-card, .testimonial-card, .case-study-content, .support-card {
    padding: var(--space-md);
  }

  .quick-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr; }
  .form-group { margin-bottom: var(--space-md); }

  .bottom-nav { padding: var(--space-xs); gap: 2px; }
  .bottom-nav-link { padding: var(--space-xs) var(--space-sm); min-width: 50px; }
  .bottom-nav-link span { font-size: 10px; }
}

/* ---------- Landscape mobile orientation ---------- */
@media (max-width: 767px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .hero-inner { padding: var(--space-lg) 0; }
  .section { padding: var(--space-xl) 0; }
}

/* ---------- Tablet portrait adjustments ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .grid-2 { grid-template-columns: 1fr; gap: var(--space-xl); }
  .solutions-grid, .jobs-grid, .testimonials-grid, .case-studies-grid { grid-template-columns: repeat(2, 1fr); }
  .scroll { grid-auto-columns: calc((100% - 20px) / 2); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; }
}

/* ---------- Container queries for responsive components ---------- */
@container (max-width: 400px) {
  .card { padding: var(--space-md); }
  .btn { padding: var(--space-sm); font-size: var(--font-sm); }
}

/* ---------- Print styles (mobile context) ---------- */
@media print {
  .mobile-menu-overlay,
  .mobile-menu-toggle,
  .bottom-nav { display: none !important; }
  .hero { min-height: auto; background: none !important; }
  .section { padding: var(--space-lg) 0; background: none !important; }
}

/* ==========================================================================
   Horizontal Overflow & Robustness Patch (applies globally)
   ========================================================================== */

/* Clip rare horizontal overspill without breaking sticky */
html, body, .page-wrapper {
  max-width: 100%;
  overflow-x: clip; /* modern, better than hidden */
}

/* Let flex/grid children shrink (prevents overflow from long content) */
.container,
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.job-header > *, .item > *,
.product-details-grid > *,
.tabs-nav, .scroll {
  min-width: 0;
}

/* Carousels/tabs keep their overflow self-contained */
.carousel { overflow: hidden; }
.carousel .scroll,
.tabs-nav {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Bottom nav width guard for browsers without dvw */
@supports not (width: 1dvw) {
  .bottom-nav { max-width: calc(100% - 2rem); }
}

/* Defensive grid min widths on very small phones */
@media (max-width: 480px) {
  .courses-grid-container,
  .products-grid-container,
  .learning-paths-grid { 
    grid-template-columns: 1fr !important;
  }
  .course-card, .product-card { min-width: 0; }
}

/* Off-canvas sidebar: hidden state never changes page width */
.cart-sidebar {
  width: min(400px, 100dvw);
  right: calc(-1 * min(400px, 100dvw));
}
@media (max-width: 768px) {
  .cart-sidebar {
    width: 100%;
    right: -100%;
  }
}

/* Decorative layers never create horizontal scrollbars */
.orbs, .orb {
  overflow: clip;
  max-width: 100%;
}

/* Long labels/crumbs wrap instead of stretching layout */
.breadcrumb, .meta-value, .product-header h1,
.job-company p, .feature, .note {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Extra guard for very narrow devices */
@media (max-width: 375px) {
  #training .courses-grid { grid-template-columns: 1fr !important; }
  .scroll { grid-auto-columns: minmax(240px, 1fr) !important; }
}