/* Mobile Styles - St. Benedikt am Leberberg */

@import url('/css/style.css');

/* Hamburger Menu - hidden on desktop, shown on mobile */
.hamburger {
    display: none;
}

.nav-list {
    display: none;
}

.nav-list.active {
    display: flex;
}

/* All images - hide on mobile by default */
img {
    display: none;
}

/* Exception: news images shown */
.article-card img {
    display: block;
    height: 250px;
    width: auto;
    object-fit: cover;
    float: none;
    margin: 0 auto var(--spacing-md);
}

/* Mobile-specific overrides */
@media (max-width: 768px) {
    /* Hamburger Menu - visible on mobile */
    .hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: white;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        margin-left: auto;
    }

    .hamburger-icon {
        display: inline;
    }

    .hamburger-close {
        display: none;
    }

    .hamburger.active .hamburger-icon {
        display: none;
    }

    .hamburger.active .hamburger-close {
        display: inline;
    }

    nav.main-nav {
        position: relative;
    }

    .nav-list {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #1f4010;
        padding: 1rem;
        z-index: 1000;
        list-style: none;
        margin: 0;
    }

    .nav-list.active {
        display: flex !important;
    }

    .nav-list li {
        list-style: none;
    }

    .nav-list a {
        display: block;
        color: white;
        padding: 0.75rem 1rem;
        text-decoration: none;
        border-radius: 4px;
    }

    .nav-list a:hover,
    .nav-list a[aria-current="page"] {
        background: rgba(255,255,255,0.2);
    }

    /* Header - smaller for mobile */
    header.site-header {
        height: 80px;
        background-size: cover;
    }

    header .site-logo {
        display: none !important;
    }

    /* Body - responsive text */
    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
        overflow-x: hidden !important;
    }

    /* Main content - proper spacing */
    main {
        padding: var(--spacing-sm) !important;
        margin: 0 !important;
        width: 100% !important;
    }

    main .container {
        padding: 0 var(--spacing-xs) !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    h2 {
        text-align: center !important;
        font-size: 1.3rem !important;
        margin-bottom: var(--spacing-md) !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    /* Page content - responsive box */
    .page-content {
        padding: var(--spacing-sm) !important;
        margin: 0 0 var(--spacing-md) 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: white !important;
        border-radius: var(--border-radius) !important;
        box-shadow: var(--shadow) !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .page-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .page-content p,
    .page-content li,
    .page-content td,
    .page-content th,
    .page-content span,
    .page-content div {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* Hide ALL images in page-content on mobile */
    .page-content img {
        display: none !important;
    }

    /* Exception: news article images */
    .article-card img {
        display: block !important;
        float: none !important;
        max-width: 100% !important;
        margin-bottom: var(--spacing-sm) !important;
    }

    /* Contact page - hide all contact images */
    .contact-image,
    img[src*="kontakt"],
    img[alt*="Kontakt"],
    img[alt*="Priester"] {
        display: none !important;
    }

    .contact-info-top {
        display: block !important;
        width: 100% !important;
    }

    /* Calendar */
    .kalender-grid {
        font-size: 0.8rem !important;
    }

    .kalender-cell {
        padding: 0.2rem 0.05rem !important;
    }

    /* Photo gallery - 2 columns */
    .photo-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm) !important;
    }

    .photo-item img {
        height: 100px !important;
    }

    /* Contact form - full width */
    form.contact-form {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Article cards */
    .article-card {
        padding: var(--spacing-sm) !important;
        margin-bottom: var(--spacing-sm) !important;
    }

    /* Two column layouts become single column */
    .two-column {
        grid-template-columns: 1fr !important;
    }

    /* TV channels */
    .tv-channels {
        grid-template-columns: 1fr !important;
    }

    /* News list */
    .news-item {
        padding: var(--spacing-sm) !important;
    }

    /* Footer - proper spacing */
    footer.site-footer {
        margin-top: var(--spacing-md) !important;
        padding: var(--spacing-md) !important;
        width: 100% !important;
    }

    /* Tables - stacked cards on mobile */
    table {
        display: block !important;
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 14px !important;
    }

    table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: var(--spacing-sm) !important;
        border: none !important;
        background: white !important;
        border-radius: var(--border-radius) !important;
        box-shadow: var(--shadow) !important;
    }

    table th,
    table td {
        display: block !important;
        width: 100% !important;
        padding: var(--spacing-xs) !important;
        text-align: left !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
    }

    table th {
        background: var(--color-primary) !important;
        color: white !important;
    }

    /* Lists */
    ul, ol {
        padding-left: var(--spacing-md) !important;
    }

    /* Links and paragraphs */
    p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Hide PDF objects on mobile - there's a download button anyway */
object[type="application/pdf"],
iframe[src*="docs.google.com"] {
    display: none !important;
}

/* Pfarrsprengel block styling */
.pfarrsprengel-block {
    background: rgba(31, 64, 16, 0.1);
    border-left: 4px solid var(--color-primary);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius);
}

/* Very small screens */
@media (max-width: 400px) {
    header.site-header {
        height: 60px !important;
    }

    .photo-gallery {
        grid-template-columns: 1fr !important;
    }

    .photo-item img {
        height: 150px !important;
    }
}