/*
Theme Name: Brandboard by Hartinger
Theme URI: https://www.hartinger.at
Author: Sascha Steinkleibl (Hartinger Consulting)
Author URI: https://www.hartinger.at
Description: Das Brandboard-Template ist für alle, die Marken klar und konsistent präsentieren wollen – intern oder extern. Logo, Farben, Schriften, Bildsprache und Anwendungen sind übersichtlich aufgebaut und responsive umgesetzt.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: Header, Footer, Video, Look & Feel, Logo, Farbwelt, Typografie, Grafische Elemente, Bildwelt, Anwendungen
*/

/* Header & Footer */

header, footer{
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Button Outline */

button, a{
	outline: none;
}

/* Block Image */

.wp-block-image img{
	width: 100%;
}

/* Sticky Section Nav */

#section-nav{
	position: sticky!important;
	top: 15vh;
	list-style: none;
	padding-left: 0;
} #section-nav a{
	text-decoration: none;
	max-width: 240px;
	padding-right: 20px;
} #section-nav a.active{
	text-decoration: none;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
} #section-nav a::after{
	content: '';
	display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.202' height='13.992' viewBox='0 0 19.202 13.992'%3E%3Cg id='Pfeil_Horizontal' transform='translate(0 0.707)' style='isolation: isolate'%3E%3Cline id='Linie_68' data-name='Linie 68' x2='17.788' transform='translate(0 6.289)' fill='none' stroke='%23e74536' stroke-width='2'/%3E%3Cpath id='Pfad_2349' data-name='Pfad 2349' d='M0,0V8.894H8.894' transform='translate(11.499 12.578) rotate(-135)' fill='none' stroke='%23e74536' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
	height: 1em;
	width: 1em;
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
	transform: translatex(-1em);
	opacity: 0;
} #section-nav a.active::after{
	opacity: 1;
	transform: translatex(0);
	transition: .4s;
}

/* Bounce Animation */

.bounce {
	animation: bounce 2s ease-in-out infinite;
} @keyframes bounce {
	0% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(8px) scale(.9);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

/* Media Queries */

@media (max-width:781px){
	#section-nav{
		position: relative;
		top: auto;
	}
}

@media (max-width:640px){
	footer .is-layout-flex, 
	header .is-layout-flex{
		justify-content: center;
	}
}