.kkh-wrap {
  --kkh-header-h: 87px;
  --kkh-white: #ffffff;
  --kkh-black: #000000;
  --kkh-text: #111111;
  --kkh-muted: rgba(17, 17, 17, 0.42);
  --kkh-bg: #ffffff;
  --kkh-overlay: rgba(255, 255, 255, 0.72);
  --kkh-border: rgba(17, 17, 17, 0.08);
  --kkh-ease: cubic-bezier(.22, 1, .36, 1);
  --kkh-menu-dim-opacity: .42;
  --kkh-mobile-bar-h: 72px;
  --kkh-mobile-dim-opacity: .42;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.kkh-theme-dark {
  --kkh-text: #ffffff;
  --kkh-muted: rgba(255, 255, 255, 0.42);
  --kkh-bg: #000000;
  --kkh-overlay: rgba(0, 0, 0, 0.72);
  --kkh-border: rgba(255, 255, 255, 0.10);
}

.kkh-wrap * { box-sizing: border-box; }
.kkh-wrap a { color: inherit; text-decoration: none; }
.kkh-wrap button { font: inherit; }
/* v1.0.12: no forced font-size for shortcode/menu trigger buttons; Elementor Style controls must own typography. */
.kkh-wrap .kkh-nav-trigger { font: inherit; }

.kkh-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: var(--kkh-header-h);
  padding: 0 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 60px;
  background: transparent;
  color: var(--kkh-text);
  transition: transform .34s var(--kkh-ease), background .2s var(--kkh-ease), color .2s var(--kkh-ease);
}

.kkh-header.is-hidden { transform: translateY(-100%); }

.kkh-header.is-sticky,
.kkh-header.is-menu-open {
  background: var(--kkh-bg);
}

.kkh-logo {
  display: inline-flex;
  align-items: center;
  color: var(--kkh-text);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.kkh-logo img {
  display: block;
  height: auto;
  max-width: none;
}

.kkh-logo span { color: var(--kkh-text); }

.kkh-desktop-nav {
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.kkh-nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.kkh-nav-link,
.kkh-nav-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--kkh-text);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1;
  min-height: 0;
  min-width: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  transition: opacity .18s var(--kkh-ease), color .18s var(--kkh-ease);
}

.kkh-desktop-nav:hover .kkh-nav-link,
.kkh-desktop-nav:hover .kkh-nav-trigger { opacity: var(--kkh-menu-dim-opacity); }

.kkh-nav-item:hover .kkh-nav-link,
.kkh-nav-item:hover .kkh-nav-trigger,
.kkh-nav-trigger.is-active { opacity: 1; }

.kkh-page-blur {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--kkh-header-h);
  bottom: 0;
  z-index: 8000;
  background: var(--kkh-overlay);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--kkh-ease), visibility 0s linear .28s;
}

.kkh-page-blur.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s var(--kkh-ease), visibility 0s linear 0s;
}

.kkh-mega {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--kkh-header-h);
  z-index: 9000;
  background: var(--kkh-bg);
  color: var(--kkh-text);
  padding: 39px 36px 50px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .28s var(--kkh-ease), transform .34s var(--kkh-ease), visibility 0s linear .28s;
}

.kkh-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .28s var(--kkh-ease), transform .34s var(--kkh-ease), visibility 0s linear 0s;
}

.kkh-mega-inner {
  color: var(--kkh-text);
}

.kkh-theme-dark .kkh-mega-inner,
.kkh-theme-dark .kkh-mega-inner *:not(img):not(svg):not(path) {
  color: var(--kkh-text);
}

.kkh-mobile-bar,
.kkh-mobile-sheet-overlay,
.kkh-mobile-sheet { display: none; }


/* v1.0.8: force mobile icon colors against theme/plugin overrides */
.kkh-wrap .kkh-mobile-item,
.kkh-wrap .kkh-mobile-item:visited,
.kkh-wrap .kkh-mobile-item .material-icons-outlined {
  color: var(--kkh-text) !important;
}

.kkh-theme-dark .kkh-mobile-item,
.kkh-theme-dark .kkh-mobile-item:visited,
.kkh-theme-dark .kkh-mobile-item .material-icons-outlined {
  color: #ffffff !important;
}

