/* Myhna Vistara | bhk-locality.css — styles for bhk-locality-template.php
   (3bhk-{location}.php / 4bhk-{location}.php / 3bhk.php / 4bhk.php)
   Matches the current index.html design system (see base.css tokens). */

.bhk-page{ max-width: 960px; margin: 0 auto; padding: 140px 24px 80px; }

/* Used by price-list.php, whose <main> still carries full-bleed pricing
   sections (price bar, configurations, inclusions, payment plans) and so
   cannot take .bhk-page's 960px cap. Gives the crumb and hero the same centred
   column and the same top clearance for the fixed nav.

   The near-* pages used this too until their homepage-cloned sections were
   removed; with nothing full-bleed left, their <main> just takes .bhk-page
   like the BHK pages, which also aligns the sections below the hero. Those
   were running edge-to-edge because only .bhk-faq and .bhk-related had a
   fallback rule, not .bhk-summary or .bhk-distance. */
.bhk-hero-wrap{ max-width: 960px; margin: 0 auto; padding: 140px 24px 0; }


/* Sits under the hero CTA on the near-* pages: the project's street address,
   the NAP line those pages are built to rank for. */
.bhk-hero-addr{
  font-family: var(--body); font-size: 14px; color: var(--text-muted);
  margin: 24px auto 0; max-width: 520px; line-height: 1.6;
  /* The RERA registration number is one unbroken 40-character token with no
     spaces, so on a narrow viewport it pushed past the column and clipped.
     anywhere lets it wrap mid-token rather than overflow. */
  overflow-wrap: anywhere;
}

.bhk-crumb{
  font-family: var(--body); font-size: 13px; color: var(--text-muted);
  margin-bottom: 28px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bhk-crumb a{ color: var(--gold-dark); text-decoration: none; }
.bhk-crumb a:hover{ text-decoration: underline; }
.bhk-crumb span[aria-current]{ color: var(--charcoal); font-weight: 700; }

.bhk-hero{ text-align: center; padding-bottom: 48px; border-bottom: 1px solid rgba(175,129,46,0.2); margin-bottom: 48px; }
.bhk-hero-eyebrow{
  font-family: var(--body); font-size: var(--fs-eyebrow); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 700; margin-bottom: 16px; line-height: var(--lh-eyebrow);
}
.bhk-h1{
  font-family: var(--display); font-weight: 400; font-size: var(--fs-h1);
  line-height: var(--lh-h1); color: var(--charcoal); margin: 0 0 18px;
}
.bhk-hero-sub{ font-family: var(--body); font-size: var(--fs-body); color: var(--text-faint); max-width: 660px; margin: 0 auto 30px; line-height: 1.7; }
.bhk-hero-cta{ display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
/* CTA button styled by the shared .cta-gold (layout.css) + .btn-gold-primary
   (components.css) classes on the button itself — matches every other CTA
   on the site, not a one-off. See includes/bhk-locality-template.php. */
.bhk-hero-cta .btn-gold-primary{ padding: 16px 32px; }
.bhk-wa{ font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--gold-dark); text-decoration: none; }
.bhk-wa:hover{ text-decoration: underline; }

.bhk-h2{
  font-family: var(--display); font-weight: 400; font-size: var(--fs-h2);
  color: var(--charcoal); margin: 56px 0 22px; line-height: var(--lh-h2);
}
/* Only the h2 in the section directly under the hero skips the top gap. It
   used to be written as `.bhk-summary > .bhk-h2:first-child`, which was safe
   while a page had exactly one .bhk-summary. The hub pages now carry a second
   one (the configuration-detail block), and its h2 is a :first-child too, so
   it inherited margin-top:0 and collided with the outline link closing the
   section above. Anchoring to .bhk-hero + keeps the exemption to the one
   section that actually opens the page. */
.bhk-hero + .bhk-summary > .bhk-h2:first-child{ margin-top: 0; }
.bhk-body{ font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-faint); margin: 0 0 22px; }

