/** ===========================================================================
 * menu and link styles for Company Theme
 * ============================================================================
 * 1 - links
 * 2 - previous and next
 * 3 - external
 * 4 - link as button
 * 5 - card call to action
 * 6 - breadcrumb
 * 7 - form buttons
 * 8 - main menu
 * 9 - footer menu
 */


/** ---------------------------------------------------------------------------
 * 1 - links
 * ----------------------------------------------------------------------------
 */


/** a:link */

main a:link, #footer-legal a:link {
	color: var(--link_active_cw_1);
	text-decoration: underline;
	}

#cb_menu-header li a:link, a.link-traversing:link { text-decoration: none; }

#cb_header-menu a:link:not(#cb_header-menu li a.contact-call:link):not(#cb_header-menu li a#contact-call-menu:link), #breadcrumb a:link, .card a:link, a.link-traversing:link { color: var(--black_off); }

.panel-cw-3 a.link-traversing:link, .panel-cw-03 a.link-traversing:visited, #cb_footer-menu li a:link {
	color: var(--theme_white_off);
	text-decoration: none;
	}

/** a:visited */

main a:visited, #footer-legal a:visited { color: var(--link_visited_cw_1); }

#cb_header-menu a:visited:not(#cb_header-menu li a.contact-call:visited):not(#cb_header-menu li a#contact-call-menu:visited), #breadcrumb a:visited, a.link-traversing:visited { color: var(--black_off); }

.panel-cw-3 a.link-traversing:visited, .panel-cw-03 a.link-traversing:visited,  a:visited {
	color: var(--theme_white_off);
	text-decoration: none;
	}


/** a:hover */

#cb_header-menu a:hover, a.link-traversing:hover, #footer-legal a:hover, #cb_footer-menu li a:hover {
	text-decoration: underline;
	color: var(--link_hover) !important
	}

.card-arrow:hover > .description h2, .card-arrow:hover > .description h3 {

	/* apply link style to heading on card hover */

	text-decoration: underline;
	color: var(--link_hover);
	}

#cb_header-menu li a.contact-call:hover {
	text-decoration: none;
	color: var(--theme_white_off) !important
	}

	.button-arrow-on-dark:hover {
	
		text-decoration: underline;
		color: var(--link_hover);
	}




/** ---------------------------------------------------------------------------
 * 2 - previous and next
 * ----------------------------------------------------------------------------
 */

#navigation-section {

	/*
	 * parent of <nav> element containing link to work or services	
	 */

	padding-top: var(--space_large);
	padding-bottom: var(--space_large);
	}

 #navigation-post {

	/*
	 * <nav> element containing previous and next links
	 */

	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	margin-top: 0;
	padding-top: var(--space_normal);
	padding-bottom: var(--space_gigantic);
	}

.link-traversing {

	/**
	 * left/back or right/forward link
	 * flex <a> and grow: 1 to align correctly when there is only one link
	 */

	display: flex;
	flex-grow: 1;
	font-family: var(--font_heading_subsidiary);
	font-size: var(--fs_normal);
	font-weight: var(--fw_heading_subsidiary);
	}


/**
 * decorated link
 * ----------------------------------------------------------------------------
 */

.link-right-decorated {
	padding-right: var(--space_small);
	text-align: right;
	justify-content: flex-end;
	}

.link-left-decorated {
	padding-left: var(--space_small);
	}


/**
 * kind of decoration
 * ----------------------------------------------------------------------------
 */

.link-left-arrow {
	background: url("../images/icon-arrow-left-on-light.svg") left 60% no-repeat;
	background-size: var(--space_tiny);
	}

.panel-cw-3 .link-left-arrow, .panel-cw-03 .link-left-arrow {
	background: url("../images/link-left-theme-light.svg") left 60% no-repeat;
	background-size: var(--space_tiny);
	}

.link-right-arrow {
	background: url("../images/icon-arrow-right-on-light.svg") right 60% no-repeat;
	background-size: var(--space_tiny);
	}

.panel-cw-3 .link-right-arrow, .panel-cw-03 .link-right-arrow {
	background: url("../images/link-right-theme-inverted.svg") right 60% no-repeat;
	background-size: var(--space_tiny);
	}

	.panel-cw-3 a.link-right-arrow:hover, .panel-cw-03 a.link-right-arrow:hover {
		background: url("../images/icon-arrow-right-on-light.svg") right 60% no-repeat;
		background-size: var(--space_tiny);
		}

