/* ============================================================================
 * links & menus
 * ============================================================================
 * Sketch Club Theme
 *
 * 1 - links
 * 2 - previous and next
 * 3 - clickable hover styles
 * 4 - link as button
 * 5 - tags
 * 6 - external
 */


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


/*
 * a:link
 */

main a:link {
	color: var(--wp--preset--color--green-sketch-club);
	}

main a:link, main a:visited, main a:hover, .footer-page a:link , .footer-page a:visited, .footer-page a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2vw;
	text-decoration-thickness: 0.03rem !important
	}

#header-top-menumasthead-inner-menu-sub ul.menu li a:link, #masthead-inner-menu-sub ul.menu li a:hover, .description h2 a:hover, .list_rows h2 a:hover { text-decoration: underline; }

#breadcrumb a:link, #breadcrumb a:visited {
	color: var(--wp--preset--color--green-sketch-club);
	text-decoration: underline;
	}

a.link-traversing:link, a.link-traversing:visited {
	color: var(--wp--preset--color--green-sketch-club);
	text-decoration: none;
	}

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

.wp-block-post-navigation-link a:link, .wp-block-query-pagination a:link, .wp-block-post-navigation-link a:visited, .wp-block-query-pagination a:visited {
	color: var(--wp--preset--color--green-sketch-club);
	text-decoration: none;
	}

.wp-block-post-navigation-link a:hover, .wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--red-highlight);
	text-decoration: underline;
	}


/* masthead */

#masthead-club-name a:link, #masthead-club-name a:visited {
	color: var(--wp--preset--color--green-sketch-club);
	text-decoration: none;
	}

#masthead-inner-menu-sub ul li a { text-underline-offset: 0.4rem; }

#masthead-inner-menu-sub ul li a:link, #masthead-inner-menu-sub ul li a:visited {
	color: var(--wp--preset--color--black-off);
	text-decoration: none;
	}

	#masthead-inner-menu-sub ul li.sb_is_selected a {
		color: var(--wp--preset--color--green-sketch-club);
		text-decoration: underline;
		}


/* footer */

ul#sb_footer-menu {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--font-heading);
	font-size: var(--wp--preset--font-size--fs-normal);
	font-weight: var(--wp--custom--fw-heading);
	line-height: var(--wp--custom--lh-large);
	list-style: none;
	text-transform: uppercase;
	padding-left: 0;
	}

ul#sb_footer-menu li a:link, ul#sb_footer-menu li a:visited {
	color: var(--wp--preset--color--white-warm-light);
	text-decoration: none;
	}

ul#sb_footer-menu li a:hover {
	color: var(--wp--preset--color--red-highlight);
	text-decoration: underline;
	}


/*
 * a:visited
 */

main a:visited, #footer-page-content aside a:visited { color: var(--wp--preset--color--black-off); }

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

/*
 * a:hover
 */

 #masthead-club-name a:hover, .description h2 a:hover, .description h3 a:hover, .list_rows h2 a:hover, .list_rows h3 a:hover {
	color: var(--wp--preset--color--red-highlight);
	text-decoration: underline;
	}

 #masthead-inner-menu-sub ul li a:hover:not(.link-as-button) {
	color: var(--wp--preset--color--red-highlight);
	text-decoration: underline;
	}

#breadcrumb a:hover,
main a:hover,
#footer-page-content aside a:hover,
#footer-legal a:hover

	{
	color: var(--wp--preset--color--red-highlight);
	text-decoration: underline;	
	}

a.link-traversing:hover {
	color: var(--wp--preset--color--red-highlight);
	text-decoration: underline;
	}

main a.link-as-button:hover {
	color: var(--wp--preset--color--white-warm-light);
	text-decoration: underline;
	}

.card:hover a {
	
	/* hover style for card h2 but not p */

	text-decoration: underline;
	color: var(--wp--preset--color--red-highlight) !important
	}

.callout-link:hover a {

	/* hover style for callout h2 but not p */

	text-decoration: underline;
	color: var(--wp--preset--color--red-highlight) !important
	}


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

	/* home page menu colours for desktop only */

	#section-site-intro .menu a:link {
		color: var(--wp--preset--color--white-warm-light);
		text-decoration: none;
		}

	#section-site-intro .menu a:visited {
		color: var(--wp--preset--color--white-warm-light);
		text-decoration: none;
		}

	#section-site-intro .menu a:hover {
		color: var(--wp--preset--color--white-warm-light);
		text-decoration: underline;
		}

	}


/* ----------------------------------------------------------------------------
 * 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);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	}

	#post-listing-navigation:not(#post-listing-navigation.style_override) { margin-bottom: var(--wp--preset--spacing--90); }

.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(--wp--preset--font-family--font-body);
	font-size: var(--wp--preset--font-size--fs-normal);
	font-weight: var(--wp--custom--fw-paragraph-bold);
	}


/* 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;
	font-family: var(--wp--preset--font-family--font-body);
	font-size: var(--wp--preset--font-size--fs-normal);
	font-weight: var(--wp--custom--fw-paragraph-bold);
	}

.wp-block-query-pagination {

	/* equivalent to .content-outer */

	margin: 0 auto;
	max-width: 1200px;
	text-align: left;

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

	width: 100% !important
	}

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


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

