/* ============================================================================
 * links & menus for Tommy Flowers Foundation - Theme
 * ============================================================================
 *
 * 1 - links
 * 2 - previous and next
 * 3 - clickable hover styles
 * 4 - link as button
 * 5 - main menu
 * 6 - breadcrumb
 * 7 - tags
 * 8 - external
 */


/* ----------------------------------------------------------------------------
 * 1 - links
 * ----------------------------------------------------------------------------
 * theme.json has only very limited support for styling links
 */


a:link:not(nav#breadcrumb a:link), main a:visited:not(nav#breadcrumb a:visited), main a:hover {
	text-underline-offset: 0.4vw;
	text-decoration-thickness: 0.03vw !important
	}

a:link:not(h2 a:link):not(.on_dark a:link):not(.wp-block-site-title a:link):not(.link-as-button:link):not(div.clickable-this:link > div h2 a):not(li.clickable-this:link > div h2 a):not(div.clickable-this:link > div h3 a):not(li.clickable-this:link > div h3 a), a:visited:not(h2 a:visited):not(.on_dark a:visited):not(.wp-block-site-title a:visited):not(.link-as-button:visited):not(div.clickable-this:visited > div h2 a):not(li.clickable-this:link > div h2 a):not(div.clickable-this:visited > div h3 a):not(li.clickable-this:visited > div h3 a) { color: var(--wp--preset--color--theme-theme-black-off); }

.on_dark a:link:not(.on_dark ul li div h2 a:link), .on_dark a:visited:not(.on_dark ul li div h2 a:visited) { color: var(--wp--preset--color--theme-manilla); } 

h2 a:link, h2 a:visited {
	color: var(--wp--preset--color--theme-black-off);
	text-decoration: none;
	}

a:hover:not(a.link-as-button:hover), main a:hover:not(a.link-as-button:hover) { color: var(--wp--preset--color--theme-hover) !important }


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

#post-listing-navigation {

	/**
	 * <nav> element containing previous and next links
	 * and the <div> wrapping native WordPress <nav> elements
	 */

	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--60);
	}

	#post-listing-navigation a:hover { color: var(--wp--preset--color--theme-hover); }

/* and .link-traversing equivelent for WordPress post navigation */

.wp-block-post-navigation-link a, a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next, .wp-block-query-pagination div {
	display: flex;
	flex-grow: 1;
	}

.wp-block-query-pagination {

	/* equivalent to .content-outer */

	margin: 0 auto;
	max-width: 1300px;

	/* equivalent to .container-padding
	 * styles set responsively
	 */

	width: 100% !important
	}

.wp-block-query-pagination div.next { justify-content: flex-end; }

#post-listing-navigation a {
	height: var(--wp--preset--spacing--80);
	line-height: var(--wp--preset--spacing--80);
	}


a.wp-block-query-pagination-next {

	/* right */

	/* right align text ~ align text right */
	justify-content: flex-end;
	padding-right: var(--wp--preset--spacing--100);
	}

	a.wp-block-query-pagination-next:link, a.wp-block-query-pagination-next:visited {

		/* right - link & visited */

		background: url("../images/icon_arrow-right-on-light.svg") right 0 center no-repeat;
		background-size: var(--wp--preset--spacing--80);

		}

			a.wp-block-query-pagination-next:hover {

				/* right - hover */

				background: url("../images/icon_arrow-right-hover-on-light.svg") right 0 center no-repeat;
				background-size: var(--wp--preset--spacing--80);
				}

a.wp-block-query-pagination-previous:link, a.wp-block-query-pagination-previous:visited {

	/* left */

	background: url("../images/icon_arrow-left-on-light.svg") 0 center no-repeat;
	background-size: var(--wp--preset--spacing--80);
	padding-left: var(--wp--preset--spacing--100);
	}

	a.wp-block-query-pagination-previous:hover {

		/* left - hover*/

		background: url("../images/icon_arrow-left-hover-on-light.svg") 0 center no-repeat;
		background-size: var(--wp--preset--spacing--80);
		padding-left: var(--wp--preset--spacing--100);
		}


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

a.link-as-button {
	cursor: pointer;
	display: inline-block;
	font-family: var(--wp--preset--font-family--monasans-body);
	font-size: var(--wp--preset--font-size--fs-normal);
	font-weight: var(--wp--custom--fw-semi-bold);
	line-height: var(--wp--custom--lh-normal);
	padding: 0.5rem var(--wp--preset--spacing--40) 0.5rem var(--wp--preset--spacing--60);
	text-align: center;
	text-decoration: none;
	}

a.link-as-button.button_margin-above {
	
	/* optional - for block element buttons */
	
	margin-top: var(--wp--preset--spacing--60)
	}

a.button-decorated span {
	display: inline-block;
	height: var(--wp--preset--spacing--60);
	margin-left: var(--wp--preset--spacing--10);
	width: var(--wp--preset--spacing--60);
	}