.link-body-copy-right-arrow:link, .link-body-copy-right-arrow:visited {
	background: url("../images/link-right-theme-dark.svg") right 60% no-repeat;
	background-size: var(--space_tiny);
	color: var(--theme_dark);
	text-decoration: none !important
	}

	.link-body-copy-right-arrow:hover {
		background: url("../images/icon-arrow-right-on-light.svg") right 60% no-repeat;
		background-size: var(--space_tiny);
		text-decoration: underline !important
		}


/** ---------------------------------------------------------------------------
 * 3 - external
 * ----------------------------------------------------------------------------
 */

 a.external:link {
	background: transparent url("../images/external-link-active.svg") no-repeat scroll bottom right;
	background-size: 1vmin, 1vmin;
	margin-right: 0.3vmin;
	padding-right: 1.5vmin;
	}

	/* 

	a.external:visited {}

	although this is valid, broswers now universally block external visited link styles
	
	*/


a.external:hover {
	background: transparent url("../images/external-link-hover.svg") no-repeat scroll bottom right;
	background-size: 1vmin, 1vmin;
	margin-right: 0.3vmin;
	padding-right: 1.5vmin;
	}


/** ---------------------------------------------------------------------------
 * 4 - link as button
 * ----------------------------------------------------------------------------
 * styles are identical to the jetpack button
 */

a.link-as-button {
	border-radius: var(--border_radius_button);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font_heading_subsidiary);
	font-weight: var(--fw_heading_subsidiary);
	font-size: var(--fs_normal);
	line-height: var(--lh_normal);
	padding: 0.7rem 1.4rem;
	text-align: center;
	text-decoration: none;
	}

a.link-as-button:link, a.link-as-button:visited { text-decoration: none; }


/* button-ghost on_dark */

main a.button-ghost.on_dark, .on_dark a.button-ghost {
	color: var(--theme_white_off);
	text-decoration: none;
	}

	a.button-ghost.on_dark:link, .on_dark a.button-ghost:link, a.button-ghost.on_dark:visited, .on_dark a.button-ghost:hover { border: 1px var(--theme_white_off) solid; }

	a.button-ghost.on_dark:hover, .on_dark a.button-ghost:hover {
		background-color: var(--theme_highlight);
		border: 1px var(--theme_highlight) solid;
		color: var(--theme_white_off) !important
		}


/* button-ghost on_light */

main a.button-ghost.on_light { color: var(--theme_dark); }

	main a.button-ghost.on_light:link, .on_light a.button-ghost:link, main a.button-arrow-on-light:visited, .on_light a.button-arrow-on-light:visited {
		border: 1px var(--black_off) solid;
		color: var(--black_off);
		text-decoration: none;
		}

	/* here, both clickable-this declarations are required: block-article-summary and block-serpentine respectively  */
	main a.button-ghost.on_light:hover, .on_light a.button-ghost:hover, .clickable-this.on_light:hover a.button-ghost, .on_light .clickable-this:hover a.button-ghost {
		background-color: var(--theme_highlight);
		border: 1px var(--theme_highlight) solid;
		text-decoration: none;
		color: var(--black_off) !important
		}


/* button-solid on_dark */

a.button-solid.on_dark, .on_dark a.button-solid { background-color: var(--theme_white_off); }

main a.button-solid.on_dark:link, main .on_dark a.button_solid:link, main a.button-solid.on_dark:visited, main .on_dark a.button_solid:visited {
	color: var(--theme_dark);
	text-decoration: none;
	}

a.button-solid.on_dark:hover, .on_dark a.button_solid:hover {
	color: var(--theme_highlight) !important;
	text-decoration: underline !important;
	}


/* ghost on_light */

a.button-solid.on_light:link, a.button-solid.on_light:visited {
	color: var(--theme_white_off);
	text-decoration: none;
	}

a.link-as-button.on_light:hover {
	color: var(--theme_highlight);
	text-decoration: underline;
	}


/* button icon */

