/* =========================================================
   HEADER - top bar, sticky header, logo, main navigation, dropdowns, search, mobile menu button
   ========================================================= */

/* =========================================================
   TOP BAR
   ========================================================= */

.topbar {
  background: var(--ink2);
  color: #dfe2e7;
  font-size: 12px;
  padding: 8px 0;
}

.topbar-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tb-phone {
  margin-left: auto;
  margin-right: 12px;
}

.tb-phone:hover {
  text-decoration: underline;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}

.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--hdr);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  font-family: var(--f-head);
  line-height: .85;
}

.logo span {
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -1px;
  color: var(--ink);
}

.logo small {
  font: 600 8px var(--f-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

/* Keep every primary navigation item visible in the light SGS theme. */
.site-header .nav .main {
  flex: 0 1 auto;
  min-width: 0;
}

.site-header .nav .main > li {
  flex: 0 0 auto;
}

.site-header .nav .main > li > a,
.site-header .nav .main > li > .sia-parent {
  color: #202329;
}

.site-header .nav .main > li > a:hover,
.site-header .nav .main > li > a.active,
.site-header .nav .main > li > .sia-parent:hover {
  color: #d7191f;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.nav .main {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.nav a {
  display: block;
  padding: 6px 9px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.nav .main > li > a:hover,
.nav a.active {
  border-color: var(--red);
}

.has-sub {
  position: relative;
  display: flex;
  align-items: center;
}

.sub-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 11px;
  margin-left: -6px;
  padding: 8px 6px;
}

.sub-btn:hover {
  color: var(--red);
}

.sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--dk);
  border-top: 2px solid var(--red);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .18s;
  z-index: 60;
}

.has-sub:hover > .sub,
.has-sub:focus-within > .sub,
.has-sub.open > .sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sub a {
  padding: 10px 16px;
  font-size: 13px;
  color: #fff;
  white-space: normal;
  border: 0;
}

.sub a:hover,
.sub a:focus {
  color: #ff5b61;
}

/* =========================================================
   SEARCH
   ========================================================= */

.search {
  display: flex;
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px 0 12px;
  flex: none;
  width: 190px;
}

.search input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 8px 0;
  width: 100%;
  outline: 0;
}

.search:focus-within {
  border-color: var(--red);
}

.search button {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 8px;
}

/* =========================================================
   MOBILE NAV BUTTON
   ========================================================= */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px 6px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: .2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   STABLE HEADER (no flicker between pages)
   ========================================================= */

/* Keep header + top bar visually fixed while navigating between pages
   (cross-document View Transitions: Chrome/Edge 126+, Safari 18.2+).
   Older browsers simply ignore this and navigate normally. */
@view-transition {
  navigation: auto;
}

.topbar {
  view-transition-name: site-topbar;
}

.site-header {
  view-transition-name: site-header;
}

::view-transition-group(site-topbar),
::view-transition-old(site-topbar),
::view-transition-new(site-topbar),
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

/* show only the new header snapshot so nothing cross-fades */
::view-transition-old(site-topbar),
::view-transition-old(site-header) {
  display: none;
}

/* page body fades quickly, header stays put */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .15s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* Same header behaviour on EVERY page (was only defined on the home page) */
.site-header {
  transition: box-shadow .25s ease, border-color .25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  border-bottom-color: rgba(215, 25, 31, .18);
}

/* Desktop dropdown: open on hover / keyboard focus only (not on mouse-click focus,
   which left menus stuck open after clicking a link) */