/* Sub-heading inside a .bhk-summary — used by the locality pages for the
   "why buy here" points, which are h3s under an h2. Sits between .bhk-h2 and
   .bhk-body in weight so the outline stays readable. */
.bhk-h3{
  font-family: var(--body); font-weight: 700; font-size: var(--fs-h3);
  color: var(--charcoal); margin: 32px 0 12px; line-height: var(--lh-h3);
}

/* Tables scroll inside their own box rather than pushing the page sideways.
   The 4-column variant (config / size / towers / price) measures ~399px, so on
   a 359px phone it was clipping the Starting Price column right off the edge
   with no way to reach it. */
.bhk-table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 24px; }
.bhk-table{ width: 100%; border-collapse: collapse; margin: 0; font-family: var(--body); min-width: 420px; }
.bhk-table th, .bhk-table td{ text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(175,129,46,0.18); }
.bhk-table th{ font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
.bhk-table td{ font-size: 15px; color: var(--charcoal); }
.bhk-table tbody tr:last-child td{ border-bottom: none; }

.bhk-usp-list{ list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.bhk-usp-list li{
  font-family: var(--body); font-size: 15px; color: var(--charcoal);
  padding-left: 22px; position: relative;
}
.bhk-usp-list li::before{
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700;
}

.bhk-outline-link{
  display: inline-block; margin-top: 8px; font-family: var(--body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--gold-dark); text-decoration: none; border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
}
.bhk-outline-link:hover{ color: var(--charcoal); border-color: var(--charcoal); }

.bhk-disclaimer-note{ font-family: var(--body); font-size: 13px; color: var(--text-muted); margin: -8px 0 0; }

.bhk-faq-item{
  border-bottom: 1px solid rgba(175,129,46,0.18); padding: 18px 0;
}
.bhk-faq-item summary{
  font-family: var(--display); font-size: var(--fs-faq-q); line-height: var(--lh-faq-q);
  color: var(--charcoal); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.bhk-faq-item summary::-webkit-details-marker{ display: none; }
.bhk-faq-item summary::after{ content: '+'; font-size: 22px; color: var(--gold); flex: 0 0 auto; }
.bhk-faq-item[open] summary::after{ content: '−'; }
.bhk-faq-item p{ font-family: var(--body); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-faint); margin: 14px 0 0; }

/* .bhk-related lives in components.css — shared with locality-template.php's
   near-*.php pages, which link back into these BHK spoke pages too. */

/* ── Hub pages (3bhk.php / 4bhk.php) — locality grid ── */
.bhk-hub-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 0 0 24px; }
.bhk-hub-card{
  display: block; border: 1px solid rgba(175,129,46,0.25); border-radius: 8px; padding: 24px;
  text-decoration: none; transition: border-color .2s ease, background-color .2s ease;
}
.bhk-hub-card:hover{ border-color: var(--gold); background: rgba(210,171,103,0.05); }
.bhk-hub-card .name{ font-family: var(--display); font-size: 22px; color: var(--charcoal); margin-bottom: 6px; }
.bhk-hub-card .meta{ font-family: var(--body); font-size: 13px; color: var(--gold-dark); font-weight: 700; letter-spacing: 0.04em; }

@media (max-width: 767px){
  .bhk-page{ padding: 100px 20px 56px; }
  .bhk-usp-list{ grid-template-columns: 1fr; }
  .bhk-hero-cta{ flex-direction: column; gap: 14px; }
}

/* price-list's FAQ section uses the shared .bhk-h2 / .bhk-body / .bhk-faq-item.
   Those set `margin: <v> 0 <v>`, and because this file loads after home.css the
   shorthand resets the margin-left/right:auto that the price-list column rule
   applies, dropping the block back to the section's 24px gutter while every
   section above it sat in the 960px column. Restated here so the column wins. */
.pl-faq-section > .bhk-h2,
.pl-faq-section > .bhk-body,
.pl-faq-section > .bhk-faq-item{
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}