/* ==============================================================
   mobile-wcag.css — Roadmap #14: Mobil/WCAG-fikser
   Samler fiksene fra mobilrevisjonen 2026-03-27:
     1) Dropdown-menyer overflow på små skjermer
     2) Tabeller mangler horisontal scroll
     3) Hero skalerer ikke under 480px
     4) Knapper/inputs under 44px touch-target (WCAG 2.5.5 / 2.5.8)
   Additiv: kun media-query-scopede regler. Lastes SIST i _Layout
   (offentlig) og _LxLayout (innlogget) slik at den vinner på kilderekkefølge.
   ============================================================== */

/* ---------- 1. Dropdown-overflow på små skjermer ---------- */
@media (max-width: 640px) {
    .gh-nav-dropdown-menu,
    .gh-lang-dropdown-menu,
    .gh-lang-menu,
    .lx-dropdown-menu {
        max-width: calc(100vw - 24px);
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 70vh;
        box-sizing: border-box;
    }
    /* Hindre at absolutt-posisjonerte menyer stikker ut til høyre for viewporten */
    .gh-nav-dropdown-menu,
    .lx-dropdown-menu {
        right: auto;
        left: 0;
    }
}

/* ---------- 2. Tabeller — horisontal scroll i stedet for layout-sprenging ---------- */
@media (max-width: 640px) {
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Cellene holdes på én linje slik at brede tabeller scroller
       horisontalt i stedet for å presses sammen til svært høye rader. */
    table th,
    table td {
        white-space: nowrap;
    }
}

/* ---------- 3. Hero skalerer under 480px ---------- */
@media (max-width: 480px) {
    .hero {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 72px;
        padding-bottom: 56px;
    }
    .hero-container {
        max-width: 100%;
    }
    .hero-title {
        font-size: clamp(1.75rem, 8vw, 2.4rem);
        line-height: 1.15;
        word-break: break-word;
    }
    .hero-subtitle {
        font-size: clamp(0.95rem, 4vw, 1.05rem);
        line-height: 1.5;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

/* ---------- 4. 44px touch-targets (WCAG 2.5.5 / 2.5.8) ---------- */
@media (max-width: 768px) {
    button,
    .btn-ironforge,
    .gh-btn,
    .gh-icon-btn,
    .lx-btn,
    .lx-icon-btn,
    .lx-lang-btn,
    .av2-btn,
    .av2-btn-sm,
    input[type="submit"],
    input[type="button"],
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="date"] {
        min-height: 44px;
    }
    /* Ikon-knapper trenger også bredde nok til en trygg treffflate */
    .gh-icon-btn,
    .lx-icon-btn {
        min-width: 44px;
    }
    /* Avkrysningsbokser og radioknapper — større treffflate */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }
}