/* ============================================================
   Home2Hired — mobile.css
   Mobile-first overrides for the course dashboard pages
   (Tailwind CDN pages: index.html, week-*.html, module pages)
   v3.0 — unified with brand system
   ============================================================ */

/* ========================================
   HAMBURGER BUTTON (shown on mobile only)
   ======================================== */
.mob-hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(255,255,255,0.9);
  -webkit-tap-highlight-color: transparent;
}

/* ========================================
   MOBILE FULL-SCREEN MENU OVERLAY
   ======================================== */
.mob-menu-overlay {
  position: fixed;
  inset: 0;
  background: #0b1a30;
  z-index: 9999;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mob-menu-overlay.open { display: block; }

.mob-menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 24px;
}

.mob-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(13,24,42,0.98);
  position: sticky;
  top: 0;
  z-index: 1;
}

.mob-brand { font-size: 1.0625rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.mob-brand em { font-style: normal; font-size: 0.6875rem; font-weight: 600; color: #fb7185; margin-left: 6px; letter-spacing: 0.02em; text-transform: uppercase; }

.mob-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 8px; cursor: pointer;
  color: rgba(255,255,255,0.65);
  -webkit-tap-highlight-color: transparent;
}
.mob-close-btn:active { background: rgba(255,255,255,0.1); }

.mob-links { display: flex; flex-direction: column; padding: 0.875rem 1rem; gap: 2px; flex: 1; }

.mob-nav-link {
  display: flex; align-items: center;
  padding: 0.875rem 1rem;
  color: rgba(255,255,255,0.85);
  font-size: 1.0625rem; font-weight: 500;
  border-radius: 10px; text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-link:active, .mob-nav-link.is-active { background: rgba(249,115,22,0.12); color: #f97316; }
.mob-nav-link.sub { font-size: 0.9375rem; padding-left: 1.625rem; color: rgba(255,255,255,0.6); }
.mob-nav-link.sub:active { color: #f97316; }

.mob-section-label {
  font-size: 0.625rem; font-weight: 700; color: rgba(255,255,255,0.28);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.875rem 1rem 0.25rem;
}

.mob-logout-btn {
  display: block; margin: 0.5rem 1rem;
  padding: 0.875rem; width: calc(100% - 2rem);
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px; color: rgba(255,255,255,0.6);
  font-size: 0.9375rem; font-weight: 500;
  cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.mob-logout-btn:active { background: rgba(255,255,255,0.08); }


/* ========================================
   MOBILE OVERRIDES — max-width: 768px
   Targets course dashboard (Tailwind) pages
   ======================================== */
@media screen and (max-width: 768px) {

  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* Nav */
  .mob-hamburger-btn   { display: flex !important; }
  .mob-desktop-links,
  .desktop-nav         { display: none !important; }

  /* Headings */
  h1 { font-size: 1.75rem  !important; line-height: 1.2  !important; }
  h2 { font-size: 1.375rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.125rem !important; line-height: 1.3  !important; }
  h4 { font-size: 1rem     !important; line-height: 1.4  !important; }

  /* Body text */
  p  { font-size: 0.9375rem !important; line-height: 1.7  !important; }
  li { font-size: 0.9375rem !important; line-height: 1.65 !important; }

  /* Section padding (Tailwind utility classes) */
  [class*="py-36"],
  [class*="py-32"],
  [class*="py-24"] { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  [class*="py-20"] { padding-top: 2rem   !important; padding-bottom: 2rem   !important; }
  [class*="py-16"] { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }

  /* Card padding */
  [class*="p-10"] { padding: 1.125rem !important; }
  [class*="p-8"]  { padding: 1rem     !important; }

  /* Bottom margin */
  [class*="mb-12"] { margin-bottom: 1.75rem !important; }
  [class*="mb-10"] { margin-bottom: 1.5rem  !important; }

  /* Rounded corners */
  [class*="rounded-3xl"] { border-radius: 1rem !important; }

  /* Touch targets */
  a, button { -webkit-tap-highlight-color: transparent; }

  /* CTA buttons full-width on Tailwind pages */
  a[class*="rounded-full"] {
    display: block !important; text-align: center !important;
    width: 100% !important; box-sizing: border-box !important;
    padding-left: 1.25rem !important; padding-right: 1.25rem !important;
    font-size: 1rem !important;
  }

  /* Tailwind text size utilities */
  [class*="text-7xl"],
  [class*="text-6xl"],
  [class*="text-5xl"] { font-size: 1.75rem  !important; line-height: 1.2  !important; }
  [class*="text-4xl"] { font-size: 1.5rem   !important; line-height: 1.25 !important; }
  [class*="text-3xl"] { font-size: 1.25rem  !important; line-height: 1.3  !important; }
  [class*="text-2xl"] { font-size: 1.125rem !important; line-height: 1.35 !important; }
  [class*="text-xl"]  { font-size: 0.9375rem !important; line-height: 1.7 !important; }

}

/* ========================================
   MARKETING PAGES — max-width: 768px
   Targets style.css-based pages:
   the-course.html, about.html, income-paths.html
   ======================================== */
@media screen and (max-width: 768px) {

  /* ── Credentials grid: 2-col stack ── */
  .cred-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 0 !important;
  }
  .cred-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 12px 8px !important;
  }
  .cred-item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,0.08) !important; }
  .cred-item:last-child,
  .cred-item:nth-last-child(2):nth-child(odd) { border-bottom: none !important; }

  /* ── Flow steps: vertical stack ── */
  .flow-steps {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .flow-arrow {
    display: block !important;
    text-align: center !important;
    transform: rotate(90deg) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .flow-step { text-align: center !important; }

  /* ── Income path tab buttons: wrap cleanly ── */
  #income-paths .tab-btn {
    font-size: 0.8rem !important;
    padding: 9px 14px !important;
  }

  /* ── Free resources three-col → one-col ── */
  #free-resources .three-col {
    grid-template-columns: 1fr !important;
  }

  /* ── Weeks grid: single column ── */
  .weeks-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Pricing card padding ── */
  .pricing__card { padding: 28px 22px !important; }
  .pricing__price { font-size: 2.8rem !important; }

  /* ── Deal story / story block padding ── */
  .deal-story,
  .story-block { padding: 24px 20px !important; }

  /* ── Comparison columns: stack ── */
  .comparison,
  .comparison-about { grid-template-columns: 1fr !important; }

  /* ── B2C vs B2B income path panels: stack inner grid ── */
  #cat-w2 .two-col,
  #cat-services .two-col,
  #cat-creator .two-col,
  #cat-social .two-col { grid-template-columns: 1fr !important; }

  /* ── Skills grid on about page ── */
  .skills-grid { grid-template-columns: 1fr !important; }

  /* ── Showup grid: 2 cols then 1 ── */
  .showup-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Two-col email optin: stack ── */
  .section [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Income paths hero: hide photo on smallest screens ── */
  .hero-photo-side { min-height: 260px !important; }

  /* ── About CTA section ── */
  .about-cta { padding: 48px 24px !important; }

  /* ── Hero cards: stack ── */
  .hero__cards { flex-direction: column !important; gap: 8px !important; }
  .hero__card  { width: 100% !important; }

  /* ── Navbar links (style.css nav) ── */
  .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: #0f172a;
    padding: 20px 24px;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    z-index: 200;
  }
  .nav__links.open { display: flex !important; }
  .nav__toggle { display: block !important; }

  /* ── Brand bar text wrap ── */
  div[style*="background:#1e293b"][style*="padding:10px"] p {
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    padding: 0 12px !important;
  }

}

/* ── Extra small (iPhone SE, 375px) ── */
@media screen and (max-width: 375px) {
  h1 { font-size: 1.5rem  !important; }
  h2 { font-size: 1.2rem  !important; }
  .cred-num { font-size: 1.35rem !important; }
  [class*="px-6"] { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
  .about-hero h1 { font-size: 1.65rem !important; }
  .pricing__price { font-size: 2.4rem !important; }
  .showup-grid { grid-template-columns: 1fr !important; }
}