.on_light a.link-as-button:link, a.link-as-button.button_on_light:link, .on_light a.link-as-button:visited, a.link-as-button.button_on_light:visited {

	/* on light: manilla on red */

	background-color: var(--wp--preset--color--theme-black-off);
	color: var(--wp--preset--color--theme-manilla);
	text-decoration: none;
	}
	
	.on_light a.link-as-button:hover, a.link-as-button.button_on_light:hover {

	/* on light: off black on hover blue */

		background-color: var(--wp--preset--color--theme-hover);
		color: var(--wp--preset--color--theme-black-off);
		text-decoration: underline;
		}
	
	
.on_dark a.link-as-button:link, a.link-as-button.button_on_dark:link, .on_dark a.link-as-button:visited, a.link-as-button.button_on_dark:visited {

	/* on dark: red on manilla */

	background-color: var(--wp--preset--color--theme-manilla);
	color: var(--wp--preset--color--theme-black-off);
	text-decoration: none;
	}
	
	.on_dark a.link-as-button:hover, a.link-as-button.button_on_dark:hover {

		/* on light: off black on hover blue */

		background-color: var(--wp--preset--color--theme-hover);
		color: var(--wp--preset--color--theme-black-off);
		text-decoration: underline;
		}


/* icons */

.on_light a.link-as-button.icon_arrow:link span, a.link-as-button.icon_arrow.button_on_light:link span {
	background: url("../images/icon_button-arrow-on-light.svg") 0 50% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	}

	.on_light a.link-as-button.icon_arrow:hover span, a.link-as-button.icon_arrow.button_on_light:hover span {
		background: url("../images/icon_button-arrow-on-dark-hover.svg") 0 50% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}


.on_dark a.link-as-button.icon_arrow:link span, a.link-as-button.icon_arrow.button_on_dark:link span {
	background: url("../images/icon_button-arrow-on-dark.svg") 0 50% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	}

	.on_dark a.link-as-button.icon_arrow:hover span, a.link-as-button.icon_arrow.button_on_dark:hover span {
		background: url("../images/icon_button-arrow-on-dark-hover.svg") 0 50% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}


.on_light a.link-as-button.icon_external:link span, a.link-as-button.icon_external.button_on_light:link span  {
	background: url("../images/icon_button-external-on-light.svg") 0 55% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	}

	.on_light a.link-as-button.icon_external:hover span, a.link-as-button.icon_external.button_on_light:hover span  {
		background: url("../images/icon_button-external-on-light-hover.svg") 0 55% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}


.on_dark a.link-as-button.icon_external:link span, a.link-as-button.icon_external.button_on_dark:link span  {
	background: url("../images/icon_button-external-on-dark.svg") 0 55% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	}

	.on_dark a.link-as-button.icon_external:hover span, a.link-as-button.icon_external.button_on_dark:hover span  {
		background: url("../images/icon_button-external-on-dark-hover.svg") 0 55% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}


/* ----------------------------------------------------------------------------
 * 5 - main menu
 * ----------------------------------------------------------------------------
 */

#header-menu-inner a:link:not(ul#hmenu-header-menu li.current_menu_item a:link), #header-menu-inner a:visited {
	color: var(--wp--preset--color--theme-black-off);
	text-decoration: none;
	} 

.current-menu-item a:not(ul#menu-footer-menu .current-menu-item a) {

	/** 
	 * custom post types
	 * annoying to have to target in this fashion
	 */

	color: var(--wp--preset--color--theme-red) !important;
	}

#header-menu-inner a:hover {
	color: var(--wp--preset--color--theme-hover);
	text-decoration: underline;
	}

#header-menu-inner .menu ul li.current_page_item a, ul#hmenu-header-menu {
	color: var(--wp--preset--color--theme-red);
	text-decoration: underline;
	}

#header-menu-inner .menu ul {
	list-style: none;
	font-family: var(--wp--preset--font-family--jost-headings);
	font-weight: var(--wp--custom--fw-semi-bold);
	}

