/*
 * gwl-responsive.css
 * Growth by Giacomo
 * Responsive + Readability fix - applied to all HTML files
 * Add this link tag to every HTML file:
 * <link rel="stylesheet" href="gbg-responsive.css">
 */

/* ══════════════════════════════════════════════
   1. GLOBAL READABILITY - base for all screens
══════════════════════════════════════════════ */

:root {
  /* Solid readable colors - no opacity on text */
  --txt:  #0F0F0F;
  --sub:  #444444;
  --mut:  #888888;
  --bdr:  rgba(0,0,0,0.10);

  /* Font sizes - minimum readable on any screen */
  --fz-hero:  clamp(36px, 7vw, 80px);
  --fz-h1:    clamp(28px, 4vw, 52px);
  --fz-h2:    clamp(22px, 3vw, 40px);
  --fz-h3:    clamp(19px, 2vw, 26px);
  --fz-body:  18px;
  --fz-small: 16px;
  --fz-label: 13px;
  --fz-btn:   13px;
  --fz-stat:  clamp(28px, 4vw, 44px);

  /* Touch targets */
  --touch: 48px;

  /* Spacing */
  --gap-sm:  16px;
  --gap-md:  24px;
  --gap-lg:  40px;
}

/* Force readable body */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--fz-body) !important;
  line-height: 1.85 !important;
  color: var(--txt) !important;
}

/* All paragraph-level text */
p, li, td, th, span.od, div.od,
.card-body, .rec-desc, .r-s, .i-sub,
.about-body, .section-sub, .jstep-desc,
.tcard-quote, .contact-body, .cf-sub,
.fb-desc, .ib p, .fsd, .ph-sub,
.doc-section p, .doc-section li,
.opt-desc, .footer-links a,
.ns p, .not-sure p,
.si-meta, .sc-desc, .mc-desc,
.milestone-desc, .msg-bubble,
.ps-item, .sb-item, .nav-link,
.panel-sub, .login-sub,
.wb-program, .dc-title,
.jstep-desc {
  font-size: var(--fz-body) !important;
  line-height: 1.85 !important;
  color:#444444 !important;
}

/* Stat labels - always pure white, always readable */
.hs-l, .stat-l, .sl,
.hero-stat .hs-l,
.i-stats .stat-l {
  color: #0F0F0F !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  display: block !important;
}

/* Headings - always white, always big */
h1, h2, h3, h4, h5, h6,
.panel-title, .ph-title, .page-h,
.r-h, .q-text, .qt, .i-h,
.hero-h, .about-h, .contact-h,
.section-h, .cf-title,
.rec-tier-name, .rname, .rtiername,
.wb-greeting, .login-h, .lb-h,
.si-title, .sc-title, .mc-title,
.milestone-title, .ns h4, .not-sure h4,
.af-title, .fst, .dc-title,
.jstep-title, .footer-col-title {
  color: #0F0F0F !important;
  line-height: 1.15 !important;
}

/* Labels / eyebrows - coral or muted, always 13px+ */
.eyebrow, .section-label, .q-num, .qn,
.r-eye, .r-eye, .ph-eye, .panel-eye,
.rec-badge, .rbadge, .badge-teal,
.badge-amber, .badge-coral,
.mc-type, .sc-tag, .ct-badge,
.prog-step, .ps, .stat-label,
.journey-label, .jlabel,
.rec-dl, .rdl, .lb-tag, .tb-sub,
.tb-tag, .footer-col-title,
.topbar-tag, .tb-s,
.rec-prog-label, .rprogramlabel,
.rec-stage, .rstage, .tier-stage {
  font-size: var(--fz-label) !important;
  letter-spacing: 2px !important;
}

