/* Phone and tablet layout for every booksite page: the Django-rendered
   ones (base.html links this file) and the served chapter pages
   (chapters.views._inject_site_nav links it next to the nav it injects).
   See docs/booksite-responsive-and-apps-design.md.

   Breakpoints, used here and to be used for new styles:
     phone    < 640px   (max-width: 639px)
     tablet   640-1023px
     desktop  >= 1024px (min-width: 1024px) */

/* ---- Nav: on phones, brand + account + a menu button on one row; the
   section tabs and language switcher fold into a panel. Pure CSS (a
   checkbox and its label), so it works on the injected chapter pages
   too. */
.site-nav .nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.site-nav .nav-burger { display: none; }

@media (max-width: 639px) {
    .site-nav { flex-wrap: wrap; align-items: center; row-gap: 4px; }
    .site-nav .brand { margin-right: auto; }
    /* Let the account menu, tabs and switcher take part in the nav's own
       row layout so they can be reordered. */
    .site-nav .links { display: contents; }
    .site-nav .user-menu,
    .site-nav .nav-login,
    .site-nav .nav-signup { order: 2; }
    .site-nav .nav-burger {
        order: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: 2px;
        border-radius: 8px;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }
    .site-nav .nav-burger::before { content: "\2630"; }  /* ☰ */
    .site-nav .nav-toggle:checked ~ .nav-burger::before { content: "\2715"; }  /* ✕ */
    .site-nav .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid currentColor; }
    .site-nav .nav-tabs,
    .site-nav .lang-switch { display: none; order: 4; width: 100%; }
    .site-nav .nav-toggle:checked ~ .links .nav-tabs {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-top: 6px;
    }
    .site-nav .nav-toggle:checked ~ .links .nav-tabs a.nav-tab { padding: 10px 12px; }
    .site-nav .nav-toggle:checked ~ .links .lang-switch { display: block; padding: 8px 12px 4px; }
    .site-nav .nav-sep { display: none; }
}

/* ---- Formulas: MathJax lays a formula out at its natural width and lets
   it spill out of its box, which widened chapter pages to 500-650px on a
   390px phone. Each formula now scrolls sideways inside its own box. */
mjx-container[jax] { max-width: 100%; }
mjx-container[display="true"] {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
mjx-container:not([display="true"]) {
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
}

/* ---- Wide content in chapter text */
main img, article img, .chapter-content img { max-width: 100%; height: auto; }
main table, article table { display: block; max-width: 100%; overflow-x: auto; }

@media (max-width: 639px) {
    /* Peanutbook's .wrap figures float beside a few lines of text; on a
       phone that squeezes the text into a sliver, so they take a full row
       (!important: bubble writes the float and width inline). */
    img.wrap, figure.wrap { float: none !important; width: auto !important; max-width: min(100%, 420px) !important; margin: 12px auto !important; display: block; }

    /* Rewards: link box and its Copy button one above the other */
    .ref-link-row { flex-direction: column; align-items: stretch; }
    .ref-link-row .btn { width: 100%; }

    /* Tap targets at least 44px (Apple and Android guidance) */
    .ref-share-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .site-footer-links a { display: inline-block; padding: 11px 6px; }
}