/* ============================================================
   ResumeWand – Component & Page Styles  (import AFTER theme.css)
   ============================================================ */

/* ------------------------------------------------------------
   Global CSS variables (layout + stacking order)
------------------------------------------------------------ */
:root{
  /* Heights (tweak if your design changes) */
  --promo-height: 40px;     /* actual promo banner height   */
  --nav-height:   60px;     /* actual main-nav height       */

  /* Z-index ladder (promo > nav > price bar > rest) */
  --z-promo:      9999;
  --z-nav:        9998;
  --z-price:      9997;

  /* Default container width */
  --container:    960px;

  /* Brand colours (fallbacks if theme.css missing)          */
  --brand-600:    #0d9488;
  --gray-900:     #111827;
  --gray-700:     #374151;
  --gray-300:     #d1d5db;
  --success:      #15803d;

  /* Spacing scale shims (if theme utilities absent)        */
  --space-xs: .4rem;
  --space-sm: .8rem;
  --space-md: 1.2rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

/* ------------------------------------------------------------
   Universal bottom padding so content isn’t hidden by price bar
------------------------------------------------------------ */
body{
  padding-bottom: calc(var(--promo-height) + var(--nav-height) + 60px);
}

/* ------------------------------------------------------------
   Global layout helpers
------------------------------------------------------------ */
.container{
  max-width:var(--container);
  margin:0 auto;
}

/* ------------------------------------------------------------
   Promo banner  (always on top)
------------------------------------------------------------ */
.promo-banner{
  position:sticky;
  top:0;
  z-index:var(--z-promo);
  background:var(--gray-900);
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-xs);
  font-weight:700;
  padding:.6rem 1rem;
  border-bottom:2px solid #fff;
  box-shadow:0 2px 6px rgb(0 0 0 /.2);
  font-size:clamp(.9rem,2.5vw,1.1rem);
}
.promo-banner .promo-cta{margin-left:.5rem;}
.promo-banner .promo-cta,
.mini-cta{comp:dummy;}           /* ◂ keeps older HTML classes alive */
.promo-banner .promo-cta{ @apply .btn .btn--accent; }
.mini-cta{ @apply .btn .btn--accent; }

/* ------------------------------------------------------------
   Main navigation  (sticky under promo)
------------------------------------------------------------ */
nav.main-nav{
  background:var(--gray-900);
}
nav.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
nav.main-nav li{margin:.4rem;}
.nav-link{
  @apply .btn .btn--secondary;
  padding:.5rem 1rem;
  border-radius:.4rem;
}
.nav-link:hover{
  background:var(--gray-700);
  color:#fff;
}

/* Sticky offset so it sits right below promo banner */
.navbar,
.navbar-sticky{          /* keep both class names live */
  position:sticky;
  top:var(--promo-height);
  z-index:var(--z-nav);
  height:var(--nav-height);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}

