/* ==========================================================================
   JAGRITI DHAM - SITE HEADER (main site, www.jagritidham.com)
   ==========================================================================
   THIS FILE IS css/header2.css FROM /best-luxury-senior-citizen-home-kolkata/,
   VERBATIM, plus an adaptation layer at the foot.

   That is deliberate. The brief was "make it like that page's header", and the
   surest way to look identical to something is to be the same stylesheet. The
   previous attempt re-implemented the look in a different idiom and came out
   50-80px taller and visibly heavier - measured 196-225px against the
   reference's 146px - which is what the client was reacting to.

   The markup in template-parts/site-header.php was rebuilt to the reference's
   own shape, so nearly every rule below applies unchanged. The adaptation
   layer only has to answer four things the reference never had to:
       - a WordPress menu instead of a hand-written <ul>
       - one dropdown ("What is Jagriti Dham" has three children)
       - a theme underneath with its own opinions about .navbar
       - the .innerbanner slab that inner pages put behind the header

   Reference geometry, measured live on that page:
       viewport      header   ribbon   bar   nav row
       375-600         90       30      60     -     (burger)
       768-900         94       30      64     -     (burger)
       992+           146       30      70     46
   ========================================================================== */

/* ==========================================================================
   JAGRITI DHAM — /best-luxury-senior-citizen-home-kolkata/  HEADER
   Loaded LAST, after style2.css and responsive2.css, so it wins the cascade
   on source order alone -- no declaration here is flagged to beat a legacy
   rule. (The eight !important uses below are the visually-hidden utility, the
   resize no-animation escape hatch, the >=992 panel suppression, and the
   reduced-motion and print blocks -- none of them is a specificity fight.)
   Everything is namespaced under .jd-header except the offset rules in
   section 7, which have to reach .banner-main and the in-page anchors.

   WHAT WAS WRONG WITH THE OLD ONE — all four measured on the live page
   before this was written:

     1. NO NAVIGATION ON A PHONE. The link column carried `d-none d-sm-block`
        and there was no toggler anywhere in the markup, so under 576px the
        count of reachable section links was exactly ZERO. Nine sections —
        Services, Pricing, Amenities, Our Community, Gallery, Why Jagriti
        Dham, Blog, Location, Contact — and a phone visitor could reach none
        of them from the header. That is the single biggest thing fixed here.

     2. 17px TAP TARGETS, TOUCHING. Each nav link measured 17px tall against
        the 44px floor, and the minimum gap between neighbouring links was
        0px — they shared edges, so a mis-tap landed on the wrong section.
        The phone link measured 40x16.

     3. THE HOVER STATE DID NOTHING. style2.css:161 says
        `.header_links li a:hover{ color:var(--green) }` and --green is never
        declared anywhere in this project (nor are --black or --gold, both
        also used). An undefined custom property with no fallback makes the
        declaration invalid, so nine links had no hover response at all.

     4. THE BANNER SAT UNDER THE HEADER. style2.css:231 hard-codes
        `.banner-main{margin-top:80px}` while the header measured 94px tall,
        so the top 14px of the slider was permanently behind the bar. That
        number is now derived from the header's own height variables and
        cannot drift again.

   The design language is deliberately the same as the sibling landing page
   /luxurious-senior-living/ — same ribbon, same warm paper bar, same brass
   CTA plate, same tokens. These two pages run in the same campaign; a reader
   who sees both should see one company.
   ========================================================================== */

.jd-header{
  /* --- palette, shared with the sibling page's header.css --- */
  --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 ink and borders */
  --jd-paper-1:#fdfaf2;
  --jd-paper-2:#f8f3e7;
  --jd-nav-bg:#eae2cc;            /* the nav band. A tint alone cannot separate two
                                     creams - even #e6dcc2 only reaches 1.23:1 against
                                     the bar - so the shelf is drawn by its RULES:
                                     a firm brass hairline on top and the engraved
                                     brass rule along the bottom. The tint just stops
                                     the two surfaces reading as one sheet of paper. */

  /* --- heights. Every offset below is derived from these three, so the
         header can be re-proportioned by editing this block alone. --- */
  --jd-ribbon-h:30px;
  --jd-bar-h:70px;
  --jd-nav-h:46px;

  position:fixed; top:0; left:0; right:0; z-index:9999;
  font-family:Helvetica, Arial, sans-serif;
}
.jd-header *,
.jd-header *::before,
.jd-header *::after{ box-sizing:border-box; }
.jd-header a{ -webkit-tap-highlight-color:transparent; text-decoration:none; }

/* The house visually-hidden idiom, scoped so it cannot restyle anything
   else on the page. */
.jd-header .jd-sr{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ==========================================================================
   1. THE RIBBON
   ========================================================================== */
.jd-header .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 its light direction with the bar below. */
  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-header .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-header .jd-ribbon-inner{
  height:100%; display:flex; align-items:center; justify-content:center;
  gap:18px; padding:0 16px;
}
.jd-header .jd-ribbon-text{
  --jd-ls:.155em;
  font-size:12.5px; font-weight:400;
  letter-spacing:var(--jd-ls); text-transform:uppercase;
  color:#f2e8d2;                  /* 8.06:1 on the ribbon ground */
  white-space:nowrap; line-height:1;
  margin-right:calc(var(--jd-ls) * -1);   /* trailing letter-space compensation */
}
.jd-header .jd-rb-sm{ display:none; }

/* the flanking rules reach for the edges and dissolve */
.jd-header .jd-dia{
  position:relative;
  flex:1 1 0; width:auto; height:1px; max-width:150px; min-width:24px;
  background:linear-gradient(90deg,rgba(203,178,121,0),rgba(203,178,121,.55));
}
.jd-header .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 merely dying — 1px
   stays sharp at every DPR, unlike a rotated square */
.jd-header .jd-dia::after{
  content:""; position:absolute; right:0; top:-5px;
  width:1px; height:11px; background:rgba(203,178,121,.75);
}
.jd-header .jd-ribbon-inner > .jd-dia:last-child::after{ right:auto; left:0; }

/* ==========================================================================
   2. THE MAIN BAR — brand, phone, CTA, and (under 992) the menu button
   ========================================================================== */
.jd-header .jd-bar{
  position:relative;
  height:var(--jd-bar-h);
  background:linear-gradient(180deg,var(--jd-paper-1) 0%,var(--jd-paper-2) 100%);
  transition:height .34s cubic-bezier(.32,.72,0,1) .05s;
}
.jd-header .jd-bar-inner{
  height:100%; max-width:1560px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:16px; padding:0 26px;
}

/* ---------- brand ---------- */
.jd-header .jd-brand{
  display:flex; align-items:center; gap:13px; flex:none; padding:0; margin:0;
  min-height:44px;                 /* the logo is 40-54px tall depending on the
                                      width, but this is a LINK, and a link is a
                                      target: without this the brand measured 40
                                      on a phone, under the floor everything else
                                      in the bar clears */
}
.jd-header .jd-brand img{
  height:54px; width:auto; display:block;
  transform-origin:left center;
  transition:transform .40s cubic-bezier(.32,.72,0,1) .05s;
}
/* The old header set this line at 10px, which is under the 12px floor this
   audience needs and was the smallest type anywhere on the page. */
.jd-header .jd-brand-sub{
  display:none;                    /* switched on at >=1200, see below */
  font-size:11.5px; font-weight:600; line-height:1.25;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--jd-gold-dp);         /* 4.84:1 on the paper bar */
  max-width:130px;
  padding-left:13px;
  border-left:1px solid rgba(79,111,82,.24);
}

