/**
 * Screen Stylesheet.
 *
 * Implements default styling for all media on the "Spirit of Football Denmark" website.
 *
 * @package The_Ball_v2_Denmark
 */


/*--------------------------------------------------------------
## General style overrides
--------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

#primary .entry-header h1,
#primary .entry-header h2 {
	text-transform: none;
}

#primary .entry-content h2 {
	font-size: 2rem;
}



/*--------------------------------------------------------------
## Header style overrides
--------------------------------------------------------------*/

#primary .has-post-thumbnail .entry-header h1,
#primary .has-post-thumbnail .entry-header h2 {
	font-family: serif;
	color: var(--sof-color-sand);
	padding: 2.9em 0.5em 1.9em 0.5em;
/* 	text-shadow: 0 0 10px rgb(10 9 52 / 75%); */
}



/*--------------------------------------------------------------
## Footer style overrides
--------------------------------------------------------------*/

.site-info {
	margin-top: 1.5em;
}

.site-info p {
	margin: 0.5em;
}



/*--------------------------------------------------------------
## Homepage style overrides
--------------------------------------------------------------*/

/* Show site tagline on homepage. */
.home .feature-image-caption {
	text-shadow: 0 0 10px #0a0933;
}



/*--------------------------------------------------------------
## Animations
--------------------------------------------------------------*/

.fade-in {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
	opacity: 1;
	transform: none;
}




/*--------------------------------------------------------------
## Ball Stats child blocks
--------------------------------------------------------------*/

#primary .hentry .entry-content .ball-stat {
	background: var(--sof-ball-stat-bg-color);
	border: 1px solid var(--sof-ball-stat-bg-color);
	border-radius: 0.5rem;
	padding: 1.25rem;
}

#primary .hentry .entry-content .ball-stat h2 {
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1;
	margin: 0;
}

#primary .hentry .entry-content .ball-stat p {
	font-size: 0.9rem;
	color: var(--sof-ball-stat-text-color);
	margin: 0;
	margin-top: 0.2rem;
}



/*--------------------------------------------------------------
## Common Loop styles
--------------------------------------------------------------*/

.loop-include .loop-include-header {
	text-align: left;
	text-transform: none;
}

.loop-include .loop-include-header div {
	margin-right: 50%;
}

.loop-include h3.loop-include-title {
	text-transform: uppercase;
	font-size: 0.8rem;
	margin-top: 3rem;
	margin-bottom: 0.5rem;
	color: var(--sof-color-lime);
}

.loop-include h3.loop-include-title::before {
	content: '';
	display: inline-block;
	width: 1.5rem;
	height: 1.5px;
	background: var(--sof-color-lime);
	margin-right: 0.5rem;
	vertical-align: middle;
}

.loop-include h2.loop-include-title {
	font-family: var(--sof-text-heading-font);
	font-size: 2rem;
	color: var(--sof-text-heading);
	margin-top: 0;
	margin-bottom: 0;
}

.loop-include .loop-include-header p {
	margin-top: 0.2rem;
	font-size: 1.1rem;
}

/* Loop posts container. */
.loop-include .loop-include-posts {
	margin: 2rem 0 3.5rem;
}

/* Loop posts counter. */
.loop-include .loop-step-num {
	width: 2.4rem;
	height: 2.4rem;
	background: var(--sof-color-lime);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: serif;
	font-size: 1.15rem;
	font-weight: 900;
	color: var(--sof-color-forest);
	margin-bottom: 1.4rem;
}





/*--------------------------------------------------------------
## Missions Loop styles
--------------------------------------------------------------*/

#missions {
	background-color: var(--sof-mission-card-container-bg-color);
}

/* Loop post. */
#missions.loop-include .hentry {
	background-color: var(--sof-mission-card-bg-color);
	border-radius: 0.6rem;
	overflow: hidden;
	border: 1px solid var(--sof-mission-card-border-color);
	padding: 1.5rem;
}

#missions.loop-include .entry-content {
	margin: 0;
	padding: 1rem;
	padding-top: 0.5rem;
}

#missions.loop-include .entry-content h3 {
	margin: 0;
	font-size: 1.4rem;
}

