/* ==========================================================================
   JAGRITI DHAM — LANDING PAGE HEADER  (v2, refined)
   Loaded AFTER style.css and responsive.css so it wins the cascade cleanly.
   Namespaced under .jd-header, plus the .banner-main top-offset and the
   scroll-padding rules that depend on the header's height.

   v2 changes over v1:
     · type matched to /best-luxury-senior-citizen-home-kolkata/ (system Helvetica)
     · warm paper bar instead of flat white; engraved thick/thin brass rule
     · specular gold CTA (lit metal plate) replacing the diagonal colour ramp
     · ribbon darkened for real legibility (4.63:1 -> 6.99:1) and type grown
     · diamonds become fading rules — the engraved-invitation frame
     · focus ring fixed (gold on near-white failed WCAG 1.4.11)
     · hover gated behind (hover:hover) + :active press states for touch
     · scroll-condense given hysteresis, rAF and a staggered ease
   ========================================================================== */

:root{
  --jd-green:#4f6f52;
  --jd-green-deep:#2b3f2f;
  --jd-green-dark:#22331f;
  --jd-ribbon-bg:#3a5240;
  --jd-gold:#cbb279;
  --jd-gold-lt:#e3cf9c;
  --jd-gold-dp:#7f6630;
  --jd-wa:#0F7A6D;              /* AA-safe WhatsApp green for text & borders */
  --jd-ribbon-h:34px;
  --jd-bar-h:72px;
  /* Display face. Matched to /best-luxury-senior-citizen-home-kolkata/, which
     uses system Helvetica throughout. To restore the Philosopher serif accent,
     put back:  "Philosopher", Georgia, serif  (and re-add the <link> in index.php). */
  --jd-serif:Helvetica, sans-serif;
}

/* ---------- shell ---------- */
.jd-header{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  font-family:Helvetica, sans-serif;
}
.jd-header a{ -webkit-tap-highlight-color:transparent; }

/* ---------- top ribbon ---------- */
.jd-ribbon{
  height:var(--jd-ribbon-h);
  overflow:hidden; position:relative;
  /* Flat ground + light from above + a little tooth. A left-to-right vignette
     reads as a decorative shape laid on the page; a band gets its richness
     from tone and grain, and shares the light direction of the bar and CTA. */
  background-color:var(--jd-ribbon-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(0,0,0,0) 44%,rgba(0,0,0,.11) 100%);
  transition:height .30s cubic-bezier(.32,.72,0,1), opacity .16s linear;
}
.jd-ribbon::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.45) 25%,rgba(203,178,121,.45) 75%,transparent);
}
.jd-ribbon-inner{
  height:100%; display:flex; align-items:center; justify-content:center;
  gap:18px; padding:0 16px;
}
.jd-ribbon-text{
  --jd-ls:.155em;
  font-family:var(--jd-serif);
  font-size:13px; font-weight:400;
  letter-spacing:var(--jd-ls); text-transform:uppercase;
  color:#f2e8d2; white-space:nowrap; line-height:1;
  margin-right:calc(var(--jd-ls) * -1);   /* trailing letter-space compensation */
}
.jd-rb-sm{display:none;}

/* the diamonds become rules that reach for the edges and dissolve */
.jd-dia{
  position:relative;
  flex:1 1 0; width:auto; height:1px; max-width:150px; min-width:24px;
  transform:none; box-shadow:none; border-radius:0;
  background:linear-gradient(90deg,rgba(203,178,121,0),rgba(203,178,121,.55));
}
.jd-ribbon-inner > .jd-dia:last-child{
  background:linear-gradient(90deg,rgba(203,178,121,.55),rgba(203,178,121,0));
}
/* a crisp terminal tick so the rule stops rather than just dying — 1px stays
   perfectly sharp at every DPR, unlike a rotated square */
.jd-dia::after{
  content:""; position:absolute; right:0; top:-5px;
  width:1px; height:11px; background:rgba(203,178,121,.75);
}
.jd-ribbon-inner > .jd-dia:last-child::after{ right:auto; left:0; }

