/* =====================================================================
 * responsive.css — every media query for the site (screen sizes,
 * reduced motion, print). Loaded after style.css.
 * ===================================================================== */

/* ---------- Small screens and up (≥ 640px) ---------- */
@media (min-width: 640px) {
    .container-site { padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right)); }
}

/* ---------- Desktop (≥ 1024px) ---------- */
@media (min-width: 1024px) {
    .container-site { padding-inline: 2rem; }
    .app-tabbar-space { padding-bottom: 0; }
    .above-bottom-bar { bottom: 1.5rem; }
}

/* ---------- Phones & tablets (< 1024px) ---------- */
/* App-like feel: no long-press callouts on buttons, drawers don't scroll the page behind. */
@media (max-width: 1023.98px) {
    a, button, summary, label { touch-action: manipulation; }
    button, [role="button"], .app-tabbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    #cart-body, #mobile-menu nav, #filters { overscroll-behavior: contain; }
}

/* ---------- Phones (< 640px) ---------- */
@media (max-width: 640px) {
    /* Blog article */
    .blog-content { font-size: 1rem; }
    .blog-content h2 { font-size: 1.55rem; }
    .blog-content h3 { font-size: 1.2rem; }
    .blog-content figure.image-style-side { float: none; max-width: 100%; margin: 1.5em 0; }
}
@media (max-width: 639px) {
    /* Flipbook */
    .hide-phone { display: none !important; }
}

/* ---------- Phones held sideways (flipbook): shrink the bars so the book gets the height ---------- */
@media (max-height: 500px) {
    .reader header > div { padding-block: .25rem; }
    .reader header .text-xs { display: none; }
    #stage { padding: .25rem; }
    #controls > div { padding-block: .2rem; }
    .icon-btn { width: 2.25rem; height: 2.25rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .offer-ticker-track { animation: none; }
    .dbk-draw, .dbk-curl { animation: none; stroke-dashoffset: 0; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Print: the book preview and reader can't be printed ---------- */
@media print {
    html.page-preview body *, html.page-flipbook body * { display: none !important; }
    html.page-preview body::after { content: 'Preview cannot be printed.'; display: block !important; }
    html.page-flipbook body::after { content: 'This book cannot be printed from the reader.'; display: block !important; }
}