/* ==========================================================================
   MOBILE OVERRIDES — InfoRhino Platform
   Target: Phones & small tablets
   ========================================================================== */

@media (max-width: 768px) {

    /* ---------------------------------------------
       GLOBAL TYPOGRAPHY
       --------------------------------------------- */
    html {
        font-size: 15px !important; /* down from 18px */
    }

    h1, .title.is-1 {
        font-size: 1.9rem !important;
        line-height: 1.2 !important;
    }

    h2, .title.is-2 {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
    }

    h3, .title.is-3 {
        font-size: 1.35rem !important;
    }

    h4, .title.is-4 {
        font-size: 1.2rem !important;
    }

    p, .content p {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    h1, h2, h3, h4, h5, h6,
    p, span, a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }


    /* ---------------------------------------------
       HERO SECTION
       --------------------------------------------- */
    .hero {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        background-position: center !important;
    }

    .hero-body {
        padding: 1.5rem !important;
    }

    /* ⭐ ONLY CHANGE: smaller hero box */
    .hero-text-overlay {
        padding: 0.5rem 0.75rem !important;
    }

        .hero-text-overlay h1 {
            margin-bottom: 0.75rem !important;
        }

        .hero-text-overlay p {
            font-size: 1rem !important;
            padding: 0 1rem !important;
        }


    /* ---------------------------------------------
       BLOCK WRAPPER SPACING
       --------------------------------------------- */
    .block-wrapper {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    section.section {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }


    /* ---------------------------------------------
       CARDS & HOVER BEHAVIOUR
       --------------------------------------------- */
    .card:hover,
    .soft-container:hover,
    .process-card:hover,
    .catalog-pricing-card:hover,
    .team-profile-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-soft) !important;
    }

    .process-card,
    .catalog-pricing-card,
    .team-profile-card {
        padding: 1rem !important;
    }


    /* ---------------------------------------------
       FOOTER — TRUE STACKED 3‑WIDE GRID
       --------------------------------------------- */

    footer.footer {
        padding: var(--space-md) var(--space-sm) !important; /* Compact mobile edge spacing */
    }

    .footer-card {
        margin-bottom: var(--space-sm) !important; /* Micro separator margin for mobile stacks */
    }

    /* Ensures columns flow left-aligned cleanly on small devices instead of splitting text layout shapes */
    .footer-panel h4 {
        margin-bottom: var(--space-xs) !important;
        font-size: 0.95rem !important;
        letter-spacing: 0.02em;
    }


    /* ---------------------------------------------
       CONTACT FORM — FIXED HEADER LAYOUT (FULLY CORRECTED)
       --------------------------------------------- */

    /* Force header to stay horizontal */
    .embedded-form-component-wrapper .form-component-banner-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        width: 100% !important;
        border-radius: 8px !important;
    }

        /* Ensure title + subtitle stay left-aligned */
        .embedded-form-component-wrapper .form-component-banner-header .title,
        .embedded-form-component-wrapper .form-component-banner-header .subtitle {
            text-align: left !important;
            margin-bottom: 0 !important; /* prevent stacking */
        }

        /* Title sizing */
        .embedded-form-component-wrapper .form-component-banner-header .title {
            font-size: 1.15rem !important;
        }

        /* Subtitle sizing */
        .embedded-form-component-wrapper .form-component-banner-header .subtitle {
            font-size: 0.85rem !important;
        }

    /* Remove divider */
    .form-component-banner-header .vertical-divider {
        display: none !important;
    }

    /* Form layout fixes */
    .dynamic-action-native-form .columns {
        display: block !important;
    }

    .dynamic-action-native-form .column {
        width: 100% !important;
        padding: 0 !important;
    }

    .dynamic-action-native-form .field {
        margin-bottom: 1rem !important;
    }

    .checkbox {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* Put subtitle on its own line on mobile */
    .embedded-form-component-wrapper .form-component-banner-header {
        flex-wrap: wrap !important;
    }

        .embedded-form-component-wrapper .form-component-banner-header .subtitle {
            width: 100% !important;
            margin-top: 0.5rem !important;
            white-space: normal !important;
        }

    /* Hide duplicated form header inside the card on mobile */
    .catalog-section-header {
        display: none !important;
    }


    /* --- Cures the White Background Overlay Bug --- */
    .navbar-menu.is-active {
        background-color: var(--bg-alt) !important; /* Overrides Bulma's white fill with platform slate */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important; /* Technical depth projection shadow */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: var(--space-md) !important; /* Gives interior navigation nodes healthy breathing cushion */
        display: block !important;
    }

    /* Sets up internal list spacing for mobile nodes */
    .navbar-start {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-xs) !important;
        margin-bottom: var(--space-sm) !important;
    }

        /* Restores link readability and glow metrics inside the mobile drawer overlay */
        .navbar-start .navbar-item {
            color: var(--text-main) !important;
            font-size: 1rem !important;
            padding: var(--space-xs) 0.5rem !important;
            border-radius: 4px;
            transition: color 0.15s ease, background-color 0.15s ease !important;
        }

            /* High-contrast response highlight mapping when a link item gets touched */
            .navbar-start .navbar-item:hover,
            .navbar-start .navbar-item.is-active {
                color: var(--primary) !important;
                background-color: rgba(0, 255, 102, 0.04) !important;
                text-shadow: 0 0 8px rgba(0, 255, 102, 0.4) !important;
            }

                /* Strips mobile active underline indicator loop shapes to prevent layout fragmentation */
                .navbar-start .navbar-item.is-active::after {
                    display: none !important;
                }

    /* --- Centering Controls for Mobile Social Media Node Packages --- */
    .navbar-end {
        padding-top: var(--space-sm) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important; /* Low profile divider segment */
        display: flex !important;
        justify-content: flex-start !important; /* Left-aligns social icons safely on mobile layout views */
    }

        .navbar-end .navbar-item {
            padding: 0 !important;
        }

    /* --- Hardware Control Burger Hamburger Glyph Synchronization --- */
    .navbar-burger {
        color: var(--text-main) !important;
    }

        .navbar-burger:hover {
            background-color: rgba(255, 255, 255, 0.02) !important;
            color: var(--primary) !important;
        }

        /* Animates internal vector line indicators to match active green tones when toggled open */
        .navbar-burger.is-active span {
            background-color: var(--primary) !important;
        }
}

