/*
Theme Name: Bock auf Fussball
Author: Christoph Adel
Author URI: https://www.jagibonn.de
Description: Standard Theme JFC Brueser Berg
Version: 1.0
License: Copyright by JAGI Bonn GmbH
License URI: ---
Tags: light
*/


/**********
 * Basics *
 *********/

 body {
	background:#fff;
	color: var(--text); 
	margin:0;
	line-height: 1.4em;
}

.screen-reader-text:not(:focus) {
	position: absolute !important;
	height: 1px;
	width: 1px;
	left: -9999px;
	clip: rect(1px,1px,1px,1px);
	overflow: hidden;
}

a.skip-link:focus, a.skip-link:active {
    position: absolute;
    border: 1px solid #fff;
    background: var(--primary);
    color: #fff;
    z-index: 1040;
    margin: 1em;
	padding: 0.5em;
}	

#menu-hauptmenue a:focus, a:focus {
	border:2px solid var(--primary);
}
#header-img a:focus {border:0}
#header-img a:focus img {border:2px solid #fff;}

header#site-header {background:  var(--primary)}

header#site-header, nav.scrolled {
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.6),0 15px 0 rgba(0,0,0,0.0);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.6),0 15px 0 rgba(0,0,0,0.0);
	box-shadow: 0 5px 10px rgba(0,0,0,0.6),0 15px 0 rgba(0,0,0,0.0); 
}

header #header-img {
	background: url(res/img/brueser-berg-bn-bg.jpg);
	background-size: cover;
	display:flex;
	justify-content: center;
	padding:2em 15%;
}

header .site-logo {text-align: left; margin-right:200px;}
header .teaser-text {text-align: center;}
header .jagi-logo {text-align: right;}
header .jagi-logo p {margin-bottom: 0.5em; color:#fff;}

.fg-1 {flex-grow: 1; align-self: center;}
.fg-4 {flex-grow: 4; align-self: center;}

/*
header #header-img img {width:100%;}
header .site-logo {
	max-width:260px; 
	position: absolute;
	left:15%;
	top:1em;
} */

.featured-image img {width:100%; height:100%;}

.mainwrapper {max-width:1140px; margin:0 auto; }

.full-width main {padding:0;}
main, aside {padding:1em; margin-bottom: 2.5em}

/* Footer */
footer#site-footer {
	background:var(--primary); 
	color:#fff; 
	padding:1em; 
	border-top: 7px solid #fff;
	-webkit-box-shadow: 0 -5px 10px rgba(0,0,0,0.6),0 15px 0 rgba(0,0,0,0.0);
	-moz-box-shadow: 0 -5px 10px rgba(0,0,0,0.6),0 15px 0 rgba(0,0,0,0.0);
	box-shadow: 0 -5px 10px rgba(0,0,0,0.6),0 15px 0 rgba(0,0,0,0.0); 
}
/*footer.entry-meta {background:#eee; padding:0.2em; margin:1em 0;}*/

#menu-footermenue {padding:0;}
#menu-footermenue li {display: inline; list-style: none; margin-right:1em;}
#menu-footermenue li a {color:#fff; }
#menu-footermenue li a:hover {color:#fff; }

/* Clearfix Hack, e.g.: against <p>'s margin that flows out of  header and footer*/
.clearfix::after, .clearfix::before {
	content: "";
	clear: both;
	display: table;
  }

  /* Sidebar neben Main */
  @media screen and (min-width: 768px) {
    .mainwrapper {display:flex;}
	main {width:68%; margin-right:2%;}
	aside {width:30%;}
  }

  /***********
 * Hauptmenü *
 ************/

nav.navbar {background: #fff; border-top:1px solid #ddd; padding: 0.9em; border-bottom: 5px solid var(--primary); justify-content: center;}
.hauptmenue {
	max-width:1140px;
	width:100%; 
	margin:0 auto;
	justify-content: center;
	padding:0;
}

.hauptmenue a {text-decoration: none;}

.scrolled .mainwrapper.hauptmenue {display: block;}
.navbar-collapse {flex-grow: 0;}

nav ul#menu-hauptmenue {padding: 0; margin-bottom:0; float:right;}
@media (max-width: 991px) {
	.mainwrapper.hauptmenue {display: block;}
	nav ul#menu-hauptmenue li {list-style: none; padding:1em 0; text-align:center; border-bottom:1px solid #ddd;}
}
@media (min-width: 992px) {
	 nav ul li {list-style: none; display: inline; margin-right:1.5em;}
}
nav ul li:last-child {margin-right: 0; border:none;}


nav ul#menu-hauptmenue li a {
	text-transform: uppercase;
	color:var(--text);
	font-weight: 700;
	padding: 0.9em;
}

nav ul#menu-hauptmenue li.current_page_item a {font-weight: bold; color: var(--primary); border-bottom:5px solid #e9e9e9;}

nav.navbar.scrolled {
	position:fixed; 
	top:0;
	background:#fff;
	width:100%;
	z-index: 999;
}
.fixed-menu-image {display:none; float:left;}
.scrolled .fixed-menu-image {display: block;}
.scrolled .fixed-menu-image img {height: 50px; margin: -10px 4em -10px 0;}
.scrolled div.navbar-nav {padding:0 1em; margin-top: 8px;}