.has-sub:focus-within > .sub {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.has-sub:hover > .sub,
.has-sub:has(:focus-visible) > .sub,
.has-sub.open > .sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* invisible bridge so the dropdown never closes while the mouse travels to it */
.has-sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.nav,
.nav .main {
  min-height: 0;
}

/* =========================================================
   SIA GUIDANCE DROPDOWN
   Parent-only category (it never navigates). Two children:
   ACT Training and Get SIA Licensed. Scoped to .sia-guidance-menu
   so every other .has-sub menu keeps behaving exactly as before.
   ========================================================= */

/* DESKTOP */
.nav .main > li.sia-guidance-menu > .sia-parent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 9px;
  font: 500 14px/1.5 var(--f-body);
  color: var(--ink);
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.nav .main > li.sia-guidance-menu > .sia-parent:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.sia-guidance-menu .sia-caret {
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}

.nav .main > li.sia-guidance-menu > .sub {
  min-width: 220px;
  padding: 8px 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.sia-guidance-menu .sub li {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}

.sia-guidance-menu .sub a {
  position: relative;
  display: block;
  padding: 11px 18px 11px 20px;
  font-size: 13.5px;
  font-weight: 500;
  transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}

/* HOVER */
.nav .main > li.sia-guidance-menu:hover > .sia-parent,
.nav .main > li.sia-guidance-menu.open > .sia-parent {
  color: var(--red);
  border-bottom-color: var(--red);
}

.sia-guidance-menu:hover .sia-caret,
.sia-guidance-menu.open .sia-caret {
  transform: translateY(1px) rotate(-135deg);
}

.sia-guidance-menu:hover .sub li,
.sia-guidance-menu.open .sub li {
  opacity: 1;
  transform: none;
}

.sia-guidance-menu:hover .sub li:nth-child(2),
.sia-guidance-menu.open .sub li:nth-child(2) {
  transition-delay: .05s;
}

.sia-guidance-menu .sub a:hover,
.sia-guidance-menu .sub a:focus-visible {
  color: #ff5b61;
  background: rgba(255, 255, 255, .06);
  padding-left: 24px;
}

/* ACTIVE */
.nav .main > li.sia-guidance-menu > .sia-parent.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.sia-guidance-menu .sub a.active {
  color: #ff5b61;
  font-weight: 700;
}

.sia-guidance-menu .sub a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--red);
}

/* MOBILE */
@media (max-width: 1100px) {
  .nav .main > li.sia-guidance-menu > .sia-parent {
    flex: 1 1 auto;
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    padding: 13px 4px;
    font-size: 15px;
    text-align: left;
    border-bottom: 0;
  }

  .nav .main > li.sia-guidance-menu:hover > .sia-parent {
    color: var(--ink);
  }

  .nav .main > li.sia-guidance-menu.open > .sia-parent,
  .nav .main > li.sia-guidance-menu > .sia-parent.active {
    color: var(--red);
  }

  /* caret becomes a "+" that turns into a "−" when expanded */
  .sia-guidance-menu .sia-caret,
  .sia-guidance-menu:hover .sia-caret,
  .sia-guidance-menu.open .sia-caret {
    position: relative;
    width: 14px;
    height: 14px;
    border: 0;
    transform: none;
  }

  .sia-guidance-menu .sia-caret::before,
  .sia-guidance-menu .sia-caret::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .25s ease;
  }

  .sia-guidance-menu .sia-caret::after {
    transform: rotate(90deg);
  }

  .sia-guidance-menu.open .sia-caret::after {
    transform: rotate(0);
    opacity: 0;
  }

  /* smooth expand / collapse (replaces the display toggle for this item only) */
  .nav .main > li.sia-guidance-menu > .sub,
  .nav .main > li.sia-guidance-menu:hover > .sub,
  .nav .main > li.sia-guidance-menu:focus-within > .sub {
    display: block;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: max-height .32s ease, opacity .24s ease, margin .32s ease, visibility .32s;
  }

  .nav .main > li.sia-guidance-menu.open > .sub {
    max-height: 280px;
    margin: 0 0 12px;
    opacity: 1;
    visibility: visible;
  }

  .sia-guidance-menu .sub li {
    opacity: 1;
    transform: none;
  }

  .sia-guidance-menu .sub a,
  .sia-guidance-menu .sub a:hover {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 18px;
  }
}

/* ANIMATION */
@media (prefers-reduced-motion: reduce) {
  .nav .main > li.sia-guidance-menu > .sub,
  .sia-guidance-menu .sub li,
  .sia-guidance-menu .sub a,
  .sia-guidance-menu .sia-caret,
  .sia-guidance-menu .sia-caret::before,
  .sia-guidance-menu .sia-caret::after {
    transition: none;
  }
}


