/* =====================================================================
   Kayakriti — Mega Menu styles  (prefix: .kn-)
   Desktop: hover-triggered with grouped columns
   Mobile : full-screen drawer with collapsible accordions
   ===================================================================== */

/* ===== TOP UTILITY BAR ===== */
.kn-top-bar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.4;
}
.kn-top-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.kn-top-bar-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kn-top-bar-meta a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.kn-top-bar-meta a:hover { color: #fff; }
.kn-top-bar-meta span {
  margin: 0;
  opacity: 0.4;
  display: inline-block;
}

/* ===== Top-bar offer line — text-only, light gold =====
   No background, no sticker, no star — just the offer text in a soft
   gold tone that sits against the dark utility bar. Reads as a clinic
   notice rather than a promo banner.
   NOTE: `display: inline` (NOT inline-flex). With inline-flex, each
   <strong> becomes its own flex item and the surrounding whitespace
   collapses ("Flat30-50% OFFfor..."). Inline keeps it as a normal
   text run, so spaces between words render properly. */
.kn-top-bar-offer {
  display: inline;
  color: #F0CC6B;                /* light gold for readability on dark bar */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}
.kn-top-bar-offer:hover { color: #FFE7A8; }
.kn-top-bar-offer strong {
  font-weight: 800;
  color: #FFE7A8;                /* slightly brighter for the percentage + card label */
}
@media (max-width: 880px) {
  .kn-top-bar-offer { font-size: 12px; white-space: normal; }
}
.kn-top-bar-links {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.kn-top-bar-links a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kn-top-bar-links a:hover,
.kn-top-bar-links a.active { color: #fff; }

/* ===== Language switch (EN ↔ हिं) =====
   A segmented two-option switch with a sliding thumb behind the active
   option. Drives the Google Translate widget via the same JS handler
   on every surface (top bar, splash homepage, mobile nav). */
.kn-lang-switch {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  user-select: none;
  transition: background 150ms ease, border-color 150ms ease;
}
.kn-lang-switch:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
}
.kn-lang-opt {
  position: relative;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 200ms ease;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px;
}
/* Active half — full white text */
.kn-lang-switch[data-lang="en"] .kn-lang-opt[data-opt="en"],
.kn-lang-switch[data-lang="hi"] .kn-lang-opt[data-opt="hi"] {
  color: var(--ink, #0E1E35);
}
/* Sliding thumb — white pill behind the active option */
.kn-lang-thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
  transition: transform 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 1;
}
.kn-lang-switch[data-lang="hi"] .kn-lang-thumb {
  transform: translateX(100%);
}

/* ===== Hide Google Translate's injected UI =====
   The gadget injects a yellow top banner + a hover tooltip + the
   highlight bubble it draws on translated nodes. Hide ONLY those — we
   must NOT hide the wider `.skiptranslate` wrapper, because Google's
   own <select> sits inside it (hiding `.skiptranslate` breaks the
   toggle entirely). The mount div is already positioned off-screen
   in footer.php; that's how it stays invisible while remaining
   functional. */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd { display: none !important; }
/* Defeat the inline `top: 40px` and `margin-top: 40px` Google sets on
   <body> / <html> when its banner injects (we've hidden the banner so
   the offset is just empty space). */
body { top: 0 !important; position: static !important; }
html { margin-top: 0 !important; }
/* Suppress GT's highlight halo on translated text. */
font.goog-te-text-content,
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }

/* ===== MAIN NAV ===== */
.kn-nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.kn-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  /* Was 72 px / 0 vertical padding — content sat exactly flush against
     the top/bottom edges, so any padding added to the brand block was
     invisibly centred. Bumped the row to 92 px (and added 8/10 px of
     vertical padding) so the logo + tagline now have visible breathing
     space above and below them. */
  padding: 8px 24px 10px;
  height: 92px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.kn-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.kn-brand-dot {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--grad-blue, linear-gradient(135deg, #2D7DD2, #4A9EE8));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
}
/* Brand image logo — replaces the "K" dot + wordmark since the logo PNG
   already contains both the symbol and the "Kayakriti" wordmark.
   The PNG is 1389×725 (≈1.92:1); fixing the height keeps it crisp and
   the natural aspect drives the width. */
.kn-brand-logo {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Stacked brand variant — logo on top, descriptive tagline below.
   Used by the header (.kn-brand) and the mobile drawer brand link. */
.kn-brand-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}
.kn-brand-tagline {
  /* Body font (sans), bold, no italic, ink-black — same on header + splash. */
  font-family: var(--font, inherit);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--ink, #0E1E35);
  white-space: nowrap;
}
/* Interior-site header (kn-brand) — slight vertical breathing space
   above the logo and below the tagline so the brand block doesn't
   feel cramped against the nav row beside it. The splash homepage's
   .brand selector is intentionally not scoped here, so the splash
   variant stays flush. */
.kn-brand.kn-brand-stack { padding: 6px 0 8px; }
.kn-brand .kn-brand-tagline { padding-bottom: 2px; }
@media (max-width: 600px) {
  .kn-brand-tagline { font-size: 11px; }
}
.kn-drawer .kn-brand-logo { height: 48px; }
.kn-footer-brand .kn-brand-logo { height: 60px; }

.kn-primary {
  flex: 1;
  display: flex;
  justify-content: center;
}
.kn-primary-list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; padding: 0; margin: 0;
}
.kn-li {
  position: relative;
}
/* Invisible hover-bridge for any nav item that owns a dropdown. Extends
   the li's hit-area straight down into the 12px gap between the header
   and the dropdown panel so the mouse can cross without falling into a
   "no-hover" zone that would dismiss the menu. Pseudo content is fully
   transparent — it only matters for pointer events. */
.kn-li.has-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;          /* > the 12px gap + a few px of slack */
  pointer-events: auto;
}
.kn-l1 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.kn-l1:hover,
.kn-l1.active {
  color: var(--ink);
  background: var(--surface);
}
/* Suppress the legacy styles.css::after text-chevron — mega menu uses SVG .kn-caret instead */
.kn-l1::after { display: none !important; }

.kn-caret {
  transition: transform 0.18s;
  opacity: 0.7;
}
.kn-li.has-menu:hover .kn-caret,
.kn-li.has-menu:focus-within .kn-caret {
  transform: rotate(180deg);
}

.kn-cta {
  background: var(--grad-blue, linear-gradient(135deg, #2D7DD2, #4A9EE8));
  color: #fff !important;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.15s;
}
.kn-cta:hover { filter: brightness(0.92); }

.kn-burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.kn-burger span {
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: 0.2s;
}

/* ===== DESKTOP MEGA MENU (hover-triggered panels) =====
   All dropdowns — standard (About / Non-Surgical / Dental) and mega
   (Cosmetic / Reconstructive) — open with the SAME 12px gap below the
   header and the SAME slight close-delay. This unifies the hover
   behaviour across every nav item. */
.kn-menu {
  position: absolute;
  top: calc(100% + 12px);  /* 12px breathing space below header */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 48px -16px rgba(14, 30, 53, 0.18),
              0 4px 12px -4px rgba(14, 30, 53, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* On CLOSE: hold the panel visible for 150ms after the mouse leaves
     the trigger, giving the user time to cross the gap. On OPEN: snap
     in fast (no delay). The opening rule below overrides the delay. */
  transition: opacity 0.18s ease, transform 0.18s ease,
              visibility 0s linear 0.15s;
  transition-delay: 0.15s;
  z-index: 100;
  pointer-events: none;
}
.kn-li.has-menu:hover > .kn-menu,
.kn-li.has-menu:focus-within > .kn-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease,
              visibility 0s linear 0s;
  transition-delay: 0s;
}

/* Standard dropdown (small, single-column) */
.kn-menu-standard {
  left: 0;
  min-width: 280px;
  padding: 12px;
}
.kn-menu-standard ul {
  list-style: none; padding: 0; margin: 0;
}
.kn-menu-standard a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.kn-menu-standard a:hover {
  background: var(--surface);
  color: var(--ink);
}

/* Dental — long flat list (15 services). Renders as a 3-column grid
   pinned to the viewport centre (like the mega panels) so the dropdown
   reads as a 5 × 3 mega-style block instead of a tall single column. */
.kn-menu-standard.kn-menu-standard-grid {
  position: fixed;
  top: 84px;                          /* same offset as the mega panels */
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(96vw, 720px);
  min-width: 0;
  padding: 20px 24px;
}
.kn-li.has-menu:hover > .kn-menu-standard.kn-menu-standard-grid,
.kn-li.has-menu:focus-within > .kn-menu-standard.kn-menu-standard-grid {
  transform: translate(-50%, 0);
}
.kn-menu-standard.kn-menu-standard-grid::before {
  /* Same hover bridge as the mega panels — fills the gap so moving the
     mouse from the Dental nav item down to the panel keeps hover alive. */
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.kn-menu-standard.kn-menu-standard-grid ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 12px;
}
.kn-menu-standard.kn-menu-standard-grid a {
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.35;
}
@media (max-width: 880px) {
  .kn-menu-standard.kn-menu-standard-grid ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mega menu — 3-col (Cosmetic / Reconstructive). V2 uses 4 grid columns
   so we bump the panel max-width from 1180 → 1320 to give each cell
   enough room for service names without text-wrapping into overlap. */
/* Mega panels — Cosmetic and Reconstructive.
   Both use position: fixed pinned to the viewport so they open in the
   SAME spot regardless of which nav item triggered them (otherwise
   Reconstructive — being further right in the nav — would open further
   right too). Top offset = nav height (72px) + 12px breathing room so
   the panel doesn't kiss the bottom of the logo / header on open. */
.kn-menu-mega-3,
.kn-menu-mega-1 {
  position: fixed;
  top: 84px;                     /* 72px nav + 12px gap */
  left: 50%;
  transform: translate(-50%, 8px);
}
.kn-menu-mega-3 {
  /* 4 main columns + Face spans 2 = 5 column tracks.
     4 × ~250px + 4 × 22px gap + 2 × 32 padding ≈ 1240px. 1380 caps it. */
  width: min(96vw, 1380px);
}
.kn-menu-mega-1 {
  width: min(96vw, 760px);
}
.kn-li.has-menu:hover > .kn-menu-mega-3,
.kn-li.has-menu:focus-within > .kn-menu-mega-3,
.kn-li.has-menu:hover > .kn-menu-mega-1,
.kn-li.has-menu:focus-within > .kn-menu-mega-1 {
  transform: translate(-50%, 0);
}
/* Invisible bridge — covers the gap between header bottom and panel top
   so the mouse moving from the nav item to the panel doesn't fall into
   "no hover" space and dismiss the panel. */
.kn-menu-mega-3::before,
.kn-menu-mega-1::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.kn-mega-inner {
  display: block;            /* no sidebar — the aside CTA was removed so the
                                inner panel is a single fluid block whose
                                width is bounded by the parent's max-width. */
  padding: 28px 32px;
}
.kn-mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-height: 70vh;
  overflow-y: auto;
  /* Per CSS spec, setting overflow-y: auto auto-promotes overflow-x:
     visible to overflow-x: auto. The `.kn-flat-items a` rule uses
     `margin-inline: -8px` so the hover pill can paint past the text,
     which then overflowed the cols by 8px on the left → horizontal
     scrollbar appeared AND the first character of every link was
     clipped at the scroll boundary. Solution: give the negative
     margins room INSIDE the padding box (clipping happens at the
     padding-box edge, so content inside padding isn't clipped). */
  padding-inline: 8px;
  margin-inline: -8px;
  overscroll-behavior: contain;
}
.kn-mega-col {
  min-width: 0;
}
.kn-sec-title {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s;
}
.kn-sec-title:hover { color: var(--blue); }
.kn-sec-arrow {
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  color: var(--blue);
}
.kn-sec-title:hover .kn-sec-arrow { opacity: 1; transform: translateX(2px); }

.kn-grp { margin-bottom: 14px; }
.kn-grp-h {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  text-decoration: none;
  transition: color 0.15s;
}
.kn-grp-h:hover { color: var(--blue); }
.kn-grp ul,
.kn-flat-items {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2px;
}
.kn-grp ul a,
.kn-flat-items a {
  display: block;
  /* Inline padding + matching negative inline margins = the link's *visual*
     edges stay where they were (text doesn't shift, gap between columns
     untouched), but the link's box is wider than the text. The hover
     background paints into that extra space to form a pill. 8px each side
     keeps the pill clear of the next column at every breakpoint (column
     gaps of 22px at desktop, 18px on smaller widths). */
  padding: 5px 8px;
  margin-inline: -8px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--body);
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease;
}
.kn-grp ul a:hover,
.kn-flat-items a:hover {
  background: var(--surface);
  color: var(--ink);
}

/* Reconstructive: list rows with preview */
.kn-mega-list {
  max-height: 70vh;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}
.kn-mega-row {
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.15s;
}
.kn-mega-row:hover { background: var(--surface); }
.kn-mega-row .kn-sec-title {
  border-bottom: 0;
  padding: 0;
  margin: 0 0 4px;
  font-size: 16px;
}
.kn-sec-preview {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Mega menu sidebar CTA card */
.kn-mega-aside {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}
.kn-mega-aside h4 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.kn-mega-aside p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 16px;
}
.kn-mega-cta {
  display: inline-block;
  background: var(--ink);
  color: #fff !important;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  align-self: flex-start;
}
.kn-mega-cta:hover { background: var(--ink-2, #1A2E4F); }

/* ===== Mobile-only language switch (sits next to the burger) =====
   Hidden on desktop. On phone widths, the top utility bar is hidden so
   this is the only available toggle. Solid brand-blue track with a
   white sliding thumb so it reads against the white nav background. */
.kn-lang-switch.kn-lang-switch-mobile {
  display: none;          /* desktop: hidden (top-bar carries the toggle) */
  background: var(--blue, #2D7DD2);
  border-color: var(--blue, #2D7DD2);
}
.kn-lang-switch.kn-lang-switch-mobile:hover {
  background: var(--blue-deep, #1e6bbd);
  border-color: var(--blue-deep, #1e6bbd);
}
.kn-lang-switch.kn-lang-switch-mobile .kn-lang-opt {
  color: rgba(255, 255, 255, 0.82);
}
.kn-lang-switch.kn-lang-switch-mobile[data-lang="en"] .kn-lang-opt[data-opt="en"],
.kn-lang-switch.kn-lang-switch-mobile[data-lang="hi"] .kn-lang-opt[data-opt="hi"] {
  color: var(--ink, #0E1E35);
}
.kn-lang-switch.kn-lang-switch-mobile .kn-lang-thumb {
  background: #ffffff;
}

/* ===== MOBILE BREAKPOINT ===== */
@media (max-width: 1024px) {
  .kn-top-bar { display: none; }
  .kn-primary { display: none; }
  .kn-cta { display: none; }
  .kn-burger { display: flex; }
  /* Pin the language switch right next to the burger: margin-left: auto
     pushes it out of the brand row's slack space, and the small gap
     keeps a tidy 8 px breathing room between switch and burger. */
  .kn-lang-switch.kn-lang-switch-mobile {
    display: inline-flex;
    margin-left: auto;
    margin-right: 8px;
  }
  /* Push burger to far right — brand stays left.
     Vertical padding was 0 and height fixed at 64 px, which (a) gave the
     logo + tagline zero breathing room above and below them, and (b)
     visually cramped the brand block against the row edges. Let the row
     grow with its content and reserve real top/bottom padding so the
     mobile header mirrors the desktop's vertical rhythm. */
  .kn-nav-inner {
    padding: 10px 16px;
    height: auto;
    min-height: 64px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  /* Mobile-tuned logo height — 56 px (desktop) is too tall for the
     compact row. 42 px keeps the wordmark legible while leaving room
     for the tagline below it. */
  .kn-brand-logo { height: 42px; }
  /* Hard-enforce left flush. .kn-brand inherits `align-items: center`
     from its base rule (column-axis) which on column-direction flex
     means children get CENTERED to one another. We want the logo and
     the tagline tucked flush against the left edge instead, so the
     brand block reads as one left-aligned unit. The earlier rule
     `.kn-brand.kn-brand-stack { padding: 6px 0 8px }` is overridden to
     zero here — the nav-inner now provides the breathing space. */
  .kn-brand.kn-brand-stack {
    align-items: flex-start;
    padding: 0;
  }
  .kn-brand-tagline { font-size: 10.5px; letter-spacing: 0.04em; }
}

/* ===== MOBILE DRAWER ===== */
.kn-drawer {
  position: fixed; top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: var(--white);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 48px rgba(14, 30, 53, 0.12);
}
.kn-drawer.open { transform: translateX(0); }
.kn-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 30, 53, 0.4);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s, visibility 0.32s;
}
.kn-drawer-backdrop.open { opacity: 1; visibility: visible; }

.kn-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.kn-drawer-close {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface);
  border: 0;
  font-size: 28px; line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.kn-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 96px;
  -webkit-overflow-scrolling: touch;
}
.kn-d-list {
  list-style: none; padding: 0; margin: 0;
}
.kn-d-item {
  border-bottom: 1px solid var(--line);
}
.kn-d-item > a,
.kn-d-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.kn-d-toggle svg {
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 12px;
}
.kn-d-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.kn-d-pane {
  padding: 0 0 14px;
}
.kn-d-pane[hidden] { display: none; }
.kn-d-overview {
  display: block;
  padding: 8px 14px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  margin: 4px 0 12px;
}

.kn-d-pane > ul {
  list-style: none; padding: 0; margin: 0 0 8px;
}
.kn-d-pane > ul > li > a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--body);
  text-decoration: none;
  border-radius: 6px;
}
.kn-d-pane > ul > li > a:hover { background: var(--surface); }

.kn-d-section { margin: 4px 0; }
.kn-d-sub-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--page-bg);
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 4px;
}
.kn-d-sub-toggle svg { transition: transform 0.2s; flex-shrink: 0; }
.kn-d-sub-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.kn-d-sub {
  padding: 4px 0 8px 12px;
  border-left: 2px solid var(--tint);
  margin-left: 8px;
}
.kn-d-sub[hidden] { display: none; }
.kn-d-overview-mini {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 6px;
}
.kn-d-section-link {
  display: block;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.kn-d-group { padding: 6px 0 4px; }
.kn-d-group-h {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  text-decoration: none;
}
.kn-d-group ul {
  list-style: none; padding: 0; margin: 0;
}
.kn-d-group ul a {
  display: block;
  padding: 7px 14px 7px 14px;
  font-size: 13.5px;
  color: var(--body);
  text-decoration: none;
}
/* Flat items inside a kn-d-sub (sections that have `items` but no
   `groups` — e.g. Cosmetic > Breast / Genitals / Makeovers, and most
   Reconstructive sub-categories). Without these rules the browser
   default <ul> bullets + indent appeared, making them look unlike the
   Face-style items above. Now they match the .kn-d-group ul a treatment
   so every sub-category's procedure list reads the same way. */
.kn-d-sub > ul,
.kn-d-sub ul:not(.kn-d-group ul) {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kn-d-sub > ul > li > a {
  display: block;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--body);
  text-decoration: none;
}
.kn-d-sub > ul > li > a:hover { background: var(--surface); }

.kn-d-utility {
  margin-top: 24px;
  padding: 16px 8px;
  border-top: 1px solid var(--line);
}
.kn-d-utility h5 {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 700;
}
.kn-d-utility ul { list-style: none; padding: 0; margin: 0; }
.kn-d-utility a {
  display: block;
  padding: 10px 6px;
  font-size: 14px;
  color: var(--body);
  text-decoration: none;
}

.kn-d-cta {
  display: block;
  margin: 24px 8px 16px;
  padding: 14px;
  background: var(--grad-blue, linear-gradient(135deg, #2D7DD2, #4A9EE8));
  color: #fff !important;
  text-align: center;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

/* ===========================================================================
   Splash homepage — hide the nav visually but keep it in the DOM so search
   crawlers can still follow every internal link from the homepage.
   This matches the static index-doctor.html reference (which has no nav at
   all on the splash). Once the user enters via "Skip to website →" or
   completes the funnel, they land on an interior page where the nav appears
   normally.
   =========================================================================== */
body.is-splash .kn-top-bar,
body.is-splash .kn-nav {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ============================================================================
   TOP-BAR SEARCH (inline expander + dropdown results)
   ============================================================================*/
.kn-search { position: relative; display: inline-flex; align-items: center; }
.kn-search-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 0;
  font: inherit; color: var(--white, #fff);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13.5px; font-weight: 500;
  border-radius: 6px;
  opacity: 0.85;
  transition: opacity 150ms ease;
}
.kn-search-toggle:hover { opacity: 1; }
.kn-search-toggle-label { display: inline; }
@media (max-width: 720px) { .kn-search-toggle-label { display: none; } }

/* ===== EN ⇄ हिन्दी toggle =====
   Sits in the dark top bar alongside Gallery / Dos & Don'ts / Contact /
   Search. JS sets the `googtrans` cookie + reloads on click; Google's
   hidden widget reads the cookie and translates the page. */
.kn-lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: var(--white, #fff);
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.9;
  transition: opacity 150ms ease, background 150ms ease, border-color 150ms ease;
}
.kn-lang-toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}
.kn-lang-toggle svg { display: block; flex-shrink: 0; }
@media (max-width: 720px) {
  .kn-lang-toggle { padding: 5px 10px; }
}

/* ===== Hide Google Translate's banner ribbon =====
   The widget itself is positioned off-screen by inline style in
   footer.php, so we only need to suppress the "Translated into Hindi"
   banner that Google injects at the top of the page after translation.
   Specific selectors only — do NOT use `.skiptranslate` because Google
   adds that class to the widget wrapper too. */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; visibility: hidden !important; }
/* Google inserts inline style `body { top: 40px }` to push content
   below its banner. Force the body back to its original position. */
html { margin-top: 0 !important; }
body { top: 0 !important; position: static !important; margin-top: 0 !important; }
.goog-text-highlighted { background-color: transparent !important; box-shadow: none !important; }

.kn-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(460px, 92vw);
  background: #fff;
  color: var(--ink, #0E1E35);
  border: 1px solid var(--line, #E3ECF5);
  border-radius: 14px;
  box-shadow: 0 24px 60px -16px rgba(14, 30, 53, 0.22);
  padding: 12px;
  z-index: 1000;
}
.kn-search-input {
  width: 100%;
  border: 1px solid var(--line, #E3ECF5);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
}
.kn-search-input:focus {
  outline: 2px solid var(--blue, #2D7DD2);
  outline-offset: 1px;
  border-color: var(--blue, #2D7DD2);
}
.kn-search-results { margin-top: 10px; max-height: 60vh; overflow-y: auto; }

.kn-search-result {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}
.kn-search-result:hover,
.kn-search-result:focus { background: var(--surface, #F5F8FD); outline: 0; }

.kn-search-result-kind {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--blue, #2D7DD2); text-transform: uppercase;
  background: rgba(45, 125, 210, 0.08);
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
}
.kn-search-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kn-search-result-label { font-weight: 600; color: var(--ink, #0E1E35); font-size: 14.5px; }
.kn-search-result-parent { font-size: 12.5px; color: var(--muted, #6A7A91); }

.kn-search-empty {
  padding: 14px 12px;
  font-size: 13.5px; color: var(--muted, #6A7A91);
}
.kn-search-empty a { color: var(--blue, #2D7DD2); font-weight: 600; }

/* ============================================================================
   /search/ RESULTS PAGE
   ============================================================================*/
.kn-search-page-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #E3ECF5);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: 0 12px 32px -16px rgba(14, 30, 53, 0.08);
}
.kn-search-page-input-wrap svg { color: var(--blue, #2D7DD2); flex-shrink: 0; }
.kn-search-page-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  font-size: 17px; font-family: inherit;
  background: transparent;
}
.kn-search-page-count {
  margin: 8px 0 18px;
  font-size: 14px; color: var(--muted, #6A7A91); letter-spacing: 0.01em;
}
.kn-search-page-results {
  display: flex; flex-direction: column; gap: 6px;
}
.kn-search-page-results .kn-search-result {
  background: var(--white, #fff);
  border: 1px solid var(--line, #E3ECF5);
  padding: 14px 16px;
  grid-template-columns: 110px 1fr;
}
.kn-search-empty-page {
  padding: 30px;
  text-align: center;
  color: var(--muted, #6A7A91);
  background: var(--surface, #F5F8FD);
  border-radius: 14px;
}

/* =====================================================================
   MEGA MENU V2 — alignment-first redesign
   ---------------------------------------------------------------------
   Fixes the empty-column problem on Cosmetic (leaf-only sections like
   Vitiligo / Mole Excision / Scar Revision / Varicose Veins were
   rendering as a header with empty space below). Now:
     - Rich sections (with groups OR ≥2 items) keep getting full columns.
     - Leaf-only sections are pooled into a single "More procedures"
       column on the right (rendered by nav-mega-menu.php).
     - Columns use grid auto-balancing so every column is content-filled.
   Reconstructive (mega-1) switches from a long single column to a 3-col
   card grid — same content, half the vertical footprint, no dead space.
   ===================================================================== */

/* ---- Cosmetic v2 — fixed wrap-grid (no horizontal scroll) ----
   Earlier draft used `grid-auto-flow: column` which forced every
   section into one row and caused horizontal overflow + overlap on
   pillars with many sections. This grid wraps to multiple rows
   instead, so a Cosmetic panel with 7 sections renders as 4 + 3
   rather than overflowing the viewport. */
.kn-menu-mega.kn-menu-v2 .kn-mega-cols {
  /* 5 outer grid tracks. Face takes tracks 1-2 (via .kn-mega-col-wide
     spanning two) and renders its sub-categories in a nested 2-col grid;
     Breast / Body / Genitals each take one of tracks 3-5. Reads as:
     Face-A | Face-B | Breast | Body | Genitals. */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 22px;
  align-items: start;
}
.kn-menu-mega.kn-menu-v2 .kn-mega-col {
  min-width: 0;          /* allow text to wrap inside the column */
}
.kn-menu-mega.kn-menu-v2 .kn-mega-col .kn-sec-title {
  display: block;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Face — wide grid cell spanning two outer columns.
   The title + its underline naturally extend across both inner halves
   so the line under "Face" is one continuous horizontal stroke covering
   both Eyes-column and Cheek-column, with no break in the gutter. */
.kn-menu-mega.kn-menu-v2 .kn-mega-col-wide {
  grid-column: span 2;
}
.kn-menu-mega.kn-menu-v2 .kn-mega-col-wide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.kn-menu-mega.kn-menu-v2 .kn-mega-col-wide-half {
  min-width: 0;
}
.kn-menu-mega.kn-menu-v2 .kn-grp-h,
.kn-menu-mega.kn-menu-v2 .kn-flat-items a {
  display: block;
  word-break: normal;
  overflow-wrap: break-word;
}
@media (max-width: 1100px) {
  /* Drop Face's wide-span and let it become a normal 1-track column —
     5 narrow tracks gets too cramped below this width. */
  .kn-menu-mega.kn-menu-v2 .kn-mega-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .kn-menu-mega.kn-menu-v2 .kn-mega-col-wide { grid-column: span 1; }
  .kn-menu-mega.kn-menu-v2 .kn-mega-col-wide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .kn-menu-mega.kn-menu-v2 .kn-mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pool column ("More procedures") — denser list since each item is one row */
.kn-menu-mega.kn-menu-v2 .kn-mega-col-pool .kn-flat-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.kn-menu-mega.kn-menu-v2 .kn-mega-col-pool .kn-flat-items li a {
  padding: 6px 0;
  font-weight: 500;
}
.kn-menu-mega.kn-menu-v2 .kn-sec-title-static {
  display: block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #555c66);
  margin-bottom: 12px;
  cursor: default;
}

/* ---- Stacked sub-section inside a column.
       Used when nav-loader step 6 tucks a small Cosmetic section under a
       pillar (e.g. Sex Reassignment → Genitals column). Its own title +
       link list render below the pillar's content, separated by a thin
       divider so it reads as a distinct category, not a continuation. ---- */
.kn-menu-mega.kn-menu-v2 .kn-stacked {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(14, 30, 53, 0.08);
}
.kn-menu-mega.kn-menu-v2 .kn-stacked-title {
  /* Match the main section titles (Face / Breast / Body / Genitals) so a
     stacked sub-section reads as a peer category, not a heavier sub-label. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink, #0E1E35);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color 0.15s ease;
}
.kn-menu-mega.kn-menu-v2 .kn-stacked-title:hover { color: var(--blue, #2D7DD2); }
.kn-menu-mega.kn-menu-v2 .kn-stacked-title-static { cursor: default; }
.kn-menu-mega.kn-menu-v2 .kn-stacked-title-static:hover { color: var(--ink, #0E1E35); }
.kn-menu-mega.kn-menu-v2 .kn-stacked .kn-flat-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kn-menu-mega.kn-menu-v2 .kn-stacked .kn-flat-items a {
  /* Inherit weight + padding from the base `.kn-flat-items a` rule so
     stacked sub-section items look identical to the main section items
     (Breast / Body / Genitals etc.) — same weight, same hover-pill.
     Previously a 500-weight override made the Reconstructive stacked
     items (Carpal Tunnel etc.) look heavier than the rest of the menu
     (per user 2026-06-14). */
}

/* ---- Reconstructive v2 — 3-col card grid ---- */
.kn-menu-mega.kn-menu-v2 .kn-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.kn-menu-mega.kn-menu-v2 .kn-mega-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface, #f5f8fd);
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink, #0E1E35);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  min-height: 78px;
}
.kn-menu-mega.kn-menu-v2 .kn-mega-card:hover {
  background: #ffffff;
  border-color: var(--blue, #2D7DD2);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px rgba(45, 125, 210, 0.32);
}
.kn-menu-mega.kn-menu-v2 .kn-mega-card-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink, #0E1E35);
}
.kn-menu-mega.kn-menu-v2 .kn-mega-card-preview {
  font-size: 11.5px;
  color: var(--muted, #555c66);
  line-height: 1.35;
}

/* ---- Smaller-viewport behavior for V2 ---- */
@media (max-width: 1180px) {
  .kn-menu-mega.kn-menu-v2 .kn-mega-cols { grid-auto-columns: minmax(180px, 1fr); gap: 16px; }
  .kn-menu-mega.kn-menu-v2 .kn-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}