/* Additional Mobile Responsiveness Fixes */

/* Prevent any element from causing horizontal overflow */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Exclude dropdown menu from max-width constraint on desktop */
@media (min-width: 769px) {
    .dropdown-menu {
        max-width: none !important;
    }
}

/* Navbar overflow protection for mobile */
@media (max-width: 768px) {
    .navbar .container {
        width: 100%;
        overflow: hidden;
    }

    .nav-brand {
        white-space: nowrap;
        overflow: visible;
    }
}

/* Medium mobile screens - slightly shorter prompt */
@media (max-width: 480px) and (min-width: 361px) {
    .nav-brand::before {
        content: 'root@~# ';
    }
}

/* Better word breaking for all text */
h1, h2, h3, h4, h5, h6, p, div, span, a, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for very small screens */
@media (max-width: 360px) {
    .container {
        padding: 0 8px !important;
        max-width: 100% !important;
    }

    .nav-brand {
        font-size: 11px;
    }

    .nav-brand::before {
        content: '~# ';
        font-size: 10px;
    }

    .logo-icon {
        font-size: 14px;
    }

    .hero-content h1 {
        font-size: 16px !important;
        letter-spacing: 0 !important;
        padding: 0 8px !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .hero-content h1::before {
        margin-right: 2px !important;
        font-size: 14px !important;
    }

    .hero-content .tagline {
        font-size: 10px !important;
        word-break: break-word !important;
        letter-spacing: 0 !important;
    }

    .hero-content .tagline::before {
        margin-right: 2px !important;
        font-size: 9px !important;
    }

    .hero-content p {
        font-size: 11px !important;
        padding: 0 8px !important;
        word-break: break-word !important;
    }

    .section-title {
        font-size: 15px !important;
        letter-spacing: 0 !important;
        padding: 0 8px !important;
        word-break: break-word !important;
    }

    .section-title::before,
    .section-title::after {
        font-size: 11px !important;
    }

    .section-subtitle {
        font-size: 11px !important;
        padding: 0 8px !important;
        word-break: break-word !important;
        letter-spacing: 0 !important;
    }

    .section-subtitle::before,
    .section-subtitle::after {
        font-size: 9px !important;
    }

    .service-card {
        padding: 10px 8px !important;
    }

    .service-card h3 {
        font-size: 13px !important;
        letter-spacing: 0 !important;
        word-break: break-word !important;
    }

    .service-card h3::before {
        font-size: 10px !important;
    }

    .service-card p,
    .service-features li {
        font-size: 11px !important;
        word-break: break-word !important;
    }

    .btn {
        font-size: 10px !important;
        padding: 8px 10px !important;
        letter-spacing: 0 !important;
    }

    .btn::before,
    .btn::after {
        font-size: 9px !important;
    }

    .cta-buttons {
        padding: 0 8px !important;
    }
}

/* Fix for landscape mobile - Make content more compact while keeping all visual elements */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 20px 0;
    }

    .hero-content h1,
    .hero-content .tagline,
    .hero-content p {
        padding: 0 15px !important;
        letter-spacing: 0 !important;
    }

    .hero-content h1 {
        font-size: 16px !important;
    }

    .hero-content .tagline {
        font-size: 11px !important;
    }

    .hero-content p {
        font-size: 10px !important;
    }

    .section {
        padding: 30px 0;
    }

    .section-title,
    .section-subtitle {
        letter-spacing: 0 !important;
        font-size: 14px !important;
    }

    .btn {
        font-size: 10px !important;
        padding: 8px 12px !important;
        letter-spacing: 0 !important;
    }

    .btn::before,
    .btn::after {
        font-size: 9px !important;
    }
}

/* Additional landscape fixes for all mobile sizes - Reduce spacing while keeping decorators */
@media (max-width: 991px) and (orientation: landscape) {
    .container {
        padding: 0 15px !important;
    }

    .hero-content h1,
    .hero-content .tagline,
    .hero-content p,
    .section-title,
    .section-subtitle {
        padding-left: 15px !important;
        padding-right: 15px !important;
        letter-spacing: 0 !important;
    }

    .hero-content h1 {
        font-size: 18px !important;
    }

    .hero-content h1::before {
        margin-right: 3px !important;
    }

    .hero-content .tagline {
        font-size: 12px !important;
    }

    .hero-content .tagline::before {
        margin-right: 3px !important;
    }

    .section-title {
        font-size: 16px !important;
    }

    .section-title::before,
    .section-title::after {
        font-size: 14px !important;
    }

    .section-subtitle {
        font-size: 11px !important;
    }

    .btn {
        font-size: 11px !important;
        padding: 10px 15px !important;
        letter-spacing: 0.5px !important;
    }

    .btn::before,
    .btn::after {
        font-size: 10px !important;
    }

    .service-card h3::before {
        font-size: 11px !important;
    }
}

/* Ensure no horizontal scroll on any device */
@media (max-width: 991px) {
    body {
        overflow-x: hidden;
        position: relative;
        max-width: 100vw;
    }

    .hero-content h1 {
        max-width: 100% !important;
        width: 100% !important;
        word-break: break-word !important;
        hyphens: auto !important;
        overflow: visible !important;
    }

    .section-title {
        max-width: 100% !important;
        width: 100% !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .hero-content .tagline,
    .section-subtitle,
    .hero-content p,
    .service-card p {
        max-width: 100% !important;
        width: 100% !important;
        word-break: break-word !important;
        hyphens: auto !important;
        overflow: visible !important;
    }

    .typing-text {
        white-space: normal !important;
        overflow: visible !important;
        max-width: 100% !important;
    }
}