#missions.loop-include .entry-content h3 a {
	color: var(--sof-mission-card-heading-color);
	text-decoration: none;
}

#missions.loop-include .entry-content p {
	margin: 0;
	margin-top: 0.5rem;
}

#missions.loop-include .entry-content .loop-page-subheading p {
	color: var(--sof-mission-card-subheading-color);
	font-size: 0.9rem;
	font-style: italic;
	margin-bottom: 1.2rem;
}

#missions.loop-include .entry-content .loop-page-sub-excerpt p {
	color: var(--sof-mission-card-subheading-color);
	font-size: 0.9rem;
	font-style: italic;
}



/*--------------------------------------------------------------
## Activities Loop styles
--------------------------------------------------------------*/

#activities {
	background-color: var(--sof-activity-card-container-bg-color);
}

/* Loop post. */
#activities.loop-include .hentry {
	border-radius: 0.6rem;
	overflow: hidden;
	border: 1px solid var(--sof-activity-card-border-color);
	background-color: var(--sof-activity-card-bg-color);
}

#activities.loop-include .activity-feature-image a {
	line-height: 0;
	display: block;
}

#activities.loop-include .entry-content {
	margin: 0;
	padding: 1rem;
	padding-top: 0.5rem;
}

#activities.loop-include .entry-content h3 {
	margin: 0;
	font-size: 1.4rem;
}

#activities.loop-include .entry-content h3 a {
	color: var(--sof-activity-card-heading-color);
	text-decoration: none;
}

#activities.loop-include .entry-content p {
	margin: 0;
	margin-top: 0.5rem;
}



/*--------------------------------------------------------------
## Methods Loop styles
--------------------------------------------------------------*/

#methods {
	background-color: var(--sof-method-card-container-bg-color);
}

/* Loop post. */
#methods.loop-include .hentry {
	background-color: var(--sof-method-card-bg-color);
	border-radius: 0.6rem;
	overflow: hidden;
	border: 1px solid var(--sof-method-card-border-color);
	padding: 1.5rem;
}

#methods.loop-include .entry-content {
	margin: 0;
	padding: 1rem;
	padding-top: 0.5rem;
}

#methods.loop-include .entry-content h3 {
	margin: 0;
	font-size: 1.4rem;
}

#methods.loop-include .entry-content h3 a {
	color: var(--sof-method-card-heading-color);
	text-decoration: none;
}

#methods.loop-include .entry-content p {
	margin: 0;
	margin-top: 0.5rem;
}

#methods.loop-include .entry-content .loop-page-subheading p {
	color: var(--sof-method-card-subheading-color);
	font-size: 0.9rem;
	font-style: italic;
	margin-bottom: 1.2rem;
}

#methods.loop-include .entry-content .loop-page-sub-excerpt p {
	color: var(--sof-method-card-subheading-color);
	font-size: 0.9rem;
	font-style: italic;
}



/*--------------------------------------------------------------
## Gateways Loop styles
--------------------------------------------------------------*/

#gateways {
	background-color: var(--sof-gateway-card-container-bg-color);
}

/* Loop post. */
#gateways.loop-include .hentry {
	background-color: var(--sof-gateway-card-bg-color);
	border-radius: 0.6rem;
	overflow: hidden;
	border: 1px solid var(--sof-gateway-card-border-color);
	padding: 1.5rem;
}

#gateways.loop-include .entry-content {
	margin: 0;
	padding: 1rem;
	padding-top: 0.5rem;
}

#gateways.loop-include .entry-content h3 {
	margin: 0;
	font-size: 1.4rem;
}

#gateways.loop-include .entry-content h3 a {
	color: var(--sof-gateway-card-heading-color);
	text-decoration: none;
}

#gateways.loop-include .entry-content p {
	margin: 0;
	margin-top: 0.5rem;
}

#gateways.loop-include .entry-content .loop-page-subheading p {
	color: var(--sof-gateway-card-subheading-color);
	font-size: 0.9rem;
	font-style: italic;
	margin-bottom: 1.2rem;
}

