/* css/header-footer.css */


/* ==== Variables (global essentials) ==== */
:root{
  --snt-grey-100:#f6f7f9;  /* page bg */
  --snt-grey-200:#edf0f3;  /* soft bg / hover / focus surfaces */
  --snt-grey-300:#dfe3e8;  /* borders */
  --snt-grey-600:#006666;
  --snt-grey-800:#2b3640;  /* headings/text */
 
  --snt-accent:#006bb6;    /* links/CTA */
  --hero-blue:#062F42;     /* topbar/footer/hero background */
  --color:#0b6a8a;  /* for Let us teach you  */
  --radius:18px;           /* shared rounding token */
  --border-white: rgba(223,227,232,.9); 
}


/* ==== Top micro bar ==== */
.topbar{
  background: var(--hero-blue);
  color:#fff;
  text-align:right;
  padding:5px 2% 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar-link{
  color:#fff;
  text-decoration:none;
}
.topbar-link:hover{ text-decoration:underline; }

/* ==== Navbar (sticky) ==== */
.navbar{

  position: sticky;
  top: 0;
  z-index: 1035;
  background:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.navbar-brand img{ height:50px; }
.nav-link{ font-weight:500; }

/* ==== Mega menu panel ==== */
.navbar .dropdown-mega{ position: static; }

.dropdown-menu{
  top:100%;
  padding: 0;                 /* padding lives in .mega-inner */
  font-size: .77rem;
  line-height: .87rem;
  background:#f6f8f9;
  border-radius:4px;
  box-shadow: 0 20px 48px rgba(0,0,0,.14);
}

/* Wide mega-menu panels (Courses, Delivery) */
.dropdown-mega .dropdown-menu{
  left:50%;
  transform: translateX(-50%);
  width: max(900px, 90vw);
}

/* Delivery dropdown narrower */
.dropdown-menu[aria-labelledby="navDelivery"]{
  width: min(950px, 90vw);
}

/* About us — compact panel, two side-by-side columns */
.dropdown-about{
 /* width: 540px;*/
 left:50%;
  transform: translateX(-50%);
   width: min(550px, 80vw);
  padding: 1rem;
}

/* Add white card styling around About Us image */
.dropdown-about .col img{
  background:#fff;
  padding: 1rem 1.1rem;
  border-radius:8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  display:block;
}


.topic-header{

 /* font-family: 'DM Sans', sans-serif;*/
  font-weight: 630;
  font-size: 0.8rem;
 letter-spacing: 0; 
 padding-bottom: 8px;
  /*color: #1a1a2eae; */
  color: #0b6a8a;
}
.topic-header-caps{
  text-transform: uppercase;
}

.mega-inner{ padding: 1.5rem; }

/* Base pill style */
.pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;        /* fully rounded */
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1.6;
}



/* Cards inside mega */
.mega-info,
.mega-delivery {
  background:#fff;
  border-radius:2px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.mega-info img{ border-radius:8px; margin-bottom:.75rem; }
.mega-delivery img{ border-radius:8px; margin-bottom: 0; width: 100%; height: auto; }

.mega-info h6,
.mega-delivery h6{
  color:#0b6a8a;
  font-weight:600;
  margin-bottom:.35rem;
}

.mini-highlights{
  list-style:none;
  margin:0;
  padding:0;
}
.mini-highlights li{
  display:flex;
  align-items:center;
  margin:.25rem 0;
}

.megagrid .col{ margin-bottom:.75rem; }



/* Dropdown links */
.dropdown-item{
  padding: .20rem .23rem;
  white-space: normal;
  color: var(--snt-grey-800);
}
.dropdown-item:hover{ 
  /*color: var(--snt-accent); */
 color: #287f82;  /* dark teal text */
}
.dropdown-divider{ margin: .45rem 0; }
.pill-teal {
background: #e1f5f0;       /* soft teal fill */
  color: #0f5a4d;           /* dark teal text */
 /* color: #3fb7bb; */
}
.teal:hover {
 background: #e1f5f0;       /* soft teal fill */
  color: #0f5a4d;           /* dark teal text */
 /* color: #3fb7bb; */
}
/* Teal variant — for remote/virtual */
.teal {
 /*background: #e1f5f0;       /* soft teal fill */
  color: #0f5a4d;           /* dark teal text */
 /* color: #3fb7bb; */
}
.teal:hover {
 background: #e1f5f0;       /* soft teal fill */
  color: #0f5a4d;           /* dark teal text */
 /* color: #3fb7bb; */
}
/* Navy variant — for in-person */
.pill-navy {
  background: #e6edf2;        /* soft navy fill */
  color: #0f1e27;             /* dark navy text */
}


/* ==== Live search dropdown ==== */
#searchform{ margin:0; }

.livesearch_container{
  position: relative;
  text-align:left;
}

#livesearch{
  position:absolute;
  top: calc(100% + 4px);
  left:0;
  right:0;
  display:none;
  width: clamp(420px, 48vw, 480px);
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow-y:auto;
  overflow-x:hidden;
  z-index: 1061;
  background:#fff;
  border:1px solid #A5ACB2;
  border-top:0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-radius: 0 0 .45rem .45rem;
}

#livesearch:empty{
  display:none !important;
  border:0;
  box-shadow:none;
}
#livesearch a{
  display:block;
  padding:.35rem .6rem;
  text-decoration:none;
  color:inherit;
  line-height:1.2rem;
  white-space:normal;
}
#livesearch a:hover{ background:#f6f7f9; }
#livesearch br{ display:none; }

#livesearch::-webkit-scrollbar{ width:10px; }
#livesearch::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius:8px;
}

/* ==== Mobile behaviour (keep your no-scroll-trap fix) ==== */
@media (max-width: 991.98px){
  html, body{ height:auto !important; overflow-y:auto !important; }

  .navbar .dropdown,
  .navbar .dropdown-menu{ position: static !important; }

  .navbar .dropdown-menu{
    transform:none !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:100% !important;
    max-height:none !important;
    overflow:visible !important;

    margin:0 !important;
    border:0;
    box-shadow:none;
    padding: 1rem;
    display:none;
  }
  .navbar .dropdown-menu.show{ display:block; }

  .navbar,
  .navbar .container,
  .navbar .navbar-collapse{
    overflow: visible !important;
    height: auto !important;
  }

  .mega-info img{ display:none; }
}

/* Gentle fade open/close for mobile dropdowns */
@media (max-width: 991px){
  .dropdown-menu{
    opacity:0;
    transform: translateY(-5px);
    transition: opacity .25s ease, transform .25s ease;
    will-change: opacity, transform;
  }
  .dropdown-menu.show{
    opacity:1;
    transform: translateY(0);
  }
  .dropdown-menu.closing{
    display:block;
    opacity:0;
    transform: translateY(-8px);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ==== Footer ==== */
.footer-dark{
  background-color: var(--hero-blue);
  color:#fff;
}

.footer-links a{
  color:#cfd8dc;
  margin-left:1rem;
  text-decoration:none;
}
.footer-links a:hover{
  color:#fff;
  text-decoration: underline;
}

.social-icons a{
  color:#cfd8dc;
  margin-left:.75rem;
  font-size:1.25rem;
  transition: color .3s ease;
}
.social-icons a:hover{ color: var(--snt-accent); }

.cyber-logo img{
  height:40px;
  width:auto;
  display:block;
  filter: brightness(1.1);
}

@media (max-width: 576px){
  .footer-right{
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1rem;
  }
  .social-icons{ margin-bottom:.5rem; }
}