/* ==========================================================
   Site header (scoped under .sh)
   Centred-logo layout: menu | logo tab | menu.
   The logo sits in a white tab that hangs below the bar, with
   an orange "Admissions Open" ribbon underneath. A blue→orange
   accent line runs along the bottom of the bar.
   On scroll main.js adds .sticky to .navigation-wrapper: the
   bar becomes compact and the tab/ribbon tuck away.
   Below 1180px it switches to logo-left + burger.
   Logo palette: royal blue + orange.
   ========================================================== */
.sh {
  --sh-blue: #0d4f9c;
  --sh-blue-deep: #083a75;
  --sh-navy: #061f42;
  --sh-orange: #f08a1c;
  --sh-orange-deep: #d9740a;
  --sh-sky: #eef4fb;
  --sh-ink: #142033;
  --sh-muted: #5a6577;
  --sh-line: #e5ebf3;
  position: relative;
  z-index: 50;
}
.sh .fa { color: inherit; }
.sh a { text-decoration: none; }
.sh ul { list-style: none; margin: 0; padding: 0; }
.sh-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- bar ---------- */
.sh .sh-nav {
  position: relative;
  padding: 0;
  height: auto;
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(8, 58, 117, .35);
}
.sh .sh-nav::after {
  /* accent line along the bottom of the bar */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sh-blue) 0%, var(--sh-blue) 42%, var(--sh-orange) 42%, var(--sh-orange) 58%, var(--sh-blue) 58%, var(--sh-blue) 100%);
}
.sh-nav-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 92px;
}
.sh .sh-nav.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -14px rgba(8, 58, 117, .4);
  animation: sh-drop .45s ease;
}
.sh .sh-nav.sticky .sh-nav-inner { min-height: 74px; }
@keyframes sh-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---------- centred logo tab ---------- */
.sh-brand {
  position: relative;
  z-index: 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: -46px;
}
.sh-logo {
  display: block;
  padding: 14px 26px 16px;
  border-radius: 0 0 28px 28px;
  background: #fff;
  box-shadow: 0 22px 40px -22px rgba(8, 58, 117, .55);
  border: 1px solid var(--sh-line);
  border-top: 0;
  transition: padding .3s ease;
}
.sh-logo img { height: 92px; width: auto; max-width: none; display: block; transition: height .3s ease; }
.sh-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -14px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7a23d 0%, var(--sh-orange-deep) 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px rgba(217, 116, 10, .9);
  transition: transform .2s ease, filter .2s ease;
}
.sh-ribbon:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05); }
.sh-reg-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.sh-reg-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: sh-pulse 1.8s ease-out infinite;
}
@keyframes sh-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* sticky: logo moves into the bar, ribbon hides */
.sh-nav.sticky .sh-brand { align-self: center; margin-bottom: 0; }
.sh-nav.sticky .sh-logo { padding: 0; border: 0; box-shadow: none; background: transparent; }
.sh-nav.sticky .sh-logo img { height: 58px; }
.sh-nav.sticky .sh-ribbon { display: none; }

/* ---------- menus ---------- */
.sh-menu--left > ul { justify-content: flex-end; }
.sh-menu--right > ul { justify-content: flex-start; }
.sh-menu > ul { display: flex; align-items: center; gap: 4px; }
.sh-menu > ul > li { position: relative; }
.sh-menu > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sh-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.sh-menu > ul > li > a::after {
  /* orange dot under the item */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sh-orange);
  transform: translateX(-50%) scale(0);
  transition: transform .2s ease;
}
.sh-menu > ul > li:hover > a,
.sh-menu > ul > li > a.is-active { color: var(--sh-blue); }
.sh-menu > ul > li:hover > a::after,
.sh-menu > ul > li > a.is-active::after { transform: translateX(-50%) scale(1); }
.sh-menu .fa-angle-down { font-size: 13px; color: var(--sh-orange); transition: transform .25s ease; }
.sh-menu li:hover > a .fa-angle-down { transform: rotate(180deg); }

/* dropdown */
.sh-menu .sh-sub {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 250px;
  padding: 8px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--sh-line);
  border-top: 3px solid var(--sh-orange);
  box-shadow: 0 28px 56px -18px rgba(8, 58, 117, .35);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 70;
}
.sh-menu .sh-sub::before { content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px; }
.sh-menu li:hover > .sh-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sh-menu .sh-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sh-ink);
  transition: background .2s ease, color .2s ease, padding .2s ease;
}
.sh-menu .sh-sub a::before { content: "\f105"; font-family: FontAwesome; color: var(--sh-orange); font-size: 13px; }
.sh-menu .sh-sub a:hover,
.sh-menu .sh-sub a.is-active { background: var(--sh-sky); color: var(--sh-blue); padding-left: 18px; }

