/*
Theme Name: bendiegamesmodern
Theme URI:  
Description: Child theme for Twenty Twenty-Five — Featuring customisations for Bendie Games with modern design by Amber.
Author:      Ben Taylor
Template:    twentytwentyfive
Version:     2.0.0
Text Domain: bendiegamesmodern
*/

/* Correction to theme underlinking for links */
a {
	text-decoration-thickness: 2px !important;
	text-underline-offset: .1em;
}
/* Get rid of the theme's focus on every clicked block that ruins looks */
:where(.wp-site-blocks *:focus) {
	outline-width: 0px !important;
	outline-style: none !important;
}
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible {
	outline: none;
}
/* Scrolling behavour for menu header alignment (only snaps on touch screen scrolling devices, and for certain pages) */
/* removing this for now, too annoying on devtools emulation, test on real mobile later 
@media (pointer: coarse) {
	html {
		scroll-snap-type: y proximity;
	}
}
body.page-template-bendie-home .page-section, 
body.page-template-bendie-about .page-section, 
body.page-template-bendie-shop .page-section {
  scroll-snap-align: start;
}
*/
/* Bendie modern button w/ techno outline */ 
	.bendie-button1 {
		display: inline-block;
		color: black;
		background-color: #acd793;
		border-radius: 20px;
		padding-top: 1rem;
		padding-right: 2rem;
		padding-bottom: 1rem;
		padding-left: 2rem;
		text-decoration: none;
		font-family: var(--wp--preset--font-family--lazydog);
		text-align: center ;
		font-size: 30px !important;
		font-style: normal;
		font-weight: 400;
		letter-spacing: -0.1px;
		margin: auto;
		text-wrap: nowrap;
		position: relative;
		overflow: visible;
		transition: transform 0.1s ease;
	}
	.bendie-button1 a {
		text-decoration: none;
	}
	.bendie-button1::before {
		content: '';
		width: 45%;
		height: 50%;
		border-top-left-radius: 15px;
		border-bottom-right-radius: 0px;
		border: 2px solid black;
		border-bottom: hidden;
		border-right: hidden;
		position: absolute;
		top: -5%;
		left: 2%;
		z-index: 10;
		transition: width 0.5s ease, height 0.5s ease, top 0.1s ease, left 0.1s ease;
	}
	.bendie-button1::after {
		content: '';
		width: 40%;
		height: 75%;
		border-bottom-right-radius: 15px;
		border-top-left-radius: 0px;
		border: 2px solid black;
		border-top: hidden;
		border-left: hidden;
		position: absolute;
		bottom: -7%;
		right: 1%;
		z-index: 10;
		transition: width 0.5s ease, height 0.5s ease, bottom 0.1s ease, right 0.1s ease;
	}
	.bendie-button1:hover {
		filter: contrast(1.2);
		transform: scale(1.2);
	}
	.bendie-button1:hover::before {
		width: 65%;
		height: 18%;
	}
	.bendie-button1:hover::after {
		width: 60%;
		height: 24%;
	}
	.bendie-button1:active {
		transform: translateY(5px);
		filter: brightness(0.9);
	}
	.bendie-button1:active::before {
		top: -20%;
		left: -15%;
	}
	.bendie-button1:active::after {
		bottom: -15%;
		right: -10%;
	}
	.bendie-button1:focus,
	.bendie-button1:focus-visible {
		outline: none;
		box-shadow: none;
	}
	.bendie-button-plain {
	display: inline-block;
    background-color: var(--wp--preset--color--contrast);
    border-width: 0;
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--sniglet);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 1.4;
    padding-top: 0.75rem;
    padding-right: 1.5rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
	border-radius: 9999px;
    text-decoration: none;
	cursor: pointer;
	align-content: center;
    box-sizing: border-box;
    cursor: pointer;
    height: 100%;
    text-align: center;
	overflow-wrap: break-word;
    word-break: break-word;
	}
	.bendie-button-plain:hover {
		background-color: #636363;
		transform: scale(1.02);
		font-weight: 500;
	}
	.bendie-button-plain:active {
		transform: translateY(5px);
	}
/* Custom classes for home page */
.div-w-centered-items {
	text-align: center;
	justify-content: center;
	align-items: center;
}
.home-banner-2 {
	margin-right: var(--wp--preset--spacing--70);
	margin-left: var(--wp--preset--spacing--70);
}
.bendie-imglink-hover1 a {
	transition: transform 0.1s ease;
}
.bendie-imglink-hover1 a:hover {
	transform: rotate(-3deg) scale(1.1);
}
.bendie-imglink-hover1 a:active {
	transform: rotate(-3deg) scale(0.995);
}
.bendie-imglink-hover1 a:focus,
.bendie-imglink-hover1 a:focus-visible {
	outline: none;
}
.bendie-imglink-hover2 a {
	transition: transform 0.1s ease;
}
.bendie-imglink-hover2 a:hover {
	transform: rotate(+3deg) scale(1.1);
}
.bendie-imglink-hover2 a:active {
	transform: rotate(+3deg) scale(0.995);
}
.bendie-imglink-hover2 a:focus,
.bendie-imglink-hover2 a:focus-visible {
	outline: none;
}
.bendie-simple-outline {
	border-radius: 4px;
    box-shadow: inset 0 0 0 1.5px black;
	padding: 13px 23px 23px;
}
/* header and foot stuff */
	.vertical-line-spacer-small {
		width: 1px; /* Adjust for desired line thickness */
		height: 50px !important; /* Adjust for desired line length */
		background-color: black; /* Set your desired color */
		margin: 0 auto; /* Optional: to center the line horizontally */
		/* Other properties for positioning if needed, e.g., position: absolute; left: 50%; transform: translateX(-50%); */
	}
	.vertical-align-center {
		margin-top: auto;
		margin-bottom: auto;
	}
	.header-no-wrap {
		word-break: keep-all !important;
		overflow-wrap: normal;
		overflow: visible;
	}
	.wp-block-navigation .wp-block-navigation-item__label {
		overflow-wrap: normal !important;
	}