/* ---------- main bar ---------- */
.jd-header .jd-bar{
  position:relative;
  height:var(--jd-bar-h);
  background:linear-gradient(180deg,#fdfaf2 0%,#f8f3e7 100%);
  border:0; padding:0; margin:0; border-radius:0;
  box-shadow:0 1px 0 rgba(43,63,47,.05), 0 12px 26px -20px rgba(43,63,47,.6);
  transition:height .34s cubic-bezier(.32,.72,0,1) .05s, box-shadow .5s ease;
}
/* engraved brass rule, drawn INSIDE the box so --jd-bar-h stays the true height */
.jd-header .jd-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; pointer-events:none;
  background-image:linear-gradient(180deg,
    rgba(203,178,121,.85) 0 1px,
    rgba(0,0,0,0) 1px 2px,
    rgba(203,178,121,.40) 2px 3px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.jd-header .jd-bar > .container-fluid{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:16px; padding:0 26px;
}

/* ---------- logo ---------- */
.jd-brand{ padding:0; margin:0; flex:none; display:flex; align-items:center; }
.jd-brand img{
  height:62px; width:auto; display:block;
  transform-origin:left center;
  transition:transform .40s cubic-bezier(.32,.72,0,1) .05s;
}

/* ---------- tagline beside the logo (desktop) ----------
   Shown from >=1200px, which is where the bar has room for it alongside the
   logo and the actions. The ribbon above stays visible at every width and
   carries the facility descriptor, so the two lines complement each other. */
.jd-tagline{
  display:none;                     /* switched on at >=1200px, see below */
  flex:1 1 auto; min-width:0;
  overflow:hidden;                  /* hard stop: nowrap lines can never spill onto the logo/buttons */
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px; padding:0 14px; text-align:center;
}
.jd-tagline strong{
  font-size:17px; font-weight:700; line-height:1.15;
  color:var(--jd-green-deep);
  white-space:nowrap;
}
.jd-tagline span{
  font-size:10.5px; font-weight:500; line-height:1;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--jd-gold-dp);
  white-space:nowrap;
}
.jd-tagline em{ font-style:normal; color:var(--jd-gold); margin:0 5px; }

/* The right-hand actions occupy ~659px, so the block only has room from 1200px.
   The ribbon stays visible at every width and carries the facility descriptor,
   so the two lines complement each other rather than repeat. */
@media (min-width:1200px){
  .jd-tagline{ display:flex; }
}
/* 1200-1279 has room for the tagline but not the services line (needs ~425px) */
@media (max-width:1279px){
  .jd-tagline span{ display:none; }
}
@media (min-width:1440px){
  .jd-tagline span{ font-size:11.5px; letter-spacing:.1em; }
  .jd-tagline em{ margin:0 7px; }
}

/* ---------- right-hand actions ---------- */
.jd-actions{
  display:flex; align-items:center; gap:0;
  margin:0; padding:0; list-style:none; flex:none;
}
.jd-actions > li{ display:flex; align-items:center; }

.jd-contact > a{
  display:flex; align-items:center; gap:11px;
  padding:6px 16px; text-decoration:none; min-height:46px;
}
.jd-contact + .jd-contact > a{ border-left:1px solid rgba(79,111,82,.16); padding-left:20px; }
.jd-ic{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#f4f7f3,#e9efe8);
  /* solid, not alpha: rgba(79,111,82,.42) resolved to 1.8:1 over the paper bar
     and failed WCAG 1.4.11. #748a77 measures 3.45:1. */
  border:1px solid #748a77;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--jd-green); font-size:15px; line-height:1;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.jd-ic i{ background:transparent; width:auto; height:auto; line-height:1; color:inherit; font-size:inherit; border-radius:0; }
/* WhatsApp carries its own identity at rest, so the two circles are never
   mistaken for each other once the labels drop away on smaller screens */
.jd-wa .jd-ic{
  color:var(--jd-wa);
  border-color:#4f8f84;   /* 3.48:1 on the paper bar, matching the phone chip's 3.45:1 */
  background:linear-gradient(180deg,#f2faf8,#e6f2ef);
}
.jd-ct{ display:flex; flex-direction:column; line-height:1.18; }
.jd-ct small{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jd-gold-dp);
}
/* Tabular figures so the 11-digit number a 65-year-old has to scan and dial
   sits on an even rhythm. */
.jd-ct b{
  font-family:Helvetica, sans-serif;
  font-size:17px; font-weight:600; letter-spacing:.01em;
  color:var(--jd-green-deep);
  font-variant-numeric:tabular-nums;
}

/* ---------- the gold CTA ---------- */
.jd-cta-li{ margin-left:20px; padding-left:20px; position:relative; }
.jd-cta-li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:34px;
  background:linear-gradient(180deg,rgba(79,111,82,0),rgba(79,111,82,.22),rgba(79,111,82,0));
}
.jd-cta{
  --jd-cta-ls:.13em;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border:0; border-radius:0; min-height:46px;
  font-family:var(--jd-serif);
  font-size:14px; font-weight:700;
  letter-spacing:var(--jd-cta-ls); text-transform:uppercase; white-space:nowrap;
  color:#1d2c20;
  background:linear-gradient(180deg,
    #eaddb2 0%, #d9c390 34%, #c9ad72 52%, #d2b87f 66%, #b99a56 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(127,102,48,.30),
    inset 0 -1px 0 rgba(127,102,48,.42),
    0 1px 2px rgba(43,63,47,.12),
    0 8px 20px -12px rgba(43,63,47,.50);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.jd-cta::after{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-22deg); transition:left .65s ease;
}
.jd-cta i{
  font-size:12px; color:inherit; background:transparent;
  width:auto; height:auto; line-height:1;
  margin-left:calc(var(--jd-cta-ls) * -1);
  transition:transform .3s ease;
}

/* the sheen is the most crafted detail here and touch users never hover —
   play it once, shortly after paint, then never again */
@keyframes jd-sheen{ 0%{left:-120%} 100%{left:135%} }
@media (hover:none){
  .jd-cta::after{ animation:jd-sheen 1.05s cubic-bezier(.32,.72,0,1) 1.2s 1 both; }
}

/* ---------- pointer states ---------- */
@media (hover:hover){
  .jd-contact > a:hover .jd-ic{ background:var(--jd-green); border-color:var(--jd-green); color:#fff; transform:translateY(-1px); }
  .jd-wa > a:hover .jd-ic{ background:var(--jd-wa); border-color:var(--jd-wa); color:#fff; }
  .jd-contact > a:hover .jd-ct b{ color:var(--jd-green); }
  .jd-cta:hover{
    transform:translateY(-2px); filter:brightness(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.68),
      inset 0 0 0 1px rgba(127,102,48,.34),
      inset 0 -1px 0 rgba(127,102,48,.42),
      0 2px 4px rgba(43,63,47,.14),
      0 14px 26px -14px rgba(43,63,47,.55);
  }
  .jd-cta:hover::after{ left:135%; }
  .jd-cta:hover i{ transform:translateX(3px); }
}
/* press feedback that works on every input type */
.jd-contact > a:active .jd-ic{
  background:var(--jd-green); border-color:var(--jd-green); color:#fff;
  transform:scale(.93); transition-duration:.06s;
}
.jd-wa > a:active .jd-ic{ background:var(--jd-wa); border-color:var(--jd-wa); }
.jd-cta:active{ transform:translateY(1px); transition-duration:.06s; }

/* ---------- focus ---------- */
/* gold on the near-white bar measured 1.86:1 and failed WCAG 1.4.11.
   A deep-green core clears 3:1 on every surface in the header. */
.jd-header a:focus-visible{
  outline:2px solid var(--jd-green-deep);
  outline-offset:3px;
  border-radius:2px;
}
.jd-contact > a:focus-visible{ box-shadow:0 0 0 5px rgba(203,178,121,.45); }
.jd-cta:focus-visible{ outline-offset:2px; }

/* ---------- condensed state on scroll ---------- */
.jd-header.jd-scrolled .jd-ribbon{ height:0; opacity:0; }
.jd-header.jd-scrolled .jd-bar{ height:58px; box-shadow:0 1px 0 rgba(43,63,47,.06), 0 16px 32px -22px rgba(43,63,47,.65); }
/* scale, not height — GPU-composited, so the mark stays crisp mid-transition */
.jd-header.jd-scrolled .jd-brand img{ transform:scale(.71); }   /* 44px of 62 */

/* height animates only for the scroll-condense, never while the viewport
   is being resized (otherwise breakpoint changes animate, and can stick) */
.jd-header.jd-noanim,.jd-header.jd-noanim *{ transition:none !important; }

/* ---------- keep the banner and every anchor clear of the fixed header ---------- */
.banner-main{ margin-top:calc(var(--jd-ribbon-h) + var(--jd-bar-h)); }
html{ scroll-padding-top:calc(var(--jd-ribbon-h) + var(--jd-bar-h) + 16px); }
#enqform{ scroll-margin-top:calc(var(--jd-ribbon-h) + var(--jd-bar-h) + 16px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1199px){
  .jd-header .jd-bar > .container-fluid{ padding:0 18px; }
  .jd-wa .jd-ct small{ display:none; }
  .jd-ct b{ font-size:16px; }
  .jd-contact > a{ padding:6px 13px; }
  .jd-contact + .jd-contact > a{ padding-left:16px; }
  .jd-cta{ --jd-cta-ls:.10em; padding:12px 20px; font-size:13.5px; }
  .jd-ribbon-text{ --jd-ls:.14em; font-size:12.5px; }
}

@media (max-width:991px){
  :root{ --jd-ribbon-h:32px; --jd-bar-h:64px; }
  .jd-brand img{ height:52px; }
  .jd-header.jd-scrolled .jd-brand img{ transform:scale(.846); }   /* 44px of 52 */
  .jd-ct{ display:none; }
  .jd-contact > a{ padding:6px 8px; }
  .jd-contact + .jd-contact > a{ border-left:0; padding-left:8px; }
  /* Once the labels drop away these circles ARE the whole message, so fill them
     solid — they read unmistakably as buttons and each keeps its own identity.
     White glyph measures 5.63:1 on the green and 5.22:1 on the WhatsApp green. */
  .jd-ic{
    background:var(--jd-green);
    border-color:var(--jd-green);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  }
  .jd-wa .jd-ic{
    background:var(--jd-wa);
    border-color:var(--jd-wa);
    color:#fff;
  }
  .jd-cta-li{ margin-left:10px; padding-left:10px; }
  .jd-cta-li::before{ display:none; }
  .jd-ribbon-text{ --jd-ls:.13em; font-size:12px; }
  .jd-dia{ max-width:90px; }
  .jd-header.jd-scrolled .jd-bar{ height:54px; }
}

@media (max-width:767px){
  :root{ --jd-ribbon-h:30px; --jd-bar-h:60px; }
  .jd-header .jd-bar > .container-fluid{ padding:0 12px; gap:8px; }
  .jd-brand img{ height:46px; }
  .jd-header.jd-scrolled .jd-brand img{ transform:scale(.87); }   /* 40px of 46 */
  .jd-rb-lg{ display:none; }
  .jd-rb-sm{ display:inline; }
  .jd-ribbon-inner{ gap:12px; padding:0 10px; }
  .jd-ribbon-text{ --jd-ls:.10em; font-size:11px; }
  .jd-dia{ max-width:40px; min-width:16px; }
  .jd-ic{ width:40px; height:40px; font-size:15px; }
  .jd-contact > a{ padding:4px 5px; }
  .jd-contact + .jd-contact > a{ padding-left:5px; }
  .jd-cta-li{ margin-left:6px; padding-left:0; }
  .jd-cta{ --jd-cta-ls:.07em; padding:11px 15px; font-size:12.5px; gap:7px; min-height:46px; }
  .jd-cta i{ font-size:11px; }
  .banner-main{ margin-top:calc(var(--jd-ribbon-h) + var(--jd-bar-h)); }
}

@media (max-width:400px){
  .jd-ic{ width:37px; height:37px; font-size:14px; }
  .jd-cta{ padding:10px 12px; font-size:12px; min-height:44px; }
  .jd-ribbon-text{ --jd-ls:.08em; font-size:10px; }
}

/* ---------- reduced motion: suppress movement, keep colour crossfades ---------- */
/* only genuinely small handsets drop the logo again — 390-430px covers most
   current phones and keeps the larger mark */
@media (max-width:360px){
  .jd-brand img{ height:40px; }
}

@media (prefers-reduced-motion:reduce){
  .jd-ribbon,.jd-header .jd-bar,.jd-brand img{ transition-duration:.01ms !important; }
  .jd-cta::after{ display:none !important; }
  .jd-cta:hover,.jd-cta:active,
  .jd-contact > a:hover .jd-ic,.jd-contact > a:active .jd-ic{ transform:none !important; }
}