/* Styles for the server-rendered pages (area, project, /pune, about, contact).
   Builds on style.css (same colours: #203864 navy, #006699 blue, #B4C7E7 light blue). */

.seo-page .logo-img { width: auto; }   /* width/height attributes only reserve space */
.seo-main { padding: 90px 0 40px; }
.seo-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.seo-container.narrow { max-width: 860px; }
.seo-page section { margin: 0 0 36px; }
.seo-page h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; margin: 0 0 12px; letter-spacing: normal; }
.seo-page h2 { color: #fff; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; margin: 0 0 14px; }
.seo-page h3 { color: #fff; font-size: 1.1rem; margin: 18px 0 10px; }
.seo-page main p, .seo-page main li { line-height: 1.65; color: #EEF3FA; text-align: left; max-width: none; padding: 0; }
.seo-page main a:not(.btn):not(.card-btn) { color: #fff; text-decoration: underline; }
.seo-page main ul, .seo-page main ol { padding-left: 20px; margin: 0 0 12px; }

/* Breadcrumb */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; margin: 0 0 16px !important; font-size: 0.85rem; color: #B4C7E7; }
.breadcrumb li { color: #B4C7E7 !important; line-height: 1.4 !important; }
.breadcrumb li + li::before { content: "\203A"; margin-right: 6px; }

.page-header { margin-bottom: 24px; }
.lead-answer { font-size: 1.1rem; }

/* MahaRERA box near the top of project pages */
.rera-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #203864; border: 2px solid #B4C7E7; border-radius: 12px; padding: 16px 20px; }
.rera-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: #B4C7E7 !important; margin: 0; }
.rera-number { font-size: 1.4rem; font-weight: 700; margin: 4px 0; word-break: break-all; }
.rera-note { font-size: 0.85rem; margin: 0; }
.rera-qr img { width: 120px; height: 120px; background: #fff; border-radius: 8px; padding: 4px; display: block; }

/* Image gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; border: 2px solid #B4C7E7; display: block; }

/* Two columns: content + offer/lead box */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin-bottom: 36px; }
.offer-box { background: linear-gradient(135deg, #003d66 0%, #002b4d 100%); border: 2px solid #B4C7E7; border-radius: 14px; padding: 20px; }
.offer-box h2 { font-size: 1.3rem; }

/* Facts tables */
.facts { width: 100%; border-collapse: collapse; margin-bottom: 16px; background: rgba(32, 56, 100, 0.6); border-radius: 10px; overflow: hidden; }
.facts th, .facts td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(180, 199, 231, 0.25); vertical-align: top; color: #fff; }
.facts th { width: 38%; color: #B4C7E7; font-weight: 600; }
.facts.compare th { width: auto; }
.table-scroll { overflow-x: auto; }

/* Buttons */
.contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.contact-buttons .btn, .offer-box > .btn { text-decoration: none; display: inline-block; text-align: center; }
.offer-box > .btn { margin-bottom: 6px; }
.btn-whatsapp { background: #1a7f45; color: #fff; border: 2px solid #B4C7E7; }
a.card-btn { text-decoration: none; justify-content: center; }

/* Lead form */
.lead-form label { display: block; font-size: 0.9rem; margin-bottom: 6px; color: #EEF3FA; }
.lead-form .form-input { margin-bottom: 14px; padding: 12px; }
.form-note { font-size: 0.8rem; margin-top: 10px !important; color: #B4C7E7 !important; }
.form-error { color: #FFD2D2 !important; font-weight: 600; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-thanks { background: #1a7f45; border-radius: 10px; padding: 16px; }
.lead-thanks-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; }

/* FAQ */
.faq details { background: rgba(32, 56, 100, 0.6); border: 1px solid rgba(180, 199, 231, 0.35); border-radius: 10px; margin-bottom: 10px; padding: 12px 16px; }
.faq summary { cursor: pointer; font-weight: 600; color: #fff; }
.faq details p { margin: 10px 0 0; }

.steps li { margin-bottom: 6px; }
.small-print { font-size: 0.85rem; color: #B4C7E7 !important; }
.last-updated { font-size: 0.85rem; color: #B4C7E7 !important; }

/* Area lists */
.area-links { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.area-count { color: #B4C7E7; font-size: 0.85em; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.area-card { background: rgba(32, 56, 100, 0.6); border: 1px solid rgba(180, 199, 231, 0.35); border-radius: 12px; padding: 14px 16px; }
.area-card h3 { margin-top: 0; }

/* Footer extras */
.seo-footer .footer-areas, .home-areas { margin-bottom: 14px; }
.footer-heading { font-weight: 700; margin-bottom: 6px; }
.seo-footer .area-links, .home-areas .area-links { justify-content: center; }
.seo-footer a, .home-areas a { color: #fff; }
.footer-links a { color: #B4C7E7; }

/* Visible placeholder for missing facts (see PS_SHOW_TODOS in includes/site.php) */
.todo { display: inline-block; background: #FFF3CD; color: #664D03; border: 1px dashed #B58105; border-radius: 6px; padding: 2px 8px; font-size: 0.85rem; font-weight: 600; }

/* Phones */
@media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .seo-main { padding-top: 80px; }
    .listings-grid { grid-template-columns: 1fr; }
    .rera-box { flex-direction: column; align-items: flex-start; }
    .gallery img { height: 220px; }
    .facts th { width: 42%; }
}