/* ---------- actions (mobile only) ---------- */
.sh-actions { display: none; align-items: center; gap: 10px; }
.sh-reg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7a23d 0%, var(--sh-orange-deep) 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}
.sh-reg:hover { color: #fff; }
.sh-burger {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--sh-blue);
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.sh-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: width .25s ease; }
.sh-burger span:nth-child(2) { width: 14px; margin-left: 6px; background: var(--sh-orange); }
.sh-burger:hover span:nth-child(2) { width: 20px; margin-left: 0; }

/* legacy style.css forces `.fa { color: #fff }`, which hides icons on light
   backgrounds across the redesigned sections — let icons inherit instead */
.fa { color: inherit; }

/* ---------- mobile drawer ---------- */
.sh-drawer .sh-drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 330px;
  max-width: 88vw;
  background: #fff;
  z-index: 99999;
  overflow-y: auto;
  padding: 0 0 28px;
  transform: translateX(-105%);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 20px 0 50px rgba(0, 0, 0, .2);
}
.sh-drawer.active .sh-drawer-panel { transform: translateX(0); }
.sh-drawer-away {
  position: fixed;
  inset: 0;
  background: rgba(6, 31, 66, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.sh-drawer.active .sh-drawer-away { opacity: 1; visibility: visible; }
.sh-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 8px;
  border-top: 4px solid var(--sh-orange);
  border-bottom: 1px solid var(--sh-line);
}
.sh-drawer-head img { height: 64px; width: auto; max-width: none; }
.sh-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: var(--sh-blue);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.sh-mmenu { padding: 0 12px; }
.sh-mmenu > li { border-bottom: 1px solid var(--sh-line); }
.sh-mmenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sh-ink);
  cursor: pointer;
  border-radius: 10px;
}
.sh-mmenu a.is-active { color: var(--sh-orange-deep); }
.sh-mmenu > li > a.is-active { background: var(--sh-sky); color: var(--sh-blue); box-shadow: inset 3px 0 0 var(--sh-orange); }
.sh-mmenu .fa-angle-down { transition: transform .3s ease; color: var(--sh-orange); }
.sh-mmenu .sh-sub { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: var(--sh-sky); border-radius: 10px; }
.sh-mmenu .open > .sh-sub { max-height: 500px; margin-bottom: 10px; }
.sh-mmenu .open > a .fa-angle-down { transform: rotate(180deg); }
.sh-mmenu .sh-sub a { font-size: 15px; font-weight: 600; padding: 10px 16px; }
.sh-drawer-call {
  margin: 22px 18px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sh-blue), var(--sh-navy));
  color: #fff;
}
.sh-drawer-call .sh-ico {
  display: inline-flex;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  background: var(--sh-orange);
  color: #fff;
  font-size: 18px;
}
.sh-drawer-call small { display: block; font-size: 12px; opacity: .8; }
.sh-drawer-call strong { font-size: 16px; color: #fff; }


/* ---------- responsive ---------- */
@media (max-width: 1400px) {
  .sh-menu > ul { gap: 0; }
  .sh-menu > ul > li > a { padding: 12px 9px; font-size: 15.5px; }
  .sh-nav-inner { gap: 14px; }
  .sh-logo { padding: 12px 20px 14px; }
  .sh-logo img { height: 82px; }
}
@media (max-width: 1260px) {
  .sh-menu > ul > li > a { padding: 12px 7px; font-size: 13.5px; }
  .sh-logo img { height: 74px; }
}
@media (max-width: 1180px) {
  /* switch to logo-left + burger */
  .sh .sh-nav::after { background: linear-gradient(90deg, var(--sh-orange) 0 25%, var(--sh-blue) 25% 100%); height: 3px; }
  .sh-nav-inner { display: flex; justify-content: space-between; min-height: 80px; }
  .sh-menu { display: none; }
  .sh-brand, .sh-nav.sticky .sh-brand { align-self: center; margin-bottom: 0; }
  .sh-logo, .sh-nav.sticky .sh-logo { padding: 0; border: 0; box-shadow: none; background: transparent; }
  .sh-logo img, .sh-nav.sticky .sh-logo img { height: 60px; }
  .sh-ribbon { display: none; }
  .sh-actions { display: flex; }
  .sh .sh-nav.sticky .sh-nav-inner { min-height: 70px; }
  .sh-wrap { padding: 0 16px; }
}
@media (max-width: 560px) {
  .sh-reg { display: none; }
}