/* ============================================================
   doublesixOS - brochure.css
   Styles for the per business type sales brochures at /brochure/<type>.

   These pages are opened from a WhatsApp link on a phone, so everything
   is phone first: one column, big tap targets, short screens of content.
   They lean on the design tokens from css/style.css (loaded before this
   file on every brochure page), so light and dark themes and the Urdu
   right to left layout all keep working without extra rules here.

   The print rules at the bottom turn the same page into a clean one page
   A4 handout: the sticky header, buttons and print hint disappear, and
   spacing tightens so the whole pitch fits a single sheet.
   ============================================================ */

.bro-body { background: var(--bg-base); }

/* ── Sticky mini header: logo home link + the EN/اردو switch ── */
.bro-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem max(1rem, env(safe-area-inset-left));
  background: var(--bg-overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
}
/* The logo is the SITE logo: the same .navbar-logo / .logo-mark / .logo-text
   markup and classes the navbar uses, so it stays in step with the real brand
   automatically. It is only scaled down a little for this slim sticky bar. */
.bro-top .logo-mark { font-size: 1.6rem; }
.bro-top .logo-name { font-size: 1rem; }

/* lang.js drops the .lang-toggle into this slot, same as the site navbar. */
.bro-top .nav-toggle-group { display: inline-flex; align-items: center; }

/* ── Page column ── */
.bro {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 1.1rem 2.5rem;
}

/* ── Hero ── */
.bro-hero { text-align: center; padding: 2.2rem 0 1.6rem; }
.bro-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  background: rgba(var(--brand-primary-rgb), 0.08);
  border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
  color: var(--text-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
}
.bro-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 6.5vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0.9rem 0 0.6rem;
  color: var(--text-primary);
}
html[lang="ur"] .bro-hero h1 { line-height: 1.9; letter-spacing: 0; }
.bro-sub {
  color: var(--text-secondary);
  font-size: 1.02rem;
  margin: 0 auto 1.3rem;
  max-width: 540px;
}

/* ── CTA buttons (hero and bottom) ── */
.bro-cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: stretch;
  max-width: 380px;
  margin: 0 auto;
}
.bro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.4rem;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
html[lang="ur"] .bro-btn { font-size: 1.05rem; line-height: 1.8; }
.bro-btn-primary {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.bro-btn-primary:hover { background: var(--brand-primary-dark); transform: translateY(-1px); }
.bro-btn-ghost {
  background: var(--bg-surface);
  color: var(--text-accent);
  border: 1.5px solid rgba(var(--brand-primary-rgb), 0.35);
}
.bro-btn-ghost:hover { border-color: var(--brand-primary); transform: translateY(-1px); }
.bro-trial-note {
  margin-top: 0.8rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* ── Sections ── */
.bro-sec { padding: 1.4rem 0 0.4rem; }
.bro-sec h2,
.bro-band h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  color: var(--text-primary);
  text-align: center;
}
html[lang="ur"] .bro-sec h2,
html[lang="ur"] .bro-band h2 { line-height: 1.9; letter-spacing: 0; }

/* ── Pain and fix cards ── */
.bro-pain {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  margin-bottom: 0.7rem;
  box-shadow: var(--shadow-xs);
}
.bro-pain p {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
}
html[lang="ur"] .bro-pain p { line-height: 1.9; }
.bro-pain p + p { margin-top: 0.55rem; }
.bro-pain i {
  flex: 0 0 auto;
  margin-top: 0.22rem;
  font-size: 0.8rem;
}
html[lang="ur"] .bro-pain i { margin-top: 0.55rem; }
.bro-pain-x { color: var(--text-secondary); }
.bro-pain-x i { color: var(--brand-danger); }
.bro-pain-check { color: var(--text-primary); font-weight: 600; }
.bro-pain-check i { color: var(--brand-success); }

/* ── Feature chips ── */
.bro-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.bro-feats li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  padding: 0.45rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}
html[lang="ur"] .bro-feats li { line-height: 1.8; font-size: 0.95rem; }
.bro-feats li i { color: var(--brand-success); font-size: 0.78rem; }

