/*
Theme Name: AAS GGS
Theme URI: https://www.amadeu-antonio-stiftung.de/
Description: Child theme of the AAS theme, customized for the "Good Gaming Support" project.
Author: Palasthotel (Jana Eggebrecht)
Author URI: https://www.palasthotel.de
Template: aas
Version: 1.0.0
Text Domain: aas-ggs
*/

/* ==========================================================================
   1. Custom Properties
   ========================================================================== */

:root {
	--color-ggs: #e6007e;
	--color-aas: #5ea62b;
	--sticky-header-height: 50px;
	--sticky-header-height--expanded: 106px;
}

/* ==========================================================================
   2. General Typography & Links
   ========================================================================== */

.text-primary,
a {
	color: var(--color-ggs);
}

a:where(:not(.wp-element-button)) {
	&:hover {
		text-decoration: none;
	}
}

.text-grey {
	color: black;
}

h2.wp-block-heading {
	color: var(--color-ggs);
	border-color: currentColor;
}

/* ==========================================================================
   3. Sticky Header
   ========================================================================== */

.ggs-sticky-header {
	min-height: var(--sticky-header-height);
	top: var(--wp-admin--admin-bar--height, 0px);

	& .ggs-sticky-header__arrow {
		transition: transform 0.3s ease-in-out;
		transform: translateX(-50%);
		transform-origin: center;
		left: 50%;
		bottom: -22px;
	}

	& #ggs-sticky-header-content {
		max-height: 0;
		transition:
			max-height 0.3s ease-in-out,
			visibility 0.5s ease-in-out;
		overflow: hidden;
		visibility: hidden;
	}
}

.ggs-sticky-header--expanded {
	min-height: var(--sticky-header-height--expanded);

	& .ggs-sticky-header__arrow {
		transform: translateX(-50%) rotate(180deg);
	}

	& #ggs-sticky-header-content {
		max-height: var(--sticky-header-height--expanded);
		visibility: visible;
	}
}

/* ==========================================================================
   4. Site Header (#masthead)
   ========================================================================== */

#masthead {
	top: calc(var(--sticky-header-height) + 10px + var(--wp-admin--admin-bar--height, 0px));
	transition: top 0.3s ease-in-out;

	@media (min-width: 768px) {
		padding-top: calc(var(--sticky-header-height) + 10px);
		top: auto;
	}
}

.ggs-sticky-header-isexpanded {
	#masthead {
		top: calc(
			var(--sticky-header-height--expanded) + 10px + var(--wp-admin--admin-bar--height, 0px)
		);

		@media (min-width: 768px) {
			padding-top: calc(var(--sticky-header-height--expanded) + 10px);
			top: auto;
		}
	}
}

/* ==========================================================================
   5. Navigation
   ========================================================================== */

/* --- Header Menu --- */

#menu-header {
	& li a {
		color: black;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 0.003em;

		&:hover,
		&:focus {
			color: var(--color-ggs);
		}
	}

	& .current {
		&::after {
			content: '';
			display: block;
			width: 90%;
			height: 3px;
			background-color: black;
			margin-inline: auto;
			transition: width 0.3s ease-in-out;
		}

		&:hover {
			&::after {
				width: 100%;
			}
		}
	}
}

/* --- Footer Menu --- */

#menu-footer {
	& .current {
		font-weight: bold;
	}
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

button {
	border-color: var(--color-ggs);

	&:hover {
		background-color: white;
		color: var(--color-ggs);
	}
}

.btn-normal {
	border-color: black;
	color: var(--color-ggs);
	position: relative;
	z-index: 10;
	background-color: white;

	&:hover,
	&:focus {
		background-color: black;
		color: white;
	}

	&::after {
		content: '';
		position: absolute;
		z-index: 0;
		top: -15px;
		right: -15px;
		width: 100%;
		height: 100%;
		border-top: 10px solid black;
		border-right: 10px solid black;
	}
}

.btn-inverted {
	&:hover {
		color: var(--color-ggs);
	}
}

