/*
 * Fotoklub Hartkirchen – Custom CSS
 * Elementor-spezifisches Styling & globale UI-Komponenten
 * Nordlicht GmbH | studio-nordlicht.com
 *
 * Inhalt:
 *   1. Elementor Container & Sektionen
 *   2. Typografie in Elementor
 *   3. Buttons
 *   4. Navigations-Menü
 *   5. Galerie & Bilder
 *   6. Cards
 *   7. Formulare
 *   8. Dark-Section Utilities
 *   9. Animationen & Übergänge
 *  10. Responsive Anpassungen
 */

/* ═══════════════════════════════════════════════════════════════
   1. ELEMENTOR CONTAINER & SEKTIONEN
   ═══════════════════════════════════════════════════════════════ */

/* Maximale Containerbreite */
.elementor-section .elementor-container,
.e-container,
.e-con {
    max-width: var(--fk-container);
}

/* Standard-Section-Abstände */
.elementor-section.elementor-top-section {
    padding-top:    var(--fk-sp-lg);
    padding-bottom: var(--fk-sp-lg);
}

/* Vollbreite-Sektionen ohne Padding */
.elementor-section.fk-fullwidth {
    padding: 0;
}

/* Dunkle Sektion */
.elementor-section.fk-section-dark,
.e-container.fk-section-dark,
section.fk-section-dark {
    background-color: var(--fk-dark);
    color: var(--fk-text-light);
}
.fk-section-dark h1,
.fk-section-dark h2,
.fk-section-dark h3,
.fk-section-dark h4,
.fk-section-dark h5,
.fk-section-dark h6 {
    color: var(--fk-warm-white);
}
.fk-section-dark p,
.fk-section-dark .elementor-widget-text-editor {
    color: var(--fk-text-light);
}

/* Warme helle Sektion */
.elementor-section.fk-section-warm {
    background-color: var(--fk-warm-white);
}

/* Gold-Akzent-Linie oben */
.fk-border-top-gold {
    border-top: 3px solid var(--fk-gold);
}


/* ═══════════════════════════════════════════════════════════════
   2. TYPOGRAFIE IN ELEMENTOR
   ═══════════════════════════════════════════════════════════════ */

/* Überschriften */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--fk-font-heading);
    line-height: var(--fk-line-heading);
}

/* H1 – Hero-Titel */
.elementor-widget-heading .elementor-heading-title.elementor-size-xl,
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Untertitel / Lead-Text */
.elementor-widget-text-editor p:first-child:not(:only-child) {
    font-size: var(--fk-size-md);
    line-height: 1.8;
}

/* Gold-Akzent-Text Utility */
.fk-text-gold,
.elementor-widget-heading .elementor-heading-title.fk-text-gold {
    color: var(--fk-gold);
}

/* Große Zitatformatierung */
.elementor-widget-text-editor blockquote {
    border-left: 3px solid var(--fk-gold);
    padding-left: var(--fk-sp-md);
    margin-left: 0;
    font-family: var(--fk-font-heading);
    font-style: italic;
    font-size: var(--fk-size-lg);
    color: var(--fk-muted);
}


/* ═══════════════════════════════════════════════════════════════
   3. BUTTONS
   ═══════════════════════════════════════════════════════════════ */

/* Primär-Button: Gold */
.elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button[data-elementor-open-lightbox],
.fk-btn-primary,
.elementor-button.fk-btn-primary {
    background-color: var(--fk-gold);
    color: var(--fk-dark);
    border: 2px solid var(--fk-gold);
    border-radius: var(--fk-radius-sm);
    font-family: var(--fk-font-body);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: var(--fk-size-sm);
    padding: 0.85em 2em;
    transition: background-color var(--fk-transition),
                border-color var(--fk-transition),
                color var(--fk-transition),
                box-shadow var(--fk-transition);
}
.elementor-button.elementor-button-primary:hover,
.fk-btn-primary:hover,
.elementor-button.fk-btn-primary:hover {
    background-color: var(--fk-gold-dark);
    border-color: var(--fk-gold-dark);
    color: var(--fk-dark);
    box-shadow: var(--fk-shadow-gold);
}

