/* ===========================================================================
   gj-service.css — page styling for the general-orthopaedic service pages
   (knee replacement, hip replacement, fracture & trauma, arthroscopy/ACL,
   spine surgery).

   These pages were written after the condition pages, so instead of another
   900-line inline <style> per page they share this one file. It only styles
   what is INSIDE a block; the block surfaces themselves (column width, card,
   radius, shadow, breadcrumb, NAP, creds, reviews) come from
   css/gj-local-seo.css, which is still linked LAST in <head>.
   =========================================================================== */

:root{
  --gjs-primary:#2563eb; --gjs-primary-dark:#1d4ed8; --gjs-accent:#0ea5e9;
  --gjs-ink:#1e293b; --gjs-muted:#64748b; --gjs-line:rgba(15,23,42,.10);
  --gjs-ok:#059669; --gjs-warn:#d97706; --gjs-bad:#dc2626;
  /* the condition pages read these names; set them so gj-local-seo.css
     resolves to the same blue on these pages too */
  --primary:#2563eb; --primary-dark:#1d4ed8; --text-dark:#1e293b; --text-light:#64748b;
}

/* styles.css gives headings a serif display face; the service pages stay on
   Poppins so they match the condition pages. */
.page-content h1, .page-content h2, .page-content h3, .page-content h4,
.gj-seo h2, .gj-seo h3, .cta-section h2{
  font-family:'Poppins','Noto Sans Devanagari',system-ui,sans-serif;
  letter-spacing:-.01em;
}