/* Prices - always bold white */
.pc-price, .rec-dv, .rdv, .jstep-price {
  font-size: clamp(18px, 2.5vw, 24px) !important;
  color: #0F0F0F !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════════════
   2. BUTTONS - minimum touch target 48px
══════════════════════════════════════════════ */

button, .btn-primary, .btn-secondary,
.btn-start, .btn-next, .btn-back,
.btn-p, .btn-o, .btn-c, .btn-contact,
.btn-primary, .pc-cta, .cf-submit,
.modal-submit, .msub, .save-btn,
.lb-btn, .nav-cta, .bx-primary,
.bx-edit, .bx-del, .btn-sm,
.btn-sm-primary, .btn-sm-outline,
.dl-btn, .cb-accept, .cb-decline,
.dc-btn, .mc-download, .wa-block,
.modal-wa, .mwa, .lo-btn, .lo-btn,
.btn-retake, .btn-rt, .logout-btn,
.pt-logout, .ps-item, .sb-item,
a.btn-primary, a.btn-secondary,
a.btn-contact, a.btn-c, a.btn-o,
a.nav-cta, a.mc-download {
  min-height: var(--touch) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--fz-btn) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* Sidebar nav items - larger touch area */
.ps-item, .sb-item, .nav-item {
  min-height: 52px !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
}

/* ══════════════════════════════════════════════
   3. FORM ELEMENTS - readable and touchable
══════════════════════════════════════════════ */

input, textarea, select,
.fi, .fta, .fsl,
.login-input, .li,
.fg input, .fg textarea, .fg select,
.form-group input, .form-group textarea,
.form-group select, .msg-input {
  font-size: 17px !important;
  padding: 14px 16px !important;
  min-height: var(--touch) !important;
  color: #0F0F0F !important;
  line-height: 1.6 !important;
}

textarea, .fta, .msg-input {
  min-height: 80px !important;
}

label, .fl, .fg label,
.form-group label, .login-label, .ll {
  font-size: var(--fz-label) !important;
  margin-bottom: 8px !important;
  display: block !important;
  color: var(--mut) !important;
}

/* ══════════════════════════════════════════════
   4. NAVIGATION - mobile hamburger menu
══════════════════════════════════════════════ */

.topbar, #nav, .portal-top {
  height: 64px !important;
}

.nav-name, .tb-name, .topbar-name,
.topbar-logo, .login-name, .lb-logo,
.nav-brand .nav-name {
  font-size: 15px !important;
  color: #0F0F0F !important;
}

/* ══════════════════════════════════════════════
   5. CARDS - no text overflow, proper padding
══════════════════════════════════════════════ */

