/* ============================================================================
   PRATHMESH CARDIAC INSTITUTE — SITE SHELL
   Header, navigation, footer, mobile bar and the Book Appointment popup.
   Loaded on every page from includes/header.php.
   ============================================================================ */

:root{
  --pci-navy:#02204A;
  --pci-medblue:#0B6FA4;
  --pci-teal:#00A6A6;
  --pci-red:#D92D3F;
  --pci-soft:#F5F9FC;
  --pci-text:#162536;
  --pci-muted:#64748B;
  --pci-line:#E3E9F0;
}

*{box-sizing:border-box;}
/* overflow-x must be CLIP, not HIDDEN. "hidden" turns html/body into a scroll
   container, which silently kills every position:sticky on the page (that is
   what left the big empty column on the right of the inner pages). "clip"
   stops the same sideways scroll without breaking sticky. */
html,body{margin:0;padding:0;overflow-x:clip;scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;color:var(--pci-text);background:#fff;line-height:1.6;}
body[lang="hi"],html[lang="hi"] body{font-family:'Noto Sans Devanagari','Inter',sans-serif;}
img{max-width:100%;display:block;}

/* ---------- shared buttons ---------- */
.pci-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:9px;font-weight:600;font-size:14px;
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  font-family:inherit;white-space:nowrap;line-height:1.2;transition:background .2s,color .2s,border-color .2s;
}
.pci-btn svg{width:16px;height:16px;flex-shrink:0;}
.pci-btn-primary{background:var(--pci-red);color:#fff;}
.pci-btn-primary:hover{background:#b7212f;}
.pci-btn-outline{background:transparent;color:var(--pci-navy);border-color:var(--pci-navy);}
.pci-btn-outline:hover{background:var(--pci-navy);color:#fff;}
.pci-btn-ghost{background:transparent;color:var(--pci-navy);border-color:var(--pci-line);}
.pci-btn-ghost:hover{border-color:var(--pci-navy);}

/* ---------- top bar ---------- */
.pci-topbar{background:var(--pci-navy);color:#CBD9EA;font-size:13px;}
.pci-topbar-in{max-width:1280px;margin:0 auto;padding:8px 20px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;}
.pci-topbar-in span,.pci-topbar-in a{display:flex;align-items:center;gap:6px;color:#CBD9EA;text-decoration:none;}
.pci-topbar-in a:hover{color:#fff;}
.pci-topbar-in svg{width:14px;height:14px;flex-shrink:0;}

/* ---------- header ---------- */
.pci-header{background:#fff;box-shadow:0 2px 12px rgba(2,32,74,.09);position:sticky;top:0;z-index:600;}
.pci-header-in{max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.pci-logo{flex-shrink:0;display:block;}
.pci-logo img{height:52px;width:auto;}

/* ---------- navigation ---------- */
.pci-nav > ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.pci-nav > ul > li{position:relative;}
.pci-nav > ul > li > a{
  display:flex;align-items:center;gap:5px;
  font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--pci-navy);text-decoration:none;padding:10px 0;
}
.pci-nav > ul > li > a:hover,.pci-nav > ul > li > a.on{color:var(--pci-red);}
.pci-nav .caret{width:13px;height:13px;transition:transform .2s;}
.pci-nav .has-sub:hover .caret{transform:rotate(180deg);}

.pci-sub{
  position:absolute;top:100%;left:-16px;min-width:250px;
  background:#fff;border:1px solid var(--pci-line);border-radius:12px;
  box-shadow:0 18px 40px rgba(2,32,74,.16);
  padding:10px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.pci-nav .has-sub:hover .pci-sub,.pci-nav .has-sub:focus-within .pci-sub{opacity:1;visibility:visible;transform:translateY(0);}
.pci-sub li a{
  display:block;padding:9px 12px;border-radius:7px;
  font-size:14px;font-weight:500;color:var(--pci-text);text-decoration:none;text-transform:none;letter-spacing:0;
}
.pci-sub li a:hover{background:var(--pci-soft);color:var(--pci-medblue);}
.pci-sub .sub-head{
  padding:8px 12px 5px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pci-muted);
}
.pci-sub-wide{min-width:300px;}

.pci-header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.pci-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.pci-burger svg{width:26px;height:26px;color:var(--pci-navy);}

/* ---------- footer ---------- */
.pci-footer{background:var(--pci-navy);color:#9DB0C8;padding:56px 20px 18px;}
.pci-footer-in{max-width:1280px;margin:0 auto;}
.pci-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1);}
.pci-foot-logo{height:48px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1);}
.pci-foot-brand p{font-size:14px;line-height:1.75;margin:0 0 18px;}
.pci-social{display:flex;gap:10px;}
.pci-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s;}
.pci-social a:hover{background:var(--pci-teal);}
.pci-social svg{width:18px;height:18px;color:#fff;}
.pci-foot-col h4{color:#fff;font-family:'Poppins',sans-serif;font-size:15px;margin:0 0 16px;}
.pci-foot-col ul{list-style:none;margin:0;padding:0;}
.pci-foot-col li{margin-bottom:10px;font-size:14px;}
.pci-foot-col a{color:#9DB0C8;text-decoration:none;font-size:14px;}
.pci-foot-col a:hover{color:var(--pci-teal);}
.pci-foot-contact li{display:flex;gap:10px;line-height:1.6;}
.pci-foot-contact svg{width:16px;height:16px;color:var(--pci-teal);flex-shrink:0;margin-top:4px;}
.pci-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;font-size:13px;color:#7D90AA;}
.pci-foot-bottom a{color:#7D90AA;text-decoration:none;}
.pci-foot-bottom a:hover{color:var(--pci-teal);}

/* ---------- mobile sticky bar ---------- */
.pci-mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:650;background:#fff;box-shadow:0 -4px 18px rgba(2,32,74,.16);padding:10px 12px;gap:10px;}
.pci-mobile-bar .pci-btn{flex:1;padding:13px;font-size:14px;}

/* ---------- Book Appointment popup ---------- */
.pci-modal{position:fixed;inset:0;z-index:900;display:none;}
.pci-modal.open{display:block;}
.pci-modal-backdrop{position:absolute;inset:0;background:rgba(2,32,74,.62);backdrop-filter:blur(3px);animation:pciFade .22s ease;}
.pci-modal-box{
  position:relative;max-width:470px;margin:40px auto;background:#fff;border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);padding:30px 28px;
  max-height:calc(100vh - 80px);overflow-y:auto;animation:pciUp .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes pciFade{from{opacity:0}to{opacity:1}}
@keyframes pciUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pci-modal-x{position:absolute;top:14px;right:14px;background:var(--pci-soft);border:none;border-radius:9px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pci-modal-x svg{width:17px;height:17px;color:var(--pci-navy);}
.pci-modal-x:hover{background:#e6eef6;}
.pci-modal-head h3{font-family:'Poppins',sans-serif;font-size:21px;color:var(--pci-navy);margin:0 0 6px;padding-right:34px;}
.pci-modal-head p{font-size:14px;color:var(--pci-muted);margin:0 0 20px;line-height:1.6;}

.pci-fld{margin-bottom:13px;}
.pci-fld label{display:block;font-size:12.5px;font-weight:600;color:var(--pci-text);margin-bottom:5px;}
.pci-fld input,.pci-fld select,.pci-fld textarea{
  width:100%;padding:12px 13px;border-radius:9px;border:1.5px solid var(--pci-line);
  font-family:inherit;font-size:14.5px;color:var(--pci-text);background:#fff;
}
.pci-fld input:focus,.pci-fld select:focus,.pci-fld textarea:focus{outline:none;border-color:var(--pci-medblue);}
.pci-fld textarea{resize:vertical;min-height:72px;}
#pciHoney{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.pci-submit{width:100%;padding:14px;font-size:15px;margin-top:4px;}
.pci-submit.busy{opacity:.6;pointer-events:none;}
.pci-form-msg{font-size:13.5px;line-height:1.5;margin:4px 0 8px;}
.pci-form-msg.err{color:var(--pci-red);font-weight:600;}
.pci-form-msg.ok{color:#128a5a;font-weight:600;}
.pci-form-note{font-size:12px;color:var(--pci-muted);text-align:center;margin:12px 0 0;line-height:1.5;}
.pci-modal-call{margin-top:16px;padding-top:14px;border-top:1px solid var(--pci-line);text-align:center;font-size:13.5px;color:var(--pci-muted);}
.pci-modal-call a{color:var(--pci-red);font-weight:700;text-decoration:none;}

.pci-thanks{text-align:center;padding:14px 0 6px;}
.pci-thanks-ic{width:62px;height:62px;border-radius:50%;background:#e8f7f0;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.pci-thanks-ic svg{width:30px;height:30px;color:#128a5a;}
.pci-thanks h3{font-family:'Poppins',sans-serif;font-size:20px;color:var(--pci-navy);margin:0 0 8px;}
.pci-thanks p{font-size:14.5px;color:var(--pci-muted);margin:0 0 20px;line-height:1.65;}

body.pci-modal-open{overflow:hidden;}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pci-nav > ul{gap:18px;}
  .pci-nav > ul > li > a{font-size:13px;}
  .pci-logo img{height:46px;}
}
@media (max-width:1100px){
  .pci-hide-md{display:none;}
  .pci-burger{display:block;}
  .pci-nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-top:1px solid var(--pci-line);box-shadow:0 18px 30px rgba(2,32,74,.14);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .pci-nav.open{max-height:80vh;overflow-y:auto;}
  .pci-nav > ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;}
  .pci-nav > ul > li > a{padding:13px 4px;border-bottom:1px solid var(--pci-line);justify-content:space-between;}
  .pci-sub{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;border-radius:0;padding:4px 0 8px 14px;
    display:none;min-width:0;
  }
  .pci-nav .has-sub.open .pci-sub{display:block;}
  .pci-header-in{position:relative;flex-wrap:nowrap;}
}
@media (max-width:900px){
  .pci-hide-sm{display:none;}
  /* The dark address strip is hidden on phones and tablets — it wrapped onto
     three lines and pushed the real content down. The same address and phone
     number are in the footer of every page and on the Contact page.
     To bring it back, delete the next line.                                 */
  .pci-topbar{display:none;}
  .pci-topbar-in{justify-content:center;font-size:12px;gap:12px;}
  .pci-mobile-bar{display:flex;}
  body{padding-bottom:72px;}
  .pci-footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:620px){
  .pci-header-cta .pci-btn-primary{padding:10px 14px;font-size:13px;}
  .pci-header-cta .pci-btn-primary svg{display:none;}
  .pci-logo img{height:40px;}
  .pci-footer-grid{grid-template-columns:1fr;}
  .pci-foot-bottom{justify-content:center;text-align:center;}
  .pci-modal-box{margin:16px;max-height:calc(100vh - 32px);padding:26px 20px;}
}
@media (max-width:1180px) and (min-width:901px){
  .pci-footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .pci-footer-grid > :first-child{grid-column:1/-1;max-width:640px;}
}
@media (max-width:900px){ .pci-footer-grid > :first-child{grid-column:1/-1;} }