/* Focus styles for better accessibility */
:focus-visible {
    outline: 3px solid #8B0000;
    outline-offset: 2px;
}

/* Base Styles */
h1 {
    font-size: 2rem; /* Fallback for UA stylesheet warning */
}

/* Headlines for Legal Pages (Impressum & Datenschutz) */
main h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #000000;
}

main h2 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #000000;
}

main h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #000000;
}

body {
    scroll-behavior: smooth;
}

/* Cloak to prevent FOUC (Flash of Unstyled Content) when using Tailwind via JS */
[v-cloak], .cloak {
    opacity: 0 !important;
}

.cloak-active {
    opacity: 1 !important;
    transition: opacity 0.2s ease-in;
}

/* Accessibility: Hide elements but keep them for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Anchor scrolling offset for fixed header */
[id] {
    scroll-margin-top: 96px; /* ensures anchors don't hide behind sticky header */
}

/* Header Scroll Effect */
header.scrolled {
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* Accordion Styles */
.accordion-content {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.accordion-content.active {
    opacity: 1;
}

.accordion-icon.active {
    transform: rotate(180deg);
}

/* Lightbox Styles */
#lightbox {
    transition: opacity 0.3s ease;
}

/* Ensure lightbox controls are always tappable/visible above the image */
#lightbox .lightbox-control,
#lightbox .lightbox-close {
    z-index: 60; /* above content within lightbox */
}

#lightbox .lightbox-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    touch-action: manipulation;
    /* bessere Sichtbarkeit: halbtransparenter Hintergrund hinter den Pfeilen */
    background: rgba(0, 0, 0, 0.35);
    border-radius: 9999px; /* volle Rundung */
    color: #fff; /* Feather nutzt currentColor → Pfeile bleiben weiß */
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

@media (max-width: 768px) {
    #lightbox .lightbox-control {
        width: 56px;
        height: 56px;
    }
}

/* States: Pfeile bleiben einheitlich weiß, Hintergrund wird leicht kräftiger */
#lightbox .lightbox-control:hover,
#lightbox .lightbox-control:focus,
#lightbox .lightbox-control:active {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
}

#lightbox .lightbox-control:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}

/* Respect safe-area insets for notches when in landscape/portrait */
@supports (top: env(safe-area-inset-top)) {
    #lightbox .lightbox-close {
        top: calc(env(safe-area-inset-top) + 12px) !important;
        right: calc(env(safe-area-inset-right) + 12px) !important;
    }
}

/* Form Success/Error Messages */
#formSuccess, #formError {
    transition: all 0.3s ease;
}

/* Gallery Item Hover Effect */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

/* Scroll-to-Top Button: smooth appear/disappear */
.scroll-top-btn {
    opacity: 0;
    /* Wichtig: Keine direkte transform-Zuweisung, damit Tailwinds -translate-x-1/2 für zentrierte Position bestehen bleibt */
    --tw-translate-y: 8px; /* initial leicht nach unten versetzt */
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* wenn unsichtbar, nicht klickbar */
}

.scroll-top-btn.is-visible {
    opacity: 1;
    --tw-translate-y: 0; /* beim Einblenden wieder auf 0 */
    pointer-events: auto;
}

/* größere Touch-Zone auf Mobile, konsistent mit Lightbox-Controls */
@media (max-width: 768px) {
    .scroll-top-btn {
        padding: 14px; /* ~56px Touch-Fläche rund */
    }
}

/* Lightbox Swipe Animations */
@keyframes lbSwipeOutLeft {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(-60px) scale(0.98); }
}

@keyframes lbSwipeInRight {
    from { opacity: 0; transform: translateX(60px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes lbSwipeOutRight {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(60px) scale(0.98); }
}

@keyframes lbSwipeInLeft {
    from { opacity: 0; transform: translateX(-60px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

#lightboxImage {
    will-change: transform, opacity;
}

.lb-swipe-out-left { animation: lbSwipeOutLeft 200ms ease both; }
.lb-swipe-in-right { animation: lbSwipeInRight 200ms ease both; }
.lb-swipe-out-right { animation: lbSwipeOutRight 200ms ease both; }
.lb-swipe-in-left { animation: lbSwipeInLeft 200ms ease both; }

.delay-300 {
    animation-delay: 0.3s;
}

/* Section Padding & Spacing Tweaks for Mobile */
@media (max-width: 768px) {
    /* Nur anwenden, wenn die Section KEINE eigenen py/pt/pb-Utilityklassen hat */
    section:not([class*="py-"]):not([class*="pt-"]):not([class*="pb-"]) {
        padding-top: 1.25rem;   /* noch kompakter (vorher 2rem) */
        padding-bottom: 1.25rem;
    }

    /* Große vertikale Abstände noch kompakter auf Mobile */
    .mb-16 { margin-bottom: 1.25rem !important; }
    .mt-16 { margin-top: 1.25rem !important; }

    /* Grid/Flex Gaps weiter reduzieren */
    .gap-6 { gap: 0.75rem !important; }
    .gap-8 { gap: 1rem !important; }

    /* Date and Time Picker größer auf Mobile */
    input[type="date"],
    input[type="time"] {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        min-height: 3.5rem;
        background-color: #ffffff !important;
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Nav Link Hover Effect */
nav a {
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #8B0000; /* primary color */
    transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}

nav a.active {
    color: #8B0000; /* primary color */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #8B0000;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6d0000;
}

/* Pizza Section Highlight */
.pizza-section {
    /* warmer, appetitlicher Hintergrund in Primärfarb-Palette */
    background: linear-gradient(135deg, rgba(255, 245, 240, 0.95), rgba(255, 232, 230, 0.95));
    padding: 2rem;           /* entspricht etwa p-8 */
    border-radius: 1rem;     /* entspricht rounded-xl */
    gap: 2rem;               /* Abstand zwischen Text und Bild */
}

/* Leicht dichter auf kleineren Screens */
@media (max-width: 768px) {
    .pizza-section {
        padding: 1rem;       /* p-4, noch kompakter */
        gap: 1rem;           /* gap-4 */
    }
}