/* ============================================================
   ITSafety.info — Mobile Fixes & Responsive Enhancements
   ============================================================ */

/* ===== TEXT WRAPPING FIXES ===== */
.font-mono,
code,
pre {
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* Ensure long IPv6 addresses wrap */
#ip-display-v6,
#ip-display-v4,
[id*="ip-display"] {
    word-break: break-all;
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 100%;
}

/* ===== MOBILE NAVIGATION ===== */
@media (max-width: 768px) {
    /* Hide desktop nav links, show hamburger */
    nav .hidden-mobile {
        display: none !important;
    }
    
    /* Mobile menu panel */
    #mobile-menu {
        display: none;
        background: #1f2937;
        border-top: 1px solid #374151;
    }
    #mobile-menu.active {
        display: block;
    }
    #mobile-menu a {
        display: block;
        padding: 12px 16px;
        color: #d1d5db;
        font-size: 0.95rem;
        font-weight: 500;
        border-bottom: 1px solid #374151;
        text-decoration: none;
    }
    #mobile-menu a:hover {
        color: #fff;
        background: #374151;
    }
    #mobile-menu a:last-child {
        border-bottom: none;
    }
    
    /* Mobile hamburger button */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        color: #d1d5db;
        font-size: 1.25rem;
        cursor: pointer;
    }
    .mobile-menu-btn:hover {
        color: #fff;
    }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
    #mobile-menu {
        display: none !important;
    }
}

/* ===== RESPONSIVE GRID FIXES ===== */
@media (max-width: 640px) {
    /* Stack 2-col grids */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Reduce padding on cards */
    .rounded-lg.shadow.p-5,
    .rounded-lg.shadow.p-6 {
        padding: 16px !important;
    }
    
    /* Smaller headings on mobile */
    h1.text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    h1.text-xl {
        font-size: 1.15rem !important;
    }
    h2.text-xl {
        font-size: 1.1rem !important;
    }
    h2.text-base {
        font-size: 1rem !important;
    }
    
    /* Prevent text overflow in info boxes */
    .bg-slate-50.p-3.rounded,
    .bg-slate-50.p-4.rounded-lg {
        overflow: hidden;
    }
    .bg-slate-50.p-3.rounded p,
    .bg-slate-50.p-4.rounded-lg p {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* IP display section */
    .bg-slate-50.rounded-lg.p-4 {
        padding: 12px !important;
    }
    
    /* Flex items in IP display */
    .flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* Sidebar cards */
    .bg-gradient-to-br.from-blue-600.to-blue-700.rounded-lg.shadow.p-5 {
        padding: 16px !important;
    }
    
    /* Reduce gaps */
    .space-y-5 > * + * {
        margin-top: 16px !important;
    }
    .space-y-4 > * + * {
        margin-top: 12px !important;
    }
    .space-y-6 > * + * {
        margin-top: 16px !important;
    }
    
    /* Affiliate box */
    .bg-white\/10.rounded.p-3 {
        padding: 12px !important;
    }
    
    /* Footer grid */
    footer .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }
    
    /* Lists with icons */
    ul.space-y-1.ml-4,
    ul.text-sm.space-y-1.ml-4 {
        margin-left: 0 !important;
        padding-left: 0 !important;
        list-style: none !important;
    }
    ul.space-y-1.ml-4 li,
    ul.text-sm.space-y-1.ml-4 li {
        padding-left: 0 !important;
    }
}

/* ===== SMALL PHONES (iPhone SE, etc) ===== */
@media (max-width: 375px) {
    body {
        font-size: 14px;
    }
    
    h1.text-3xl {
        font-size: 1.35rem !important;
    }
    
    .max-w-6xl.mx-auto.py-6.px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .rounded-lg.shadow.p-5,
    .rounded-lg.shadow.p-6 {
        padding: 12px !important;
    }
    
    /* Shrink result values */
    .result-value,
    .text-2xl.font-mono.font-semibold {
        font-size: 1.1rem !important;
    }
    
    .text-lg.font-mono {
        font-size: 0.95rem !important;
    }
}

