/* =========================
   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: #1F4E79;      /* 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 li{
  font-weight: 200 !important;  /* <-- this is the one that will win */
}

#main-menu li a{
  color: #1F4E79 !important;
  font-weight: inherit !important; /* inherit from li */
  border-bottom: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* FORCE LEFT ALIGN (kills theme centring) */
#main-menu-wrap,
#main-menu{
  text-align: left !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;
}

#sab-topbar-logo{
  display: flex !important;
  align-items: center !important;
  height: 64px !important;      /* matches your #top-menu-wrap height */
  padding: 6px 0 !important;    /* <-- this is the "space above/below" */
  margin: 0 !important;
  box-sizing: border-box !important;
}

#sab-topbar-logo img{
  display: block !important;
  height: 40px !important;      /* adjust if you want bigger/smaller */
  width: auto !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)
   ========================= */

/* TOP UTILITY BAR — full-bleed background without pseudo/z-index hacks */
#top-menu-wrap{
  position: relative !important;
  z-index: 5 !important;

  height: 64px !important;              /* taller to fit logo */
  display: flex !important;
  align-items: center !important;

  background: var(--topbar) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  background-image: none !important;

  padding: 0 12px !important;           /* room for logo on left */
  margin: 0 !important;
  box-sizing: border-box !important;

  box-shadow: 0 0 0 100vmax var(--topbar) !important;
  clip-path: inset(0 -100vmax) !important;
}
#header-wrap, #header, #site-name{
  position: relative !important;
  z-index: 4 !important;
  margin-top: 0 !important;           /* kills the white gap */
}


#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;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* logo left, menu right */
}


/* Menu row (now centred by .top-menu-inner, not itself) */
#top-menu-wrap .top-menu-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* keep the menu row right-aligned */
#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;
}


/* =========================
   PORT NAV (Bunker Prices) — COLOUR ONLY
   ========================= */

