/* ════════════════════════════════════════════════════════════
   Pipalbot Cooperative — Inner page shell
   Reuses gj-* components from home.css; adds page hero + breadcrumb.
════════════════════════════════════════════════════════════ */
.gj-page { font-family: 'Poppins', 'Mukta', sans-serif; color: var(--gj-text, #333); }

/* Page hero / banner */
.gj-page-hero {
  position: relative;
  background: linear-gradient(120deg, var(--gj-primary-dk, #004D2D) 0%, var(--gj-primary, #006B3F) 100%);
  color: #fff;
  padding: 64px 0;
  text-align: center;
  background-size: cover;
  background-position: center;
}
.gj-page-hero.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0,77,45,.92), rgba(0,107,63,.78)); }
.gj-page-hero > .container { position: relative; z-index: 2; }
/* !important needed: style.css sets a global h1-h6 color with !important. */
.gj-page-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin: 0 0 10px; color: #fff !important; }
.gj-breadcrumb { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 14px; list-style: none; margin: 0; padding: 0; }
.gj-breadcrumb li { color: rgba(255,255,255,.8); }
.gj-breadcrumb a { color: var(--gj-highlight, #F4B400); text-decoration: none; }
.gj-breadcrumb a:hover { text-decoration: underline; }
.gj-breadcrumb .sep { opacity: .6; }

/* Prose block */
.gj-prose p { font-size: 16px; line-height: 1.8; color: #43514a; margin: 0 0 18px; }
.gj-prose h2, .gj-prose h3 { color: var(--gj-heading, #004D2D); margin: 28px 0 14px; }
.gj-prose ul { padding-left: 0; list-style: none; }
.gj-prose ul li { position: relative; padding: 6px 0 6px 28px; color: #43514a; }
.gj-prose ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; color: var(--gj-primary, #006B3F); font-size: 13px; }

/* Contact form */
.gj-form .form-control { border-radius: 10px; border: 1px solid var(--gj-border, #E5E7EB); padding: 13px 16px; font-size: 15px; }
.gj-form .form-control:focus { border-color: var(--gj-primary, #006B3F); box-shadow: 0 0 0 .2rem rgba(0,107,63,.12); }
.gj-form label { font-weight: 600; font-size: 14px; color: var(--gj-heading, #004D2D); margin-bottom: 6px; }
.gj-alert { border-radius: 10px; padding: 14px 18px; font-size: 14.5px; margin-bottom: 20px; }
.gj-alert-success { background: var(--gj-primary-lt, #E6F2EC); color: var(--gj-primary-dk, #004D2D); border: 1px solid #b9e0cb; }
.gj-alert-error { background: #fdecec; color: #a02020; border: 1px solid #f5c2c2; }

@media (max-width: 767px) { .gj-page-hero { padding: 44px 0; } }

/* ── Light CTA (on dark/primary cards) ─────────────────────── */
.gj-cta--light { background: #fff; color: var(--gj-primary-dk, #004D2D); }
.gj-cta--light:hover { background: var(--gj-highlight, #F4B400); color: #1f2937; }

/* ── Membership: numbered steps ────────────────────────────── */
.gj-steps { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.gj-step { display: flex; gap: 16px; align-items: flex-start; }
.gj-step-num {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--gj-primary, #006B3F), var(--gj-primary-dk, #004D2D));
  box-shadow: 0 6px 16px rgba(0,77,45,.22);
}

/* ── FAQ accordion (themes Bootstrap .accordion) ───────────── */
.gj-faq .accordion-item { border: 1px solid var(--gj-border, #E5E7EB); border-radius: 12px !important; margin-bottom: 12px; overflow: hidden; }
.gj-faq .accordion-button { font-weight: 600; color: var(--gj-heading, #004D2D); font-size: 16px; }
.gj-faq .accordion-button:not(.collapsed) { background: var(--gj-primary-lt, #E6F2EC); color: var(--gj-primary-dk, #004D2D); box-shadow: none; }
.gj-faq .accordion-button:focus { border-color: transparent; box-shadow: 0 0 0 .2rem rgba(0,107,63,.14); }
.gj-faq .accordion-body { color: #43514a; line-height: 1.75; font-size: 15.5px; }

/* ── Office / branch info list (no checkmark bullets) ──────── */
.gj-office-list { list-style: none; margin: 0; padding: 0; }
.gj-office-list li { position: relative; padding: 8px 0; font-size: 15px; line-height: 1.55; color: #43514a; }
.gj-office-list li i { color: var(--gj-primary, #006B3F); width: 20px; text-align: center; margin-right: 8px; }
.gj-office-list a { color: inherit; text-decoration: none; }
.gj-office-list a:hover { color: var(--gj-primary, #006B3F); text-decoration: underline; }

/* ── Inline badge (e.g. "Head Office") ────────────────────── */
.gj-badge { display: inline-block; margin-left: 10px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--gj-primary-dk, #004D2D); background: var(--gj-primary-lt, #E6F2EC); border-radius: 999px; vertical-align: middle; }

/* ── Career: openings + empty state ───────────────────────── */
.gj-job { border: 1px solid var(--gj-border, #E5E7EB); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; background: #fff; }
.gj-job h3 { margin: 0 0 6px; font-size: 18px; color: var(--gj-heading, #004D2D); }
.gj-job .gj-job-meta { font-size: 13.5px; color: #6b7280; margin-bottom: 10px; }
.gj-empty { text-align: center; padding: 44px 24px; border: 1px dashed var(--gj-border, #E5E7EB); border-radius: 16px; background: #fafbfa; }
.gj-empty i { font-size: 40px; color: var(--gj-primary, #006B3F); opacity: .5; margin-bottom: 14px; }

/* ── CSR pillars ──────────────────────────────────────────── */
.gj-pillar { text-align: center; padding: 28px 22px; background: #fff; border: 1px solid var(--gj-border, #E5E7EB); border-radius: 16px; height: 100%; transition: transform .22s, box-shadow .22s; }
.gj-pillar:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,77,45,.10); }
.gj-pillar .gj-pillar-ic { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--gj-primary, #006B3F), var(--gj-primary-dk, #004D2D)); }
.gj-pillar h3 { font-size: 17px; color: var(--gj-heading, #004D2D); margin: 0 0 8px; }
.gj-pillar p { font-size: 14.5px; color: #43514a; line-height: 1.65; margin: 0; }

/* ── HTML sitemap ─────────────────────────────────────────── */
.gj-sitemap { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.gj-sitemap > li { break-inside: avoid; margin-bottom: 10px; }
.gj-sitemap a { color: #43514a; text-decoration: none; }
.gj-sitemap a:hover { color: var(--gj-primary, #006B3F); text-decoration: underline; }
.gj-sitemap ul { list-style: none; margin: 6px 0 0; padding-left: 18px; }
.gj-sitemap-col h2 { font-size: 20px; color: var(--gj-heading, #004D2D); margin: 0 0 14px; }
@media (max-width: 575px) { .gj-sitemap { columns: 1; } }