/* ============================================================
   HALOSUN ENERGY SYSTEMS — PM SURYA GHAR PAGE STYLES
   Synchronized with shared tokens (styles.css & features.css)
============================================================ */

.pm-nav-active {
  color: var(--ember) !important;
  font-weight: 600;
}

/* ---------- HERO SECTION ----------
   The hero markup now reuses the homepage's own .hero / .hero-content /
   .hero-brand / .hero-badge classes directly (dark background, 180px
   centered logo, white type — see styles.css) so the two pages match
   exactly instead of drifting. .pm-hero only carries the couple of
   things unique to this page: the secondary trust-line under the CTAs
   and the dimmed second line of the H1. Both are re-tinted for the
   dark background instead of the old light-theme colors. */
.pm-hero h1 span {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.pm-hero-note {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.pm-hero-note span {
  color: var(--sun);
  font-weight: 700;
  margin-right: 6px;
}

/* ---------- STEP PROCESS / DARK TIMELINE SECTION FIXES ---------- */

.pm-journey-section {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  padding: 80px 0;
}

.pm-journey-section h2 {
  color: #fff;
  margin-bottom: 0.3em;
}

.pm-journey-section .section-sub {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 40px;
}

.pm-timeline {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 900px;
  margin-top: 36px;
}

.pm-step-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-dark);
}

.pm-step-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Fix for broken stretched white box around step numbers */
.pm-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 4px 12px;
  background: rgba(217, 169, 78, 0.1);
  border: 1px solid var(--sun);
  border-radius: 999px;
  color: var(--sun);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.pm-step-body h3 {
  color: #ffffff !important;
  font-size: 1.2rem;
  margin: 0 0 6px 0;
  font-family: var(--font-display);
}

/* Fix for unreadable dark text in dark section */
.pm-step-body p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 10px 0;
}

.pm-step-actor {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
}

.pm-step-actor strong {
  color: var(--sun);
  font-weight: 600;
}

/* ---------- FAQ ACCORDION ----------
   Mirrors the sitewide .faq-item / .faq-question / .faq-icon /
   .faq-answer pattern from styles.css (card, "+" icon that rotates
   into a close mark, animated grid-template-rows reveal) so this
   page's FAQ matches the look of the main Solar FAQ page. Colors
   are re-tinted for this section's dark (--ink) background instead
   of reusing the light-theme classes directly. Namespaced under
   .pm-faq-* and wired up by its own scoped script further down the
   page, so it can't collide with any FAQ script already used
   elsewhere on the site. */
.pm-faq-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 20px;
}

.pm-faq-toggle-all {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  padding: 9px 15px;
  border-radius: 999px;
  font: 600 0.82rem var(--font-body);
  cursor: pointer;
  transition: 0.2s ease;
}

.pm-faq-toggle-all:hover {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--ink);
}

.pm-faq-toggle-collapse { display: none; }
.pm-faq-toggle-all.all-open .pm-faq-toggle-expand { display: none; }
.pm-faq-toggle-all.all-open .pm-faq-toggle-collapse { display: inline; }

.pm-faq-list {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin-top: 16px;
}

.pm-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  overflow: hidden;
}

.pm-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  background: none;
  border: 0;
  padding: 21px 22px;
  color: #fff;
  font: 600 1rem var(--font-display);
  cursor: pointer;
}

.pm-faq-question .pm-faq-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--sun);
  transition: transform 0.2s ease, background 0.2s ease;
}

.pm-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.pm-faq-answer-inner {
  overflow: hidden;
  padding: 0 22px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.94rem;
  line-height: 1.7;
}

.pm-faq-item.open .pm-faq-answer { grid-template-rows: 1fr; }
.pm-faq-item.open .pm-faq-answer-inner { padding-bottom: 21px; }
.pm-faq-item.open .pm-faq-icon {
  transform: rotate(45deg);
  background: rgba(217, 169, 78, 0.1);
}

@media (max-width: 680px) {
  .pm-faq-toggle-row { justify-content: flex-start; }
}

/* ---------- DISCLAIMER / NOTE CALLOUT ----------
   Sits directly under the subsidy grid and the timeline grid. Previously
   had no margin-top of its own, so it rendered flush against the card
   grid above it (especially cramped once Hindi text wraps to two lines
   and the cards grow taller). Mirrors the sitewide .faq-note callout
   (see styles.css) — sun-tinted left border, soft tinted background,
   rounded corner on the open side — so this note matches the visual
   language used for callouts elsewhere on the site instead of being
   plain unstyled text. */
.pm-disclaimer {
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 3px solid var(--sun);
  background: rgba(217, 169, 78, 0.07);
  border-radius: 0 10px 10px 0;
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 1.7;
}

.pm-disclaimer strong {
  color: var(--ink);
  font-weight: 700;
  margin-right: 4px;
}

/* ---------- CARDS & GRIDS (SHARED DESIGN TOKENS) ---------- */
.pm-subsidy-grid,
.pm-docs,
.pm-time-grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.pm-subsidy-grid,
.pm-docs {
  grid-template-columns: repeat(3, 1fr);
}

.pm-time-grid {
  grid-template-columns: repeat(5, 1fr);
}

.pm-money-card,
.pm-doc,
.pm-time-card {
  padding: 28px 24px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--slate);
  box-shadow: 0 8px 30px rgba(15, 32, 56, 0.045);
}

.pm-money-card strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  color: var(--ember);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.pm-money-card p,
.pm-doc p,
.pm-time-card p {
  color: var(--mist);
  font-size: 0.94rem;
  margin: 0;
}

/* Featured Border Accent */
.pm-money-featured,
.pm-time-featured {
  border: 1px solid var(--sun) !important;
  background: rgba(217, 169, 78, 0.06) !important;
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 900px) {
  .pm-subsidy-grid,
  .pm-docs { grid-template-columns: repeat(2, 1fr); }
  .pm-time-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .pm-subsidy-grid,
  .pm-docs,
  .pm-time-grid { grid-template-columns: 1fr; }
}