/* Sekundär-Button: Outline Gold */
.elementor-button.fk-btn-outline,
.fk-btn-outline {
    background-color: transparent;
    color: var(--fk-gold);
    border: 2px solid var(--fk-gold);
    border-radius: var(--fk-radius-sm);
    font-family: var(--fk-font-body);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: var(--fk-size-sm);
    padding: 0.85em 2em;
    transition: all var(--fk-transition);
}
.elementor-button.fk-btn-outline:hover,
.fk-btn-outline:hover {
    background-color: var(--fk-gold);
    color: var(--fk-dark);
}

/* Ghost-Button (auf dunklem Hintergrund) */
.elementor-button.fk-btn-ghost,
.fk-btn-ghost {
    background-color: transparent;
    color: var(--fk-warm-white);
    border: 1px solid rgba(248,245,239,0.4);
    padding: 0.85em 2em;
    border-radius: var(--fk-radius-sm);
    font-family: var(--fk-font-body);
    font-size: var(--fk-size-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all var(--fk-transition);
}
.fk-btn-ghost:hover {
    background-color: rgba(248,245,239,0.1);
    border-color: var(--fk-warm-white);
}


/* ═══════════════════════════════════════════════════════════════
   4. NAVIGATIONS-MENÜ (Elementor Pro Nav-Menü Widget)
   ═══════════════════════════════════════════════════════════════ */

/* Desktop Navigation */
.elementor-nav-menu .elementor-nav-menu--main .elementor-item {
    font-family: var(--fk-font-body);
    font-size: var(--fk-size-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fk-text-light);
    transition: color var(--fk-transition);
    padding: 0.5em 1.2em;
}
.elementor-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: var(--fk-gold) !important;
}

/* Aktiv-Indikator unter Menüpunkt */
.elementor-nav-menu--indicator-underline .elementor-item:after {
    background-color: var(--fk-gold);
    height: 2px;
}

/* Dropdown */
.elementor-nav-menu--dropdown .elementor-item {
    background-color: var(--fk-dark-soft);
    border-bottom: 1px solid var(--fk-border-dark);
    color: var(--fk-text-light);
    font-size: var(--fk-size-sm) !important;
}
.elementor-nav-menu--dropdown .elementor-item:hover {
    background-color: var(--fk-dark-muted);
    color: var(--fk-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════
   5. GALERIE & BILDER (Fotografie-optimiert)
   ═══════════════════════════════════════════════════════════════ */

/* Elementor Galerie Widget */
.elementor-widget-gallery .elementor-gallery-item__image {
    transition: transform var(--fk-transition-slow), filter var(--fk-transition);
    filter: brightness(0.95);
}
.elementor-widget-gallery .elementor-gallery-item:hover .elementor-gallery-item__image {
    transform: scale(1.03);
    filter: brightness(1.05);
}

/* Galerie-Overlay bei Hover */
.elementor-widget-gallery .elementor-gallery-item__overlay {
    background: linear-gradient(
        to top,
        rgba(17,17,17,0.85) 0%,
        rgba(17,17,17,0) 60%
    );
}

/* Einzelbild mit Hover-Effekt */
.elementor-widget-image .elementor-image img {
    transition: transform var(--fk-transition-slow), box-shadow var(--fk-transition);
}
.elementor-widget-image.fk-image-hover .elementor-image img:hover {
    transform: scale(1.02);
    box-shadow: var(--fk-shadow-lg);
}

/* Portfolio/Medien-Grid */
.fk-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--fk-sp-sm);
}
.fk-photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

/* Lightbox Override */
.elementor-lightbox {
    background: rgba(10,10,10,0.95) !important;
}
.elementor-lightbox-close-btn {
    color: var(--fk-gold) !important;
}


/* ═══════════════════════════════════════════════════════════════
   6. CARDS (für Veranstaltungen, Mitglieder etc.)
   ═══════════════════════════════════════════════════════════════ */

.fk-card {
    background: var(--fk-white);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--fk-transition), transform var(--fk-transition);
}
.fk-card:hover {
    box-shadow: var(--fk-shadow-md);
    transform: translateY(-3px);
}
.fk-card-dark {
    background: var(--fk-dark-soft);
    color: var(--fk-text-light);
    border: 1px solid var(--fk-border-dark);
}

