/*==============================================
   KIMST site header
   Self-contained (kh- prefix) - does not rely on the
   legacy .main-header / .mobile-menu rules in style.css
===============================================*/

.kh-header {
    --kh-green: #108543;
    --kh-green-700: #0b6a34;
    --kh-green-900: #073d20;
    --kh-green-50: #eef7f1;
    --kh-red: #d02010;
    --kh-red-700: #a8180c;
    --kh-ink: #14231a;
    --kh-muted: #5b6b61;
    --kh-line: #e3eae5;
    --kh-topbar-h: 42px;
    --kh-nav-h: 84px;
    --kh-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    z-index: 9990;
    font-family: var(--kh-font-ui);
    font-size: 15px;
    line-height: 1.4;
    color: var(--kh-ink);
}

.kh-header *,
.kh-header *::before,
.kh-header *::after {
    box-sizing: border-box;
}

.kh-header a {
    color: inherit;
    text-decoration: none;
}

.kh-header :focus-visible {
    outline: 2px solid var(--kh-green);
    outline-offset: 2px;
}

.kh-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/*---------- Top bar ----------*/

.kh-topbar {
    background: var(--kh-green-900);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
}

.kh-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--kh-topbar-h);
}

.kh-topbar ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kh-topbar__contact {
    gap: 26px;
}

.kh-topbar__contact li > a,
.kh-topbar__contact li > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s ease;
}

.kh-topbar__contact i {
    color: #7fd6a2;
    font-size: 14px;
}

.kh-topbar__contact a:hover,
.kh-topbar__links a:hover {
    color: #fff;
}

.kh-topbar__right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.kh-topbar__links li + li {
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.kh-topbar__links a {
    transition: color .2s ease;
}

/* Social icons (shared by the top bar and the drawer) */
.kh-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kh-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 14px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.kh-social a:hover {
    background: #fff;
    color: var(--kh-green);
    transform: translateY(-2px);
}

/*---------- Main bar ----------*/

.kh-navholder {
    height: var(--kh-nav-h);
}

.kh-navbar {
    position: relative;
    height: var(--kh-nav-h);
    background: #fff;
    border-bottom: 1px solid var(--kh-line);
    transition: height .3s var(--kh-ease), box-shadow .3s ease;
}

.kh-navbar__inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 28px;
}

/* Stuck state: bar detaches from the flow and pins to the viewport top */
.kh-header.is-stuck .kh-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 68px;
    background: #fff;
    border-bottom-color: transparent;
    box-shadow: 0 10px 30px rgba(7, 61, 32, .12);
    animation: khSlideDown .4s var(--kh-ease);
}

@keyframes khSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Logo lockup: crest image + the institute name as live text, so it stays sharp at any size */
.kh-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.kh-brand__crest {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 66px;
    transition: height .3s var(--kh-ease);
}

.kh-brand__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.kh-brand__name {
    color: var(--kh-green-700);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: font-size .3s var(--kh-ease);
}

.kh-brand__sub {
    color: var(--kh-red);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
    transition: font-size .3s var(--kh-ease);
}

.kh-header.is-stuck .kh-brand__crest {
    height: 52px;
}

.kh-header.is-stuck .kh-brand__name {
    font-size: 16px;
}

.kh-header.is-stuck .kh-brand__sub {
    font-size: 11.5px;
}

/*---------- Primary menu ----------*/

.kh-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.kh-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kh-item {
    position: relative;
}

.kh-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    background: transparent;
    color: var(--kh-ink);
    font: 600 15px/1.2 var(--kh-font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.kh-link:hover,
.kh-nav .kh-item:hover > .kh-link,
.kh-item.is-open > .kh-link {
    background: var(--kh-green-50);
    color: var(--kh-green-700);
}

.kh-item.is-active > .kh-link {
    background: var(--kh-green);
    color: #fff;
}

.kh-caret {
    font-size: 15px;
    line-height: 1;
    transition: transform .25s var(--kh-ease);
}

.kh-nav .kh-item:hover > .kh-link .kh-caret,
.kh-item.is-open > .kh-link .kh-caret {
    transform: rotate(180deg);
}

/* Dropdown */
.kh-sub {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 250px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--kh-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(7, 61, 32, .18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .25s var(--kh-ease), visibility 0s linear .25s;
}

/* Invisible bridge so the menu doesn't close while the pointer crosses the gap */
.kh-sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

/* Pointer notch */
.kh-sub::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid var(--kh-line);
    border-left: 1px solid var(--kh-line);
    transform: translateX(-50%) rotate(45deg);
}

.kh-nav .kh-has-sub:hover > .kh-sub,
.kh-nav .kh-has-sub.is-open > .kh-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.kh-sub li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--kh-ink);
    font-weight: 500;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, padding .2s ease;
}