/* ------------------------------------------------------------
   Hero compact
------------------------------------------------------------ */
.hero--compact{
  background:linear-gradient(135deg,#0d1b2a 0%,#1b263b 50%,#0d1b2a 100%);
  color:#fff;
  text-align:center;
  padding:var(--space-xl) var(--space-sm) var(--space-lg);
}
.hero-inner--center{max-width:800px;margin:0 auto;}
.hero-title{margin-bottom:.3em;}
.hero-desc{opacity:.9;}

/* ------------------------------------------------------------
   CTA row
------------------------------------------------------------ */
.cta-row{display:flex;gap:var(--space-xs);flex-wrap:wrap;justify-content:center;}
.cta-button{ @apply .btn .btn--primary; }
.cta-secondary{ @apply .btn .btn--secondary; }

/* ------------------------------------------------------------
   Packages grid
------------------------------------------------------------ */
.packages{background:#fff;text-align:center;}
.package-heading-box p{max-width:600px;margin:0 auto var(--space-md);}
.package-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  justify-content:center;
}
.card{
  @apply .card-base;
  width:300px;
  text-align:left;
  padding:var(--space-md);
}
.card h3{
  background:var(--brand-600);
  color:#fff;
  text-align:center;
  margin:-var(--space-md) -var(--space-md) var(--space-sm);
  padding:.65rem 1rem;
  border-radius:1rem 1rem 0 0;
}
.pay-btn{ @apply .btn .btn--success; }
.btn--success{
  background:var(--success);
  color:#fff;
}
.btn--success:hover{background:#0e9f6e;}

/* ------------------------------------------------------------
   How-it-works steps
------------------------------------------------------------ */
.how-it-works{background:#f8f9fc;text-align:center;}
.steps-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  justify-content:center;
}
.step-box{
  @apply .card-base;
  flex:1 1 170px;
  padding:var(--space-md) var(--space-sm);
}
.step-number{
  display:inline-grid;
  place-content:center;
  width:46px;height:46px;
  margin:0 auto var(--space-xs);
  border-radius:50%;
  background:var(--brand-600);
  color:#fff;
  font-weight:700;
}

/* ------------------------------------------------------------
   Outcome strip (stats bar)
------------------------------------------------------------ */
.outcome-strip{
  display:flex;
  justify-content:center;
  gap:var(--space-lg);
  background:#eef2f9;
  padding:var(--space-sm);
  flex-wrap:wrap;
}
.outcome{text-align:center;font-size:.95rem;}
.outcome .num{font-size:1.8rem;font-weight:700;color:var(--brand-600);}

/* ------------------------------------------------------------
   Overview / persona cards
------------------------------------------------------------ */
.overview-container{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  justify-content:center;
}
.overview-card{
  @apply .card-base;
  width:300px;
  text-align:center;
  padding:var(--space-md);
}
.overview-card .icon{width:38px;height:38px;margin-bottom:.75rem;}
.overview-card .industry-buttons{margin-top:var(--space-sm);display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;}
.overview-card .industry-buttons a{ @apply .btn .btn--accent; padding:.6rem 1.2rem;}

/* ------------------------------------------------------------
   Testimonials (carousel still powered by carousel.js)
------------------------------------------------------------ */
.testimonials{background:#f2f6fa;text-align:center;}
.testimonial-carousel{max-width:800px;margin:0 auto;}
.testimonial{
  display:none;
  @apply .card-base;
  border-left:6px solid var(--brand-600);
  font-style:italic;
  padding:var(--space-md);
}
.testimonial.active{display:block;}

/* ------------------------------------------------------------
   Contact form
------------------------------------------------------------ */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  padding:.7rem 1rem;
  font-size:1rem;
  border-radius:.5rem;
  border:1px solid var(--gray-300);
  box-sizing:border-box;
  font-family:inherit;
}
.contact-form textarea{resize:vertical;}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:none;
  border-color:var(--brand-600);
  box-shadow:0 0 0 3px rgb(20 184 166 /.25);
}

/* Alternate contact box */
.contact-alt-box{
  @apply .card-base;
  background:#f0f4f8;
  margin-top:var(--space-lg);
}

/* ------------------------------------------------------------
   Floating price bar (always visible bottom full-width)
------------------------------------------------------------ */
#floating-price-bar{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  z-index:var(--z-price);
  background:var(--brand-600);
  padding:.5rem 0;
  display:flex;
  gap:.5rem;
  justify-content:center;
  box-shadow:0 -2px 4px rgba(0,0,0,.08);
}

#floating-price-bar .price-btn{
  color:#fff;
  font-weight:600;
  padding:.6rem 1.2rem;
  border-radius:6px;
  background:rgba(255,255,255,.15);
  text-decoration:none;
  transition:background .2s;
}
#floating-price-bar .price-btn:hover{
  background:rgba(255,255,255,.25);
}
#floating-price-bar .price-btn.gold{
  background:#facc15;
  color:#111827;
}
#floating-price-bar .price-btn.gold:hover{
  background:#fbbf24;
}

/* ------------------------------------------------------------
   Legacy floating-pricing / sticky-selector (kept for backward compatibility)
------------------------------------------------------------ */
.floating-pricing,
.sticky-selector{
  position:fixed;
  bottom:1rem;
  right:1rem;
  z-index:var(--z-price);
  background:var(--brand-600);
  color:#fff;
  display:flex;
  gap:.5rem;
  align-items:center;
  padding:.6rem 1rem;
  border-radius:.5rem;
  box-shadow:0 4px 12px rgb(0 0 0 /.25);
  transform:translateY(120%);
  transition:transform .25s;
  font-size:.9rem;
}
.floating-pricing.show,
.sticky-selector.show{transform:none;}
.floating-pricing .btn-price,
.sticky-selector a{
  @apply .btn .btn--accent;
  padding:.4rem .8rem;
}
@media (max-width:480px){
  .floating-pricing,
  .sticky-selector{
    left:.5rem;
    right:.5rem;
    flex-wrap:wrap;
    justify-content:center;
  }
}