/* Event-Card */
.fk-event-card {
    border-left: 4px solid var(--fk-gold);
    padding: var(--fk-sp-md);
    background: var(--fk-white);
    border-radius: 0 var(--fk-radius-md) var(--fk-radius-md) 0;
    margin-bottom: var(--fk-sp-sm);
    transition: border-color var(--fk-transition), box-shadow var(--fk-transition);
}
.fk-event-card:hover {
    border-left-color: var(--fk-gold-dark);
    box-shadow: var(--fk-shadow-md);
}


/* ═══════════════════════════════════════════════════════════════
   7. FORMULARE (Kontakt, Anmeldung)
   ═══════════════════════════════════════════════════════════════ */

/* Elementor Form */
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
    border: 1px solid var(--fk-border-light);
    border-radius: var(--fk-radius-sm);
    padding: 0.75em 1em;
    font-family: var(--fk-font-body);
    font-size: var(--fk-size-base);
    background: var(--fk-white);
    transition: border-color var(--fk-transition), box-shadow var(--fk-transition);
}
.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
    outline: none;
    border-color: var(--fk-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.elementor-form .elementor-field-label {
    font-size: var(--fk-size-sm);
    font-weight: 700;
    color: var(--fk-text-dark);
    letter-spacing: 0.04em;
}
.elementor-form .elementor-button[type="submit"] {
    background-color: var(--fk-gold);
    color: var(--fk-dark);
    border: none;
    border-radius: var(--fk-radius-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: var(--fk-size-sm);
    padding: 0.85em 2.5em;
    cursor: pointer;
    transition: background-color var(--fk-transition), box-shadow var(--fk-transition);
}
.elementor-form .elementor-button[type="submit"]:hover {
    background-color: var(--fk-gold-dark);
    box-shadow: var(--fk-shadow-gold);
}


/* ═══════════════════════════════════════════════════════════════
   8. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* Gold-Divider */
.fk-divider-gold {
    height: 3px;
    background: linear-gradient(90deg, var(--fk-gold), transparent);
    border: none;
    margin: var(--fk-sp-md) 0;
    max-width: 80px;
}

/* Uppercase Label (über Überschriften) */
.fk-eyebrow {
    font-family: var(--fk-font-body);
    font-size: var(--fk-size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fk-gold);
    display: block;
    margin-bottom: 0.5em;
}

/* Mitglieder-Badge */
.fk-badge-member {
    display: inline-block;
    background: var(--fk-member);
    color: var(--fk-white);
    font-size: var(--fk-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25em 0.75em;
    border-radius: var(--fk-radius-full);
}

/* Content nur für eingeloggte Benutzer (JS-gestützt) */
.fk-member-only { display: none; }
.logged-in .fk-member-only { display: block; }
.logged-in .fk-guests-only { display: none; }


/* ═══════════════════════════════════════════════════════════════
   9. ANIMATIONEN & ÜBERGÄNGE
   ═══════════════════════════════════════════════════════════════ */

/* Fade-in beim Einblenden (kombinierbar mit Elementor Motion Effects) */
@keyframes fkFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fk-fade-up {
    animation: fkFadeUp 0.6s ease forwards;
}

/* Gold-Underline-Hover für Links */
.fk-link-gold {
    position: relative;
    color: var(--fk-text-dark);
    text-decoration: none;
}
.fk-link-gold::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--fk-gold);
    transition: width var(--fk-transition);
}
.fk-link-gold:hover::after { width: 100%; }
.fk-link-gold:hover { color: var(--fk-text-dark); }


/* ═══════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .elementor-section.elementor-top-section {
        padding-top:    var(--fk-sp-md);
        padding-bottom: var(--fk-sp-md);
    }
}

/* Mobil */
@media (max-width: 767px) {
    :root {
        --fk-sp-lg:  2.5rem;
        --fk-sp-xl:  3.5rem;
        --fk-sp-2xl: 5rem;
    }
    h1, .elementor-heading-title[tag="h1"] {
        font-size: clamp(1.75rem, 8vw, var(--fk-size-4xl));
    }
    h2, .elementor-heading-title[tag="h2"] {
        font-size: clamp(1.4rem, 6vw, var(--fk-size-3xl));
    }
}