.page-content{
  min-height:100vh; padding:20px 0 0;
  font-family:'Poppins','Noto Sans Devanagari',system-ui,sans-serif;
  background:linear-gradient(135deg,#eff6ff 0%,#e0f2fe 40%,#f8fafc 100%);
  color:var(--gjs-ink); line-height:1.8;
}

/* ------------------------------------------------------------- language -- */
.lang-content{ display:none; }
.lang-content.active{ display:block; }

/* ----------------------------------------------------------------- hero -- */
/* Matches the older condition pages exactly: a white card with a shimmer strip,
   a gradient-text H1, the large pill language toggle and solid blue stat cards.
   Only the palette differs from those pages (they each pick their own accent);
   these pages all use the site blue. */
.hero-section{
  text-align:center; padding:4em 2em;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.95));
  border-radius:40px; box-shadow:0 30px 80px rgba(0,0,0,.2);
  max-width:1350px; margin:0 auto 3em; position:relative; overflow:hidden;
  animation:gjsFadeInUp .8s ease;
}
.hero-section::before{
  content:''; position:absolute; top:0; left:-100%; width:200%; height:8px;
  background:linear-gradient(90deg, transparent, var(--gjs-primary), #3b82f6, #60a5fa, transparent);
  animation:gjsShimmer 4s infinite;
}
.hero-section .brand-logo{
  font-size:1.6em; font-weight:900; color:var(--gjs-primary);
  margin-bottom:.5em; letter-spacing:3px; animation:gjsPulse 3s ease infinite;
}
.hero-section .hero-icon{
  font-size:7em; margin:.4em 0; display:inline-block; line-height:1;
  animation:gjsWave 3s ease infinite; filter:drop-shadow(0 15px 30px rgba(37,99,235,.3));
}
/* the circular hero photo used on the condition pages, with the same blue ring */
.hero-section .hero-image{
  width:190px; height:190px; margin:.5em auto; display:block;
  border-radius:50%; object-fit:cover; background:#fff;
  border:6px solid #fff;
  box-shadow:0 0 0 4px var(--gjs-primary), 0 14px 34px rgba(37,99,235,.28);
  animation:gjsFloat 3s ease-in-out infinite; transition:transform .4s ease, box-shadow .4s ease;
}
.hero-section .hero-image:hover{
  transform:scale(1.06);
  box-shadow:0 0 0 4px var(--gjs-primary-dark), 0 18px 40px rgba(37,99,235,.36);
}
.hero-section h1{
  font-size:3.5em; font-weight:900; margin:0 0 .3em; line-height:1.15;
  background:linear-gradient(135deg, var(--gjs-primary), var(--gjs-primary-dark), #3b82f6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-section .gj-h1-alt{ font-size:.5em; }
.hero-section .hero-sub-h2{
  font-size:1.55em; font-weight:800; color:var(--gjs-primary-dark); margin:0 0 .5em;
}
.hero-section .hero-subtitle{
  font-size:1.28em; color:var(--gjs-muted); margin:0 auto 1.2em; max-width:900px; font-weight:500;
}
.hero-section .medical-review-byline{
  color:var(--gjs-muted) !important; justify-content:center; font-size:.92rem;
}
.hero-section .medical-review-byline i{ color:var(--gjs-primary) !important; }
.hero-section .medical-review-byline strong{ color:var(--gjs-ink); }

@keyframes gjsFadeInUp{ from{ opacity:0; transform:translateY(40px);} to{ opacity:1; transform:translateY(0);} }
@keyframes gjsShimmer{ 0%{ background-position:-1000px 0; } 100%{ background-position:1000px 0; } }
@keyframes gjsPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
@keyframes gjsWave{ 0%,100%{ transform:rotate(-5deg);} 50%{ transform:rotate(5deg);} }
@keyframes gjsFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes gjsBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* language toggle — the same 200x70 pill the condition pages use */
.language-section{ display:flex; justify-content:center; align-items:center; gap:1.5em; margin:2.5em 0 0; flex-wrap:wrap; }
.lang-label{ font-weight:800; font-size:1.15em; color:var(--gjs-ink); }
.toggle-container{
  position:relative; width:200px; height:70px; flex:0 0 auto;
  background:linear-gradient(135deg,#eceff1,#f5f5f5); border-radius:40px; cursor:pointer;
  box-shadow:inset 0 4px 18px rgba(0,0,0,.15); transition:all .3s ease; user-select:none;
}
.toggle-container:hover{ box-shadow:inset 0 4px 18px rgba(0,0,0,.2), 0 8px 30px rgba(37,99,235,.4); transform:scale(1.03); }
.toggle-container .toggle-slider{
  position:absolute; top:5px; left:5px; width:95px; height:60px;
  background:linear-gradient(135deg, var(--gjs-primary), var(--gjs-primary-dark));
  border-radius:35px; transition:transform .6s cubic-bezier(.68,-.55,.265,1.55);
  box-shadow:0 8px 25px rgba(37,99,235,.5);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#fff; font-size:1.1em;
}
.toggle-container.english .toggle-slider{ transform:translateX(95px); }
.toggle-container .lang-option{
  position:absolute; top:50%; transform:translateY(-50%);
  font-weight:900; font-size:1.1em; color:#78909c; pointer-events:none;
}
.toggle-container .lang-option.hindi{ left:28px; }
.toggle-container .lang-option.english{ right:22px; }
/* the slider carries its own label, so hide the one it is sitting on */
.toggle-container.english .lang-option.english,
.toggle-container:not(.english) .lang-option.hindi{ visibility:hidden; }

/* quick-fact cards under the hero */
.info-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.8em; margin:3em 0 0; }
.info-card{
  background:linear-gradient(135deg, var(--gjs-primary), var(--gjs-primary-dark));
  color:#fff; padding:2em 1.4em; border-radius:25px; text-align:center;
  box-shadow:0 15px 40px rgba(37,99,235,.35); transition:all .4s ease; border:0;
}
.info-card:nth-child(2){ background:linear-gradient(135deg,#3b82f6,#2563eb); }
.info-card:nth-child(3){ background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.info-card:nth-child(4){ background:linear-gradient(135deg,#1d4ed8,#1e40af); }
.info-card:hover{ transform:translateY(-15px) rotate(2deg); }
.info-card-icon{ font-size:2.5em; display:block; margin-bottom:.3em; animation:gjsBounce 2s ease infinite; }
.info-card-number{ display:block; font-size:2.2em; font-weight:900; color:#fff; margin-bottom:.2em; line-height:1.1; }
.info-card-label{ display:block; font-size:1.05em; font-weight:500; color:#fff; line-height:1.5; }

/* -------------------------------------------------------------- content -- */
.content-section h2{ font-size:clamp(1.35rem,2.4vw,1.8rem); font-weight:800; color:var(--gjs-primary-dark); margin:0 0 .7em; line-height:1.3; }
.content-section h3{ font-size:1.12rem; font-weight:700; color:var(--gjs-ink); margin:1.5em 0 .5em; }
.content-section p{ margin:0 0 1em; }
.content-section a{ color:var(--gjs-primary-dark); font-weight:600; }

.gjs-list{ list-style:none; padding:0; margin:0 0 1em; }
.gjs-list li{ position:relative; padding-left:1.9em; margin-bottom:.6em; }
.gjs-list li::before{ content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; left:0; top:.15em; color:var(--gjs-ok); font-size:.85em; }
.gjs-list.warn li::before{ content:'\f071'; color:var(--gjs-warn); }
.gjs-list.dot li::before{ content:'\f111'; color:var(--gjs-primary); font-size:.5em; top:.65em; }

.gjs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1em; margin:1.2em 0; }
.gjs-card{ background:#f8fafc; border:1px solid var(--gjs-line); border-radius:14px; padding:1.3em; }
.gjs-card h3{ margin:0 0 .4em; font-size:1.02rem; color:var(--gjs-primary-dark); }
.gjs-card p{ margin:0; font-size:.94rem; color:var(--gjs-muted); line-height:1.7; }
.gjs-card .gjs-card-icon{ font-size:1.5rem; display:block; margin-bottom:.3em; }

.gjs-callout{ border-left:4px solid var(--gjs-primary); background:#eff6ff; border-radius:0 14px 14px 0;
  padding:1.1em 1.3em; margin:1.3em 0; font-size:.97rem; }
.gjs-callout.warn{ border-left-color:var(--gjs-warn); background:#fffbeb; }
.gjs-callout.ok{ border-left-color:var(--gjs-ok); background:#ecfdf5; }
.gjs-callout strong{ color:var(--gjs-primary-dark); }
.gjs-callout.warn strong{ color:#b45309; }
.gjs-callout.ok strong{ color:#047857; }

.gjs-steps{ list-style:none; counter-reset:gjs; padding:0; margin:1.2em 0; }
.gjs-steps li{ counter-increment:gjs; position:relative; padding:0 0 1.2em 3.1em; border-left:2px solid #dbeafe; margin-left:1.1em; }
.gjs-steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.gjs-steps li::before{ content:counter(gjs); position:absolute; left:-1.15em; top:-.15em; width:2.3em; height:2.3em;
  background:var(--gjs-primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85em; }
.gjs-steps strong{ display:block; color:var(--gjs-primary-dark); }

.gjs-table-wrap{ overflow-x:auto; margin:1.2em 0; }
.gjs-table{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:480px; }
.gjs-table th, .gjs-table td{ border:1px solid var(--gjs-line); padding:.75em .9em; text-align:left; vertical-align:top; }
.gjs-table th{ background:#eff6ff; color:var(--gjs-primary-dark); font-weight:700; }
.gjs-table tr:nth-child(even) td{ background:#f8fafc; }

/* myth / fact pairs */
.gjs-myth{ display:grid; gap:.9em; margin:1.2em 0; }
.gjs-myth-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9em; }
.gjs-myth-row > div{ border-radius:14px; padding:1em 1.2em; font-size:.95rem; }
.gjs-myth-row .m{ background:#fef2f2; border:1px solid #fecaca; }
.gjs-myth-row .f{ background:#ecfdf5; border:1px solid #a7f3d0; }
.gjs-myth-row .m b{ color:var(--gjs-bad); display:block; margin-bottom:.2em; }
.gjs-myth-row .f b{ color:#047857; display:block; margin-bottom:.2em; }

/* FAQ */
.faq-item{ background:#fff; border:1px solid var(--gjs-line); margin-bottom:.7em; overflow:hidden; }
.faq-item > summary{ display:flex; justify-content:space-between; align-items:center; gap:1em;
  padding:1em 1.2em; cursor:pointer; font-weight:600; color:var(--gjs-ink); list-style:none; line-height:1.55; }
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::marker{ content:''; }
.faq-item > summary:hover{ color:var(--gjs-primary); }
.faq-item[open]{ border-color:#bfdbfe; }
.faq-item[open] .faq-chev{ transform:rotate(180deg); color:var(--gjs-primary); }
.faq-chev{ flex:0 0 auto; color:var(--gjs-muted); transition:transform .2s ease; }
.faq-answer{ padding:0 1.2em 1.1em; color:#475569; font-size:.96rem; line-height:1.8; border-top:1px solid #f1f5f9; padding-top:.9em; }

/* full-width figure, for diagrams whose labels matter */
.gjs-figure{ margin:0 0 1.6em; }
.gjs-figure img{ width:100%; height:auto; display:block; border:1px solid var(--gjs-line);
  border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06); }
.gjs-figure figcaption{ margin-top:.7em; font-size:.92rem; color:var(--gjs-muted); text-align:center; }

/* related links */
.gjs-links{ display:flex; flex-wrap:wrap; gap:.6em; margin:1em 0 0; padding:0; list-style:none; }
.gjs-links li{ margin:0; padding:0; }
.gjs-links a{ display:inline-block; background:#eff6ff; border:1px solid #bfdbfe; border-radius:30px;
  padding:.45em 1.1em; font-size:.9rem; font-weight:600; color:var(--gjs-primary-dark); text-decoration:none; }
.gjs-links a:hover{ background:var(--gjs-primary); color:#fff; }

/* CTA — same treatment as the condition pages */
.cta-section{
  background:linear-gradient(135deg, var(--gjs-primary), var(--gjs-primary-dark));
  color:#fff; text-align:center; padding:4em 2em; border-radius:35px;
  box-shadow:0 25px 70px rgba(37,99,235,.4);
}
.cta-section h2{ color:#fff; font-size:2.3em; font-weight:900; margin:0 0 .4em; }
.cta-section p{ color:#e0f2fe; max-width:760px; margin:0 auto 1.6em; font-size:1.1em; }
.cta-button{
  display:inline-block; padding:1.1em 2.6em; background:#fff; color:var(--gjs-primary-dark);
  font-weight:800; font-size:1.15em; border-radius:50px; text-decoration:none; margin:.35em;
  box-shadow:0 15px 40px rgba(0,0,0,.25); transition:all .4s ease;
}
.cta-button.ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.8); box-shadow:none; }
.cta-button:hover{ transform:translateY(-3px) scale(1.03); }

/* remove the site-wide list bullets that styles.css adds inside .page-content */
.page-content .dropdown-menu li::before,
.page-content .dropdown-submenu li::before,
.footer-links li::before{ content:none !important; }

@media (max-width:768px){
  .hero-section{ padding:2.5em 1.5em; border-radius:26px; }
  .hero-section h1{ font-size:2.2em; }
  .hero-section .hero-icon{ font-size:4.5em; }
  .hero-section .hero-image{ width:140px; height:140px; }
  .hero-section .hero-subtitle{ font-size:1.05em; }
  .hero-section .hero-sub-h2{ font-size:1.15em; }
  .info-cards{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.2em; }
  .info-card{ padding:1.4em 1em; border-radius:18px; }
  .info-card-number{ font-size:1.7em; }
  .info-card-label{ font-size:.92em; }
  .cta-section{ padding:2.5em 1.5em; border-radius:26px; }
  .cta-section h2{ font-size:1.7em; }
  .gjs-myth-row{ grid-template-columns:1fr; }
  .content-section h3{ font-size:1.05rem; }
}