/* keep background strip consistent */
.PortNav_Block .sub-menu{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* default tab colour */
.PortNav_Block .sub-menu a{
  color: var(--link) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

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

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

/* =========================
   BREADCRUMB (crumbtrail) — COLOUR ONLY (no layout changes)
   ========================= */

.menu-container{
  background: #F1F5F9 !important;       /* cleaner cool grey */
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;           /* kills the ugly shadow */
}

/* Don’t touch spacing/height on the list */
.menu-container .menu.crumb{
  background: transparent !important;
  box-shadow: none !important;
}

/* Links: tone + weight only */
.menu-container .menu.crumb a{
  color: var(--muted) !important;
  font-weight: 500 !important;           /* less “meh bold” */
  text-decoration: none !important;
}

.menu-container .menu.crumb a:hover{
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* Active/current page crumb */
.menu-container .menu.crumb li.active a,
.menu-container .menu.crumb li.active span{
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* separators if the theme uses generated ones */
.menu-container .menu.crumb li::before{
  color: #A8B4C0 !important;
}


/* =========================
   NEWS NAV (News & Features) — FULL BLUE BAR
   ========================= */

.NewsNav_Block .sub-menu{
  background: #1F4E79 !important;
  border: none !important;

  display: flex !important;
  align-items: center !important;     /* TRUE vertical centering */

  padding: 0 12px !important;         /* remove vertical padding */
  height: 40px !important;            /* controls bar height */
}

/* links */
.NewsNav_Block .sub-menu a{
  color: rgba(255,255,255,.85) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* hover */
.NewsNav_Block .sub-menu a:hover{
  color: #FFFFFF !important;
}

/* active */
.NewsNav_Block .sub-menu a.active{
  color: #FFFFFF !important;
  border-bottom: none !important;           /* remove the blue underline */
  font-weight: 700 !important;
}

/* Make the FULL News & Features bar blue (not just the links row) */
.NewsNav_Block{
  background: #1F4E79 !important;
}

/* Remove the white card styling from this block only */
.NewsNav_Block .block-content{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Make the "News & Features" heading white */
.NewsNav_Block h1,
.NewsNav_Block h2,
.NewsNav_Block .block-title{
  color: #FFFFFF !important;
}

.NewsNav_Block h1.title,
.NewsNav_Block h2.title{
  color: #FFFFFF !important;
}
.NewsNav_Block h1.title span,
.NewsNav_Block h2.title span{
  color: rgba(255,255,255,.85) !important;
}



/* =========================
   MAIN NAV — ALIGN TO SITE CONTENT (980px centred, items start at left)
   ========================= */

/* Keep the bar itself full width, but centre the *menu row* like the site */
#main-menu{
  max-width: 980px !important;
  width: 100% !important;

  /* this centres the menu row on the page */
  margin: 0 auto !important;

  /* match the top utility bar inner padding */
  padding: 0 12px !important;

  box-sizing: border-box !important;

  /* ensure it’s not centred text */
  text-align: left !important;
}

#main-menu-wrap{
  text-align: left !important;
}



/* =========================
   INLINE GREY HEADERS → BLUE THEME
   ========================= */

h3[style*="#BBBBBB"]{
  background: #1F4E79 !important;   /* same blue as other section bars */
  color: #FFFFFF !important;
}









/* =========================
   JQUERY UI TABS (VLSFO / MGO / HSFO / Scrubber Spread)
   COLOUR ONLY
   ========================= */

/* Tab bar baseline */
.ui-tabs .ui-tabs-nav{
  border-bottom: 1px solid var(--border) !important;
}

/* Inactive tab (dark blue like section headers) */
.ui-tabs .ui-tabs-nav li.ui-state-default{
  background: #1F4E79 !important;   /* same dark blue as Latest Prices bar */
  border: 1px solid #1F4E79 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Inactive tab text (white on dark blue) */
.ui-tabs .ui-tabs-nav li.ui-state-default > a{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  background: transparent !important;

  color: #FFFFFF !important;
  font-weight: 450 !important;

  padding: 16px 4px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
}




.ui-tabs .ui-tabs-nav li.ui-state-default:hover{
  background: #163B5C !important; /* slightly darker blue on hover */
}



/* Hover text */
.ui-tabs .ui-tabs-nav li.ui-state-default:hover > a{
  color: var(--link-hover) !important;
}


/* Active tab BOX (LI) — WHITE like content */
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active{
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-bottom: 1px solid #FFFFFF !important; /* blends into chart */
  box-shadow: none !important;
}

/* Active tab TEXT (A) */
.ui-tabs .ui-tabs-nav li.ui-tabs-active > a,
.ui-tabs .ui-tabs-nav li.ui-state-active > a{
  background: transparent !important; /* let LI supply the white */
  color: var(--link-hover) !important;
  font-weight: 700 !important;

  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 16px 4px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
}


/* Remove any jQuery UI gradients/shadows */
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li a{
  box-shadow: none !important;
  background-image: none !important;
}




/* =========================
   FOOTER — MATCH SITE COLOUR SCHEME
   ========================= */

/* Main footer background */
#footer-wrap{
  background: #1F4E79 !important;   /* same blue as section headers */
  border-top: none !important;
}

/* Inner footer area */
#footer{
  background: transparent !important;
}

/* Footer links */
#footer a{
  color: #E6EEF5 !important;   /* soft off-white */
  text-decoration: none !important;
}

#footer a:hover{
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

/* Footer section headings (bold links at top of each column) */
#footer .footer-block-menu strong a{
  color: #FFFFFF !important;
}

/* Small bottom bar (RSS | Terms | etc) */
#footer .footer-menu{
  border-top: 1px solid rgba(255,255,255,.15) !important;
  padding-top: 12px !important;
  margin-top: 10px !important;
}

/* Copyright text */
#footer div[style*="&copy;"]{
  color: rgba(255,255,255,.75) !important;
}




/* =========================
   SAB TOP BANNER (930x180) — Safari-safe, in flow
   ========================= */

#sab-topbanner-wrap{
  display: block !important;
  width: 100% !important;
  clear: both !important;          /* hard stop after any floats above */
  margin: 0 !important;
  padding: 20px 0 16px !important;     /* small breathing room below top bar */
}

#sab-topbanner-inner{
  width: 930px !important;
  max-width: 100% !important;
  margin: 0 auto !important;        /* centre */
}

/* ensure the adunit behaves like a block and reserves height */
#sab-topbanner-inner .adunit{
  display: block !important;
  width: 930px !important;
  height: 180px !important;
}

/* Make sure main menu always starts below the banner */
#main-menu-wrap{
  clear: both !important;
}




/* =========================
   SAFARI / LEGACY FLOAT CONTAINMENT FIX
   Make header height include its children so menu can't slide up
   ========================= */

/* 1) Force #header and the banner wrapper to establish a new formatting context */
#header,
#sab-topbanner-wrap{
  display: flow-root !important;   /* modern float containment */
}

/* 2) Fallback for older Safari: clearfix */
#header::after,
#sab-topbanner-wrap::after{
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* 3) Remove any legacy constraints that can cause collapse/clipping */
#header,
#header-wrap{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* 4) Absolutely forbid the main menu from overlaying upward */
#main-menu-wrap{
  position: static !important;     /* kills legacy pos tricks */
  float: none !important;
  clear: both !important;
  margin-top: 12px !important;     /* small gap below the banner */
  z-index: auto !important;
}