.button-icon span {
	display: inline-block;
	margin-left: var(--space_miniscule);
	height: var(--space_extra_small);
	width: var(--space_extra_small);
	vertical-align: middle;
	}


	/* arrow */

	.icon-arrow.on_dark span, .on_dark .link-as-button.icon-arrow span {
		background: url("../images/icon-button-arrow-on-dark.svg") no-repeat;
		background-size: cover;
		}

	.icon-arrow.on_light span, .on_light .link-as-button.icon-arrow span {
		background: url("../images/icon-button-arrow-on-light.svg") no-repeat;
		background-size: cover;
		}


	/* call or chat */

	.on_dark a.icon-call span, .on_dark .link-as-button.icon-call span {
		background: url("../images/icon-button-call-on-light.svg") no-repeat;
		background-size: cover;
		}
	
	.icon-call.on_light span, .on_light .link-as-button.icon-call span {
		background: url("../images/icon-button-call-on-dark.svg") no-repeat;
		background-size: cover;
		}


	/* download */

	.icon-download.on_dark span, .on_dark .link-as-button.icon-download span {
		background: url("../images/icon-button-download-on-dark.svg") no-repeat;
		background-size: cover;
		}

	.icon-download.on_light span, .on_dark .link-as-button.icon-download span {
		background: url("../images/icon-button-download-on-light.svg") no-repeat;
		background-size: cover;
		}


	/* external */

	.icon-external.on_dark span, .on_dark .link-as-button.icon-external span {
		background: url("../images/icon-button-external-on-dark.svg") no-repeat;
		background-size: cover;
		}

	.icon-external.on_light span, .on_dark .link-as-button.icon-external span {
		background: url("../images/icon-button-external-on-light.svg") no-repeat;
		background-size: cover;
		}


	/* rocket */

	.icon-rocket.on_dark span, .on_dark .link-as-button.icon-rocket span {
		background: url("../images/icon-button-rocket-on-dark.svg") no-repeat;
		background-size: cover;
		}

	.icon-rocket.on_light span, .on_dark .link-as-button.icon-rocket span {
		background: url("../images/icon-button-rocket-on-light.svg") no-repeat;
		background-size: cover;
		}


/** ---------------------------------------------------------------------------
 * 5 - card call to action - 'static' CTA
 * ----------------------------------------------------------------------------
 */


/** ---------------------------------------------------------------------------
 * 6 - breadcrumb
 * ----------------------------------------------------------------------------
 * for services category
 * @since Company Theme 15.3
 */


/** ---------------------------------------------------------------------------
 * 7 - form buttons
 * ----------------------------------------------------------------------------
 */

button.button-light {
	background: transparent;
	border-radius: 0;
	border: 1px solid var(--theme_dark);
	color: var(--theme_dark);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font_heading_main);
	font-weight: var(--fw_heading_subsidiary);
	font-size: var(--fs_small);
	line-height: var(--lh_small);
	margin: 0 var(--space_small) var(--space_small) 0;
	padding: 0.7rem 1rem;
	}

button.button-light:hover {
	border: 1px solid var(--theme_highlight);
	color: var(--theme_white_off);
	background: var(--theme_highlight) !important
	}

button.selected {
	background: transparent;
	border: 1px solid var(--theme_background);
	}


/** ---------------------------------------------------------------------------
 * 8 - main menu
 * ----------------------------------------------------------------------------
 */

#skip-link, #menu-toggle-label, a.external span {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	}

#skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	}

ul#cb_header-menu { margin-bottom: 0 !important }


a#contact-call-menu { background-color: var(--theme_dark); }