li.mobile-memu-divider {
	border-top: 1px var(--wp--preset--color--theme-black-off) solid;
	margin-top:  var(--space_small);
	padding-top: var(--space_small);
	}


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


	#tff_header-inner .flex-row-parent {
		flex-direction: row;
 		margin-top: var(--wp--preset--spacing--40);
		}

	#tff_header-inner #header-menu-outer, #tff_header-inner #header-menu-inner {
		position: relative;
		}

		#tff_header-inner #header-menu-outer { /* background-color: red; */ }

		
		#tff_header-inner #header-menu-inner { /* background-color: green; */ }

	#masthead-inner ul { display: none; }

	header.header-outer div#header-menu-outer { margin-top: 0; }

	#header-menu-inner .menu ul, ul#menu-header-menu li {
		font-size: var(--wp--preset--font-size--fs-gigantic);
		line-height: var(--wp--custom--lh-gigantic);
		}

	div#header-menu-outer {

		/* required only for 'burger' menu positioning */

		position: absolute;
		top: 0.6rem;
		right: var(--spacing-edge-handheld);

		height: calc(3.6rem + 0.5vh);
		}

	/* transitions */

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

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

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

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

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

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


	/* elements */

	#header-menu-inner {
		position: absolute;
		top: 0.4rem;
		right: 0;
		z-index: 5;
		padding: 0;
		}

	#header-menu-inner #menu-toggle {
		border-radius: calc(2.5rem + 0.5vh);
		position: relative;
		top: 0;
		right: 0;
		z-index: 6;
		cursor: pointer;
		width: calc(2.2rem + 0.5vh);
		height: calc(2.2rem + 0.5vh);
		padding: calc(0.7rem + 0.5vh);
		opacity: 0;
		}

	#header-menu-inner #menu-icon {

		/* the 'burger' button */

		box-sizing: border-box;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: calc(2.2rem + 0.5vh);
		height: calc(2.2rem + 0.5vh);
		padding: calc(0.35rem + 0.5vh);
		background: var(--wp--preset--color--theme-black-off);
		border-radius: calc(1.5rem + 0.5vh);
		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 */

			#header-menu-inner #menu-icon > div {

				/* the central horizontal bar */

				position: relative;
				flex: none;
				width: 100%;
				height: 1px;
				background: var(--wp--preset--color--theme-manilla);
				transition: all 0.4s ease;
				display: flex;
				align-items: center;
				justify-content: center;
				}

			#header-menu-inner #menu-icon > div:before, #header-menu-inner #menu-icon > div:after {

				/* the upper and lower horizontal bars */

				content: '';
				position: absolute;
				z-index: 1;
				left: 0;
				width: 100%;
				height: 1px;
				background: inherit;
				transition: all 0.4s ease;
				}

				#header-menu-inner #menu-icon > div:before { top: -7px; }
		
				#header-menu-inner #menu-icon > div:after { top: 7px; }

	#header-menu-inner #menu-container {
		background: var(--wp--preset--color--theme-manilla);
		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;
		}

	#header-menu-inner #menu-container > div {

		/* the menu canvas */
		height: 100%;
		width: 100%;

		/* can use a var but must be rgb not hex */
		/* background-color: rgba(var(--color), 0.8); */
		background: var(--global_white);
		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;
		}
	
	nav#menu-container { background-color: var(--wp--preset--color--theme-black-off); }

		#menu-container nav {
			margin-top: clamp(8.23rem, 4.67rem + 5.23vw, 10.53rem);
			align-self: flex-start;
			}


			#menu-container ul {
				list-style: none;
				padding: 0 var(--space_large);
				}

				#menu-container ul li {
					display: inline-block;
					text-align: left;
					width: 100%;
					}
	
	}


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

	/* display menu from this width upwards
	 * toggling of logo image is set in the picture > source > media value in the header-*.php files
	 */

	#tff_header-inner .flex-row-parent{ margin-top: var(--wp--preset--spacing--70); }

	div#masthead-inner-menu-sub { padding-left: var(--spacing-edge-desktop); }

	#header-menu-outer {
		align-items: stretch;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		}

		#header-menu-inner {
			flex-grow: 2;
			margin-top: var(--space_extra_small);
			margin-bottom: var(--space_extra_small);
			}

		ul#menu-header-menu li.hide_me {

			/** hide 'home' link on desktop
			 * to enable this:
			 * Appearance > Menus in the WordPress admin
			 * at the top right corner, click the Screen Options tab
			 */

			display: none;
			width: 0;
			}
		
		ul.menu {
			display: flex;
			justify-content: flex-start;
			list-style: none;
			padding-left: 0;
			}

			li.sb_is_selected { text-underline-offset: 0.4rem; }

			#header-menu-inner .menu ul { font-size: var(--wp--preset--font-size--fs-normal); }

			#masthead-inner-menu-sub ul.menu li {
				line-height: var(--wp--custom--lh-large);
				display: inline;
				}

		#menu-toggle { display: none; }

		#menu-icon { display: none; }

	}


/* ----------------------------------------------------------------------------
 * 6 - breadcrumb
 * --------------------------------------------------------------------------*/

nav#breadcrumb {
	font-size: var(--wp--preset--font-size--fs-small);
	margin: var(--wp--preset--spacing--100) 0 var(--wp--preset--spacing--110) 0;
	}

	nav#breadcrumb a:link, nav#breadcrumb a:visited {
		text-underline-offset: 0.3vw;
		text-decoration-thickness: 0.03vw !important
		}

nav#breadcrumb span { color: var(--wp--preset--color--theme-red); }