/* =====================================================================
   Universal Responsive & Cross-Platform Base
   ---------------------------------------------------------------------
   Loaded on every page after style.css. Makes the app behave correctly
   on ANY OS (Windows, macOS, Android, iOS, Linux, ChromeOS), ANY device
   (phone, tablet, laptop, desktop, ultra-wide / advertising TV) and ANY
   screen size.

   Rules are low-specificity and additive so page stylesheets can still
   override them.
   ===================================================================== */

/* ---- Breakpoint & layout tokens (use in calc / custom properties) ---- */
:root {
    --bp-phone-sm: 360px;
    --bp-phone: 480px;
    --bp-tablet: 768px;
    --bp-tablet-lg: 1024px;
    --bp-laptop: 1280px;
    --bp-desktop: 1536px;
    --bp-wide: 1920px;
    --bp-ultra: 2560px;
    --bp-tv: 3840px;

    --content-max-width: 1200px;
    --content-padding-inline: clamp(12px, 3vw, 32px);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --touch-target-min: 44px;
}

/* Scale readable content width on large monitors & TVs */
@media (min-width: 1280px) {
    :root {
        --content-max-width: min(92vw, 1360px);
    }
}

@media (min-width: 1600px) {
    :root {
        --content-max-width: min(90vw, 1520px);
    }
}

@media (min-width: 1920px) {
    :root {
        --content-max-width: min(88vw, 1680px);
    }
}

@media (min-width: 2560px) {
    :root {
        --content-max-width: min(82vw, 2000px);
    }
}

@media (min-width: 3840px) {
    :root {
        --content-max-width: min(76vw, 2800px);
    }
}

/* ---- Consistent box model everywhere ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---- Root: consistent text scaling across OS/browsers ---- */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    background-color: #eef5f9;
    height: 100%;
    /* Prevent layout shift when scrollbars appear (Windows / Linux). */
    scrollbar-gutter: stable;
}

/* ---- No accidental horizontal scrollbars on any device ---- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    overscroll-behavior-y: none;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Main app shell respects notch / home-indicator insets */
#app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Shared content containers grow gently on large screens */
.container,
.home-container,
.dialogue-container,
.choose-mode-page {
    max-width: var(--content-max-width);
}

/* ---- Fluid media: never overflow their container ---- */
img,
video,
canvas,
svg,
picture,
iframe,
object,
embed {
    max-width: 100%;
}

img,
video,
canvas,
picture {
    height: auto;
}

