/* ============================================================
   RATNA HEALTHPLEX — Inner Page Shared Styles
   page.css
   ============================================================ */

/* Breadcrumb — sits directly under the fixed navbar on every inner page,
   so it needs the same nav-clearance offset the homepage .hero uses. */
.page-breadcrumb { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 12px 0; margin-top: calc(var(--nav-height) + var(--banner-height)); }
.breadcrumb-list { display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap; font-size:13px; }
.breadcrumb-list li { display:flex; align-items:center; gap:6px; }
.breadcrumb-list li:not(:last-child)::after { content:"/"; color:#94a3b8; font-size:12px; }
.breadcrumb-list a { color:#054492; text-decoration:none; font-weight:500; transition:color .15s; }
.breadcrumb-list a:hover { color:#e9830c; text-decoration:underline; }
.breadcrumb-list .active { color:#64748b; font-weight:400; }

/* Compact inner-page banner: title + optional short subtitle only.
   Replaces the old large per-page hero (badge/description/CTAs/trust
   pills/stat cards) with one consistent, minimal component used across
   every inner page. */
.page-banner {
  background: linear-gradient(135deg, rgba(3,47,110,0.93) 0%, rgba(5,68,146,0.9) 100%), url('../../images/inner-page-banner.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 0 36px;
}
.page-banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  font-weight: var(--fw-extrabold);
  color: #fff;
  line-height: var(--leading-tight);
  margin: 0;
}
.page-banner-subtitle {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.82);
  margin-top: var(--space-2);
  max-width: 640px;
  line-height: var(--leading-relaxed);
}
@media (max-width: 640px) {
  .page-banner { padding: 28px 0 24px; }
}

/* Under-Construction */
.page-construction { min-height:calc(100vh - 240px); display:flex; align-items:center; justify-content:center; padding:80px 24px; background:linear-gradient(160deg,#f0f5ff 0%,#ffffff 60%,#fff7ed 100%); }
.construction-wrap { text-align:center; max-width:520px; margin:0 auto; }
.construction-icon { width:88px; height:88px; border-radius:24px; background:linear-gradient(135deg,#eff6ff,#dbeafe); border:2px solid #bfdbfe; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; box-shadow:0 8px 24px rgba(5,68,146,.1); }
.construction-icon svg, .construction-icon i { width:40px; height:40px; color:#054492; }
.construction-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#054492,#1d4ed8); color:white; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 16px; border-radius:100px; margin-bottom:20px; }
.construction-title { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; color:#0f172a; line-height:1.2; margin-bottom:12px; }
.construction-status { font-size:16px; color:#475569; margin-bottom:6px; font-weight:500; }
.construction-desc { font-size:var(--text-lg); color:#94a3b8; margin-bottom:32px; }
.construction-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Scroll animate */
[data-animate] { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease; }
[data-animate].in-view { opacity:1; transform:translateY(0); }

/* Error pages */
.error-page { min-height:calc(100vh - 240px); display:flex; align-items:center; justify-content:center; padding:80px 24px; text-align:center; }
.error-code { font-size:clamp(4rem,12vw,8rem); font-weight:900; color:#054492; line-height:1; margin-bottom:8px; opacity:.12; display:block; }
.error-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:#0f172a; margin-bottom:12px; }
.error-desc { font-size:var(--text-lg); color:#64748b; max-width:440px; margin:0 auto 32px; line-height:1.7; }
.error-links { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Coming Soon / Maintenance */
.fullscreen-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; background:linear-gradient(160deg,#06112a 0%,#0a1e52 100%); text-align:center; }
.fullscreen-logo { margin-bottom:48px; }
.fullscreen-logo img { height:40px; filter:brightness(0) invert(1); }
.fullscreen-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.8); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 16px; border-radius:100px; margin-bottom:24px; }
.fullscreen-title { font-size:clamp(2rem,5vw,3.5rem); font-weight:800; color:white; line-height:1.15; margin-bottom:16px; }
.fullscreen-title em { font-style:normal; color:#f5a43e; }
.fullscreen-desc { font-size:var(--text-lg); color:rgba(255,255,255,.6); max-width:480px; line-height:1.7; margin-bottom:36px; }
.fullscreen-contact { font-size:13px; color:rgba(255,255,255,.4); margin-top:36px; }
.fullscreen-contact a { color:rgba(255,255,255,.65); }

/* Responsive */
@media (max-width:640px) {
  .page-construction, .error-page { padding:48px 16px; min-height:calc(100vh - 200px); }
  .construction-actions, .error-links { flex-direction:column; align-items:center; }
  .construction-actions .btn, .error-links .btn { width:100%; max-width:280px; }
}

/* ============================================================
   STICKY TOC SIDEBAR
   Shared two-column layout for long-form documents (legal pages,
   FAQ) with an in-page table of contents. Sidebar stays sticky
   below the fixed navbar; .toc-link active state is driven by
   the TocScrollspy module in main.js.
   ============================================================ */
.toc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.toc-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  max-height: calc(100vh - var(--nav-height) - var(--space-10));
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--color-neutral-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
}
.toc-sidebar-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}
.toc-nav-list { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.toc-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  border-left: 2px solid transparent;
  line-height: var(--leading-snug);
  transition: all var(--transition-fast);
}
.toc-link:hover { color: var(--color-primary-600); background: var(--color-neutral-100); }
.toc-link.active {
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  font-weight: var(--fw-semibold);
  border-left-color: var(--color-primary-600);
}
.toc-content { min-width: 0; }
@media (max-width: 991px) {
  .toc-layout { grid-template-columns: 1fr; }
  .toc-sidebar { position: static; max-height: none; margin-bottom: var(--space-8); }
}