.DIY-span-D {
	font-family:'courier new'; 
	font-weight:bold; 
	font-size:120%; 
	color:#228B22; 
	margin-right:-6px;
}
.DIY-span-I {
	font-family:'courier new'; 
	font-weight:bold; 
	font-size:120%; 
	color:#556B2F; 
	margin-right:-4px;
}
.DIY-span-Y {
	font-family:'courier new'; 
	font-weight:bold; 
	font-size:120%; 
	color:#008200; 
	margin-right:-6px;
}
.DIY-span-symbol {
	font-family:'courier new'; 
	font-weight:bold; 
	font-size:120%; 
	color:#556B2F; 
	margin-right:2px;
}
.color-block-background {
	position: relative;
	z-index: -100;
}
.text-above-background {
	position: relative;
	z-index: 100;
}

/* Wordpress arrow to be contained in img/figure element with class .link-arrow*/
.link-w-arrow {
	position: relative;
	text-align: right;
}
.link-w-arrow a {
	display: inline-block;
	position: relative;
	z-index: 10;
	font-size: 1.4em;
	text-decoration: none;
	transition: transform 0.1s ease;
}
.link-w-arrow img {
	position: absolute;
	width: 100px;
	height: auto;
	z-index: 9;
	transition: transform 0.1s ease;
	opacity: 0.6;
	filter: saturation(70%);
}
.link-w-arrow a:hover { 
	text-decoration: underline;
	transform: scale(1.1);
}
.link-w-arrow a:hover ~ img { 
	transform: scale(1.3) translateX(80px);
	opacity: 0.8;
	filter: saturation(100%);
}
.link-w-arrow a:hover ~ .link-arrow img { 
	transform: scale(1.2) translateX(80px);
}
.home-faq.link-w-arrow img {
	top: 40px;
	right: 40px;
}
.link-w-arrow-reverse {
	position: relative;
	text-align: left;
	margin-bottom: 50px;
	margin-left: 10vw;
}
.link-w-arrow-reverse a {
	display: inline-block;
	position: relative;
	z-index: 10;
	font-size: 1.4em;
	text-decoration: none;
	transition: transform 0.1s ease;
}
.link-w-arrow-reverse img {
	position: absolute;
	top: 30px;
	left:-15px;
	width: 100px;
	height: auto;
	z-index: 9;
	transition: transform 0.1s ease;
	opacity: 0.8;
	filter: saturate(70%);
}
.link-w-arrow-reverse a:hover { 
	text-decoration: underline;
	transform: scale(1.1);
}
.link-w-arrow-reverse a:hover ~ .link-arrow img { 
	transform: scale(1.3) translateX(-80px);
	opacity: 1;
	filter: saturate(100%);
}

.background-squiggle-about {
	position: absolute;
	z-index: 1;	
	opacity: 0.5;
	width: 600px;
	height: auto;
	right: 20px;
	bottom: 0px;
}
.background-spiral-about {
	position: absolute;
	z-index: 1;	
	opacity: 0.5;
	width: 600px;
	height: auto;
	left: 20px;
	bottom: 0px;
}
.background-stripes-about {
	position: absolute;
	z-index: 1;	
	opacity: 0.5;
	width: 600px;
	height: auto;
	left: 20px;
	top: 0px;
}
.about-big-titles {
	text-transform: capitalize;
	font-size: 3em;
}

/* Phone screen settings */
@media (max-width: 980px) {
	.link-w-arrow a:hover ~ img { 
		transform: scale(1.1) translateX(20px) !important;
	}
	.vertical-line-spacer-small {
		width: 1px;
	}
	.responsive-column {
		flex-direction: column !important;
	}
	.responsive-column-reverse {
		flex-direction: column-reverse !important;
	}
	.hide-on-mobile {
		display: none !important;
	}
	.header-no-wrap {
		word-break: keep-all !important;
		overflow-wrap: normal !important;
		overflow: visible !important;
	}
	.wp-block-navigation .wp-block-navigation-item__label {
		overflow-wrap: normal !important;
		font-size: 1.5rem !important;
	}
	.footer-menu-container {
		display: flex;
	}
	.footer-menu-container > :first-child {
		order: 9; 
	}
	.footer-menu-container .footer-menu-nav {
		flex-direction: column !important;
		align-content: flex-start !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 15px !important;
		flex-wrap: wrap;
	}
	.footer-copyright-tag {
		margin-bottom: 75px !important;
	}
	
	/* home page responsive styles */
	.home-spacer-responsive1 {
		height: 150px !important;
	}
	.home-animation-responsive {
		width: 70% !important;
	}
	.home-see-thru-picture {
		display: none !important;
	}
	.home-page-faq-doggy {
		width: 60% !important;
		height: auto !important;
	}
	.home-page-faq-column {
		padding: 0 !important;
		margin-bottom: 100px !important;
	}
	.home-page-less-padding-responsive {
		padding-top: var(--wp--preset--spacing--50) !important;
	}
	
	/* about page reponsive styles */
	.page-template-wp-custom-template-bendie-about .about-title-section.page-section {
		min-height: 60vh !important;
		padding-top: 0px !important;
	}
	.page-template-wp-custom-template-bendie-about .page-section {
		padding-top: 30px !important;
		overflow: hidden !important;
	}
}