/* --- Clean baseline settings mapping your original mobile tracking parameters --- */
@media screen and (max-width: 768px) {
    .navbar {
        padding: 0.25rem 0 !important;
    }

    .navbar-brand .brand-logo img {
        height: 36px !important; /* Compressed low-profile tech height for mobile view grids */
    }

    a.catalog-text-link {
        font-size: 0.85rem !important;
        padding: 0.35rem 0.55rem !important;
    }

    .link-actions-flex-row {
        gap: 0.65rem !important;
        row-gap: 0.45rem !important;
    }


    /* ---------------------------------------------
       TEAM MEMBER CARDS
       --------------------------------------------- */
    .team-profile-card {
        padding: 1rem !important;
    }

    .profile-image-frame {
        height: auto !important;
    }


    /* ---------------------------------------------
       PROCESS CARDS
       --------------------------------------------- */
    .process-card-content {
        padding: 1rem !important;
    }

    .process-card-caption {
        font-size: 0.9rem !important;
    }


    /* ---------------------------------------------
       BACK TO TOP BUTTON
       --------------------------------------------- */
    .back-to-top-button {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 42px !important;
        height: 42px !important;
    }

    div.column {
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }

    span.py-2 {
        margin-bottom: 1rem !important;
    }
}

/* Mobile viewport overrides tracking standard responsiveness criteria */
@media (max-width: 768px) {
    #backToTop, .back-to-top-button {
        bottom: 20px !important; /* Compresses position offset closer to screen edge on mobile */
        right: 20px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }
}

/* --- Responsive Fallback Core for Mobile Views --- */
@media screen and (max-width: 1024px) {
    .archive .column.is-12 article.soft-container {
        display: flex !important;
        flex-direction: column !important;
    }

        .archive .column.is-12 article.soft-container > a:first-of-type {
            position: static !important;
            width: 100% !important;
            height: auto !important;
        }

        .archive .column.is-12 article.soft-container h3.title,
        .archive .column.is-12 article.soft-container .post-meta,
        .archive .column.is-12 article.soft-container p {
            margin-left: var(--space-sm) !important;
            margin-right: var(--space-sm) !important;
        }

        /* FIXED: Locks the featured "Read More" button cleanly to the left edge on mobile screen layouts */
        .archive .column.is-12 article.soft-container a.button.is-primary.is-small {
            margin-left: var(--space-sm) !important; /* Aligns button perfectly with text margins */
            margin-right: auto !important; /* Pushes all remaining layout width away to the right */
            align-self: flex-start !important; /* Snaps alignment tight to the left boundary */
            margin-top: calc(var(--space-xs) / 2) !important;
            margin-bottom: var(--space-md) !important;
        }

        .archive .column.is-12 article.soft-container figure.image img {
            border-radius: 4px 4px 0 0 !important; /* Resets rounding properties for vertical mobile stacks */
        }
}