.link-right-decorated {
	padding-right: var(--wp--preset--spacing--50);
	text-align: right;
	justify-content: flex-end;
	}

.link-left-decorated {
	padding-left: var(--wp--preset--spacing--50);
	}


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

.link-left-arrow {
	background: url("../images/icon-arrow-left-on-light.svg") left 50% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	}

	.link-left-arrow:hover {
		background: url("../images/icon-arrow-left-on-light-hover.svg") left 50% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}

.link-right-arrow {
	background: url("../images/icon-arrow-right-on-light.svg") right 50% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	}

	.link-right-arrow:hover {
		background: url("../images/icon-arrow-right-on-light-hover.svg") right 50% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}


/* and .link-traversing equivelent for WordPress post navigation
 * and,
 * WordPress handles previous_posts_link() and next_posts_link() differently
 * so these two must be explcitly targetted
 */

.post-navigation-link-previous a, a.wp-block-query-pagination-previous, .wp-block-query-pagination div.previous a {
	background: url("../images/icon-arrow-left-on-light.svg") left 50% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--50);
	}

	.post-navigation-link-previous a:hover, a.wp-block-query-pagination-previous:hover, .wp-block-query-pagination div.previous a:hover {
		background: url("../images/icon-arrow-left-on-light-hover.svg") left 50% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--50);
		}

.post-navigation-link-next a, a.wp-block-query-pagination-next, .wp-block-query-pagination div.next a {
	background: url("../images/icon-arrow-right-on-light.svg") right 50% no-repeat;
	background-size: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--50);
	text-align: right;
	justify-content: flex-end;
	}

	.post-navigation-link-next a:hover, a.wp-block-query-pagination-next:hover, .wp-block-query-pagination div.next a:hover {
		background: url("../images/icon-arrow-right-on-light-hover.svg") right 50% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--50);
		text-align: right;
		justify-content: flex-end;
		}


/* ----------------------------------------------------------------------------
 * 3 - clickable hover styles
 * ----------------------------------------------------------------------------
 * these classes are purely present to enable hover behaviours as determined in
 * js/sct.js
 * 
 * 
 * their only visual effect is heading hover styles
 *
 * .clickable-this
 *
 * - callout panels
 *
 * .clickable-child-card
 * <ul class="clickable-child-card">  --> <li>
 * addtional styles in card-grid-responsive.css
 *
 * - sketch pad cards
 */

 .clickable-this:hover > h2 a, .clickable-this:hover > .description h3 a, .clickable-this:hover > a, .clickable-child-card li:hover > .description a, .clickable-child-card li figure:hover > .description a, .card-arrow li:hover > .description h2, #sb_events li.clickable-this .event_content_wrapper:hover > .description h2 a {

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

	text-decoration: underline;
	color: var(--wp--preset--color--red-highlight) !important
	}


/* ----------------------------------------------------------------------------
 * 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--font-body);
	font-size: var(--wp--preset--font-size--fs-normal);
	font-weight: var(--wp--custom--fw-paragraph-regular);
	line-height: var(--wp--custom--lh-normal);
	padding: 0.5rem var(--wp--preset--spacing--50);
	text-align: center;
	text-decoration: none;
	}

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

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

.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 {
	border: 2px var(--wp--preset--color--black-off) solid;
	color: var(--wp--preset--color--black-off);
	text-decoration: none;
	}
	
	.on_light a.link-as-button:hover, a.link-as-button.button_on_light:hover {
		background-color: var(--wp--preset--color--red-highlight);
		border: 2px var(--wp--preset--color--red-highlight) solid;
		color: var(--wp--preset--color--white-warm-light);
		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 {
	border: 2px var(--wp--preset--color--white-warm-light) solid;
	color: var(--wp--preset--color--white-warm-light);
	text-decoration: none;
	}
	
	.on_dark a.link-as-button:hover, a.link-as-button.button_on_dark:hover {
		background-color: var(--wp--preset--color--red-highlight);
		border: 2px var(--wp--preset--color--red-highlight) solid;
		color: var(--wp--preset--color--white-warm-light);
		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--custom--space-button-external);
	}

	.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--custom--space-button-external);
		}


.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--custom--space-button-external);
	}

	.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--custom--space-button-external);
		}
		

/* ----------------------------------------------------------------------------
 * 5 - tags
 * ----------------------------------------------------------------------------
 * @since 3.0
 * currently used only for sketch pad articles
 */

.is-style-pill a {
	font-family: var(--wp--preset--font-family--font-body);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	}

.is-style-pill a:link, .is-style-pill a:visited {
	background-color: var(--wp--preset--color--black-off);
	border-radius: 20px;
	color: var(--wp--preset--color--white-warm-light);
	text-decoration: none;
	}

.is-style-pill a:hover {
	background-color: var(--wp--preset--color--red-highlight);
	color: var(--wp--preset--color--white-warm-light);
	text-decoration: underline;
	}


/* ----------------------------------------------------------------------------
 * 6 - external
 * ----------------------------------------------------------------------------
 */

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

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