.kh-sub li a::after {
    content: "\f178";
    font-family: FontAwesome;
    font-size: 13px;
    color: var(--kh-green);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease;
}

.kh-sub li a:hover,
.kh-sub li a.is-active {
    background: var(--kh-green-50);
    color: var(--kh-green-700);
}

.kh-sub li a:hover::after,
.kh-sub li a.is-active::after {
    opacity: 1;
    transform: translateX(0);
}

/*---------- Actions: CTA + burger ----------*/

.kh-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.kh-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--kh-red);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(208, 32, 16, .25);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.kh-cta i {
    font-size: 14px;
    transition: transform .25s var(--kh-ease);
}

.kh-cta:hover {
    background: var(--kh-red-700);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(208, 32, 16, .32);
}

.kh-cta:hover i {
    transform: translateX(4px);
}

.kh-cta--block {
    display: flex;
    width: 100%;
    min-height: 48px;
}

.kh-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--kh-line);
    border-radius: 14px;
    background: #fff;
    transition: background .2s ease, border-color .2s ease;
}

.kh-burger:hover {
    background: var(--kh-green-50);
    border-color: var(--kh-green);
}

.kh-burger__bars {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.kh-burger__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--kh-green-900);
}

.kh-burger__bars span:nth-child(1) { top: 0; }
.kh-burger__bars span:nth-child(2) { top: 7px; width: 70%; }
.kh-burger__bars span:nth-child(3) { top: 14px; }

/*---------- Mobile drawer ----------*/

.kh-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(7, 61, 32, .55);
    opacity: 0;
    transition: opacity .3s ease;
}

.kh-overlay[hidden] {
    display: none;
}

.kh-overlay.is-visible {
    opacity: 1;
}

.kh-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(390px, 90vw);
    overflow-y: auto;            /* the whole panel scrolls on short screens: nothing is hidden */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: -20px 0 60px rgba(7, 61, 32, .25);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .4s var(--kh-ease), visibility 0s linear .4s;
}

.kh-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}

.kh-drawer__head {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--kh-line);
    background: #fff;
}

.kh-drawer__logo .kh-brand__crest {
    height: 50px;
}

.kh-drawer__logo .kh-brand__name {
    font-size: 15px;
}

.kh-drawer__logo .kh-brand__sub {
    font-size: 11px;
}

.kh-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--kh-green-50);
    color: var(--kh-green-900);
    font-size: 20px;
    transition: background .2s ease, color .2s ease, transform .3s var(--kh-ease);
}

.kh-drawer__close:hover {
    background: var(--kh-green);
    color: #fff;
    transform: rotate(90deg);
}

.kh-drawer__nav {
    flex: 1 0 auto;            /* grows to push the footer down on tall phones, never shrinks */
    padding: 12px 14px;
}

.kh-drawer .kh-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.kh-drawer .kh-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 16px;
    text-align: left;
}

/* Accordion instead of floating dropdown */
.kh-drawer .kh-sub {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0 0 0 14px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition: max-height .35s var(--kh-ease), visibility 0s linear .35s;
}

.kh-drawer .kh-sub::before,
.kh-drawer .kh-sub::after {
    display: none;
}

.kh-drawer .kh-has-sub.is-open > .kh-sub {
    max-height: 320px;
    padding-top: 4px;
    padding-bottom: 6px;
    visibility: visible;
    transition-delay: 0s;
}

.kh-drawer .kh-sub li a {
    padding: 12px 16px;
    border-left: 2px solid var(--kh-line);
    border-radius: 0 10px 10px 0;
    font-size: 15px;
}

.kh-drawer .kh-sub li a::after {
    display: none;
}

