/* =========================
   Cool off-white theme pass
   Load this stylesheet LAST
   ========================= */

:root{
  --bg: #F4F7FA;          /* cool off-white background */
  --surface: #FFFFFF;     /* cards / modules */
  --border: #E1E8EF;      /* cool borders */
  --shadow: rgba(18, 38, 55, 0.06);

  --text: #162C3D;        /* near-navy text */
  --muted: #6B7C8C;       /* subdued UI text */
  --link: #2F6EA6;        /* link blue */
  --link-hover: #1F4E79;  /* deeper hover */

  --topbar: #1F365F;      /* H218 S51 L25 */
}

/* 0) Reset the browser default whitespace */
html, body{
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden; /* prevents tiny right-edge overflow */
}

/* 1) Let the page wrapper breathe (don’t nuke .container globally) */
#page, #wrapper{
  background: transparent;
}

/* IMPORTANT: do NOT set .container background globally.
   Legacy layouts use .container inside header and nav. */


/* =========================
   CONTENT SURFACING (cards)
   Scope card styling to the MAIN content area only
   ========================= */

/* Ensure the main content region sits on the cool off-white */
#container, #section{
  background: transparent;
}

/* White cards inside the content area */
#content main,
#content article,
#content section,
#content aside,
#content .content,
#content .sidebar,
#content .module,
#content .box,
#content .panel,
#content .card,
#content .widget,
#content .block{
  background: var(--surface);
}

/* Borders and separators (content area only) */
#content hr,
#content .module,
#content .box,
#content .panel,
#content .card,
#content .widget,
#content .block,
#content article{
  border-color: var(--border);
}

/* Subtle depth (content area only) */
#content .module,
#content .box,
#content .panel,
#content .card,
#content .widget,
#content .block,
#content article{
  box-shadow: 0 1px 3px var(--shadow);
}

/* Tables */
table{
  background: var(--surface);
  border-color: var(--border);
  border-collapse: collapse;
}
th, td{ border-color: var(--border); }
thead th{ color: var(--text); }
tbody tr:hover{ background: #E6EFF6; }

/* Links */
a{ color: var(--link); }
a:hover, a:focus{ color: var(--link-hover); }

/* Muted UI bits */
small,
.meta,
.date,
.byline,
.subtle,
.muted,
.secondary{
  color: var(--muted);
}


/* =========================
   SECTION HEADER BARS
   ========================= */

h2.header{
  background: #1F4E79 !important;
  color: #FFFFFF !important;
  border-bottom: none !important;
  padding: 10px 14px;
}
h2.header a{
  color: #FFFFFF !important;
  background: transparent !important;
}


/* =========================
   MAIN MENU (second nav)
   ========================= */

#main-menu a{
  color: #1F4E79 !important;
  font-weight: 500;
  border-bottom: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

#main-menu a:hover{
  color: #0F3554 !important;
}

/* Active/current item — no underline indicator */
#main-menu a.active,
#main-menu li.active a,
#main-menu li.current a{
  color: #1F4E79 !important;
  border-bottom: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Kill any theme underline bars made with pseudo elements */
#main-menu li.active::after,
#main-menu li.current::after,
#main-menu a.active::after,
#main-menu li.active a::after{
  content: none !important;
  display: none !important;
}

/* =========================
   HEADER LAYOUT FENCE
   Stops logo/nav overlap (“mushed”)
   ========================= */

#header{
  display: block !important;
}
#top-menu-wrap,
#site-name,
#main-menu-wrap{
  display: block !important;
  width: 100% !important;
  clear: both !important;
}
/* contain floats WITHOUT clipping the logo */
#site-name .container{
  overflow: visible !important;
}

/* modern clearfix so layout still behaves */
#site-name .container::after{
  content: "";
  display: table;
  clear: both;
}

/* prevent baseline cropping on the logo image */
#logo img{
  display: block !important;
}

/* ensure main menu isn’t positioned weirdly by legacy CSS */
#main-menu-wrap{
  position: static !important;
  top: auto !important;
  margin-top: 16px !important;
}






/* =========================
   TOP UTILITY BAR — WORKING LAYOUT (the “sits nice” version)
   ========================= */

