/* ═══════════════════════════════════════════════════════════════════
   mobile.css — Clherity global mobile styles + bottom navigation bar
   ═══════════════════════════════════════════════════════════════════ */

/* ── GLOBAL ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; min-width: 0; }
img, video, iframe { max-width: 100%; height: auto; display: block; }
section, header, footer, nav, main, article, aside { max-width: 100vw; overflow-x: hidden; }
button, a, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }

/* ── LOGO ──────────────────────────────────────────────────────── */
.logo .cl, .logo-nav .cl { text-transform: capitalize; }
.logo .cl::first-letter, .logo-nav .cl::first-letter,
.footer-brand .logo .cl::first-letter { text-transform: uppercase; }

/* ── TOP NAV ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 0.9rem 1.25rem !important; }
  .nav-links { display: none !important; }
  .nav-links.open {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; inset: 0 !important; z-index: 9999 !important;
    background: rgba(26,0,42,0.98) !important;
    align-items: center !important; justify-content: center !important;
    gap: 2.25rem !important; padding: 2rem !important;
    pointer-events: all !important; touch-action: none !important;
    overscroll-behavior: contain !important;
  }
  .nav-links.open a {
    color: rgba(255,255,255,0.9) !important; font-size: 1.1rem !important;
    min-height: 44px !important; display: flex !important;
    align-items: center !important; padding: 0.35rem 1rem !important;
  }
  .nav-links.open .nav-cta {
    background: #C200FF !important; padding: 0.75rem 2.5rem !important;
    border-radius: 100px !important; color: #fff !important;
    box-shadow: 0 6px 20px rgba(194,0,255,0.4) !important;
  }
  .nav-hamburger { display: flex !important; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px) !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; transform: translateX(20px) !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px) !important; }
  .nav-links.open::after {
    content: '× tap outside to close';
    position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif; font-size: 0.7rem;
    color: rgba(255,255,255,0.25); letter-spacing: 0.08em;
    text-transform: uppercase; white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV BAR — fixed to bottom, one-tap page access
   ══════════════════════════════════════════════════════════════════ */
.mobile-nav { display: none; }

