/*
Theme Name: Games Garden
Theme URI: https://www.gamesgarden.de
Author: Games Garden / Digitex Technologies
Author URI: https://www.gamesgarden.de
Description: Modernes Full Site Editing Block-Theme für Games Garden — Nürnbergs Videospiel-Store. Dreifarbiges Brand-Design mit Blau, Orange und Gold auf weißem Hintergrund. Basiert auf der Twenty Twenty-Five FSE-Architektur.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamesgarden
Tags: blog, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-themes, wide-blocks, block-patterns, full-site-editing, translation-ready
*/

/* ===========================================================
   Games Garden FSE Theme — Full Visual Styles
   Brand colors: Blue #2B7EC2 · Orange #E8611A · Gold #F5C518
   =========================================================== */

html { scroll-behavior: smooth; }

/* =========================
   TRICOLOR ACCENT BAR
   ========================= */
.gg-tricolor-bar {
	height: 3px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--orange) 50%,
		var(--wp--preset--color--accent) 100%
	);
}

/* =========================
   HEADER
   ========================= */
.site-header .wp-block-site-logo img {
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
	transition: transform .3s ease;
}
.site-header .wp-block-site-logo img:hover {
	transform: scale(1.05);
}

.wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--orange) !important;
}

/* =========================
   HERO SECTION (.gg-hero)
   ========================= */
.gg-hero {
	position: relative;
	overflow: hidden;
}
/* Blue-to-orange gradient overlay via pseudo-element */
.gg-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(105deg,
		rgba(26,90,143,.93) 0%,
		rgba(43,126,194,.8) 35%,
		rgba(232,97,26,.55) 70%,
		rgba(232,97,26,.2) 100%
	);
	pointer-events: none;
}
/* Ensure inner content is above overlay */
.gg-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
/* Subtle radial glow */
.gg-hero::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -15%;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245,197,24,.12) 0%, transparent 70%);
	pointer-events: none;
	z-index: 1;
}
/* Fade-up animation for hero content */
.gg-hero .wp-block-cover__inner-container > .wp-block-group > * {
	animation: gg-fadeUp .8s ease-out both;
}
.gg-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(1) { animation-delay: 0s; }
.gg-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(2) { animation-delay: .1s; }
.gg-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(3) { animation-delay: .2s; }
.gg-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(4) { animation-delay: .3s; }
/* Remove the generic heading underline in hero */
.gg-hero .wp-block-heading::after { display: none; }

/* =========================
   BUTTONS — hover lift + shadow
   ========================= */
.wp-block-button__link {
	transition: all .3s ease !important;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
}
.wp-block-button .has-orange-background-color:hover {
	box-shadow: 0 6px 20px rgba(232,97,26,.35);
}
.wp-block-button .has-accent-background-color:hover {
	box-shadow: 0 6px 20px rgba(245,197,24,.35);
}
.wp-block-button .has-base-background-color:hover {
	box-shadow: 0 6px 20px rgba(255,255,255,.25);
}
.wp-block-button .has-primary-background-color:hover {
	box-shadow: 0 6px 20px rgba(43,126,194,.3);
}

/* Outline orange */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--base);
}

/* Accent gold */
.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-dark);
}

/* =========================
   SECTION HEADERS
   ========================= */
.gg-section-header {
	text-align: center;
	margin-bottom: 3rem;
}

/* =========================
   FEATURE CARDS (.gg-features)
   ========================= */
.gg-features .wp-block-column > .wp-block-group {
	transition: all .4s ease;
	position: relative;
	overflow: hidden;
}
.gg-features .wp-block-column > .wp-block-group::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	transform: scaleX(0);
	transition: transform .4s ease;
	border-radius: 16px 16px 0 0;
}
.gg-features .wp-block-column > .wp-block-group:hover::before {
	transform: scaleX(1);
}
.gg-features .wp-block-column > .wp-block-group:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
/* Blue card top border */
.gg-features .wp-block-column:nth-child(1) > .wp-block-group::before {
	background: var(--wp--preset--color--primary);
}
/* Orange card top border */
.gg-features .wp-block-column:nth-child(2) > .wp-block-group::before {
	background: var(--wp--preset--color--orange);
}
/* Gold card top border */
.gg-features .wp-block-column:nth-child(3) > .wp-block-group::before {
	background: var(--wp--preset--color--accent);
}