[type='submit'] {
	border-color: var(--color-ggs);
	color: var(--color-ggs);
	background-color: white;
	padding: 0.5rem 4rem;
	line-height: 1.7;

	&:hover,
	&:focus {
		background-color: var(--color-ggs);
		color: white;
	}
}

/* ==========================================================================
   7. Forms & Inputs
   ========================================================================== */

[type='text'],
[type='password'],
[type='url'],
[type='email'],
[type='tel'],
[type='search'],
[type='number'],
[type='date'],
[type='month'],
[type='week'],
[type='datetime'],
[type='datetime-local'],
[type='time'],
[type='file'],
textarea,
select {
	max-width: 100%;
}

[type='text']:not([readonly]):focus,
[type='password']:not([readonly]):focus,
[type='url']:not([readonly]):focus,
[type='email']:not([readonly]):focus,
[type='tel']:not([readonly]):focus,
[type='search']:not([readonly]):focus,
[type='number']:not([readonly]):focus,
[type='date']:not([readonly]):focus,
[type='month']:not([readonly]):focus,
[type='week']:not([readonly]):focus,
[type='datetime']:not([readonly]):focus,
[type='datetime-local']:not([readonly]):focus,
[type='time']:not([readonly]):focus,
[type='file']:not([readonly]):focus,
textarea:not([readonly]):focus,
select:not([readonly]):focus {
	border-color: var(--color-ggs);
}

.search-form {
	& button {
		&:hover,
		&:focus {
			background-color: transparent;
			color: var(--color-ggs);
		}

		& svg {
			padding: 0;
		}
	}
}

/* ==========================================================================
   8. Background & Border Utilities
   ========================================================================== */

.bg-primary {
	background-color: var(--color-ggs);
}

.bg-ggs {
	background-color: var(--color-ggs);
}

.bg-green {
	background-color: var(--color-aas);

	& *:not(.btn) {
		color: white;
		border-color: white;
	}
}

.bg-black {
	& *:not(.btn) {
		color: white;
		border-color: white;
	}
}

.border-primary {
	border-color: var(--color-ggs);
}

/* ==========================================================================
   9. Lists
   ========================================================================== */

ul:not(.list-reset) {
	list-style-image: none;
	list-style-type: square;

	& li {
		&::before,
		&::marker {
			color: var(--color-ggs);
		}
	}
}
ol:not(.list-reset) {
	& li {
		&::before,
		&::marker {
			color: var(--color-ggs);
		}
	}
}

/* ==========================================================================
   10. Misc Components
   ========================================================================== */
.brlbs-cmpnt-cb-description,
.brlbs-cmpnt-cb-description > * {
	color: black !important;
}

.ph-social-sharing-button--print {
	border: 3px solid #4a4a4a;
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;

	&:hover {
		background-color: white;
		color: #4a4a4a;
	}
}

.pagination {
	display: flex;
	gap: 10px;
	justify-content: center;

	& .prev {
		padding-inline-end: 10px;
	}

	& .next {
		padding-inline-start: 10px;
	}
}

.aas-accordion {
	margin-bottom: 0.4em;

	& .aas-accordion__title {
		display: list-item;
		background: var(--color-ggs);
		padding: 10px 12px 10px 18px;
		cursor: pointer;
		color: white;
	}

	& .aas-accordion__body {
		padding: 12px;
		border: 2px solid var(--color-ggs);
		border-top: 0;
	}

	& details[open] summary ~ * {
		animation: accordionopen 0.5s ease-in-out;
	}
}
@keyframes accordionopen {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* ==========================================================================
   10. WP Blocks
   ========================================================================== */
.wp-block-post-author {
	font-size: 0.875rem;
	color: #9b9b9b;
	gap: 10px;

	& p {
		margin: 0 !important;
		font-size: 0.875rem !important;
	}
}

.wp-block-post-terms {
	font-size: 0.875rem;
	color: #9b9b9b;
}

.gutenburger .borlabs-cookie-open-dialog-preferences {
	max-width: 60rem;
	margin-inline: auto;
	display: block;
}

.entry-content .wp-block-quote p,
.entry-content .wp-block-pullquote p {
	color:var(--color-ggs);
}