/* =========================================================
   FINAL SHARED HEADER - original SGS first-look model
   Shared by every page. No layout-changing animation.
   ========================================================= */
.sgs-topbar{height:35px;background:#22262d;color:#f4f5f7;font:500 12px/35px var(--f-body);}
.sgs-topbar-inner{display:flex;align-items:center;justify-content:space-between;height:35px;}
.sgs-topbar-right{display:flex;align-items:center;gap:28px;height:100%;}
.sgs-topbar a{color:#fff;text-decoration:none;}
.sgs-topbar a:hover{text-decoration:none;}
.sgs-enquire{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 17px;border-radius:5px;background:#e51f27;color:#fff!important;font-weight:700;}
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e6e8eb;padding:0;box-shadow:none;transition:none;view-transition-name:none;}
.header-in{height:72px;gap:24px;}
.logo{width:190px;flex:0 0 190px;line-height:.82;}
.logo span{font-size:34px;font-weight:900;letter-spacing:-1px;}
.logo small{font-size:8px;letter-spacing:1.7px;margin-top:5px;}
.nav{gap:16px;align-items:center;}
.nav .main{gap:0;margin:0;padding:0;list-style:none;}
.nav .main>li{display:flex;align-items:center;height:72px;position:relative;}
.nav .main>li>a,.nav .main>li>.sub-btn{font:500 14px/1.2 var(--f-body);color:#202329;}
.nav .main>li>a{padding:27px 8px 24px;border-bottom:2px solid transparent;}
.nav .main>li>a:hover,.nav .main>li>a.active{border-bottom-color:#e51f27;color:#202329;}
.sub-btn{margin-left:-4px;padding:8px 5px;border:0;background:transparent;color:#202329;line-height:1;cursor:pointer;}
.sub{top:72px;left:0;min-width:245px;padding:6px 0;background:#20242b;border-top:2px solid #e51f27;border-radius:0 0 5px 5px;box-shadow:0 8px 20px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:none;transition:none;}
.has-sub:hover>.sub,.has-sub.open>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none;}
.sub a{display:block;padding:10px 16px!important;font:500 13px/1.35 var(--f-body)!important;color:#fff!important;border:0!important;}
.sub a:hover,.sub a:focus{color:#ff5b61!important;background:rgba(255,255,255,.05);}
.search{width:192px;height:40px;box-sizing:border-box;}
.search input{font-size:13px;}
.nav-toggle{display:none;}
/* eliminate cross-page visual transitions that can blink the shared header */
@view-transition{navigation:none;}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
@media (max-width:1100px){
 .sgs-topbar{height:34px;line-height:34px;font-size:11px;} .sgs-topbar-inner{height:34px;} .sgs-topbar-right{gap:12px;}
 .header-in{height:68px;} .logo{width:150px;flex-basis:150px;} .logo span{font-size:31px;}
 .nav-toggle{display:block;} .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid #ddd;box-shadow:0 8px 20px rgba(0,0,0,.08);padding:8px 18px 18px;}
 .nav.open{display:flex;} .nav .main{display:block;} .nav .main>li{height:auto;display:flex;flex-wrap:wrap;} .nav .main>li>a{flex:1;padding:13px 4px;border-bottom:0;}
 .sub-btn{padding:12px 8px;} .sub{position:static;width:100%;min-width:0;display:none;box-shadow:none;border-radius:0;margin:0;padding:0;background:#20242b;} .has-sub.open>.sub{display:block;opacity:1;visibility:visible;}
 .search{width:100%;margin-top:10px;}
}
@media (max-width:650px){.sgs-topbar-inner{padding:0 14px}.sgs-topbar-right>a:first-child{display:none}.sgs-enquire{padding:0 12px}.header-in{padding:0 14px}.logo{width:130px;flex-basis:130px}.logo span{font-size:29px}}


/* Search refinement - header is WHITE, so the box uses dark text on a light field */
.search {
  position: relative;
  width: 214px;
  height: 42px;
  padding: 0 5px 0 14px;
  border: 1px solid #d9dde3;
  border-radius: 22px;
  background: #f5f6f8;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.search::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: #ed1c24; opacity: .75;
}
.search input {
  padding: 8px 6px 8px 2px;
  color: #151515;
  -webkit-text-fill-color: #151515;
  caret-color: #ed1c24;
}
.search input::placeholder { color: #6b7280; -webkit-text-fill-color: #6b7280; opacity: 1; }
.search:focus-within {
  border-color: #ed1c24;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(237,28,36,.12);
}
.search button {
  position: relative;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
  background: #ed1c24;
  color: #fff;
  box-shadow: 0 4px 12px rgba(237,28,36,.20);
}
.search button::before {
  content: "";
  position: absolute; width: 10px; height: 10px;
  border: 2px solid currentColor; border-radius: 50%;
  left: 9px; top: 8px;
}
.search button::after {
  content: "";
  position: absolute; width: 7px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: rotate(45deg); left: 19px; top: 21px;
}
.search button:hover { background: #ff2830; transform: translateY(-1px); }


/* =========================================================
   SGS HEADER SEARCH RESULTS
   ========================================================= */

.site-header .search {
  position: relative;
}

.site-header .sgs-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-top: 3px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 14px 35px rgba(0,0,0,.16);
  z-index: 10000;
  display: none;
}

.site-header .sgs-search-results.show {
  display: block;
}

.site-header .sgs-search-item {
  display: block;
  padding: 13px 16px;
  border-bottom: 1px solid #eee;
  text-decoration: none !important;
  color: var(--ink) !important;
  background: #fff;
}

.site-header .sgs-search-item:hover {
  background: #f7f7f7;
}

.site-header .sgs-search-item span {
  display: block;
  font-size: 16px !important;
  line-height: 1.4;
  font-weight: 700;
}

.site-header .sgs-search-item small {
  display: block;
  margin-top: 3px;
  font-size: 13px !important;
  line-height: 1.3;
  color: var(--red) !important;
  font-weight: 600;
}

.site-header .sgs-search-empty {
  padding: 16px;
  font-size: 15px;
  color: #666;
  text-align: center;
}

@media (max-width: 700px) {
  .site-header .sgs-search-results {
    left: 0;
    right: auto;
    width: 100%;
  }
}


/* SGS IMAGE LOGO */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: auto;
  flex: 0 0 150px;
  line-height: 1;
  text-decoration: none;
}
.logo .sgs-logo-image {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 700px) {
  .logo { width: 125px; flex-basis: 125px; }
  .logo .sgs-logo-image { width: 125px; }
}

/* =========================================================
   FINAL LIGHT THEME FIX - SIA GUIDANCE VISIBILITY
   Keep the parent item clearly visible in the white navbar.
   ========================================================= */
.site-header .nav .main > li.sia-guidance-menu > .sia-parent,
.site-header .nav .main > li.sia-guidance-menu > .sia-parent span {
  color: #202329 !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #202329 !important;
}

.site-header .nav .main > li.sia-guidance-menu:hover > .sia-parent,
.site-header .nav .main > li.sia-guidance-menu.open > .sia-parent,
.site-header .nav .main > li.sia-guidance-menu > .sia-parent.active {
  color: #e51f27 !important;
  -webkit-text-fill-color: #e51f27 !important;
  border-bottom-color: #e51f27 !important;
}

.site-header .nav .main > li.sia-guidance-menu > .sia-parent .sia-caret {
  color: currentColor !important;
  opacity: 1 !important;
}

/* =========================================================
   SHARED HEADER PROTECTION
   Set font and text colour directly on the shared header so a page's
   <body> theme (font-family / color) can never leak into the navbar.
   Values equal the master (homepage) rendering.
   ========================================================= */
.sgs-topbar,
.site-header {
  font-family: var(--f-body);
}
.site-header {
  color: var(--ink);
}
.nav-toggle {
  color: var(--ink);
}