.kh-drawer__foot {
    flex: 0 0 auto;
    display: grid;
    gap: 16px;
    padding: 18px 20px 22px;
    border-top: 1px solid var(--kh-line);
    background: #f8fbf9;
}

.kh-drawer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--kh-green-700);
}

.kh-drawer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--kh-line);
    border-radius: 999px;
    background: #fff;
    transition: background .2s ease, border-color .2s ease;
}

.kh-drawer__links a:hover {
    border-color: var(--kh-green);
    background: var(--kh-green-50);
}

.kh-drawer__contact {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--kh-muted);
}

.kh-drawer__contact li > a,
.kh-drawer__contact li > span {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-wrap: anywhere;
}

.kh-drawer__contact li > a,
.kh-drawer__contact li > span {
    min-height: 44px;   /* same row height for phone, email and address */
}

.kh-drawer__contact i {
    flex: 0 0 18px;
    color: var(--kh-green);
    font-size: 16px;
    text-align: center;
}

.kh-social--light a {
    width: 44px;
    height: 44px;
    background: var(--kh-green-50);
    color: var(--kh-green-700);
    font-size: 16px;
}

.kh-social--light a:hover {
    background: var(--kh-green);
    color: #fff;
}

html.kh-lock,
html.kh-lock body {
    overflow: hidden;
}

/* Short screens (small phones, landscape): tighter rows so more fits before the panel has to scroll */
@media (max-height: 720px) {
    .kh-drawer .kh-link {
        min-height: 44px;
    }

    .kh-drawer__foot {
        gap: 12px;
        padding: 14px 18px 18px;
    }

    .kh-drawer__contact {
        gap: 0;
    }
}

@media (max-height: 480px) {
    .kh-drawer__head {
        padding-top: 10px;
        padding-bottom: 10px;
    }

}

/* Very narrow phones (320px): the panel is only 288px wide, so the logo lockup gets compact */
@media (max-width: 359.98px) {
    .kh-drawer__head {
        gap: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .kh-drawer__logo {
        min-width: 0;
    }

    .kh-drawer__logo .kh-brand__crest {
        height: 38px;
    }

    .kh-drawer__logo .kh-brand__name {
        font-size: 12px;
        letter-spacing: .02em;
    }

    .kh-drawer__logo .kh-brand__sub {
        font-size: 9.5px;
        letter-spacing: .03em;
    }
}

/*---------- Responsive ----------*/

@media (max-width: 1320px) {
    .kh-navbar__inner { gap: 20px; }
    .kh-link { padding: 10px 11px; }
}

@media (max-width: 1199.98px) {
    .kh-header { --kh-nav-h: 72px; }

    .kh-nav { display: none; }
    .kh-burger { display: inline-flex; }
    .kh-brand__crest { height: 56px; }
    .kh-brand__name { font-size: 17px; }
    .kh-brand__sub { font-size: 12.5px; }
    .kh-header.is-stuck .kh-navbar { height: 64px; }
    .kh-header.is-stuck .kh-brand__crest { height: 48px; }
    .kh-header.is-stuck .kh-brand__name { font-size: 15.5px; }
    .kh-header.is-stuck .kh-brand__sub { font-size: 11.5px; }
    .kh-hide-md { display: none !important; }
}

@media (max-width: 767.98px) {
    .kh-hide-sm { display: none !important; }
    .kh-container { padding: 0 16px; }
    .kh-topbar__inner { min-height: 38px; }
}

@media (max-width: 575.98px) {
    .kh-header { --kh-nav-h: 66px; }

    .kh-cta:not(.kh-cta--block) { display: none; }
    .kh-brand { gap: 9px; }
    .kh-brand__crest { height: 48px; }
    .kh-brand__name { font-size: 14px; letter-spacing: .03em; }
    .kh-brand__sub { font-size: 10.5px; }
    .kh-header.is-stuck .kh-navbar { height: 60px; }
    .kh-header.is-stuck .kh-brand__crest { height: 42px; }
    .kh-header.is-stuck .kh-brand__name { font-size: 13px; }
    .kh-header.is-stuck .kh-brand__sub { font-size: 10px; }
    .kh-drawer__logo .kh-brand__crest { height: 44px; }
    .kh-topbar__inner { justify-content: center; gap: 16px; }
    .kh-topbar__right { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .kh-header *,
    .kh-header *::before,
    .kh-header *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}