/* ---------- the right-hand cluster ---------- */
.jd-header .jd-bar-right{
  display:flex; align-items:center; gap:8px; flex:none;
}

.jd-header .jd-phone{
  display:flex; align-items:center; gap:11px;
  padding:6px 14px; min-height:46px;
}
.jd-header .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) resolves to 1.8:1 over the paper
     bar and fails 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;
}
/* style2.css:208 puts a 40x40 green disc behind EVERY .social-media-top li i.
   These are different furniture; reset the inherited box explicitly. */
.jd-header .jd-ic i{
  background:transparent; width:auto; height:auto; line-height:1;
  color:inherit; font-size:inherit; border-radius:0;
}
.jd-header .jd-ct{ display:flex; flex-direction:column; line-height:1.18; }
.jd-header .jd-ct small{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jd-gold-dp);
}
/* Tabular figures, so the eleven digits a 68-year-old has to read off the
   screen and key into a phone sit on an even rhythm. */
.jd-header .jd-ct b{
  font-size:17px; font-weight:600; letter-spacing:.01em;
  color:var(--jd-green-deep);
  font-variant-numeric:tabular-nums;
}

/* ---------- the brass CTA ----------
   The old header had no call to action at all: the ENQUIRE NOW button was
   commented out in the markup (index.php:180-184), leaving a lead-generation
   page whose header asked for nothing. */
.jd-header .jd-cta{
  --jd-cta-ls:.12em;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border:0; border-radius:0; min-height:46px;
  font-size:14px; font-weight:700;
  letter-spacing:var(--jd-cta-ls); text-transform:uppercase; white-space:nowrap;
  color:#1d2c20;                   /* 6.24:1 at the plate's darkest stop */
  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-header .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-header .jd-cta-sm{ display:none; }

.jd-header .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 thing in the bar 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-header .jd-cta::after{ animation:jd-sheen 1.05s cubic-bezier(.32,.72,0,1) 1.2s 1 both; }
}