/* =========================
   STORE GALLERY (.gg-gallery)
   ========================= */
/* Orange underline under section title */
.gg-gallery > .gg-section-header .wp-block-heading::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background: var(--wp--preset--color--orange);
	margin: .6rem auto 0;
	border-radius: 2px;
}

.gg-gallery .wp-block-gallery {
	gap: 1rem !important;
}
.gg-gallery .wp-block-image {
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.gg-gallery .wp-block-image img {
	transition: transform .6s cubic-bezier(.22,1,.36,1) !important;
	border-radius: 10px;
}
.gg-gallery .wp-block-image:hover img {
	transform: scale(1.05);
	filter: none;
}
/* Orange gradient overlay on hover */
.gg-gallery .wp-block-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(232,97,26,.45) 0%, transparent 50%);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
	border-radius: 10px;
}
.gg-gallery .wp-block-image:hover::after {
	opacity: 1;
}
/* Orange corner triangle on hover */
.gg-gallery .wp-block-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	z-index: 2;
	background: linear-gradient(135deg, var(--wp--preset--color--orange) 0%, var(--wp--preset--color--orange) 40%, transparent 41%);
	opacity: 0;
	transition: opacity .4s ease;
	border-radius: 10px 0 0 0;
}
.gg-gallery .wp-block-image:hover::before {
	opacity: .8;
}
/* Caption styling */
.gg-gallery .wp-block-image figcaption {
	position: absolute;
	bottom: .8rem;
	left: .8rem;
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	opacity: 0;
	transform: translateY(8px);
	transition: all .4s ease;
	text-shadow: 0 1px 4px rgba(0,0,0,.5);
	z-index: 3;
	background: none;
	padding: 0;
	margin: 0;
}
.gg-gallery .wp-block-image:hover figcaption {
	opacity: 1;
	transform: translateY(0);
}

/* =========================
   LATEST GAMES (.gg-games)
   ========================= */
.gg-games .wp-block-post {
	transition: all .4s ease;
	border-radius: 10px;
	overflow: hidden;
}
.gg-games .wp-block-post:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.gg-games .wp-block-post-featured-image {
	overflow: hidden;
}
.gg-games .wp-block-post-featured-image img {
	transition: transform .5s ease;
}
.gg-games .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* =========================
   CTA SECTION (.gg-cta)
   ========================= */
.gg-cta {
	position: relative;
	overflow: hidden;
}
.gg-cta::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245,197,24,.12) 0%, transparent 70%);
	pointer-events: none;
}
.gg-cta::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
	pointer-events: none;
}
.gg-cta > * {
	position: relative;
	z-index: 1;
}

/* =========================
   STORE INFO (.gg-store-info)
   ========================= */
.gg-store-info iframe {
	border-radius: 10px;
}
.gg-store-info .wp-block-column:last-child > .wp-block-group {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* =========================
   FOOTER
   ========================= */
.site-footer {
	position: relative;
}
/* Tricolor top border */
.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--orange) 50%,
		var(--wp--preset--color--accent) 100%
	);
}
.site-footer a {
	transition: all .25s ease;
}
.site-footer .wp-block-navigation-link a:hover {
	padding-left: 4px;
}

/* =========================
   GENERAL IMAGE ROUNDING
   ========================= */
.wp-block-image img {
	border-radius: 8px;
}

/* =========================
   SCROLL FADE-IN ANIMATION
   ========================= */
@keyframes gg-fadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}

/* For JS-triggered animations */
.gg-animate {
	opacity: 0;
	transform: translateY(25px);
	transition: all .7s cubic-bezier(.22,1,.36,1);
}
.gg-animate.gg-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 768px) {
	.wp-site-blocks { padding-top: 0 !important; }

	/* Stack gallery */
	.gg-gallery .wp-block-gallery {
		columns: 1 !important;
	}
}