/**
 * Styles migrated from Appearance > Customize > Additional CSS.
 *
 * NOTE: When confirmed working, delete the matching rules from the
 * Customizer (Additional CSS) so they aren't applied twice.
 */

a.total-width {
	width: 100%;
}

body.single-post a {
	color: #009ddc;
	font-weight: 600;
}

.container-wrap a,
.story-content a {
	color: #009ddc;
}

body.single-post a:hover {
	text-decoration: underline;
}

.hide-blog-tag a.blog {
	display: none;
}

/* About tideworks page timeline updates */
.cool_timeline_horizontal .ctl_road_map_wrp li .ctl-story-title {
	padding: 0 2.2rem;
	font-size: 1.1rem !important;
}

/* About tideworks page leadership team updates */
.leadership-team p,
.leadership-team h3 {
	padding-bottom: 0;
}

.leadership-team a {
	background-color: #2ac4ea;
	color: #fff;
	border-radius: 2px;
	padding: 13px 24px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.1em;
	font-size: 12px;
	display: inline-block;
	margin: 1rem 0;
	transition: border-color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1);
	-moz-transition: border-color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1);
	-o-transition: border-color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1);
	-webkit-transition: border-color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1);
}

.leadership-team a:hover {
	opacity: .8;
}

/* Class to remove right and left borders from Partners Page */
.no-rightleft-border div.vc_column-inner {
	border-top: 0px solid;
	border-bottom: 8px solid;
}

.dark-blue-border div.vc_column-inner {
	border-color: #00336d;
}

.sec-blue-border div.vc_column-inner {
	border-color: #448aff;
}

.green-border div.vc_column-inner {
	border-color: #6bc1b9;
}

.light-blue-border div.vc_column-inner {
	border-color: #2ac4ea;
}

/* Class to hide destination link in Case Studies */
.hide-destination .post.link .post-content .destination {
	display: none;
}

/* Class for align Employee Spotlight */
.emp-spot {
	display: flex;
	align-items: center;
}

.emp-spot img {
	flex: 0 0 15%;
}

.emp-spot div {
	flex: 0 0 70%;
}

@media (max-width: 900px) {
	.emp-spot {
		flex-wrap: wrap;
	}

	.emp-spot img {
		flex: 0 0 60%;
	}

	.emp-spot div {
		flex: 0 0 100%;
	}
}

/* Extra class for buttons in Mainsail */
.all-width {
	width: 100%;
}

body.single-post p a {
	color: #009ddc;
	font-weight: 600;
}

body.single-post p a:hover {
	text-decoration: underline;
}

blockquote {
	margin: em 1em;
/* 	background: #01336D; */
	color: #fff;
	padding: 2rem 2.4rem;
	font-size: 17px;
	font-weight: 300;
	line-height: 24px;
	border-radius: 5px;
	/* border-left: 5px solid #16477f; */
	border-bottom: 5px solid #16477f;
	box-shadow: 2px 2px 10px #bababa;
}

blockquote p {
	color: #fff;
}

blockquote a {
	color: #fff !important;
	text-decoration: underline;
	font-weight: 600;
}

blockquote a:hover {
	text-decoration: none !important;
}

.customers-loveit {
	background-color: #eaeaee;
	padding: 2rem;
	border-bottom: solid 6px #002f81;
	border-radius: 2px;
}

.customers-loveit p {
	font-size: 1rem;
	padding-bottom: 0;
}

.customers-loveit#terminal-demo {
	width: 70%;
}

#toc {
	background-color: #eaeaee;
	border-left: solid 6px #002f81;
	width: 380px;
	padding: 1.8rem 1rem 1.8rem 3.5rem;
}

/* Interactive Map Font reduced */
g.imapsContainer.imapsTooltip div {
	font-size: 70%;
	line-height: 1.2;
}

div.terminals-box {
	font-size: 100% !important;
	display: flex;
	flex-wrap: wrap;
}

div.terminals-box .terminal {
	margin: 1% 4% 0 0;
	font-size: 100% !important;
	line-height: 1.4 !important;
}

div.terminals-box .terminal strong {
	display: block;
	margin-top: 2%;
}

table.terminals-table td {
	text-align: left;
}

/* BP FOR TIDEWORKS TIMELINE */
.cool-timeline .timeline-year .icon-placeholder span {
	top: 0 !important;
}

h1.timeline-main-title {
	display: none;
}

.cool-timeline-wrapper {
	margin-top: 1% !important;
	max-width: 100% !important;
}

.cool-timeline .content-title {
	padding-top: 0 !important;
}

#pp_full_res {
	padding: 2% 3% 0;
}

nav.custom-pagination {
	padding: 4% 0;
}

.ctl-popup-content .story-posted-date {
	display: none;
}