@media (max-width: 768px) {
  /* Push content above the bar */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .mobile-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 8000;
    background: rgba(26,0,42,0.96);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(194,0,255,0.2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    align-items: stretch; justify-content: space-around;
  }

  .mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem; text-decoration: none;
    color: rgba(255,255,255,0.45);
    font-family: 'Syne', sans-serif; font-size: 0.56rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    flex: 1; min-height: 44px; padding: 0.4rem 0.2rem;
    transition: color 0.15s; position: relative;
  }

  .mobile-nav-item:active { opacity: 0.7; }

  .mobile-nav-item.active, .mobile-nav-item[aria-current="page"] { color: #C200FF; }

  /* Active indicator stripe at top of tab */
  .mobile-nav-item.active::before, .mobile-nav-item[aria-current="page"]::before {
    content: ''; position: absolute; top: 0; left: 15%; right: 15%;
    height: 2.5px; background: #C200FF; border-radius: 0 0 3px 3px;
  }

  /* CTA tab glows purple */
  .mobile-nav-item--cta { color: #C200FF !important; }
  .mobile-nav-item--cta .mobile-nav-icon {
    background: rgba(194,0,255,0.15); border-radius: 10px; padding: 0.2rem 0.5rem;
  }

  .mobile-nav-icon { font-size: 1.3rem; line-height: 1; display: block; }
  .mobile-nav-label { display: block; line-height: 1; }
}

/* ── HERO ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr !important; padding: 5.5rem 1.25rem 3rem !important; min-height: auto !important; }
  .hero-visual { display: none !important; }
  .hero-heading { font-size: clamp(1.9rem,7vw,2.6rem) !important; line-height: 1.1 !important; }
  .hero-sub { font-size: 1rem !important; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }
  .page-hero, .hero { padding-top: 5rem !important; }
}
@media (max-width: 400px) {
  .hero-heading { font-size: 1.85rem !important; }
  .hero-pills { gap: 0.4rem; }
  .pill { font-size: 0.68rem; padding: 0.3rem 0.75rem; }
}

/* ── MARQUEE ───────────────────────────────────────────────────── */
@media (max-width: 768px) { .marquee-item { font-size: 0.72rem; gap: 0.5rem; } }

/* ── PLAN / PACKAGE CARDS ──────────────────────────────────────── */
/* White text only on dark-background plan/package cards */
.pricing-section .plan-features li,
.pricing-section .pkg-features li,
.packages-section .pkg-features li { color: rgba(255,255,255,0.95) !important; }
.pricing-section .plan-desc, .pricing-section .pkg-desc,
.packages-section .pkg-desc { color: rgba(255,255,255,0.85) !important; }
.pricing-section .plan-period, .pricing-section .pkg-period,
.packages-section .pkg-period { color: rgba(255,255,255,0.7) !important; }

@media (max-width: 768px) {
  .plans-grid, div[id="plans-grid"] { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .plan-card { padding: 1.75rem !important; }
  .plan-card.featured, .pkg-card.featured { transform: none !important; }
  .packages-grid { grid-template-columns: 1fr !important; }
  .packages-section, .compare-section { padding: 3.5rem 1.25rem !important; }
  .compare-table td, .compare-table th { padding: 0.65rem 0.5rem !important; font-size: 0.78rem !important; }
  .packages-header { flex-direction: column; }
  .email-row { flex-direction: column; gap: 0.75rem; }
  .email-input { width: 100%; }
  #email-confirm-btn { width: 100%; }
}

/* ── COMMUNITY ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .community-section { padding: 3.5rem 1.25rem !important; }
  .community-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .community-pillars { grid-template-columns: 1fr 1fr !important; gap: 0.85rem !important; }
  .pillar-box { padding: 1.25rem !important; }
  .community-visual { display: none !important; }
}
@media (max-width: 400px) { .community-pillars { grid-template-columns: 1fr !important; } }

/* ── SOCIAL FEED ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .social-feed-section { padding: 3.5rem 1.25rem !important; }
  .feed-grid { grid-template-columns: repeat(2,1fr) !important; gap: 0.75rem !important; }
  .social-feed-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .social-links-grid { gap: 0.65rem; }
  .social-link-card { min-width: 85px; padding: 1rem 0.85rem; }
  .social-section { padding: 3.5rem 1.25rem !important; }
}
@media (max-width: 400px) { .feed-grid { grid-template-columns: 1fr !important; } }

/* ── FOUNDER ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .founder-section { padding: 3.5rem 1.25rem !important; }
  .founder-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .founder-visual { display: none !important; }
  .founder-heading { font-size: clamp(1.6rem,5vw,2.2rem) !important; }
}

/* ── FAQ ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-section { padding: 3.5rem 1.25rem !important; }
  .faq-question { font-size: 0.9rem !important; }
}

/* ── CONTACT ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-section { padding: 3.5rem 1.25rem !important; }
  .contact-inner, .contact-wrap { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .contact-form-wrap { padding: 1.5rem !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
}

/* ── ARTICLES ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #resources-grid, #articles-grid { grid-template-columns: 1fr !important; }
  #resource-filters { flex-wrap: wrap; gap: 0.4rem; }
  .article-header { padding: 7rem 1.25rem 2.5rem !important; }
  .article-body-wrap { padding: 2.5rem 1.25rem 4rem !important; }
  .article-hero-img { padding: 0 1.25rem !important; }
  .article-header h1 { font-size: clamp(1.7rem,6vw,2.5rem) !important; }
}

/* ── EVENTS ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .events-grid { grid-template-columns: 1fr !important; }
  .event-card { padding: 1.5rem !important; }
}

/* ── ONBOARDING / JOIN ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .card { padding: 1.5rem 1.1rem !important; border-radius: 16px !important; }
  .form-row-2 { grid-template-columns: 1fr !important; }
  .form-row-3 { grid-template-columns: 1fr 1fr !important; }
  .chips { gap: 0.35rem; }
  .chip { font-size: 0.68rem; padding: 0.32rem 0.7rem; }
}
@media (max-width: 480px) { .card { margin: 0.5rem; padding: 2rem 1.25rem !important; } }

/* ── FOOTER ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer { padding: 2.5rem 1.25rem 1.75rem !important; }
  .footer-top { flex-direction: column; gap: 1.75rem !important; }
  .footer-links { gap: 1.5rem !important; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  div[style*="background:#0D0020"] { padding: 0.85rem 1.25rem !important; }
  div[style*="background:#0D0020"] p { font-size: 0.68rem !important; }
}

/* ── TABLES ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .comparison-table, table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%;
  }
}

/* ── GRID OVERRIDES ────────────────────────────────────────────── */
@media (max-width: 900px) {
  section > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="transform:scale(1.03)"] { transform: none !important; }
}

/* ── OFFER BUTTONS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .offer-btn--outline, .offer-btn--solid { width: 100%; padding: 0.9rem 1rem; font-size: 0.8rem; justify-content: center; }
}

/* ── TOUCH TARGETS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  button, .btn-primary, .btn-pkg, .btn-plan, a.btn-primary { min-height: 44px; }
  .nav-hamburger { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
}

/* ── SECTION HEADINGS ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-heading, h1, h2 { word-break: break-word; overflow-wrap: break-word; hyphens: auto; }
}

/* ── DECORATIVE BLOBS ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero::before, .hero::after, .packages-section::before,
  .founder-section::before, .page-hero::before, .page-hero::after { display: none; }
}

/* ── ADMIN ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-tabs { flex-wrap: wrap; gap: 0.4rem; overflow-x: auto; }
  .tab-btn { font-size: 0.72rem; padding: 0.5rem 0.75rem; white-space: nowrap; }
}