/**
 * Mobile fixes for Fuglehundprøve
 * Include this in all pages to prevent horizontal scroll and improve mobile UX
 */

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure all containers respect viewport width */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Native form-felter: tving min-width: 0 så de ikke pusher seg utenfor
   container på iOS Safari (date/time/number/select har intrinsic widths
   som ellers ignorerer w-full / flex-1). */
input, select, textarea {
    min-width: 0;
    max-width: 100%;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
}
/* Sjekkbokser/radios skal aldri krympe i flex-rader */
input[type="checkbox"],
input[type="radio"] {
    flex-shrink: 0;
}

/* Fix for tables and wide content */
table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* Fix for pre/code blocks */
pre, code {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Responsive text that doesn't overflow */
h1, h2, h3, h4, h5, h6, p, span, a, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix long words/URLs */
.break-words {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Mobile header fixes */
@media (max-width: 640px) {
    /* Smaller logo on mobile */
    header img[alt*="logo"],
    header img[alt*="Logo"],
    nav img[alt*="logo"],
    nav img[alt*="Logo"] {
        width: 40px !important;
        height: 40px !important;
    }

    /* Hide site title text on mobile - keep only logo */
    header a > span.font-serif,
    nav a > span:not(.hidden),
    nav > div > a > span:last-child:not([class*="hidden"]) {
        display: none !important;
    }

    /* Also hide "Fuglehundprøve" text that's direct child of link */
    nav a.font-serif {
        font-size: 0 !important;
    }
    nav a.font-serif img {
        font-size: 1rem;
    }

    /* Smaller header text for other elements */
    header .font-serif:not(a > span) {
        font-size: 0.875rem;
    }

    /* Compact header padding */
    header > div,
    nav > div {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Smaller buttons on mobile */
    header button,
    header a[class*="rounded"],
    nav button {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Fix nav overflow */
    nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure main content doesn't overflow */
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Fix modals on mobile */
    [class*="fixed inset-0"] > div {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    /* Responsive grid on mobile */
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    header img[alt*="logo"],
    header img[alt*="Logo"] {
        width: 32px !important;
        height: 32px !important;
    }

    header .font-serif {
        font-size: 0.75rem;
    }

    /* Even smaller buttons */
    header button,
    header a[class*="rounded"] {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }

    /* Single column on very small screens */
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}