@media screen and (max-width: 890px) {

	/** set menu hand-held breakpoint here
	 * set also in the next @media declaration below
	 * set also in global.css
	 */

	#header-page-preheader { display: none; }

	/* transitions */

	#menu-outer #menu-toggle:checked + #menu-icon > div {
		transform: rotate(135deg);
		}

	#menu-outer #menu-toggle:checked + #menu-icon > div:before,
	#menu-outer #menu-toggle:checked + #menu-icon > div:after {
		top: 0;
		transform: rotate(90deg);
		}

	#menu-outer #menu-toggle:checked + #menu-icon > div:after {
		opacity: 0;
		}

	#menu-outer #menu-toggle:checked ~ #menu-container {
		pointer-events: auto;
		visibility: visible;
		}

	#menu-outer #menu-toggle:checked ~ #menu-container > div {
		transform: scale(1);
		transition-duration: 0.75s;
		}

	#menu-outer #menu-toggle:checked:hover + #menu-icon > div {
		transform: rotate(225deg);
		}


	/* elements */

	#menu-outer {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 5;
		}

	#menu-outer #menu-toggle {
		position: relative;
		top: 0;
		right: 0;
		z-index: 6;
		cursor: pointer;
		width: var(--tap_target);
		height: var(--tap_target);
		opacity: 0;
		}

	#menu-outer #menu-icon {

		/* the 'burger' button */

		box-sizing: border-box;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: var(--tap_target);
		height: var(--tap_target);
		padding: calc(0.3rem + 0.5vh);
		background: var(--theme_medium);
		border-radius: 0.12em;
		cursor: pointer;
		transition: box-shadow 0.4s ease;
		-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		}

			/* these generate the 'burger' button icon */

			#menu-outer #menu-icon > div {

				position: relative;
				flex: none;
				width: 100%;
				height: 2px;
				background: var(--theme_white_off);
				transition: all 0.4s ease;
				display: flex;
				align-items: center;
				justify-content: center;
				}

			#menu-outer #menu-icon > div:before,
			#menu-outer #menu-icon > div:after {
				content: '';
				position: absolute;
				z-index: 1;
				top: -10px;
				left: 0;
				width: 100%;
				height: 2px;
				background: inherit;
				transition: all 0.4s ease;
				}

			#menu-outer #menu-icon > div:after {
				top: 10px;
				}

	#menu-outer #menu-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		visibility: hidden;
		overflow: hidden;
		-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		outline: 1px solid transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		}

	#menu-outer #menu-container > div {

		/* the menu canvas */

		width: 200vw;
		height: 300vw;
		/* can use a var but must be rgb not hex */
		/* background-color: rgba(var(--color), 0.8); */
		background: var(--theme_white_off);
		transition: all 0.4s ease;
		flex: none;
		transform: scale(0);
		-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		}

	ul#cb_header-menu, ul#cb_header-menu li {
		list-style: none;
		padding: 0;
		text-align: center;
		}

		ul#cb_header-menu li a:link, ul#cb_header-menu li a:visited { text-decoration: none; }

		ul#cb_header-menu li a:hover { text-decoration: underline; }

	#cb_header-menu li {
		display: inline-block;
		font-size: var(--fs_huge);
		font-weight: var(--fw_regular);
		line-height: var(--lh_huge);
		margin-bottom: var(--space_small);
		width: 100%;
		}

	}

@media screen and (min-width: 891px) {

	/** set menu hand-held breakpoint here
	 * set also in the next @media declaration above
	 * set also in global.css
	 */

	#cb_header-menu li.hide-me {
		
		/* applies to #contact-call-menu */

		width: 0;
		display: none !important
		}

	#cb_header-menu li a#contact-call-menu { width: 8rem; }

		ul#cb_header-menu li:first-of-type {

			/** hide 'home' link on desktop */

			display: none;
			width: 0;
			}

		ul#cb_header-menu {
			display: flex;
			justify-content: flex-end;
			list-style: none;
			padding-left: 0;
			}

			#cb_header-menu li:first-of-type { display: none; }

			#cb_header-menu li {
				display: flex;
				align-items: center;
				font-family: var(--font_heading_main);
				font-size: var(--fs_normal);
				font-weight: var(--fw_regular);
				line-height: var(--lh_normal);
				margin-left: var(--space_tiny);
				}

				#cb_header-menu li a:link, #cb_header-menu li a:visited { text-decoration: none; }

				#cb_header-menu li a:hover { text-decoration: underline; }


		#menu-toggle { display: none; }

		#menu-icon { display: none; }

	}


/** ---------------------------------------------------------------------------
 * 9 - footer menu
 * ----------------------------------------------------------------------------
 */


ul#cb_footer-menu {
	margin: 0;
	padding-left: 0;
	}

	#cb_footer-menu li {
		display: flex;
		flex-direction: row-reverse;						/* to align text right */
		font-family: var(--font_heading_subsidiary);
		font-size: var(--fs_large);
		font-weight: var(--fw_medium);
		line-height: var(--lh_large);
		}