#gateways.loop-include .entry-content .loop-page-sub-excerpt p {
	color: var(--sof-gateway-card-subheading-color);
	font-size: 0.9rem;
	font-style: italic;
}



/*--------------------------------------------------------------
## SOF Organisations Loop styles
--------------------------------------------------------------*/

#sof-orgs {
	background-color: var(--sof-sof-org-card-container-bg-color);
}

/* Loop post. */
#sof-orgs.loop-include .hentry {
	border-radius: 0.6rem;
	overflow: hidden;
	border: 1px solid var(--sof-sof-org-card-border-color);
	background-color: var(--sof-sof-org-card-bg-color);
}

#sof-orgs.loop-include .sof-org-feature-image {
	line-height: 0;
	display: block;
}

#sof-orgs.loop-include .sof-org-feature-image a {
	line-height: 0;
	display: block;
}

#sof-orgs.loop-include .sof-org-feature-image .country-flag {
	width: 25%;
	margin: 1em;
}

#sof-orgs.loop-include .entry-content {
	margin: 0;
	padding: 1rem;
	padding-top: 0.5rem;
}

#sof-orgs.loop-include .entry-content h3 {
	margin: 0;
	font-size: 1.4rem;
}

#sof-orgs.loop-include .entry-content h3 a {
	color: var(--sof-sof-org-card-heading-color);
	text-decoration: none;
}

#sof-orgs.loop-include .entry-content p {
	margin: 0;
	margin-top: 0.5rem;
	font-size: 0.9rem;
}



/*--------------------------------------------------------------
## Page as Include common styles
--------------------------------------------------------------*/

.entry-content h3.include-eyebrow-title {
	text-transform: uppercase;
	font-size: 0.8rem;
	margin-top: 3rem;
	margin-bottom: 0.5rem;
	color: var(--sof-color-lime);
	font-family: sans-serif;
}

.entry-content h3.include-eyebrow-title::before {
	content: '';
	display: inline-block;
	width: 1.5rem;
	height: 1.5px;
	background: var(--sof-color-lime);
	margin-right: 0.5rem;
	vertical-align: middle;
}



/*--------------------------------------------------------------
## Contact page as Include styles
--------------------------------------------------------------*/

#sof-contact {
	background-color: var(--sof-contact-card-container-bg-color);
	--sof-logo-svg-color: var(--sof-color-lime);
}

#sof-contact .contact-feature-image {
	margin-top: 2rem;
}

#sof-contact .entry-content h3.include-eyebrow-title {
	margin-top: 1rem;
}

/* Item post. */
#sof-contact .hentry {
	background-color: transparent;
	text-align: center;
}

/* SOF logo. */
#sof-contact .contact-feature-image .sof-logo-svg {
	width: 6rem;
	height: 6rem;
}


#sof-contact .entry-content {
	width: 60%;
	margin: 1rem auto;
	padding: 1rem;
	padding-top: 0.5rem;
}

#sof-contact .entry-content h2 {
	font-size: 2rem;
	color: var(--sof-contact-card-heading-color);
	margin-top: 0;
	margin-bottom: 0;
}

#sof-contact .entry-content p {
	margin: 0;
	margin-top: 0.5rem;
}

#sof-contact .entry-content form {
	margin: 1rem 0;
	padding: 1rem;
	text-align: left;
    border-radius: 0.6rem;
    overflow: hidden;
    border: 1px solid var(--sof-contact-form-border-color);
    background-color: var(--sof-contact-form-bg-color);
	--jetpack--contact-form--error-color: #ff4848;
	--jetpack--contact-form--input-height: 45px;
}

#sof-contact .entry-content form.contact-form .grunion-field {
    background-color: var(--sof-color-charcoal);
    color: var(--sof-color-offwhite);
    padding: 8px;
}

#sof-contact .entry-content form.contact-form textarea.grunion-field {
    padding: 8px;
}

#sof-contact .entry-content form.contact-form button {
	margin: 0.5rem 0;
	text-shadow: none;
    background-color: var(--sof-color-grass);
}

#sof-contact .entry-content form.contact-form button:hover {
    background-color: var(--sof-color-bright);
    box-shadow: none;
}



