/*
Theme Name: Pitch Perfect
Theme URI: https://example.com/pitch-perfect
Author: Steinsiek Media
Author URI: https://example.com
Description: Ein Premium-Theme für Fußball-Fotografie, basierend auf der Pitch Perfect Webseite.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pitch-perfect
Tags: football, photography, portfolio, responsive, modern
*/

/* 
Hinweis: Die meisten Styles werden über Tailwind CSS geladen.
Hier sind nur zusätzliche Styles, die nicht durch Tailwind abgedeckt werden.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--wp-pp-primary);
    color: var(--wp-pp-light);
}

.hero-gradient {
    background: linear-gradient(to right, rgba(5, 10, 19, 0.9), rgba(5, 10, 19, 0.6), rgba(5, 10, 19, 0.3), rgba(5, 10, 19, 0));
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #00B4D8;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.category-btn.active {
    background-color: #00B4D8;
    color: var(--wp-pp-primary);
}

.portfolio-item {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 180, 216, 0.1);
}

.image-hover-zoom {
    overflow: hidden;
}

.image-hover-zoom img {
    transition: transform 0.7s ease;
}

.image-hover-zoom:hover img {
    transform: scale(1.05);
}

.instagram-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 180, 216, 0.1);
}

.photographer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 180, 216, 0.1);
}

.scroll-indicator {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

/* WordPress spezifische Styles */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}

.blocks-gallery-item {
    margin: 0 16px 16px 0;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Kommentar-Styles */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: var(--wp-pp-secondary);
    border-radius: 0.5rem;
}

.comment-meta {
    margin-bottom: 1rem;
}

.comment-author img {
    border-radius: 50%;
    margin-right: 0.5rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background-color: var(--wp-pp-secondary);
    border: 1px solid var(--wp-pp-dark);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--wp-pp-light);
}

.comment-form input[type="submit"] {
    background-color: var(--wp-pp-accent);
    color: var(--wp-pp-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.comment-form input[type="submit"]:hover {
    opacity: 0.8;
}