/* ------------------------------------------------------------
   Modal (lead capture)
------------------------------------------------------------ */
.modal{display:none;position:fixed;inset:0;background:rgb(0 0 0 /.6);z-index:999;place-items:center;}
.modal.open{display:grid;}
.modal-content{ @apply .card-base; padding:var(--space-lg) var(--space-md); max-width:420px;width:90%;position:relative;text-align:center;}
.modal-content .close{position:absolute;top:1rem;right:1rem;cursor:pointer;font-size:1.4rem;color:var(--gray-700);}

/* ------------------------------------------------------------
   Footer
------------------------------------------------------------ */
footer{
  text-align:center;
  padding:var(--space-md);
  background:#e8ecef;
  font-size:.9rem;
  color:var(--gray-700);
}

/* ------------------------------------------------------------
   Responsive helpers (legacy class overrides)
------------------------------------------------------------ */
@media (max-width:900px){
  .package-grid,
  .overview-container,
  nav.main-nav ul{flex-direction:column;align-items:center;}
  .card,
  .overview-card{width:90%;}
}

/* ==========================================================
   2025-05-14  ▸  Mobile / Tablet polish
   ========================================================== */
@media (max-width:768px){                /* phones + small tabs  */

  /* ----------  ❶ Promo + Nav compact  ---------- */
  :root{
    --promo-height:32px;                 /* was 40px  */
    --nav-height:48px;                   /* was 60px  */
  }
  .promo-banner{font-size:.85rem;padding:.4rem .6rem;}
  nav.main-nav ul{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:.2rem .4rem;
  }
  nav.main-nav li{
    flex:0 0 auto;
    scroll-snap-align:start;
  }
  .nav-link{
    padding:.45rem .9rem;
    font-size:.85rem;
    line-height:1.2rem;
    white-space:nowrap;
  }

  /* ----------  ❷ Keep page footers clear of bars  ---------- */
  body{
    padding-bottom:calc(140px + env(safe-area-inset-bottom));
  }

  /* ----------  ❸ Universal floating-price bar  ---------- */
  .floating-pricing,
  .sticky-selector{
    left:0;
    right:0;
    bottom:0;
    transform:none !important;
    justify-content:center;
    flex-wrap:wrap;
    gap:.5rem;
    padding:.7rem .6rem;
    font-size:.95rem;
  }
  .floating-pricing .btn-price,
  .sticky-selector a{
    flex:1 1 30%;
    min-width:90px;
    text-align:center;
  }
  #floating-price-bar{
    flex-direction:column;
    gap:.4rem;
    padding:.8rem .6rem calc(.8rem + env(safe-area-inset-bottom));
  }
  #floating-price-bar .price-btn{width:100%;font-size:.95rem;}

}

/* ------------------------------------------------------------
   Mobile slide-in navigation  (≤ 900 px)              2025-05-19
------------------------------------------------------------ */
@media (max-width:900px){
  #menuToggle{
    position:fixed;
    /* ❶ pin to the exact top edge */
    top:0;
    /* ❷ pull it down half the promo-height so it sits centred */
    transform:translateY(calc(var(--promo-height)/2 - 50%));
    right:12px;
    z-index:calc(var(--z-promo) + 1);   /* always above the banner */
    background:var(--accent-gold);
    color:var(--gray-900);
    border:none;border-radius:.55rem;
    font-size:2rem;line-height:1;
    padding:.35rem .8rem;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    cursor:pointer;
    transition:transform .15s;
  }
  #menuToggle:active{transform:translateY(calc(var(--promo-height)/2 - 50%)) scale(.95);}
}

  /* ── 2.  Backdrop (tap to close) ─────────────────────────── */
  #menuBackdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:calc(var(--z-nav) + 1);    /* ← also above sticky nav  */
    display:none;
  }
  #menuBackdrop.show{display:block;}

  /* ── 3.  Slide-in <ul> menu ──────────────────────────────── */
  nav.main-nav ul{
    flex-direction:column;
    align-items:center;
    gap:1.25rem;
    background:var(--gray-900);
    position:fixed;
    top:var(--promo-height);
    right:-260px;
    width:240px;
    height:100vh;
    padding-top:70px;
    margin:0;
    transition:right .3s ease;
    box-shadow:-2px 0 8px rgba(0,0,0,.25);
  }
  nav.main-nav ul.open{right:0;}

  nav.main-nav li{margin:0;width:100%;text-align:center;}
  .nav-link{
    display:block;
    width:100%;
    padding:.9rem 1rem;
    border-radius:.35rem;
  }
/* -----------------------------------------------
   Nothing below this line – keep at file bottom
------------------------------------------------ */