/* KLE-like structure for SAEF - shared header/nav/footer + hero */
:root{
  --saef-green:#ffff;
  --saef-green-lite: #151b54;
  --saffron: #ff9933;
  --saffron-lite: #ffd9b3;
  --muted: #147edb;
}
.site-topbar{background:var(--saef-green); color:#8884be}
.site-topbar .small{font-size:0.95rem}
.site-topbar a{color:#fff}

header.site-header{border-bottom:1px solid #eee; padding:0.75rem 0}
header.site-header h4{margin:0; font-size:1.05rem}
header.site-header small{color:var(--muted)}

.hero{min-height:320px; color:#fff; display:flex; align-items:center}
.hero .display-4{font-weight:700}

/* Navbar styling */
header.site-header .navbar{background:transparent}
header.site-header .nav-link{color:#0b2b15;}
.kle-navbar{background:var(--saef-green-lite); border-radius:6px; padding:0.25rem}
.kle-navbar .navbar-brand{font-weight:700; color:var(--saef-green) !important}
.kle-navbar .nav-link{color:var(--saef-green) !important; padding:0.5rem 0.75rem; font-weight:600}
.kle-navbar .nav-link:hover, .kle-navbar .nav-link:focus{background:var(--saffron-lite) !important; color:#222 !important; border-radius:4px}
.kle-navbar .dropdown-menu{background:var(--saef-green-lite); border:none}
.kle-navbar .dropdown-item{color:var(--saef-green); font-weight:600}
.kle-navbar .dropdown-item:hover{background:var(--saffron-lite); color:#222}


  /* Toggler icon: dark-green hamburger for visibility */
  .kle-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='%23006400' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
  }
 
/* Ensure dropdown (sub-menu) visibility and positioning */
@media (min-width: 992px) {
  .kle-navbar .dropdown{position:relative}
  .kle-navbar .dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    z-index:2200;
    display:none;
    min-width:12rem;
    background:var(--saef-green-lite);
    border-radius:6px;
    padding:.25rem 0;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
  }
  /* show on hover or when bootstrap adds .show */
  .kle-navbar .dropdown:hover > .dropdown-menu,
  .kle-navbar .dropdown.show > .dropdown-menu{
    display:block;
  }
  /* ensure submenu items have good contrast */
  .kle-navbar .dropdown-menu .dropdown-item{color:var(--saef-green);}
}

@media (max-width: 991px){
  /* collapsed mobile menu: let Bootstrap control .show; keep dropdowns flowing */
  .kle-navbar .dropdown-menu{position:static; box-shadow:none; background:transparent}
}

/* Institutions cards */
.institutions .card{border-radius:12px; padding:0.6rem; box-shadow:0 1px 6px rgba(0,0,0,0.08)}
.institutions .card .btn{background:#2714a6; border:none}
.institutions .card .btn:hover{background:#096e24}

/* Footer helpers */
.site-footer{background:#f8f9fa}

@media (max-width:768px){
  .hero{min-height:220px}
}

/* Topbar full-bleed background (light green) */

.topbar-wrap{background:var(--saef-green-lite)}
.topbar-card{background:transparent; box-shadow:none; border:none}
.topbar-card .card-body{color:var(--saef-green)}
.topbar-card .list-inline a{color:var(--saef-green)}
.topbar-card .fa{color:var(--saef-green)}
.topbar-card .input-group .form-control{border-radius:0.25rem}
.topbar-card .btn-outline-secondary{color:var(--saef-green); border-color:rgba(0,0,0,0.08)}

/* small spacing tweak to match KLE style */
.topbar-card .card-body{padding-top:0.4rem; padding-bottom:0.4rem}

/* Header identity card styling - light green background */
.header-card{background:#ffffff; border:1px solid rgba(0,0,0,0.06)}
.header-card .card-body{color:var(--saef-green); text-align:center}
.header-card img{max-width:140px}
.header-card h3{font-weight:700; color:var(--saef-green)}

/* Hero card styles */
.hero-card{border:none; overflow:hidden; border-radius:12px}
.hero-card .hero-bg{background-size:cover; background-position:center;}
.hero-card .hero-overlay{background:linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.25));}
.hero-card .hero-overlay h1,
.hero-card .hero-overlay p{color:#fff}
@media (max-width:767px){
  .hero-card .hero-overlay{padding:2rem 1rem}
  .hero-card .hero-overlay .display-4{font-size:1.6rem}
}

  /* News ticker card */
  .news-ticker-card{background:#707070; border:none}
  .news-ticker-card .news-title{color:#fff; white-space:nowrap}
  .news-ticker-card .news-content{overflow:hidden}
  .news-ticker-card .news-content marquee,
  .news-ticker-card .news-content a,
  .news-ticker-card .news-content span{color:#fff}
  .news-ticker-card .card-body{padding-left:1rem; padding-right:1rem}

  @media (max-width:767px){
    .news-ticker-card .news-title{font-size:0.95rem}
    .news-ticker-card .card-body{padding:.5rem}
  }