/* ContentPulse.co.uk - Mobile Stylesheet (max-width: 768px) */

@layer components {
    /* Header layout */
    .header-container {
        flex-wrap: wrap;
    }
    
    .nav-toggle-btn {
        display: block;
        background: none;
        border: none;
        color: #ffffff;
        font-size: 1.5rem;
        cursor: pointer;
        padding: var(--space-xs);
        order: 2;
    }

    .site-nav {
        inline-size: 100%;
        display: none; /* Hidden by default on mobile, toggled by JS */
        order: 4;
        background-color: var(--color-slate-900);
        margin-inline: -1rem;
        padding-inline: var(--space-md);
        padding-block-end: var(--space-sm);
        border-block-start: 1px solid var(--color-header-border);
    }

    .site-nav.open {
        display: block;
    }

    .nav-list {
        flex-direction: column;
        gap: var(--space-sm);
        padding-block: var(--space-sm);
    }

    .header-search {
        inline-size: 100%;
        order: 3;
        margin-block-start: var(--space-xs);
    }

    .autocomplete-dropdown {
        inline-size: 100%;
        inset-inline-start: 0;
    }

    /* Hero Brochure Section */
    .hero-section {
        padding-block: var(--space-xl);
        text-align: center;
    }

    .hero-title {
        font-size: 2.2rem;
        margin-block-end: var(--space-sm);
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* Stack grid systems */
    .activities-grid,
    .archive-grid,
    .grid-3,
    .grid-2,
    .post-layout,
    .contact-layout,
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg);
    }

    /* Footer adjustments */
    .footer-grid {
        text-align: center;
    }

    .footer-links {
        align-items: center;
    }

    /* Cookie Banner mobile adaptation */
    .cookie-banner {
        inset-inline: var(--space-sm);
        max-inline-size: calc(100% - 2 * var(--space-sm));
    }
}

@layer base {
    /* Touch Target compliance for mobile pointers */
    @media (pointer: coarse) {
        a, button, input, select {
            min-block-size: 44px; /* Accessible touch target size */
        }
    }
}