/*--------------------------------------------------------------
## People page style overrides
--------------------------------------------------------------*/

.page-template-page-people .loop-include-header h2 {
	margin-bottom: 0;
}

.loop-include-header .category-archive-meta p {
	text-transform: none;
	margin-top: 0;
}



/*--------------------------------------------------------------
## Individuals style overrides
--------------------------------------------------------------*/

#individuals-vorstand {
	background-color: var(--sof-background-people-vorstand);
}

#individuals-staff {
	background-color: var(--sof-background-people-staff);
}

#individuals-team {
	background-color: var(--sof-background-people-team);
}

#individuals-alumni {
	background-color: var(--sof-background-people-supporters);
}

.individual .entry-title {
	text-transform: none;
	margin-bottom: 0;
}

.individual .individual-job-title {
	text-transform: none;
	font-size: 1rem;
	word-break: break-word;
}



/*--------------------------------------------------------------
## Partner style overrides
--------------------------------------------------------------*/

#organisations-partners-erfurt {
	background-color: var(--sof-background-people-vorstand);
}

#organisations-partners-germany {
	background-color: var(--sof-background-people-staff);
/* 	background-color: #43939d; */
}

#organisations-partners-world {
	background-color: var(--sof-background-people-team);
}



/*--------------------------------------------------------------
## Awards Common
--------------------------------------------------------------*/

#awards {
	background-color: var(--sof-background);
}

.page-template-page-awards .loop-include-header {
	display: none;
}

/* Layout */
.award .entry-title
{
	text-align: center;
	margin: 0 0.5em 1em;
	text-transform: none;
	font-size: 150%;
	line-height: 1.3;
}

.loop-include-two .award .entry-title
{
	font-size: 150%;
}

.loop-include-three .award .entry-title
{
	font-size: 140%;
}

.loop-include-four .award .entry-title
{
	font-size: 130%;
}

.loop-include-five .award .entry-title
{
	font-size: 120%;
}

@media all and (max-width: 640px) {
	.loop-include-two .award .entry-title
	{
		font-size: 120%;
	}

	.loop-include-three .award .entry-title
	{
		font-size: 110%;
	}

	.loop-include-four .award .entry-title
	{
		font-size: 100%;
	}

	.loop-include-five .award .entry-title
	{
		font-size: 90%;
	}

}

.award .entry-title a
{
	text-decoration: none;
}

#footer-awards .entry-title
{
	display: none;
}



/*--------------------------------------------------------------
## Single Award
--------------------------------------------------------------*/

.single-award .site-main
{
	background-color: var(--sof-background);
	color: var(--sof-text-content);
}

.single-award .site-main .hentry
{
	margin: 0;
}

.single-award #primary .entry-content,
{
	margin: 2em auto;
}

.award-logo,
.award-website,
.award-social-links
{
	text-align: center;
}

.single-award .award-badge
{
	margin: 2em 0;
}

.award-website
{
	margin-bottom: 1em;
}



/*--------------------------------------------------------------
## Calendar modifications
--------------------------------------------------------------*/

.entry-content .eo-fullcalendar .fc-view > table > thead,
.entry-content .eo-fullcalendar .fc-view > table > tbody {
	background: none;
}

.entry-content .eo-fullcalendar-reset.fc-unthemed .fc-today {
	background: var(--sof-green-bright);
}

.entry-content .eo-fullcalendar .fc-view-container {
	border-bottom: 1px solid var(--sof-calendar-border);
}

.entry-content .eo-fullcalendar table th,
.entry-content .eo-fullcalendar table td {
	border-top: 1px solid var(--sof-calendar-border);
	border-left: 1px solid var(--sof-calendar-border);
	border-right: 1px solid var(--sof-calendar-border);
}

.entry-content .eo-fullcalendar table th {
	text-align: center;
}

.entry-content .eo-fullcalendar .fc-view > table > thead {
	background: var(--sof-calendar-header);
}

.entry-content .fc-view,
.entry-content .fc-view > table {
	z-index: unset;
}

.entry-content .eo-fullcalendar-loading {
	background: var(--sof-background);
	min-width: 30em;
}