/* =====================================================================
   THE KIPSOEN NATIONAL POLYTECHNIC - NATIVE PUBLIC WEBSITE V7
   React PublicWebsitePage remains the ONLY owner of the header/menu.
   Exact institutional blue: #2577C0 only.
   No gradient/faded/alternate institutional blues.
   ===================================================================== */

body.tknp-native-public-v7 {
  --tknp-blue: #2577C0;
  --tknp-white: #FFFFFF;
  --tknp-ink: #182F40;
  --tknp-muted: #64717D;
  --tknp-border: #D8E0E6;
  --tknp-page: #F7F9FB;
  --tknp-font: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
  background: var(--tknp-page) !important;
  color: var(--tknp-ink) !important;
  font-family: var(--tknp-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.tknp-native-public-v7 *,
body.tknp-native-public-v7 *::before,
body.tknp-native-public-v7 *::after { box-sizing: border-box; }

/* Native React header */
body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #2577C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}

body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-utility-bar {
  min-height: 36px !important;
  padding: .42rem clamp(1rem,4vw,3.5rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  background: #2577C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255,255,255,.45) !important;
  font-size: .8rem !important;
}

body.tknp-native-public-v7 .public-welcome-strip-text em,
body.tknp-native-public-v7 .knp-utility-contact,
body.tknp-native-public-v7 .knp-utility-contact span,
body.tknp-native-public-v7 .knp-utility-contact strong {
  color: #FFFFFF !important;
}

body.tknp-native-public-v7 .knp-utility-contact {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
  white-space: nowrap !important;
}

body.tknp-native-public-v7 .knp-utility-contact span + span {
  padding-left: 1rem !important;
  border-left: 1px solid rgba(255,255,255,.45) !important;
}

body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-masthead {
  width: min(1460px, calc(100% - 40px)) !important;
  max-width: 1460px !important;
  min-height: 112px !important;
  margin: 0 auto !important;
  padding: .72rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  background: #2577C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

body.tknp-native-public-v7 .public-brand.ouk-brand.knp-brand {
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

body.tknp-native-public-v7 .public-brand.ouk-brand.knp-brand img {
  width: 86px !important;
  min-width: 86px !important;
  height: 86px !important;
  min-height: 86px !important;
  padding: 3px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
  background: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
}

body.tknp-native-public-v7 .knp-brand-text {
  min-width: 0 !important;
  display: grid !important;
  gap: .3rem !important;
  color: #FFFFFF !important;
}

body.tknp-native-public-v7 .knp-brand-text strong {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(1.7rem,2.55vw,2.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: .015em !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

body.tknp-native-public-v7 .knp-brand-text em {
  color: #FFFFFF !important;
  font-size: clamp(.82rem,1.05vw,1rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  font-style: italic !important;
  white-space: normal !important;
}

body.tknp-native-public-v7 .knp-header-rpl-button {
  min-height: 44px !important;
  padding: .72rem 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #2577C0 !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.tknp-native-public-v7 .knp-masthead-meta {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: stretch !important;
  gap: .65rem !important;
}

body.tknp-native-public-v7 .knp-masthead-meta > div {
  min-width: 158px !important;
  padding: .62rem .78rem !important;
  display: grid !important;
  align-content: center !important;
  gap: .18rem !important;
  background: #2577C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  border-left: 4px solid #FFFFFF !important;
  border-radius: 4px !important;
}

body.tknp-native-public-v7 .knp-masthead-meta small,
body.tknp-native-public-v7 .knp-masthead-meta strong { color: #FFFFFF !important; }

body.tknp-native-public-v7 .knp-masthead-meta small {
  font-size: .68rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}

body.tknp-native-public-v7 .knp-masthead-meta strong {
  max-width: 220px !important;
  font-size: .8rem !important;
  line-height: 1.28 !important;
}

/* Native React navigation - no cloning */
body.tknp-native-public-v7 .knp-nav-shell {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
  background: #FFFFFF !important;
  background-image: none !important;
  border-bottom: 4px solid #2577C0 !important;
  box-shadow: 0 4px 11px rgba(0,0,0,.08) !important;
}

body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav {
  width: min(1460px,100%) !important;
  max-width: 1460px !important;
  min-height: 58px !important;
  margin: 0 auto !important;
  padding: 0 clamp(.35rem,1.15vw,1rem) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow: visible !important;
  background: #FFFFFF !important;
  background-image: none !important;
  border: 0 !important;
}

body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a,
body.tknp-native-public-v7 .knp-nav-group-button {
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 clamp(.58rem,1.05vw,1.05rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #2577C0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: clamp(.7rem,.82vw,.86rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a:hover,
body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a:focus-visible,
body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a.active,
body.tknp-native-public-v7 .knp-nav-group:hover > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group:focus-within > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.open > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.active > .knp-nav-group-button {
  background: #2577C0 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  outline: none !important;
}

body.tknp-native-public-v7 .knp-nav-group.portal-group > .knp-nav-group-button {
  background: #FFFFFF !important;
  color: #2577C0 !important;
  box-shadow: none !important;
}

body.tknp-native-public-v7 .knp-nav-group.portal-group:hover > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.portal-group.open > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.portal-group.active > .knp-nav-group-button {
  background: #2577C0 !important;
  color: #FFFFFF !important;
}

body.tknp-native-public-v7 .knp-nav-chevron {
  color: currentColor !important;
  font-size: .9rem !important;
}

body.tknp-native-public-v7 .knp-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  z-index: 7100 !important;
  width: min(430px,calc(100vw - 2rem)) !important;
  max-height: min(72vh,680px) !important;
  margin: 0 !important;
  padding: .55rem !important;
  gap: .2rem !important;
  overflow-y: auto !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: var(--tknp-ink) !important;
  border: 1px solid var(--tknp-border) !important;
  border-top: 4px solid #2577C0 !important;
  border-radius: 0 0 5px 5px !important;
  box-shadow: 0 15px 32px rgba(0,0,0,.16) !important;
}

body.tknp-native-public-v7 .knp-dropdown-menu > a {
  min-height: 52px !important;
  padding: .72rem .78rem !important;
  display: grid !important;
  align-content: center !important;
  gap: .18rem !important;
  background: #FFFFFF !important;
  color: var(--tknp-ink) !important;
  border: 0 !important;
  border-left: 4px solid transparent !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
}

body.tknp-native-public-v7 .knp-dropdown-menu > a:hover,
body.tknp-native-public-v7 .knp-dropdown-menu > a:focus-visible {
  background: #FFFFFF !important;
  color: #2577C0 !important;
  border-left-color: #2577C0 !important;
  outline: none !important;
}

body.tknp-native-public-v7 .knp-dropdown-menu > a strong {
  color: inherit !important;
  font-size: .9rem !important;
}

body.tknp-native-public-v7 .knp-dropdown-menu > a span {
  color: var(--tknp-muted) !important;
  font-size: .78rem !important;
}

body.tknp-native-public-v7 .knp-search-menu {
  background: #FFFFFF !important;
  border-top: 4px solid #2577C0 !important;
}

body.tknp-native-public-v7 .knp-search-menu .public-search-box button {
  background: #2577C0 !important;
  color: #FFFFFF !important;
  border-color: #2577C0 !important;
}

/* Solid institutional blue on major public branded surfaces */
body.tknp-native-public-v7 .public-hero,
body.tknp-native-public-v7 .ouk-hero,
body.tknp-native-public-v7 .dkut-hero,
body.tknp-native-public-v7 .portal-service-hero,
body.tknp-native-public-v7 .rpl-home-callout {
  background: #2577C0 !important;
  background-image: none !important;
}

body.tknp-native-public-v7 .public-hero.ouk-hero {
  width: min(1320px,calc(100% - 32px)) !important;
  max-width: 1320px !important;
  margin: 18px auto 0 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}

body.tknp-native-public-v7 .public-hero.ouk-hero::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

body.tknp-native-public-v7 .ouk-hero-content > small {
  color: #FFFFFF !important;
  border-left: 4px solid #FFFFFF !important;
}

body.tknp-native-public-v7 .ouk-hero h1,
body.tknp-native-public-v7 .ouk-hero-content > p { color: #FFFFFF !important; }

body.tknp-native-public-v7 .ouk-hero-actions a,
body.tknp-native-public-v7 .ouk-hero-actions a.secondary,
body.tknp-native-public-v7 .ouk-hero-actions a.outline {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #2577C0 !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.tknp-native-public-v7 .public-hero.ouk-hero aside.knp-hero-summary,
body.tknp-native-public-v7 .ouk-hero-service-card {
  background: #FFFFFF !important;
  background-image: none !important;
  color: var(--tknp-ink) !important;
  border: 1px solid #FFFFFF !important;
  border-top: 5px solid #2577C0 !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}

body.tknp-native-public-v7 .knp-hero-summary small,
body.tknp-native-public-v7 .knp-hero-summary strong {
  color: var(--tknp-ink) !important;
}

body.tknp-native-public-v7 .knp-hero-summary li {
  background: #FFFFFF !important;
  color: var(--tknp-ink) !important;
  border-left: 4px solid #2577C0 !important;
}

body.tknp-native-public-v7 .knp-hero-summary li::before {
  color: #2577C0 !important;
}

body.tknp-native-public-v7 .public-main.ouk-main {
  width: min(1320px,calc(100% - 32px)) !important;
  max-width: 1320px !important;
}

body.tknp-native-public-v7 .btn-primary,
body.tknp-native-public-v7 .primary-button,
body.tknp-native-public-v7 .application-status-link,
body.tknp-native-public-v7 .rpl-start-button {
  background: #2577C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #2577C0 !important;
}

body.tknp-native-public-v7 footer.public-footer,
body.tknp-native-public-v7 footer.ouk-footer {
  background: #2577C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-top: 4px solid #2577C0 !important;
}

body.tknp-native-public-v7 footer.public-footer *,
body.tknp-native-public-v7 footer.ouk-footer * { color: #FFFFFF !important; }

body.tknp-native-public-v7 .tknp-public-status-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Native mobile navigation remains controlled by React's .mobile-open/.open */
@media (max-width: 1120px) and (min-width: 901px) {
  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a,
  body.tknp-native-public-v7 .knp-nav-group-button {
    padding-left: clamp(.42rem,.72vw,.7rem) !important;
    padding-right: clamp(.42rem,.72vw,.7rem) !important;
    font-size: clamp(.64rem,.75vw,.76rem) !important;
  }

  body.tknp-native-public-v7 .knp-masthead-meta > div:last-child {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header {
    position: static !important;
  }

  body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-utility-bar {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: .25rem !important;
  }

  body.tknp-native-public-v7 .public-welcome-strip-text em {
    white-space: normal !important;
  }

  body.tknp-native-public-v7 .knp-utility-contact {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: .35rem .8rem !important;
    white-space: normal !important;
  }

  body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-masthead {
    width: calc(100% - 1.5rem) !important;
    min-height: 82px !important;
  }

  body.tknp-native-public-v7 .knp-masthead-meta { display: none !important; }

  body.tknp-native-public-v7 .knp-mobile-nav-toggle {
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: .72rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    background: #2577C0 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 0 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
    background: #FFFFFF !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav.mobile-open {
    display: flex !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a,
  body.tknp-native-public-v7 .knp-nav-group,
  body.tknp-native-public-v7 .knp-nav-group-button {
    width: 100% !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a,
  body.tknp-native-public-v7 .knp-nav-group-button {
    min-height: 48px !important;
    justify-content: space-between !important;
    padding: .75rem 1rem !important;
    background: #FFFFFF !important;
    color: #2577C0 !important;
    border: 0 !important;
    border-top: 1px solid var(--tknp-border) !important;
    font-size: .84rem !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a:hover,
  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a.active,
  body.tknp-native-public-v7 .knp-nav-group.open > .knp-nav-group-button,
  body.tknp-native-public-v7 .knp-nav-group.active > .knp-nav-group-button {
    background: #2577C0 !important;
    color: #FFFFFF !important;
  }

  body.tknp-native-public-v7 .knp-nav-group { display: block !important; }

  body.tknp-native-public-v7 .knp-dropdown-menu,
  body.tknp-native-public-v7 .knp-nav-group.portal-group > .knp-dropdown-menu,
  body.tknp-native-public-v7 .knp-nav-group.search-group > .knp-dropdown-menu {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: .45rem !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-left: 4px solid #2577C0 !important;
    box-shadow: none !important;
  }

  body.tknp-native-public-v7 .knp-nav-group:not(.open) > .knp-dropdown-menu {
    display: none !important;
  }

  body.tknp-native-public-v7 .knp-nav-group.open > .knp-dropdown-menu {
    display: grid !important;
  }

  body.tknp-native-public-v7 .knp-nav-group:hover:not(.open) > .knp-dropdown-menu,
  body.tknp-native-public-v7 .knp-nav-group:focus-within:not(.open) > .knp-dropdown-menu {
    display: none !important;
  }
}

@media (max-width: 620px) {
  body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-utility-bar {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  body.tknp-native-public-v7 .knp-utility-contact span + span {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  body.tknp-native-public-v7 .public-brand.ouk-brand.knp-brand {
    gap: .65rem !important;
  }

  body.tknp-native-public-v7 .public-brand.ouk-brand.knp-brand img {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
  }

  body.tknp-native-public-v7 .knp-brand-text strong {
    font-size: clamp(1rem,5.3vw,1.28rem) !important;
    line-height: 1.1 !important;
  }

  body.tknp-native-public-v7 .knp-brand-text em {
    font-size: .72rem !important;
  }

  body.tknp-native-public-v7 .knp-header-rpl-button {
    display: none !important;
  }

  body.tknp-native-public-v7 .public-hero.ouk-hero,
  body.tknp-native-public-v7 .public-main.ouk-main {
    width: calc(100% - 1rem) !important;
  }
}

/* === TKNP HEADER MENU SWAP V8 BEGIN === */

/* Thin utility strip remains solid institutional blue. */
body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-utility-bar {
  background:#2577C0 !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border-bottom:0 !important;
}

/* Large institutional masthead becomes white. */
body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-masthead {
  min-height:108px !important;
  background:#FFFFFF !important;
  background-image:none !important;
  color:#2577C0 !important;
  border-bottom:1px solid #D8E0E6 !important;
}

body.tknp-native-public-v7 .public-brand.ouk-brand.knp-brand,
body.tknp-native-public-v7 .knp-brand-text,
body.tknp-native-public-v7 .knp-brand-text strong,
body.tknp-native-public-v7 .knp-brand-text em {
  color:#2577C0 !important;
}

body.tknp-native-public-v7 .public-brand.ouk-brand.knp-brand img {
  background:#FFFFFF !important;
  border:2px solid #2577C0 !important;
  box-shadow:none !important;
}

/* RPL button becomes blue on the white masthead. */
body.tknp-native-public-v7 .knp-header-rpl-button {
  background:#2577C0 !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border:1px solid #2577C0 !important;
  border-radius:4px !important;
}

body.tknp-native-public-v7 .knp-header-rpl-button:hover,
body.tknp-native-public-v7 .knp-header-rpl-button:focus-visible {
  background:#2577C0 !important;
  color:#FFFFFF !important;
  outline:2px solid #2577C0 !important;
  outline-offset:2px !important;
}

/* Admissions and office-hour cards. */
body.tknp-native-public-v7 .knp-masthead-meta > div {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#2577C0 !important;
  border:1px solid #2577C0 !important;
  border-left:4px solid #2577C0 !important;
  border-radius:4px !important;
  box-shadow:none !important;
}

body.tknp-native-public-v7 .knp-masthead-meta small,
body.tknp-native-public-v7 .knp-masthead-meta strong {
  color:#2577C0 !important;
}

/* Main menu becomes solid blue. */
body.tknp-native-public-v7 .knp-nav-shell {
  background:#2577C0 !important;
  background-image:none !important;
  border-top:0 !important;
  border-bottom:4px solid #2577C0 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
}

body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav {
  min-height:58px !important;
  background:#2577C0 !important;
  background-image:none !important;
}

body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a,
body.tknp-native-public-v7 .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.portal-group > .knp-nav-group-button {
  min-height:58px !important;
  background:#2577C0 !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-left:1px solid rgba(255,255,255,.32) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:clamp(.72rem,.82vw,.86rem) !important;
  font-weight:800 !important;
}

body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > :first-child {
  border-left:0 !important;
}

/* Active/hover state: white on blue band. */
body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a:hover,
body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a:focus-visible,
body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a.active,
body.tknp-native-public-v7 .knp-nav-group:hover > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group:focus-within > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.open > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.active > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.portal-group:hover > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.portal-group.open > .knp-nav-group-button,
body.tknp-native-public-v7 .knp-nav-group.portal-group.active > .knp-nav-group-button {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#2577C0 !important;
  outline:none !important;
}

/* Dropdowns remain white and readable. */
body.tknp-native-public-v7 .knp-dropdown-menu,
body.tknp-native-public-v7 .knp-search-menu {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#182F40 !important;
  border:1px solid #D8E0E6 !important;
  border-top:4px solid #2577C0 !important;
}

/* Fit menu more cleanly on normal desktop/laptop widths. */
@media (min-width:901px) and (max-width:1360px) {
  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a,
  body.tknp-native-public-v7 .knp-nav-group-button,
  body.tknp-native-public-v7 .knp-nav-group.portal-group > .knp-nav-group-button {
    padding-left:clamp(.45rem,.72vw,.72rem) !important;
    padding-right:clamp(.45rem,.72vw,.72rem) !important;
    font-size:clamp(.66rem,.74vw,.76rem) !important;
  }

  body.tknp-native-public-v7 .knp-masthead-meta > div {
    min-width:148px !important;
  }

  body.tknp-native-public-v7 .knp-brand-text strong {
    font-size:clamp(1.55rem,2.15vw,2.35rem) !important;
  }
}

/* Mobile public website follows the same white/blue logic. */
@media (max-width:900px) {
  body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-masthead {
    background:#FFFFFF !important;
    color:#2577C0 !important;
  }

  body.tknp-native-public-v7 .knp-mobile-nav-toggle {
    background:#2577C0 !important;
    background-image:none !important;
    color:#FFFFFF !important;
    border:0 !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav.mobile-open {
    background:#2577C0 !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a,
  body.tknp-native-public-v7 .knp-nav-group-button,
  body.tknp-native-public-v7 .knp-nav-group.portal-group > .knp-nav-group-button {
    min-height:48px !important;
    background:#2577C0 !important;
    color:#FFFFFF !important;
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.34) !important;
  }

  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a:hover,
  body.tknp-native-public-v7 .public-nav.ouk-nav.knp-public-nav > a.active,
  body.tknp-native-public-v7 .knp-nav-group.open > .knp-nav-group-button,
  body.tknp-native-public-v7 .knp-nav-group.active > .knp-nav-group-button {
    background:#FFFFFF !important;
    color:#2577C0 !important;
  }

  body.tknp-native-public-v7 .knp-dropdown-menu,
  body.tknp-native-public-v7 .knp-nav-group.portal-group > .knp-dropdown-menu,
  body.tknp-native-public-v7 .knp-nav-group.search-group > .knp-dropdown-menu {
    background:#FFFFFF !important;
    color:#182F40 !important;
    border-left:4px solid #2577C0 !important;
  }
}
/* === TKNP HEADER MENU SWAP V8 END === */

/* === TKNP MASTHEAD ONE LINE V9 BEGIN ===
   Requested masthead refinement:
   - THE KIPSOEN NATIONAL POLYTECHNIC stays on one line on desktop/tablet
   - tagline stays on its own line below
   - remove CSS circular crop/border/background around logo
   - preserve native React header/menu and V8 white/blue swap
*/

/* Give the brand the horizontal room it needs. */
body.tknp-native-public-v7
.public-header.ouk-header.knp-public-header
.knp-masthead {
  width:min(1540px,calc(100% - 32px)) !important;
  max-width:1540px !important;
  min-height:112px !important;
  gap:1.15rem !important;
}

/* Brand block takes priority over the right-side cards. */
body.tknp-native-public-v7
.public-brand.ouk-brand.knp-brand {
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:none !important;
  gap:1rem !important;
  align-items:center !important;
}

/* Remove the extra CSS circle around the logo.
   The actual supplied institutional logo artwork is left untouched. */
body.tknp-native-public-v7
.public-brand.ouk-brand.knp-brand img {
  width:96px !important;
  min-width:96px !important;
  height:96px !important;
  min-height:96px !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Exact two-line hierarchy:
   line 1 = institution name
   line 2 = tagline */
body.tknp-native-public-v7 .knp-brand-text {
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:.32rem !important;
}

body.tknp-native-public-v7 .knp-brand-text strong {
  display:block !important;
  width:100% !important;
  margin:0 !important;
  color:#2577C0 !important;
  font-size:clamp(1.55rem,2.18vw,2.55rem) !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  letter-spacing:.005em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

body.tknp-native-public-v7 .knp-brand-text em {
  display:block !important;
  width:100% !important;
  margin:0 !important;
  color:#2577C0 !important;
  font-size:clamp(.82rem,1.05vw,1rem) !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  font-style:italic !important;
  white-space:nowrap !important;
}

/* Keep the right-side actions compact so they do not force title wrapping. */
body.tknp-native-public-v7 .knp-header-rpl-button {
  flex:0 0 auto !important;
  min-width:145px !important;
  padding:.72rem .9rem !important;
}

body.tknp-native-public-v7 .knp-masthead-meta {
  flex:0 0 auto !important;
  gap:.55rem !important;
}

body.tknp-native-public-v7 .knp-masthead-meta > div {
  min-width:145px !important;
  padding:.58rem .7rem !important;
}

/* On narrower laptops/tablets, keep the title on one line by reducing
   nonessential right-side width before shrinking the brand excessively. */
@media (min-width:901px) and (max-width:1280px) {
  body.tknp-native-public-v7
  .public-header.ouk-header.knp-public-header
  .knp-masthead {
    gap:.75rem !important;
  }

  body.tknp-native-public-v7 .knp-brand-text strong {
    font-size:clamp(1.28rem,1.86vw,1.72rem) !important;
  }

  body.tknp-native-public-v7 .knp-brand-text em {
    font-size:clamp(.72rem,.88vw,.84rem) !important;
  }

  body.tknp-native-public-v7 .knp-header-rpl-button {
    min-width:122px !important;
    padding:.62rem .7rem !important;
    font-size:.72rem !important;
  }

  body.tknp-native-public-v7 .knp-masthead-meta > div {
    min-width:126px !important;
    padding:.52rem .6rem !important;
  }

  body.tknp-native-public-v7 .knp-masthead-meta small {
    font-size:.61rem !important;
  }

  body.tknp-native-public-v7 .knp-masthead-meta strong {
    font-size:.7rem !important;
  }

  body.tknp-native-public-v7
  .public-brand.ouk-brand.knp-brand img {
    width:82px !important;
    min-width:82px !important;
    height:82px !important;
    min-height:82px !important;
  }
}

/* Mobile cannot carry the full institution name at desktop size.
   Keep it as a single line, scale it responsively, and retain the tagline
   as its own line rather than reintroducing a title wrap. */
@media (max-width:900px) {
  body.tknp-native-public-v7
  .public-header.ouk-header.knp-public-header
  .knp-masthead {
    width:calc(100% - 1rem) !important;
    min-height:78px !important;
    gap:.55rem !important;
  }

  body.tknp-native-public-v7
  .public-brand.ouk-brand.knp-brand img {
    width:58px !important;
    min-width:58px !important;
    height:58px !important;
    min-height:58px !important;
    border-radius:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  body.tknp-native-public-v7 .knp-brand-text {
    gap:.16rem !important;
  }

  body.tknp-native-public-v7 .knp-brand-text strong {
    font-size:clamp(.70rem,3.05vw,1.15rem) !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  body.tknp-native-public-v7 .knp-brand-text em {
    font-size:clamp(.56rem,2.05vw,.76rem) !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }
}
/* === TKNP MASTHEAD ONE LINE V9 END === */

/* === TKNP MATCHING GREEN BUTTONS V16 BEGIN === */
body.tknp-native-public-v7 .knp-masthead-meta {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 18px;
}

body.tknp-native-public-v7 .knp-header-rpl-button,
body.tknp-native-public-v7 .tknp-apply-admission-v15 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 194px;
  min-height: 60px;
  padding: 0 24px;
  border: 2px solid #178443 !important;
  border-radius: 7px;
  background: #178443 !important;
  color: #FFFFFF !important;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 160ms ease;
}

body.tknp-native-public-v7 .knp-header-rpl-button:hover,
body.tknp-native-public-v7 .tknp-header-rpl-button:focus-visible,
body.tknp-native-public-v7 .tknp-apply-admission-v15:hover,
body.tknp-native-public-v7 .tknp-apply-admission-v15:focus-visible {
  border-color: #116A35 !important;
  background: #116A35 !important;
  color: #FFFFFF !important;
  outline: 3px solid rgba(23, 132, 67, 0.24);
  outline-offset: 2px;
  transform: translateY(-1px);
}

body.tknp-native-public-v7 .knp-header-rpl-button:active,
body.tknp-native-public-v7 .tknp-apply-admission-v15:active {
  transform: translateY(0);
}

@media (max-width: 1100px) {
  body.tknp-native-public-v7 .knp-masthead-meta {
    gap: 10px;
  }

  body.tknp-native-public-v7 .knp-header-rpl-button,
  body.tknp-native-public-v7 .tknp-apply-admission-v15 {
    min-width: 168px;
    min-height: 52px;
    padding: 0 16px;
    font-size: 0.94rem;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  body.tknp-native-public-v7 .knp-header-rpl-button,
  body.tknp-native-public-v7 .tknp-apply-admission-v15 {
    width: 100%;
    min-width: 0;
  }
}
/* === TKNP MATCHING GREEN BUTTONS V16 END === */

/* === TKNP PORTAL ACCESS V17 BEGIN === */
body.tknp-native-public-v7 .tknp-portal-grid-three-v17 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
}
body.tknp-native-public-v7 .tknp-elearning-menu-v17 { display: block; }
@media (max-width: 900px) {
  body.tknp-native-public-v7 .tknp-portal-grid-three-v17 {
    grid-template-columns: 1fr !important;
  }
}
/* === TKNP PORTAL ACCESS V17 END === */

/* TKNP REACT SAFE PUBLIC HEADER 321 BEGIN */
.tknp-react-safe-hidden-card-321 { display: none !important; }
/* TKNP REACT SAFE PUBLIC HEADER 321 END */

/* === TKNP FINAL PUBLIC WEBSITE V6 BEGIN === */
body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-masthead-meta,
body.tknp-public-final-v6 .public-header.ouk-header.knp-public-header .knp-masthead-meta {
  display: none !important;
}

body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .ouk-utility-bar,
body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-nav-shell,
body.tknp-public-final-v6 .public-header.ouk-header.knp-public-header .ouk-utility-bar,
body.tknp-public-final-v6 .public-header.ouk-header.knp-public-header .knp-nav-shell {
  background: #2577C0 !important;
  background-image: none !important;
}

body.tknp-native-public-v7 .public-header.ouk-header.knp-public-header .knp-masthead,
body.tknp-public-final-v6 .public-header.ouk-header.knp-public-header .knp-masthead {
  background: #FFFFFF !important;
  background-image: none !important;
}

body.tknp-native-public-v7 .knp-header-rpl-button,
body.tknp-native-public-v7 .tknp-apply-admission-v15,
body.tknp-public-final-v6 .knp-header-rpl-button,
body.tknp-public-final-v6 .tknp-apply-admission-v15 {
  border-color: #2577C0 !important;
  background: #2577C0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

body.tknp-native-public-v7 .knp-header-rpl-button:hover,
body.tknp-native-public-v7 .knp-header-rpl-button:focus-visible,
body.tknp-native-public-v7 .tknp-apply-admission-v15:hover,
body.tknp-native-public-v7 .tknp-apply-admission-v15:focus-visible,
body.tknp-public-final-v6 .knp-header-rpl-button:hover,
body.tknp-public-final-v6 .knp-header-rpl-button:focus-visible {
  border-color: #2577C0 !important;
  background: #2577C0 !important;
  color: #FFFFFF !important;
  outline: 3px solid rgba(31,41,55,.18) !important;
}

body.tknp-native-public-v7 .knp-brand-text strong,
body.tknp-native-public-v7 .knp-brand-text em,
body.tknp-public-final-v6 .knp-brand-text strong,
body.tknp-public-final-v6 .knp-brand-text em {
  color: #2577C0 !important;
}
/* === TKNP FINAL PUBLIC WEBSITE V6 END === */

/* TKNP MASTHEAD DUAL GREEN CTA V8 BEGIN */
.public-header.ouk-header.knp-public-header .tknp-header-action-group {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-left:auto !important;
  flex-wrap:wrap !important;
}
.public-header.ouk-header.knp-public-header .tknp-header-action-group .tknp-header-action-button,
.public-header.ouk-header.knp-public-header .knp-header-rpl-button.tknp-header-action-button {
  background:#137A43 !important;
  background-image:none !important;
  border:1px solid #137A43 !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
  min-height:48px !important;
  padding:0 20px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
.public-header.ouk-header.knp-public-header .tknp-header-action-group .tknp-header-action-button:hover,
.public-header.ouk-header.knp-public-header .tknp-header-action-group .tknp-header-action-button:focus-visible {
  background:#137A43 !important;
  border-color:#137A43 !important;
  color:#FFFFFF !important;
  filter:brightness(.94);
}
@media (max-width:900px) {
  .public-header.ouk-header.knp-public-header .tknp-header-action-group {
    width:100% !important;
    justify-content:center !important;
    margin:10px 0 0 !important;
  }
  .public-header.ouk-header.knp-public-header .tknp-header-action-group .tknp-header-action-button {
    flex:1 1 220px !important;
  }
}
/* TKNP MASTHEAD DUAL GREEN CTA V8 END */