/* ---- Comfortable touch on phones/tablets ---- */
a,
button,
[role="button"],
input,
select,
textarea,
label,
.nav-link,
.mobile-tab {
    -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
a {
    touch-action: manipulation;
}

/* ---- Form controls inherit typography consistently across OS ---- */
input,
button,
select,
textarea {
    font-family: inherit;
    line-height: inherit;
}

/* Coarse-pointer devices: avoid tiny tap targets (iOS HIG / Material) */
@media (pointer: coarse) {
    .nav-install-btn,
    .notification-bell-btn,
    .go-back-button,
    .ll-manual-back,
    .auth-nav-profile .avatar {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
}

/* ---- Fixed navbar: safe-area + mobile-tab offset sync ---- */
.navbar {
    padding-left: max(0.75rem, var(--safe-left));
    padding-right: max(0.75rem, var(--safe-right));
}

@media (max-width: 768px) {
    /* mobile-tabs.css uses a compact bar; keep offset in sync when tabs exist */
    body:has(.mobile-tab-bar:not([hidden])) {
        --navbar-offset: 58px;
    }

    .navbar {
        padding-top: max(8px, var(--safe-top));
    }
}

/* ---- Popups & modals: fit any viewport height (mobile browser chrome) ---- */
.popup-overlay,
.native-lang-overlay,
.group-learning-overlay {
    padding:
        max(12px, var(--safe-top))
        max(12px, var(--safe-right))
        max(12px, var(--safe-bottom))
        max(12px, var(--safe-left));
}

.popup-content {
    width: min(100%, 520px);
    max-height: min(90dvh, 90vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ---- Tables: horizontal scroll instead of page overflow ---- */
.table-wrap,
.dataTables_wrapper,
.dataTables_scroll,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper table,
table.dataTable {
    max-width: none;
}

/* ---- Toast stack: respect safe areas on notched phones ---- */
#toast-container {
    top: max(12px, calc(var(--navbar-offset, 64px) + var(--safe-top) + 8px));
    right: max(12px, var(--safe-right));
    left: max(12px, var(--safe-left));
}

/* ---- Tablet portrait / small laptop (769px – 1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding: 0.65rem 1rem;
    }

    .nav-links-center {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nav-divider:first-of-type {
        display: none;
    }

    .home-hero {
        grid-template-columns: 1fr;
        padding: 32px 28px;
        text-align: left;
    }

    .home-hero-content {
        max-width: none;
    }

    .home-hero-illustration {
        justify-self: center;
        max-width: min(480px, 100%);
    }

    .choose-mode-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Large / ultra-wide screens & TVs: scale rem-based UI ---- */
@media (min-width: 2200px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 3000px) {
    html {
        font-size: 20px;
    }
}

@media (min-width: 3800px) {
    html {
        font-size: 24px;
    }
}

/* Advertising / conference displays: slightly larger hero & nav on TVs */
@media (min-width: 2200px) and (min-height: 1200px) {
    .nav-brand-logo {
        height: clamp(42px, 2.8vw, 72px);
        max-width: min(320px, 22vw);
    }

    .home-heading {
        font-size: clamp(2.5rem, 3.2vw, 4rem);
    }

    .home-subheading {
        font-size: clamp(1.05rem, 1.4vw, 1.5rem);
    }
}

/* ---- Phones & small tablets: prevent iOS focus-zoom on inputs ---- */
@media (max-width: 768px) {
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    textarea {
        font-size: max(16px, 1em);
    }

    .popup-content {
        width: min(100%, 100vw - 24px);
        margin: 0;
        padding: 1.25rem;
    }

    .container,
    .home-container,
    .dialogue-container {
        padding-left: max(10px, var(--content-padding-inline));
        padding-right: max(10px, var(--content-padding-inline));
    }
}

/* Very narrow phones (iPhone SE, small Android) */
@media (max-width: 360px) {
    .navbar {
        padding-left: max(8px, var(--safe-left));
        padding-right: max(8px, var(--safe-right));
    }

    .home-container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ---- Landscape phones / very short viewports ---- */
@media (max-height: 480px) and (orientation: landscape) {
    body {
        overflow-y: auto;
    }

    .popup-content {
        max-height: min(85dvh, 85vh);
    }
}

/* ---- Virtual keyboard: keep focused fields visible (modern mobile browsers) ---- */
@supports (height: 100dvh) {
    body.keyboard-open .page,
    body.keyboard-open .dialogue-container {
        min-height: auto;
    }
}

/* ---- Respect users who prefer reduced motion (all OS) ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- High contrast mode (Windows, some Android) ---- */
@media (prefers-contrast: more) {
    .navbar,
    .popup-content,
    .mobile-tab-bar {
        border-width: 2px;
    }

    .nav-link:focus-visible,
    .mobile-tab:focus-visible,
    button:focus-visible,
    a:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* ---- High-DPI icon crispness (Retina / most modern phones) ---- */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    svg {
        shape-rendering: geometricPrecision;
    }
}

/* ---- Hover-free devices: don't rely on hover-only affordances ---- */
@media (hover: none) {
    .nav-link:hover,
    .mobile-tab:hover {
        background: inherit;
    }
}

/* ---- Print: readable on any paper size ---- */
@media print {
    html,
    body {
        overflow: visible;
        max-width: none;
        background: #fff !important;
    }

    .navbar,
    .mobile-tab-bar,
    #toast-container,
    .popup-overlay {
        display: none !important;
    }

    body {
        padding-top: 0 !important;
    }

    .page {
        display: block !important;
        height: auto !important;
        max-height: none !important;
    }
}