.kkh-theme-light .kkh-mobile-item,
.kkh-theme-light .kkh-mobile-item:visited,
.kkh-theme-light .kkh-mobile-item .material-icons-outlined {
  color: #111111 !important;
}

.kkh-wrap .kkh-mobile-item .material-icons-outlined {
  font-family: 'Material Icons Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  text-transform: none !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  font-feature-settings: 'liga' !important;
}

.kkh-wrap .kkh-mobile-item svg,
.kkh-wrap .kkh-mobile-item svg * {
  stroke: currentColor !important;
  fill: none;
}

.kkh-fallback-mobile {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kkh-fallback-mobile a {
  display: block;
  font-size: 42px;
  line-height: 1.05;
}

@media (max-width: 1024px) {
  .kkh-header {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0 20px;
  }

  .kkh-logo {
    justify-self: center;
    font-size: 36px;
  }

  .kkh-desktop-nav { display: none; }

  .kkh-mega { display: none; }
  .kkh-page-blur { display: none; }

  .kkh-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 16000;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: var(--kkh-mobile-bar-h);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--kkh-bg) 96%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--kkh-border);
  }

  .kkh-mobile-item {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kkh-text);
    opacity: 1;
    cursor: pointer;
    transition: opacity .18s var(--kkh-ease), color .18s var(--kkh-ease);
  }

  .kkh-mobile-bar:hover .kkh-mobile-item { opacity: var(--kkh-mobile-dim-opacity); }
  .kkh-mobile-item:hover,
  .kkh-mobile-item.is-active,
  .kkh-mobile-item:focus-visible { opacity: 1; }

  .kkh-mobile-item .material-icons-outlined {
    display: block;
    font-size: 24px;
    line-height: 1;
    color: currentColor;
  }

  .kkh-mobile-svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
  }

  .kkh-mobile-sheet-overlay {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 25vh;
    z-index: 12000;
    background: var(--kkh-overlay);
    backdrop-filter: blur(44px);
    -webkit-backdrop-filter: blur(44px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s var(--kkh-ease), visibility 0s linear .28s;
  }

  .kkh-mobile-sheet-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s var(--kkh-ease), visibility 0s linear 0s;
  }

  .kkh-mobile-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 25vh;
    bottom: calc(var(--kkh-mobile-bar-h) + env(safe-area-inset-bottom));
    z-index: 13000;
    height: auto;
    max-height: calc(75vh - var(--kkh-mobile-bar-h) - env(safe-area-inset-bottom));
    padding: 28px 20px 30px;
    background: var(--kkh-bg);
    color: var(--kkh-text);
    transform: translateY(calc(100% + var(--kkh-mobile-bar-h)));
    transition: transform .42s var(--kkh-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .kkh-mobile-sheet.is-open { transform: translateY(0); }

  .kkh-mobile-panel { display: none; }
  .kkh-mobile-panel.is-active { display: block; }

  .kkh-mobile-panel,
  .kkh-mobile-panel *:not(img):not(svg):not(path) {
    color: var(--kkh-text);
  }
}

/* v1.0.12: hard mobile theme colors for Material Icons, above theme defaults. */
@media (max-width: 1024px) {
  .kkh-wrap.kkh-theme-dark .kkh-mobile-item,
  .kkh-wrap.kkh-theme-dark .kkh-mobile-item:visited,
  .kkh-wrap.kkh-theme-dark .kkh-mobile-item .material-icons-outlined {
    color: #ffffff !important;
  }

  .kkh-wrap.kkh-theme-dark .kkh-mobile-item svg,
  .kkh-wrap.kkh-theme-dark .kkh-mobile-item svg * {
    stroke: #ffffff !important;
  }

  .kkh-wrap.kkh-theme-dark .kkh-mobile-svg {
    filter: brightness(0) invert(1);
  }

  .kkh-wrap.kkh-theme-light .kkh-mobile-item,
  .kkh-wrap.kkh-theme-light .kkh-mobile-item:visited,
  .kkh-wrap.kkh-theme-light .kkh-mobile-item .material-icons-outlined {
    color: #111111 !important;
  }

  .kkh-wrap.kkh-theme-light .kkh-mobile-item svg,
  .kkh-wrap.kkh-theme-light .kkh-mobile-item svg * {
    stroke: #111111 !important;
  }

  .kkh-wrap.kkh-theme-light .kkh-mobile-svg {
    filter: none;
  }
}