/* ---------- the menu button (under 992 only) ---------- */
.jd-header .jd-burger{
  display:none;                    /* switched on under 992, see below */
  align-items:center; justify-content:center;
  width:46px; height:46px; flex:none;
  padding:0; border:1px solid #748a77; border-radius:0;
  background:linear-gradient(180deg,#f4f7f3,#e9efe8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.jd-header .jd-burger-box{
  display:block; position:relative; width:22px; height:16px;
}
.jd-header .jd-burger-box span{
  position:absolute; left:0; width:100%; height:2px; border-radius:1px;
  background:var(--jd-green-deep);
  transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .18s linear, top .28s cubic-bezier(.32,.72,0,1);
}
.jd-header .jd-burger-box span:nth-child(1){ top:0; }
.jd-header .jd-burger-box span:nth-child(2){ top:7px; }
.jd-header .jd-burger-box span:nth-child(3){ top:14px; }
.jd-header .jd-burger[aria-expanded="true"]{ background:var(--jd-green); border-color:var(--jd-green); }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span{ background:#fff; }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span:nth-child(1){ top:7px; transform:rotate(45deg); }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span:nth-child(2){ opacity:0; }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* ==========================================================================
   3. THE NAVIGATION ROW  (>=992px)
   ==========================================================================
   Its own full-width band rather than a slot inside the bar. Nine links need
   about 790px at a legible size; sharing the bar with the brand, the phone
   block and the CTA leaves roughly 740px at 1280 and the row would have had
   to shrink to fit — which is how the old 15px/0-padding cramming happened.
   On its own row every link gets a 44px-tall target with real space around
   it at every width down to 992. */
.jd-header .jd-nav{
  height:var(--jd-nav-h);
  background:var(--jd-nav-bg);
  border-top:1px solid rgba(127,102,48,.55);
  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;
}
/* the engraved brass rule, drawn INSIDE the box so --jd-nav-h stays the true
   height and every offset below stays exact */
.jd-header .jd-nav{ position:relative; }
.jd-header .jd-nav::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-nav ul{
  height:100%; max-width:1560px; margin:0 auto; padding:0 20px;
  list-style:none;
  display:flex; align-items:stretch; justify-content:center; gap:2px;
}
.jd-header .jd-nav li{ display:flex; float:none; }
.jd-header .jd-nav a{
  position:relative;
  display:flex; align-items:center;
  padding:0 15px;
  min-height:44px;                /* measured 43 at a 44px row: the 1px top border
                                     and the 3px engraved rule live inside the box */
  font-size:15px; font-weight:500; line-height:1.1;
  white-space:nowrap;
  color:#33492f;                  /* 8.16:1 on the nav band */
  transition:color .22s ease, background-color .22s ease;
}
/* the brass underline: a real element rather than a border, so it can grow
   from the centre without shifting the label */
.jd-header .jd-nav a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:7px; height:2px;
  background:var(--jd-gold-dp);
  transition:left .26s cubic-bezier(.32,.72,0,1), right .26s cubic-bezier(.32,.72,0,1);
}
.jd-header .jd-nav a[aria-current="true"]{ color:var(--jd-green-dark); font-weight:700; }
.jd-header .jd-nav a[aria-current="true"]::after{ left:15px; right:15px; }

/* ==========================================================================
   4. THE MOBILE PANEL  (under 992px)
   ==========================================================================
   This is the piece the page did not have. Nine sections were unreachable
   from a phone; they are all here, each on a 52px row. */
.jd-header .jd-panel{
  position:absolute; left:0; right:0; top:100%;
  max-height:calc(100vh - var(--jd-ribbon-h) - var(--jd-bar-h));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--jd-paper-1) 0%,var(--jd-paper-2) 140px);
  border-top:1px solid rgba(127,102,48,.35);
  box-shadow:0 22px 40px -18px rgba(29,44,32,.55);
  transform-origin:top center;
}
.jd-header .jd-panel[hidden]{ display:none; }
.jd-header .jd-panel ul{ list-style:none; margin:0; padding:6px 0 0; }
.jd-header .jd-panel li{ float:none; }
.jd-header .jd-panel li + li a{ border-top:1px solid rgba(79,111,82,.13); }
.jd-header .jd-panel a.jd-p-link{
  display:flex; align-items:center; justify-content:space-between;
  min-height:52px; padding:0 22px;
  font-size:16.5px; font-weight:500;
  color:#33492f;
}
.jd-header .jd-panel a.jd-p-link::after{
  content:""; width:7px; height:7px; flex:none;
  border-right:2px solid var(--jd-gold-dp); border-bottom:2px solid var(--jd-gold-dp);
  transform:rotate(-45deg); opacity:.75;
}
.jd-header .jd-panel a.jd-p-link[aria-current="true"]{
  color:var(--jd-green-dark); font-weight:700;
  background:rgba(203,178,121,.20);
  box-shadow:inset 3px 0 0 var(--jd-gold-dp);
}
/* the contact block that closes the panel */
.jd-header .jd-p-foot{
  margin-top:8px; padding:16px 22px 22px;
  border-top:1px solid rgba(127,102,48,.35);
  background:rgba(203,178,121,.13);
  display:flex; flex-direction:column; gap:11px;
}
.jd-header .jd-p-foot .jd-p-contact{
  display:flex; align-items:center; gap:13px; min-height:52px;
  font-size:17px; font-weight:600; color:var(--jd-green-deep);
  font-variant-numeric:tabular-nums;
}
.jd-header .jd-p-foot .jd-p-contact .jd-ic{ width:42px; height:42px; font-size:16px; }
.jd-header .jd-p-foot .jd-p-wa .jd-ic{
  color:var(--jd-wa); border-color:#4f8f84;
  background:linear-gradient(180deg,#f2faf8,#e6f2ef);
}
.jd-header .jd-p-foot .jd-cta{ width:100%; min-height:54px; font-size:15px; }

/* the scrim behind the open panel — a tap anywhere on the page closes it,
   which is what everyone tries first */
.jd-header .jd-scrim{
  position:fixed; inset:0;
  background:rgba(29,44,32,.45);
  /* inset:0 rather than top:calc(ribbon + bar). That calc is the header's
     RESTING height, so with the header condensed the scrim started 34px too
     low and left a live, clickable strip of page showing between the bar and
     the dimming. z-index:-1 inside the header's own stacking context puts it
     behind the ribbon, the bar and the panel but in front of the page, so
     covering the full viewport costs nothing. */
  z-index:-1;
}
.jd-header .jd-scrim[hidden]{ display:none; }

/* ==========================================================================
   5. POINTER, PRESS AND FOCUS STATES
   ========================================================================== */
@media (hover:hover){
  .jd-header .jd-nav a:hover{ color:var(--jd-green-dark); background:rgba(203,178,121,.16); }
  .jd-header .jd-nav a:hover::after{ left:15px; right:15px; }
  .jd-header .jd-phone:hover .jd-ic{ background:var(--jd-green); border-color:var(--jd-green); color:#fff; transform:translateY(-1px); }
  .jd-header .jd-phone:hover .jd-ct b{ color:var(--jd-green); }
  .jd-header .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-header .jd-cta:hover::after{ left:135%; }
  .jd-header .jd-cta:hover i{ transform:translateX(3px); }
  .jd-header .jd-burger:hover{ background:var(--jd-green); border-color:var(--jd-green); }
  .jd-header .jd-burger:hover .jd-burger-box span{ background:#fff; }
  .jd-header .jd-panel a.jd-p-link:hover{ background:rgba(203,178,121,.16); color:var(--jd-green-dark); }
}
/* press feedback that works on every input type, hover or not */
.jd-header .jd-phone:active .jd-ic{
  background:var(--jd-green); border-color:var(--jd-green); color:#fff;
  transform:scale(.93); transition-duration:.06s;
}
.jd-header .jd-cta:active{ transform:translateY(1px); transition-duration:.06s; }
.jd-header .jd-nav a:active{ background:rgba(203,178,121,.28); }
.jd-header .jd-panel a.jd-p-link:active{ background:rgba(203,178,121,.28); }

/* Focus. The house idiom is three separate rules — a bare :focus ring first
   for engines with no :focus-visible, then the reset, then the modern rule —
   because ONE unknown pseudo-class invalidates an entire selector list and
   the two-rule form silently leaves older browsers with no ring at all.
   Deep green, not gold: gold on this near-white bar measured 1.86:1. */
.jd-header a:focus,
.jd-header button:focus{ outline:2px solid var(--jd-green-deep); outline-offset:3px; border-radius:2px; }
.jd-header a:focus:not(:focus-visible),
.jd-header button:focus:not(:focus-visible){ outline:0; }
.jd-header a:focus-visible,
.jd-header button:focus-visible{ outline:2px solid var(--jd-green-deep); outline-offset:3px; border-radius:2px; }
/* inside the deep-green ribbon the same ring would vanish, so invert it */
.jd-header .jd-ribbon a:focus-visible{ outline-color:var(--jd-gold-lt); }
.jd-header .jd-cta:focus-visible{ outline-offset:2px; }

/* ==========================================================================
   6. THE CONDENSED STATE
   ========================================================================== */
.jd-header.jd-scrolled .jd-ribbon{ height:0; opacity:0; }
.jd-header.jd-scrolled .jd-bar{ height:56px; }
/* the nav row keeps its height when the header condenses. Shrinking it to 40
   put every link back under the 44px floor, and collapsing the ribbon plus
   trimming the bar already returns 44px - enough. */
.jd-header.jd-scrolled .jd-nav{ box-shadow:0 1px 0 rgba(43,63,47,.06), 0 16px 32px -22px rgba(43,63,47,.65); }
/* scale rather than height, so the mark stays crisp mid-transition and the
   browser composites it on the GPU instead of relaying out the bar */
.jd-header.jd-scrolled .jd-brand img{ transform:scale(.815); }   /* 44px of 54 */
/* Height animates only for the scroll-condense, never while the viewport is
   being resized — otherwise crossing a breakpoint animates, and can stick. */
.jd-header.jd-noanim,
.jd-header.jd-noanim *{ transition:none !important; }

/* ==========================================================================
   7. OFFSETS THAT DEPEND ON THE HEADER'S HEIGHT
   ==========================================================================
   style2.css:231 hard-codes .banner-main{margin-top:80px} against a header
   that measured 94px, so 14px of the slider was hidden behind the bar. These
   are derived from the same variables the header is built from, so they
   cannot drift out of step again. --jd-h-total is declared on :root as well
   as .jd-header because .banner-main is not a descendant of the header. */
:root{
  --jd-h-ribbon:30px;
  --jd-h-bar:70px;
  --jd-h-nav:46px;
  --jd-h-total:calc(var(--jd-h-ribbon) + var(--jd-h-bar) + var(--jd-h-nav));
}
.banner-main{ margin-top:var(--jd-h-total); }
html{ scroll-padding-top:calc(var(--jd-h-total) + 14px); }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

/* the brand's descriptor only has room once the bar is wide enough that the
   nine-link row below it is not the constraint */
@media (min-width:1200px){
  .jd-header .jd-brand-sub{ display:block; }
}

@media (max-width:1199px){
  .jd-header .jd-bar-inner{ padding:0 18px; }
  .jd-header .jd-nav a{ padding:0 11px; font-size:14.5px; }
  .jd-header .jd-cta{ --jd-cta-ls:.09em; padding:12px 19px; font-size:13.5px; }
  .jd-header .jd-ribbon-text{ --jd-ls:.14em; font-size:12px; }
}

/* ---- the hand-off: nav row out, menu button in ---- */
@media (min-width:992px){
  .jd-header .jd-panel,
  .jd-header .jd-scrim{ display:none !important; }
}
@media (max-width:991px){
  .jd-header{ --jd-bar-h:64px; --jd-nav-h:0px; }
  :root{ --jd-h-bar:64px; --jd-h-nav:0px; }
  .jd-header .jd-nav{ display:none; }
  .jd-header .jd-burger{ display:flex; }
  .jd-header .jd-brand img{ height:48px; }
  .jd-header.jd-scrolled .jd-brand img{ transform:scale(.917); }   /* 44px of 48 */
  .jd-header.jd-scrolled .jd-bar{ height:54px; }
  /* the bar carries the whole header's shadow once the nav row is gone */
  .jd-header .jd-bar{ box-shadow:0 1px 0 rgba(43,63,47,.05), 0 12px 26px -20px rgba(43,63,47,.6); }
  .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-ct{ display:none; }
  .jd-header .jd-phone{ padding:6px 6px; }
  /* Once the label drops away the circle IS the whole message, so fill it
     solid — it reads unmistakably as a button. White on the green measures
     5.63:1. */
  .jd-header .jd-ic{
    background:var(--jd-green); border-color:var(--jd-green); color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
    width:40px; height:40px;
  }
  .jd-header .jd-ribbon-text{ --jd-ls:.13em; font-size:11.5px; }
  .jd-header .jd-dia{ max-width:90px; }
}

@media (max-width:767px){
  .jd-header{ --jd-bar-h:60px; }
  :root{ --jd-h-ribbon:30px; --jd-h-bar:60px; }
  .jd-header .jd-bar-inner{ padding:0 12px; gap:8px; }
  .jd-header .jd-brand img{ height:44px; }
  .jd-header.jd-scrolled .jd-brand img{ transform:none; }
  .jd-header.jd-scrolled .jd-bar{ height:56px; }
  .jd-header .jd-rb-lg{ display:none; }
  .jd-header .jd-rb-sm{ display:inline; }
  .jd-header .jd-ribbon-inner{ gap:12px; padding:0 10px; }
  .jd-header .jd-ribbon-text{ --jd-ls:.10em; font-size:11px; }
  .jd-header .jd-dia{ max-width:40px; min-width:16px; }
  /* THE CTA STAYS IN THE BAR ON PHONES. Four objects — brand, phone, this
     and the menu button — on a 375px line, and every one of them still has
     to clear 44px. That only works if each gives up something: the logo
     drops to 42, the phone circle to 44, the gaps to 6 and the bar padding
     to 10, and the label shortens to one word. Measured at 320 the four
     occupy 274px of 320, and at 375 they occupy 274 of 375. */
  .jd-header .jd-bar-inner{ gap:6px; padding:0 10px; }
  .jd-header .jd-brand img{ height:42px; }
  .jd-header .jd-ic{ width:44px; height:44px; font-size:15px; }
  .jd-header .jd-phone{ padding:0; }
  .jd-header .jd-cta-lg{ display:none; }
  .jd-header .jd-cta-sm{ display:inline; }
  .jd-header .jd-cta{
    --jd-cta-ls:.06em;
    padding:10px 12px; font-size:12px; gap:6px; min-height:44px;
  }
  .jd-header .jd-cta i{ font-size:11px; }
  .jd-header .jd-burger{ width:44px; height:44px; }
}

@media (max-width:400px){
  /* 44 is the floor and it does not move; what moves is the type and the
     air around it. The circle stays 44 rather than dropping to 38 — it is
     the one control on this bar a reader is most likely to be reaching for
     in a hurry. */
  .jd-header .jd-brand img{ height:40px; }
  .jd-header .jd-cta{ padding:10px 10px; font-size:11.5px; gap:5px; }
  .jd-header .jd-ribbon-text{ --jd-ls:.07em; font-size:10.5px; }
  .jd-header .jd-panel a.jd-p-link{ padding:0 16px; font-size:16px; }
  .jd-header .jd-p-foot{ padding:14px 16px 18px; }
}

@media (max-width:340px){
  /* Below 340 the four no longer fit at 44px each, and shaving the targets
     to make them fit would be the wrong trade. The phone is the one that
     leaves — it is the first row of the menu sheet and the whole of the
     page's own fixed bottom bar, so it is never more than one tap away. */
  .jd-header .jd-phone{ display:none; }
  .jd-header .jd-brand img{ height:38px; }
}

/* ==========================================================================
   9. ENVIRONMENT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .jd-header .jd-ribbon,
  .jd-header .jd-bar,
  .jd-header .jd-nav,
  .jd-header .jd-brand img,
  .jd-header .jd-nav a::after,
  .jd-header .jd-burger-box span{ transition-duration:.01ms !important; }
  .jd-header .jd-cta::after{ display:none !important; }
  .jd-header .jd-cta:hover,
  .jd-header .jd-cta:active,
  .jd-header .jd-phone:hover .jd-ic,
  .jd-header .jd-phone:active .jd-ic{ transform:none !important; }
}

@media (forced-colors:active){
  .jd-header .jd-bar,
  .jd-header .jd-nav,
  .jd-header .jd-panel{ background:Canvas; border-bottom:1px solid CanvasText; }
  .jd-header .jd-nav a,
  .jd-header .jd-panel a.jd-p-link{ color:LinkText; }
  .jd-header .jd-nav a[aria-current="true"],
  .jd-header .jd-panel a.jd-p-link[aria-current="true"]{ color:Highlight; }
  .jd-header .jd-cta,
  .jd-header .jd-burger{ background:ButtonFace; color:ButtonText; border:1px solid ButtonText; box-shadow:none; forced-color-adjust:none; }
  .jd-header .jd-ic{ background:ButtonFace; color:ButtonText; border:1px solid ButtonText; }
}

@media print{
  .jd-header{ position:static; }
  .jd-header .jd-nav,
  .jd-header .jd-panel,
  .jd-header .jd-scrim,
  .jd-header .jd-burger,
  .jd-header .jd-cta{ display:none !important; }
  .banner-main{ margin-top:0 !important; }
}


/* ==========================================================================
   ADAPTATION LAYER - main site only
   ==========================================================================
   Everything above is the reference stylesheet untouched. Everything below
   reconciles it with the WordPress theme. Appended, so it wins ties on source
   order within the same file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. THE HEADER ELEMENT ALSO CARRIES .menumain AND .navbar
   --------------------------------------------------------------------------
   Both are load-bearing and cannot be dropped:
     .menumain - footer.php:434 does querySelector('.menumain .navbar-nav')
                 to drive the anchor-menu highlighting.
     .navbar   - js/custom.js reads querySelector('.navbar').offsetHeight on
                 every scroll. With no .navbar in the document it throws.
   So the theme's and Bootstrap's .navbar rules land on our header element and
   have to be undone. style.css says
       .navbar{padding:0;z-index:1;top:0;position:absolute;width:100%}
   and Bootstrap says display:flex;flex-wrap:wrap;align-items:center;
   justify-content:space-between. The header is a three-row stack, and it is
   position:fixed from the reference sheet - both of which those rules break.

   navbar-dark, bg-dark and navbar-expand-md were REMOVED from the markup
   instead of being fought here, which switches off four !important traps at
   source rather than out-shouting them. See the note in site-header.php. */
#navbar_top .jd-header.navbar{
  display:block;
  flex-wrap:nowrap;
  padding:0;
  position:fixed; top:0; left:0; right:0;
  width:auto;
  z-index:9999;
}

/* --------------------------------------------------------------------------
   B. THE CUSTOMIZER GUARD
   --------------------------------------------------------------------------
   Appearance > Customize > Additional CSS prints AFTER every enqueued
   stylesheet, so it wins ties. Its film rule is
       body.home #navbar_top:not(.fixed-top) .navbar{background:rgba(0,0,0,.45)!important}
   - (1 id, 3 classes, 1 element). Repeating the id gives TWO ids, which beats
   any single-id selector however many classes it carries. Measured before
   this rule existed: the bar rendered rgba(0,0,0,0.45) instead of paper on
   every banner page.
   The Customizer should still be emptied; this is insurance, not a licence. */
#navbar_top#navbar_top .jd-header.navbar{ background:none !important; }
#navbar_top#navbar_top .jd-bar{ background-color:var(--jd-bar-bg,#fbf7ec) !important; }
#navbar_top#navbar_top .jd-header .navbar::after{ background:none; }

/* --------------------------------------------------------------------------
   C. THE WORDPRESS MENU INSIDE .jd-nav
   --------------------------------------------------------------------------
   The reference nav is `.jd-nav > ul > li > a`. WordPress emits
   `ul.navbar-nav > li.nav-item > a.nav-link`, and for the one parent item a
   nested `ul.dropdown-menu`. The reference's `.jd-header .jd-nav ul` rule
   would therefore also hit the DROPDOWN's ul and lay it out as a second
   shelf - 1560px wide, flex, full height. Re-scope the shelf rules to the
   direct child only, and give the dropdown its own treatment. */
.jd-header .jd-nav > ul{
  height:100%; max-width:1560px; margin:0 auto; padding:0 20px;
  list-style:none;
  display:flex; align-items:stretch; justify-content:center;
  /* flex-direction MUST be stated. Bootstrap's `.navbar-nav{flex-direction:
     column}` is only (0,1,0) and loses to this selector on `display`, but an
     undeclared property is not a won one - it simply inherits Bootstrap's
     column and every item stacks. Measured before this line: the nav box was
     the right 46px but the nine items sat on nine separate rows inside it. */
  flex-direction:row;
  flex-wrap:nowrap;
}
.jd-header .jd-nav > ul > li{ display:flex; align-items:stretch; margin:0; }
/* WordPress marks two entries d-none; they must not take space or show */
.jd-header .jd-nav > ul > li.d-none{ display:none !important; }

/* the theme's own list bullets and margins */
.jd-header .jd-nav ul li::before{ content:none; }
.jd-header .jd-nav ul li{ list-style:none; }

/* --------------------------------------------------------------------------
   D. THE DROPDOWN
   --------------------------------------------------------------------------
   The reference header has no dropdown; this menu has one. It opens on hover
   and on focus-within so a keyboard can reach it, and closes on Escape (the
   script handles that). display stays block throughout so opacity and
   transform can animate - toggling display cannot be transitioned.
   Bootstrap's own dropdown JS is still bound via data-bs-toggle, so a TOUCH
   tap also opens it by adding .show; that case is covered too. */
.jd-header .jd-nav > ul > li.dropdown{ position:relative; }
.jd-header .jd-nav > ul > li.dropdown > a::before{
  /* the caret, drawn rather than a glyph so it inherits colour cleanly */
  content:""; display:inline-block; vertical-align:middle;
  width:5px; height:5px; margin-left:7px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.jd-header .jd-nav > ul > li.dropdown:hover > a::before,
.jd-header .jd-nav > ul > li.dropdown:focus-within > a::before{ transform:rotate(-135deg) translate(-3px,-3px); }

.jd-header .jd-nav ul.dropdown-menu{
  display:block;
  position:absolute; top:100%; left:50%; transform:translate(-50%,-6px);
  min-width:238px; max-width:none; width:auto; height:auto;
  margin:0; padding:6px;
  list-style:none;
  background:var(--jd-paper-2,#f8f3e7);
  border:1px solid rgba(168,134,63,.34);
  border-radius:3px;
  box-shadow:0 18px 34px -22px rgba(43,63,47,.75);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index:20;
}
.jd-header .jd-nav > ul > li.dropdown:hover > ul.dropdown-menu,
.jd-header .jd-nav > ul > li.dropdown:focus-within > ul.dropdown-menu,
.jd-header .jd-nav ul.dropdown-menu.show{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
.jd-header .jd-nav ul.dropdown-menu > li{ display:block; width:100%; }
.jd-header .jd-nav ul.dropdown-menu > li > a{
  display:block; min-height:0; padding:10px 12px;
  font-size:14.5px; line-height:1.3; white-space:normal;
  border-radius:2px;
}
.jd-header .jd-nav ul.dropdown-menu > li > a::after{ content:none; }   /* no brass underline in here */
.jd-header .jd-nav ul.dropdown-menu > li > a:hover,
.jd-header .jd-nav ul.dropdown-menu > li > a:focus-visible{
  background:#4f6f52; color:#fff;
}

/* --------------------------------------------------------------------------
   E. THE PANEL MENU
   --------------------------------------------------------------------------
   wp_nav_menu is called a second time with menu_class="jd-panel-nav", so the
   phone menu is the same menu and can never drift. The dropdown's children
   are shown inline and indented rather than behind a second tap - on a phone
   a disclosure inside a drawer is one interaction too many, and there are
   only three of them. */
.jd-panel ul.jd-panel-nav,
.jd-panel ul.jd-panel-nav ul{ list-style:none; margin:0; padding:0; }
.jd-panel ul.jd-panel-nav li::before{ content:none; }
.jd-panel ul.jd-panel-nav > li.d-none{ display:none !important; }
/* 52px, matched to the reference. Measured on the live page at 820px, its
   panel rows are 52px each; padding alone here produced 48. min-height states
   the target directly rather than leaving it to the sum of a font size, a line
   height and two paddings - which is what let the dropdown children drift to
   41px in the first place. */
.jd-panel ul.jd-panel-nav a{
  display:flex; align-items:center;
  min-height:52px;
  padding:8px 4px;
  font-size:16.5px; line-height:1.25; font-weight:500;
  color:#33492f;
  border-bottom:1px solid rgba(168,134,63,.24);
}
.jd-panel ul.jd-panel-nav a:hover,
.jd-panel ul.jd-panel-nav a:focus-visible{ color:#1f3a24; }
.jd-panel ul.jd-panel-nav ul.dropdown-menu{
  display:block; position:static; opacity:1; visibility:visible;
  transform:none; pointer-events:auto; box-shadow:none; border:0;
  background:none; min-width:0;
  /* Indent plus a brass spine. Padding alone was not enough to read as a child
     list at a glance - the children are already a lighter ink, and with nothing
     else the group just looked like four ordinary rows. The rule says "these
     belong to the one above" without costing a row of height.

     FLAGGED, and only the phone case needed it. css/responsive.css:651 sets
       @media (max-width:480px){ .dropdown-menu{ padding:0 !important } }
     which is (0,1,0) but important, so it beat this selector's (0,3,2) and the
     indent silently collapsed - measured 0px padding-left at 390px while the
     margin and the border from this very rule applied normally. Above 480px it
     worked, which is exactly how a bug like this reaches production. */
  padding:0 0 0 18px !important;
  margin-left:4px;
  border-left:2px solid rgba(168,134,63,.34);
}
/* The children sit a step below their parent - 48px against the parent's 52 -
   so the hierarchy reads without dropping under the 44px minimum. An earlier
   version left them at 41-42px, which is exactly the size a thumb misses, and
   they are the three rows most likely to be aimed at carelessly. */
.jd-panel ul.jd-panel-nav ul.dropdown-menu a{
  min-height:48px;
  font-size:15px; padding:6px 4px; color:#5a6b56;
}
/* The parent of the dropdown is a link in its own right, and its children are
   already listed underneath it, so a caret suggests a disclosure that is not
   there - tapping it navigates, it does not expand. `::before` is the caret
   this file draws for the desktop shelf, and it goes.

   ONLY ::before. An earlier version killed ::after as well, which was wrong
   twice over: ::after is the pseudo-element the chevron further down uses, so
   the dropdown parent silently lost the affordance every other row has - and
   this selector is more specific than the chevron rule, so it won and there
   was nothing to notice unless you measured that one row. Bootstrap's own
   `.dropdown-toggle::after` triangle is neutralised by the chevron rule
   redefining every border instead. */
.jd-panel ul.jd-panel-nav > li.dropdown > a::before{ content:none; display:none; }

/* --------------------------------------------------------------------------
   F. "YOU ARE HERE" AND THE ANCHOR ITEMS
   --------------------------------------------------------------------------
   WordPress tags the current item on every page and the theme never styled
   it. current_page_item, NOT current-menu-item: several entries are custom
   hash links that WordPress also marks current, and on the Long Stay page
   that lights up two items at once.

   footer.php also carries an inline script adding li.jd-anchor-current and
   body.jd-anchor-active so "Pricing" and "Contact" can highlight - they point
   at sections, not pages, so WordPress never marks them current. That script
   is still running, so its classes must be styled or the highlight vanishes.
   The :not(.jd-anchor-current) guard matters: on the homepage "What is
   Jagriti Dham" is BOTH the current page item and an anchor, and without it
   the dimming rule cancels the highlight on the very item it should light. */
/* THE ONE THAT SHIPPED BROKEN, AND WHY.
   Live on the site, "What is Jagriti Dham" rendered in WHITE on the cream nav
   band - effectively invisible. The cause is the Customizer block, which is
   still in place and prints after everything enqueued:

       body .menumain .navbar-nav > li.current_page_item > .nav-link{
           color:#ffffff !important; }

   It was written for the old dark header, where white was right. It is
   (0,4,2) AND important; the rule here was (0,3,3) and unimportant, so it lost
   twice over. Leading with #navbar_top puts an id on this selector, and one id
   beats any number of classes - plus !important to answer theirs.

   Emptying the Customizer is still the right fix and is still in the README.
   This is what makes the header correct in the meantime, because a header that
   only works once someone remembers a manual step is not finished. */
#navbar_top .jd-header .jd-nav > ul > li.current_page_item > a,
#navbar_top .jd-header .jd-nav > ul > li.current-menu-ancestor > a,
#navbar_top .jd-header .jd-nav > ul > li.current-menu-parent > a,
#navbar_top .jd-header .jd-nav > ul > li.jd-anchor-current > a{
  color:#1f3a24 !important; font-weight:700;
}
.jd-header .jd-nav > ul > li.current_page_item > a::after,
.jd-header .jd-nav > ul > li.current-menu-ancestor > a::after,
.jd-header .jd-nav > ul > li.current-menu-parent > a::after,
.jd-header .jd-nav > ul > li.jd-anchor-current > a::after{
  left:15px; right:15px;
}
/* same reasoning as above - the Customizer's white rule also has to be beaten
   on the dimmed state, or an anchor-active page shows two white items */
body.jd-anchor-active #navbar_top .jd-header .jd-nav > ul > li.current_page_item:not(.jd-anchor-current) > a,
body.jd-anchor-active #navbar_top .jd-header .jd-nav > ul > li.current-menu-ancestor:not(.jd-anchor-current) > a,
body.jd-anchor-active #navbar_top .jd-header .jd-nav > ul > li.current-menu-parent:not(.jd-anchor-current) > a{
  color:#33492f !important; font-weight:500;
}
body.jd-anchor-active .jd-header .jd-nav > ul > li.current_page_item:not(.jd-anchor-current) > a::after,
body.jd-anchor-active .jd-header .jd-nav > ul > li.current-menu-ancestor:not(.jd-anchor-current) > a::after,
body.jd-anchor-active .jd-header .jd-nav > ul > li.current-menu-parent:not(.jd-anchor-current) > a::after{
  left:50%; right:50%;
}

/* --------------------------------------------------------------------------
   G. WHAT SITS BEHIND AND BELOW A FIXED HEADER
   --------------------------------------------------------------------------
   The header is position:fixed, so it is out of flow.

   Inner pages (blog, FAQ, gallery, single posts...) put a .innerbanner behind
   it - a gold slab whose only job is to be the header's ground. style.css
   sizes it 96px for the old 84px bar; it now has to be exactly as tall as the
   header or the page content slides underneath.

   Banner pages (home, about, pricing, the stay pages) put a photograph or the
   video there instead and the header is meant to overlay it, which is what it
   did before, so those need no offset at all. */
:root{
  --jd-h-ribbon:30px;
  --jd-h-bar:70px;
  --jd-h-nav:46px;
  --jd-h-total:calc(var(--jd-h-ribbon) + var(--jd-h-bar) + var(--jd-h-nav));
}
/* INNER PAGES - the gold slab is the spacer.
   .innerbanner is an in-flow element whose only job was ever to be the
   header's ground. Sized to the header exactly, it holds the space the fixed
   header occupies and the page content starts below it. (Its #dcc692 gold is
   now invisible, because the header paints its own paper ground on top of it.
   It is a spacer now, nothing more - worth knowing before someone "fixes" the
   colour.) */
.innerbanner{
  height:var(--jd-h-total) !important;
  margin-bottom:20px;
}

/* BANNER PAGES - the banner starts where the header ends.
   The header is position:fixed and therefore out of flow, so every banner
   wrapper began at y=0 with the top 146px of the photograph (or the video)
   sitting behind an opaque header. These are the four wrappers the nine
   banner template parts emit:
       .vdo_banner       content-home2-banner.php        (the YouTube banner)
       .banner_area      about / pricing / day-at / short-stay / shortstay /
                         long-stay  (the last also carries .jd-banner-lux)
       .jivagram-banner  content-jivagram-ayurvedic-banner.php
       .innerbanner      content-banner.php - handled above, do NOT offset it
                         as well or the space is counted twice.

   FLAGGED, and it has to be. css/responsive.css:497 sets
       @media (max-width:480px){ .banner_area, .jivagram-banner{ margin-top:70px !important } }
   which was the old allowance for the old 84px bar. An important declaration
   cannot be beaten by an unimportant one at any specificity, so without the
   flag here the phone case would keep the stale 70px against a 90px header
   and the banner would still be clipped by 20px. */
.vdo_banner,
.banner_area,
.jivagram-banner{
  margin-top:var(--jd-h-total) !important;
}

html:root{ scroll-padding-top:calc(var(--jd-h-total) + 14px); }

/* --------------------------------------------------------------------------
   H. THE 84px JOLT
   --------------------------------------------------------------------------
   js/custom.js sets document.body.style.paddingTop = navbar.offsetHeight
   past 200px of scroll and back to 0 under it, so the whole page jumps by the
   header's height and back. That is an inline style, and an inline style is
   beaten by !important in a stylesheet. Measured after this rule: document
   shift on scroll 0px. custom.js is left alone - it is shared with pages this
   header does not own. */
html body{ padding-top:0 !important; }

/* --------------------------------------------------------------------------
   I. THE THEME'S REMAINING OPINIONS
   -------------------------------------------------------------------------- */
/* style.css:3633 - the one page that repaints the menu dark green. The class
   it keys on (.navbar-dark) is gone from the markup, but the page template
   class is not, so this stays as belt and braces. */
body.page-template-newshortstay .jd-header .jd-nav > ul > li > a{ color:#33492f; }
/* responsive.css @<=480 hides the brand image and the tagline outright */
.jd-header .jd-brand img{ display:block !important; }
/* the theme's global list styling reaches into the panel */
.jd-panel li{ margin:0 !important; }

@media (max-width:991px){
  :root{ --jd-h-bar:64px; --jd-h-nav:0px; }
}
@media (max-width:767px){
  :root{ --jd-h-bar:60px; }
}

/* ==========================================================================
   MENU POLISH
   ==========================================================================
   The shelf, the dropdown and the panel, taken past "correct" to finished.
   Nothing here changes the structure or the heights that were signed off -
   it is surface only, in the language the rest of the header already speaks:
   brass hairlines, the ribbon's diamond, warm washes rather than solid slabs.
   ========================================================================== */

/* --- the shelf: give the current item the ribbon's diamond ---------------
   The brass underline alone said "current" and "hovered" in nearly the same
   breath, because hover draws the same line. The diamond is the ribbon's own
   ornament, so it reads as part of the system rather than a new invention,
   and it marks the current page in a way hover never borrows. */
#navbar_top .jd-header .jd-nav > ul > li.current_page_item > a,
#navbar_top .jd-header .jd-nav > ul > li.current-menu-ancestor > a,
#navbar_top .jd-header .jd-nav > ul > li.current-menu-parent > a,
#navbar_top .jd-header .jd-nav > ul > li.jd-anchor-current > a{
  position:relative;
}
#navbar_top .jd-header .jd-nav > ul > li.current_page_item > a::before,
#navbar_top .jd-header .jd-nav > ul > li.current-menu-ancestor > a::before,
#navbar_top .jd-header .jd-nav > ul > li.current-menu-parent > a::before,
#navbar_top .jd-header .jd-nav > ul > li.jd-anchor-current > a::before{
  content:"";
  position:absolute; left:50%; top:9px;
  width:4px; height:4px; margin-left:-2px;
  background:var(--jd-gold-dp,#7f6630);
  transform:rotate(45deg);
  opacity:.9;
}
/* the dropdown parent already uses ::before for its caret, so it keeps the
   caret and forgoes the diamond rather than stacking two marks on one label */
#navbar_top .jd-header .jd-nav > ul > li.dropdown > a::before{
  top:auto; left:auto; margin-left:7px;
  width:5px; height:5px; background:none;
  opacity:1;
}

/* --- the dropdown: a panel that belongs to the item above it ------------- */
.jd-header .jd-nav ul.dropdown-menu{
  border-top:2px solid var(--jd-gold-dp,#7f6630);
  border-radius:0 0 3px 3px;
  box-shadow:0 22px 40px -26px rgba(43,63,47,.8), 0 1px 0 rgba(255,255,255,.5) inset;
  padding:5px;
}
/* a notch, so the panel points at its parent instead of floating under it */
.jd-header .jd-nav ul.dropdown-menu::before{
  content:"";
  position:absolute; top:-6px; left:50%; margin-left:-5px;
  width:10px; height:10px;
  background:var(--jd-paper-2,#f8f3e7);
  border-left:2px solid var(--jd-gold-dp,#7f6630);
  border-top:2px solid var(--jd-gold-dp,#7f6630);
  transform:rotate(45deg);
}
/* A warm wash rather than the solid green slab style.css uses. Green on green
   inside a paper panel was the heaviest thing in the header, and it fought the
   brass everywhere else. Measured: #1f3a24 on the wash composited over the
   panel is 8.9:1, against 5.6:1 for white on #4f6f52 - lighter AND more
   legible. */
.jd-header .jd-nav ul.dropdown-menu > li > a:hover,
.jd-header .jd-nav ul.dropdown-menu > li > a:focus-visible{
  background:rgba(201,162,74,.20);
  color:#1f3a24;
}
/* the child you are actually on keeps a brass spine, so it is distinguishable
   from the one the pointer happens to be over */
/* The background has to be stated, not just the spine. style.css:3591 says
       .dropdown-item.active, .dropdown-item:active{ background-color:#4f6f52; color:#fff }
   and this selector out-specifies it - but only for the properties it actually
   declares. Setting box-shadow and colour while saying nothing about
   background left the solid green slab in place underneath, so the first
   dropdown row still rendered as the heavy green block this section exists to
   remove. Specificity does not undo a property you never mention. */
.jd-header .jd-nav ul.dropdown-menu > li > a.active,
.jd-header .jd-nav ul.dropdown-menu > li.current_page_item > a{
  background:rgba(201,162,74,.22);
  box-shadow:inset 3px 0 0 var(--jd-gold-dp,#7f6630);
  font-weight:700; color:#1f3a24;
}

/* --- the panel: an affordance on every row ------------------------------
   Nine full-width rows with nothing at the right edge read as a list of
   labels rather than a list of destinations. A chevron is the cheapest
   possible "this goes somewhere", and at .38 opacity it is felt more than
   seen. Children do not get one - they are already indented under a spine,
   and a second mark per row would be noise. */
.jd-panel ul.jd-panel-nav > li > a{
  position:relative; padding-right:26px;
}
.jd-panel ul.jd-panel-nav > li > a::after{
  content:"";
  position:absolute; right:6px; top:50%;
  width:6px; height:6px; margin-top:-3px;
  /* All four borders are stated. On the dropdown parent this pseudo-element is
     also Bootstrap's `.dropdown-toggle::after` triangle, which sets
     border-left:.3em solid transparent and border-bottom:0 - leaving those
     alone would have left a 4.8px transparent limb hanging off the chevron on
     that one row. Redefining the whole set is what lets one rule serve both. */
  border-right:2px solid var(--jd-gold-dp,#7f6630);
  border-top:2px solid var(--jd-gold-dp,#7f6630);
  border-left:0; border-bottom:0;
  transform:rotate(45deg);
  opacity:.38;
  transition:opacity .2s ease, transform .2s ease;
}
.jd-panel ul.jd-panel-nav > li > a:hover::after{
  opacity:.85; transform:rotate(45deg) translate(1px,-1px);
}
/* the dropdown parent navigates like any other row, so it keeps its chevron -
   the caret was removed earlier precisely because it implied expansion */

/* the current page, marked the same way the dropdown marks its own child */
.jd-panel ul.jd-panel-nav > li.current_page_item > a,
.jd-panel ul.jd-panel-nav > li.current-menu-ancestor > a,
.jd-panel ul.jd-panel-nav > li.current-menu-parent > a{
  box-shadow:inset 3px 0 0 var(--jd-gold-dp,#7f6630);
  background:rgba(201,162,74,.12);
  color:#1f3a24; font-weight:700;
}

/* ==========================================================================
   THE BANNER HEIGHT LADDER - ONE DEFINITION, USED BY BOTH BANNERS
   ==========================================================================
   Asked for 2026-09-08: make the home page's video banner the same size as
   the one on /best-old-age-home-in-kolkata/.

   Those two banners are built by different files - the home banner is the
   theme's own .vdo_banner, the long-stay one is css/banner-lux.css - so
   "the same size" written as two separate ladders would be two numbers to
   keep in step, and they would drift the first time either page was touched.
   The ladder is therefore declared ONCE here, on :root, and both consume it:

       css/header-lux.css  ->  .vdo_banner       (this file, sitewide)
       css/banner-lux.css  ->  --jd-slide-h      (page 1504 only)

   The values are the luxury page's, which is where this all started:
       >=1200   640
       992-1199 560
       768-991  420
       <=767    340

   WHY THIS FILE. header-lux.css is the only stylesheet enqueued on every
   page, so it is the only place a shared token can live. banner-lux.css
   loads before it but that does not matter - custom properties resolve when
   they are used, not where they are declared. banner-lux.css still carries a
   literal fallback in case this file ever fails to load.

   BEATING THE THEME. style.css:2919 sets `.vdo_banner{height:550px}` and
   css/responsive.css:691 sets `{height:300px}` inside @media (max-width:480px).
   Both are (0,1,0) and unflagged; this file loads after both, so source order
   settles it without !important - including inside their media query, because
   a media query adds no specificity. */
:root{
  --jd-banner-h:640px;
}
@media (max-width:1199px){ :root{ --jd-banner-h:560px; } }
@media (max-width:991px){  :root{ --jd-banner-h:420px; } }
@media (max-width:767px){  :root{ --jd-banner-h:340px; } }

.vdo_banner{
  height:var(--jd-banner-h);
}