/* ---------------------------------------------------------------------------
   Mobile (off-canvas) Products menu.

   The Products dropdown is a 3-level tree that Salient's slide-out menu renders
   as a drill-down: Products > Category (.no-hover, carries <b> title + <p>
   description) > product links.

   On the 2nd-level (category) panel, style the title and description:
   bold 700 title, regular 400 / 16px description.
   --------------------------------------------------------------------------- */
body #slide-out-widget-area li.no-hover > a b {
	font-weight: 700;
}

body #slide-out-widget-area li.no-hover > a p {
	font-weight: 400 !important;
	font-size: 16px !important;
}

@media screen and (min-width: 999px) {
	/* ---------------------------------------------------------------------
	   Products mega menu

	   Targeted via the `nb-mega-menu` CSS class added to the parent menu item
	   (Appearance > Menus > item > "CSS Classes" field) rather than a fragile
	   menu-item-#### ID, so re-creating/editing the item won't break the menu.

	   Structure (set up in Appearance > Menus):
	     Products
	       > Category (custom link: <b>title</b> + <p>description</p>)   = column
	           > Product (page link)                                     = list item
	           > Product …

	   Each first-level child renders as its own column (flex row), and its
	   nested product <ul> renders statically stacked inside that column
	   instead of as Salient/Superfish's default hover fly-out. Because each
	   column is its own DOM subtree, content length never pushes items into
	   the wrong column the way the old `flex-flow: column wrap` + fixed
	   height approach did.
	   --------------------------------------------------------------------- */

	/* Reposition so the wide dropdown isn't clipped at the viewport edge */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu {
		left: -200%;
		width: 887px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		/* 40px gap between columns (per Figma) so the column top borders
		   don't touch. Applied on the flex container rather than per-column
		   padding so the spacing is exactly 40px between borders. */
		gap: 40px;
		padding: 30px;
	}

	/* Each first-level child is a column */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li {
		flex: 1 1 0;
		min-width: 0;
		padding: 0;
		border-top: 2px solid #2ac4ea;
	}

	/* These column headers are not fly-outs anymore, so drop the arrow */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > a .sf-sub-indicator {
		display: none;
	}

	/* Default colour for every link + description in the dropdown */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu a,
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu a b,
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu a p {
		color: #444444;
	}

	/* Category title (carries the description) — bold 14px */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > a,
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > a b {
		margin-top: 10px;
		font-size: 14px;
		font-weight: 700;
	}

	/* Category description paragraph — 12px regular.
	   Pinned with !important so page-level WPBakery custom CSS (e.g. the Blog
	   page's global `p { line-height:24px !important }`) can't inflate it. */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > a p {
		margin: 0.5rem 0 0;
		font-size: 12px !important;
		font-weight: 400 !important;
		line-height: 1.4 !important;
	}

	/* Force the nested product list to render inline inside the column
	   rather than as an absolutely-positioned hover fly-out. `visibility:
	   inherit` ties it to the parent dropdown's open/closed state. */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > ul.sub-menu {
		position: static !important;
		display: block !important;
		float: none !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0.75rem 0 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
		opacity: 1 !important;
		visibility: inherit !important;
		transform: none !important;
		transition: none !important;
	}

	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > ul.sub-menu > li {
		width: auto;
		float: none;
	}

	/* Product links — 14px regular */
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > ul.sub-menu > li > a,
	#header-outer .sf-menu > li.nb-mega-menu > ul.sub-menu > li > ul.sub-menu > li > a b {
		font-size: 14px;
		font-weight: 400;
	}

	/* Main top-level nav links share the same #444444 colour. Button-style
	   items (e.g. "Speak to Sales") are excluded so their own styling stands. */
	#header-outer #top nav ul li:not([class*="button_"]) > a {
		color: #444444;
	}

}

/* ---------------------------------------------------------------------------
   Category headers carry a `.no-hover` class (on the <li>) because they are
   column labels, not real links. For the standard header, Salient's dropdown
   hover applies an accent-colour background fill to the link (the text colour
   is unchanged), so suppress that fill on every interaction state. The resting
   text colour is left untouched, so the hover state is visually identical to
   rest. `cursor: default` reflects that the header isn't a navigable link.
   --------------------------------------------------------------------------- */
/* 2 IDs (#header-outer #top) + .nb-mega-menu + .no-hover. Salient's dropdown
   hover rule is also 2 IDs but with fewer classes, so this still out-ranks it
   (equal IDs, more classes) — and !important pins it regardless.

   Salient's hover treatment for a dropdown link is two changes: an accent
   background fill AND a light/inverted text colour (meant to read against that
   fill). Removing only the fill left the text invisible, so we also pin the
   colour. `inherit` is applied to rest + hover alike so the header is always
   the dropdown's normal dark text and never changes on hover. The title (<b>)
   and description (<p>) have no colour of their own, so they follow the <a>. */