/* Full-width bar */
#top-menu-wrap{
  background: var(--topbar) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  background-image: none !important;

  /* full-bleed without the calc() scrollbar weirdness */
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;

  box-sizing: border-box !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* Center the content inside the full-bleed bar */
#top-menu-wrap .top-menu-inner{
  max-width: 980px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}



/* Menu row (now centred by .top-menu-inner, not itself) */
#top-menu-wrap #sub-top-menu{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;

  background: transparent !important;
  box-sizing: border-box !important;
}

/* Items */
#top-menu-wrap #sub-top-menu > li{
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  height: 34px !important;

  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kill legacy pseudo-element artifacts */
#top-menu-wrap #sub-top-menu > li::before,
#top-menu-wrap #sub-top-menu > li::after,
#top-menu-wrap #sub-top-menu > li > a::before,
#top-menu-wrap #sub-top-menu > li > a::after{
  content: none !important;
  display: none !important;
}

/* Links */
#top-menu-wrap #sub-top-menu > li > a{
  color: #EAF1F7 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  opacity: .95 !important;

  padding: 0 !important;
  margin: 0 !important;
  background: none !important;

  /* IMPORTANT: keep this as text baseline, not flex */
  line-height: 1 !important;
}

#top-menu-wrap #sub-top-menu > li > a:hover{
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Remove legacy “break” behaviour */
#top-menu-wrap #sub-top-menu > li.break,
#top-menu-wrap #sub-top-menu > li.break > a{
  background: none !important;
  border: 0 !important;
}

/* =========================
   SEARCH — the reliable nudge
   ========================= */

#top-menu-wrap #sub-top-menu > li.search{
  height: 34px !important;
  display: flex !important;
  align-items: center !important;

  position: relative !important;
  top: 7px !important; /* <-- this is what made it “sit nice” */
}

/* Neutralise any old skin */
#top-menu-wrap #top-search-form,
#top-menu-wrap #top-search-form.top-search,
#top-menu-wrap #top-search-form.ui-ranch{
  margin: 0 !important;
  padding: 0 !important;
  height: 24px !important;

  display: flex !important;
  align-items: center !important;

  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Input pill */
#top-menu-wrap #top-search{
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important; /* removes inline baseline offset */

  width: 150px !important;
  max-width: 150px !important;
  height: 24px !important;
  line-height: 24px !important;

  margin: 0 !important;
  padding: 0 10px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.10) !important;
  color: #FFFFFF !important;

  outline: none !important;
  box-shadow: none !important;
}

#top-menu-wrap #top-search::placeholder{
  color: rgba(255,255,255,.75) !important;
}

/* Hide submit so it can't affect layout */
#top-menu-wrap #top-search-form input[type="submit"]{
  display: none !important;
}






/* =========================
   REMOVE EXCESS VERTICAL GAP
   (header -> content)
   ========================= */

/* Kill any huge padding/margin below header */
#header-wrap,
#header{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Banner area often adds big bottom margin */
#site-name{
  margin-bottom: 10px !important;  /* tune: try 6px–14px */
  padding-bottom: 0 !important;
}

/* Main menu area shouldn’t add extra space */
#main-menu-wrap{
  margin-top: 25px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* The big gap is usually here */
#container{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Some themes add spacing on #section or #content */
#section,
#content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If there is a "clearfix" spacer div, neutralise it */
.clear,
.clearfix{
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}





/* =========================
   BREADCRUMB (crumbtrail)
   ========================= */
.menu-container{
  background: #EEF3F7 !important;   /* soft blue-grey tint */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Remove any legacy grey coming from the list itself */
.menu-container .menu.crumb{
  background: transparent !important;
}

/* =========================
   NEWS TIER-3 SUB MENU — COLOUR ONLY
   (no layout changes)
   ========================= */

/* Background strip */
.NewsNav_Block .sub-menu{
  background: var(--surface) !important;   /* keeps it white like content */
  border-bottom: 1px solid var(--border) !important;
}

/* Links (default) */
.NewsNav_Block .sub-menu a{
  color: var(--link) !important;           /* your brand blue */
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Hover */
.NewsNav_Block .sub-menu a:hover{
  color: var(--link-hover) !important;
}

/* Active tab */
.NewsNav_Block .sub-menu a.active{
  color: var(--link-hover) !important;
  border-bottom: 2px solid var(--link-hover) !important;
}