.program-card, .rec-card, .rc,
.session-card, .material-card,
.about-fact, .tcard, .stat-card,
.stat-box, .jstep, .contact-method,
.milestone, .ns-item, .task-item,
.welcome-banner, .dl-card,
.account-card, .dash-card {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* ══════════════════════════════════════════════
   6. DESKTOP (≥1024px)
══════════════════════════════════════════════ */

@media (min-width: 1024px) {
  :root {
    --fz-body:  18px;
    --fz-small: 16px;
    --fz-label: 13px;
  }

  /* Two-column layouts stay two columns */
  .hero-inner        { grid-template-columns: 1fr 1fr !important; gap: 64px !important; }
  .about-inner       { grid-template-columns: 1fr 1fr !important; gap: 64px !important; }
  .contact-inner     { grid-template-columns: 1fr 1fr !important; gap: 64px !important; }
  .programs-grid     { grid-template-columns: repeat(3, 1fr) !important; }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .journey-steps     { grid-template-columns: repeat(4, 1fr) !important; }
  .admin-body        { flex-direction: row !important; }
  .portal-body       { flex-direction: row !important; }
  .sidebar, .portal-sidebar { display: flex !important; flex-direction: column !important; }

  /* Bigger text on desktop */
  p, li, .card-body, .rec-desc, .about-body,
  .section-sub, .contact-body, .opt-desc {
    font-size: 18px !important;
  }
}

/* ══════════════════════════════════════════════
   7. TABLET (768px – 1023px)
══════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-inner        { grid-template-columns: 1fr !important; text-align: center; }
  .hero-actions      { justify-content: center !important; }
  .about-inner       { grid-template-columns: 1fr !important; }
  .contact-inner     { grid-template-columns: 1fr !important; }
  .programs-grid     { grid-template-columns: 1fr 1fr !important; }
  .testimonials-grid { grid-template-columns: 1fr 1fr !important; }
  .journey-steps     { grid-template-columns: 1fr 1fr !important; }
  .journey-steps::before { display: none !important; }
  .stats-grid        { grid-template-columns: 1fr 1fr !important; }
  .footer-top        { grid-template-columns: 1fr 1fr !important; }
  .about-facts       { grid-template-columns: 1fr 1fr !important; }
  .fg2, .fg3         { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════
   8. MOBILE (≤767px) - most important
══════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Typography scales down slightly but stays readable */
  :root {
    --fz-hero:  clamp(32px, 10vw, 44px);
    --fz-h1:    clamp(24px, 7vw, 32px);
    --fz-h2:    clamp(20px, 6vw, 26px);
    --fz-h3:    clamp(18px, 5vw, 22px);
    --fz-body:  17px;
    --fz-small: 15px;
    --fz-label: 13px;
  }

  body { font-size: 17px !important; }

  p, li, .card-body, .rec-desc, .about-body,
  .section-sub, .contact-body, .opt-desc,
  .sc-desc, .mc-desc, .msg-bubble {
    font-size: 17px !important;
  }

  /* Single column everything */
  .hero-inner, .about-inner, .contact-inner,
  .programs-grid, .testimonials-grid,
  .journey-steps, .dash-grid,
  .account-grid, .materials-grid,
  .footer-top, .about-facts,
  .fg2, .fg3, .stats-row,
  .stats-grid { grid-template-columns: 1fr !important; }

  /* Stack actions */
  .hero-actions, .rec-actions, .ract,
  .not-sure, .ns, .si-actions,
  .rec-details, .rdet,
  .cb-actions, .tb-right { flex-direction: column !important; align-items: stretch !important; }

  /* Full width buttons on mobile */
  .btn-primary, .btn-secondary, .btn-p,
  .btn-o, .btn-c, .btn-contact,
  .pc-cta, .cf-submit, .modal-submit,
  .msub, .lb-btn, .nav-cta,
  a.btn-primary, a.btn-secondary,
  a.btn-c, a.btn-contact {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
  }

  /* Hide desktop nav links, show burger */
  .nav-links { display: none !important; }
  .nav-burger, .pt-menu-btn { display: flex !important; }

  /* Topbar */
  .topbar, #nav, .portal-top { padding: 0 16px !important; }

  /* Journey steps - 2 col on mobile */
  .journey-steps { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .journey-steps::before { display: none !important; }

  /* Stats row - 3 across on mobile, smaller */
  .stats-row, .i-stats, .istat {
    grid-template-columns: repeat(3, 1fr) !important;
    flex-direction: row !important;
  }
  .stat, .hero-stat { padding: 12px 8px !important; border-right: 1px solid var(--bdr) !important; }
  .stat:last-child { border-right: none !important; }
  .stat-n, .sn, .hs-n { font-size: 26px !important; }
  .stat-l, .sl, .hs-l,
  .hero-stat .hs-l,
  .i-stats .stat-l {
    font-size: 13px !important;
    color: #0F0F0F !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    opacity: 1 !important;
  }

  /* Cards - full padding */
  .program-card, .rec-card, .rc,
  .session-card { padding: 20px 16px !important; }

  /* Sidebar hidden on mobile - portal */
  .portal-sidebar { transform: translateX(-100%) !important; }
  .portal-sidebar.open { transform: translateX(0) !important; }

  /* Admin sidebar hidden */
  .sidebar { display: none !important; }

  /* Admin main full width */
  .main { padding: 16px !important; }

  /* Modal full screen on mobile */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal, .lb { border-radius: 0 !important; max-width: 100% !important; padding: 28px 20px !important; max-height: 92vh !important; overflow-y: auto !important; }

  /* Corner accents off */
  .c-tl, .c-br, .corner-tl, .corner-br,
  .ctlbr, .cbrbr, .intro-corner-tl,
  .intro-corner-br, .br-tl, .br-br { display: none !important; }

  /* Photo frame full width */
  .hero-photo { max-width: 280px !important; margin: 0 auto !important; }

  /* Section padding tighter on mobile */
  .section { padding: 48px 0 !important; }

  /* Footer bottom stacked */
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .footer-legal { justify-content: center !important; }

  /* Program tabs full width */
  .program-tabs { max-width: 100% !important; }

  /* Session card actions stacked */
  .sc-actions { flex-wrap: wrap !important; gap: 8px !important; }
  .btn-sm { min-width: 120px !important; }

  /* Q&A nav buttons full width */
  .q-nav, .qnav { flex-direction: column-reverse !important; gap: 10px !important; }
  .btn-next, .btn-back, .btn-bk, .btn-nx { width: 100% !important; }

  /* Result card journey path wraps */
  .journey-path, .jpath { flex-wrap: wrap !important; gap: 8px !important; }

  /* Cookie banner stacked */
  #cookie-banner { flex-direction: column !important; align-items: flex-start !important; padding: 16px !important; }
  .cb-actions { width: 100% !important; }
  .cb-accept, .cb-decline { flex: 1 !important; }

  /* WhatsApp contact method full width */
  .contact-method { width: 100% !important; }

  /* Messages compose */
  .msg-compose { flex-direction: column !important; }
  .msg-send { width: 100% !important; height: var(--touch) !important; }

  /* Hide topbar username text to save space */
  .pt-username, .topbar-tag, .tb-tag { display: none !important; }

  /* Legal pages */
  .doc-table, .cookie-table, .service-table { font-size: 15px !important; }
  .page { padding-top: 80px !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* ══════════════════════════════════════════════
   9. SMALL MOBILE (≤380px)
══════════════════════════════════════════════ */

@media (max-width: 380px) {
  :root {
    --fz-hero: 30px;
    --fz-h1:   22px;
    --fz-h2:   18px;
    --fz-body: 16px;
  }

  .hero-h, .i-h, .ih { font-size: 30px !important; letter-spacing: -0.5px !important; }
  .hero-actions { gap: 10px !important; }
  .i-stats, .istat { display: none !important; } /* hide stats on very small screens */
}

/* ══════════════════════════════════════════════
   10. ACCESSIBILITY
══════════════════════════════════════════════ */

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

/* Focus visible - keyboard navigation */
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #E8603C !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════
   OVERFLOW & TEXT CONTAINMENT - prevents text
   spilling outside boxes on any screen size
══════════════════════════════════════════════ */

/* Global overflow protection */
*  { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; }

/* All text containers - never overflow */
h1,h2,h3,h4,h5,h6,p,li,span,div,
.section-h, .panel-title, .ph-title, .page-h,
.rec-tier-name, .wb-greeting, .pc-name,
.si-title, .sc-title, .mc-title,
.milestone-title, .about-h, .contact-h,
.hero-h, .login-h, .lb-h {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* All cards and containers */
.program-card, .account-card, .session-card,
.material-card, .about-fact, .tcard,
.stat-card, .stat-box, .jstep,
.contact-method, .milestone, .ns-item,
.task-item, .welcome-banner, .dl-card,
.dash-card, .session-item, .fs,
.add-form, .ib, .info-box,
.rec-card, .not-sure, .journey,
.modal, .lb, .login-box,
.hero-stat, .i-stats .stat {
  overflow: hidden !important;
  min-width: 0 !important;
  word-break: break-word !important;
}

/* Prevent table overflow on mobile */
.client-table-wrap, .doc-table,
.service-table, .cookie-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Nav bar - prevent items overflowing */
.nav-inner, .portal-top, .topbar {
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Flex children - prevent overflow */
.hero-inner, .about-inner, .contact-inner,
.portal-body, .admin-body, .dash-grid,
.account-grid, .stats-row, .stats-grid,
.journey-steps, .programs-grid,
.testimonials-grid, .footer-top {
  min-width: 0 !important;
}
.hero-inner > *, .about-inner > *,
.contact-inner > *, .dash-grid > *,
.account-grid > * {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

/* Input fields - never overflow container */
input, textarea, select {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ══════════════════════════════════════════════
   DESKTOP SPECIFIC - 1024px+
   Ensure nothing overflows on large screens
══════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .container { max-width: 1140px; margin: 0 auto; }
  .section-sub, .panel-sub, .ph-sub { max-width: 580px; }
  .hero-h { font-size: clamp(38px, 5vw, 72px) !important; }
  .section-h { font-size: clamp(28px, 3.5vw, 52px) !important; }
}

/* ══════════════════════════════════════════════
   MOBILE SPECIFIC - ensure nothing overflows
══════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Prevent horizontal scroll on body */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* All sections full width */
  .section, .page { padding-left: 16px !important; padding-right: 16px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Text sizes - safe minimums on small screens */
  h1, .hero-h, .page-h, .panel-title { font-size: clamp(24px, 7vw, 36px) !important; }
  h2, .section-h, .about-h, .contact-h { font-size: clamp(20px, 6vw, 28px) !important; }
  h3, .pc-name, .si-title, .mc-title { font-size: clamp(17px, 5vw, 22px) !important; }
  p, li, .section-sub, .panel-sub { font-size: 16px !important; }

  /* Prices - readable on mobile */
  .pc-price, .rec-dv, .jstep-price { font-size: 20px !important; }

  /* Cards - full width with proper padding */
  .program-card, .session-card, .material-card,
  .account-card, .tcard, .about-fact {
    padding: 18px 16px !important;
    width: 100% !important;
  }

  /* Buttons - always full width, tall enough to tap */
  .btn-primary, .btn-secondary, .pc-cta,
  .cf-submit, .modal-submit, .lb-btn,
  .save-btn, a.btn-primary, a.btn-secondary {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 14px !important;
    padding: 14px 20px !important;
  }

  /* Form labels and inputs */
  .fg label, .fl, .form-group label, .ll { font-size: 13px !important; }
  input, textarea, select, .fi, .fta { font-size: 16px !important; min-height: 50px !important; }

  /* Footer */
  .footer-top { gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }

  /* Stats - 3 across but smaller */
  .hero-stats, .i-stats { display: flex !important; }
  .hero-stat, .i-stats .stat { flex: 1 !important; padding: 12px 8px !important; }
  .hs-n, .stat-n { font-size: 22px !important; }
  .hs-l, .stat-l { font-size: 12px !important; color: #0F0F0F !important; }

  /* Journey steps - 2 columns */
  .journey-steps { grid-template-columns: 1fr 1fr !important; }

  /* Portal sidebar off-canvas */
  .portal-sidebar { position: fixed !important; z-index: 200 !important; height: 100vh !important; }

  /* Hide decorative elements that cause overflow */
  .corner-tl, .corner-br, .hero-streak, .hero-streak2 { display: none !important; }

  /* Session numbers small on mobile */
  .sc-number { width: 36px !important; height: 36px !important; font-size: 13px !important; }

  /* Account grid single column */
  .account-grid { grid-template-columns: 1fr !important; }
  #upgrade-cards { grid-template-columns: 1fr !important; }
}