/* ============================================================================
 * links & menus
 * ============================================================================
 * Be More P.U.N.K. - Theme
 *
 * 1 - links
 * 2 - link as button
 * 3 - jetpack buttons
 * 4 - main menu
 */

a:link:not(a.link-as-button:link), a:visited:not(a.link-as-button:visited) { color: var(--wp--preset--color--theme-blue); }

a:hover {
	color: var(--wp--preset--color--theme-purple);
	text-decoration: underline;
	}

/* ----------------------------------------------------------------------------
 * 2 - link as button
 * --------------------------------------------------------------------------*/

a.link-as-button {
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	font-family: var(--wp--preset--font-family--body-montserrat);
	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: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	text-align: center;
	text-decoration: none;
	}

a.link-as-button.button_margin-above { margin-top: var(--wp--preset--spacing--60); }

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

.on_light a.button-ghost:link, a.button-ghost.on_light:link, .on_light a.button-ghost:visited, a.button-ghost.on_light:visited {
	border: 2px var(--wp--preset--color--theme-black-off) solid;
	color: var(--wp--preset--color--theme-black-off);
	text-decoration: none;
	}
	
	.on_light a.button-ghost:hover, a.button-ghost.on_light:hover {
		background-color: var(--wp--preset--color--theme-green);
		border: 2px var(--wp--preset--color--theme-black-off) solid;
		color: var(--wp--preset--color--theme-black-off);
		text-decoration: underline;
		}
	
	
.on_dark a.button-ghost:link, a.button-ghost.on_dark:link, .on_dark a.button-ghost:visited, a.button-ghost.on_dark:visited {
	border: 2px var(--wp--preset--color--white) solid;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	}
	
	.on_dark a.button-ghost:hover, a.button-ghost.on_dark:hover {
		background-color: var(--wp--preset--color--theme-green);
		border: 2px var(--wp--preset--color--white) solid;
		color: var(--wp--preset--color--white);
		text-decoration: underline;
		}


/* surface */

.button-surface-dark {
	background-color: var(--wp--preset--color--theme-black-off);
	color: var(--wp--preset--color--white);
	}

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

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

	a.button-surface-dark.icon_chat:link span {
		background: url("../images/icon_button-chat-on-dark.svg") 0 55% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}

a.button-surface-dark:hover {
	background-color: var(--wp--preset--color--theme-green);
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	}

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

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

	a.button-surface-dark.icon_chat:hover span {
		background: url("../images/icon_button-chat-on-dark.svg") 0 55% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}

	
.button-surface-light {
	background-color: var(--wp--preset--color--theme-yellow);
	color: var(--wp--preset--color--theme-black-off);
	}

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

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

	a.button-surface-light.icon_chat:link span {
		background: url("../images/icon_button-chat-on-light.svg") 0 55% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}


a.button-surface-light:hover {
	background-color: var(--wp--preset--color--theme-green);
	color: var(--wp--preset--color--theme-black-off);
	text-decoration: underline;
	}

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

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

	a.button-surface-light.icon_chat:hover span {
		background: url("../images/icon_button-chat-on-light.svg") 0 55% no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}


/* ghost */

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

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


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

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


.on_light a.button-ghost.icon_external:link span, a.button-ghost.icon_external.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.button-ghost.icon_external:hover span, a.button-ghost.icon_external.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.button-ghost.icon_external:link span, a.button-ghost.icon_external.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.button-ghost.icon_external:hover span, a.button-ghost.icon_external.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);
		}

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

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

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

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


/* custom button: you can book me (youcanbookme) */

a.ycbm_link {
	background-color: var(--wp--preset--color--theme-black-off);
	box-sizing: border-box;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	display: inline-block;
	font-family: var(--wp--preset--font-family--body-montserrat);
	font-size: var(--wp--preset--font-size--fs-normal);
	font-weight: var(--wp--custom--fw-semi-bold);
	line-height: var(--wp--custom--lh-normal);
	margin-bottom: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: center;
	text-decoration: none;
	}

	a.ycbm_link:hover {
		background-color: var(--wp--preset--color--theme-green);
		color: var(--wp--preset--color--white);
		text-decoration: underline;
		}


/* ----------------------------------------------------------------------------
 * 3 - jetpack buttons
 * --------------------------------------------------------------------------*/

.wp-block-button__link {
	background-color: var(--wp--preset--color--theme-black-off);
	color: var(--wp--preset--color--white);
	}

.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--theme-green);
	color: var(--wp--preset--color--theme-black-off);
	}

/* ----------------------------------------------------------------------------
 * 4 - main menu
 * --------------------------------------------------------------------------*/

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

	#header-inner .flex-row-parent { flex-direction: row; }

	/*
	#header-inner .flex-row-child {  background-color: orange; }
	*/

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

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

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

	#masthead-inner ul { display: none; }

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


	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;
		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--white);
				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--white);
		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-purple); }

	#menu-container ul {
		list-style: none;
		padding: 0 var(--wp--preset--spacing--70);
		}

	#menu-container ul li {
		display: inline-block;
		line-height: var(--wp--custom--lh-extra-large);
		text-align: left;
		width: 100%;
		}

	}

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


#header-inner .flex-row-parent { 
	align-items: center;
	display: flex;
	flex-direction: row;
	}

/*
#header-inner .flex-row-parent { border: 1px blue solid; }

#header-inner .flex-row-parent .flex-row-child { border: 1px green solid; }

#header-menu-inner { border: 1px var(--wp--preset--color--theme-purple) solid; }
*/

@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
	 */

	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(--wp--preset--spacing--30);
			margin-bottom: var(--wp--preset--spacing--40);
			}

		.hide-me {

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

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

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

		#menu-toggle { display: none; }

		#menu-icon { display: none; }

	}

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

		/* nothing here */

	}