/* ===== SCROLLBARS FOR OVERFLOWING CONTENT ===== */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* ===== ADSENSE RESPONSIVE ===== */
@media (max-width: 640px) {
    .adsbygoogle {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* ===== COOKIE BANNER MOBILE ===== */
@media (max-width: 640px) {
    #cookie-banner > div {
        flex-direction: column !important;
        text-align: center !important;
    }
    #cookie-banner > div > div {
        width: 100%;
    }
    #cookie-banner button {
        width: 100%;
        margin-top: 8px;
    }
}

/* ===== FIX SVG ANIMATION OVERFLOW ===== */
svg.animate-spin {
    flex-shrink: 0;
}

/* ===== BUTTON TEXT WRAPPING ===== */
a.inline-flex,
button.inline-flex,
.btn-primary,
a.bg-blue-600,
button.bg-blue-600 {
    white-space: normal;
    text-align: center;
    word-break: break-word;
}

/* ===== SECURITY ANALYSIS PAGE SPECIFIC ===== */
@media (max-width: 640px) {
    /* Browser fingerprint list */
    #browser-fingerprint ul.space-y-1.ml-4 li,
    .bg-slate-50.p-4.rounded-lg ul li {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* Check items */
    .check-item,
    .bg-slate-50.p-3.rounded.border-l-3 {
        word-break: break-word;
    }
    
    /* Recommendation cards */
    .bg-slate-50.p-3.rounded.border-l-3.border-blue-500,
    .bg-slate-50.p-3.rounded.border-l-3.border-green-500,
    .bg-slate-50.p-3.rounded.border-l-3.border-orange-500,
    .bg-slate-50.p-3.rounded.border-l-3.border-red-500 {
        padding: 12px !important;
    }
    
    /* Grade display */
    .text-5xl.font-bold {
        font-size: 2.5rem !important;
    }
    
    /* Port scan results */
    .flex.items-start.gap-2.text-sm {
        flex-direction: column;
        gap: 4px;
    }
    .flex.items-start.gap-2.text-sm > i {
        margin-top: 0;
    }
    
    /* VPN detection info box */
    .bg-white.p-3.rounded.border.text-sm.space-y-2 > div {
        word-break: break-word;
    }
    .bg-white.p-3.rounded.border.text-sm.space-y-2 code {
        word-break: break-all;
        white-space: normal;
    }
    
    /* Security score flex */
    .flex.items-center.gap-4.mb-4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .flex.items-center.gap-4.mb-4 > .text-4xl {
        font-size: 3rem !important;
    }
    
    /* Score lists */
    ul.space-y-2 li.flex.items-start.gap-2 {
        flex-wrap: nowrap;
    }
    ul.space-y-2 li.flex.items-start.gap-2 > span {
        flex-shrink: 0;
    }
}

/* ===== PRIVACY & TERMS PAGES ===== */
@media (max-width: 640px) {
    .prose, .max-w-3xl, .max-w-4xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .prose h1, .prose h2, .prose h3 {
        word-break: break-word;
    }
    .prose p {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .prose ul, .prose ol {
        padding-left: 20px !important;
    }
    .prose ul li, .prose ol li {
        word-break: break-word;
    }
}

/* ===== RESOURCES PAGE ===== */
@media (max-width: 640px) {
    .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ===== ABOUT PAGE ===== */
@media (max-width: 640px) {
    .max-w-3xl.mx-auto {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ===== HOW IT WORKS PAGE ===== */
@media (max-width: 640px) {
    .max-w-4xl.mx-auto {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ===== GLOBAL TEXT SAFETY ===== */
@media (max-width: 640px) {
    /* All paragraphs */
    p {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* All list items */
    li {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* All headings */
    h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* All code elements */
    code {
        word-break: break-all;
        white-space: pre-wrap;
    }
    
    /* All spans with long text */
    span.font-mono, span.break-all {
        word-break: break-all !important;
    }
    
    /* Table handling */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    
    /* Prevent horizontal overflow on entire page */
    body {
        overflow-x: hidden;
    }
    
    /* Any element with long text */
    * {
        max-width: 100vw;
    }
}