/* ── Bands: WhatsApp, Urdu proof, pricing ── */
.bro-band {
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.2rem;
  margin: 1.4rem 0 0;
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.bro-band p { margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--text-secondary); }
html[lang="ur"] .bro-band p { line-height: 1.9; }
.bro-band-wa { border-top: 3px solid #25D366; }
.bro-band-wa h2 i { color: #25D366; }
.bro-band-urdu { border-top: 3px solid var(--brand-primary); }
/* The Urdu proof line stays in Urdu in BOTH language modes: it is the proof. */
.bro-urdu-proof {
  font-family: var(--font-urdu);
  direction: rtl;
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--text-primary);
  margin-top: 0.5rem;
}
.bro-band-price { border-top: 3px solid var(--brand-primary); }
.bro-price-line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--text-primary);
}
html[lang="ur"] .bro-price-line { line-height: 1.9; }

/* ── Final CTA ── */
.bro-final { text-align: center; padding: 1.8rem 0 0.4rem; }
.bro-wa-line { margin-top: 1rem; font-size: 0.92rem; color: var(--text-secondary); }
.bro-wa-line a {
  color: var(--text-accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.bro-wa-line a:hover { text-decoration: underline; }

/* ── Print hint (screen only) ── */
.bro-print-hint {
  margin-top: 1.6rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.bro-print-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.bro-print-btn:hover { border-color: var(--brand-primary); color: var(--text-accent); }

/* ── Footer ── */
.bro-foot {
  border-top: 1px solid var(--border-light);
  margin-top: 1rem;
  padding: 1.2rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.bro-foot p { margin: 0.25rem 0; }
.bro-foot a { color: var(--text-accent); text-decoration: none; font-weight: 600; }
.bro-foot a:hover { text-decoration: underline; }
.bro-foot-sep { margin: 0 0.4rem; }

/* ── Wider screens: buttons side by side, a little more air ── */
@media (min-width: 560px) {
  .bro-cta-row { flex-direction: row; justify-content: center; max-width: none; }
  .bro-btn { min-width: 200px; }
  .bro-hero { padding-top: 3rem; }
}

/* ── Print: one clean A4 handout ── */
@media print {
  @page { size: A4; margin: 11mm 12mm; }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; color: #0A1628; }
  .bro-top, .bro-print-hint, .bro-cta-row, .bro-trial-note, .bro-final h2 { display: none !important; }
  .bro { max-width: none; padding: 0; }
  .bro-hero { padding: 0 0 4mm; }
  .bro-hero h1 { font-size: 20pt; margin: 2mm 0 1.5mm; }
  .bro-sub { font-size: 10.5pt; margin-bottom: 0; }
  .bro-sec { padding: 3mm 0 0; }
  .bro-sec h2, .bro-band h2 { font-size: 12.5pt; margin-bottom: 2.5mm; }
  .bro-pain { padding: 2mm 3mm; margin-bottom: 1.8mm; box-shadow: none; border: 1px solid #E2E8F5; break-inside: avoid; }
  .bro-pain p { font-size: 9pt; line-height: 1.4; }
  .bro-pain p + p { margin-top: 1mm; }
  .bro-feats { gap: 1.6mm; }
  .bro-feats li { padding: 1mm 2.5mm; font-size: 8.5pt; border: 1px solid #E2E8F5; }
  .bro-band { padding: 2.5mm 3mm; margin-top: 3mm; box-shadow: none; border: 1px solid #E2E8F5; break-inside: avoid; }
  .bro-band p { font-size: 9pt; }
  .bro-urdu-proof { font-size: 10pt; line-height: 1.9; }
  .bro-price-line { font-size: 11.5pt; }
  .bro-final { padding: 2mm 0 0; }
  .bro-wa-line { margin-top: 1mm; font-size: 10pt; }
  .bro-foot { margin-top: 2mm; padding: 2mm 0 0; font-size: 7.5pt; }
  .bro-foot a[href]:after { content: ""; }
}