nav ul#menu-hauptmenue li a:hover {text-decoration: none;}

.navbar-toggler {border: 2px solid var(--primary); float:right; color:black;}
button.navbar-toggler::after {content:""; clear:both;}
.navbar-toggler-icon {background-image: url(res/img/nav-bar.svg);}

@media (max-width: 991px) {
	.fixed-menu-image {display: block;}
	.fixed-menu-image img {height: 50px; margin: -10px 4em -10px 0;}

	div.navbar-nav {padding:0 1em;}
	nav.navbar {
		position:fixed; 
		top:0;
		background:#fff;
		width:100%;
		z-index: 999;
	}
	body {padding-top:30px;}
	header .jagi-logo {display:none;}
	header .site-logo {text-align: center; margin-right:0;}
	.navbar-collapse {clear:both;}
}	

  /************
 * Kommentare *
 *************/
 #comments ul {padding:0;}
 #comments ul li {list-style: none; margin-top:1em;}
 #comments ul li ul {padding-left:3em;}


/*************************
* Typografie und Content *
*************************/
h1, h2, h3 {color: var(--primary);}

h1 {margin-top:.2em; margin-bottom: 0.66em;}
h2 {font-size: 2rem; margin-top:1em;}
h3 {font-size: 1.33rem; margin-top:1.2em;}
h4 {font-size:1.15rem; margin-top:1.2em;}

@media screen and (max-width: 768px) {
	h1 {font-size: 2rem;}
	h2 {font-size: 1.6rem;}
}


a {text-decoration: underline;}
a:hover {text-decoration: none;}

a, a:hover, a:focus, a:visited, a:active, ul#menu-hauptmenue li a:active, ul#menu-hauptmenue li a:hover {
	color: var(--primary);	
}

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

.full-width main {width:100%}
.full-width h1 {margin:2em auto 1em auto; padding: 0 1em; max-width: 1140px; text-align: center;}

.full-width .wp-block-columns {align-items: center;}
.full-width .wp-block-columns.col-reverse {flex-direction: row-reverse;}

.full-width .wp-block-column h2,
.full-width .wp-block-column p  {
	max-width: 600px;
	margin:auto;
	margin-bottom:0.5em;
}
.full-width .wp-block-column,
.full-width .wp-block-cover {margin-bottom:0; }
.full-width .wp-block-column {flex-basis:50%;}
.full-width .wp-block-column:not(:first-child) {margin-left:0; padding: 2.5em;}

@media (max-width: 991px) {
	.wp-block-columns {flex-wrap:wrap;}
	.wp-block-column {flex-basis:100%; margin-left:0 !important;}
}
@media (min-width: 992px) {
	.wp-block-cover, .wp-block-cover-image {min-height:520px; }
}
.mainwrapper .wp-block-cover {left:0; right:0; position: absolute; height:350px; min-height: 200px;}
.mainwrapper .wp-block-cover::after {margin-top: 350px;}
.page-template-page-full-width .wp-block-cover { border-top: 10px solid white; border-bottom: 10px solid white;}
.page-template-page-full-width .wp-block-columns .wp-block-cover {border:0;}

/* Alignwide und Full Platzhalter Start */

.alignwide,
.alignfull {
	margin: 32px calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

@media (max-width: 920px) {
	.alignwide {
		margin: 32px calc( ( 767px - 920px ) / 2 );
		max-width: 920px;
		width: 920px;
	}
}

/* Alignwide und Full Platzhalter ende */


aside h4 {font-weight:600; margin-bottom: 0.2em;}
aside h4:first-of-type {margin-top:0;}
aside img {width:100%;}

input, textarea, select { border: 1px solid #ced4da; border-radius: .25rem; padding: 0.5em; width:100%; margin-bottom: 0.5em;}
input[type=checkbox] {width:1em;}
label {margin:0}
.wpcf7-list-item {margin: 0 0 0.8em 0;}

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
		cursor:default;
		text-decoration: none;
    }
}

.has-large-font-size { font-size: 2em; line-height: 1.2em;}

p.mainwrapper {padding: 0 2.5em 0 2.5em;}

hr {margin-top: 2.5em;}

iframe {min-width:100px; max-width:100%;}

/******************
* Utility Classes *
******************/
.c30-70 .wp-block-column:first-of-type {flex-basis: calc(30% - 16px);}
.c30-70 .wp-block-column:last-of-type {flex-basis: calc(70% - 16px);}

.c70-30 .wp-block-column:first-of-type {flex-basis: calc(70% - 16px);}
.c70-30 .wp-block-column:last-of-type {flex-basis: calc(30% - 16px);}

.c33-66 .wp-block-column:first-of-type {flex-basis: calc(34% - 16px);}
.c33-66 .wp-block-column:last-of-type {flex-basis: calc(66% - 16px);}

.c66-33 .wp-block-column:first-of-type {flex-basis: calc(66% - 16px);}
.c66-33 .wp-block-column:last-of-type {flex-basis: calc(34% - 16px);}

:root {
	--primary: #116040;
	--primary-dark: #116040;
	--secondary: #ffff00;
	--text: #212529;
}