#header-outer #top nav ul li.nb-mega-menu li.no-hover > a {
	cursor: default;
	color: #444444 !important;
}

#header-outer #top nav ul li.nb-mega-menu li.no-hover > a:hover,
#header-outer #top nav ul li.nb-mega-menu li.no-hover > a:focus,
#header-outer #top nav ul li.nb-mega-menu li.no-hover > a:active,
#header-outer #top nav ul li.nb-mega-menu li.no-hover.sfHover > a {
	background: transparent !important;
	color: #444444 !important;
}

/* ---------------------------------------------------------------------------
   Dropdown: don't give the parent the current-page background fill.

   Salient's generated styles (salient-dynamic-styles.css) paint the brand
   accent (#2ac4ea) as a !important background on every dropdown item that is an
   ancestor of the page you're on (.current-menu-ancestor / .current_page_ancestor),
   not just the current page itself. On an interior product page that means the
   parent category header (e.g. "Rail Terminal Operations") lights up the same as
   the actual current link ("Intermodal Pro").

   Salient's rule is `...#top nav > ul > li:not(.megamenu) ul .current-menu-ancestor > a`
   = specificity (0,2,3,5) !important, so this override has to out-specify it.
   Spelling out the full mega-menu chain (.sf-menu .nb-mega-menu .sub-menu …)
   gets us to (0,2,5,6), and :not(.current-menu-item) protects the real current
   link so it keeps its highlight.
   --------------------------------------------------------------------------- */
#header-outer #top nav ul.sf-menu li.nb-mega-menu ul.sub-menu li.current-menu-ancestor:not(.current-menu-item) > a,
#header-outer #top nav ul.sf-menu li.nb-mega-menu ul.sub-menu li.current_page_ancestor:not(.current_page_item) > a {
	background-color: transparent !important;
	color: #444444 !important;
}

@media (max-width: 600px) {
	#toc {
		width: 100%;
		margin-left: -5px;
	}
}

@media (max-width: 900px) {
	.customers-loveit#terminal-demo {
		width: 100%;
	}
}

.justify-items-center .row_col_wrap_12 {
	display: flex;
	justify-content: center;
}

/* CLASS FOR CUSTOM ACCORDION STYLE */
.custom-accordion h3 {
	padding: 0;
}

.custom-accordion p a {
	color: #3555ff;
}

.tw-grid .nectar-post-grid-item .nectar-post-grid-link h3.post-heading,
.same-height-grid .post.format-link .post-content .link-wrap h3 {
	font-size: 1.4rem;
	line-height: normal;
	padding-bottom: 0;
}

/* CLASS FOR SAME HEIGHT GRIDS */
.same-height-grid .masonry.material .masonry-blog-item .inner-wrap {
	box-shadow: none;
}

.same-height-grid .post.format-link .link-inner .link-wrap {
	display: flex;
	color: #000;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 35rem;
}

.same-height-grid .post.format-link .link-inner .link-wrap a {
	margin-top: auto;
	color: #349DDC;
}

.same-height-grid .post h3.title {
	margin-bottom: 0;
	padding: 0;
}

.same-height-grid .post.link .post-content h3 {
	color: #000;
}

.same-height-grid span {
	font-size: 1rem;
}

.same-height-grid .masonry.material .link-inner:before {
	background-color: #e8e8e8 !important;
}

.same-height-grid.cs-height .post.format-link .link-inner .link-wrap {
	min-height: 32rem;
}

.same-height-grid.small-height {
/* 	min-height: 25rem; */
}

/* Only show product demos on video library */
.show-demos-only .w-gallery-view__hero-content-wrapper,
.show-demos-only .w-gallery-view__section:nth-child(1),
.show-demos-only .w-gallery-view__section:nth-child(3),
.show-demos-only .w-gallery-view__section:nth-child(4),
.show-demos-only .w-gallery-view__section:nth-child(5),
.show-demos-only .w-gallery-view__section:nth-child(6),
.show-demos-only .w-gallery-view__section:nth-child(7),
.show-demos-only .w-gallery-view__section:nth-child(8),
.show-demos-only h2 {
	display: none !important;
}

.show-demos-only .w-gallery-view__video-cards {
	padding: 42px 0px 19.404px 0px !important;
}

.show-demos-only .wistia_channel {
	min-height: auto !important;
}

/* Blog description font smaller */
.nectar-post-grid .item-meta-extra {
	font-size: 1rem;
}

.thbox .nectar-fancy-box {
	min-height: 490px;
}

@media screen and (max-width: 1000px) {
	.thbox .nectar-fancy-box {
		min-height: inherit;
	}
}

/* Comments are disabled site-wide; hide any leftover empty wrapper */
.comments-section,
.comment-wrap {
	display: none;
}